Understanding Usability and Visual Design Principles
Explore the importance of usability and visual design in creating a seamless user experience. Learn how usability is measured, examples of implementation, and the significance of user-centered design. Dive into usability roadmaps and discover what makes up good usability for enhanced user satisfaction.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
USABILITY & VISUAL DESIGN Krystine Adams
WHAT IS USABILITY? Usability measures the quality of a user's experience when interacting with a product or system whether a Web site, a software application, mobile technology, online class or any user-operated device. How do you measure that? Simple: How fast can users learn and use a product to achieve their goals?
HOW DO YOU MEASURE USABILITY? Usability is not a single property. It is made up of several factors, including, but not limited to: Ease of learning How long? Efficiency of use How easy? Memorability Can I do it again? Error frequency and severity I m lost! Subjective satisfaction Did I do it? Did I like it?
EXAMPLES OF HOW WE DO THIS NAVIGATION Always in the same place Generally on the left side or on top Not too many options If you re designing for mobile, is the button big enough for a finger! COLORS & TYPE Not too many colors! Considering color blindness for color cues Color Vision Test (Firefox) Contrasting in color text against the background Never underlining something that is not a link Using HEADERS and hierarchy for formatting
EXAMPLE UNCW Website: http://www.uncw.edu Task: Find the Academic Calendar Task: How do you get to the Watson College of Education website? Task: How do you get to the Bookstore? UNCW Viewbook (http://www.uncw.edu/feeltheteal/) Can you find what you are looking for? Does it look good and fit in your browser? Do you like the colors? Are they too light/dark? Do the links work properly? What would you change?
USABILITY ROADMAP INSPIRATION - initial ideas, insights and new ideas VALIDATION - testing, feedback and development EVALUATION - effectiveness and impact REPEAT!
WHAT MAKES UP USABILITY? Why have good usability? user satisfaction reduces training time and cost better understanding Elements of good usability: User-Centered Design Visual Design
WHAT IS USER-CENTERED DESIGN? User Centered-Design (UCD) is a philosophy and a process. It is a philosophy that places the person (as opposed to the 'thing') at the center; it is a process that focuses on cognitive factors (such as perception, memory, learning, problem- solving, etc.) as they come into play during peoples' interactions with things.
WHAT DOES THAT MEAN? UCD seeks to answer questions about users and their tasks and goals, then use the findings to drive development and design. UCD seeks to answer questions like: Who are the users? What are their goals or tasks? What is the user experience level? What functions do they need? What information do they need? How do they think it will work? How does the design help them learn?
INFORMATION ARCHITECTURE Plan out every detail of your site! Create intuitive navigation for your product. Organize your information in easy to understand lists BE CONSISTENT!! Don t change your navigation throughout the product 3 Click Minimum No user wants to go down the rabbit hole of links! Think about global navigation, local or sub-navigation, and utility links www.uncw.edu/ed
UCD PITFALLS YOU RE THE EXPERT! Don t assume the user understands the process or has the same goals as you. TECH SAVVY? Don t assume the user has the same technical skills as you. INSIDER TERMS! Don t use terminology without explanation Example: YOUR MOM USING SNAPCHAT!!
WHAT IS VISUAL DESIGN? Visual design is the visual representation and support of the information architecture, interaction and goals of your product, whether an application or website. Visual Design Is The Tool To Relay The Message (See how I just used it with this awesome big, bold text)
VISUAL DESIGN BASICS Your everyday experiences are based-on, revolves around, includes and shapes visual design. Computer icons design communicates the function trash can folders save icon SKEUOMORPHISM!!!
DONT THINK DESIGN MATTERS? Jakob Nielsen Usability Expert His website in 2012 Original UseIt.com Apple.com Think about the impact that Apple products have made - not because they necessarily work better than other machines, phones or music players; but because they have a style and a stylish iLife that accompanies them. iPod, iTunes, iMac
5 COMMON MISTAKES Example: Smith & Goldsmith Not considering the impact of the design Lack of unity Graphics don t match Confusing Use of Contrast size colors and values (Mea Cuppa, an example of good) type (bold, italic, size, alignment) elements & graphics Misuse of Fonts comic sans must die readability too many fonts!
YES WE C.A.R.P. CONTRAST If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more ALIGNMENT Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! REPETITION Unifying elements by using same font, colors, shapes (show target) Repeating elements can take on a pattern PROXIMITY Things that are close to each other, immediately feel connected!
CONTRAST If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more small
ALIGNMENT Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! Misalignment is irritating!
REPETITION Unify elements by using same font, colors, shapes Repeating elements to create patterns Repeating colors to create themes Making headers consistent
PROXIMITY Things that are close to each other, immediately feel connected! Get down with the Gestalt Theory!!
3 DESIGN PRINCIPALS Use layouts to convey meaning and relationships: example Use patterns and repetition to organize your content: example Use only the images you need: example
GOOD VS. BAD Good and Bad Web Design Elements Web Pages That Stink http://www.georgehutchins.com/ http://www.arngren.net/ http://www.gatesnfences.com/ http://smithandgoldsmith.homestead.com/home.html http://www.dpgraph.com/ Web Pages That Don t http://design-newz.com/ http://ismaelburciaga.com/ http://meacuppa.com/ https://www.thebestdesigns.com/
INFORMATION SOURCES Usability.gov Usabilityfirst.com Adobe Color CC color schemes for you! The Non-Designer s Design & Type Books Conquering the Content
