Intro to Interface Design

First round of final interface design presentations this week. We’ll finish up the rest next week.

Important: Your final class web sites are due 4pm, Wednesday, Dec. 12. Download the final web site checklist here.

Important: The final presentations will be due Wednesday, November 28.

“Service Design” (Ch. 8 in Designing for Interaction by Dan Saffer)

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” (from Digital Ground by 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

IMPORTANT: We will have our regularly scheduled class next Wednesday, November 21! Class is not optional!

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

Homework

Please complete the following for next Wednesday, November 21:

• Read “Situated Types” from Digital Ground by Malcolm McCullough
• Read “Service Design” from Design For Interaction by Dan Saffer
• Read and do Ch. 14 & Appendix in Headfirst HTML
• Write Learning Log #9
• IMPORTANT: For the final presentations, each group must submit a printed document which indicates:
  • Names of the 2 group members
  • Your chosen presentation option (1 through 6)
  • A brief statement describing the specific focus of your interface redesign project

Lecture Notes

Navigation on the web, on the screen:
(See Don’t Make Me Think by Steve Krug)

Main differences between physical navigation and web navigation (instead of physical context there is a conceptual context):

• no sense of scale
• no sense of direction
• no sense of location

Therefore, web navigation is important because:

• it gives us something to hold on to
• it tells us what’s here (reveals content)
• it tells us how to use the site (where to begin and what options are available)
• it gives us confidence in the site overall, thus reassuring us on are decision to continue using it

Krug identifies the primary web navigation conventions as:

• Site ID
• Sections, or Global Navigation, and sub-sections
• “You are here” indicator (breadcrumbs can be used additionally, too)
• Utilities (most important elements outside of the content hierarchy)
• Consistent and visible link to Home page
• Search function
• Page Name (what I click is what I get)
• Local Navigation

The “trunk test”:

• What site is this?
• What page am I on?
• What are the major sections of this site?
• What are my options at this level?
• Where am I in the scheme of things?
• How can I search?

Homework

Complete for next Wednesday, November 14:

• Read “Service Design” from Design For Interaction by Dan Saffer
• Read and do Ch. 12 in Head First HTML
• Write Learning Log #8 and upload to your class web site

In-class reading: excerpts from Information Graphics by Peter Wildbur and Michael Burke

Role of designer shifts from intermediary and specifier to more direct control of design and production – and now interactivity allows for the user to make much more choices in the realm of design.

Analogue and Digital:
Analogue instruments provide a frame of reference or context in which one is able to place the “present” moment. The range of possibilities – the scale – is apparent.
Digital is much more precise and numerically based – but understanding direction and rate of change is difficult.
Statistical information allows for the accurate representation of a data set (related data) for the purposes of contrast and comparison

Time-based media is difficult to recreate in print, but storyboards and comic strips are most commonly used to approximate duration – digital media use the “timeline” convention for composing elements in chronological sequence

SUI (solid user interface) vs. GUI (graphical user interface)

Interface is restricted in these devices, as they are generally a smaller scale and are often embedded into other objects – typically have minimal buttons and small, lo-res display screens

Some design options for SUI’s:

• Hide and reveal buttons
• One button / one function system, or…
• Attach several functions to each button (shift function or soft keys)
• Voice input
• Icon display characters

In-class Exercise (if you were absent please complete):

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?

Also, keep in mind the fundamental elements of visual design, as well as Norman’s 4 main principles: visibility, mapping, good conceptual model, feedback. Don’t forget about affordance!

Homework

Complete the following for next Wednesday, November 7:

• Write 7th learning log and upload to class web site
• Read “Narratives of Space and Time” by Edward Tufte
• Read and Do Ch. 9 – 11 in Head First HTML

Midterm Exam! No homework.

ANNOUNCEMENT: Coming next week:

• the mid-term exam (short-answer, m.c.) will be given on Oct. 24
• there will be a mid-term review of your class web sites; you must email me links to your web sites by Midnight, Tuesday, Oct. 23; please review the following checklist for more details

Today, we looked at Chapter 6 (”Interface Design Basics”) in Designing for Interaction by Dan Saffer.

He defines interface as an intermediary to communicate with a digital device.

• Interface design is just one aspect of the larger field of interaction design.
• The interface is where the invisible functionality of a digital (or electronic) product is made visible, and can be accessed, used
• The old mandate the “form follow function” is not necessarily true in the digital interface: the controls and GUI can take almost any form

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

These are the review notes that you generated in class as a review for the midterm exam next week. You will also need to review your class notes and prior readings, as well as the lecture notes posted in the class web site for a thorough review for the midterm exam.

4 principles of good design:

• making things visible (good design)
• feedback
• mapping
• good conceptual model

Affordances – difference between Norman’s and Gibson’s use of the term

• Norman: you have to see the affordance for it to exist
• Gibson: affordance exists even if it is not perceived

7 stages of action

Constraints:

• Cultural
• Semantic
• Physical
• Logical

Interface design basics:

• Grids and layout
• Type
• Color
• Etc (as listed above in the lecture notes)

Knowledge in the head vs. knowledge in the world:

• In the head: knowledge, logic, learned, memory (short term v. long term), schema theory
• In the world: external to our minds: manual, instructions, visual reminders or cues

Krug’s Don’t Make Me Think

• We scan web pages
• We look for info that is most relevant to us or the task at hand
• We satisfice when using web pages (don’t make optimal choices)
• Design web interfaces like Billboards: clear visual hierarchy, use common conventions, make apparent what’s clickable, minimize noise, use clearly defined areas (grouping like content)
• We muddle through (get by with incomplete, imprecise knowledge)

ANNOUNCEMENT: Coming soon…

• the mid-term exam (short-answer, m.c.) will be given on Oct. 24
• there will be a mid-term review of your class web sites; you must email me links to your web sites by Midnight, Tuesday, Oct. 23; please review the following checklist for more details

In Chapter 7 of The Design of Everyday Things Norman concludes the book and reviews those principle that will guide us in crafting exceptional user experiences; our focus should be to “make sure that the user can figure out what to do and the user can tell what is going on.” Here are 7 things to remember:

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

Designers have an important paradox to resolve: 1) To make something easy to use, match the number of controls to the number of functions and organize according to functions. 2) To make something look like it is easy, minimize the number of controls! The reconciliation of this is the fundamental genius of exceptional computer GUIs. (We quickly surveyed a history of OS GUIs.)

We also quickly reviewed Jakob Nielsen’s Nielsen’s 10 Usability Heuristics.

Delving more specifically into web interfaces, we surveyed Chapters 2 and 3 in Steve Krug’s Don’t Make Me Think. In particular, Krug explains how we really use the web like so:

• We scan pages
• We don’t make optimal choices; we satisfice
• We muddle through things

To assist the way in which we scan web pages, Krug recommends that we in part treat web design as a kind billboard design and employ the following principles:

• Clear visual hierarchy
• Take advantage of conventions
• Make clearly defined areas
• Make obvious what’s clickabl
• Minimize noise

Homework

Complete the following for next Wednesday, October 17:

• Read Ch. 6 from Designing for Interaction by Dan Saffer
• Catch up reading in Head First HTML (Chapters 1-8)
• Write your 6th leaning log in HTML and upload to your web site

ANNOUNCEMENT: Coming soon…

• the mid-term exam (short-answer, m.c.) will be given on Oct. 24
• there will be a mid-term review of your class web sites during the week of Oct. 24 (more details will be provided next week)

Don Norman, in chapter 6 of the Design of Everyday Things, identifies factors which often prohibit the designer from engaging in a thorough, iterative, user-centered design process:

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

3 other important reasons why designers often “go astray” are:

1. Design community mostly rewards aesthetics rather than usability
2. Designers are not typical users
3. Designers must please clients (and often not users)

Our challenge as designers and visual communicators is to balance these many external pressures while still creating pleasing visual experiences that facilitate positive, successful user experiences.

Homework

Please complete for next Wednesday (Oct. 10):

• Read Ch. 7, The Design of Everyday Things by Donald Norman
• Read Ch. 2 & 3 in Don’t Make Me Think
• Read and Do Ch. 7 & 8, Head First HTML
• Choose 2 examples of good interface design and 2 examples of bad interface design; analyze and explain each using Norman’s terminology and concepts: click here for further instructions
• Write your Week 6 leaning log in HTML and upload to your web site
  * With each successive learning log, you should use them as an opportunity to experiment and expand upon your html and css knowledge. Use tags that you haven’t previously, try out some css new css rules and see what happens.

Precise behavior can emerge from imprecise knowledge because:

• Information in the world guides us
• Often great precision is not required to complete a task
• Natural (that is, physical) constraints are present
• Cultural constraints are present

Knowledge of vs. knowledge how:

• declarative knowledge (facts, rule, details) is easy to teach, learn, can be written down accurately
• procedural knowledge (process of doing) is difficult to convey, require demonstration and practice to learn

Memory is knowledge in the head: Memory is basically structured according to long term memory and short term memory, the former being more costly to encode and retrieve, the latter being used for the just present and not having much capacity or longevity. Norman identifies three categories of memory:

• Memory for arbitrary things
• Memory for meaningful relationships
• Memory through explanation

Good reminders both act as a signal that something needs to be remembered, but also contain information about the content of the remembered things.

The power of constraints: everyday constraints limit our options and guide our choices. There are four types:

• 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

Homework

• Read Ch. 6, The Design of Everyday Things by Donald Norman (DOET)
• Read and Do Ch. 5 & 6, Head First HTML
• Write your Week 5 leaning log in HTML and upload to your web site
• Also, hold on to your diagram drawings, as you will be creating a page with it in your class web site