Usability & Visual Design Krystine Adams
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 do you measure that? Simple: 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?
Examples of how we do this NAVIGATION Always in the same place Generally on the left side or on top Not too many options If you’re designing for mobile, is the button big enough for a finger! COLORS & TYPE Not too many colors! Considering color blindness for color cues – Color Vision Test (Firefox) Contrasting in color text against the background Never underlining something that is not a link Using HEADERS and hierarchy for formatting
Example UNCW Website: http://www.uncw.edu Task: Find the Academic Calendar Task: How do you get to the Watson College of Education website? Task: How do you get to the Bookstore? UNCW Viewbook (http://www.uncw.edu/feeltheteal/) 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?
REPEAT! 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 without explanation Example: YOUR MOM USING SNAPCHAT!!
Visual Design Is The Tool To Relay The Message 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 (See how I just used it with this awesome big, bold text)
Visual Design Basics SKEUOMORPHISM!!! Your everyday experiences are based-on, revolves around, includes and shapes visual design. Computer icons – design communicates the function trash can folders save icon SKEUOMORPHISM!!!
Don’t think design matters? Jakob Nielsen – Usability Expert His 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 Example: Smith & Goldsmith Not considering the impact of the design Lack of unity Graphics don’t match 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 readability too many fonts!
Yes we C.A.R.P. CONTRAST ALIGNMENT REPETITION PROXIMITY If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more ALIGNMENT Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! REPETITION Unifying elements by using same font, colors, shapes (show target) Repeating elements can take on a pattern PROXIMITY Things that are close to each other, immediately feel connected!
Contrast If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more BIG small
Alignment Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! Misalignment is irritating!
repetition Unify elements by using same font, colors, shapes Repeating elements to create patterns Repeating colors to create themes Making headers consistent
Proximity Things that are close to each other, immediately feel connected! Get down with the Gestalt Theory!!
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
Good vs. Bad Good and Bad Web Design Elements Web Pages That Stink http://www.georgehutchins.com/ http://www.arngren.net/ http://www.gatesnfences.com/ http://smithandgoldsmith.homestead.com/home.html http://www.dpgraph.com/ Web Pages That Don’t http://design-newz.com/ http://ismaelburciaga.com/ http://meacuppa.com/ https://www.thebestdesigns.com/
Information Sources Usability.gov Usabilityfirst.com Adobe Color CC – color schemes for you! The Non-Designer’s Design & Type Books Conquering the Content