Why does design pattern very important in UI design?
- 2. WHY DESIGN PATTERNS IMPORTANT? ▪ Easy navigation ▪ User Experience (UX) ▪ Provide solution to problems (extract enhance, manipulate data)
- 3. MOST COMMON DESIGN PATTERNS 1. BREADCRUMBS - Use linked labels to provide secondary navigation that shows the path from the front to the current site page in the hierarchy. TYPES: - Location-based - Pathway-based - attribute
- 4. MOST COMMON DESIGN PATTERNS 2. CLEAR PRIMARY ACTIONS: - Emphasizing the actions to be taken by making buttons or labels stand-out
- 5. MOST COMMON DESIGN PATTERNS 3. PROGRESSIVE DISCLOSURE: - Hides advanced features, provides primary content in the UI - Advance features can be navigated by triggering the advanced feature Example: search engine of google (basic search vs. advanced search)
- 6. MOST COMMON DESIGN PATTERNS 4. HOVER CONTROLS: -technique: hiding nonessential details so that users will find relevant information more easily
- 7. MOST COMMON DESIGN PATTERNS 5. LEADERBOARD: -progressive disclosure, clear pattern 6. DARK PATTERNS: -a type of design pattern that might be risky, ethical consideration must be considered
- 8. MOST COMMON DESIGN PATTERNS 7. SUBCRIPTION PLANS: -use option menu like sign-up buttons 8. FORGIVING FORMAT: -error-resistant UI
- 9. MOST COMMON DESIGN PATTERNS 9. LAZY REGISTRATION: Example: users can browse and choose products, but only have to register when they proceed to check out
- 10. THINGS TO CONSIDER IN MOBILE APP UIS 1. Minimize contents ▪Loading time? 3 seconds ▪Visual hierarchy, etc. 2. Simplify Navigation -Hand-reach Comfort zones (left, combined, right)
- 11. THINGS TO CONSIDER IN MOBILE APP UIS 3. Restrict User inputs ▪Pre-fill ▪One-directional scrolling 4. Ensure Continuity and Consistency - Consistent design, process must be logically presented
- 13. WHY USE INTERACTIVE DESIGNING TOOLS? 1. Promotes creativity 2. Helps in sketching, brainstorming, mind- mapping and communicating the UIs with teams and users 3. Speed-up prototyping 4. Cost-saving and time-saving
- 19. References: GENERATING SITE COLORS You can visit: https://color.adobe.com/create/color-wheel