h9

Direct Manipulation at a glance

Site Genre: Pattern Group h

magnify imageFigure H9.1
Customers can click on a subject header in the Yahoo! Mail interface to open an e-mail or drag it to another location.

Background

Direct manipulation refers to the ability to manipulate items on a Web page, often by dragging, providing an immediate sense of feedback and control. This technique is often used to simplify complex customization, data organization and manipulation, and control features. Although ubiquitous in most desktop applications, direct manipulation is less commonly found on Web pages, and it is typically implemented in genres that can most benefit from it, especially WEB APPS THAT WORK (A10). Direct manipulation can also exist within or between CONTENT MODULES (D2), and it can also serve as a way to move FLOATING WINDOWS (H6). A direct-manipulation Web interface can be more complex to program, but it can also simplify your system by reducing the number of pages in the site, as well as improving the customer experience.

Close

PROBLEM

Site customization, managing sets, changing views and layouts, and other multistep actions and tasks can be difficult for customers to accomplish by only clicking on links and buttons.

buy the book to find out more

SOLUTION

magnify imageFigure H9.7
Direct-manipulation techniques can simplify customers’ interaction with visual elements by giving them immediate feedback and control.

Create direct-manipulation interfaces when visitors must manage sets, groups, or folders containing a large number of items, or if they’re editing designs, layouts, and views. When creating movable objects, think carefully about which part of the object a customer must grab to move it. Provide visual cues to an object’s functions by using familiar interface elements, such as title bars, file folders, or handles, and by changing mouse cursors. Provide instructions for first-time customers so that they know how to perform these direct-manipulation functions.

Other Patterns to Consider

Many common Web page actions and PPROCESS FUNNELS (H1), including product configurators and page customization of CONTENT MODULES (D2), can benefit from the direct control and feedback provided by direct manipulation. Direct manipulation helps PREVENT ERRORS (K12). You may consider using direct manipulation in MOBILE INPUT CONTROLS (M2), but be aware that not all phones and phone interfaces support DHTML, Flash, or programming languages like J2ME that may be required to implement direct manipulation.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEB SITE

Sign in Form

(required)

(required, but not displayed)

Have a idea for a new pattern group? Join our disscussion on new pattern ideas.