IAS2223: Human Computer Interaction Chapter 1: The Interaction

Content Model of interaction. Ergonomics. Interaction styles. Interactivity. The process of design. Navigation design. Screen design and layout. Iteration and prototyping.

The Interaction Address the translation between what the user wants and what system does – use interaction models Ergonomics looks at physical characteristics of the interaction Dialog between user and system Takes place within a social and organizational context – affects both user and system

What is it? Communication user system but is that all … ?

Interaction terms domain – the area of work under study e.g. graphic design goal – what you want to achieve e.g. create a solid red triangle task – how you go about doing it – ultimately in terms of operations or actions e.g. … select fill tool, click over triangle Note … traditional interaction … use of terms differs a lot especially task/goal !!!

Model of Interaction

Donald Norman’s Model Seven stages user establishes the goal formulates intention specifies action sequence executes action perceives system state interprets system state evaluates system state with respect to goal Norman’s model concentrates on user’s view of the interface

Execution/evaluation loop system evaluation execution goal user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal

… cont’d system evaluation execution goal user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal

… cont’d system evaluation execution goal user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal

… cont’d system evaluation execution goal user establishes the goal formulates intention specifies actions at interface executes action perceives system state interprets system state evaluates system state with respect to goal

Human Errors – slips and mistakes understand system and goal correct formulation of action incorrect action mistake may not even have right goal! Fixing things? slip – better interface design mistake – better understanding of system

Abowd and Beale framework extension of Norman… their interaction framework has 4 parts user input system output each has its own unique language interaction  translation between languages problems in interaction = problems in translation S core U task O output I input

Study of the physical characteristics of interaction Ergonomics Study of the physical characteristics of interaction Also known as human factors – but this can also be used to mean much of HCI! Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems

Ergonomics - examples arrangement of controls and displays e.g. controls grouped according to function or frequency of use, or sequentially surrounding environment e.g. seating arrangements adaptable to cope with all sizes of user health issues e.g. physical position, environmental conditions (temperature, humidity), lighting, noise, use of colour e.g. use of red for warning, green for okay, awareness of colour-blindness etc.

Interaction styles command line interface menus natural language question/answer and query dialogue form-fills and spreadsheets WIMP point and click three–dimensional interfaces

Command line interface Way of expressing instructions to the computer directly function keys, single characters, short abbreviations, whole words, or a combination suitable for repetitive tasks better for expert users than novices offers direct access to system functionality command names/abbreviations should be meaningful! Typical example: the Unix system, DOS

Menus Set of options displayed on the screen Options visible less recall - easier to use rely on recognition so names should be meaningful Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators) Often options hierarchically grouped sensible grouping is needed Restricted form of full WIMP system

speech recognition or typed natural language Familiar to user speech recognition or typed natural language Problems vague ambiguous hard to do well! Solutions try to understand a subset pick on key words

Query interfaces Question/answer interfaces Query languages (e.g. SQL) user led through interaction via series of questions suitable for novice users but restricted functionality often used in information systems Query languages (e.g. SQL) used to retrieve information from database requires understanding of database structure and language syntax, hence requires some expertise

Form-fills Primarily for data entry or data retrieval Screen like paper form. Data put in relevant place Requires good design obvious correction facilities

sophisticated variation of form-filling. Spreadsheets first spreadsheet VISICALC, followed by Lotus 1-2-3 MS Excel most common today sophisticated variation of form-filling. grid of cells contain a value or a formula formula can involve values of other cells e.g. sum of all cells in this column user can enter and alter data spreadsheet maintains consistency

… or windows, icons, mice, and pull-down menus! WIMP Interface Windows Icons Menus Pointers … or windows, icons, mice, and pull-down menus! default style for majority of interactive computer systems, especially PCs and desktop machines

Point and click interfaces used in .. multimedia web browsers hypertext just click something! icons, text links or location on map

Three dimensional interfaces virtual reality ‘ordinary’ window systems highlighting visual affordance indiscriminate use just confusing! 3D workspaces use for extra virtual space light and occlusion give depth distance effects flat buttons … … or sculptured click me!

Elements of WIMP Windows Icons Menus Pointers Buttons Palettes Toolbars Dialog boxes

Context Interaction affected by social and organizational context other people desire to impress, competition, fear of failure motivation fear, allegiance, ambition, self-satisfaction inadequate systems cause frustration and lack of motivation

Interactivity design interactions not just interfaces not just the immediate interaction e.g. stapler in office – technology changes interaction style manual: write, print, staple, write, print, staple, … electric: write, print, write, print, …, staple

The process of design scenarios task analysis what is wanted interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis what is wanted analysis design implement and deploy prototype

Steps … requirements analysis design iteration and prototyping what is there and what is wanted … analysis ordering and understanding design what to do and how to decide iteration and prototyping getting it right … and finding what is really needed! implementation and deployment making it and getting it out there

… but how can I do it all ! !   limited time  design trade-off usability? finding problems and fixing them? deciding what to fix? a perfect system is badly designed too good  too much effort in design  

local structure – single screen global structure – whole site navigation design the systems info and help management messages add user remove user local structure – single screen global structure – whole site start main screen remove user confirm add user

Interact at several levels: widget choice menus, buttons etc. screen design application navigation design environment other apps, O/S

think about structure within a screen local global wider still later ... local looking from this screen out global structure of site, movement between screens wider still relationship with other applications

screen design and layout Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  screen design and layout basic principles grouping, structure, order alignment use of white space ABCDEFGHIJKLM NOPQRSTUVWXYZ

basic principles ask think design what is the user doing? what information, comparisons, order design form follows function

available tools for layout grouping of items order of items decoration - fonts, boxes etc. alignment of items white space between items

grouping and structure logically together  physically together Billing details: Name Address: … Credit card no Delivery details: Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … …

decoration use boxes to group logical items use fonts for emphasis, headings but not too many!! ABCDEFGHIJKLM NOPQRSTUVWXYZ

alignment - text you read from left to right (English and European)  align left hand side boring but readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan

Usually scanning for surnames  make it easy! alignment - names Usually scanning for surnames  make it easy!   Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  Alan Dix Janet Finlay Gregory Abowd Russell Beale

alignment - numbers think purpose! which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256

alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

multiple columns - 2 use leaders sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

or greying (vertical too) multiple columns - 3 or greying (vertical too) sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

or even (with care!) ‘bad’ alignment multiple columns - 4 or even (with care!) ‘bad’ alignment sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

white space - the counter WHAT YOU SEE

white space - the counter WHAT YOU SEE THE GAPS BETWEEN

space to separate

space to structure

space to highlight

physical controls grouping of items defrost settings type of food time to cook defrost settings type of food time to cook

physical controls grouping of items order of items type of heating temperature time to cook start 1 1) type of heating 2 2) temperature 3 3) time to cook 4 4) start

physical controls grouping of items order of items decoration different colours for different functions lines around related buttons different colours for different functions lines around related buttons (temp up/down)

physical controls grouping of items order of items decoration alignment centered text in buttons ? easy to scan ? centred text in buttons ? easy to scan ?

physical controls grouping of items order of items decoration alignment white space gaps to aid grouping gaps to aid grouping

Prototyping System with limited functionality Prototyping help in easing the design

Thanks To tolerate someone else’s mistakes is one thing. To forgive them is even greater. Thanks