Direct Manipulation

•November 1, 2008 • Leave a Comment

The theory of direct manipulation describes interactive systems where the user physically interacts with their operating system. The fundamental feature of such a system is user control. Instead of typing commands and allowing the operating system to act as a strange intermediary, a direct manipulation system allows the user to feel like she is in control, by allowing her to physically interact with files and directories, and presenting a visual representation of the progress and end point.

The term direct manipulation was coined by Shneiderman (1974, 1982, 1983) to refer to systems having the following properties:
1. Continuous representation of the object of interest.
2. Physical actions or labeled button presses instead of complex syntax.
3. Rapid incremental reversible operations whose impact on the object of interest is immediately visible. (Shneiderman, 1982, p. 251)
Direct manipulation interfaces seem remarkably powerful. Shneiderman (1982) has suggested that direct manipulation systems have the following virtues:
1. Novices can learn basic functionality quickly, usually through a demon-
2. Experts can work extremely rapidly to carry out a wide range of tasks,
3. Knowledgeable intermittent users can retain operational concepts.
4. Error messages are rarely needed.
5. Users can see immediately if their actions are furthering their goals, and stration by a more experienced user. even defining new functions and features. if not, they can simply change the direction of their activity.

Early Examples of Direct Manipulation
Hints of direct manipulation programming environments have been around for quite some time. The first major landmark is Sutherland’s Sketchpad, a graphical design program (Sutherland, 1963). Sutherland’s goal was to devise a program that would make it possible for a person and a computer “to converse rapidly through the medium of line drawings.” Sutherland’s work is a land-mark not only because of historical priority but because of the ideas that he helped develop: He was one of the first to discuss the power of graphical interfaces, the conception of a display as “sheets of paper,” the use of pointing devices, the virtues of constraint representations, and the importance of depicting abstractions graphically.

Read More about past Direct Manipulation

Scope, Application, and Limitations

Direct manipulation prescribes a general set of rules that have applications across the field of human computer interaction. Because direct manipulation systems present the user with an easy to use, familiar method of interaction, novices particularly have an easier time with these systems[Margono 87]. For experts, well designed systems can be sufficiently fast, though often using keyboard inputs will allow an expert to work faster [Morgan 91]. Thankfully, dual implementation of these systems is generally not that difficult.

Because the system is familiar and easy to use, novices are also likely to learn more quickly. Since direct manipulation shows the progress of steps, errors occur much less often than they do in command type systems. This fact alone gives users confidence to explore and learn more features of the software more quickly. Because of these benefits, direct manipulation is present in designs from word processing to video games.


The “trash” on the desktop is an excellent example of direct manipulation within computer systems. Users can see both the trash and the files or folders they want to move to the trash. They then physically select the files and drag them to the trash can. While the user is doing this, all of the selected files move as well, illustrating which items the user has selected. When the mouse is placed over the trash, there is a shading indication that it has been selected. The user then has to release the mouse button to move the files to the trash. If there are many files, a dialogue box will show up illustrating the progress of moving files to the trash. Once the action is completed, the files are no longer visible in their original location. The user can change her mind at any time while dragging the files to the trash. Even after placing them there, they can as easily be taken out of the trash and put back in place.

Figure 1: Visual progress of moving a folder to the trash

Applicability to HCI

Direct manipulation has become the method by which most computer users interact with their machines. Since the introduction of the Mac GUI in List and the early Macintosh machines, and slightly later the Windows interface, users have come to expect a mouse with visual and physical interaction with their operating system and software. Direct manipulation is evident in many other areas as well.

Video games are a prime example. With only a small amount of training, users pick up controllers with buttons and knobs that generally map very well to the way the character is moving in physical space.

The extension into virtual reality is an easy one to make. In these situations, users are surrounded by an environment. In environments like the CAVE at Argonne National Laboratories [Cruz 93], they can literally move around in that physical space, and visualize with normal movements. Since objects are oriented in 3-dimensional space, actions easily map to natural movements. Users can physically reach out, and using the provided hardware, “grab” an object and move it somewhere else.

Other virtual reality systems detect the 3-dimensional movements of the user and adjust accordingly. Remote surgery provides a good example. A surgeon may wear a head set to detect his position and adjust a camera view in the remote site. Gloves detect his exact position and movements, allowing a robotic counterpart on the remote end to replicate his exact movements. In this case, the surgeon is using direct manipulation as a method for controlling the remote system.


User Interface Tools Cont…

•November 1, 2008 • Leave a Comment

There are many tools you can use to help you building the Interface.

The commonly use to draw diagram is UML.

The Unified Modeling LanguageTM – UML – is OMG’s(Object Management Group) most-used specification, and the way the world models not only application structure, behavior, and architecture, but also business process and data structure.

We only discuss a bit of UML here.

I only can show you a couple of examples

You can learn more

at here or  here

There are also a lot of tools to build the visual interface, such as Adobe Flash, Adobe Director, Microsoft Visual Studio, Visual Fox Pro, Eclipse and many more.

User Interface Tools Cont…

•November 1, 2008 • Leave a Comment

Adaptation to the available screen size is a recurrent problem in graphical user interface design. On the one hand it is not trivial for a designer to specify how a Graphical User Interface (GUI) should adapt; on the other hand it is very hard to construct a predictable adaptation algorithm that never leads to undesired user interface presentations. In this paper, we present a technique to design by example user interfaces that automatically adapt to the available screen size while the designer and eventually the end user still have full control over the adaptation during runtime. This design by example technique could lead to novel tools that lower the threshold for designers as well as developers to design adaptive user interfaces.

User Interface Tools

•November 1, 2008 • Leave a Comment

Many technological innovations rely upon User Interface Design to elevate their technical complexity to a usable product. Technology alone may not win user acceptance and subsequent marketability. The User Experience, or how the user experiences the end product, is the key to acceptance. And that is where User Interface Design enters the design process. While product engineers focus on the technology, usability specialists focus on the user interface. For greatest efficiency and cost effectiveness, this working relationship should be maintained from the start of a project to its rollout.

When applied to computer software, User Interface Design is also known as Human-Computer Interaction or HCI. While people often think of Interface Design in terms of computers, it also refers to many products where the user interacts with controls or displays. Military aircraft, vehicles, airports, audio equipment, and computer peripherals, are a few products that extensively apply User Interface Design.

Optimized User Interface Design requires a systematic approach to the design process. But, to ensure optimum performance, Usability Testing is required. This empirical testing permits naïve users to provide data about what does work as anticipated and what does not work. Only after the resulting repairs are made can a product be deemed to have a user optimized interface.

The importance of good User Interface Design can be the difference between product acceptance and rejection in the marketplace. If end-users feel it is not easy to learn, not easy to use, or too cumbersome, an otherwise excellent product could fail. Good User Interface Design can make a product easy to understand and use, which results in greater user acceptance.

Managing Design Process cont…

•November 1, 2008 • Leave a Comment

Development Methodologies

– Problem: Many software projects fail due to communication deficits between developers and clients/users (gab between business/user and IT/developer)
– Solution in the context of HCI: Apply a user-centered design, starting in early stages of the development process. This helps aligning the business/user needs with product functionality
– Consequence: Less problems with the system, reduced maintenance costs, reduced time to learn, increased speed of performance, etc.

– But how do we achieve this? Many common/traditional development methodologies do not focus on usability

– Solution: Use a methodology that is specifically suited for user
centered design (e.g., LUCID)

– The LUCID (Logical User-Centered Interactive Design) is essentially a development methodology or framework for scheduling projects, which suggests various stages of the interface development process:
1. Stage 1: Envision
2. Stage 2: Discovery
3. Stage 3: Design Foundation
4. Stage 4: Design Detail
5. Stage 5: Build
6. Stage 6: Release
– The LUCID employs rapid prototyping and interactive usability testing (CH 4) and heavily relies on UI building tools (CH 5)
– The six stages need to be individually adapted for every project

LUCID – Stage 1: Envision
Main objective: Develop a product concept
– Establish the design team, prepare a project plan and calculate your budget
– Develop a clear, shared product vision among all stakeholders
– Define business objectives and needs
– Manage technical constraints
– Identify and deal with potential problems that could influence the development team’s ability to collaborate
– Begin the design process at “concept sketch level”

LUCID – Stage 2: Discovery
Main objective: Learn about the needs and skills of users
– Develop a clear understanding of the characteristics of each distinct segment of the product’s user
– Understand the tasks users perform, the information they need, the terminology they use, their priorities and mental models
– Analyze the gathered data and create the product’s requirements
Possible means for stage 2: Participatory design sessions, workflow scenario construction

LUCID – Stage 3: Design Foundation
Main objective: Provide an early “key-screen” prototype
– Develop and validate the basic conceptual design of the product
– Develop a visual look for the product
– Present the completed design as a key-screen prototype
Note: A key-screen prototype incorporates the main navigational paths of the system. Its goal is to
demonstrate the proposed system to the user, allow for feedback and refinement. Key screen prototypes may also be used for usability testing.

LUCID – Stage 4: Design Detail
Main objective: Particularize the UI design
– Complete a style guide containing both the graphic design and UI policy decisions
– Flesh out the high-level design into a complete specification
– Conduct usability evaluation of specific screens or workflows
– Create detailed layouts for each screen and detailed specifications for each element of each screen
Important means for stage 4: UI development tools

LUCID – Stage 5: Build
Main objective: Build the actual and final product
– Answer questions and support developers during coding, redesign screens if necessary
– Conduct usability evaluation of critical screens – if needed
– Support the build process through review and late-stage change management

LUCID – Stage 6: Release
Main objective: Release the final product
– Develop a rollout plan to support the new product
– Conduct usability evaluation of “out of the box” or installation experiences
– Measure satisfaction
Important means for stage 6: Surveys, interviews, observations, etc.

Managing Design Process

•November 1, 2008 • Leave a Comment

After you learned the principles. Now we’re taking to a next step further.

The Three Pillars of Design

In order to achieve successful UIs base your design process on 3 issues:
-Guidelines Documents & Processes
-User Interface Software Tools
-Expert Reviews & Usability Testing
Note: No guarantee of success is given but relying on these issues most likely will improve
the quality of our UI

a. Guidelines Documents & Processes

Crucial: Generate a set of guidelines, possibly early in the development process; they must be available in
written form and need to be respected and applied by all project members.

Goals/Purpose of a guidelines document:
– Provide a social process for developers
– Record decisions for all parties to see
– Promote consistency and completeness
– Facilitate automation of design
– Should be designed in a way that separates multiple levels(rigid, accepted, flexible)
– Should contain announcements regarding the 4Es (governance)

Some general issues are:
– Words, Icons, Graphics (e.g., terminology, abbreviations, fonts,colors, buttons, etc.)
– Screen layout issues (e.g., menu selection, forms, feedback,margins, data entry- and data display-formats, etc.)
– Input/Output devices (e.g., keyboard, display, sound, response times for tasks, alternatives for users with disabilities, etc.)
– Action sequences (e.g., DM, command syntax, semantics, shortcuts, error handling procedures, etc.)
– Training (e.g., online help, tutorials, etc.)

When preparing/working with guidelines always consider the 4Es:
– Education: Provide training opportunities, give changes to discuss guidelines
– Enforcement: Establish procedures that facilitate guidelines distribution and communication among stakeholders, establish
procedures that ensure enforcement – Exemption: Allow for exemptions, install a process that allows for rapid adaptation if necessary
– Enhancement: Constantly improve/refine guidelines (where appropriate and possible without affecting the progress of the project too much)

b.User Interface Software Tools

– Help to provide the user and developer with a realistic impression of how the final product may look
like/function (e.g., a prototype for a menu system)
– Such prototypes are naturally limited (e.g.,restricted to only 1 or 2 tasks)
– Examples: Macromedia Director, Flash, Visual Basic, JBuilder
– Note: Don’t confuse such tools with general purpose software development tools (e.g., Eclipse IDE).

c.Expert Reviews & Usability Testing

– Necessary in order to ensure usability and high quality UIs
– Examples: Early pilot testing (possibly several components individually), expert review methods, tests
with the intended users, surveys, or automated analysis tools
– Again, what procedures to choose and how they shouldbe shaped individually greatly depends on the nature of the project (e.g, number of expected users)

HCI Principle’s Cont…

•November 1, 2008 • Leave a Comment

Basic HCI Principles

Principle 1: Recognize User Diversity

• Simple and obvious – nevertheless in reality extremely difficult
• Example: consider an online travel agent
– Travel agent booking many flights a day – everyday
– A teacher organizing a field trip (once a year) and making bookings for a large group
– A business person changing bookings while travelling
– A family looking for a package holiday

• Basic concepts to structure the problem:

a.  Usage profiles

• “Know thy user”
(Wilfred J. Hansen, User Engineering Principles for Interactive Systems, 1971)
• Starting point for design: What is the background of the user?
– Different people have different requirements for their interaction with
• Issues to take into account:
– Goals, motivation, personality
– Education, cultural background, training
– Age, gender, physical abilities, …
– Multiple user communities, various combinations of background
• Well-known and frequently used classification:
– Novice users
– Knowledgeable intermittent users
– Expert frequent users

b. Task profiles

• The goal: Find out what the user is trying to do!
– Needs of users, goals and resulting tasks
• Supported tasks should be determined before the design starts
– Determine granularity of atomic tasks: Flexibility vs. Ease of use
• Functionality should only be added if identified to help solving tasks
– Temptation: Unneeded functionality should never be added just because it is
“cheap” to achieve!
• Frequency of actions (relative to user profiles) leads to design choices
– The more frequent an action, the easier its invocation
– Example:
» Very frequent actions invoked by special keys (e.g. DEL)
» Intermediately frequent actions invoked by keyboard shortcut, special
» Infrequent actions invoked through menu selections, form fillins

Task Frequency Example

• Assumption to change the Font Type style and size
• For users with different needs the customization is available

Principle 2: Follow the 8 Golden Rules

Already disscused it…

Principle 3 : Prevent Errors

-Design carefully to prevent a problem from occurring in the first place.

-Help and documentation

-Although the system should be able to be used without documentation, any help and documentation should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.