Continuous Representations of the Objects and Actions of Interest With Meaningful Visual Metaphors

    L542 (6824): Class 8
    Katy Börner, SLIS

    Direct Manipulation

    Readings: [Dix et. al, 1998], chapter 6: "Models of the user in design"


    Presentations Today:
    Shneiderman, B. and Maes, P. (1997) Direct manipulation vs. interface agents, Interactions, Volume 4, Issue 6, pp. 42-61. (LI, XINWEI)


    Direct Manipulation (1980s)

    • replacement of command languages by manipulation of visible objects
    • rapid feedback
    • visibility of objects of interest
    • reversibility of all actions
    • every user action is legal operation
    • good (dektop) metaphors are essential
    • Psychology literature cites the strengths of visual representations in terms of learning speed and retention - interfaces are easy to learn and use and difficult to forget

    Example:
    Driving a car by manipulating the steering wheel and pedals. The car responds immediately to your actions, and these responses are immediately evident. If you are making a mistake such as turning too sharply, you can quickly recognize this and perform a corrective measure.

    Intermediary style of interaction

    • traditional keyboard based, command driven interfaces
    • agent-based approaches

    Same Example:
    You sit in the backseat of the car giving a stranger directions. Further, imagine the stranger possessing poor interpersonal skills and having a limited vocabulary. You've lost the feel for the road and you don't have a direct view of where you are going. Worse yet, you have to rely on a stranger who, if they don't receive explicit directions using particular phrases in a fixed order, idles in the middle of the road or takes you to unfamiliar places from which you don't know the way out.

    Shneiderman's criteria for direct manipulation

    • Continuous representation of the object of interest
    • Physical actions or labeled button presses instead of complex syntax
    • Rapid incremental reversible operations whose impact on the object of interest is immediately visible.

    Basic Interaction Styles

    There are three basic metaphors for how we interact with things, and which therefore underlie all of the interaction metaphors we build:

        Manipulation / hands / physical objects you do things with

    • Desktop metaphor
    • Notebook metaphor


        Navigation / feet / locations and traveling

    • Web
    • 3D worlds


        Conversation / mouth / people you talk with

    • Command language
    • Conversational interactions
    • Agents

    Good Metaphors are Essential!
    and allows the user to transfer skills from real-world experiences.

    Direct manipulation simulates the real world where the user employs tools to perform tasks on physical objects.
    Direct manipulation connects an action to an observable response from a component. Using direct manipulation, the user gets an immediate visible result from each action.

    Examples:

    • A PushButton should be used to start an operation. A PushButton must contain either a text or graphic Label that indicates the operation of the button.
    • A Scale should be used to select a value from a range. This component should be composed of a slider, moving within an element that indicates the size of the range, called the trough, and a Label that indicates the current value. The position of the slider indicates the value relative to the range. A Scale can also have buttons with arrow graphics for moving the slider.


    The direct manipulation model is an object-action model. That is, you first select an object or group of objects, then you perform an action on the selected objects. An object-action model allows the user to see what elements will be acted on before performing an action. It also allows multiple actions to be performed successively on the selected elements.

    Although it is important to allow direct manipulation of the objects in your application, you must also support methods for interacting with your application by keyboard-only users.

    These methods can also be used by advanced users to perform some tasks more quickly.

    Provide Rapid Response

    • Make your application respond to input as rapidly as possible.
    • The immediacy of the visual response is crucial to the experience of direct manipulation.
    • When using components, provide the application's response immediately and in proportion to the component's actions.
    • The application must also have a consistent speed of response.
    • Delays, disproportionate responses, or inconsistent responses can render an otherwise well-designed application unusable.
    • Performance problems make it difficult for the user to concentrate on the task at hand.

    Provide Output as Input

    Another feature of direct manipulation is that the output of one part of an application or the output of the application itself is also available as input. For example, if one action produces a list of filenames, another action can select them for use elsewhere.

    The user manipulates objects by locating them and clicking on them rather than typing in their names. Design so that the only time the user needs to type a name is to create an object.

    A well-designed application reduces the amount of information the user needs to memorize to perform tasks.

    Keep Interfaces Natural

    You can extend the concepts of giving the user control and using real-world metaphors to arrange your application so that tasks flow naturally. Users need to be able to anticipate the natural progression of each task; through this anticipation, they are able to complete tasks more quickly.

    Each screen object needs to have a distinct appearance that the user can easily recognize and quickly understand. At the same time, the style of the interface needs to graphically unify these elements and ensure a consistent and attractive appearance at any screen resolution.

    Make Navigation Easy

    Make navigation easy by providing a straightforward presentation of the overall work area and the mechanisms for moving through it. Moving easily and quickly within the work area gives the user a sense of mastery over the application. For example, ScrollBars are an effective way to indicate the position of the current view in relation to an area as a whole. In addition to providing positional feedback, ScrollBars allow the user to move through the area.

    Arrange elements on the screen according to their use; an optimal arrangement assists the user's decision-making processes and reduces the possibility of errors. The best approach for arranging screen elements according to use is to involve users in the arrangement process. Present screen objects in an orderly, simple, and uncluttered manner.

    Reduce mouse movement to simplify the actions of the user. For example, place secondary DialogBoxes near their parent DialogBox so that when the secondary DialogBox appears, the mouse pointer is over the default PushButton, unless the user needs to see the contents of the original DialogBox. Reducing mouse movement helps make an interface natural because, from the user's point of view, work involves a stream of thoughts, intentions, and tasks (some predefined and some that become apparent during the process) that all relate to some desired outcome or accomplishment. This stream of thought is disrupted when the user has to make unnecessary mouse movements, open and close DialogBoxes, or search for commands.

    Provide Natural Shades and Colors

    Minimize the contrast between screen objects in order to direct the user's attention. Appropriate use of contrast helps the user distinguish screen objects against the background of a window. Very dark screen objects on a light background, very bright objects on a dark background, and bright colors all command the user's attention. If there are many objects with strong contrast or bright colors on the screen, the user will have difficulty knowing where to look first because all these objects compete equally for attention.

    Use color as a redundant aspect of the interface; that is, use it to provide additional differentiation among screen objects. Differentiation also comes from the shape and size of the screen objects. For example, in many parts of the world, stop signs are red octagons. You recognize the stop sign by both its shape and color.

    Keep Interfaces Consistent

    • Similar components operate similarly and have similar uses.
    • The position of components should not change based on context.
    • Components should not generally be added and removed as needed. This makes it difficult to quickly find the desired component. Instead, you should make unneeded components nonfunctional and indicate this by deemphasizing (graying out) their labels.
    • The position of the mouse pointer should not warp.
    • The location of the mouse pointer should be determined by direct manipulation and should not be positioned arbitrarily by the application. Positioning the mouse pointer by the application causes the user to lose track of the pointer.
    • Consistency among applications increases the user's sense of mastery. Experience with one application can be readily applied to another application, creating a positive transfer of knowledge. The task at hand, rather than learning a new application, becomes the focus of a computer session. When applications work in a manner that is consistent with other applications, users enjoy a feeling of immediate confidence in their ability to master the new program. Also, they are pleasantly surprised when trying new functions because, although new, the functions seem familiar.

    Guidelines for communicating from the application to the user

    1. Give the User Feedback

    Feedback lets users know that the computer has received their input. Give users feedback whenever they have selected a component or Menu item by highlighting the component or Menu item in some way. In addition, if certain operations take more than a few seconds, you should let the user know that the computer is working on that operation by providing a message or by changing the pointer to a working pointer.

    2. Anticipate Errors

    Anticipate the errors that are likely to occur. By anticipating errors, you can avoid them in your design, enable the support of recovery attempts, and provide messages informing the user of the proper corrective action. For example, one technique for avoiding excessive error messages is to dim interface components when they cannot be used.

    Context-sensitive help aids understanding, reduces errors, and eases recovery efforts. Help information text needs to be clear, concise, and written in everyday language. Help information needs to be readily accessible and just as readily removable.

    Many users are most comfortable with learning how to use software applications when they use a natural, trial-and-error method. An undo function supports learning by trial and error by minimizing the cost of errors. An undo function allows the user to retract previous actions, and fosters a spirit of exploration and experimentation that is essential.

    3. Use Explicit Destruction

    Explicit destruction means that, when an action has irreversible negative consequences, it should require the user to take an explicit action to perform it. For example, while a worksheet can be saved simply by clicking on a Save PushButton, erasing the worksheet should require clicking on an Erase PushButton and answering a warning question like "Are you sure you want to erase this worksheet?" with a button click in the warning DialogBox.

    Warnings protect the user from inadvertent destructive operations, yet allow the user to remain in control of the application. Warnings also encourage the user to experiment without fear of loss. Operations that can cause a serious or unrecoverable loss of data should warn the user of the consequences and request explicit confirmation.

    4. Avoid Common Design Pitfalls

    • Pay attention to details.
    • Do not finish prematurely.
    • Design iteratively.
    • Start with a fresh perspective.
    • Hide implementation details.

    Examples

    • Display editors and word processors
    • Spatial Data management, eg geographic applications
    • Video Games
    • CAD/CAM
    • Query by example (forms)

    Why Direct Manipulation is Beneficial:

    • WYSIWYG ("what you see is what you get")
    • Visibility (Norman)
    • Spatial, visual representations easier to retain and manipulate
    • Success of direct manipulation -- good mappings (Norman)
    • Everything expressed in high-level problem domain
    • Closeness of problem domain to actions, objects
    • Dealing with objects is more natural, intuitive

    Problems with Direct Manipulation:

    • Content of graphic representation is crucial. How to get the mappings right?
    • Users must learn graphic representation
    • Graphic representation may be misleading
    • Graphic representation may take up excessive display space

    To Do:

    Lab: Usability Lab Tour with Sumitra Das Ray today 10:15am-12:20am.
    Write a paragraph about benefits and problems of using video in experimentation and send it via email to katy@indiana.edu.

    Readings: Barnes and Noble book recommendation feature (which uses Firefly technology)

    Prepare the presentation of your Final Project

bergerbuturears.blogspot.com

Source: https://info.sice.indiana.edu/~katy/L542-S01/class8.html

0 Response to "Continuous Representations of the Objects and Actions of Interest With Meaningful Visual Metaphors"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel