Introduction and the Design of Everyday Things

Information about the Course

Warning about jargon

What is this Course About

This is a course in sensitivity.

Making a program work for you is pretty easy. Making it work for another user is much harder  You need to think about the actual users of your software early in the design stage, and keep their needs in mind all the time.

Engineers are not trained in design and psychology and these are increasingly important in writing good software. People in general have a hard time sitting quietly while people criticize your hard work, but this is very important to creating a useful product.

This course is primarily about the procedures to go through to create good designs and evaluate them. This course is not about teaching you how to write a bunch of programs with a specific widget library; widget libraries come and go. This course is going to focus on higher level concepts of how to create useful user interfaces.

We will be using Processing, Processing.js and HTML for creating the user interfaces for this course. There will be two projects - the first done individually to get everyone familiar and productive in the language, and the second in small groups.

Throughout the course there will be many opportunities for you to present your work to others in small groups, and to the class as a whole.

If you are the kind of person that wants specific quantifiable metrics for a given grade on a programming project, then this may not be the class for you. There are many rules for creating good user interfaces and many are in direct conflict with each other, so finding the balance is as much an art as a science - that's why its hard to do.

The Design of Everyday Things

(material from: The Design of Everyday Things by Donald Norman)

Science Finds

Industry Applies

Man Conforms

(1933 Chicago World's Fair)


Start by looking at Interfaces for common things:

"Affordances - perceived and actual properties of a thing, primarily those fundamental properties that determine just how the thing could possibly be used." Affordances provide strong clues to the operation of a thing

Provide a good conceptual model and make things visible



from the Design of Everyday Things

some local examples

   

and a short 5 minute video: https://www.youtube.com/watch?v=yY96hTb8WgI

Two conceptual models

The system image is the visible part of a device (including the physical structure, the documentation, instructions, etc). The designer only talks to the user through the system image. If the system image doesn't make the design model clear then the user will create a different model through their interaction.

Mental models - conceptual model of the way something works, often constructed from fragmentary evidence

Jef Raskin - To the user the interface IS the product.

Thermostat - will a room or oven heat (or cool) faster if the thermostat is turned all the way to the maximum setting?

    2 'folk' theories of thermostats

    both are wrong
        thermostat is an on/off switch - fully on or fully off - no in between

    The design gives no hint to the actual model so the users form their own theories

Why is the basic automobile easy to figure out?

This is pretty important when you go on a trip and rent a different car. You need to be able to drive that car safely.


Once you get to the hotel you run into something that may have less obvious mappings like an alarm clock. Given the prevalence of smart phones these may begin to disappear soon, but when an alarm that you didn't set goes off at 5am and you scramble to turn it off you have a user interface problem to deal with.

Lets take some simple alarm clock examples that are just clocks and not clock radios or clock radio phones


Here is a classic analog clock.

The display shows the current time and the time that the alarm is set to.
There are three controls with a pretty decent set of icons:
How do I know when the alarm is on? I need look at or feel for the bar on the back to see if it is in or out.





Here is a digital analog clock.

The display shows the current time and the time and whether that time is pm
There are three controls on the front and top with textual names:
How do I know when the alarm is on? Another dot appears a the bottom of the display under the PM dot.




Here is another digital analog clock.

The display shows the current time and the time and whether that time is pm
There are three controls on the back and top with textual names:
How do I know when the alarm is on? The upper dot of the colon in the time glows slightly brighter.

Note that TIMEX is a little inconsistent with their control names: 'DIMMER' is written horizontally, TIME SET / LOCK / ALARM SET doesn't have one, slow and fast appear to be named 'HONG KONG' and ALARM is written vertically.




But in all these cases one interface remains the same ...

Sony sells a clock where the time is preset at the factory so you only need to choose your time zone and it should always keep the correct time, aside from governments changing the rules on daylight saving time. Other clocks now listen to the airwaves to set themselves automatically. However you still need to set the alarm yourself.


Given all of these choices, what do I use for an alarm clock? my smartphone.

The clock and alarm interface for my phone did not try to emulate the controls on the physical devices, even though those controls were familiar.

How about watches?

Most of these issues occur because the human is forced to conform to what is esier for the underlying (hidden) technology.


Mapping - relationship between controls and their affects. Want the mapping to be 'natural' - taking advantage of physical analogies and cultural standards.

Some examples from my house


light switch for fan/lights in family room
fan and switch


porch lights (track lighting, a fan with a light, and an outside light)
Front Porch Lightswitch

fuse box / circuit breakers
fusebox
some more examples: http://www.baddesigns.com/examples.html

and here is a nice computer-related one: http://www.baddesigns.com/mouseconnector.html

Constraints


and logic tells us that there should be no pieces left over

These two books: 101 un-useless Japanese Inventions and 99 more un-useless Japanese Inventions by Kenji Kawakami have some novel devices that are interesting to look at in this context.

http://www.amazon.com/gp/product/0393313697/103-0859795-8002257?v=glance&n=283155

Forcing function

Up until the late 1940s it was possible to try and start car without the key in the ignition

7 stages of action


7 Stages as Design Aid

How easily can a person

Gulf of execution

Gulf of evaluation

Designing for error

  1. Understand the cause of error and design to minimize those causes
  2. Make it possible to reverse (undo) actions, or make it harder to do what cannot be reversed
  3. Make it easier to discover errors that do occur and make them easier to correct
  4. Think of an object's user as attempting to do a task, getting there by imperfect approximations, Don't think of the user as making errors, think of the actions as approximations of what is desired


Design Thinking


Human-Centered Design as a process should ensure


Double-Diamond




Some Class Discussion Topics

Elevators


Have people experienced elevators that work in different ways?

    e.g. at O'Hare you have the floor, the team name, colors, and icon, and a (somewhat relevant) song

   

Vending Machines



Finding your way ...
Field Museum floor maps: https://www.fieldmuseum.org/file/425591

Coming Next Time

In-Class group work related to homework 1

last updated 1/10/17