Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Interaction design patterns

3.908 visualizaciones

Publicado el

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

Publicado en: Diseño
  • Inicia sesión para ver los comentarios

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

×