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

Interaction Styles Interface styles / Types of interface styles Different types of interfaces provide different types of interaction Command-line interfaces Menu-based interfaces Natural Language interfaces Questions/Answers and Query Dialog interfaces Form-fills and spreadsheets interfaces Point-and-Click interfaces 3D Interfaces The WIMP interfaces

Query Dialog Interfaces Interaction Styles Questions/Answers and Query Dialog Interfaces

Interaction Styles Questions/Answers and Query Dialog interfaces Qs/Ans as input to application (e.g. about products) Web surveys Questionnaires MCQs, True/False … (Ref: http://www.isausa.com/img/f-cuistio-6.jpg)

Interaction Styles Questions/Answers and Query Dialog interfaces Queries to retrieve information from database Query Dialogs (as in MS Access) Rather than writing a query, select different options (attributes) to retrieve information Options from the interface provided as query dialog

Interaction Styles

Form-fills and spreadsheet interfaces Interaction Styles Form-fills and spreadsheet interfaces

Interaction Styles Form-fills and spreadsheets interfaces Form-fills for data entry and retrieval e.g. MS Access forms e.g. Email creation forms Easy to correct mistakes than a paper form Easy to learn and use

Interaction Styles Form-fills and spreadsheets interfaces Spreadsheet as a grid of cells e.g. MS Excel Values and formulae Ease of use to manipulate cells To give and get Input/Output

Point-and-click interfaces Interaction Styles Point-and-click interfaces

Interaction Styles Point and Click Interfaces Moving the cursor to certain location on the screen and clicking Mouse or other pointing device Touch pad, joystick, scroll buttons …

Interaction Styles Point and Click Interfaces You click a word and see its definition e.g. in online/software dictionaries e.g. click on a virtual building icon and it provides information

Interaction Styles Point and Click Interfaces Point and click on hyper text Navigation from one document to another Highlighted words, maps, iconic buttons, … Single / double click On icons, text …

Interaction Styles Point and Click Interfaces

Interaction Styles Point and Click Interfaces

Interaction Styles 3D interfaces

Interaction Styles 3D Interfaces 3D appearance of windowing elements Shades Light source (Ref: www.icon3d.com/images/cubeshot.png)

Interaction Styles 3D Interfaces (Ref: http://www.unrealstockholm.org/drupal/?q=node/71)

Interaction Styles 3D Interfaces Web book Objects placed in 3D Farther objects shrinked Java 3D (Ref: http://www.sigchi.org/chi96/proceedings/videos/Card/skc2fg1.jpg)

Interaction Styles WIMP interfaces

Interaction Styles The WIMP Interface Windows Icons Menu Pointers

Interaction Styles The WIMP Interface Windows, Icons, Menus, Pointers Windows, Icons, Mice, Pull-down Menus Also called windowing system MS Windows / Mac OS is a WIMP Interface Synonym of GUIs

Interaction Styles The WIMP Interface (Ref: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface To reduce cognitive load To reduce learning time Ease of use Consistency between interfaces

Interaction Styles WIMP Elements General Features Special Features Windows Buttons Toolbars Icons Palettes Menus Dialog boxes Pointers

Interaction Styles The WIMP Interface (Elements) General Features + Specific Features Together create look and feel i.e. “look" refers to the appearance of GUI widgets “Feel" refers to the way the widgets behave “java swing tutorial” “see demo”

Interaction Styles The WIMP Interface (Elements) Windows An area of screen with independent functionality Contains text and graphics Can be moved / resized More than one window at one time i.e. more tasks can be handled at one time BUT only one task is active at one time

Interaction Styles The WIMP Interface (Elements) Overlapping of Windows Cascading windows Totally obscuring windows Tiled windows Scrollbars Vertical: move contents up/down Horizontal: move contents left/right

Interaction Styles The WIMP Interface (Elements) Title-bar To show the name of the window Minimize, maximize, close operations Windows within windows e.g. MS Excel sheets, MS Word

Interaction Styles The WIMP Interface (Elements) Icons Pictorial representation of a physical object A small picture to represent a window Many windows in the form of icons can be on: Desktop In one window e.g. folders in a window (Ref: http://upload.wikimedia.org/wikipedia/commons/3/38/Icons_example.png)

Interaction Styles The WIMP Interface (Elements) Icons Used to represent files, folders, windows, devices, … Come in different sizes: 16, 32, 48, 96, …. pixels “Icon editor” for creating and editing icons

Interaction Styles The WIMP Interface (Elements) Icons Shrinking the window to its icon is called iconifying the window Icons should represent the function for which they are designed e.g. Recylebin, MS Word icon, MS Windows icon (flag)

Interaction Styles The WIMP Interface (Ref: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface To reduce cognitive load To reduce learning time Ease of use Consistency between interfaces

Interaction Styles WIMP Elements Special Features General Features Buttons Windows Toolbars Icons Palettes Menus Dialog boxes Pointers

Interaction Styles The WIMP Interface (Elements) Pointers WIMP relies on clicking and pointing Pointing/Hovering: Moving and stopping the cursor on the required item Selecting: Clicking once on the icon (Ref: extracted from: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface (Elements) Pointers Executing: Double click or one click + Enter key Dragging: Press + move the mouse without releasing the mouse button (Ref: extracted from: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface (Elements) Pointers Different cursors to distinguish modes Arrow pointer: Normal activity Hour glass: processing / waiting Hand cursor: hyperlinks + Pointer: drawing a line Resize arrows etc. “Resizing window with keyboard” (Ref: extracted from: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface (Elements) Pointers Hotspot: The location to which pointers point e.g. arrow in the figure has hotspot on left (Ref: extracted from: http://upload.wikimedia.org/wikipedia/commons/8/88/Wimp.jpg)

Interaction Styles The WIMP Interface (Elements) Menus Pull-down menus / Linear menus A menu of commands that appear below the title bar of the window Appear by clicking on the menu name Fall-down menus (after first click)

Interaction Styles The WIMP Interface (Elements) Menus Difference between dropdown and pull down menu? Pop-up / fly-out / context/ shortcut menus Appears on right click Can appear anywhere on the window Quick access to the concerned functionality

Interaction Styles The WIMP Interface (Elements) Menus Pie / Radial / Circular / Marking menus Pie slices Inactive center Marks/gestures indicate the selection Selection depends on direction of marks (Ref:http://web.archive.org/web/20080410001552/http://trolltech.com/products/qt/addon/solutions/catalog/4/Widgets/qtpiemenu/)

Interaction Styles The WIMP Interface (Elements) Menus Pie / Radial / Circular / Marking menus Mouse pointer at the center of the menu Equidistant menu items from center Takes less time to select an item Takes more space on screen Expert Mode (gestures/marks) (Ref:http://web.archive.org/web/20080410001552/http://trolltech.com/products/qt/addon/solutions/catalog/4/Widgets/qtpiemenu/)

Interaction Styles The WIMP Interface (Elements) Menus Important points for designing menus What items to include? How to group the items? How to order the items?

Interaction Styles The WIMP Interface (Elements) Buttons / Command Button / Push Button Resemble push buttons of a control panel (i.e. switch button) Provides a simple way to trigger an event Rectangular / Rounded Rectangular (Ref: http://dryicons.com/files/graphics_previews/basic_shaped_colored_buttons.jpg)

Interaction Styles The WIMP Interface (Elements) Buttons / Command Button / Push Button Parts of a Button Button itself Text label (caption) Icon (Ref: http://dryicons.com/files/graphics_previews/basic_shaped_colored_buttons.jpg)

Interaction Styles The WIMP Interface (Elements) Buttons / Command Button / Push Button Events associated with a Button Press Release Hover What happens when you press a button BUT release mouse pointer outside button? (Ref: http://dryicons.com/files/graphics_previews/basic_shaped_colored_buttons.jpg)

Interaction Styles The WIMP Interface (Elements) Buttons / Command Button / Push Button Radio buttons Single choice among many Check buttons / boxes / tick boxes Multiple choices Toggle behavior (Ref: http://www.cincomsmalltalk.com/userblogs/pollock/files , http://arcanecode.files.wordpress.com/2007/09/wpf044.jpg)

Interaction Styles The WIMP Interface (Elements) Toolbars Collection of small buttons, icons, menus … Top / Side of a window Customizing toolbars Used in: office applications, graphic editors, web browsers

Interaction Styles The WIMP Interface (Elements) Palettes Like tear-off and pin up menus Place anywhere on screen Mostly in drawing applications http://www.mydigitallife.info/wp-content/uploads/2009/05/pin-control-panel-to-taskbar.jpg

Interaction Styles The WIMP Interface (Elements) Dialog boxes Information window for user attention e.g. error / warning message window Paste special dialog box Paste as formatted text or unformatted

Interaction Styles The WIMP Interface (Elements) Dialog boxes User’s interaction with the window to perform a task Naming a file and saving it (involves different dialog boxes)

References: Human Computer Interaction by Alan Dix, Janet Finlay, Gregory D. Abowd, Russell Beale (Book + presentation slides) The essence of Human Computer Interaction by Christine Faulkner The psychology of everyday things by Donald Norman Figures / Text … from Wikipedia / Google search / univ. labs , etc… (thanks to all)