1. CSc 238 Part II: Designing Behavior and Form
Chapter 7: A Basis for Good Product Behavior
Chapter 8: Digital Etiquette
Chapter 9: Platform and Posture
Chapter 10: Orchestrating and Flow
Chapter 11: Optimizing for Intermediates
Chapter 12: Reducing Work and Eliminating Excise
Chapter 13: Metaphors, Idioms, and Affordances
Chapter 14: Rethinking Data Entry, Storage, and Retrieval
Chapter 15: Preventing Errors and Informing Decisions
Chapter 16: Designing for Different Needs
Chapter 17: Integrating Visual Design

2. Crazy Toolbar

3. The Essentials of Interaction Design
CSc 238 Human Computer Interface Design Chapter 7 A Basis for Good Product Behavior
ABOUT FACE
The Essentials of Interaction Design
Cooper, Reimann, Cronin, and Noessel

4. What makes a design solution good?
It meets goals and needs of users while accommodating business goals and technical constraints… but
Are there recognizable attributes?
Are there generalizable common solutions to apply to similar problems?
Does the design possess universally applicable features to make it a good design?
The answer lies in the use of Interaction…
Design values
Design principles
Design patterns

5. Design values
…are rules that govern action … based typically based on a set of beliefs
Designers should create design solutions that are:
Ethical (considerate, helpful)
Do no harm
Improve human situations
Purposeful (useful, usable)
Help users achieve their goals and aspirations
Accommodate user contexts and capacities
Pragmatic (viable, feasible)
Help commissioning organizations achieve their goals
Accommodate business and technical req’ts
Elegant (efficient, artful, affective)
Represent the simplest complete solution
Possess internal (self-revealing, understandable) coherence
Appropriately accommodate & stimulate cognition & emotion

6. Design Values: Ethical Interaction Design
“… interactive products do things, and as designers we must be sure that the results of our labor do good things”
Do no harm (at least do minimum harm)
Types of harm:
Interpersonal (loss of dignity, insult, humiliation)
Psychological (confusion, discomfort, frustration, coercion, boredom)
Physical (pain, injury, deprivation, death, compromised safety)
Excessive mouse usage!
Economic (loss of profits, productivity, wealth or savings)
Social & societal (exploitation, creation, or perpetuation of injustice)
Environmental (pollution, elimination of biodiversity)
iPhone impacts: data usage on cellular and other networks…
Requires a deep
understanding of the user audience

7. Design Values: Ethical Interaction Design
Do no harm (at least do minimum harm)
Impact of key phases of product’s life-cycle:
Manufacturing
(use of materials: source, type, extraction, refinement processes, use of materials)
Transportation
(getting products to market and associated power needed – environmental footprint)
Usage and energy consumption
(used to produce and power products as well as maintain services)
Recyclability
(reuse of materials, ease of repair/servicing, upgrade paths, availability of replacement parts… again the environmental footprint)
Facilities
(requirements of manufacturing, R&D, sales warehousing, sever farms, and other physical support locations…)

8. Design Values: Ethical Interaction Design
Improve human situations
Increasing understanding (individual, social, cultural)
Increasing the efficiency & effectiveness of individuals and groups
Improving communication between individuals and groups
Reducing sociocultural tensions between individuals & group
Improving equity (financial, social, legal)
Balancing cultural diversity with social cohesion

9. Design Values: Purposeful Interaction Design
Based on understanding the user goals & motivations
“Designers create products that support users where they are weak and empower them where they are strong”
Design Values: Pragmatic Interaction Design
Design must get built to be of value
The relationship of mutual trust and respect between design, development, business and engineering … necessary!
Design Values: Elegant Interaction Design
Antoine St. Exupery
“… in anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.”

10. Design Values: Elegant Interaction Design
Represents the simplest complete solution
Less is more in good design
Designers should solve design problems with the fewest additions of form and behavior
Yes… developers should know the best designed algorithms are both the clearest and shortest
Possesses internal coherence
Poor design… “the result … where different development teams work on different interface modules without communicating with each other, or where hardware and software are designed independently of each other.”

11. Design Values: Elegant Interaction Design
Appropriately accommodate and stimulate cognition* and emotion
“The authors believe that elegance (in the sense of gracefulness) means that the user is stimulated and supported both cognitively and emotionally in whatever context she is in.”
* cognition: the mental action or process of acquiring knowledge and understanding through thought, experience, and the senses

12. Design values Design principles Design patterns
Principles that address issues of behavior, form and content… “technology should serve human intelligence and imagination, rather than the opposite…” Principles that represented by set of rules based on our values as designers and our experiences in trying to live up to those values

13. Design Principles: … operate at different levels of details
… can be generally thought as falling into the following categories
Conceptual principles (Chapters 8 though 13)
…what digital products should be like and how they fit structurally into the broad context of use required by their users
Behavioral principles (Chapters 14 through 17)
… describe how the product should behave – in general and specifically
Interface-level principles (Chapters 18 through 21)
… describe effective strategies for the organization, navigation & communication of behavior and information

14. Design Principles: … associated with minimizing work
Minimize work! “… serves to optimize the work for users “… giving the user greater levels of feedback and contextually useful information.” “… too much work or too little reward turns a game into a chore, as does a clunky interface that puts up roadblocks to easily performing the “fun” work of a game.” This applies not only to game software!

15. Design values Design principles Design patterns
Best practices that:
Reduce design time and effort on new projects
Improve the quality of design solutions
Facilitate communications between designers and developers
Educate designers
Note: “… the important difference between interaction design patterns & architectural design patterns”
“Interaction design patterns deal with structure & organization of elements but also with dynamic behaviors and changes in elements in response to user activity.”

16. Design Patterns: Architectural Patterns & Interaction Design
“The focus on the human aspect of each pattern differentiates architectural & interaction design patterns from engineering patterns, which are primarily intended as a way to reuse and standardize programming code…, and the concern “not only with structure and organization of elements but also with dynamic behaviors and changes in elements in response to user activity”

17. Design Patterns: Recording and using interaction design patterns
.. But also recording the context in which it applies Design patterns are not recipes or plug-and-play solutions “[Patterns] aren’t off-the-shelf components; each implementation of a pattern differs a little from every other.” Designing Interfaces, Jenifer Tidwell “It is simply never the case that patterns can be mechanically assembled in cookie-cutter fashion, without knowledge of the context in which they will be used… … the environment where the pattern is deployed is critical…”

18. Design Patterns: Types of Interaction Design Patterns
Postural: example is “transient,” meaning that a person uses it for only brief periods of time so that a larger goal can be achieved elsewhere Chapter 9
Structural: “… involves the arrangement of information and functional elements on the screen… they consist of views, panes, and other element groupings” Part III
Behavioral: “… solve wide-ranging problems relating to specific integrations with functional or data elements.”
… widget behaviors fall in this category Part III

19. Figure 7-1
The primary structural pattern used by MS Outlook is widely used throughout the industry, across many diverse product domains. The left-vertical pane provides navigation and drives the content of the overview pane in the upper right. A selection in this pane populates the far-right pane with detail or document content.