sm 3511 interface design - yong ming...

SM 3511 Interface Design

Introduction

Classes, class deliverables, holidays, project groups, etc.

refer to http://kowym.com/index.php/teaching/

Inter-face: a point where two systems, subjects, organizations, etc., meet and interact

Inter-face: a point where two systems, subjects, organizations, etc., meet and interact

enables interactions

Age of machineries

Interfacing humans and machines

Design fields conceived in the late 1800s to develop products for human use, started out using “scientific” methods as foundation

And science at that time almost always means objective measure (human mind is unreliable)

Beginning 1880s, in coming “scientific management” (Taylorism)

“Time and motion studies”

Example, Charlie Chaplin’s movies reflected people’s perception toward factory work

Machineries getting out of hand

Metropolis, 1927

Research into human issues of technologies largely remained limited until World War II

In many of the flight accidents during WWII, many of the report indicate “pilot error” as the cause:

“Alphonse Chapanis was called on to figure out, why pilots and copilots … frequently retracted the wheels instead of the flaps after landing… He immediately noticed that the side-by-side wheel and flap controls… could easily be confused. He also noted that the corresponding controls on the C-47 were not adjacent and their methods of actuation were quite different; hence C-47 copilots never pulled up the wheels after landing….[Then] a small, rubber-tired wheel, which was attached to the end of the landing gear control and a small wedge-shaped end at the flap control on several types of airplanes, and the pilots and copilots of the modified planes stopped retracting their wheels after landing.”

Hierl, et al., 2012

Hierl, et al., 2012

How do we reduce pilot error?

Many research groups began working on this problem:

The question is: how do we minimize flight accidents and maximize pilots’ performance?

From 1939: Applied Psychology Unit of Cambridge University, England

1940: U.S. Army Air Forces Aviation Psychology Program

1945: AAF Aero Medical Laboratory, Psychology branch

1945:Naval Research Laboratory in Washington, D.C

… and the trend never stops since

How about a control room?

In the 1980s, Scandinavian countries began a series of workplace democracy movements

Academics began to study how to improve workplace environment

Using users as participants to jointly develop better work stations

Field of ergonomics emerged

E.g., Fitts’ Law

Time that we use to move between two buttons is a function of the buttons’ distance and size

How about chairs?

How about chairs?

How about chairs?

Also, GOMS (Goals, Operators, Methods, and Selection rules) approach to ergonomics

Code Operation Time

KKey press and release (keyboard)

Best Typist (135 wpm) 0.08 seconds

Good Typist (90 wpm) 0.12 seconds

Poor Typist (40 wpm) 0.28 seconds

Average Skilled Typist (55 wpm)

0.20 seconds

Average Non-secretary Typist (40 wpm)

0.28 seconds

Typing Random Letters 0.50 seconds

Typing Complex Codes 0.75 seconds

Worst Typist (unfamiliar with keyboard)

1.20 seconds

P Point the mouse to an object on screen 1.10 seconds

B Button press or release (mouse) 0.10 seconds

H Hand from keyboard to mouse or vice versa 0.40 seconds

M Mental preparation 1.20 seconds

T(n) Type string of characters n × K seconds

W(t) User waiting for the system to respond

D(n0, l0)Draw n0 straight line segment with mouse of total length l0 centimeters

But we are still looking for unchanging principles of “humans as mechanical bodies”

The human intention and ability to act as an independent being is still largely ignore in these studies

What if we do not want to follow the standard procedure, and wish to deviate from managers’ orders?

Enters Interaction Design

Humans adapt to designs: we react to things we can sense

They perceive, analyze, make plans, and take actions, that is, they react

Late 80s, designers began to shift towards Interaction Design

Norman, 1998. Design of Everyday Things

Mental model

How the users would think of the activity

An example of user’s mental model

Use metaphors that fit users’ mental models

For example, iPhone gestures (See https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/)

iOS Gestures as paper metaphor

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW1

Metaphors are derived from user goals, and how users manipulate mental objects to achieve these goals

Metaphors are not direct replica of tools that users are currently using!!!

For example, PC calculators

Differences between ergonomics and interaction design

Ergonomics

Examines humans as physical bodies; interested in universal laws in design

Interaction design

Examines humans as reactive agents; as designs vary, humans will react differently

Now, we have the conceptual tool to understand interaction between a human and a computer

Beginning of human-computer interaction

HCI began to develop interaction design principles

When you are designing buttons, why is 1+1=3?

Heuristics, e.g., affordances

(Affordance) What does the door tell you?

HCI began to develop interaction design methods

Usability tests

Most successful HCI methods in consulting businesses

Typically 5-10 users

Users are asked to perform pre-designed tasks

User actions are recorded and analyzed to determine design issues

Even though the aim is to study interactions, the purpose is still to achieve greater effectiveness and efficiency

At the outset, computers refer to human beings, whose job is to calculate (e.g., engineering tables)

Then, we had analog computers, then digital computers

We did not have the division of labor—users, programmers, designers—when computers as machines were first invented

Users were college students or corporate employees using these systems to solve mathematical problems

They design and code their own programs, for their own use

Therefore, it was impossible to have notion of user-centered computing (userdid not exist!)

Then comes assembly languages

Early programming languages, LISP, FORTRAN

High level languages, e.g, Python

Assembly

FORTRAN

Python

Textual user interface, e.g., DOS

Graphical user interface

Programmers and users began to become two distinct groups in computer use

Interaction (user-centered) began to become meaningful

Napoleon’s campaign by civil engineer Charles Joseph Minard

Some important goals of information design

Users should see the purpose of the page just by looking at how information is presented

No manual is required

This also means that each screen has to have a clear purpose; and thus cannot be overly complex

To reduce complexity of screens

Develop a hierarchy of interlinking screens

Most important information are first presented

Less important information are put away until users need them

Hierarchy of screens

Often presented in menus

Menu design

Breadth vs depth

Speed vs. simplicity

Restaurants’ menu can be very broad

Affordances

Android buttons’ states

When all else fails (users cannot recognize the graphics no matter how you design), be consistent

The many style guides help us in this

New areas in computing research began to emerge

Tangible computing

Computation is no longer a function that resides only in computers

“[T]o distribute computation across a variety of devices, which are spread throughout the physical environment.”

For example, printers and fax machines can advertise themselves or reconfigure themselves

Researchers began to imagine other everyday things that can compute, (e.g., papers, cups, pens, ornaments, toys)

Designing for accessibility

Example, older adult users

A huge topic at that time, was to imagine how computers may disappear and become part of our everyday life, i.e., invisible

“The Invisible Computer… is the end result, hiding the computer, hiding the technology so that it disappears from sight, disappears from consciousness, letting us concentrate upon our activities, upon learning, doing our jobs, and enjoying ourselves,” Donald Norman, 1998

And invisible is a notion that had largely disappeared

“Invisibility is not engaging,” Dourish, 2001

Grudin, 2012

Discuss ideal situation only; perform user research methods including interview and ethnography

Discuss how users would interact with the design in the ideal case; progressively increase design details

Wireframes

A sketch of how information are laid out on key screens

Screens that help users accomplish goals

Stitching everything together—Detailed design

You start putting Activity, Information, and Interaction into a logical sequence of screens known as a Storyboard

At this point, design should be less thinking but a lot of tedious work

An example of workflow analysis

Develop objective discussions of possible features

Discuss pros and cons

Claims analysis, or other quantitative methods work well for this

An example of claims analysis

An example of Failure Mode Analysis rating scale

Looking to Hire a Student Assistant

I am hiring a Student Assistant for Semester A 2017/2018, with possibility of extension to Semester B 2017/2018. This student is:

Fluent in Cantonese, and has good English writing skill;

Has experience conducting interviews;

Has experience playing computer games, particularly League of Legends;

Has experience interacting with teenagers and their parents.

This student will be conducting co-interviews (with my supervision) esports youth and their parents.

If you are interested, email me at yongmkow@cityu.edu.hk to discuss further. Feel free to pass on this message to someone else.