Intro to Interface Design

For next week:

• Work on class web sites, due Wednesday, May 7
• Study for final exam, Wednesday, May 7

Students give interface design presentations this week.

Homework

• Research Presentations due next week
• Work on class web sites, due Wednesday, May 7
• Study for final, Wednesday, May 7

Lecture

“Service Design”, Dan Safer

What is a service? Chain of activities that form a process and have value for the end user:

• May be discreet or large-scale (ATM transaction v. postal delivery service)
• Service is essentially a system

Characteristics of a Service:

• Intangible: service is ephemeral
• Provider ownership: services cannot be bought per se by the customer
• Co-created: providers and customers engagement each other in the service
• Flexible: adapt to unique customers and situations
• Time based: temporal aspect and dynamic in services
• Active: requires human activity
• Fluctuating demand: many factors make services variable

Elements of Service Design:

• Environments
• Objects
• Processes
• People

Craft of Service Design:

• Environment Description: need an understanding of the physical / virtual space in which the service will be executed
• Stakeholder Description: who is affected (directly and indirectly) by the service?
• Company Perceptions and Branding: how does the service encompass and extend the provider company’s brand
• Touchpoints: points of contact and communication within the service system; eg., physical locations, signage, objects, web sites, mailings, print pieces, customer service, etc
• Process Map: (like a flowchart) an overview of the customer pathway for the service, an analysis of touchpoints, choices, surrounding steps that may not be designed)
• Service Blueprint:
  • Service moments: (like wireframes) key moments within the service are documented with text and images
  • Service string: service strings are connected to represent the pathway through a particular service
• Service Prototype: live, dynamic scenarios; can be simulated or live environments with real customers and employees

“Situated Types”, Malcolm McCullough
Interactive designers “need to recognize living situations” in order to create better experiences with technology.
Ubiquitous computing (ubicomp) or pervasive computing are not simply singular, portable devices – they are often part of larger systems and depend very much on the situations in which they are used.

“Contexts remind people and their devices how to behave.”

McCullough approaches the variety of situations from a typological perspective: situated types.
With the increase of pervasive computing and the “anytime-anyplace” arbitrariness of the technology, it becomes important to understand various of types of places (“situated types”) in order to shape this technology in appropriate ways.

McCullough advocates for a distinction between ubiquitous computing and situated computing. Situated computing is “based on the belief that such universality is neither attainable nor desirable.”

Designers of pervasive computing and devices need to take into account “appropriateness” – which may be determined through a concern for protocols - “…interaction design will need to understand how built space contributes to the conduct of life.”

McCullough proposes 30 types of spaces to consider which are divided into 4 broad categories:

• Work
• Home
• City
• Travel

Homework

Complete for next Wednesday, April 23:

• Read Designing for Interaction, Ch. 8
• “Situated Types” by Malcolm McCullough
• Headfirst HTML, Ch. 14
• Write Learning Log #10 and upload to web site (last one of the semester!)

The Final Interface Design Presentations have been assigned. The first presentations will be due Wednesday, April 30.

Read the rest of this entry »

Homework

Complete the following for next Wednesday, April 19:

• Read Designing For Interaction, Ch. 3 - 5
• Read Headfirst HTML, Ch. 12
• Write Learning Log #9 and upload to class web site

Lecture

Designing For Interaction, Ch. 2 

Interaction designers solve problems – problems generally are identified and presented by businesses – often problems are complicated and difficult to identify: superficial problems often stem from deeper, more systemic ones

Define the project

• Design brief: document outlines the scope of project, timetable, deliverables, goals, brand, business philosophy
• Stakeholder interview: conversations with a range of people who have a vested interest / knowledge in the problem and its solution

Business goals: what does the client consider a successful outcome / resolution of the problem

Constraints: the requirements and limitations of the potential solutions to the problem – breaking these can be possible with exceptional ideas and convincing arguments

Gather information – research relevant to the project

Four approaches to Interaction Design (show table 2.1)

• User-centered design: the user is the focus of the design (designer’s are not typical users). Designer focuses on user goals and then determines the tasks and means necessary to achieve those goals – user data is the determining factor – user is involved in every stage of the design process
• Activity-centered design: Designers focus on the purpose of an activity, allow designers to focus on tasks at hand and design products/services that support those tasks
• Systems design: Structured, rigorous design methodology good for tackling complex problems; holistic approach that emphasizes an understanding of context (the big picture)
• Genius design: Experienced designers work within their own creative process (nearly autonomously) to consider what users might want and then design based on their own judgment

The best designers move in between all four approaches, determining which one best suits the design problem at hand

Don’t Make Me Think, Ch. 2, 3

How we really use the web

• We scan pages (not read)
• We don’t make optimal choices – we satisfice: we don’t choose the best option – we choose the first reasonable option
• We muddle through things

Billboard Design 101

• Clear visual hierarchy
• Take advantage of conventions (Norman says “standardization” and “cultural constraints”)
• Clearly defined areas (Norman says “grouping” or “modularization”)
• Make obvious what’s clickable (Norman says “make things visible – affordance”
• Minimize noise (avoid the information rejection problem)

Homework

Please complete the following for next week:

• Designing for Interaction, Ch. 2
• Don’t Make Me Think, Ch. 2 & 3 (download pdf)
• Headfirst HTML, Ch. 11
• Write Learning Log #8 and upload to web site

Lecture

What is Interaction Design?

Interaction design is relatively new as an autonomous discipline, although people have been carefully crafting interactions for millennia. Safer: “Interaction design is the art of facilitating interactions between humans through products and services. It is also, to a lesser extent, about the interactions between humans and those products that have some sort of “awareness”…”

• Interaction design is contextual—it solves very specific problems, serves a purpose for a unique time and context
• Interaction design is concerned with the behavior of products and services, with these work… it’s how people make connections with each other through such products and services

Safer recommends that the skilled interaction designer benefits from the following:

• Focusing on users
• Finding alternatives
• Using ideation and prototyping
• Collaborating and addressing constraints
• Creating appropriate solutions
• Drawing on a wide range of influences
• Incorporating emotion

Interface Design Basics

The basic elements of interface design are listed here:

• Layout
• Typography
• Color
• Material and shape

Controls and widgets: visible controls that allow the user to manipulate the device. A control plus its function defines a widget.

Icons

• Short cuts and visual reminders used by most digital interfaces
• Can be difficult to interpret and loose currency over time

Sound

• Sound offers great opportunities for feedback without the user having to constantly visually monitor a task
• Proper balance must be found between usefulness and annoyance

Standards

• “Obey standards unless there is truly superior alternative”
• Use of standards (as we have seen) decreases learning time in approaching new devices
• Deviations can cause frustration and annoyance

Interfaces without faces may include:

• Voice
• Gestures
• Presence

We ended class with an interface design exercise. (Should be scanned and incorporated as an HTML page on your class web site.)

Design an elevator for a building with 1000 floors. Not an elevator system, a single elevator that can travel from the ground floor to the 1000th floor. Address at least the following:

• How a user selects a floor
• How the floors are displayed to those in the elevator
• What are the controls?
• How does the interface exist in the context of the elevator space?

Homework

• Read Designing for Interaction, Ch. 1 & 6
• Read Headfirst HTML, Ch. 10
• Writer Learning Log #7 and upload to web site

Lecture

Norman: User-Centered Design 

Norman says “Design should:

• Make it easy to determine what actions are possible at any moment (constraints)
• Make things visible, including the conceptual model of the system, the alternative actions, and the result of actions
• Make it easy to evaluate the current state of the system
• Follow natural mappings between intentions and the required actions; between actions and the resulting effect; and between the information that is visible and the interpretation of the system state

“Make sure that the user can figure out what to do and the user can tell what is going on”

1. Use both knowledge in the world and knowledge in the head
2. Simplify the structure of tasks
3. Make things visible
4. Get the mappings right
5. Exploit the power of constraints
6. Design for error
7. When all else fails, standardize

“The Desktop”, Interface Culture

Johnson addresses the essential metaphor by which the GUI has developed: the Desktop

• Like others before it, it is a spatial metaphor (he offers the Gothic cathedral as an example)
• The design of the metaphor, the GUI implies a worldview, a set of values
• May be the single most important design decision of the 20th c.

Engelbart (in the demo of the first GUI) and Sutherland (Sketchpad) had spatialized information in 2D – Alan Kay, then, gave this spatialization depth with the further exploitation of the windows metaphor

Why did the desktop metaphor have such staying power for the computer interface?
In 1984 comes Macintosh from Apple, which adds a new dimension of style, character, gratuitous form to the GUI – the software is the selling point of the machine

• A “lifestyle choice” becomes intertwined with selling the image of the software
• Early reviews scoffed at the “graphics” component of the OS, as if it was not business-like, professional – but cartoony, simplistic

Magic Cap and Microsoft Bob: here the metaphor was lost to the obsession with simulation—“the domestication of the personal computer”

• what happens when the metaphor degenerates into simulation?

Also, Bob is conceived of as a private space, anti-social: the next generation of interface metaphors must take into account the notion of community

Mark Jeffries The Palace approached this, as do multiplayer online games… these also create a 3D space for interaction with others and data

• Second Life is an heir to this type of interface

Homework

Please complete for next week, Wednesday, March 26:

• Class web site for midterm review (download the checklist here)
• Good/Bad Interface Assignment (created as a html page on your class web site - download assignment details here)
• Read Headfirst HTML, ch. 9
• Read Design of Everyday Things, ch. 7
• Read Interface Culture, ch. 2 (download pdf)

No class.

IMPORTANT: The midterm exam will be given on Wednesday, March 19.

Homework

• Study for midterm exam: review class notes and readings
• Work on class web site for midterm review: due Wednesday, March 26 (download the checklist here)
• Good/Bad Interface Assignment: due Wednesday, March 26 (download assignment details here)

Lecture

Most good design evolves!

• Design is tested
• Problems are discovered and modified
• Retesting
• Repeat process until problems or resources are exhausted

Craftspeople and folk artists follow a kind of natural evolution in the things they make, adjusting objects via iterations of a single design: this is the iterative process of design

There are several factors which inhibit this kind of iterative, evolutionary design process:

• Demands of time and product life-cycles
• Lack of mechanisms for collecting and feeding back user experiences
• Pressure to “innovate” by standing out among the crowd
• The design profession’s privileging of individuality

The evolution of the typewriter keyboard is an interesting example: The ultimate solution was a result of physical constraints – keeping the typebars from jamming, common pairings of letters were placed apart:

• With the advent of the electronic keyboard, why hasn’t the layout changed? What is holding innovation back?
• Especially since, as Norman notes, the constraints no longer apply, the typing style no longer matters, and it’s difficult to learn

Why designers go astray:

• Design community mostly rewards aesthetics rather than usability
  • Why is focusing on aesthetics a problem?
  • Are there examples (in your opinion) of designs which successfully marry usability and aesthetics
• Designers are not typical users
  • Designers falsely rely on a kind of “everyday psychology”
  • Designers have become so expert in their products that they can no longer perceive or understand difficulties
  • Usability testing is essential!
• Designers must please clients (and often not users)
  • Clients often have a different set of motivations the design of products: status and image, planned obsolescence, inexpensiveness of manufacturing, and any other host of quirky ideas

2 temptations for designers:

• Creeping featurism: the tendency to add features to a product, which is often a natural inclination, a way to respond to user’s needs
  • Avoid and restrain from adding an unruly amount of features
  • Modularize: the proper division of complex set of controls based on function (groupings)
• Worshipping of false images: the appearance of technical sophistication, the privileging of appearance and image over usability

Homework

Complete for next week:

• Read Ch. 6, The Design of Everyday Things
• Read and Do Ch. 7 & 8, Head First HTML
• Write your leaning log #5 in HTML and upload to your web site

Lecture

Knowledge of vs. knowledge how:

• declarative knowledge (facts, rule, details) is easy to teach, learn, can be written down accurately – “green means go”
• procedural knowledge (process of doing) is difficult to convey, require demonstration and practice to learn – performing a skilled action

Great precision is not often required, but certainly depends upon the array of choices

Memory is basically structured according to…

• long term memory: more costly to encode and retrieve
• short term memory: used for the just present and not having much capacity or longevity

3 Important categories of human memory:

• Memory for arbitrary things, rote learning: a poor way to learn because there are no meaningful relationships to contextualize the knowledge (we often attempt to impose constraints on “arbitrary” pieces of information in order to facilitate the learning – ABC jingle, eg.)
• Memory for meaningful relationships: a sensible structure exists which corresponds to existing knowledge we possess – Norman’s example of the turn-signal switch, eg.
• Memory through explanation: we create mental models to explain behavior – understanding – which can then be applied to unfamiliar circumstances, either not remembered or never before encountered

There is a trade-off between knowledge in the head and knowledge in the world: designers must balance these when designing successful user experiences (see Norman’s table illustration):

Knowledge in the World
Retrievable whenever visible or audible
Learning not required – interpret available information
Slowness of search and interpretation is inefficient
High ease of use at first encounter
Need to give detailed info which can limit design aesthetics

Knowledge in the Head
Not Retrievable – requires memory, searching
Learning required and can be difficult – need meaningful structure
Very efficient
Low ease of use at first encounter
Low visibility gives designer great freedom for aesthetics

The power of constraints: these limit our options and guide are choices, thus supplement memory per se

Everyday constraints:

• Physical: the properties of objects dictate how they work
• Semantic: understanding of context, the specific situation we find ourselves in as well existing knowledge of the world
• Cultural: predominant, accepted cultural conventions guide behavior
• Logical: natural mappings – logical relationships between spatial or functional layout