1 / 26

UI Patterns

UI Patterns. Patterns are. Things that repeat Solutions to common problems Tried and true solutions Expert knowledge. Good pattern description has. Name Problem Solution Examples Description of trade-offs and alternatives Context. Context. When you should think about a pattern

cole-freeman
Download Presentation

UI Patterns

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI Patterns

  2. Patterns are • Things that repeat • Solutions to common problems • Tried and true solutions • Expert knowledge CS327

  3. Good pattern description has • Name • Problem • Solution • Examples • Description of trade-offs and alternatives • Context CS327

  4. Context • When you should think about a pattern • One pattern might set the context for another • Some patterns are high-level, others low-level CS327

  5. Good patterns • Some patterns make system easier to use, less confusing, more “habitable” • Good patterns tend to get repeated • Some bad patterns are also repeated CS327

  6. UI Patterns and Techniques • http://time-tripper.com/uipatterns/index.php • Jenifer Tidwell CS327

  7. Overall organization of UI • List of objects • List of actions or tasks • List of subject categories • List of tools CS327

  8. Overview plus detail CS327

  9. Extras on demand CS327

  10. Step by step instructions CS327

  11. One-window drill-down CS327

  12. Intriguing branches CS327

  13. Multi-level help CS327

  14. Visual Flow • Make important info be “focal points” • Create focal points with color, font, chunking • Indicate relationships by visual grouping CS327

  15. Visual Framework CS327

  16. Center Stage For information centered or task centered interfaces. CS327

  17. Titled sections Use when there is more than a handful of controls or text fragments on the page. CS327

  18. Card Stack CS327

  19. Closable panels CS327

  20. Movable panels CS327

  21. Right-left alignment CS327

  22. Diagonal balance CS327

  23. Property sheet CS327

  24. Progressive Enabling CS327

  25. UI patterns • Traditionally learned from experience • Good to have standard names • Good to have catalog to jog memory • Still takes practice CS327

  26. Next time • Read “The Cathedral and the Bazaar”, which is about open-source process. • Read the paper, not the book • http://www.tuxedo.org/~esr/writings/cathedral-bazaar/cathedral-bazaar/ CS327

More Related