Transcript Slide 1

Web Interface Design Patterns
CSCI 577b Individual Research Presentation
Mark Villanueva
April 25, 2012
• What are User Interface Design Patterns?
• 6 Guiding Principles and Examples
• UI Design Patterns in Action – LEMA Web App
User Interface Design Patterns
• Good design for the modern web is difficult
• UI Design Patterns address web usability
• Navigation
• Organization
• Interaction
• Patterns provide a springboard for rapid
prototyping rich internet applications
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
-Designing Web Interfaces
1. Make it direct
• Respond to direct user input
• Perform operations within the context of
the page
Object Selection
2. Keep it lightweight
• Make it easy for the user to perform
• Tools are readily available
Always Visible Tools
3. Stay on the page
• Maintain user flow
• Limit page refreshes
Input Overlay
4. Provide an invitation
• Guide the user to features
• Give instant feedback
Hover Invitation
5. Use transitions
• Communicate relationships between
objects and actions
• Focus user attention
Lightbox Effect
6. React immediately
• Lively response enhances user
• Lack of responsiveness can be perceived
as sluggish or broken
Live Suggest
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
In closing…
• Patterns are not the final answer for UI
• Template still requires implementation
• Use with caution
• Consider rapid prototyping and stakeholder
• Formalizing these patterns promotes dialogue
among all stakeholders
• Growing field, check it out or contribute
B. Scott and T. Neil, Designing Web Interfaces: Principles and
Patterns for Rich Interactions, O’Reilly, 2009.