UNIT V WEB INTERFACE DESIGN

Designing Web Interfaces – Drag & Drop, Direct Selection, Contextual Tools, Overlays,
Inlays and Virtual Pages, Process Flow. Case Studies.

Drag & Drop:

One of the great innovations that the Macintosh brought to the world in 1984 was Drag
and Drop. Influenced by the graphical user interface work on Xerox PARC‘s Star Information
System and subsequent lessons learned from the Apple Lisa, the Macintosh team invented drag
and drop as an easy way to move, copy, and delete files on the user‘s desktop.

The Events
There are at least 15 events available for cueing the user during a drag and drop
interaction:
Page Load
Before any interaction occurs, you can pre-signify the availability of drag and drop. For
example, you could display a tip on the page to indicate draggability.
Mouse Hover
The mouse pointer hovers over an object that is draggable.
Mouse Down
The user holds down the mouse button on the draggable object.
Drag Initiated
After the mouse drag starts (usually some threshold—3 pixels).
Drag Leaves Original Location
After the drag object is pulled from its location or object that contains it.
Drag Re-Enters Original Location
When the object re-enters the original location.
Drag Enters Valid Target
Dragging over a valid drop target.
Drag Exits Valid Target
Dragging back out of a valid drop target.
Drag Enters Specific Invalid Target
Dragging over an invalid drop target.
Drag Is Over No Specific Target
Dragging over neither a valid or invalid target.
Drag Hovers Over Valid Target
User pauses over the valid target without dropping the object. This is usually when a
spring loaded drop target can open up. For example, drag over a folder and pause, the folder
opens revealing a new area to drag into.
Drag Hovers Over Invalid Target
User pauses over an invalid target without dropping the object. Do you care? Will you
want additional feedback as to why it is not a valid target?
Drop Accepted
Drop occurs over a valid target and drop has been accepted.

1
Drop Rejected
Drop occurs over an invalid target and drop has been rejected.

Drop on Parent Container

Is the place where the object was dragged from special? Usually this is not the case, but it
may carry special meaning in some contexts.

The Actors
During each event you can visually manipulate a number of actors. The page elements
available include:
• Page (e.g., static messaging on the page)
• Cursor
• Tool Tip
• Drag Object (or some portion of the drag object, e.g., title area of a module)
• Drag Object‘s Parent Container
• Drop Target

Purpose of Drag and Drop

Drag and drop can be a powerful idiom if used correctly. Specifically it is useful for:

Drag and Drop Module

Rearranging modules on a page.
Drag and Drop List
Rearranging lists.
Drag and Drop Object
Changing relationships between objects.
Drag and Drop Action
Invoking actions on a dropped object.
Drag and Drop Collection
Maintaining collections through drag and drop.

1. Drag and Drop Module

One of the most useful purposes of drag and drop is to allow the user to directly place
objects where she wants them on the page. A typical pattern is Drag and Drop Modules on a
page. Netvibes provides a good example of this interaction pattern.

177

2
 While dragging, it is important to make it clear what will happen when the user drops the
dragged object. There are two common approaches to targeting a drop:
• Placeholder target
• Insertion target

Placeholder target
Netvibes uses a placeholder (hole with dashed outline) as the drop target. The idea is to
always position a hole in the spot where the drop would occur. When module 1 starts dragging, it
gets ―ripped‖ out of the spot. In its place is the placeholder target (dashed outline). As 1 gets
dragged to the spot between 3 and 4, the placeholder target jumps to fill in this spot as 4 moves
out of the way.

178

3
 The hole serves as a placeholder and always marks the spot that the dragged module will
land when dropped. It also previews what the page will look like (in relation to the other
modules) if the drop occurs there. For module drag and drop, the other modules only slide up or
down within a vertical column to make room for the dragged module.

Drag distance
Dragging the thumbnail around does have other issues. Since the object being dragged is
small, it does not intersect a large area. It requires moving the small thumbnail directly to the
place it will be dropped. With iGoogle, the complete module is dragged. Since the module will
always be larger than the thumbnail, it intersects a drop target with much less movement. The
result is a shorter drag distance to accomplish a move.

Drag rendering
The transparency (ghosting) effect communicates that the object being dragged is
actually a representation of the dragged object. It also keeps more of the page visible, thus giving
a clearer picture of the final result of a drop.
Eg: Netvibes represents the dragged module in full size as opaque, while iGoogle uses partial
transparency.
Ghosting the module also indicates that the module is in a special mode. It signals that
the module has not been positioned; instead, it is in a transitional state.

179

4
 2. Drag and Drop List
Rearranging lists is very similar to rearranging modules on the page but with the added
constraint of being in a single dimension (up/down or left/right). The Drag and Drop List pattern
defines interactions for rearranging items in a list.

37 Signal‘s Backpackit allows to-do items to be rearranged with Drag and Drop List.

180

5
Insertion target

181

6
 Just as with Drag and Drop Modules, placeholder targeting is not the only game in town.
You can also use an insertion bar within a list to indicate where a dropped item will land.
Netflix uses an insertion target when movies are dragged to a new location in a user‘s movie
queue.

The upside to this approach is that the list doesn‘t have to shuffle around during drag.
The resulting experience is smoother than the Backpack it approaches. The downside is that it is
not as obvious where the movie is being positioned. The insertion bar appears under the ghosted
item. The addition of the brackets on the left and right of the insertion bar is an attempt to make
the targeting clearer.

Non–drag and drop alternative

182

7
 Besides drag and drop, the Netflix queue actually supports two other ways to move
objects around:
• Edit the row number and then press the ―Update DVD Queue‖ button.
• Click the ―Move to Top‖ icon to pop a movie to the top.

Modifying the row number is straightforward. It‘s a way to rearrange items without drag
and drop. The ―Move to Top‖ button is a little more direct and fairly straightforward (if the user
really understands that this icon means ―move to top‖). Drag and drop is the least discoverable of
the three, but it is the most direct, visual way to rearrange the list. Since rearranging the queue is
central to the Netflix customer‘s satisfaction, it is appropriate to allow multiple ways to do so.

Hinting at drag and drop

When the user clicks the ―Move to Top‖ button, Netflix animates the movie as it moves
up. But first, the movie is jerked downward slightly and then spring-loaded to the top.

The combination of the downward jerk and then the quick animation to the top gives a
subtle clue that the object is draggable. This is also an interesting moment to advertise drag and
183

8
drop. After the move to top completes, a simple tip could appear to invite users to drag and drop.
The tip should probably be shown only once, or there should be a way to turn it off. Providing an
invitation within a familiar idiom is a good way to lead users to the new idiom.

Drag lens
Drag and drop works well when a list is short or the items are all visible on the page. But
when the list is long, drag and drop becomes painful. Providing alternative ways to rearrange is
one way to get around this issue. Another is to provide a drag lens while dragging.
A drag lens provides a view into a different part of the list that can serve as a shortcut
target. It could be a fixed area that is always visible, or it could be a miniature view of the list
that provides more rows for targeting. The lens will be made visible only during dragging. A
good example of this is dragging the insertion bar while editing text on the iPhone.

3. Drag and Drop Object

Another common use for drag and drop is to change relationships between objects. This
is appropriate when the relationships can be represented visually. Drag and drop as a means of
visually manipulating relationships is a powerful tool.
Cogmap is a wiki for organizational charts. Drag and Drop Object is used to rearrange
members of the organization.
When object relationships can be clearly represented visually, drag and drop is a natural
choice to make these type of changes. Cogmap uses the target insertion approach. This allows
the dragging to be nondistracting, since the chart does not have to be disturbed during targeting.

184

9
4. Drag and Drop Action
Drag and drop is also useful for invoking an action or actions on a dropped object.

185

10
The Drag and Drop Action is a common pattern. Its most familiar example is dropping an item in
the trash to perform the delete action.
Normally uploading files to a web application includes pressing the upload button and
browsing for a photo. This process is repeated for each photo.
When Yahoo! Photos was relaunched in 2006, it included a drag and drop upload feature. It
allowed the user to drag photos directly into the upload page. The drop signified the upload
action.

186

11
 5. Drag and Drop Collection
A variation on dragging objects is collecting objects for purchase, bookmarking, or
Saving into a temporary area. This type of interaction is called Drag and Drop Collection. Drag
and drop is a nice way to grab items of interest and save them to a list. The Laszlo shopping cart
example illustrates this nicely.

187

12
The Challenges of Drag and Drop
As you can see from the discussion in this chapter, Drag and Drop is complex. There are
four broad areas where Drag and Drop may be employed: Drag and Drop Module, Drag and
Drop List, Drag and Drop Object, and Drag and Drop Action. And in each area, there are a large
number of interesting moments that may be handled in numerous ways.
Being consistent in visual and interaction styles across all of these moments for all of
these types of interactions is a challenge in itself. And keeping the user informed throughout the
process with just the right amount of hints requires design finesse.

Direct Selection
When the Macintosh was introduced, it ushered into the popular mainstream the ability to
directly select objects and apply actions to them. Folders and files became first-class citizens.
Instead of a command line to delete a file, you simply dragged a file to the trashcan.

188

13
 Treating elements in the interface as directly selectable is a clear application of the Make
It Direct principle. On the desktop, the most common approach is to initiate a selection by
directly clicking on the object itself. We call this selection pattern Object Selection.

Types of selection patterns are as follows:

Toggle Selection
Checkbox or control-based selection.
Collected Selection
Selection that spans multiple pages.
Object Selection
Direct object selection.
Hybrid Selection
Combination of Toggle Selection and Object Selection.

1. Toggle Selection
The most common form of selection on the Web is Toggle Selection. Checkboxes and
toggle buttons are the familiar interface for selecting elements on most web pages. An example
of this can be seen in with Yahoo! Mail Classic.

189

14
 The way to select an individual mail message is through the row‘s checkbox. Clicking on
the row itself does not select the message. We call this pattern of selection Toggle Selection
since toggle-style controls are typically used for selecting items.
Once items have been check-selected, actions can be performed on them. Usually these
actions are performed on the selection by clicking on a separate button (e.g., the Delete button).
Gmail is a good example of actions in concert with Toggle Selection.

190

15
 2. Collected Selection
Toggle Selection is great for showing a list of items on a single page. But what happens if
you want to collect selected items across multiple pages? Collected Selection is a pattern for
keeping track of selection as it spans multiple pages.
In Gmail, you can select items as you move from page to page. The selections are
remembered for each page. If you select two items on page one, then move to page two and
select three items, there are only three items selected. This is because actions only operate on a
single page. This makes sense, as users do not normally expect selected items to be remembered
across different pages.

191

16
 3. Object Selection
As we mentioned earlier, Toggle Selection is the most common type of selection on the
Web. The other type of selection, Object Selection, is when selection is made directly on objects
within the interface.
Sometimes using a checkbox does not fit in with the style of interaction desired. Laszlo‘s
WebTop mail allows the user to select messages by clicking anywhere in the row. The result is
that the whole row gets highlighted to indicate selection.

4. Hybrid Selection
Mixing Toggle Selection and Object Selection in the same interface can lead to a
confusing interface. Referring back to Yahoo! Bookmarks, you‘ll see an odd situation arise
during drag and drop.

192

17
Contextual Tools
(Tools placed in context within the page content.)
Contextual Tools are the Web‘s version of the desktop‘s right-click menus. Instead of
having to right-click to reveal a menu, we can reveal tools in context with the content. We can do
this in a number of ways:

Always-Visible Tools
Place Contextual Tools directly in the content.
Hover-Reveal Tools
Show Contextual Tools on mouse hover.
Toggle-Reveal Tools
A master switches to toggle on/off Contextual Tools for the page.
Multi-Level Tools
Progressively reveal actions based on user interaction.
Secondary Menus
Show a secondary menu (usually by right-clicking on an object).

1. Always-Visible Tools
The simplest version of Contextual Tools is to use Always-Visible Tools. Digg is an
example of making Contextual Tools always visible.

193

18
 2. Hover-Reveal Tools
Instead of making Contextual Tools always visible, we can show them on demand. One
way to do this is to reveal the tools when the user pauses the mouse over an object. The Hover-
Reveal Tools pattern is most clearly illustrated by 37 Signal‘s Backpackit. To-do items may be
deleted or edited directly in the interface. The tools to accomplish this are revealed on mouse
hover.

3. Toggle-Reveal Tools
A variation on the two previous approaches is to not show any Contextual Tools until a
special mode is set on the page. A good example of Toggle-Reveal Tools is in Basecamp‘s
category editing.

194

19
 4. Multi-Level Tools
Contextual Tools can be revealed progressively with Multi-Level Tools. Songza*
provides a set of tools that get revealed after a user clicks on a song. Additional tools are
revealed when hovering over the newly visible tools.
Songza reveals the four options ―play‖, ―rate‖, ―share‖, and ―add to playlist‖ after the
user clicks on a song title.

195

20
 Picnik is an online photo-editing tool that integrates with services like Flickr. In all, there
are six sets of tools, each with a wide range of palette choices. Picnik uses Multiple-Level Tools
to expose additional functionality. By wrapping the photo with tools in context and progressively
revealing the levels of each tool, Picnik makes editing straightforward.

196

21
Muttons
Another variation on Multi-Level Tools is the ―mutton‖ (menu + button = mutton).
Muttons are useful when there are multiple actions and we want one of the actions to be the
default. Yahoo! Mail uses mutton for its ―Reply‖ button.

Muttons are used to:

• Provide a defa ult button action (―Reply to Sender‖)
• Provide a clue that there are additional actions
• Provide additional actions in the drop-down

197

22
5. Secondary Menu
Desktop applications have provided Contextual Tools for a long time in the form of
Secondary Menus. These menus have been rare on the Web. Google Maps uses a secondary
menu that is activated by a right-click on a route. It shows additional route commands.

198

23
Overlays
Overlays are really just lightweight pop ups. We use the term lightweight to make a clear
distinction between it and the normal idea of a browser pop up. Browser pop ups are created as a
new browser window (Figure 5-1). Lightweight overlays are shown within the browser page as
an overlay. Older style browser pop ups are undesirable because:
• Browser pop ups display a new browser window. As a result these windows often take
time and a sizeable chunk of system resources to create.
• Browser pop ups often display browser interface controls (e.g., a URL bar). Due to
security concerns, in Internet Explorer 7 the URL bar is a permanent fixture on any browser pop-
up window.

• Lightweight overlays are just a lightweight in-page object. They are inexpensive to
create and fast to display.
• The interface for lightweight overlays is controlled by the web application and not the
browser.
• There is complete control over the visual style for the overlay. This allows the overlay
to be more visually integrated into the application‘s interface.

Lightweight overlays can be used for asking questions, obtaining input, introducing
features, indicating progress, giving instructions, or revealing information. They can be activated
directly by user events (e.g., clicking on an action, hovering over objects) or be provided by the
web application at various stages in the completion of an action.

1. Dialog Overlay
Dialog Overlays replace the old style browser pop ups. Netflix provides a clear example
of a very simple Dialog Overlay. In the ―previously viewed movies for sale‖ section, a user can
click on a ―Buy‖ button to purchase a DVD. Since the customer purchasing the DVD is a
member of Netflix, all the pertinent shipping and purchasing information is already on record.
The complete checkout experience can be provided in a single overlay.

199

24
 2. Detail Overlay
The second type of overlay is somewhat new to web applications. The Detail Overlay
allows an overlay to present additional information when the user clicks or hovers over a link or
section of content. Toolkits now make it easier to create overlays across different browsers and
to request additional information from the server without refreshing the page.
Taking another example from Netflix, information about a specific movie is displayed as
the user hovers over the movie‘s box shot.

200

25
 3. Input Overlay
Input Overlay is a lightweight overlay that brings additional input information for each
field tabbed into. American Express uses this technique in its registration for premium cards such
as its gold card.

201

26
Inlays
Not every bit of additional control, information, or dialog with the user needs to be an
overlay. Another approach is to inlay the information directly within the page itself. To
distinguish from the pop-up overlay, we call these in-page panels Inlays.

1. Dialog Inlay
A simple technique is to expand a part of the page, revealing a dialog area within the
page. The BBC recently began experimenting with using a Dialog Inlay as a way to reveal
customization controls for its home page.

202

27
203

28
 2. List Inlay
Lists are a great place to use Inlays. Instead of requiring the user to navigate to a new
page for an item‘s detail or popping up the information in an Overlay, the information can be
shown with a List Inlay in context. The List Inlay works as an effective way to hide detail until
needed—while at the same time preserving space on the page for high-level overview
information.
Google Reader provides an expanded view and a list view for unread blog articles. In the
list view, an individual article can be expanded in place as a List Inlay.

3. Detail Inlay
Hovering over a movie revealed a Detail Overlay calling out the back-of-the-box
information.
Details can be shown inline as well. Roost allows house photos to be viewed in-context
for a real estate listing with a Detail Inlay.

204

29
Tabs
Lest we forget, there are some very traditional interface elements that can be used to inlay
details. Tabs, for instance, can be used as a Detail Inlay. Instead of moving the user from page to
page (site navigation), tabs can be used to bring in content within the page, keeping the user in
the page.

205

30
Inlay versus Overlay
The following guidelines provide some suggestions on which to choose in a given
situation:
• Use an overlay when there may be more than one place a dialog can be activated from
(the exception may be showing details for items in a list).
• Use an overlay to interrupt the process.
• Use an overlay if there is a multi-step process.
• Use an inlay when you are trying to avoid covering information on the page needed in
the dialog.
• Use an inlay for contextual information or details about one of many items (as in a list):
a typical example is expanding list items to show detail.

Virtual Pages
Overlays allow you to bring additional interactions or content in a layer above the current
page. Inlays allow you to do this within the page itself. However, another powerful approach to
keeping users engaged on the current page is to create a virtual page. That is to say, we create
the illusion of a larger virtual page.

Patterns that support virtual pages include:

• Virtual Scrolling
• Inline Paging
• Scrolled Paging
• Panning
• Zoomable User Interface

1. Virtual Scrolling
The traditional Web is defined by the ―page.‖ In practically every implementation of
websites (for about the first 10 years of the Web‘s existence) pagination was the key way to get
to additional content. Websites could preload data and allow the user to scroll through it.
However, this process led to long delays in loading the page. So most sites kept it simple:
go fetch 10 items and display them as a page and let the user request the next page of content.
Each fetch resulted in a page refresh.

206

31
 The classic example of this is Google Search. Each page shows 10 results. Moving
through the content uses the now-famous Google pagination control.

2. Inline Paging
By only switching the content in and leaving the rest of the page stable, we can create an
Inline Paging experience. This is what Amazon‘s Endless.com site does with its search results.

207

32
 3. Virtual Panning
A great place for Virtual Panning is on a map. Google Maps allows you to pan in any
direction by clicking the mouse down and dragging the map around.

208

33
 4. Zoomable User Interface
A Zoomable User Interface (ZUI) is another way to create a virtual canvas. Unlike
panning or flicking through a flat, two-dimensional space, a ZUI allows the user to also zoom in
to elements on the page. This freedom of motion in both 2D and 3D supports the concept of an
infinite interface.

209

34
Process Flow
Sometimes tasks are unfamiliar or complicated and require leading the user step-by-step
through a Process Flow. It has long been common practice on the Web to turn each step into a
separate page. While this may be the simplest way break down the problem, it may not lead to

210

35
the best solution. For some Process Flows it makes sense to keep the user on the same page
throughout the process.

Google Blogger
The popular site Google Blogger generally makes it easy to create and publish blogs. One
thing it does not make easy, though, is deleting comments that others may leave on your blog.
This is especially difficult when you are the victim of hundreds of spam comments left by
nefarious companies hoping to increase their search ranking. Blogger forces you to delete these
comments through a three-step process. Each step is an individual page; all punctuated with a
page refresh.

Process Flow patterns:

• Interactive Single-Page Process
• Inline Assistant Process
• Configurator Process
• Overlay Process
• Static Single-Page Process

1. Interactive Single-Page Process

Consumer products come in a variety of shapes, sizes, textures, colors, etc. Online
shoppers will not only have to decide that they want shoes, but do they want blue suede shoes?
And what size and width do they want them in? In the end the selection is constrained by the
available inventory. As the user makes decisions, the set of choices gets more and more limited.
This type of product selection is typically handled with a multi-page workflow. On one
page, the user selects a shirt and its color and size. After submitting the choice, a new page is
displayed. Only when the user arrives at this second page does he find out that the ―true navy‖
shirt is not available in the medium size.
The Gap accomplishes this kind of product selection in a single page using Interactive
Single-Page Process. The purple shirt is available in all sizes from XS to XXXL. Hovering over
the dark blue shirt immediately discloses that this color is only available in XS and S sizes.

211

36
Amazon‘s interface for selecting a shirt also uses Interactive Single-Page Process with a slightly
different interface.

212

37
 2. Inline Assistant Process
Another common place where multiple pages are used to complete a process is when
adding items to a shopping cart. As mentioned earlier, Amazon provides the typical experience.
So what magic can we apply to move this from a multi-page experience to a single-page
experience? Given this mindset, the cart can be realized in the interface as an object and be made
available on the page. The Gap employed an Inline Assistant Process pattern for its shopping cart
when it re-launched its site a few years back.

213

38
 3. Dialog Overlay Process
The Netflix approach just described uses a Dialog Overlay Process to encapsulate a
multi-step flow inside a Dialog Overlay. Overlays allow us to keep the context of the page yet
present a virtual space to conduct a conversation with the user.

214

39
 Discover.com recently expanded its account section with a more detailed profile. The
profile captures things like your payment date, mobile fraud alerts, paperless statements, and
general contact information. The overlay pops up when you first enter your account.

4. Configurator Process
Sometimes a Process Flow is meant to invoke delight. In these cases, it is the engagement
factor that becomes most important. This is true with various Configurator Process interfaces on
the Web. We can see this especially at play with car configurators. Porsche provides a
configurator that allows users to build their own Porsche.

215

40
 5. Static Single-Page Process
The Apple example illustrates another way to get rid of multiple pages in a Process Flow.
Just put the complete flow on one page in a Static Single-Page Process. The user sees all the
tasks needed to complete the full process. This can be both good and bad.
Seeing just one step to complete the process can encourage users to finish the task. But if
the single step seems too long or too confusing, the user will most likely bail out of the process
early.
In the case of the Apple store, each item is optionally set, and it‘s just a single click to
include or exclude an item from the purchase. eBay provides two ways to sell an item. An
introductory panel gathers the description of the item for sale. The ―Customize your listings…‖
option takes the user through a traditional multi-page process.

216

41
 Since the customized flow contains many options for listing an item, it requires a good
deal of handholding. A multi-page process fits well with guiding the user through a complex set
of tasks.

217

42
43