Transcript
  • 1. An Introduction to User InterfaceDesign and UsabilityWorkshop on UI & UXMay 2010 For educational purpose only.

2. Outline UI Design in Modern Application The Art & Science of Layouts UI Typography: Guidelines & Common Mistakes Guide to Fantastic Color Usage Usability Principles for Modern UI Design Common UI Design Patterns 3. Section 1UI DESIGN IN MODERNAPPLICATION 4. UI Design in Modern Application User Interface (UI) is not about how it looks, butrather about how it works. Interface is your product. Primary aim: communication. The main goal in UI design: Simple & elegant,clear & consistent. 5. Eight Characteristics in Good UI Design1. Clarity2. Concision3. Familiarity4. Responsiveness5. Consistency6. Aesthetics7. Efficiency8. Forgiveness 6. Main Building Blocks of Visual Interface Design Layout & Positioning Shape & Size Color Contrast Texture 7. Practical Techniques for Crafting Effective UI Use white space to build relationships Rounded corners define boundaries Convey meaning with colors Direct attention Shadows and darkened background for focus Emphasize core actions Use hover controls to simplify & de-clutter Labels inside input fields Context-sensitive interface element Icons Make it responsive: loading indicators & pressed state Undo & restore Confirmation dialogs 8. Use white space tobuild relationships Definition of white space empty spaces between various content elements Great tool to tell relationships between contentelements. Tight space forms grouping, vice versa 9. Rounded corners define boundaries Aside from polishing your interface, roundedcorners actually defines borders 10. Convey meaning with colors 11. Direct Attention Use animation to direct attention. Color and contrast are not enough. 12. Shadows and darkened backgroundfor focusSource: vhc.apptivity.com 13. Emphasize Core Actions Shift focus to primary actions for your user 14. Use hover controls tosimplify & de-clutter Hover controls: De-clutter: 15. Labels inside input fields Save space & emits clear messages 16. Context-sensitive interface element Additional functionality for experienced userswithout complicating the interface 17. Icons Good practices of modern icon design are as listed inAndroid Launcher icon design guidelines: Source: developer.android.com 18. Make it responsive: loading indicators & pressed state Do not make your user wait without any indicators 19. Undo & restore Be forgivable Provide extra protective measures for your users 20. Confirmation dialogs To ensure that the user really wants to go ahead Always provide other options close by Do not overuse: will introduce interface friction 21. (kaizen)UI design, especially in modern web application,doesnt have to be in a finished state because youcan always keep evolving it and improving it. Dmitry FadeyevDesigner/Developer Founder of usabilitypost.com, themesboutique.com, logospire.com 22. Section 2THE ART & SCIENCE OF LAYOUTS 23. Four Major Layout Types Fixed- Width LayoutHybrid Fluid Types Elastic 24. Fixed-Width Layout Static grid layout with its width with fixed value,in pixel unit. Good for precise interface design. Not recommended for Web application. 25. Fluid Layout Adjust its width in proportion to the size of theusers view port. Provides user the freedom to resize theapplication. Designer must design carefully: resize impact ontext display and overall interface. 26. Elastic (Zoomable) Layout Scale the content instead of overall size of thelayout. Advantage: design proportion is well kept,ensuring proper readability & positioning. Disadvantage: design proportion are not easy tokeep when manipulating with text size. Silverlight tool for image manipulation: Silverlight Deep Zoom 27. Mathematics in Design Golden Ratio Design The Golden Ratio layout (1:1.618033987) Good practice in layout designs Best for photo galleries, portfolios and product-oriented websites. 28. Calculation with Golden Ratio62%38%To calculate the width of GoldenRatio, get total width of arectangle and divided by 1.616(top). Apply the Golden Ratio toget the height for a specificrectangle based on the totalwidth of the rectangle (right). 29. Golden Ratio Sample Layout (1) Source: net.tutsplus.com 30. Golden Ratio Sample Layout (2) 6 Golden Rectangles, 3 rectangles per line, each 299 x 185 pixels. 299/185 = 1.616 Source: spacegeek.com 31. Mathematics in Design Fibonacci Design Based on Fibonacci sequence 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144... The Golden Spiral Applicable to layout and font size Best for blogs and magazine layouts 32. Fibonacci Design Sample Layout Fibonacci sequence on columns and font size 33. Gutenberg Rules Defines Reading gravity. 34. Applying Gutenberg Rules Source: goodbarry.com 35. Section 3UI TYPOGRAPHY: GUIDELINES &COMMON MISTAKES 36. Introduction Typography is a powerful medium that allows forprecise, effective communication. Typography exists to bring orders to informationby dividing and organizing helps user to getwhat they are looking for. i.e.: make textual stuff looks pretty! 37. Designers Main Concern Readability Measure (Line Length) Width of the block Leading (Line Height) Height of a line in the block Tracking (Letter Spacing) Tips: check if VV and W are distinguishable Word Spacing Color: Strive for consistency. 38. Typography & GridExample of modern Typography UI with good use of grid & negative space: Source: www.montylounge.com 39. Choosing the Right Type Consider context & narrative The quick brown fox jumps over the lazy dog Choose by the typefaces specific functions Brush Script is common, with its bad readability, it is notbuilt for serious text blocks. Microsoft Expression Blend choose Segoe UI asdefault font for good readability. 40. Choosing the Right Type A beautiful face is the one that serves itspurpose.Both typefaces are from the serif family, however, Haptic (left) is attention-seeking header, Mrs. Eaves XL (right) is for good readability 41. Good Font Size Define a set of font size and do not change Classic scale: 8 9 10 11 12 13 14 18 21 24 36 48 60 72 Fibonacci Sequence:8 16 24 40 64104 42. Good Practice Pay attention to Widows and Orphans Creates awkward rags, impairing readability.An orphan is left behind where as a widow must go on aloneThis is bad for UI design. 43. Good Practice (cont) Clean rags and hyphenation 5 hyphenationsA poor rag (top)in a row iscreates distractingunforgivable (top),shapes in the whitethis can easilyspace of the margin. avoided byCorrect this by changing the line making manual linebreaks (bottom)breaks (bottom). Source: fonts.com 44. Good Practice (cont) Hanging punctuation Place bullets points, punctuation marks before ajustified paragraph. Avoiding readers flow to be disrupted 45. Good Practice (cont) Treat text as a user interface Source: cameronmoll.com 46. Common Mistakes in Typography Using double hyphens instead of resized dash Using periods instead of ellipses Using dumb quotes "" instead of Double-spacing between sentences 47. Common Mistakes in Typography (cont) Improvising a copyright symbol. Using too much emphasis. Underlining your hypertext links with border-bottom 48. Common Mistakes in Typography (cont) Faking families in Photoshop Not using accent characters R4nDomz cAp!taLizAti0n & uNNec3s2arysYmBlz! ( 2 secs. Example: Progress bar, Facebook loading animation. 77. Usability: Rules & Principles 3-Click-Rule (All) Access information/feature within 3 clicks. Emphasizes the importance of clear navigation, logical structure and easy-to-follow hierarchy. 78. Usability: Rules & Principles Eight Golden Rules of Interface Design (All) Strive for consistency. Buttons name. Enable frequent users to use shortcuts. Keyboard shortcuts in Firefox, Gmail. Offer informative feedback. Saving a file. Design dialog to yield closure. Account creation. 79. Usability: Rules & Principles Eight Golden Rules of Interface Design (All) Offer simple error handling. Minimize error, graciously handles errors. Ex: date input. Permit easy reversal of actions. Undo/back option. Provide the sense of control. User control app, dont force/control user. Reduce short-term memory load. No information overload, offer hints/getting started guide. 80. Section 6COMMON UI DESIGN PATTERNS 81. Pattern? A pattern describes an optimal solution to acommon problem within a specific context.Design pattern? 82. Selected Design Patterns Auto Complete Allows faster user input by removing ambiguity aboutexpected input data, avoiding potential mis-typedinformation as well as narrowing down the correctchoices. 83. Selected Design Patterns Movable Panels Allows users to organize information that make senseto them. 84. Selected Design Patterns Calendar/Date Picker Enables users to easily apply or submit a date or daterange with some default values. 85. Selected Design Patterns Progress/Busy Indicator Allows the user to know the status of their operation ifthe operation takes more than 2 secs or so. 86. Selected Design Patterns Input Hints Some explanation and/or examples of valid valuesnear fields to give users hints at the kind of input theyneed to provide. 87. Selected Design Patterns Sortable Table Allow users to change the sorting order of the tableitems by clicking on a column header. 88. Resources The Smashing Book by Smashing Networks Smashing Networks http://www.smashingmagazine.com/ Yahoo Design Pattern Library http://developer.yahoo.com/ypatterns/ Designing Interfaces http://designinginterfaces.com/


Top Related