CS449/649: Human-Computer Interaction

Transcription

1 CS449/649: Human-Computer Winter 2018 Lecture XI Anastasia Kuzminykh

2

3 Create Design Ideas Prototype Design Static representations of the product Sketches Wireframes Visualization Mockups Prototypes - interactive design model of the product Low-fidelity High-fidelity Testing and Evaluation

4 Prototype Design Prototypes - interactive design model of the product Low-fidelity High-fidelity Tangible & Testable Artifacts Low-tech High-tech Partial functionality Full functionality Simulated interaction True interaction

5 Prototype Design High Fidelity Prototyping Tools Interactive Realistic system response Content and workflow details (Almost) Full fidelities Less human errors Allows broader usability testing

6 Prototype Design High Fidelity Prototyping Tools Implement by hand Prototyping Software

7 Prototype Design High Fidelity Prototyping Tools More control Implement by hand More options Whatever suits your purposes and platforms: Takes longer - jquery, Bootstrap, AngularJS, etc. Buggy - Android Studio, Xcode, IntelliJ IDEA, Apache Cordova, React Native, etc. Prototyping Software

8 Prototype Design High Fidelity Prototyping Tools More control Faster Implement by hand Prototyping Software Sharing & comments More options Whatever suits your purposes and platforms: - JustInMind (has widgets) Takes longer - jquery, Bootstrap, AngularJS, etc. Buggy - InVision (good with mockups) - Android Studio, Xcode, IntelliJ IDEA, Apache Cordova, React Native, etc. Outside product - Axure (not mobile friendly) - Mockplus (pre-designed interaction components) Limited options

9 Prototype Design Designing User Interface &

10 Prototype Design Designing User Interface & Visual Design Cognitive Design

11 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

12 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

13 & Color Perception Red - bold, contemporary, Orange - social, friendly, Yellow - optimistic, clear, exciting, passionate, young affordable, happy, confident logical, lightweight, playful Green - peaceful, growing, Blue - trustworthy, secure, caring, fresh, healthy, natural strong, honest, stable, calm Purple - glamorous, creative, imaginative, nostalgic, feminine

14 Favorite colors: Least favorite colors: Color preferences by Joe Hallock Image:

15 Color preferences by Joe Hallock

16 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

17 Logo examples: Interface examples:

18 Logo examples: Interface examples: /

19 Logo examples: Interface examples:

20 Logo examples: Interface examples: olio/project05.php

21 Logo examples: Interface examples: /

22 & Shape Perception Squares - stability, strength, power, professionalism, efficiency Circles - community, Triangles - power, friendship, relationship, unity, trust science, law, stability, strength Horizontal lines - Vertical lines - power, community, tranquility, flow, continuity masculinity, ambition, aggression, strength

23 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

24 & Visceral Reaction Triggers Stimuli that cause instinctive and emotion-based, subconscious, bodily response Food Survival Pleasure Images, colors, texts, shapes, etc. Opportunities

25 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

26 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

27 & The Von Restorff Effect == Isolation Effect. Items that stand out from their peers are more memorable Use meaningful and helpful contrasts Use color, shape, position and texture for accents Be consistent with accents and accentuated content Image:

28 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

29 & Gestalt Principles Proximity Objects in close proximity are seen as a group Similarity Closure Objects that look the same are seen as a group Shape is seen as a whole even if not fully closed Continuity Line is seen as a whole - natural eye movement Symmetry Objects are seen as symmetrical and formed around center

30 & Gestalt Principles for Design

31 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

32 & Fitts Law Big targets at close distance are acquired faster than small targets at long distance MT - movement time a and b - empirically determined constants, device dependent. A - the distance of movement from start to target center W - the width of the target log2(2a/w) is called the index of difficulty (ID) ID provides a single combined measure of two main physical properties of movement tasks Provides information only through an experiment - a comparative tool for devices, tasks, interaction techniques, etc.

33 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

34 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

35 Image:

36 Image:

37 & Rule of Thirds Image:

38 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

39 Image:

40 Larson, Adam M., and Lester C. Loschky. "The contributions of central versus peripheral vision to scene gist recognition." Journal of Vision 9.10 (2009): 6-6.

41 & Types of Vision Central Peripheral What Where - Object recognition - Scene recognition - Element identification - Context identification - Details attention - Danger attention

42 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

43 & Free space Visual - space around Layout - margins, Text - spacing between Content - spacing graphics, icons, images paddings lines and letters between content groups

44 & Free space Visual - space around Layout - margins, Text - spacing between Content - spacing graphics, icons, images paddings lines and letters between content groups Makes important elements stand out Improves comprehension Clarifies relationship through proximity

45 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

46 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

47 & Dual Coding Theory - human memory operates both wirth verbal representations and mental images, when both potentiate recall of each other Allan Paivio, University of Western Ontario, 1971 Text - Slower - Verbal message VS Images - Faster - Illustrating idea Combine. Use not just images and diagrams, but infographics, visual cues, framing, etc.

48 Image: blog/2012/05/designcopy-and-mental-pr ocessing/

49 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

50 & Patterns Matching - the way of incoming information - Based on previous experience - Assesses familiarity - Stimuli that are difficult to match can be more memorable, but also frustrating

51 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

52 & Social & Emotional Facial Recognition - We are instinctively drawn to human faces - Aggressive and unhappy faces draw more attention - Expression on the face will influence user s feelings about the product

53 & Social & Emotional Facial Recognition - We are instinctively drawn to human faces - Aggressive and unhappy faces draw more attention - Expression on the face will influence user s feelings about the product Authority - We trust experts and those who have power Reciprocation & Favoritism - We recognize favors and try to return them - The more we like people, the more we want to say yes Scarcity - The less available the resource, the more we want it Social Proof Seeking Robert B. Cialdini, The Science of Compliance

54 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

55 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation

56 & Types of Terry Winograd Manipulation Back-end Technology based Locomotion Conversation Mental Model Metaphorical Reflected in vocabulary Often hidden mechanisms Dependent on embodiment

57 Prototype Design Designing User Interface & Color Perception The Von Restorff effect Rule of Thirds Dual-coding theory Manipulation Shape Perception Gestalt Principles Types of vision Patterns matching Locomotion Visceral Reaction Triggers Fitts Law Free space Social & Emotional info Conversation