Usability & Visual Design Krystine Wetherill

 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 fast can users learn and use a product to achieve their goals? What is 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? How do you measure Usability?

 UNCW website redesign Task: Find admissions info for Watson Task: Find information for students  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?  UNCW Viewbook ( UNCW Viewbookhttp:// Example

 Inspiration - initial ideas, insights and new ideas  Validation - testing, feedback and development  Evaluation - effectiveness and impact Usability Roadmap REPEAT!

 Why have good usability? - user satisfaction - reduces training time and cost - better understanding  Elements of good usability: - User-Centered Design - Visual Design What makes up Usability?

 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 is User-Centered Design?

 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? What does that mean?

 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  Information Architecture

 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 with explanation Example: Facebook ThenFacebook Then Facebook Now UCD Pitfalls

 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. What is Visual Design?

 Your everyday experiences are based-on, revolves around, includes and shapes visual design.  Computer icons – design communicates the function - trash can - folders - playback buttons - save icon Visual Design Basics

 Jakob Nielsen – Usability Expert His website in 2012 – Original UseIt.com Jakob Nielsen His website in 2012Original 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 Apple.com iPodiTunesiMac Don’t think design matters?

 Not considering the impact of the design  Lack of unity  Graphics don’t match (Smith & Goldsmith)Smith & Goldsmith  Confusing Use of Contrast - size - colors and values (Mea Cuppa, an example of good) - type (bold, italic, size, alignment) - elements & graphicsContrastMea Cuppa  Misuse of Fonts - comic sans must die - serif vs. sans serif - too many fonts! comic sans must dieserif vs. sans seriftoo many fonts! 5 Common Mistakes

 Use layouts to convey meaning and relationships: exampleexample  Use patterns and repetition to organize your content: exampleexample  Use only the images you need. exampleexample 3 Design Principals

 Good and Bad Web Design Elements Good and Bad Web Design Elements  Web Pages That Stink       Web Pages That Don’t     Good vs. Bad

 Usability.gov Usability.gov  Usabilityfirst.com Usabilityfirst.com  Community.articulate.com – awesome tips and resources! Community.articulate.com  Kuler.com – color schemes for you! Kuler.com  The Non-Designer’s Design & Type Books The Non-Designer’s Design & Type Books  Conquering the Content Conquering the Content Information Sources