Transcript Slide 1
Web Interface Design Patterns CSCI 577b Individual Research Presentation Mark Villanueva April 25, 2012 Overview • 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 problems: • 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 actions • 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 experience • 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 feedback • Formalizing these patterns promotes dialogue among all stakeholders • Growing field, check it out or contribute Sources http://developer.yahoo.com/ypatterns/everything.html http://designingwebinterfaces.com/ http://www.flickr.com/photos/designingwebinterfaces/ http://greenbay.usc.edu/csci577/spring2012/projects/team12/Symfony/ web/app_dev.php/Scheduler/CourseProfileList/ B. Scott and T. Neil, Designing Web Interfaces: Principles and Patterns for Rich Interactions, O’Reilly, 2009. http://jquery.com/ http://datatables.net/ http://twitter.github.com/bootstrap/