sm 3511 interface design - yong ming...
TRANSCRIPT
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 [email protected] to discuss further. Feel free to pass on this message to someone else.