1. Usability & Visual Design Krystine Wetherill

2.  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?

3.  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?

4.  UNCW website redesign http://www.uncw.edu/ed/ Task: Find admissions info for Watson Task: Find information for students http://www.uncw.edu/ed/  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 (http://www.uncw.edu/feeltheteal/) UNCW Viewbookhttp://www.uncw.edu/feeltheteal/) Example

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

6.  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?

7.  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?

8.  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?

9.  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 www.uncw.edu/ed Information Architecture

10.  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

11.  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?

12.  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

13.  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?

14.  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

15.  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 http://www.articulate.com/rapid-elearning/3-graphic-design-principles-for-instructional-design-success/

16.  Good and Bad Web Design Elements Good and Bad Web Design Elements  Web Pages That Stink  http://www.georgehutchins.com/ http://www.georgehutchins.com/  http://www.arngren.net/ http://www.arngren.net/  http://www.dpgraph.com/ http://www.dpgraph.com/  http://www.gatesnfences.com/ http://www.gatesnfences.com/  http://smithandgoldsmith.homestead.com/home.html http://smithandgoldsmith.homestead.com/home.html  Web Pages That Don’t  http://design-newz.com/ http://design-newz.com/  http://ismaelburciaga.com/ http://ismaelburciaga.com/  http://meacuppa.com/ http://meacuppa.com/  http://www.moma.org/ http://www.moma.org/ Good vs. Bad

17.  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