Embed Size (px)
Citation preview
Usability & Visual DesignKrystine 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 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/)
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
www.uncw.edu/ed
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 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 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
Don’t think design matters?
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!
5 Common Mistakes
Use layouts to convey meaning and relationships: example
Use patterns and repetition to organize your content: example
Use only the images you need. example
3 Design Principals
http://www.articulate.com/rapid-elearning/3-graphic-design-principles-for-instructional-design-success/
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/
Good vs. Bad
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
Information Sources
