SM 3511 Interface Design. Introduction

Transcription

1 SM 3511 Interface Design Introduction

2 Classes, class deliverables, holidays, project groups, etc. refer to

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

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

5 Age of machineries

6 Interfacing humans and machines

7 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

8 Machineries getting out of hand Metropolis, 1927

9

10 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

11 Hierl, et al., 2012

12 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

13 How about a control room?

14 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

15 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

16 How about chairs?

17 How about chairs?

18 How about chairs?

19 Also, GOMS (Goals, Operators, Methods, and Selection rules) approach to ergonomics Code Operation Time 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 K Key press and release (keyboard) 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) D(n0, l0) User waiting for the system to respond Draw n0 straight line segment with mouse of total length l0 centimeters

20 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?

21

22 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, Design of Everyday Things

23

24 Mental model How the users would think of the activity An example of user s mental model

25 Use metaphors that fit users mental models For example, iphone gestures (See umentation/userexperience/conceptual/mo bilehig/) ios Gestures as paper metaphor umentation/userexperience/conceptual/mo bilehig/interactivityinput.html#//apple_ref/ doc/uid/tp ch55-sw1

26 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

27 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

28 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?

29 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 predesigned 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

30 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 (user did not exist!)

31 Then comes assembly languages Assembly Early programming languages, LISP, FORTRAN FORTRAN High level languages, e.g, Python Python

32 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

33 Napoleon s campaign by civil engineer Charles Joseph Minard

34 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

35 Hierarchy of screens Often presented in menus Menu design Breadth vs depth Speed vs. simplicity Restaurants menu can be very broad

36 Affordances Android buttons states

37 When all else fails (users cannot recognize the graphics no matter how you design), be consistent The many style guides help us in this

38 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)

39 Designing for accessibility Example, older adult users

40 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

41 Grudin, 2012

42 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

43 Wireframes A sketch of how information are laid out on key screens Screens that help users accomplish goals

44 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

45 An example of workflow analysis

46 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

47 An example of Failure Mode Analysis rating scale

48 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, me at yongmkow@cityu.edu.hk to discuss further. Feel free to pass on this message to someone else.