1. Web Interface Design Patterns
CSCI 577b Individual Research Presentation
Mark Villanueva
April 25, 2012

2. Overview What are User Interface Design Patterns?
6 Guiding Principles and Examples
UI Design Patterns in Action – LEMA Web App

3. User Interface Design Patterns
Good design for the modern web is difficult
UI Design Patterns address web usability problems:
Navigation
Organization
Interaction
Patterns provide a springboard for rapid prototyping rich internet applications

5. Six Principles of User Interaction
1. Make it direct 2. Keep it lightweight 3. Stay on the page 4. Provide an invitation 5. Use transitions 6. React immediately
To that end
Designing Web Interfaces

6. 1. Make it direct Respond to direct user input
Perform operations within the context of the page
Object Selection

7. 2. Keep it lightweight Make it easy for the user to perform actions
Tools are readily available
Always Visible Tools

8. Maintain user flow Limit page refreshes Input Overlay
3. Stay on the page
Maintain user flow
Limit page refreshes
Input Overlay

9. Guide the user to features Give instant feedback Hover Invitation
4. Provide an invitation
Guide the user to features
Give instant feedback
Hover Invitation

10. 5. Use transitions
Communicate relationships between objects and actions
Focus user attention
Lightbox Effect

11. 6. React immediately Lively response enhances user experience
Lack of responsiveness can be perceived as sluggish or broken
Live Suggest

12. Putting it all together
LEMA Course Profile List
Live Search
Always Visible Tools
Virtual Paging
Dynamic Invitation
Implementation
jQuery
jQuery Datatables plug-in
Twitter Bootstrap libraries

14. In closing… Patterns are not the final answer for UI
Template still requires implementation
Use with caution
Consider rapid prototyping and stakeholder feedback
Formalizing these patterns promotes dialogue among all stakeholders
Growing field, check it out or contribute

15. Sources http://developer.yahoo.com/ypatterns/everything.html
B. Scott and T. Neil, Designing Web Interfaces: Principles and Patterns for Rich Interactions, O’Reilly, 2009.