Final Flashcards

1
Q

What is a Prototype?

A

Can be a small-scale model in other fields. But it HCI, screen sketched, storyboard, slide simulation, video simulation cardboard mockup. software with limited functionality.

The goal is NOT the artifact, but the feedback.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Why prototype?

A
  • Evaluation and feedback
  • Users can see/interact with prototype
  • Helps team communication
  • Encourages reflection and design
  • Prototypes answer questions, and help make choices
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What to prototype?

A
  • Screen layouts and information display
  • Work flow, task design
  • Difficult, controversial, critical areas
  • Technical issues. (graphics fast enough)

-Do iterations of a prototype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Types of prototype fidelity

A

Low fidelity: Prototype doesn’t look much like final product, operation of the prototype may be simulated and slower

High fidelity: Prototype looks and operates like the real product.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Low Fideltiy Prototype

A

Uses medium different form the final medium. i.e. paper, cardboard

Purpose is to brainstorm competing representations and elicit user reacions / suggestions.

ex:
Storyboards
Paper prototypes
Wireframes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Storyboarding

A
  • All about user tasks, not interface
  • Like comic stip
  • Converys setting: people environment tasks
  • Show sequence/steps involved
  • Satisfacton: What motivates people to use this system.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Paper prototypes

A

Done after storyboarding

  • Best for figuring out the user interface
  • Doesn’t have to look exact of nice.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Benefits of paper prototyping

A

Leverage common design skills: Everyone can sketch and cut paper.

  • Allow early testing: testing prototypes early lets product teams find big-picture probleams
  • Support rapid experimentation:Different UI can easily be cut, copied and moved around to create a new UI.
  • Facilitate adjustments: easy to make changes druing the testing session.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Paper prototypeing limitation

A
  • An additional person is required to conduct the test session
  • Not suitable for complex or highly interactive interfaces.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Wireframing

A

Give an outline of structure and layout of the page.
-Conveys the overall direction and description f the user interface
low to medium quality.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Low-Fidelity Prototyping Pros and cons

A

Pros:
-Inexpesive
-Fase
Collaborative.

Cons:
Limited interactivity, can’t be too complex
-Misleading: users will judge it worse simply because it is less finished.

-Clients may be confused by lack of programming.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What you can’t learn from a paper prototype

A

Look: color font etch

Feel: efficieny issues, i.e. buttons that are too small
response time: no idea how ling taks will take
Small changes easily noticable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

When to use High Fidelity prototypes

A

Testing the details of UI elements and color schemes

Testing the transition animation and effects of them on user behaviour

When you want to know how your target users feel about your design.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is High-Fidelity prototype

A

Prototyping with a computer:

  • Interactive representation of the product.
  • Closest resemblance to the final design in terms of details and functionality.
  • Simulate some but not all features of system.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What can you learn form high fidelity prototypes

A

Everything you can learn form a paper prototype, plus:

  • Screen layout
  • Colors, fonts, icons, etc.
  • Interactive feedback
  • Efficiency issues.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Vertical Prototype

A

Focuses on in-depth functionality for only a few selected features.
-Common design ideas can be tested in depth

17
Q

Horizontal Prototype

A

Surface layerss includes the entire user interface with limited underlying functionality (breadth)

18
Q

Video prototypes

A
  • Illustrates how people might act with a future technology in a realistic setting
  • Describes motivation and theri activities over time
  • People in video represent personas or characters drawn from intervies and observations
  • Characters placed are in a particular situation at a particular place and time.

Cheap and fast

  • Great for communication
  • Can serve as a spec for developers
19
Q

Wizard of oz prototyping

A

Fake functionality of a prototype by faking interactions through off screen manipulation. User can’t tell

-User thinks they are interacting with a computer, but the developer is responding to them rather than the system.

Good for adding simulated and complex functionality, and testing futuristic ideas.

20
Q

Properties of Positional Input Devices

A

Absolute vs. Relative Positioning-touchscreen = absolute-mouse = relativeDirect vs. Indirect Contact-direct = touchscreen-indirect = mouseForce vs. Displacement Sensing -(most) joysticks = force-mouse = displacementPosition vs. Rate Control -(most) joysticks = rate-mouse = positionDOF (Dimensions) Sensed-1 = dial, 2 = mouse, 6 = Wiimote

21
Q

Control-Display Gain (CD Gain)

A

Ratio of display pointer movement to device control movement -the ratio is a scale factor (the “gain”)-usually expressed in terms of velocity -works for rate control and position control

at CD of 1 would mean the movement rate of the mouse is exactly the same as the pointer.

> 1 Means the pointer moves faster than mouse.

CDgain= Vpointer/Vdevice

22
Q

Fitts’ Law

A

Fitts’ Law: a predictive model for pointing time considering device, distance, and target size-published 1954-based on rapid, aimed movements-works for many kinds of pointing “devices”: finger, pen, mouse, joystick, foot, ..

23
Q

Steering law

A

Steering Law is an adaptation of Fitts’ LawDeveloped by Zhai and AcottChoose a paradigm which focuses on steering between boundaries
Tracking a constrained path takes longer (menu navigation)

Hierarchical MenusCS 349 - Input Performance37Sum the parts of the path:-Wide path (but short stopping distance)-Narrow path (but wide stopping distance)-Wide path (with short stopping distance)

24
Q

HSV/HSB Color model

A

Hue: determines color (approximation of wavelength)Saturation: how much hue: e.g. red vs. pink vs. whiteValue/Brightness: how much light is reflected

25
Q

Colour Presentation Matters

A

Our ability to discriminate coloursdepends on presentationExample: it’s harder to tell two coloursapart when-the coloursare pale-the object is small or thin-the colourpatches are far apart

26
Q

Gestalt Principles

A

Theories of visual perception that describe how people tend to organize visual elements into groups or unified wholes, when certain principles are applied.▪Clues about how the brain groups raw visual input

Proximity Similarity Continuity Closure Connectedness Figure and Ground

27
Q

Proximity

A

Individual elements are associated more strongly with nearby elements than with those further away▪Best way of emphasizing relationships between different data entities is to place them in proximity in a display

▪Things that are related should be grouped together▪Things that are not related should be separated from each othe

28
Q

Similarity

A

▪Elements associated more strongly when they share basic visual characteristics, such as:-Shape, Size, Color, Texture, Orientation▪Related visual elements should look similar

▪Elements which match in function or content, should visually match as well.▪The icons are equally sized and have the same color and style (rounded shapes)

29
Q

Continuity

A

▪Elements arranged in a straight line or a smooth curve are perceived as being more related -bias to continuous forms rather than disconnected segments

30
Q

Closure

A

▪The visual system perceives a set of individual elements as a single, recognizable pattern, rather than individual elements.

Curved dashed lines circle

31
Q

Connectedness

A

▪Elements connected to one another by uniform visual properties are perceived to be more related than elements that are not connected▪Two typical strategies:-connecting lines-connecting regions

32
Q

Figure and Ground

A

▪Elements are perceived as either figure i.e., the element of focus or ground i.e., background on which the figure sits. ▪This principle essentially tells our eyes what to focus on first.

▪This principle is applied regularly for forms to login or register to a website.

33
Q

Typography

A

The practice of arranging written subject matter.▪Difference between “Typeface” and “Font”▪Typeface refers to a family of fonts sharing the same name, like “Arial” or “Georgia.”▪A font is a choice of typeface and size and style, like roman, italic, oblique, boldface, etc

34
Q

Terminology: User Interface

A

A user interface is the place where a person expresses intention to an artifact, and the artifact presents feedback to the person.

35
Q

User Profile

A

Collection of attributes for describing a collection of users-i.e., age, disabilities, gender, culture, experience, plus any other factors relevant to a particular system-E.g., ages 18-35A user profile will help you to understand who you are building your product forMost systems will have a number of different profiles