User Interface Styles CIS 376 Bruce R. Maxim UM-Dearborn

User Interface Styles Direct manipulation –GUI (graphical user interface) –WIMP (windows, icons, mouse, pull-down menus) Menus Forms Command language

Direct Manipulation Interface Characteristics Screen objects resemble physical objects Objects arranged in 2-D space Trades perceptual motor operations for linguistic operations Use of recognition in place of recall Expensive to implement

Direct Manipulation Interface Examples Display editors and word processors Spreadsheet programs Spatial and geographic databases Video games and educational simulations CAD and paint type applications Hypertext Office automation software Virtual reality

Direct Manipulation Interfaces Allow Novices to learn basic fundamentals quickly Experts to carry out new tasks Knowledgeable intermittent users to retain operational concepts Error messages are rarely needed Users can assess progress to goals and make changes instantly Users experience less anxiety because systems is understood and actions are reversible Users gain confidence and mastery through their sense of control over the system

Direct Manipulation Concerns Increased system resources Cumbersome actions Weak macro techniques History tracing is hard to log Visually impaired users at risk

GOMS Model for Direct Manipulation Interfaces Basic goal - minimize learning using a metaphoric device Basic method - find relevant object on screen and manipulate Step 1. Search screen for an object to operate on Step 2. Select it for manipulation Step 3. Move object on screen to destination

For direct manipulation interfaces you must ensure: Visual search (steps 1 and 3) works easily to find objects and their destinations Steps 2 and 3 must be fast consistent and easy to learn There must be a direct manipulation metaphor or analogy that is familiar to the user (e.g. desktop)

Problems with Direct Manipulation Interfaces Visual representations are more spread out than simple text - causing "off page" problems Users must learn meaning of components (e.g. icons) which are meaningful to designer and not user Visual representation may be misleading Touch typists do better with a keyboard than with a mouse

The debate concerning text versus icons is an emotional one. The usefulness of icons depends on how quickly user can figure out their meanings.

Icon Design Guidelines - part 1 Represent object/action in recognizable form Limit number of icons Make icon stand out from background Be careful when using 3-D icons Selected icons must be easily distinguished from unselected icons

Icon Design Guidelines - part 2 Icons unique from one another Ensure harmony with family of icons Design animation movement Add detailed information if possible Explore use of icon combinations to create new objects or operations

Five Challenges of Direct Manipulation Programming Sufficient computational generality Access to appropriate data Ease in programming and editing Simplicity in subprogram invocation and assignment of arguments Low risk

Growth Areas for Direct Manipulation Interfaces Home automation Remote direct manipulation Virtual reality

Components for a Successful Virtual Reality Application Visual display Head positioning and sensing Hand positioning and sensing Force feedback Sound input/output Other sensation Cooperative and competitive VR requires networking

Menu Architectures Single Linear sequence Tree Acyclic network Cyclic network

Menu Screen Display Types Text - single key Text - pointing device Icon - pointing device Radio buttons Check boxes Pull-down or pop-up Permanent (e.g. command bars)

GOMS Model for Menu User Task Step1. Search screen for item matching part of task description. Step2. if match then choose menu item else go to appropriate place in menu structure Step3. if task accomplished then return with goal accomplished Step4. go to Step1.

For menu interfaces you must ensure: Search and matching (Step1) is easy Items must be recognizable in terms of task goals Menu structure must reflect task structure Minimum learning required for navigation knowledge required (Step2) Choosing items must be consistent and easy Dealing with failure to match or other error must be consistent and easy Must have only one good navigation method

Menu Architectural Guidelines Breadth preferred over depth for submenus Provide means to move back up menu hierarchy (esp. to top level)

Menu Item Design Guidelines Command set small enough to fit within single menu User always have access to all possible menu items without having to refer to a manual Logical presentation sequences (time, numeric, alphabetic, physical properties, function/task organization, frequency of use, most important first) Icons harder to recognize than words for abstract concepts Avoid screen clutter Don’t assume user will notice subtle cues (e.g. color or border changes)

Making Selection Easy Provide command key bypasses for frequent commands Ensure consistent selection and navigation methods throughout Be aware of Fitt's law considerations for pointing devices

Fitt’s Law Formal statement of relationship between the size of a target and distance that user must move pointing device to hit the target –big targets are hit more quickly than small targets –users move quickly at first and slow down as they home in on the target

Supporting Learning in Menu Interfaces Don’t automatically rearrange menus (e.g. gray out inactive items instead) User mnemonic identifiers Allow BLT type ahead (single key strokes as well as use of pointing devices)

Menu Interface Design Guidelines - part 1 Use task semantics to organize menu Prefer breadth over depth Show position using graphic, numbers, titles, etc. Use menu titles in trees Use meaningful item grouping Use meaningful item sequencing

Menu Interface Design Guidelines - part 2 Make items brief, begin with keyword Use consistent grammar, layout, terminology Allow type ahead, jump ahead, or shortcuts Allow jumps to previous or main menus Consider on-line help and novel selection or display devices

GOMS Model for Form Fill-in User Task Step1. Search screen for next field to be filled in Step2. Move cursor to next field Step3. Figure out what to type and type it in Step4. if all fields correct then indicate you are finished else move cursor to incorrect field and change entry Step5. go to Step1

For form fill-in interfaces you must ensure that: Search (Step1) and thinking (Step3) are easy Cursor movement (Step2) and finished signal (Step4) are consistent and easy to learn Correction methods (Step4) are simple and easy to learn

Form Fill-in Design Guidelines Preserve similarities with existing paper forms Do not force entry order Provide on-screen navigation instructions Use good graphic layout Describe special entry formats Apply validity checks and provide clear feedback on errors

GOMS Model for Command Language Interface User Task Step1. Think of and enter command verb Step2. Think of and enter next argument Step3. if more arguments then go to Step2 Step4. if command is incorrect then correct the command Step5. Signal computer to process the command. Step6. go to Step1

What makes a command language easy to learn and use? Easy command synthesis User can think up command by analogy from previously learned commands Commands conform to simple rules rather than lots of unique special cases

Command Language Design Guidelines Make command terms easy to remember Provide easy command synthesis method and abbreviation strategy Provide simple, consistent command structure Commands should be right grain size Parsimony (no more commands than really needed) Studies show a few commands are used a lot by most users Provide for command reuse (replay, re-entry, macros) Avoid unnecessary distinctions among commands

Command Language Organization Strategies Simple command set Commands plus arguments Commands plus options and arguments Hierarchical command structure (command action, object argument, destination)

Command Language Abbreviation Strategies Simple truncation Drop vowel and use simple truncation First and last letters Standard abbreviations from other contexts First letter of each work or phrase Phonics (e.g. XQT for execution) Cross product languages {verbs} x {objects}

Cross Product Languages {verbs} x {objects} {copy, delete, rename} x {files, directories} cf, df, rf, cd, dd, rd

Dialog Boxes Combinations of all four interface styles (menu, form fill-in, direct manipulation, command line) User task model would also be a composite model

Dialog Box Design Guidelines Meaningful title Top-left to bottom right sequencing Proper clustering and emphasis Consistent language Consistent terminology, fonts, capitalization, justification Standard buttons Error prevention by direct manipulation

Dialog Box External Relationship Design Guidelines Smooth appearance and disappearance Distinguishable boundaries Sized to reduce overlap problems Displayed close to appropriate screen objects No overlap of required items Easy to make disappear Clear directions to cancel or complete operations