Abstract 1 1 Introduction 2


User Interface Design Options



Download 324.2 Kb.
Page9/20
Date10.08.2017
Size324.2 Kb.
#31133
1   ...   5   6   7   8   9   10   11   12   ...   20

4.2User Interface Design Options


Early computer displays were limited to character data. Graphic displays were developed and became common with the emergence of personal computers. Work at Xerox PARC led to the development of the icon to represent objects. Menus and other control objects were also developed to allow for graphical selection of actions. Many applications use graphics to present data, such as Computer-Aided Design (CAD), geographic information system (GIS), etc. Basic graph, chart, and diagram drawing applications are wildly used in business.
The Window, Icon, Mouse and Pointer (WIMP) interface is approaching universal use. There are many components of window systems including data area, menu, and control bar. The data area will be addressed in this discussion; other components will not. Other types of interfaces, including pen based, voice input, and 3D displays are still under development.

4.2.1Design Approaches to Document Space Presentation


In most applications, the interface is designed by the software developer. In a navigation subsystem, one piece of this interface involves the presentation of information about a document space. The quality of the presentation will depend on the expertise of the designer. Modern development methodologies such as user-centric design and rapid prototyping address how to design the user interfaces for collaborative and highly interactive interfaces. At the same time, many guidelines provide the kinds of details that might be needed in a document navigation system.
Some applications allow users to employ a tool to produce a presentation by themselves. For example, Excel provides tools to create many kinds of graphs. Many argue that these kinds of environments are too complex for users, and that it is still the responsibility of the designer to create a good user interface and clear presentation of data. In this case, the design problem is further complicated by the need to estimate the skill level of the end user of the system. Finally, some applications use data and other specifications to create a custom presentation based on some guidelines that may then be adjusted by the end user.
Simple applications provide some fixed presentation of data. The utility of applications can be improved by providing for communications between related simple applications. For example, drag and drop across applications in MS Windows™ improves the flow of work. Applications may use parameters to control the presentation that they provide. Offering multiple windows and changing the mode of display are common strategies. For example, NotePad™ from Microsoft™ can to present text data in only one form. On the other hand, Microsoft Word™ can to present a document in normal, outline, or print layout mode.
User generated presentations of data are used in scientific visualization, information visualization, and general graphics applications. From given data, the user can construct presentations. However, the presentations are by-and-large output only. These presentations may allow simple interaction, such as geometrical manipulation, but not navigation. Another class of these applications is designed for programmers, as tools for creating user interfaces.
Systems that automatically generate data presentations include APT (Mackinlay, 1987), BOZ (Casner, 1991), SAGE (Roth, Chuah, Kerpedjiev, Kolojejchick, & Lucas, 1997). These systems are based on knowledge-based systems derived from cognitive studies and a lot of design guidelines. Some criteria and ranking of values are used to select an optimal presentation. Mackinlay (1987) used data type as the main criterion. Casner (1991) extended Mackinlay's concept by adding a task analysis component. Tasks were encoded using a task definition language, and were employed as one criterion in generating a presentation. The system of Roth et al. (1997) uses a fixed dialog to generate a presentation. The system also supports integration of generated presentations. The interactions include finding, partitioning, filtering, copying and combining. The level of data detail is controlled by drill-down and roll-up interaction techniques.

4.2.2Mapping Document Attributes to Display Spaces


The visual objects on a screen may be said to constitute a visual language. Visual languages describe objects, object properties, objects relations and object operations. Marcus (1990) gives a definition of “visible language” as the graphical techniques use to communicate. The dimensions of visible language are identified as layout, typography, color, and texture, as well as imagery which includes signs and icons, animation, sequencing, visual identity, and sound.
Lohse, Biolsi, Walker, and Rueter (1994) propose the following taxonomy of visual representations: graphs, tables, graphical tables, time charts, networks, structure diagrams, process diagram, maps, cartograms, icons, and pictures. The above taxonomy was derived from a sorting experiment.
A simple taxonomy is used in this discussion. Presentations are textual or graphical. A picture type, i.e. an image of an actual physical object, will not be included because it is unlikely to be used as a data encoding method. Graphic presentations may be static or dynamic. A dynamic graphic is an animation. Animation may be used to display space over time.
There are differences in how humans perceive text, graphics, and pictures. Text recognition, in humans, is slower than graphic and picture recognition. However, both graphic and picture detail may be entirely ignored. Graphic simplification of pictures has been proven easier to recognize and remember. Graphic presentations can be used to convey abstract information, as is the case for graphs and charts. A graphic presentation has syntactic rules and semantics. Graphical displays may not be easy to interpret; studies by Preece (1983) show that graphic interpretation is not straightforward.

4.2.2.1Text


Text is commonly used to present information. The content of a document is made up primarily of text. Much of the data about a document space has a normal text presentation, e.g. file size, author, etc.
Text properties can be used to encode data properties as well. Font family, stress, slant, size, color, and position can be used to encode attributes of objects. They are commonly used in a document by the author to emphasize the structure of the document.
Text has a natural orientation and flow in space, e.g. the English language is from left to right and top to bottom. Using different orientations makes test difficult to read. There are certain sizes of text that are suitable to read, not too small or too large. These issues constrain the creation of a screen layout when presenting texts. Spatial layout of text may be used to present relations between words and phrases, such as in a list of items and tables.

4.2.2.2Graphics


Graphical presentation may be considered as consisting of the graphical objects themselves and their layout. A graphical object has a number of attributes depending on the complexity of the object represented. The layout may be viewed as a location in space-time dimension in a physical space. Description of a layout may be absolute or relative. In current display technology, a layout in 3D will be mapped to a 2D display. Benedikt (1992) uses the term intrinsic dimension for object attributes and the term extrinsic dimension for a layout. Card, Mackinlay, and Shneiderman (1999) described a visual structure as composed of a spatial substrate, marks, and the marks graphical properties. A spatial substrate may be classified as a nominal axis, ordinal axis, or quantitative axis. The elementary types of marks are points, lines, areas, and volumes. The graphical properties of marks depend on their type; for instance, the “line” type will have a length property. Other graphical properties of marks are retinal properties including color, orientation, texture, and shape.
A simple type of graphical object is a marker, used in many types of graphs. A marker is used to identify the existence of an object to present data for extrinsic encoding. Conceptually, “a point,” one kind of marker, has no intrinsic dimension. It is common for a marker to have some graphical attributes, including color and shape.
Simple graphical objects such as lines, points, and shapes may be used to create more complex graphical objects -- icons. Horton (1994) defines an icon as a small visual symbol. He discusses other definitions from various fields and reviews many types of visual symbols, e.g. Semantography and ISOTYPE. An icon is used not only to represent an object but also to represent an action such as “cut.” Icon systems may include syntactic rules for combining graphical objects on an icon to represent a specific compound meaning. For example, a program and a file that is generated by that program may share a similar graphic. The file icon will have a file picture added. Tudor (1994) showed that the icons that look like the objects that they are designed to represent had highest mean recognition scores and preference rating. Byrne (1993) showed that the searching task is faster when the icon is simple and easy to discriminate. Complex icons were shown to be less effective than blank icons in this search task experiment.
Compound objects may be created based on complex rules to allow the encoding of multiple data attributes within a single object. These graphics include Chernoff faces, TimeWheel and InfoBUG (Chuah & Eick, 1997), Color Icon (Levkowitz, 1991) and stick-figure icon (Levkowitz & Pickett, 1990). These types of graphical objects are also called glyphs.
In many systems, the spatial layout of graphical objects is not used to encode data. An icon is freely arranged by the user in some space (2D or 3D). The system may provide some arrangement functions. For example, in the MS Window file manager, the files can be freely arranged by the user, or they can be arranged by name, size, or other attribute.
The spatial layout of objects commonly implies the relations among data in terms of distance and clustering. Many presentation systems use this fact and try to present related data in close proximity to each other. However, it was proven that the optimal spatial arrangement problem by similarity of multiple variables is NP-complete (Ankerst, Berchtold, & Keim, 1998).
Graphs and charts use spatial dimensions, which also include graphical object attributes such as size, length, angle, and shape to encode values. Common graphs include X-Y graphs, bar charts, and pie charts. In general, graphs show relations between data items according to two to three attributes. The relations appear from the data itself based on the spatial property that is formed on the display.
Diagrams use spatial dimensions in a partially ordered manner. Relations among objects in diagrams are commonly explicitly presented by connection lines. The objects are represented in some simple symbolic form. The layout of objects in diagrams conveys information such as a nearness relation and a group-cluster relation. Diagrams are commonly used to present network data, which is also called graph structure in mathematical terms. There are many algorithms used to create diagrams. Display constraints have been set in order to create a nice-looking network display, for example, a minimum of cross-links, avoidance of overlapping nodes, minimum link length, etc. Algorithms to optimize diagram layout in many constraints are intractable, NP-complete (Brandenburg, 1987). Heuristic methods and relaxed constraints are common in implementation. The classification of graph structure topology, with extensive treatment of the aesthetics of diagram construction can be found in Beccaria, Bertolazzi, Battista, and Liotta (1991)
Maps are usually used to present geographic objects by their location. Other properties corresponding to location may be added and encoded by markers, graphs, or map area color-coding.

4.2.2.3Animation


Animation adds an additional display dimension that brings time into easy focus. Just as it is easier to see the difference between two objects along the X or Y axis, it is possible to see differences easily in the temporal dimension. With careful selection of attributes to be displayed, it is possible for animation to be among the most effective display techniques for showing causality, which is by definition time-dependent. Animation can also be effective in compressing large amounts of data into a very small and reasonable time-space display. At a refresh rate of 30Hz, 30Mbytes of data could be passed through an 8 bit 1000 x 1000 pixel display per second. Theoretically, any value can be mapped into the time attribute. However, it is more convenient to map some time-related data in the time dimension of an animation. Other aspects of animation display include duration and frequency. For instance, some attribute of an object may map to the blinking frequency of the object, e.g. the older an object is, the faster it blinks.

4.2.3Mapping Issues: Attribute and Display Interactions


One view of presentation is a mapping of data into graphical objects and graphical attributes. The set of possible mapping schemes is huge. It is useful to iterate some of the problems that may be encountered in displaying data that is not carefully mapped to the display. There are at least six major issues that have to be addressed in developing a mapping scheme:

  • too many dimensions to be displayed -- reduction of the attribute set size to a reasonable number

  • incidental or misleading information mapping -- choosing the right data and display types

  • implied or lost data resolution-- choosing the right discrimination

  • impossible discriminations -- paying attention to task/perceptual capabilities

  • ambiguous encoding -- paying attention to unintended encoding

  • data loss in the display -- paying attention to the limits of the hardware

Each of these is described briefly below.
Benedikt (1992) proposed principles for mapping data into cyberspace. One principle suggests that the mapping should create maximally differentiated graphical objects when data are different. Spring and Jennings (1993) suggest that data dimension type should be mapped as closely as possible with visual dimension type. Mackinlay (1987) addresses the expressiveness of a graphical language when the language encodes all and only the facts in the data. He also suggests that the effectiveness of a graphical language depends on perception on graphical display property. The encoding methods can be ranked by accuracy of perception task of each data dimension type. The highest ranking is recommended as the encoding method.
Too many dimensions

When the number of attributes to be displayed is high, the fixed number of dimensions available on the display can present a problem. Additionally, even if all the attributes can be displayed, correlation between various attributes may result in an implied causality in the display. Data analysis techniques should be applied to remove unneeded attributes. Task analysis can indicate the important attributes to be displayed.


Misleading information mapping

We begin with a statement that is implied but not explicitly stated above about the data type and discriminability mapping rules. Mapping nominal data to an ordinal or interval dimension will imply characteristics of the objects that are not true. For example, if the nationality of a publication is mapped to size, there is some implication that one country's publications are “smaller” than another's. Similarly, if age is mapped to hue value of color, there is an implication that there is no ordering to age.


Lost data resolution

Mapping data requiring fine discrimination to a dimension that does not allow fine discrimination results in a data loss. In contrast, mapping low discrimination data to a high discrimination dimension can result in false distinctions. A screen has some limits both in size and resolution. Holding in abeyance for the moment the fact that the screen may be a viewport onto a larger space, we find a limit of about 1,000,000 pixels on modern screens. While the resolution of these individual pixels on a true color display is theoretically 224, (16million) colors, the reality is that most humans would have trouble discriminating more than 256 colors. With improvements in display size and resolution, human visual acuity will set the upper bound of displayed data density.


Impossible discriminations

Having suggested some simple measure of resolution, it is important to note that perceptual sensitivity varies widely based on the specific task. Identification, comparison, and recall all have differing levels of sensitivity. The human factors and cognitive science literature record a variety of different studies on visual sensitivity. Among the factors that have been studied are:



  • The threshold of “just noticeable differences” for display attributes such as position, length, size, etc.

  • The variation in “just noticeable differences” dependent upon the intensity of signal.

  • The ability to discriminate absolute and relative values. (It is easier to discriminate values when they are side by side than when we need to remember and make a judgment about the values.)


Ambiguous encoding

There are a number of situations in which displayed information may carry unintended information. Consider for example a hierarchical display of the files in a directory. The files must be listed in some order. It is possible that the order in which they are presented may imply some meaning that is not actually present. Ambiguity may also be introduced when the complexity of the encoding is high, for example, if the meaning of one display attribute changes based on the value of another attribute; e.g., for active documents, the hue represents X while for inactive documents, the hue represents Y. Interaction between encoded attributes may also lead to ambiguity; e.g., shape and size represent two attributes: when size is small, shapes become indistinguishable or disappear.


Data loss in the display

If a document attribute causes data to be mapped into exactly the same location as previously stored data, the existing data may be lost. An example would be an XY graph plot of data points which have the same value for X and for Y. Ideally, some indicator will be in force to indicate the existence of multiple, superimposed objects. Nonetheless, occlusion and object overlap present potentially serious problems of data loss. In a similar fashion, data that is plotted outside the clipping boundary of the screen is lost.


4.2.4Interaction


The primary method for interacting with a display is the use of a mouse or keyboard to control some combination of scaling, translation, and rotation to achieve various effects. When interactive techniques are used, the screen becomes a viewport into some display space. Interactions with navigation tools involve locomotion or manipulation of the presentation. In the following sections, global change, local change, multiple views, and object manipulation will be discussed.

4.2.4.1Global manipulation


When objects are mapped into a screen or window space, it is possible that the full set will not fit in the given display space without crippling the value of the display. Given the limited space for display, graphical transformations can be used to show various objects. These manipulations help in the following ways: to solve the clipping problem by allowing panning (translation); to solve the occlusion problem by changing the view point (rotation); and to solve the resolution problems by zooming (scaling). A few of the more common techniques are:

  • Pan and Zoom: Given an unlimited virtual space (2 dimensional), this technique allows the user to pan across the space and zoom in on a given point. The manipulation changes the view of the display space.

  • Flyby: When the screen provides a viewport onto a 3D space from a given point of view, translation along with rotation and scaling of the space can be used to change the user’s view of the space. Done effectively, this provides a virtual reality kind of simulation of a flyby of a virtual space.

  • Distortion plane: Given a space that shows all objects at once, it may not be possible to see any particular object well enough. To solve this problem, we use a non-linear scaling of the plane. A summary and unified theory of distortion-orientation of a presentation can be found in Leung and Apperley (1994). Examples of distortion plane techniques include:

  • Perspective wall: uses flat zoom

  • Fish eye: applies parabola zoom function

  • Multi-points distortion: The distortion does not have to be a single point at center. It can be many points at any place on the display space.

  • Zoom with more attributes: When zooming, objects spread apart in space; that space can be used to display more attributes, i.e. increasing detail of objects. It is also called semantic zoom.

  • Change mode display. This technique changes the presentation. Most simply the same objects and perspectives are presented, but using a different encoding scheme from the first one, using the same screen space.

4.2.4.2Local manipulation


Several different kinds of local manipulation are possible as well. Generally, they are used to make views on a data set clearer. They include the following:

  • Object repositioning: A given object or set of objects in a display may be moved. This process may reveal other objects or clarify other relationships. Moving depends on the encoding scheme. Free space moving is allowed in non-XY encoding. Systems using XY encoding may enforce a relocation scheme. It is also possible that selected objects in a view may have the impact of causing other objects to react, making information about these objects available as well.

  • Object re-rendering by scale manipulation: The scale used on a given dimension may be changed. For example, the x dimension may be shifted from a linear to a logarithmic scale, changing the location at which objects appear. Similarly, the mapping of the color attribute of a document may be shifted by a technique such as histogram equalization in order to better display the difference among clustered objects.

  • Expanding and collapsing: It is commonly used in hierarchical structures; the children may be shown or not, depending on interaction at the parent level.

4.2.5Multiple-Views


Multiple views of the data set can be used to reduce ambiguity. The views can be differentiated in several ways. They can be viewed simultaneously or sequentially. They can be different presentations of the same data set or consonant presentations of different data sets. In this latter case, the data sets can be disjoint, overlapping, or subsets. Of course, none of these are either/or possibilities and several of the conditions can be in force at a given point in time. A few of the more interesting multiple views are:

  • Multiple Window Views

  • Global View: a window provides an overview of some space or data set and an indication of what portion of the overall view is being displayed in a second window.

  • Object/Attribute View: a window provides details of the attributes of a selected object in the second display.

  • Single Window Views

  • Data Delta View: a window shows a different view of the same scope of space, and attempts either by temporal proximity or some other animation method to show the displacement of the data objects.

  • Drill Down View: a window shows a set of objects and has rules for expanding the objects. When a selected object can be expanded, the results of the expansion either replace or are added to the original window.

4.2.6Sample Interaction Techniques


There are virtually unlimited combinations of encoding scheme and interaction. Many of the encoding schemes and interactions are defined by the developer. Some popular interaction techniques are:

  • Dynamic Queries: Dynamic queries, developed by Shneiderman (1993), is an interactive display with controllers for direct-manipulation of queries and results. Controllers are created which are bound to a range of values of interest corresponding to an attribute. The presented data changes dynamically as the controller is manipulated in a bounded range.

  • Mural: Mural is a scheme that provides an overview presentation to be fit on the screen (Jerding & Stasko, 1995). The Mural view is a miniature of a larger content that cannot be viewed without losing detail or is not readable in a single display space. The display space is condensed; therefore, a single dot or Mural view may present multiple data points from the original display. A secondary encoding, such as color dimension of pixels, may be used to present additional data.

  • Magic Lenses: A Magic Lens uses the concept of spatial sensitivity. It mimics a magnifying lens. Magic lenses are areas which are superimposed on top of another presentation. Many functions can be applied to lenses. What is shown on the lens is a function of the lens's position (Stone, Fishkin, & Bier, 1999).

  • Pad and Pad++: Pad uses zooming and panning as a main interaction (Perlin & Fox, 1993;Bederson & Hollon, 1994). The data first appear at a certain magnification factor. Zooming in shows objects in a bigger size, with more detail, or with different detail (semantic zooming). An object in Pad space is 3D, X-Y coordinate and depth. At a certain zoom factor, objects that have a certain depth will appear.

  • Furnas' Fisheye: Furnas (1981) provides a view combination showing both overview and detail; using zooming, an overview structure is not visible when viewing detail. Using multiple views, it is difficult to relate the information in both views. The fisheye provides a combination of overview and detail views in a single view. The objects of interest will be visible and dynamically change according to the focus point. By using the distance metaphor, the focal object will appear closer than other objects. It is a basis concept of distortion presentation of space by “degree of interest” and it also called “Detail+Context” or “Focus+Context.” Formal description and framework of “Focus+Context” is in Björk, Holmquist, and Redström (1999).

Download 324.2 Kb.

Share with your friends:
1   ...   5   6   7   8   9   10   11   12   ...   20




The database is protected by copyright ©ininet.org 2024
send message

    Main page