How to Give Good UI!?

Download How to Give Good UI!?

Post on 05-Feb-2016

26 views

Category:

Documents

0 download

DESCRIPTION

How to Give Good UI!?. Wayne Weibel Interface/Web/Drupal Developer LII / Legal Information Institute. Why Another Usability Talk?. Debunk the Buzz Words This is not good enough: we need the USP for the UX not the UI - PowerPoint PPT Presentation

TRANSCRIPT

How to Give Good UI!?Wayne WeibelInterface/Web/Drupal DeveloperLII / Legal Information InstituteWhy Another Usability Talk?Debunk the Buzz WordsThis is not good enough: we need the USP for the UX not the UIThe user experience of the site is increasing the usability of users to interact through our interfaceWhy Another Usability Talk?Debunk the Buzz WordsUI vs. UX vs. UsabilityWhy Another Usability Talk?Debunk the Buzz WordsUI vs. UX vs. UsabilityInterface [ UI ]Why Another Usability Talk?Debunk the Buzz WordsUI vs. UX vs. UsabilityInterface [ UI ]Experience [ UX ]theoatmeal.comtheoatmeal.comJim Crow Museumtheoatmeal.comtheoatmeal.comWhy Another Usability Talk?Debunk the Buzz WordsUI vs. UX vs. UsabilityInterface [ UI ]Experience [ UX ]UsabilityUsability is NOT ...DesignUsability is NOT ...DesignProgrammingUsability is NOT ...DesignProgrammingAccessibility}affectsUsabilityUsability is NOT ...DesignProgrammingAccessibilityMarketing}affectsUsabilityUsability is NOT ...DesignProgrammingAccessibilityMarketingMarketing}affectsUsabilityUsability is NOT ...DesignProgrammingAccessibilityMarketingMarketingdid I mention ... Marketing}affectsUsabilityUsability IS ...Make everything as simple as possible, but not simpler - EinsteinWhenever possible, substitute constructions out of known entities for inferences to unknown entities. - Bertrand Russel, Occams razorK.I.S.SUsability IS ...Make everything as simple as possible, but not simpler - EinsteinWhenever possible, substitute constructions out of known entities for inferences to unknown entities. - Bertrand Russel, Occams razorK.I.S.S = Keep It Simple Stupid ... optimizing a users ability to complete a taskHow about some examples:University of Chicago - Flu Vaccination Malcolm Gladwells Tipping PointNASA Space Pen 10 years and $12 Billion dollarsHow about some examples:University of Chicago - Flu Vaccination Malcolm Gladwells Tipping PointNASA Space Pen 10 years and $12 Billion dollarsThe MOST usable interface:theoatmeal.comRules of ThumbJakob Nielsen - useit.comDon Norman => Nielsen/Norman Group - nngroup.com10 Heuristics for Usability with Rolf MolichRules of ThumbJakob Nielsen - useit.comDon Norman => Nielsen/Norman Group - nngroup.com10 Heuristics for Usability with Rolf Molich ... boil down to 3 varieties:FamiliarityFeedbackFlexibilityOn The InternetSection 508Workforce Investment Act of 199821st Century Communications and Video Accessibility Act of 2010On The InternetSection 508 ...Guides (not rules)W3C AccessibilityWeb Content Accessibility Guidelines 2.0WebAIM (Accessibility In Mind)On The InternetSection 508 ...Guides ...ToolsVisicheck (color blindness check)Color BlindnessProtanopia/Deuteranopia = red/greenTritanopia = blue/yellow (rare)~ 10% Males< 0.5% Femaleshow about some numbersColor BlindnessProtanopia/Deuteranopia = red/greenTritanopia = blue/yellow (rare)~ 10% Males< 0.5% Females~ 5% of population or 1 in 201000 ~= 50 peoplehow about some numbersOn The InternetSection 508 ...Guides ...ToolsVisicheck (color blindness check)UI Patterns (examples and forum)Dead Link Checker (lots of em)Usability ArtifactsPersonas == Stakeholders / User Groups - primary, secondary, tertiaryUsability ArtifactsPersonas == Stakeholders / User Groups - primary, secondary, tertiaryuse proper namesgive personal traitswhat reason to use interfacescenario/schema of useUsability ArtifactsPersonas == Stakeholders / User Groups - primary, secondary, tertiaryWireframes - fancy word for sketchesUsability ArtifactsPersonas == Stakeholders / User Groups - primary, secondary, tertiaryWireframes - fancy word for sketchesPrototypes - even just glue and paper, stub out functionsUsability ArtifactsPersonasWireframesPrototypesConceptual / Mental Modelshow the developer thinks it workshow the system actually workshow the user thinks it worksUser TestingANYone can do it (yes, even you!)User TestingANYone can do it (yes, even you!)You set the cost (depending on data) *User TestingANYone can do it (yes, even you!)You set the cost (depending on data) *30 - 60 min; more often == less time neededUser TestingANYone can do it (yes, even you!)You set the cost (depending on data) *30 - 60 min; more often == less time neededOne Catch - must have specific tasks/featuresUser TestingANYone can do it (yes, even you!)You set the cost (depending on data) *30 - 60 min; more often == less time neededOne Catch - must have specific tasks/featuresDuring Testing:Have designers and programmers watchUser TestingANYone can do it (yes, even you!)You set the cost (depending on data) *30 - 60 min; more often == less time neededOne Catch - must have specific tasks/featuresDuring Testing:Have designers and programmers watchEncourage user to think out loud* for you researchers ...There Is No SpoonUsability is Highly SubjectiveThere Is No SpoonUsability is Highly SubjectiveDecide who is your audience, then build to themThere Is No SpoonUsability is Highly SubjectiveDecide who is your audience, then build to themKeep things familiar, but not identicalThere Is No SpoonUsability is Highly SubjectiveDecide who is your audience, then build to themKeep things familiar, but not identicalKnow when to break the designThere Is No SpoonUsability is Highly SubjectiveDecide who is your audience, then build to themKeep things familiar, but not identicalKnow when to break the designTest OftenThere Is No SpoonUsability is Highly SubjectiveDecide who is your audience, then build to themKeep things familiar, but not identicalKnow when to break the designTest OftenIf you meet a Usability Expert, kill him.