Presentation is loading. Please wait.

Presentation is loading. Please wait.

Interaksi Manusia Komputer - Dialog Design Style1 Interaksi Manusia Komputer Dialog Design Styles.

Similar presentations


Presentation on theme: "Interaksi Manusia Komputer - Dialog Design Style1 Interaksi Manusia Komputer Dialog Design Styles."— Presentation transcript:

1 Interaksi Manusia Komputer - Dialog Design Style1 Interaksi Manusia Komputer Dialog Design Styles

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

3 Interaksi Manusia Komputer - Dialog Design Style3 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

4 Interaksi Manusia Komputer - Dialog Design Style4 Menu - cont Single menus Linear sequence Tree structure

5 Interaksi Manusia Komputer - Dialog Design Style5 Menu - cont Cyclic network Acyclic network

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

7 Interaksi Manusia Komputer - Dialog Design Style7 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

8 Interaksi Manusia Komputer - Dialog Design Style8 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

9 Interaksi Manusia Komputer - Dialog Design Style9 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

10 Interaksi Manusia Komputer - Dialog Design Style10 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

11 Interaksi Manusia Komputer - Dialog Design Style11 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

12 Interaksi Manusia Komputer - Dialog Design Style12 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

13 Interaksi Manusia Komputer - Dialog Design Style13 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

14 Interaksi Manusia Komputer - Dialog Design Style14 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

15 Interaksi Manusia Komputer - Dialog Design Style15 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

16 Interaksi Manusia Komputer - Dialog Design Style16 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

17 Interaksi Manusia Komputer - Dialog Design Style17 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 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

18 Interaksi Manusia Komputer - Dialog Design Style18 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

19 Interaksi Manusia Komputer - Dialog Design Style19 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

20 Interaksi Manusia Komputer - Dialog Design Style20 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

21 Interaksi Manusia Komputer - Dialog Design Style21 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

22 Interaksi Manusia Komputer - Dialog Design Style22 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

23 Interaksi Manusia Komputer - Dialog Design Style23 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

24 Interaksi Manusia Komputer - Dialog Design Style24 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

25 Interaksi Manusia Komputer - Dialog Design Style25 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

26 Interaksi Manusia Komputer - Dialog Design Style26 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

27 Interaksi Manusia Komputer - Dialog Design Style27 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

28 Interaksi Manusia Komputer - Dialog Design Style28 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

29 Interaksi Manusia Komputer - Dialog Design Style29 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

30 Interaksi Manusia Komputer - Dialog Design Style30 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

31 Interaksi Manusia Komputer - Dialog Design Style31 Advantages Command Languages Powerful – a single entry can accomplish what might take 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

32 Interaksi Manusia Komputer - Dialog Design Style32 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

33 Interaksi Manusia Komputer - Dialog Design Style33 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

34 Interaksi Manusia Komputer - Dialog Design Style34 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

35 Interaksi Manusia Komputer - Dialog Design Style35 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

36 Interaksi Manusia Komputer - Dialog Design Style36 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

37 Interaksi Manusia Komputer - Dialog Design Style37 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

38 Interaksi Manusia Komputer - Dialog Design Style38 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

39 Interaksi Manusia Komputer - Dialog Design Style39 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

40 Interaksi Manusia Komputer - Dialog Design Style40 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

41 Interaksi Manusia Komputer - Dialog Design Style41 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

42 Interaksi Manusia Komputer - Dialog Design Style42 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

43 Interaksi Manusia Komputer - Dialog Design Style43 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

44 Interaksi Manusia Komputer - Dialog Design Style44 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

45 Interaksi Manusia Komputer - Dialog Design Style45 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

46 Interaksi Manusia Komputer - Dialog Design Style46 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

47 Interaksi Manusia Komputer - Dialog Design Style47 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

48 Interaksi Manusia Komputer - Dialog Design Style48 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

49 Interaksi Manusia Komputer - Dialog Design Style49 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

50 Interaksi Manusia Komputer - Dialog Design Style50 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


Download ppt "Interaksi Manusia Komputer - Dialog Design Style1 Interaksi Manusia Komputer Dialog Design Styles."

Similar presentations


Ads by Google