Interaksi Manusia Komputer Dialog Design Styles Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Dialog Style Menu Fill-in-forms Question and answer Command languages Function keys Direct manipulation Natural language Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Menu - cont Single menus Linear sequence Tree structure Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Menu - cont Acyclic network Cyclic network Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Principles n Guidelines of Menu Menu 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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Principles n Guidelines of Menu - cont Menu 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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Principles n Guidelines Fill-in Form Fill-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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

Principles n Guidelines Fill-in Form - cont Guidelines 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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 line provide 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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Interaksi Manusia Komputer - Dialog Design Style Interaksi Manusia Komputer - 6. Dialog Design Style

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 Style Interaksi Manusia Komputer - 6. Dialog Design Style