Human Computer Interaction (HCI) Dr. Muhammad Tahir Chapter 6

Metaphor

Paradigms of Interaction Metaphor Analogy between two objects or ideas Use of one thing to represent other

Paradigms of Interaction Interface Metaphor Knowledge of user interface widgets and their behaviours that mimic the similar knowledge from other domains Purpose Give users an instantaneous knowledge about how to interact with user interface

Paradigms of Interaction Interface Metaphor Examples Analogy of interaction widgets with real-world objects Windows as real windows

Paradigms of Interaction Interface Metaphor Examples Analogy of interaction widgets with real-world objects Buttons like switch buttons

Paradigms of Interaction Interface Metaphor Examples Analogy of interaction widgets with real-world objects Folders and file cabinet as OS file system

Paradigms of Interaction Interface Metaphor as Desktop Metaphor

Direct Manipulation

Paradigms of Interaction Direct Manipulation To manipulate objects directly using similar techniques/actions of real world Real-world metaphors for objects and actions Pressing a button Dragging an icon Pulling down the “file” menu

Paradigms of Interaction Direct Manipulation Easy to learn and remember interfaces Users can see the results of an action before completing it e.g. Resizing a window / image Border around it / old remains same, new layer resizes Operations are easily reversible

WYSIWYG

Paradigms of Interaction WYSIWYG What You See Is What You Get Contents displayed during editing appears very similar to the final output Webpage, printed documents, slide presentation e.g. In MS Word application what you see on screen is the representation of the final document

Paradigms of Interaction WYSIWYG Allows users to view something similar to final results Allows direct manipulation of the layout of the document without typing or remembering layout commands e.g. Word processor is optimized for output to a printer

Paradigms of Interaction WYSIWYG Example: WYSIWYG Editor to produce a document

Interaction Design Ch. 5, Alan

IxD Interaction Design Interaction Design: Behaviour of products / systems that a user can interact with Behaviour of products / systems with its environment It is about: Doing things Making things Designing things

Interaction Design Example: Mechanical Stapler: You pick it up to your desk Staple documents Keep it until someone needs it http://nerdapproved.com/wp-content/uploads/2007/07/handi-stapler.jpg

Interaction Design Example (continued): Electric Staplers: Electrical device Hard to move around (socket-connected) Write, print and take the pile to stapler You move yourself multiple times You move documents multiple times http://www.mysears.com/Craftsman-Electric-Stapler-reviews?tab=details

Interaction Design Example (continued): Mechanical vs Electric Staplers Thus the changes in the “design” of a product can change the type of interaction with it and can also change the interaction with its environment

Interaction Design What is design? The act of working out the form of something Sketch, outline, plan Achieving goals within constraints http://static.dezeen.com/uploads/2007/06/design-basel-07.jpg

Interaction Design What is design? Goals What is the purpose of the design? Who is it for? Why do they want it?

$ Interaction Design What is design? Constraints Cost? Time needed for development? Material to use? Standards to follow? Health and safety issues? $

Screen Design and Layout Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  ABCDEFGHIJKLM NOPQRSTUVWXYZ Ch. 5, Alan

Screen Design and Layout User action and control Tools for layout Entering information Grouping and structures Knowing what to do? Orders of groups and items Affordances Decoration Alignment Appropriate appearance White space Presenting information Asthetics and utility Color and 3D Localization/Internationalization

Screen Design and Layout Tools for layout Grouping and structures Things 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 …… … … … Grouped Spatially Separation From the list of items already ordered / separation by a line and space

Screen Design and Layout Tools for layout Orders of groups and items First, read and fill the billing details Then, read and fill the delivery details Then, fill the individual ordering item   

Screen Design and Layout Tools for layout Orders of groups and items What is the natural order of placing info on the screen? e.g. forms to enter data e.g. as in previous example Adjust boxes and space between them Consistent use of tab

Screen Design and Layout Tools for layout Decoration use boxes to group logical items use fonts for emphasis, headings (but not too many!!) Proper use of font style/ font type, text color, backgd color ABCDEFGHIJKLM NOPQRSTUVWXYZ

Screen Design and Layout Tools for layout Alignment Alignment of text / list ... Users that read from left to right (English + European ...) Align data on left side Similarly for Arabic / Urdu / Persian / ... Align data on right side

Screen Design and Layout Tools for layout Alignment 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

Screen Design and Layout Tools for layout Alignment (Names) Usually scanning for surnames make it easy!   Easy to search because aligned on space or comma Alan Dix Janet Finlay Gregory Abowd Russell Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell  Alan Dix Janet Finlay Gregory Abowd Russell Beale If know only surname, difficult to search

Screen Design and Layout Tools for layout Alignment (Numbers) Look quickly and try to find the biggest number ! Visually long number = big number ? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

Screen Design and Layout Tools for layout Alignment (Numbers) Align numbers (integers) to the right ! Align numbers (with decimals) at the decimal point ! 53256 1793 256317 15 73948 1035 3142 4976256 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

Screen Design and Layout Tools for layout Alignment (Multiple Columns) Text columns wide enough for the largest item sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85 Difficult for the eyes to scan across the rows Solution?

Screen Design and Layout Tools for layout Alignment (Multiple Columns) Solution - i Use ‘leaders’ - lines of dots linking the columns

Screen Design and Layout Tools for layout Alignment (Multiple Columns) Solution - ii Use ‘greying’ / ’coloring’: horizontally and/or vertically sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

Screen Design and Layout Tools for layout Alignment (Multiple Columns) Solution - iii Right align ! (occasionally for names / frequently for numbers)

Screen Design and Layout Tools for layout White space Space between letters is called ‘counter’ Counter provides an overall feel of a layout White space can be used in different ways !

Screen Design and Layout Tools for layout White space Space to separate Space between paragraphs / between sections of a report

Screen Design and Layout Tools for layout White space Space to structure Consider ABC as a single block ! A D B C E F

Screen Design and Layout Tools for layout White space Space to highlight Used to highlight graphics or quotes!

Screen Design and Layout User action and control Tools for layout Entering information Grouping and structures Knowing what to do? Orders of groups and items Affordances Decoration Alignment Appropriate appearance White space Presenting information Asthetics and utility Color and 3D Localization/Internationalization 

Screen Design and Layout Tools for layout Grouping and structures Orders of groups and items Decoration Alignment White space EXAMPLE

Screen Design and Layout grouping of items defrost settings type of food time to cook defrost settings type of food time to cook

Screen Design and Layout 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

Screen Design and Layout 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)

Screen Design and Layout grouping of items order of items decoration alignment centred text in buttons easy to scan ?

Screen Design and Layout grouping of items order of items decoration alignment white space gaps to aid grouping

Screen Design and Layout User action and control Tools for layout Entering information Grouping and structures Knowing what to do? Orders of groups and items Affordances Decoration Alignment Appropriate appearance White space Presenting information Aesthetics and utility Color and 3D Localization/Internationalization

Screen Design and Layout User Control and Action Entering information Form-based interface MS Access forms Email signup forms etc. Dialog boxes Print file dialog box Open file dialog box

Screen Design and Layout User Control and Action Entering information Form-based interface & Dialog boxes They present information e.g. labels, text ... They let you enter information e.g. text boxes, ...

Screen Design and Layout User Control and Action Entering information In data-entry fields, alignment is important! Jagged / Uneven outline due to different label lengths Name: Address: Alan Dix Lancaster

Screen Design and Layout User Control and Action Entering information In data-entry fields, alignment is important! Left align Right align Center align Top and left align

Screen Design and Layout User Control and Action Entering information Group the items logically Natural order for entering information Top-bottom or left-right Depending upon culture Native language Set tab order for keyboard entry  Name: Address: Alan Dix Lancaster ? Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster 

Screen Design and Layout User Control and Action Knowing what to do What are active elements? Where do you type? / reacts on clicking What are passive elements? Give you the information (text/labels)

Screen Design and Layout User Control and Action Knowing what to do Consistent style helps e.g. web underlined links Labels and icons standards for common actions e.g. save, delete or print

Screen Design and Layout User Control and Action Affordances Perceived properties of an object Shape and size suggest actions Pick up, twist, throw ... mug handle ‘affords’ grasping

Screen Design and Layout User Control and Action Affordances For screen objects Button–like object ‘affords’ mouse click Physical-like objects suggest same actions

Screen Design and Layout User Control and Action Affordances Culture of computer use Icons ‘afford’ clicking Or even double clicking … not like real buttons (a difference!)

Screen Design and Layout Appropriate Appearance Presenting Information Type of information Text, numbers, maps, tables, etc. Usage For which it is being used? chap10 chap5 chap1 chap14 chap20 chap8 … 12 16 17 22 27 32 name size

Screen Design and Layout Appropriate Appearance Presenting Information Example: file listing Textual information Difficult to find recently updated files If you order by date then OK, but Again difficult to find a particular file Do sorting on names (e.g. By clicking on column heading) Thus, different goals -> different presentations chap10 chap5 chap1 chap14 chap20 chap8 … 12 16 17 22 27 32 name size

Screen Design and Layout Appropriate Appearance Asthetics and Utility Backgrounds behind text … good to look at, but hard to read Industrial control panels Different buttons together Designed and bought Use carefully!

Screen Design and Layout Appropriate Appearance Colour and 3D Often used very badly! Colour Older monitors with limited colour options Beware colour blind!

Screen Design and Layout Appropriate Appearance Colour and 3D 3D effects Good for physical information and some graphs e.g. text in perspective!! 3D pie charts But if over used …

Screen Design and Layout Appropriate Appearance Colour and 3D bad use of colour 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 can you still read your screen?

Screen Design and Layout Appropriate Appearance Colour Check http://www.etre.com/tools/colourcheck/

Screen Design and Layout Appropriate Appearance Localization / Internationalization Alignment and layout also changes e.g. text right to left / top to bottom Left scrolling Use of tick and cross (e.g. In French and English)?  

References: Human Computer Interaction by Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale The essence of Human Computer Interaction by Christine Faulkner Designing Interfaces by Tidwell GUI Bloopers 2.0 by Jeff Johnson The elements of User Interface Design by Theo Mandel