interaksi manusia komputer - dialog design style1 interaksi manusia komputer dialog design styles

Interaksi Manusia Komputer - Dialog Design Style 1

Interaksi Manusia Komputer

Dialog Design Styles


Dialog Style

• Menu • Fill-in-forms• Question and answer• Command languages• Function keys• Direct manipulation• Natural language


Menu• Menu is a list of options from which the user selects the

desired choice• The style

– Choice may be presented as words in a list or as collections of icons

– Hierarchical such as tree structure– Linear is a pathway, which at each point the user

must still make a selection from among a set of options

– Networked provides an option known as menu bypass that allows the user to jump directly from one node


Menu - cont

Single menus

Linear sequenceTree structure


Menu - cont

Cyclic networkAcyclic network


Advantages of Menu

• Self explanatory – the semantics and the syntax of the system explicit

• Requires little human memory – they are easy to learn and remember

• Few keystrokes – they require only that the user type on a one or two char, or move a cursor, or point and press button

• Easy error handling – there is a limited set of valid inputs at any one time, it is relatively easy to do error checking

• Enhancements are visible – users will always notice when new functions are added


Disavantages of Menu - cont

• Inefficient – simple and fast to make a selection from an individual menu screen

• Inflexible – menu also force a user through set sequences of steps

• Impractical for numerous choices - • Take up screen ‘real estate’ –take up space on the

screen, potentially competing with other aspects of a display


Area of Menu Systems

• Menu structure - the depth and the number of the choices

• Menu choice ordering the choice items that will appear on each menu screen

• Menu choice selection – the list of choices with the cursor control and pressing, or else

• Menu invocation • Menu navigation – facilitated by a number of design

techniques


Principles n Guidelines of MenuMenu Structure• Match menu structure to task structure• Provide users with an easy way to tailor menu structure

to task structure• Minimize menu hierarchy depth at the expense of

breadth• On full screen text menus, present menu choice lists

vertically• Consider pie menus for one or two level mouse driven

menu hierarchies with short menu choice lists, especially when the choices lend themselves well to a circular, pie format

• Choosing graying out or deletion of inactive menu items depends on user experience and input device


Principles n Guidelines of Menu - cont• Create logical, distinctive and mutually exclusive

semantic categories with clean meanings• Menu choice labels should be brief, consistent in

grammatical style and placement, and matched with corresponding menu titles

• Consider menu choice descriptors if choice labels may not be clear and unambiguous

Menu Choice Ordering• Order menu choice labels according to convention,

frequency of use, order of use, categorical or functional groups, and/or alphabetical order, depending on the user and task variables

• Use meaningful groupings items


Principles n Guidelines of Menu - contMenu Choice Selection• On keyboard driven, cursor selection is acceptable for

shorter menus. For longer menu, mnemonically lettered selection codes are preferred. On pointer, drives interfaces, providing a pointer cursor selection mechanism is recommended

• Provide menu selection defaults when possible• Show position by graphics, numbers, or titles• Distinguish between ‘choose one’ and ‘choose many’

menu• Provide menu selection feedback

Menu Invocation• reserve pop-up or user invoked menus for high-frequency

users


Principles n Guidelines of Menu - cont• Allow jumphead, other shortcuts

Menu Navigation• Establish conventions for menu design and apply them

consistenly on all menu screen• Consider the use of context labels, menu maps, and

place markers as navigational• Consider the use of direct access through type-ahead

menu screen names, and user-created macros to facilitate navigation for expert users

• Facilitate backward navigation• Consider online help, selection mechanisms, response

time, display rate


Fill-in Forms

• The interface is similar to a paper fill-in form• It is a structured, formatted form containing a number

of fields in which user is expected to type in data• Usually, each field has a label or caption that indicates

the type of data to be entered


Advantages of Fill-in Form

• Self explanatory – the semantics and the syntax of the system explicit

• Requires little human memory – they are easy to learn and remember

• Efficient use of screen real estate – make efficient use of space on the screen

• Accomodates parameters with many possible input values

• Provides context• Enchancements are visible


Disadvantages of Fill-in Form

• Assumes knowledge of valid inputs • Assumes typing skill – if the user are not touch typists,

dialog style may be slow relative to others such as function keys, menus or direct manipulation

• Error prone• Assumes knowledge of special keys – naive users are

particularly unfamiliar with and confused by a navigation keys (tab, return)

• Inflexible – difficult tp fill in fields in any order other than the order in which the field appear


Area of Fill-in Systems

• Fill-in form organization and layout• Fill-in caption and field design• Fill-in form input formats• Fill-in form prompts and instructions• Fill-in form navigation• Fill-in form error handling


Principles n Guidelines Fill-in FormFill-in Form Organization and Layout• Design and organize the form to support the task• Organize groups of items related semantically, by

sequence of user, by the frequency of use, and/or by relative importance

• Keep the number of groups to a minimum while limiting the size of groups to 12-14 characters wide and 6-7 lines high

• Use white space to create balance and symmetry and lead the eyes in the appropiate direction

• Separate logical groups by spaces, lines, color, or other visual cues


Principles n Guidelines Fill-in Form - cont

• Minimize the number of screens for high-frequency users and slow system response time. And vice versa

• Keep related and interdependent items on the same screen

Fill-in form Caption and Field Design• For single fields, place caption to the left. For list field

place the caption above, left justified above alpha lists, right justified above numeric lists

• Justify captions and field according to user, task, and data type, respectively


Principles n Guidelines Fill-in Form - cont• Separate the longest caption (in a left justified group)

from its field by no more than one or two spaces. Separate one caption field group from another by three or more spaces horizontally or by more lines vertically

• Break up long fields or long columns of single field items into groups of five separated by a blank line

• Provide distinctive field group and section headings in complex forms

• Distinguish captions from fields• Captions should be brief, familiar, and descriptive, have

a meaningfull title• Indicate the number of character spaces available in a

field


Principles n Guidelines Fill-in Form - cont• Indicate when field are optional

Fill-in Form Input Formats• Consider providing system completion of unambiguous

partial input• Consider providing pop-up or pull-down menus for fill-in

fields with many but well-defined entry options• Avoid complex rules for entering data in the various

fields of a form• Provide meaningful groupings to break up long input

formats• Provide defaults whenever possible. Allow simple (single

key) acceptance of defaults


Principles n Guidelines Fill-in Form - contGuidelines refer to designing input data• Make high frequency inputs easy to express (e.g. y/n,

00, defaults)• Let the user specify the unit of measurement. Do not

require transformations or calculations• Design meaningful input data whenever possible• Allow abbreviated input when it can be unambiguously

interpreted (e.g. ‘yes’ or ‘ye’ or ‘y’)• A system should be ‘case blind’ whn it really does not

matter (e.g. ‘YES’ or ‘Yes’ or ‘yes’)• Keep input field short if possible• Do not combine letters and numbers in a single field


Principles n Guidelines Fill-in Form - cont• Avoid frequent shifts between upper and lower case• Avoid uncommon letter sequences• Do not require leading zeros

Fill-in Prompts and Instructions• Provide prompts when use will be relatively infrequent,

inputs must be formatted, and users are not working from a source documtn

• Prompts should be brief and unambiguous• Place prompts to the right of field • Provide instructions for navigation and completion on

the screen or through on-line help


Principles n Guidelines Fill-in Form - cont• Place instructions in a consistent location across screens

and make them visually distinctive• Use consistent terminology and consistent grammatical

form and style in instructions

Fill-in Form Navigation• When a form is first entered, position the cursor in the most

likely default position• Arrange field groups consistently with default cursor

movement. Preferable vertical movement• Allow forward and backward movement by field and

within fields• Make protected areas on the screen completely inaccessible


Principles n Guidelines Fill-in Form - cont• Provide titles and page numbers or place markers on

screens in a multiscreen form• Direct manipulation increases flaxibility, speed, and

ease of learning for navigation through fields

Fill-in Form Error Handling• Allow character edits in fields• Place the cursor in the error field after detection• For independent fields, withhold error reporting until

user request• Provide semantic and syntatic information in error

messages depending on user knowledge


The rules of Ben Schneiderman

• Strive for Consistency • Enable Frequent Users to use shortcuts • Offer Informative Feedback • Design Dialogs to yield closure • Offer simple error handling • Permit easy reversal of actions • Support internal locus of control • Reduce Short term memory load


Question and Answer

• Combines some of the features of both menus and form fill-in

• As with a menu system, the user is posed with a single question at a time

• Like a form fill-in, the user is expected to type in an answer, rather than select one from a list


Advantage Question and Answer

• Self explanatory – clearly phrased questions and good prompts regarding valid answer and their proper format can provide users with everything they need to know the correctly step through the dialog

• Requires little human memory – the user onlu recognize the questions and prompts

• Accomodates parameters with many possible input values

• Accomodates tasks with a hierarchical structure• Accomodates complete and clear prompting• Enchancements are visible


Disadvantage Question and Answer

• Inefficient – if the system complex, could be tedious indeed

• Assumes typing skill – may be slow if the users are not touch typists

• Error prone – opportunities for user input errors• Inflexible – make it difficult to answer questions in any

order other than the order in which the questions are posed

• No forward context – the user cannot see what questions will be asked next


Principles n Guidelines Question n Answer• Always maintain a system title on the screen. Provide

subtitles for context if appropriate• State questions in clear, simple language• Provide brief prompts and instructions• Use visual cues and white space to distinguish

questions, prompts, instructions, and user input• Do not require unnecessary transformations or

translations• Avoid yes/no responses to questions involving binary

answers. Provide mnemonic codes for alternatives• Minimize typing requirements• Provide flexible navigation


Command Languages

• An original, traditional style of computer-human interaction

• User types in requests through an artificial language with its own unique semantic, vacabulary, and syntax


Advantages Command Languages

• Powerful – a single entry can accomplish what might take 20-30 menu screens or fill-in fields in those dialog styles

• Flexible, user controlled – the user can do anything in any order through a command language

• Fast, efficient – complex commands faster than they can step through multiple screen, scanning for menu options or else

• Uses minimal screen ‘real estate’ – requires only one line on the screen for command entry


Disadvantages Command Languages

• Difficult to learn – space efficiency is achieved by eliminating prompting and instructions from the screen

• Difficult to remember – infrequent users will find it difficult to remember to vacabulary andf syntax on a command language

• Assumes typing skill = can be slow for a untouch typists user

• Error prone – may increase error• Enhancement are not visible – the user has no way of

knowing when changes and enhacements have been made to the system


The Area of Command Languages

• Command language semantics – the set of functionality that it provides and how that functionality is broken down into language elements

• Command language syntax – involves both the format for specifying command parameters an punctuation in multiple command strings

• Command language lexicon – command names and/or abbreviations

• Command language interaction – include the location of the command line and the quality of feedback, error handling, and on-line assistance


Principles and Guidelines Command Languages

Command language semantics• Balance power and simplicity (richness and minimality,

respectively) according to user needs

Command language syntax• Provide consistency in syntax• Use an action-object syntax – start with a command

name that is a verb, followed by parameters• Avoid arbitary use of punctuation• Avoid positional grammars• A command language syntax should be natural and

mnemonic


Principles and Guidelines Command Languages - cont

• Allow defaulting of optional parameters• Avoid frequent use of shift or control keys

Command language lexicon• Design command names to be hierarchical, congruent,

specific, familiar, consistent in grammatical form, and discriminable

• Use user jargon and avoid computer jargon• Use a simple, consistent rule for command name

abbreviations• Allow full command nmaes and emphasize them in

training, even if abbreviations are allowed


Principles and Guidelines Command Languages - cont

Command language interaction• Locate the command line at the bottom of the screen

por window, unless it is clear that the user’s eyes will be elsewhere at input lineprovide interactive support through defaults, command editing, intelligent interpretation type-ahead, and feedback

• Provide memory aids such as online quick reference and prompting

• Provide function keys for high frequency commands• Make the language user tailorable


Function Keys

• Commands, and comtimes objects are specified by pressing special keys on the keyboard, rather than typing them in or by selecting them from the menu

• E.g. F1 = undo


Advantages Function Keys

• Self explanatory – clear both what can be done and how to do it

• Require little human memory • Easy to use – faster than typing in a command name• Flexible – do not impose any aprticular sequence of use

on users, can be used in any order• Requires little or no screen ‘real estate’ – requires n

screen at all, except possibly part of one lin efor parameter prompting

• low typing requirement – less opportunity for user error


Disadvantages Function Keys

• Limited number of keys available – if functionality is rich, alternatives possible : (1) doubling up keys to provide additional functions, (2) going to a soft function key approach

• Hardware approaches to expansion are expensive – hwn enhanced with additional functionality, altervatives possible : (1) doubling up keys, (2) redesigning the keyboard with more keys or new labels

• Software approaches to expansion sacrifice screen space efficiency and ease of use

• Make keyboard system or application specific


Principles and Guidelines Function Keys• Reserve the use of function keys for generic, high-frequency,

important functions• Arrange in groups of three or four based on semantic

relationships• Base groupings on flow of use rather than on semantic

relationships for high frequency of use• Distinguish groupings by space, size and color• Label keys clearly and distinctively. Recognizability takes

precedence over consistency• Place high-use keys within easy reach of home row• Provide enough function keys to support functionality, but

not so many that scanning and finding are difficult• Place the most frequently used keys within function key

groups in the most accessible positions


Principles and Guidelines Function Keys - cont

• Place keys with serious consequences in hard to reach positions

• Minimize the use of qualifier keys (for example, Shift, Alt, Command, Control). Use them consistenly when they are necessary

• Preserve spatial relationships between soft function key labels on the screen and generic function keys on the keyboard. A horizontal layout is preferred

• Be consistent in function key assignments across screens, subsystems, and related products

• Provide feedback when function keys are pressed• Gray out or delete labels of currently inactive keys• Provide a status indicator on mode keys


Direct Manipulation

• Users perform actions directly on visible objects• Include

– Continuous representation of objects– Physical actions or labeled button presses in place of

command language– Rapid incremental reversible operations with

immediately visible results


Advantages Direct Manipulation

• Easy to learn and remember – usually little or no prompting on the screen

• Direct, WYSIWYG – allow users to focus on task semantics rather than on system semantic and syntax

• Flexible, easily reversible actions – usually very easy to reverse or undo

• Provides context and instant, visual feedback – help accomplish their tasks more efficiently and more effectively

• Exploits human use of visual-spatial cues – faster in visual and spatial information rather than in processing language

• Less error prone – low typing requirements and the visual feedback


Disadvantages Direct Manipulation

• Not self explanatory – there usually is little or no prompting in a direct manipulations interface

• Can be inefficient – can make a busy screen• May be difficult to design recognizable items – usually

hard to design good icons for actions• Icons take more screen ‘real estate’ than words – an

icon for a command or object is usually bigger than a name. And it is often necessary to accompany icons with names because of the problem described previously


Principles and Guidelines of Direct Manipulation

• Minimize semantic and articulatory distance in dialog design

• Provide visual feedback for position, selection, and movement, and physical feedback for modes

• Follow all general guidelines for good interface design given, e.g.: consistency, good comceptual model, good feedback, good organization of functionality, good screen layout n design, effective use of color, ggood error handling

• Provide an alternative interface for high frequency, expert user

• Choose a consistent icon design scheme• Design incons to be concrete and familiar


Principles and Guidelines of Direct Manipulation - cont

• Minimize articulatory distance in icon design• Design icons in a set to be visually and conceptually

distinct• Avoid excessive detail in icon design• Design icons to communicate object relations and

attributes whenever possible• Accompany incons with names• Limit the number of icon types to 12 if possible, but at

most to 20• Allow users to choose between iconic and text display

of objects and actions


Natural Language• Allowing users to express requests to a software

application in their native language• Domain of natural language

– Conceptual domain refers to the total set of objects and actions it provides

– Functional domain is defined by what can be expressed direclty through the language without elaborations or details

– Syntatic domain refers to the variety of syntatic forms in which a request can be paraphrased and still be understood

– Lexical domain refers to the vocabulary words it understands


Advantages Natural Language

• Easy to learn – because the humas already know their own natural language

• Easy to remember – not necessary to rem,ember the semantics of the system

• Less transfer problems to other natural language systems

• Powerful• Flexible, user controlled• Fast, efficient – complex command can be faster• Uses moderate screen ‘real estate’ – need only a few

lines on the screen for command entry


Disadvantages Natural Language

• Assumes knowledge of the problem domain • Requires lengthy confirmation and clarification dialogs• Assumes typing skill• Error prone• Enhacements are visible• May create unrealistic expectations, encourage users to

relinquish responsibility, and generate negative reactions

• Expensive to implement


Principles n Guidelines of Natural Language• Provide a restricted natural language interface that is

conceptually, functionally, syntactically, and lexically habitable. Determine the subset of true natural language to include empirically using the Wizard technique

• Phrase all system output in conceptually, functionally, cyntactically, and lexically valid input forms

• Prompt and clarify in terse but clear language, use consistent familiar terminology and simple, brief grammatical form

• Provide cooperative responses• Provide an optional clarification dialog• Distinguish between user input and system output with white

space and visual cues• Provide a way to view and edit dialog history• Provide instructions for navigation

interaksi manusia komputer - dialog design style1 interaksi manusia komputer dialog design styles

Documents

menu bypass

choices menu choice

menu choice descriptors

menu hierarchy depth

corresponding menu titles

short menu choice lists

present menu choice

style choice