HCI Chapter 4 N 5 Flashcards by Unknown Unknown

how can an interactive system be developed to ensure its usability?

how can the usability of an interactive system be demonstrated or measured?

Concerns

How well did you know this?

Not at all

Perfectly

Example Paradigm Shifts

Batch processing
Timesharing
Networking
Graphical display
Microprocessor
WWW
Ubiquitous Computing

How well did you know this?

Not at all

Perfectly

1940s and 1950s

1960s –need to channel the power

.C.R. Licklider at ARPA

single computer supporting multiple users

Time-sharing

How well did you know this?

Not at all

Perfectly

more suitable medium than paper

1962 –Sutherland’s Sketchpad

computers for visualizing and manipulating data

one person’s contribution could drastically change the history of computing

Video Display Units

How well did you know this?

Not at all

Perfectly

Engelbart at Stanford Research Institute

1963 –augmenting man’s intellect

1968 NLS/Augment system demonstration

the right programming toolkit provides building blocks to producing complex interactive systems

Programming toolkits

How well did you know this?

Not at all

Perfectly

1970s –Papert’s LOGO language for simple graphics programming by children

A system is more powerful as it becomes easier to user

Future of computing in small, powerful machines dedicated to the individual

Kay at Xerox PARC –the Dynabook as the ultimate personal computer

Personal computing

How well did you know this?

Not at all

Perfectly

humans can pursue more than one task at a time

windows used for dialogue partitioning, to “change the topic”

1981 –Xerox Star first commercial windowing system

windows, icons, menus and pointers now familiar interaction mechanisms

Window systems and the WIMP interface

How well did you know this?

Not at all

Perfectly

relating computing to other real-world activity is effective teaching technique

Metaphor

How well did you know this?

Not at all

Perfectly

some tasks do not fit into a given metaphor

cultural bias

Problems

How well did you know this?

Not at all

Perfectly

1982 –Shneiderman describes appeal of graphically-based interaction

Direct manipulation

How well did you know this?

Not at all

Perfectly

interface replaces underlying system

How well did you know this?

Not at all

Perfectly

1945 –Vannevar Bush and the memex

key to success in managing explosion of information

mid 1960s –Nelson describes hypertext as non-linear browsing structure

hypermedia and multimedia

Nelson’s Xanadu project still a dream today

Hypertext

How well did you know this?

Not at all

Perfectly

a mode is a human communication channel

emphasis on simultaneous use of multiple channels for input and output

Multimodality

How well did you know this?

Not at all

Perfectly

CSCW removes bias of single user / single computer system

Can no longer neglect the social aspects

Electronic mail is most prominent success

Computer Supported Cooperative Work (CSCW)

How well did you know this?

Not at all

Perfectly

Hypertext, as originally realized, was a closed system

Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made publishing and accessing easy

Critical mass of users lead to a complete transformation of our information economy.

The World Wide Web

How well did you know this?

Not at all

Perfectly

Commands given to computer

Language-based

Original interfaces

How well did you know this?

Not at all

Perfectly

Commands performed on “world” representation

Action based

Direct Manipulation/WIMP

How well did you know this?

Not at all

Perfectly

return to language by instilling proactivity and “intelligence” in command processor

Agents

How well did you know this?

Not at all

Perfectly

return to language by instilling proactivity and “intelligence” in command processor

Agents

How well did you know this?

Not at all

Perfectly

The most profound technologies are those that disappear.

”Mark Weiser, 1991

Ubiquitous Computing

How well did you know this?

Not at all

Perfectly

Humans are good at recognizing the “context” of a situation and reacting appropriately

Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier

How can we go from sensed physical measures to interactions that behave as if made “aware” of the surroundings?

Sensor-based and Context-aware Interaction

How well did you know this?

Not at all

Perfectly

5TH
what it is, interventions, goals, constraints

Design

How well did you know this?

Not at all

Perfectly

what happens when

The design process

How well did you know this?

Not at all

Perfectly

who they are, what they are like …

Users

How well did you know this?

Not at all

Perfectly

rich stories of design

Scenarios

finding your way around a system

Navigation

never get it right first time!

Iteration and prototypes

Achieving goals within constraints Goals - purpose – who is it for, why do they want it Constraints – materials, platforms Trade-offs Understand your materials Understand computers – limitations, capacities, tools, platforms Understand people – psychological, social aspects – human error

Design

what is there and what is wanted …

Requirements

ordering and understanding

Analysis

what to do and how to decide

Design

getting it right … and finding what is really needed!

Iteration and prototyping

making it and getting it out there

Implementation and deployment

Description of an ‘example’ user – not necessarily a real person use as surrogate user – what would betty think Details matter – makes her ‘real’

Persona

Direct observation – sometimes hard In the home - psychiatric patients probe packs – items to prompt responses e.g. Glass to listen at wall, camera, postcard – given to people to open in their own environment they record what is meaningful to them Used to … – inform interviews, prompt ideas, enculture designers

Cultural probes

Stories for design – communicate with others – validate other models – understand dynamics Linearity – time is linear - our lives are linear – but don’t show alternatives step-by-step walkthrough – what can they see (sketches, screen shots) – what do they do (keyboard, mouse etc.) – what are they thinking? use and reuse throughout design

Scenarios

Scenarios – one linear path through system Pros: – life and time are linear – easy to understand (stories and narrative are natural) – concrete (errors less likely) Cons: – no choice, no branches, no special conditions – miss the unintended So: – use several scenarios – use several methods

Linearity

Widget choice – menus, buttons etc. Screen design Application navigation design Environment – other apps, o/s

Levels

Widget choice Screen design Navigation design Environment Elements and tags Page and design Site Structure The web, browser and external links

Web

Widget choice Screen design Navigation design Environment Controls – buttons, knobs, dials Physical layout Modes of device the real world

Physical devices

Within a screen – later ... Local – looking from this screen out Global – structure of site, movement between screens Wider still – relationship with other applications

Structure

From one screen looking out

Local

Progress with local knowledge only but can get to the goal

Goal seeking

4 golden rules

Knowing where you are Knowing what you can do Knowing where you are going – or what will happen Knowing where you’ve been – or what you’ve done

Shows path through website hierarchy

Breadcrumbs

Lock to prevent accidental use … – remove lock - ‘c’ + ‘yes’ to confirm – frequent practiced action If lock forgotten – in pocket ‘yes’ gets pressed – goes to phone book

Modes

Show different paths through system

Network diagrams

Parts of application – screens or groups of screens Typically functional separation Deep is difficult! Misuse of miller’s 7 ± 2 – short term memory, not menu size Optimal? – many items on each screen – but structured within screen Marriage service - general flow, generic – blanks for names - pattern of interaction between people Computer dialogue - pattern of interaction between users and system - but details differ each time

Hierarchical diagrams

Style issues: – platform standards, consistency functional issues – cut and paste Navigation issues – embedded applications – links to other apps … the web

Wider

Basic principles

Ask – what is the user doing? Think – what information, comparisons, order Design – form follows function

Grouping of items Order of items Decoration - fonts, boxes etc. Alignment of items White space between items

Available tools

Use boxes to group logical items Use fonts for emphasis, headings But not too many!!

Decorations

You read from left to right (English and European)

Alignment text

Usually scanning for surnames

Alignment names

Visually: long number = big number Align decimal points or right align integers

Alignment numbers

Scanning across gaps hard (often hard to avoid with large data base fields) Use leaders Or greying (vertical too) Or even (with care!) ‘bad’ alignment

Multiple columns

● The gaps between ● Space to Structure ● Space to separate ● Space to highlight

White space-the counter

● grouping of items ● order of items ● decorations ● alignment ● white space

Physical controls

● Forms, dialogue boxes – presentation + data input – similar layout issues – alignment - N.B. different label lengths ● Logical layout – use task analysis (ch15) – groupings – natural order for entering information ● Top-bottom, left-right (depending on culture) ● Set tab order for keyboard entry

Entering information

● psychological term ● for physical objects – shape and size suggest actions ● pick up, twist, throw – also cultural – buttons ‘afford’ pushing ● for screen objects – button–like object ‘affords’ mouse click – physical-like objects suggest use ● culture of computer use – icons ‘afford’ clicking

Affordances

● Purpose matters – sort order (which column, numeric alphabetic) – text vs. Diagram – scatter graph vs. Histogram ● Use paper presentation principles! ● But add interactivity – softens design choices - e.g. Re-ordering columns

Presenting information

● Aesthetically pleasing designs – increase user satisfaction and improve productivity ● Beauty and utility may conflict – mixed up visual styles ⇒ easy to distinguish – clean design – little differentiation ⇒ confusing – backgrounds behind text … good to look at, but hard to read ● But can work together – e.g. The design of the counter – in consumer products – key differentiator (e.g. imac)

Aesthetics and utility

● Both often used very badly! ● Colour – older monitors limited palette – colour over used because ‘it is there’ – beware colour blind! – use sparingly to reinforce other information ● 3d effects – good for physical information and some graphs – but if over used … e.g. Text in perspective!! 3d pie charts

Colour and 3D

● Over use - without very good reason (e.g. Kids’ site) ● Colour blindness ● Poor use of contrast ● Do adjust your set! – adjust your monitor to greys only

Bad use of color

● Localisation & internationalisation – changing interfaces for particular cultures/languages ● Globalisation – try to choose symbols etc. That work everywhere ● Simply change language? – use ‘resource’ database instead of literal text … but changes sizes, left-right order etc. ● Deeper issues – cultural assumptions and values – meanings of symbols e.g tick and cross … +ve and -ve in some cultures … but … mean the same thing (mark this) in other

Across countries and cultures

● You never get it right first time ● If at first you don’t succeed ● Moving little by little … but to where ● Malverns or the matterhorn? ● Need a good start point ● Need to understand what is wron

Prototyping