Principles

Recognize Diversity

Diversity of users
User profile: Age, gender, preferred language, education, cultural background, job, and technical skill.

User classes:
- novice / first time users
  - novice - know little of task or interface concepts
  - first time users - have task concepts but shallow knowledge of interface
- knowledgeable intermittent users
  - know about the task and general knowledge about the interface - will forget specific features
  - need to easily rediscover how to perform tasks
- expert frequent users
  - thoroughly familiar with task and interface concepts
  - need ability to quickly carry out actions, get rapid responses, brief feedback
Diversity of tasks
- determine set of tasks early in design
- choose 'atomic' actions for the tasks
- look at task frequencies --> prioritize tasks
Diversity of interaction styles

	Advantages	Disadvantages
Direct Manipulation	- visually presents task concepts - allows easy learning - allows errors to be avoided - encourages exploration - affords high subjective satisfaction	- requires a graphics display and a pointing device
Menu Selection	- shortens learning - reduces keystrokes - structures decision making - allows easy support of error handling	- presents danger of many menus - may slow frequent users - consumes screen space
Form Filling	- simplifies data entry - requires modest training - gives convenient assistance	- consumes screen space
Command Language	- is flexible - appeals to 'power' users	- has poor error handling - requires substantial training and memorization
Natural Language	- relieves burden of learning syntax - google smart home? Problems?	-requires clarification dialogue - is unpredictable

Direct manipulation - originally interacting with a computer was direct manipulation at a low level - moving wires, flipping switches. Direct manipulation returned in a big way in the 80s (after a lot of basic research was done in the 60s and 70s) at a higher user level which could involve using a light pen to touch a location on the screen (70s), moving a mouse to move a pointer on a screen and clicking the mouse button to make selections (80s) to more modern alternatives where the user uses a stylus or their finger to more directly manipulate the interface itself (2000s).
Definition: A human-computer interaction style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback

Menu selection is ubiquitous on computer interfaces today

Form fillin is also ubiquitous on the web, making it easy for people who need your data to get it in a form that they can easily process.

Command language:
Examples:
- git clone https://github.com/iDataVisualizationLab/HCI-Spring2021.git
- git add -A
- git commit -m "Update syllabus"
- git push
Limitations:
- has poor error handling
- requires substantial training and memorization

Natural language is commonly used today when getting information via the phone on movie times or airline flights or the weather, etc.
Siri, HoloLens, Google Glass etc. help smart phone users, and tools like Alexa have moved that into the home and car.
Voice can be very successful in areas of limited/focused vocabulary.
Limitations:
- Voice commands can also be hard to learn and remember.
- More general natural language recognition is harder.
- Talking to your cell phone solves part of the problem of noisy rooms.

Golden rules of interface design

Strive for consistency
1. The content, the UI elements (such as menus), terminology, commands, fonts, backgrounds, and colors should be in harmony
2. The layouts of various pages/sections in your application
3. Consistency across apps in the same system: iPhone app layout and user gestures.
4. Consistency across devices: TVs, PCs, Tablets, and smartphones.
Benefits of Consistency in UI Design. Examples
1. Reduce Learning and increase Usability: Consistency makes it easier for your users to navigate and use your app because they don’t have to learn new ropes to get around.
2. Eliminates Confusion: By using consistency to create a logical structure and to clearly define where users can find what
3. Evoke an Emotional Response: Consistency helps your users feel confident in their ability to manage what’s under their thumbs and will evoke a pleasant experience.
Provide universal usability

help new users through basic procedures

enable frequent users to use shortcuts. Expert users might find the following features helpful: Abbreviations, Function keys, Hidden commands, and Macro facilities

Offer informative feedback

all actions should result in system feedback

Design dialogues to yield closure. Don't provide meaningless or too technical messages.

Offer error prevention and simple error handling

Permit easy reversal of actions

Reduce short term memory load (7 +/- 2). Examples?

Example for these princibles for Google Schrome:

look at task frequencies --> prioritize tasks
all actions should result in system feedback
design dialogues to yield closure
offer error prevention and simple error handling
permit easy reversal of actions
reduce short term memory load (7 +/- 2)
Gestalt Princibles

We are going to enforce these princibles/rules in the projects

Feedback

when an action is initiated either the user should immediately see/hear an indication that the computer is responding.
if the user clicks a button and gets no feedback he/she is likely to click the button again (and again)
if the task is going to take longer than a second then the interface should display a progress bar

progress bar should show the relative amount of time remaining
when predictable: at each stage in a process you can update the current status of the menu bar: reading data..., processing images..., computing the results...
can also show a numeric countdown of time remaining if that is predictable (e.g. copying a file of known size)

Getting the User's Attention

intensity
marking
___, *, arrows, boxes
size
up to 4
choice of fonts
up to 3
blinking (2-4 Hz) on off or colour changes used sparingly
color
up to 4 standard colours
audio
soft / harsh
vibration
different patterns

Fundamental units of visual communication:

Retinal variables:

Size
Value (saturation/opacity)
Orientation
Texture
Shape
Position
Color

Two types of retinal variables:

An associative variable does not affect the visibility of other dimensions (e.g. we can recognize color regardless of orientation.)
Hue, Orientation, Texture, Shape, Position are associative.

A dissociative variable significantly affect the visibility of other dimensions (e.g. its hard to determine color of a thin line or small dot).
Size and Value are dissociative (they dominate perception and disrupt processing of other correlated dimensions)

Scale of measurement for each variable:

Categorical: Distinct categories should be obvious. For example, different states, jobs, or students.
Which variables can be used for categorical scale?

Ordered: Determine relative ordering. For example, you rate your professor on the scale: good, medium, bad
Position, size, and value are ordered

Quantitative: Determine amount of difference between ordered values. For example, family income in US dollars.
Position and size are quantitative

Color wheel

Color brewer is a good resource for color selection: http://colorbrewer2.org/

Bar charts:

This is the bar charts of the population of the USA over the last 8 years. The left chart shows how 3D hurts the visualization. The right chart is a less fancy but much more effective in 2D.

Overly 3D chart of US
population More readable 2D chart
of US population

Pay attentions to the y-axis on the following charts of the same data.

Vertical scale
suggesting slow growth Vertical
scale suggesting rapid growth

Here is an example how visualization lies: from Time Magazine (4/9/79) via Tufte. Please avoid this.

Oil Prices Represented as Barrels

Pie charts:

These examples are charts from a recent version of Excel. 3D distorts the view making it more difficult (less accurate as well) to read the visualization.

A 2D version is much better. Picking up the right colors is also helpful: we could use colors to relate consoles. For example, Playstation 2 and Playstation 3 are both in (darker and lighter) blue.

Here is another bad example from Fox news:

A good site for more bad examples

References:
Things that Make us Smart by Donald Norman,
Information Anxiety by Saul Wurman,
The Visual Display of Quantitative Information by Edward Tufte,
Designing the User Interface 3rd Ed. by Ben Schneiderman,
The Psychology of Human-Computer Interaction by Stuart Card and friends
Human-Computer Interaction 2nd Ed by Alan Dix and friends
User Interface Design by Andrew Johnson
8 Golden Rules for Better Interface Design by Ana Santos