COMP 3020: Human-Computer Interaction I

Transcription

1 reddit.com 1

2 2

3 COMP 3020: Human-Computer Interaction I Fall 2017 Prototype Lifetime James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

4 lifetime of prototypes question: how do we integrate prototyping into the overall development cycle? Early design brainstorm different representations choose a representation sketch out interface style task centered walkthrough fine tune interface, screen design heuristic evaluation and redesign usability testing and redesign low fidelity prototypes medium-fidelity prototypes high-fidelity prototypes / restricted systems limited field testing alpha/beta tests working systems Late design COMP

5 three methods for managing this integration: evolutionary modular (incremental) throw-away 5

6 evolutionary prototypes iteratively change the prototype to incorporate changes eventually, the reworked prototype becomes the final system test prototype design prototype system implement prototype 6

7 modular (incremental) prototyping Design component build the system as separate modules/components Design component Test component Implement component Design component each module is designed, prototyped and build separately before being combed into a final system Test component Implement component system Test component Implement component 7

8 throw-away prototyping Design prototype prototype is used to get rapid feedback (i.e. to learn lessons) Test prototype Implement prototype Test prototype Design prototype Implement prototype prototype is built, tested, and deployed (or discarded) Test prototype Design prototype Implement prototype 8

9 messages prototyping is a very useful way to help reduce the number of designs, by.. trying them, getting input on them, exploring if they would actually work, etc. there are low, medium, and high-fidelity prototypes, based on the position in the design horizontal and vertical prototypes serve to explore how everything will look and feel, or, how a specific feature will work in detail

10 COMP 3020: Human-Computer Interaction I Fall 2013 human abilities the human, perception, color cognition for design James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry

11 we sidestep the user centred design process for a bit 11

12 understanding users needs with respect to specific system being designed (e.g., expertise, tasks, procedures, context-of-use) fundamental human characteristics (e.g., vision, memory, cognition) COMP

13 the human a simplified view of the human involves: input/output (vision, auditory, haptic; movement, voice) memory (short term, long term, sensory) processing (cognition, problem solving, learning, etc ) each person is different!! COMP

14 perception processing of sensory information in order to see, hear, taste, smell, or feel objects in the world vision a dominant form of perception understand perceptual phenomenon for proper visual designs impacts of a number of design issues including: What elements are easily distinguishable What draws attention COMP

15 good design? COMP

16 good design? COMP

17 vision two broad stages in vision physical reception of stimulus processing and interpretation of stimulus color patterns COMP

18 the eye: physical reception sensing begins at the retina, which has two type of sensors cones - detect colour rods intensity, gray primarily for night vision & perceiving movement COMP

19 the eye: physical reception center of retina (fovea) has the highest concentration of cones IMPLICATION: RAWR allows for high acuity of objects focused at center rods are mostly located in the periphery IMPLICATION: We are sensitive to motion in the periphery COMP

20 color components (HSI model) hue is the property of the wavelength of light (i.e. color) such as red or yellow lightness is the amount of white or black in a color (brightness). Some hues are inherently lighter or darker saturation is the strength or purity of the hue in a color. The higher the saturation, the purer the color, i.e. red is more saturated than pink. Lower saturation - > more grey COMP

21 how light becomes color cones (not rods) are sensitive to particular wavelengths of light three basic groups of cones: 430nm light, 530nm light, 560nm light our brains interpret these differently because they are separate cones. They become blue, green, and red. what if we have some blue, some green, some red? COMP

22 color chording : our eyes are not actually sensitive to light at, e.g., the aqua wavelength our brain guesses (extrapolates?) the wavelength based on the three sensor values implication: not all colors are equal. We have varying sensitivity to different colors COMP

23 computer monitors problem it s expensive and hard to make a device that can generate a range of specific wavelengths (color generators) note: inversely, it s really easy to manufacture a light at a specific (but unchangeable) wavelength solution: monitors are designed to exploit the limitations of the human eye: they generate intensities at the red, green, and blue points to target our three groups of cones

24 color sensitivity cones are unequally distributed (approx: 64% red, 32% green, 4% blue) center of retina (high acuity) has no blue cones IMPLICATION: disappearance of small blue objects you fixate on most sensitive to the center of the color spectrum IMPLICATION: blues & reds must be brighter than greens & yellows shapes are detected by finding and contrasting edges IMPLICATION: lower contrast with blue, so harder to find edges. hard to deal with blue edges and shapes COMP

25 interpreting color different wavelengths of light focus at different distances behind eye s lens i.e. red appears closer than blue (chromostereopsis) difficult to focus because one color is fuzzy when the other is in focus see an uncomfortable stereo-like edge IMPLICATION: Careful about color combinations COMP

26 interpreting color as we age, lens becomes yellow absorbs the shorter wavelengths sensitivity to blue is reduced IMPLICATION: don t rely on blue for text or small objects COMP

27 colour deficiency (colour-blindness) approximately 8% of human males, along with a rare sprinkling of females, have some form of colour blindness most common is known as red/green colour blindness usually, a lack of red cones, OR, cones attuned to a non-standard wavelength (too much overlap) COMP

28 Ishihara Test for Colour Blindness COMP

29 color for contrast useful for drawing attention, viewing detailed information, but be careful with color!! examples of high contrast: black on white dark green on white white on purple examples of low contrast: yellow on white blue on black the larger the items, the less contrast needed contrast on screens gets diminished.. when? COMP

30 Contrast There are a number of tools available to test whether colour combinations provide sufficient contrast: E.g., COMP

31 use of colour - messages cannot easily detect colour differences in the periphery certain colours more easily detectable (e.g., blue has low sensitivity) need to design for colour blindness / aging users color is awesome, but DON T RELY ON IT COMP

32 vision system we re just scratching the surface

33 beyond color patterns and shapes higher-level visual system capable of perceiving forms and patterns contrast helps define object borders gestalt principles set of principles describing how our mind perceives wholes out of incomplete elements extremely useful in creating structure in an interface COMP

34

35