Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Interaction design patterns

3,105 views

Published on

What a pattern is in the context of a User Interface Design??
You will see in this slides together with the most useful pattern collections

Published in: Design

Interaction design patterns

  1. 1. INTERACTION DESIGN PATTERNS Grau en Enginyeria Informàtica User Centred Design
  2. 2. Introduction • Patterns were architectural concepts that captured recurring design problems in urban architecture. • original definition of a pattern introduced by architect Christopher Alexander. • “Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, allowing the designer to re-use this solution a million times over“ Interaction Design Patterns - User Centred Design 2 / 23
  3. 3. • Patterns (and pattern languages for describing patterns) are ways to describe best practices, explain good designs, and capture experience in a way that it is possible for others to reuse this experience • Design pattern (computer science, object-oriented Design Patterns) are extensively used by software engineers for design process as well as for communicating a design to others Interaction Design Patterns - User Centred Design 3 / 23
  4. 4. Memoria de Largo Plazo (MLP). Long-Term Memory (LTM) • The main thing that the characteristics of long-term memory imply is that people need tools to augment it. • Humankind has a need for technologies that augment memory • software designers should try to provide software that fulfills that need. • designers should avoid developing systems that burden longterm memory • Familiar paths (patterns): • well-learned routes can be done fairly automatically and does not consume attention and short-term memory. • They are stored in LTM Interaction Design Patterns - User Centred Design 4 / 23
  5. 5. Types of Design Patterns • Visual Patterns • In many ways, are the same as patterns in all visual design. Color patterns, the principles and elements of design, and Gestalt theory are all sources of visual patterns, but a few are specific to interactive design • Layout Patterns • Used in the arrangement of content on the page • Common configurations and structures that make a design familiar and navigable for a wide range of users • Architectural Patterns • Deal with the internal information architecture and any interactions that are designed to parse that information Hard relation with Information Architecture • Interaction Patterns • Communicate how an onscreen element can be manipulated to achieve a particular task or to produce a desired result • Conceptual Patterns • Help the user build a mental model of the site and its functionality • Are those that communicate the intended purpose and functionality of an interactive element Difficult to explain: incorporated into all patterns (they may be completely visible …) Interaction Design Patterns - User Centred Design 5 / 23
  6. 6. Interaction Design Patterns - User Centred Design http://blog.teamtreehouse.com/10-user-interface-design-fundamentals#! 6 / 23
  7. 7. Interaction Design (ID) PATTERN • An interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability problem in interface design or interaction design [http://www.interaction-design.org/encyclopedia/interaction_design_patterns.html] • User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. [http://ui-patterns.com] Interaction Design Patterns - User Centred Design Be aware, here problem ≠ error, instead problem = challenge 7 / 23
  8. 8. Interaction Design (ID) PATTERN • Also known as • Interaction patterns • User interface (UI) patterns • Usability patterns • Web design patterns • Workflow patterns • These patterns share a lot of similarities and basically all provide solutions to usability problems in interaction and interface design. • Some patterns are known under different names (or even the same name) in different pattern collections. Interaction Design Patterns - User Centred Design 8 / 23
  9. 9. • A Pattern capture a common structure without being too concrete on the details which gives the designer flexibility to be creative  it enables to put together something which “feels familiar” while remaining original • But ... Patterns ARE NOT • Off-the-shelf components • Each implementation of a pattern differs a little from every other • Simple rules or heuristics (not a checklist) • A step-by-step description of how to design an interface [Jenifer Tydwell] Interaction Design Patterns - User Centred Design 9 / 23
  10. 10. Requirements (to use UI Patterns) • Field research • System requirements • Goal and Task Analysis • to describe and clarify what users will do with what you’re building • Design models, such as • Personas (models of users) • Scenarios (models of common task situations) • Prototypes (models of the user interface itself) • Empirical testing • Usability testing, in/situ observations, … • Time to iterate over several versions of the design • You won-t get it right the first time !! Interaction Design Patterns - User Centred Design 10 / 23
  11. 11. Usual Elements that describe a UI pattern • Problem/s • Problems are related to the usage of the system and are relevant to the user or any other stakeholder that is interested in usability • Use when • a situation (in terms of the tasks, the users and the context of use) giving rise to a usability problem. • describing situations in which the problems occur • Principle/s • a pattern is usually based on one or more ergonomic principles such as user guidance, or consistency, or error management • Solution/s • a proven solution to the problem • the designer has the freedom to implement it in many ways • Why • a reasonable argument for the specified impact on usability when the pattern is applied • Examples and Implementation details Interaction Design Patterns - User Centred Design 11 / 23
  12. 12. Pattern Collections • Designing Interfaces • Jenifer Tidwell • O'Reilly Media; Second Edition edition (January 6, 2011) • http://designinginterfaces.com/firstedition Interaction Design Patterns - User Centred Design “Anyone who’s serious about designing interfaces should have this book on their shelf for reference. It’s the most comprehensive cross-platform examination of common interface patterns anywhere. ” Dan Saffer http://www.odannyboy.com http://designinginterfaces.com/patterns 12 / 23
  13. 13. Pattern Collections • Martijn van Welie • http://www.welie.com Interaction Design Patterns - User Centred Design 13 / 23
  14. 14. Pattern Collections • http://developer.yahoo.com/ypatt erns • http://ui-patterns.com • http://patternry.com • http://quince.infragistics.com Interaction Design Patterns - User Centred Design 14 / 23
  15. 15. “what users DO” human behaviors patterns, not interface elements • Safe exploration • Let me explore without getting lost or getting into trouble • Instant gratification • I want to accomplish something now, not later • Satisficing • This is good enough. I don’t want to spend more time learning to do it better • Satisfying+sufficing: people accept “good enough” instead “best” if learning the alternatives might cost time or effort • Changes in midstream • I changed my mind about what I was doing • Habituation • That works everywhere else; why doesn’t work here, too? • ..... Interaction Design Patterns - User Centred Design 15 / 23
  16. 16. Interaction Design Patterns - User Centred Design 16 / 23
  17. 17. Pattern organization • Organizing the Content • Information Architecture and Application Architecture • Getting Around • Navigation, Signposts and Wayfinding • Organizing the Page • Layout of Page Elements • Doing things: Commands and Actions • Showing Complex Data • Trees, Tables and Other Information Graphics • Getting Input From Users • Forms and Controls • Builders and Editors • Making It Look Good • Visual Style Aesthetics • User needs • Navigating around • Basic interactions • Searching • Dealing with data • Personalizing • Shopping • Making choices • Giving input • Miscelleaneous • Application needs • Drawing attention • Feedback • Simplifying interaction • Context of design • Site types • Experiences • Page types Interaction Design Patterns - User Centred Design http://www.welie.comhttp://designinginterfaces.com 17 / 23
  18. 18. Interaction Design Patterns - User Centred Designhttp://www.emdezine.com/how-to-write-an-interaction-design-pattern 18 / 23
  19. 19. For mobile UI design Interaction Design Patterns - User Centred Design Example: http://www.androidpatterns.com 19 / 23
  20. 20. For mobile UI design Interaction Design Patterns - User Centred Design http://pttrns.com http://ios-patterns.com 20 / 23
  21. 21. Interesting readings • 6 Popular Content Presentation Design Patterns • http://sixrevisions.com/user-interface/6-popular-content- presentation-design-patterns • Progressive Disclosure in User Interfaces • http://sixrevisions.com/user-interface/progressive-disclosure-in- user-interfases • Responsive Navigation Patterns • http://bradfrost.com/blog/web/responsive-nav-patterns Interaction Design Patterns - User Centred Design 21 / 23
  22. 22. https://delicious.com/tgranollers/patterns • http://mobile.smashingmagazine.com/tag/design-patterns • http://sixrevisions.com/user-interface/mobile-ui-design- patterns-inspiration • http://www.interaction- design.org/encyclopedia/interaction_design_patterns.html • http://en.wikipedia.org/wiki/Interaction_design_pattern • 40+ Helpful Resources On User Interface Design Patterns • http://www.smashingmagazine.com/2009/06/15/40-helpful-resources- on-user-interface-design-patterns • 20+ articles on why and how to use design patterns • http://blog.patternry.com/post/9878279797/20-articles-on-why-and- how-to-use-design-patterns • YUI is a free, open source JavaScript and CSS library for building richly interactive web applications • http://yuilibrary.com • http://delicious.com/willhacker/patterns Interaction Design Patterns - User Centred Design 22 / 23
  23. 23. Other bibliography Interaction Design Patterns - User Centred Design Android Design Patterns: Interaction Design Solutions for Developers Paperback by Greg Nudelman 2013 The Design of Sites: Patterns for Creating Winning Web Sites (2nd Edition) By Douglas K. van Duyne, James A. Landay & Jason I. Hong December 24, 2006 Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps by Theresa Neil 2nd Edition edition (May 17, 2014) 23 / 23 In general, a pattern is a tested solution to give an answer at common design problems, which happen again and again

×