1 / 17

Usability & Visual Design

Usability & Visual Design. Krystine Wetherill. What is Usability?.

makala
Download Presentation

Usability & Visual Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Usability & Visual Design Krystine Wetherill

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

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

  4. 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/)

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

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

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

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

  9. 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

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

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

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

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

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

  15. 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/

  16. 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/

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

More Related