Menu Selection, Form Fillin, Dialog Boxes

(Shneiderman and Plaisant Ch. 6)

Interaction – Schema and Techniques(Dix et al., Ch. 3)

from http://wps.aw.com/aw_shneider_dtui_7, 8

http://www.hcibook.com/hcibook/resource.html

Overview

• What and why “frameworks (or theories) of interaction”– The big picture (again) - This time according to Dix et al.

• Will compare Dix et al.’s “big picture” to others a bit, Shneiderman, Norman• As students, viewing alternative accounts useful

• Overview of interaction styles– Command line, menus, …, WIMP, … – Direct manipulation last time

• “Look and feel”

• Details:– “Theory, principles, and (especially) guidelines”– Menus, form fillin

About Interaction (cf Dix et al., ch. 3)

• Notion of interaction (again)

• Interaction frameworks/schemas/accounts

• Ergonomics– Or, human factors

• Interaction styles– Command language, menus, direct manipulation

• Context of interaction – social and organizational

Interaction Frameworks

• Interaction:– Communication between

user and system

• Why have a framework?• or schema, or acccount• Recall last week’s account

– Next slide

– Allows “precision” in:• Explanation • Accounting for differences

– E.g., gulfs of execution and evaluation

– Detailing of ui elements

– Presents global view• All elements receive

attention

Task

“wor

k on

task

”“com

mands”

System

User

“gives”“per

form

s”

“feedback”

Physical System

Goals

Gulf of Execution

Gulf of Evaluation

System Model

Interface Model

UserModel

Norman’s Account(Hutchins, Hollan, and Norman – last week’s paper)

• Some systems harder to use than others

• Gulf of Executionuser’s formulation of actions

actions allowed by the system

• Gulf of Evaluationuser’s expectation of changed system state

actual presentation of this state

• Concentrates on user’s view of interface

• (Norman’s) Stages:– user establishes goal– formulates intention– specifies actions at

interface– executes action– perceives system state– interprets system state– evaluates system state

with respect to goal

Interaction Frameworks, Dix et al.

• from Abowd and Beale

• 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

O

U

I

system

output

user

input

Interaction Frameworks, 2

• User intentions translated into actions at the interface

translated into alterations of system state reflected in the output display interpreted by the user

• General framework for understanding interaction– not restricted to computer systems

• E.g., opening door– identifies all major components involved in

interaction– allows comparative assessment of systems– an abstraction

S

O

U

I

system

output

user

input

intentionsstate

interpreted

BTW – “Ergonomics”

• Study of the physical characteristics of interaction

• Also known as “human factors”

• Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems

• 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 ), lighting, noise, environmental conditions

(temperature, humidity– Use of color

• e.g., use of red for warning, green for ok, awareness of color-blindness etc.

Recall, Interaction StylesAs provided by Shneiderman – will see Dix et al.’s take next

• A basic element of design –– By what method (or style) does

user interact with system

• 5 main interaction styles– Each with advantages and

disadvantages – and • such tradeoffs what design all about!

– Direct Manipulation– Menu selection– Form fillin– Command language– Natural language

• Usually blend, especially when users are diverse

Interaction Styles, Dix et al.

• Again, interaction: – dialog between computer and user

Task

“wor

k on

task

”“com

mands”

System

User

“gives”“per

form

s”

“feedback”

S

O

U

I

system

output

user

input

• Shneiderman– Command language– Menu selection– Form fillin– Natural language– Direct Manipulation

• Dix et al.– Command line interface– Menus– Form-fills (and spreadsheets)– Natural language– Dialog boxes– Question/answer and query– “WIMP” – what is this?

Command Line Interfaces(Dix et al., briefly)

• Way of expressing instructions to computer directly– Using 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 (shell)

• Recall, user intentions translated into actions at interface

translated into alterations system state reflected in the output display interpreted by user

• Are gulfs likely to be large or small?– Paradigm example last time

S

O

U

I

system

output

user

input

Physical System

Goals

Gulf of Execution

Gulf of Evaluation

Menus• Set of options displayed on screen

• Options visible– less recall - easier to use– rely on recognition, so names should be meaningful– Less cognitive effort

• Selected by using mouse, numeric or alphabetic keys

• Menu organization important– often options hierarchically grouped– organization relevant to task and use– organization much studied

• E.g., alphabetical vs. task organization

• Menu systems can be (more later):– purely text based, with options presented as numbered choices– graphical selected by arrow keys– graphical selected by mouse– combination (e.g. mouse plus accelerators)

• “Restricted form” (or part) of full WIMP system

Natural Language

• Familiar to user

• Use speech recognition or typed natural language

• Problems:– Vague– Ambiguous– Hard to do well

• Solutions• try to understand a subset • pick on key words

• … and “promise of the future …”

Query Interfaces

• “Question/answer interfaces”– 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-Fillin

• Primarily for data entry or data retrieval

• Screen like paper form

• Data put in relevant place

• Requires– good design– obvious correction facilities

Go-faster Travel Agency

Bookings

Please enter details of journey:

Start from: York Destination:Via:

Single/Return

Seat Number:

PittsburghBirmingham

First Class/Second Class/Bargain

Spreadsheets

• First spreadsheet VISICALC first – followed by Lotus 1-2-3– MS Excel most common today

• Sophisticated variation of form-fillin– 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

WIMP Interface

• Windows• Icons• Menus (or Mice)• Pointers (or Pull-down menus)

• Default style for majority of interactive computer systems– Recall, Xerox Alto– Name not as clever as once was

Windows

• As you know …

• Areas of the screen that behave as if they were independent terminals– can contain text or graphics– can be moved or resized– can overlap and obscure each other,

• or can be laid out next to one another (tiled)

– scrollbars • allow the user to move the

contents of the window up and down or from side to side

– title bars• describe name of window

Icons

• Small picture or image

• Represents some object in the interface often a window or action

• Windows can be closed down (iconifed)– small representation many

accessible windows

• Icons can be many and various highly stylized or realistic representations

Pointers

• Important component– WIMP style relies on pointing

and selecting things

• Usually achieved with mouse– Also joystick, trackball, cursor

keys or keyboard shortcuts

• Wide variety of graphical images (and right bottom):

Menus

• Choice of operations or services offered on the screen

• Required option selected with pointer

– Problem - menus can take up a lot of screen space

– Solution - menu appears when needed

File Edit Options

Typewriter Screen Times

Font

S

O

U

I

system

output

user

input

Kinds of Menus, 1

• More later …

• Menu Bar at top of screen (normally), menu drags down– pull-down menu - mouse hold and drag down

menu– drop-down menu - mouse click reveals menu– fall-down menus - mouse just moves over bar!

• Contextual menu appears where you are (hovering)– pop-up menus - actions for selected object

• Pie menus - arranged in a circle– easier to select item (larger target area)– quicker (same distance to any option)– … but not widely used!

Kinds of Menus, 2

• Cascading menus– hierarchical menu structure– menu selection opens new menu– and so on …

• Keyboard accelerators– key combinations - same effect as menu item– two kinds

• active when menu open - usually first letter• active when menu closed - usually Ctrl +

letter

WIMP “Look and Feel”

• Lots of things user can interact when using “direct manipulation” ifs.:– Main WIMP components

• windows, menus, icons– Buttons– Dialogue boxes– Palettes– …

• Collectively, these elements known as widgets – “Window gadgets”

• appearance + behavior = look and feel

– Wikipedia: “… aspects of its design, including elements such as colors, shapes, layout, and typefaces (the "look"), as well as the behavior of dynamic elements such as buttons, boxes, and menus (the "feel").”

More Widgets (or interface elements)

• All familiar from personal use …

• E.g., Buttons– Individual and isolated regions within a display that can be selected to

invoke an action– Special kinds

• radio buttons - set of mutually exclusive choices• check boxes - set of non-exclusive choices

• E.g., Dialog boxes– Information windows that pop up to inform of an important event or

request information• E.g., when saving a file, a dialogue box is displayed to allow the user to

specify the filename and location. Once the file is saved, the box disappears

Social and Organizational Context

• Interaction affected by social and organizational context

• Other people- desire to impress, competition, fear of failure

• Motivation- fear, allegiance, ambition, self-satisfaction

• Note: Inadequate systems cause frustration and lack of motivation

Menu Design Details, 1

• Again, menus one “interaction style”– i.e., a way in which user can “tell the system what to do”

• Advantage (vs. e.g., command line) that range of “commands” is all available– Though, of course, are not all displayed at once– As noted, allows recognition vs. recall

• Enhances usability for novice or infrequent users

• Vs. direct manipulation– Which uses “model world” to represent system

• Advantages– Possibly faster for expert users (as is command line)– Can structure task

• Disadvantages– Lack of feedback of change in system state– Little metaphoric assistance in understanding task

Menu Design Details, 2

• As with any interaction style, need consider design issues such as:– Task-related organization– Phrasing of items– Sequence of items– Graphic layout and design– Shortcuts for knowledgeable frequent users– Online help– Error correction– Selection mechanisms

• Keyboard, pointing device, touchscreen, voice, etc.

• Will look at:– Meaningful organization of menus– Menu techniques

• Single menus, combinations of multiple menus, etc.– Menu content– Fast movement through menu selection

BTW, Old School Menu Design(UTPA, circa as late as 2006)

• “Glass teletype”– Principle university

database access

• Top level – menu

• Next - query with form fillin (not shown)

• Finally, query results

Task-Related Menu Organization

• Shneiderman:– "The primary goal for menu, form-fillin, and

dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task.“

• Menu organization provides a structuring of choices– Also, revealing system and command structure

through organization

• Hierarchies / tree structures– “Natural” for taxonomies– Ubiquitous– Powerful in organizing - log levels– Natural for menus

• Single, etc.– E.g., WWW a cyclic network

• Organization studied, e.g., alphabetical vs. frequency organization– Results: “it depends”

Single Menu Types, 1

• Binary Menus • Binary menus?

– E.g., radio buttons, check boxes

• Multiple-item Menus

– Multiple-selection menus or check boxes

• Pull-down menus (right)– Always available by

making selections on a top menu bar

– Cascading pull-down menus at right

– Key board shortcuts

Single Menu Types, 2

• Toolbars and pallettes– Offers actions on a displayed

object

• Iconic menus (bottom)– Also, pie menu

• Pop-up menus– Appear on a display in

response to a check or tap with a pointing device.

Single Menu Types – For Long Lists• Menus for long lists

• Scrolling menus – Display first portion of menu and an

additional menu item, typically an arrow that leads to next set of items in menu sequence

– Demos:• http://www.sitepoint.com/article/menu-scrolling-background• http://www.were-here.com/content/templates/articles.asp?

articleid=707&zoneid=7

• Combo boxes – combine scrolling menu with a text-entry field

• Sliders and alphasliders– Slider allows the selection of a value– “Alphaslider uses multiple levels of

granularity in moving slider thumb and can support tens or hundreds of thousand of items.”

Single Menu Types – Fisheye

• Fisheye menus – display all of the menu items on screen

at once, but show only items near cursor at full size.

• Demos – Java

• http://www.cs.umd.edu/hcil/fisheyemenu/fisheyemenu-demo.shtml

– Flash• http://www.samuelwan.com/downloads/com.samuelwan.e

idt/fisheyemenu/FisheyeMenuDemo.html

Single Menu Types – 2-Dimen

• Menus for long lists

• Two-dimensional menus

– “Fast and vast” – Give users a good

overview of choices– Reduce the number of

required actions– Allow rapid selection

Single Menu Types - Embedded

• Embedded menus and hotlinks– Alternative to explicit

menus– Natural to allow users

reading about people, events, and places to retrieve detailed information by selecting menus in context

FYI - Combination of Multiple Menus

• Linear menu sequences and simultaneous menus– Linear

• Guide the user through complex decision-making process. – E.g., install

• Effective for novice users performing simple tasks– Simultaneous

• Present multiple active menus at the same time and allows users to enter choices in any order

• Tree-structured menus– Designers can form categories of similar items to create a tree structure

• E.g., fonts, size style, spacing– Fast retrieved if natural and comprehensive– Use terminology from the task domain– Expanding menus maintain the full context of each choice

• E.g., Windows Explorer

• Menu Maps– E.g., site map– Menu maps can help users stay oriented in a large menu tree– Effective for providing overviews to minimize user disorientation.

• Acyclic and Cyclic Networks– Useful for – social relationships – transportation routing – scientific-journal citations – Can cause confusion and disorientation.

Content OrganizationShneiderman guidelines

• “Meaningful” grouping and sequencing of menu items important in effectiveness– Want menu structure and items to

map well to task

• A “guidelines” approach

• Shneiderman:

Task

“wor

k on

task

”“com

mands”

System

User

“gives”“per

form

s”

“feedback”

Content Organization - DetailShneiderman

• Task-related grouping in tree organization– Create groups of logically similar items – Form groups that cover all possibilities – Make sure that items are nonoverlapping – Use familiar terminology, but ensure that items are distinct from one another

• Item Presentation Sequence– Order of items is important– Should consider natural sequence, as possible:

• Time • Numeric ordering • Physical properties

– When cases have no task-related orderings, designer must choose from such possibilities as:

• Alphabetic sequence of terms • Grouping of related items • Most frequently used items first • Most important items first.

FYI - Content Organization – Menu Layout, 1

• Titles– For single menus, use a simple

descriptive title. – For tree-structured menus, use the exact

same words in the higher-level menu items as in titles for next lower-level menu.

• E.g. if a menu item is called Business and Financial Services, next screen should have that phrase as its title.

– Phrasing of menu items• Use familiar and consistent

terminology • Ensure that items are distinct from

one another • Use consistent and concise phrasing • Bring the keyword to the left

• Graphic layout and design– Constraints

• screen width and length • display rate • character set • highlighting techniques

Guidelines from Shneiderman

FYI - Content Organization – Menu Layout, 2

• Establish guidelines for consistency of at least these menu components: – Titles – Item placement – Instructions – Error messages – Status reports

• Techniques – Indentation – Upper/lower case characters – Symbols such as * or - to create

separators or outlines – Position markers – Cascading or walking menus – Magic lens

Guidelines from Shneiderman

Finally, Fast Movement Through Menus

• Keyboard shortcuts– Supports expert use– Can make translation to a foreign

language more difficult– Bookmarks in browsers– User configured toolbars

Data Entry Design Details

• Menu item effective for choosing item from list, but there’s more …– Textual input in particular

Data Entry Design Details

• Menu item effective for choosing item from list, but there’s more …– Textual input in particular

• Form fill-in – Set of text input boxes– Format can be constrained,

e.g., mm/dd/yyyy

• Dialog box– Limited data entry coupled

with menu selection– Often a standardized element

with guidelines

Data Entry with Form Fillin

• Appropriate when many fields of data must be entered: – Full complement of information visible

to user– Display resembles familiar paper

forms– Few instructions are required for

many types of entries

• Users must be familiar with: – Keyboards – Use of TAB key or mouse to move

cursor – Error correction methods – Field-label meanings – Permissible field contents – Use of the ENTER and/or RETURN

key

FYI - Data Entry with Form Fillin (cont.)

• Form-Fillin Design Guidelines– Meaningful title – Comprehensible instructions – Logical grouping and sequencing of fields – Visually appealing layout of the form – Familiar field labels – Consistent terminology and abbreviations – Visible space and boundaries for data-entry

fields – Convenient cursor movement – Error correction for individual characters

and entire fields – Error prevention – Error messages for unacceptable values – Optional fields clearly marked – Explanatory messages for fields – Completion signal

• Format-specific field– Coded fields

• Telephone numbers • Social-security numbers • Times • Dates • Dollar amounts (or other currency)

Data Entry with Dialog Boxes

• Combination of menu and form-fillin techniques, as Google example

• Internal layout guidelines: – Meaningful title, consistent style – Top-left to bottom-right sequencing – Clustering and emphasis – Consistent layouts (margins, grid, white space, lines,

boxes) – Consistent terminology, fonts, capitalization, justification – Standard buttons (OK, Cancel) – Error prevention by direct manipulation

• External Relationship :– Smooth appearance and disappearance – Distinguishable but small boundary – Size small enough to reduce overlap problems – Display close to appropriate items – No overlap of required items– Easy to make disappear – Clear how to complete/cancel

Novel Menu Designs

• Novel designs combining menus and direct manipulation– Pie menus

• Allows “walking out” for selection– Control menus

• When pointer reaches some point, command is issued– Marking menus

• Release of pointing device issues command

– Flow menus• Return to central rest area triggers selection and allows further choice

– Toolglass• Two hands, e.g., tool palette and tool use

Audio Menus and Menus for Small Displays

• Menu systems in small displays and situations where hands and eyes are busy are a challenge

• Audio menus, e.g., phone trees!– Verbal prompts and option descriptions– Input is normally verbal or keypad– Not persistent, like a visual display, so memorization is

required.– Request users can avoid listening to options

• Menu for small displays, e.g., cell phones!– E.g., entertainment, communication services– Learnability is a key issue– Hardware buttons

• Navigation, select– Expect interactions– Tap interface– GPS and radio frequency identification provides same

automatic input

End

• http://graphics.cs.columbia.edu/courses/csw4170/syllabus-15f.htm– Feiner course with text