ch 11 - designing interfaces and dialogues

creation of a design specification

• narrative overview

• sample design

• testing and usability assessment

• dialogue sequence

interface

method by which users interact with an information system

all human–computer interfaces must

• have an interaction style

• use some hardware device(s) for supporting this interaction

five styles of interacting :

• command language

• menu

• form

• object

• natural language

command language interaction

• human–computer interaction method where users enter explicit statements into a system to invoke operations

command languages are good for

• very experienced users

• systems with a limited command set 

• rapid interaction with the system

• keyboard shortcuts

menu interaction

• human–computer interaction method in which a list of system options is provided and a specific command is invoked by user selection of a menu option

• differ significantly in design and complexity

menu hierarchies

• providing navigation

• larger systems

menu arrangement

• variation can greatly influence system usability

pop-up menu 

• menu-positioning method that places a menu near the current cursor position

  • users don’t have to move their position or eyes to view system options

  • dialogue box

drop-down menu

• menu-positioning method that places the access point of the menu near the top line of the display; when accessed, menus open by dropping down onto the display

guidelines for menu design

• wording

• organization

• length

• selection

• highlighting

wording

• each menu should have a meaningful title

• command verbs should clearly and specifically describe operations

• menu items should be displayed in mixed uppercase and lowercase letters and have a clear, unambiguous interpretation

organization

• consistent organizing principle should be used that relates to the tasks the intended users perform

length

• number of menu choices should not exceed the length of the screen

• submenus should be used to break up exceedingly long menus

selection

• selection and entry methods should be consistent and reflect the size of the application and sophistication of the users

• how the user is to select each option and the consequences of each option

• should be clear

highlighting

• should be minimized and used only to convey selected options

form interaction 

• highly intuitive human–computer interaction method whereby data fields are formatted in a manner similar to paper-based forms

  • allows users to fill in the blanks

object-based interaction 

• human–computer interaction method in which symbols are used to represent commands or functions

icons

• graphical picture that represents specific functions within a system

• take up little screen space | quickly understood by most users

natural language interaction 

• human–computer interaction method whereby inputs to and outputs from a computer-based application are in a conventional spoken language (english)

• based on research in artificial intelligence

keyboard

• users push an array of small buttons that represent symbols that are then translated into words and commands

issues

• movement scaling 

• adeqate feedback

• speed

mouse

• small plastic box that users push across a flat surface and whose movements are translated into cursor movement on a computer display

issues

• movement scaling 

• adeqate feedback

joystick

• small vertical lever mounted on a base that steers the cursor on a computer display

issues

• movement scaling 

• adeqate feedback

• pointing accuracy

trackball

• sphere mounted on a fixed base that steers the cursor on a computer display

issues

• movement scaling 

• adeqate feedback

• durability

touch screen

• selections are made by touching a computer display

issues

• visual blocking

• user fatigue

• durability

• pointing accuracy

stylus

• selections are made by pressing a pen-like device against the screen

• visual blocking

• user fatigue

• pointing accuracy

graphics tablet

• moving a pen-like device across a flat tablet steers the cursor on a computer display

issues

• movement scaling 

• adeqate feedback

voice

• spoken words are captured and translated by the computer into text and commands

issues

• movement scaling 

• adeqate feedback

• pointing accuracy

target selection task

• most accurate

  • trackball

  • graphics tablet

  • mouse

  • joystick

text selection task

• most accurate

  • mouse

data entry

• most accurate

  • stylus

cursor positioning

• most accurate

  • none

text correction 

• most accurate

  • stylus

  • cursor keys

menu selection

• most accurate

  • touch screen

designing layouts

• header information

• sequence and time-related information

• instruction or formatting information

• body or data details

• totals or data summary

• authorization or signatures

• comments

data entry screen functional capabilities

• cursor control capabilities

• editing capabilities

• exit capabilities

• help capabilities

cursor control capabilities

• move the cursor forward to the next data field

• move the cursor backward to the previous data field

• move the cursor to the first, last, or some other designated data field

• move the cursor forward one character in a field

• move the cursor backward one character in a field

editing capabilities

• delete the character to the left of the cursor

• delete the character under the cursor

• delete the whole field

• delete data from the whole form

exit capabilities

• transmit the screen to the application program

• move to another screen/form

• confirm the saving of edits or go to another screen/form

help capabilities

• get help on a data field

• get help on a full screen/form

 guidelines for structuring data entry fields 

• entry

• defaults

• replacement

• captioning

• format

• justify

• help

entry

• never require data that are already online or that can be computed

defaults

• always provide default values when appropriate

units

• make clear the type of data units requested for entry

replacements

• use character replacement when appropriate

captioning

• always place a caption adjacent to fields

format

• provide formatting examples when appropriate

justify

• automatically justify data entries

help

• provide context-sensitive help when appropriate

data validation test

• class or composition

• cominations

• expected values

• missing data

• picture/template

• range

• reasonableness

• self-checking digits

• size

• values

class or composition

• test to ensure that data are of proper type

combinations

• test to see if the value combinations of two or more data fields are appropriate or make sense

expected values 

• test to see if data are what is expected

missing data 

• test for existence of data items in all fields of a record

pictures/templates

• test to ensure that data conform to a standard format

range

• test to ensure data are within proper range of values

reasonableness

• test to ensure data are reasonable for situation

self-checking digits

• test where an extra digit is added to a numeric field in which its value is derived using a standard formula

size

• test for too few or too many characters

values

• test to make sure values come from set of standard values

ways to provide feedback

• status information

• prompting cues

• error or warning messages

status information

• keep user informed of what’s going on, helpful when user has to wait for response

prompting cues

• tell user when input is needed, and how to provide the input

error or warning messages

• inform user that something is wrong, either with data entry or system operation

dialogue

• sequence of interaction between a user and a system

steps in the dialogue design process

• designing a dialogue sequence

• building a prototype

• assessing usability

guidelines for designing human computer dialogues

• consistency

• shortcuts and sequence

• feedback

• closure

• error handling

• reversal

• control

• ease

dialogue diagramming 

• formal method for designing and representing human–computer dialogues using box and line diagrams

dialogue diagramming has one symbol with three boxes representing three sections as follows:

• top

• middle

• bottom

top

• contains a unique display reference number used by other displays for referencing it

middle

• contains the name or description of the display

bottom

• contains display reference numbers that can be accessed from the current display

opening new browser window

• avoid opening when a user clicks on a link unless it is clearly marked that a new window will be opened

breaking or slowing down the back button

• make sure users can use the back button to return to prior pages

complex URLs 

• it makes it more difficult for users to understand where they are and can cause problems if users want to e-mail page locations to colleagues

orphan pages

• avoid having pages with no “parent” that can be reached by using a back button

scrolling navigation pages

• avoid placing navigational links below where a page opens because many users may miss these important options that are below the opening window

lack of navigation support

• make sure your pages conform to users’ expectations by providing commonly used icon links such as a site logo at the top or other major elements

hidden links

• make sure you leave a border around images that are links, don’t change link colors from normal defaults, and avoid embedding links within long blocks of text

links that don’t provide enough information

• avoid not turning off link-marking borders so that links clearly show which links users have clicked and which they have not

buttons that provide no click feedback

• avoid using image buttons that don’t clearly change when being clicked

cookie crumbs

• technique of placing “tabs” or sequenced links on a Web page that show a user where they are within a site and where they have been