Transcription
UI Requirements andDesignCSE 403, Spring 2008Material in part from Marty Stepp and Valentine Razmov, past 403 classes.
Usabilityy and software designgyusability: the effectiveness with which users canachievehittasksk iin one softwareftenvironmentito Studying and improving usability is part ofHuman-Computer Interaction (HCI)(HCI).CSE 403, Spring 2008
Good UI designg and usabilityyyyUsability and good UI design are closely related.A badb d UI can hhave unfortunatef tt results.ltCSE 403, Spring 2008
Achievingg usabilityyySome methods to achieve good usability are:o User testing / field studieso Evaluations and reviews by UI expertso PrototypingPaper prototyping, code prototypingGood UI design focuses on the user,usernot on the developer or on the systemenvironmentCSE 403, Spring 2008
Paperp prototypingpyp gpaper prototyping: a means of usability testingwhere representative users perform tasks byinteracting with a paper version of a rver(s)UserCSE 403, Spring 2008
Whyypprototypeyp on paper?p py Why not justSpring 08 says:ooooooocode up a working prototype?Faster to use paper to get an initial prototype outEasier to change, to experiment withEncourages feedback, as users don’t feel like it’s a bigdeal to change at this timeFocuses feedback on big things vs small (like the font)Self documenting; can springboard from the paperdescription to an implementationImplementation neutralAllows the user to drive the designgCSE 403, Spring 2008
Comparisonpof techniquesqpaper prototypeease of usefast turn-aroundflexibility, controlexecutableteam designCSE 403, Spring 2008UI builderactualimplementation
Let’s move into UI design gCSE 403, Spring 2008(from Designing the User Interface, by Ben Schneiderman of UMD, noted HCI/UI design expert)
UI designgyWhen should we use:oooooooooA button?b tt ?A check box?A radio button?A text field?A list?A combo box?A menu?A dialog box?Other.?CSE 403, Spring 2008
UI designg - buttons,, menusyUse buttons for single independent actions thatare relevant to the current screenscreen.yUse toolbars for common actions.yUse menus for infrequent actions that may beapplicableli bl tto many or allll screens.CSE 403, Spring 2008
Checkboxes,, radio buttonsyUse check boxes for on/off switches, when any oneswitch can be toggledggirrespectivepof the others ((oftencorrespond to boolean values).yUse radio buttons for related choiceschoices, when only onechoice can be activated at a time (often corresponds toenum / constant values).CSE 403, Spring 2008
Lists,, combo boxesyuse text fields (usually with alabel)) when the user mayy typeyp inanything they wantyuse listsli t whenh ththere are manyfixed choices (too many for radiobuttons to be practical) and youwantt allll choicesh ivisiblei ibl on screenat onceyuse combo boxes when thereare many fixed choices, but youdon't want to take up screen realestate by showing them all atonce (scroll)CSE 403, Spring 2008
UI designg - multiplep screensyuse a tabbed pane when there are manyscreens that the user may want to switchbetween at any momentyuse dialog boxes or option panes to presenttemporary screens or optionsCSE 403, Spring 2008
An examplep UIyWhat can we say about this GetInfo dialog? Didthe designer choose the right components?Assume 30 properties.CSE 403, Spring 2008
How about this oneCSE 403, Spring 2008
One more to analyzeyCSE 403, Spring 2008
BetterCSE 403, Spring 2008
Good UI: Applepp MacCSE 403, Spring 2008
Poor UICSE 403, Spring 2008
Poor UICSE 403, Spring 2008
Poor UICSE 403, Spring 2008
Poor UICSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
Bad error messagesgCSE 403, Spring 2008
UI Hall of Shame finalistsLets learn from some more bad examples Interface Hall of hame.htmWeb pages that suckhttp://www webpagesthatsuck com/http://www.webpagesthatsuck.com/CSE 403, Spring 2008
Back to ggood UI designg yvisibility: Ability for user to find controls that aremeant to be interacted withwith.ooyWhere are they?What is their state? ("Is( Is this setting on or off?")off? )feedback: Response from the control to the userbefore, during, or after an interaction.CSE 403, Spring 2008
Affordances in UI designgaffordance: A physical property of an object thatindicates or influences how it is to be usedy3D bbuttonsttstandt d outt andd are more liklikelyl tto bbeclickedyThick corner bars encourage resizingCSE 403, Spring 2008
Users don't readyvs.CSE 403, Spring 2008
CommonCoo webeb usabusabilityty pproblemsob e w.useit.com/alertbox/9605.htmlLayoutCluttero BadB d assumptionsiaboutbuser's' screen resolutionl io Requires horizontal scrollingo Poorly chosen colorso Frameso Splash screenso Poor / missing navigation controls (Back, Forward,Home)o Text is not scannable (can't(can t be read quickly)o Doesn't follow standard design conventionsCSE 403, Spring 2008o
More web usabilityypproblemsyContentoooooyMost importantpcontent isn't on the first ppageg / screenfulNondescript headingsContains ads (or things that appear to be ads)IImportantt t siteit contentt t isi containedt i d ini PDF documentsdtIsn't designed to be easily indexed by a search engine(HTML title, meta tags, page text, link text, etc.)LinksLinks that don't say where they goo Badly chosen link text (such as "Click here for more info")o Links that forcibly open a new browser windowo Links opened by complex Javascript needlesslyo Visited links don't appear in a different colorCSE 403, Spring 2008o
More web usabilityypproblemsyFeaturesooooyPoorly performing site searchHaving a web search feature (why?)Not having a site map or other means to navigate the siteRelying on non-standard plugins or browser versions(e.g. Overly reliant on Flash, Java applets, etc.)AccessibilityoooText forced too small for elderly / visually impaired usersLack of ALT text and non-image data for visuallyimpaired usersTiny links (hard to click for motormotor-impairedimpaired users)CSE 403, Spring 2008
SuggestionsSuggesto s foro good webeb designdes gPlace your name and logo on every page and make theg a link to the home ppageglogoo Provide search if the site has more than 100 pages.o Write straightforward and simple headlines and page titlesthat clearly explain what the page is abouto Structure the page to facilitate scanning and help usersignore large chunks of the page in a single glanceo Instead of cramming everything about a product or topicinto a single, infinite page, use hypertext to structure thecontent space into a starting page that provides anoverview and several secondary pages that each focus ona specific topic.oUse link titles to provide users with a preview of whereCSE 403, Spring 2008each link will take them, before they have clicked on it.o
Suggestionsggfor web designgUse relevance-enhanced image reduction when preparingsmall photos and images: instead of simply resizing theoriginal image to a tiny and unreadable thumbnail, zoom inon the most relevant detail and use a combination ofcroppingi andd resizing.i io Ensure that all important pages are accessible for userswith disabilities,, especiallypy blind users.o Do the same as everybody else: if most big websites dosomething in a certain way, then follow along since userswillill expectt thithings tto workk ththe same on your site.ito Test your design with real users as a reality check.People do things in odd and unexpected ways, so even themost carefully planned project will learn from usabilityCSE 403, Spring 2008testing.o
UI exercise ((from Sp07p final))Draw a UI for a library search that has thefollowing features:oooCSE 403, Spring 2008abilityy to enter a search stringg as an author,title, subjectability to search magazines and/or booksabilitybilit tot displaydi l multiplelti l results,lt andd ttoorder them by either availability or earliestdate of ppublication ((but not both))You should use the most appropriate UIcomponent (button, pulldown, checkbox,scrollbar, etc) for each feature
Sugggg gestions for web design o Use relevance-enhanced image reductionwhen preparing small photos and images: instead of simply resizing thesmall photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant d
