CTT534 – Thiết Kế Giao Diện A Few Web and Mobile UI Patterns Outline n n Overview Web UI Patterns q q q q n Mobile UI Patterns q q q q 5/26/16 Navigation Forms Search Wizard Navigation Forms Search Notification, feedback, and invitation What is a UI Design Pattern? n Object-oriented Methodology q “Design patterns are descriptions of communicating objects and classes that are customized to solve a general design problem in a particular context” (Erich Gamma et al 1995) n Generally, a design pattern is a description of the repeatable problem and its solution n UI design patterns are descriptions of common UI design problems and their solutions 5/26/16 Benefits of UI Design Patterns n UI patterns support external consistency q n n n Consistency is a key principle of UI design Improve learnability, memorability, and satisfaction of UI Reduce time to design, develop, and test Reduce risks in UI design q 5/26/16 Learning from good and working UI’s Outline n n Overview Web UI Patterns q q q q n Mobile UI Patterns q q q q 5/26/16 Navigation Forms Search Wizard Navigation Forms Search Notification, feedback, and invitation Web Navigation n Current popular homepage design: menus on top Logo, menu, sub-menu, search input box Sliders: conveying the current most important messages Content Fat footer 5/26/16 Navigation: Menus and Sliders n n n n Horizontal primary menu and submenu Menu can have dropdown lists (vertical menus) Sliders should include graphics and most important messages Sliders can automatically play, but should not play forever q q n n n Include pause and replay buttons Don’t play too fast, let users read the message Search input box on top should be prominent Limit scroll on homepage Always provide a Home link 5/26/16 Navigation: Menus and Sliders Search box Multiple sliders (don’t animate forever) 5/26/16 Navigation: Vertical Dropdown Menu 5/26/16 Fat Footer n n n Secondary navigation to provide more shortcuts to important information of a website Links to frequently used pages Using the same footer for all pages 5/26/16 10 List Menu n Various kinds of list q q q n n n Title only list Grouped list (with sub-sections) Enhanced list Can show long titles and sub-titles (e.g., hints) Can be included in tabs Should indicate touchable items 5/26/16 30 Gallery n Suitable for photos, articles, products, restaurant menus 5/26/16 31 Metaphor n n n Menu with icons symbolizing physical things Strong metaphors may be overkilled May be suitable in games 5/26/16 32 iOS Navigation Example 5/26/16 33 iOS – Slide Between Pages n n Moving screens by sliding Less visible navigation but efficient 5/26/16 34 Forms n n Keep forms simple Only include required fields 5/26/16 35 Registration Form n Provide instant feedback 5/26/16 36 Search Criteria Form n n n n Show criteria in a list Provide default values Have a “clear”/ “reset” button Set label with number of results, if possible 5/26/16 37 Single Search Input Box n Always better to provide simple but powerful search capability 5/26/16 38 Search Auto Suggestion 5/26/16 39 Table with Grouped Rows 5/26/16 40 Signifiers n n n Use signifiers/indicators to show affordance of items Drag-able Checkable 5/26/16 41 Notifications 5/26/16 42 Invitations 5/26/16 43 References n n n n n iOS UI Design Basics: https://developer.apple.com/library/ios/documentation/userexperience/conc eptual/MobileHIG/index.html http://ui-patterns.com 12 standard screen patterns: http://www.designingwebinterfaces.com/designing-web-interfaces-12screen-patterns Theresa Neil, "Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More,“ O'Reilly Media, February 2012 Luke Wroblewski, “Web Form Design: Filling in the Blanks”, 2008 5/26/16 44 ... repeatable problem and its solution n UI design patterns are descriptions of common UI design problems and their solutions 5/26/16 Benefits of UI Design Patterns n UI patterns support external consistency... principle of UI design Improve learnability, memorability, and satisfaction of UI Reduce time to design, develop, and test Reduce risks in UI design q 5/26/16 Learning from good and working UI s Outline... Overview Web UI Patterns q q q q n Mobile UI Patterns q q q q 5/26/16 Navigation Forms Search Wizard Navigation Forms Search Notification, feedback, and invitation What is a UI Design Pattern?