Usability & Visual Design Krystine Wetherill
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 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?
Example • UNCW website redesignhttp://www.uncw.edu/ed/Task: Find admissions info for WatsonTask: 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 (http://www.uncw.edu/feeltheteal/)
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 with explanation Example: Facebook Then Facebook Now
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.
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 - playback buttons - save icon
Don’t think design matters? • Jakob Nielsen – Usability ExpertHis 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 • Not considering the impact of the design • Lack of unity • Graphics don’t match (Smith & Goldsmith) • 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- serif vs. sans serif - too many fonts!
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 http://www.articulate.com/rapid-elearning/3-graphic-design-principles-for-instructional-design-success/
Good vs. Bad • Good and Bad Web Design Elements • Web Pages That Stink • http://www.georgehutchins.com/ • http://www.arngren.net/ • http://www.dpgraph.com/ • http://www.gatesnfences.com/ • http://smithandgoldsmith.homestead.com/home.html • Web Pages That Don’t • http://design-newz.com/ • http://ismaelburciaga.com/ • http://meacuppa.com/ • http://www.moma.org/
Information Sources • Usability.gov • Usabilityfirst.com • Community.articulate.com – awesome tips and resources! • Kuler.com – color schemes for you! • The Non-Designer’s Design & Type Books • Conquering the Content