1 / 31

Patterns in User Interface Design: Principles and Applications

Explore the significance of user interface patterns, historical context, design principles, and their applications in creating optimal user experiences. Learn how patterns provide reusable components and insights into design problems.

igonzalas
Download Presentation

Patterns in User Interface Design: Principles and Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 101 User Interface Patternsand its applications Tonya Groover Department of Computer Science

  2. Format of Seminar • what is a pattern? • historical context • good UI patterns • elements of a UI pattern • pattern languages • applications

  3. Designing User Interfaces (UI) • Should I use icons? • Where should the header data and detail be positioned? • How do users search for objects or data? • How should new rows be inserted into a table? • Which working areas make up a new view? [Arend, 2004]

  4. Patterns help to answer these [and other] questions.

  5. Patterns are reusable components. insight into design problems. design principles. relationships . . .

  6. The most useful patterns are generative. These patterns in our minds are, more or less, mental images of the patterns in the world: they are abstract representations of the very morphological rules which define the patterns in the world. However, in one respect they are very different. The patterns in the world merely exist. But the same patterns in our minds are dynamic. They have force. They are generative. They tell us what to do; they tell us how we shall, or may, generate them; and they tell us too, that under certain circumstances, we must create them. Each pattern is a rule which describes what you have to do to generate the entity which it defines. (pp. 181-182) [Alexander, 1979]

  7. Historical Context • Christopher Alexander • Emerged in SE mid-late 1990’s • Gang of Four (GoF)

  8. Why Patterns? • Solve "real world" problems • Capture domain expertise • Document design decisions and rationale • Reuse wisdom and experience of master practitioners • Convey expert insight to novices • Form a shared vocabulary for problem-solving discussion • Show more than just the solution http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html

  9. Good Patterns • Solve a problem • Is a proven concept • The solution isn’t obvious • Describes a relationship • Significant human component [ http://hillside.net/patterns/definition.html]

  10. Name Problem Context Forces Solution Examples Resulting Context Rationale Related Patterns Known Uses Defining A Pattern http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html

  11. A Pattern Language … defines a collection of patterns and the rules to combine them into an architectural style. Pattern languages describe software frameworks or families of related systems. [ http://hillside.net/patterns/definition.html] “It not only tells us the rules of arrangement, but shows us how to construct arrangements -- as many as we want -- which satisfy the rules." (p. 186) [Alexander, 1979]

  12. Application of Patterns Business Application [Arend, 2004]

  13. SAP Design Guild • Users working practices is the starting point. • Usability • Designers configure the interface using predefined components. • Use one component for a large number of applications. • “A user interface pattern fulfills one or more generic tasks, such as searching for and selecting a business object.”

  14. Pattern Approach

  15. This approach only works if there are a small number of “generic” tasks, which can describe very different business activities.

  16. Design Method

  17. Results • powerful and general components. • generic functions. • simple. • easy.

  18. Advantages of UI Patterns • Highly consistent user interfaces • Usability can be optimized • High production gains

  19. Application of Patterns Web Interfaces http://www.welie.com/patterns/

  20. User Needs

  21. Application Needs

  22. Context of the Design

  23. Finally … there are pattern library resources.

  24. http://developer.yahoo.com/ypatterns/

  25. http://msdn2.microsoft.com/en-us/practices/default.aspx Microsoft's recommendations for how to design, develop, deploy, and operate architecturally sound applications for the Microsoft application platform.

  26. http://norvig.com/design-patterns/ppframe.htm

  27. Thank you, for your attention!

  28. References • Von Udo Arend (2004). User Interface Patterns http://www.sapdesignguild.org/editions/edition8/print_patterns.asp • Brad Appleton (2000). Patterns and Software: Essential Concepts and Terminology http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html • Brad Appleton. Patterns in a Nutshell http://www.cmcrossroads.com/bradapp/docs/patterns-nutshell.html • James O. Coplien (2007). Software Patterns http://hillside.net/patterns/definition.html • Bill Venners (2005). How to Use Design Patterns: A conversation with Erich Gamma. http://www.artima.com/lejava/articles/gammadp.html • Christopher Alexander (1979). The Timeless Way of Binding

More Related