0% found this document useful (0 votes)
174 views112 pages

Hci-Unit 5

The document discusses principles for direct in-page editing. It covers techniques like single-field inline editing, multi-field inline editing, overlay editing, table editing, group editing, and module configuration. It also discusses drag and drop interactions, including purposes of drag and drop, interesting moments in drag and drop, actors involved, targeting drops, and providing feedback during dragging. The best practices emphasize keeping editing lightweight and in context on the page.

Uploaded by

Vimal M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
174 views112 pages

Hci-Unit 5

The document discusses principles for direct in-page editing. It covers techniques like single-field inline editing, multi-field inline editing, overlay editing, table editing, group editing, and module configuration. It also discusses drag and drop interactions, including purposes of drag and drop, interesting moments in drag and drop, actors involved, targeting drops, and providing feedback during dragging. The best practices emphasize keeping editing lightweight and in context on the page.

Uploaded by

Vimal M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 112

OVERVIEW

•I. Make It Direct


• In-Page Editing
• Drag and Drop
• Direct Selection

•II. Keep It Lightweight
• Contextual Tools

•III. Stay on the Page
• Overlays
• Inlays
• Virtual Pages
• Process Flow
PART-I MAKE IT DIRECT
The traditional way to do this on the Web requires going to the
photo's page and clicking an edit button.

Then a separate page for the photo's title, description, and other
information is displayed.

Once on the editing page, the photo's title can be changed.

Clicking "Save" saves the changes and returns to the original photo
page with the new title displayed.
FIGURE 1. WEB APPLICATIONS HAVE TYPICALLY LED
THE USER TO A NEW PAGE TO PERFORM EDITING
CHAPTER-1 IN-PAGE EDITING
• There are six patterns that define the most common in-page
editing techniques:
• Single-Field Inline Edit
• Editing a single line of text.
• Multi-Field Inline Edit
• Editing more complex information.
• Overlay Edit
• Editing in an overlay panel.
• Table Edit
• Editing items in a grid.
• Group Edit
• Changing a group of items directly.
Module Configuration
Configuring settings on a page directly.
Tip
If editing needs the context of the page, perform the editing
inline.

Figure 1-1. Disqus allows comments to editing inline within the context of


other comments
Single-Field Inline Edit
The editing happens in place instead of in a separate window or on
a separate page.
Flickr provides us a canonical example of Single-Field Inline Edit
Discoverability
In this example, there are a number of cues that invite the
user to edit. The invitations include:
Showing a tool tip ("Click to edit")
Highlighting the background of the editable area in yellow
Changing the cursor to an edit cursor (I-beam)

Accessibility
Accessibility affects a wider range of users than you might
first consider. Assistive technologies help those with
physical impairments, medical conditions, problems with
sight, and many other conditions.
Tip
Providing an alternative to inline editing by allowing
editing on a separate page can improve accessibility.

Figure 1-4. Flickr allows you to also edit a photo's title, description, and


tags in a separate page
Multi-Field Inline Edit
The pattern Multi-Field Inline Edit describes this approach: editing
multiple values inline.

A note consists of a title and its body. For readability, the title is
displayed as a header and the body as normal text.

During editing, the two values are shown in a form as input text
fields with labeled prompts.
Figure 1-5. Backpackit reveals a multi-field form
for editing a note's title and body
Readability versus editability
Readability is a primary concern during display.
•Edit controls
•Field prompts
•Help text for user input
•Error handling
•Assistive input (e.g., calendar pop up or drop-down selection
field)
•Editing styles (e.g., edit fields with 3D sunken style)
Blending display and edit modes

Figure 1-6. Yahoo! 360 shows an "Edit Blast" link to invite editing

Figure 1-7. Yahoo! 360 brings the editing into the displayed


blast; the difference between display and edit modes is
minimized
Overlay Edit
Overlay Edit patterns bring the editing form just a
layer above the page. While still not leaving the page for
editing, it does not attempt to do the editing directly in the
flow of the page. Instead a lightweight pop-up layer (e.g.,
dialog) is used for the editing pane.
Figure 1-8. Yahoo! Trip Planner provides a complex editor in an
overlay for scheduling an itinerary item
Figure 1-9. Yahoo! Trip Planner provides an overlay editor for adjusting
itinerary times

Figure 1-10. Upcoming provides a better


experience for choosing time of day
Why an overlay?
An overlay should be considered when:
•The editing module is considerably larger than the display
values.
•Opening an area on the page for the editing module would be
distracting or push important information down the page.
•There is concern that the opened information might go
partially below the fold. An overlay can be positioned to
always be visible in the page.
•You want to create a clear editing area for the user.
Best Practices for Inline Edit and Overlay Edit

In-Page Editing provides a nice way to change displayed


content and observe the change in context. Here are some best
practices to consider:
•Keep the editing inline for single fields.
•Use inline when editing one of many in a set. This keeps the
context in view.
•Keep the display and editing modes the same size when
possible. This will avoid page jitter and reduce distraction when
moving between the two modes.
•Make the transition between display and editing as smooth as
possible.
•Use mouse hover invitations to indicate editing when
readability is primary.
•Avoid using double-click to activate editing.
Table Edit
The most common request is for the table editing to work like
Microsoft Excel, which long ago set the standard for editing data in
a grid.
A good example of Table Edit is a Google Docs Spreadsheet

Best Practices for Table Edit


•Bias the display toward readability of the table data.
•Avoid mouse hover for activating cell editing. It makes for the
feeling of "mouse traps" and makes the interaction noisy.
•Activate edit with a single click. While using a double-click may
not be totally unexpected (since it looks like an Excel
spreadsheet), a single click is easier to perform.
Figure 1-11. Editing a spreadsheet in Google Docs is
very similar to editing a spreadsheet in Microsoft Excel
Group Edit
If you want to keep the display of items on the page as uncluttered
as possible while still supporting editing, consider using a single
mechanism to enter a special editing mode: Group Edit.

Figure 1-12. The iPhone has a special mode for rearranging applications


on the home page—pressing and holding down on an icon places all the
applications in "wiggly mode"
Module Configuration
Popular portal sites like Yahoo! and Google's interactive
home page display specific content modules (e.g., Top
Stories).

Module Configuration is a common pattern on these


types of sites. Instead of modifying modules on a separate
page, the sites provide ways to directly configure the
amount and type of content that shows in each module.
Figure 2-1. The Oddpost web mail client performed like a desktop
mail application and included drag and drop as a key feature
Best Practices for Group Edit and Module Configuration
•Use an edit toggle when there are a number of items to edit and
showing edit scaffolding would make the display visually noisy.
•Make activation and deactivation as similar as possible
(Symmetry of Interaction). Switching in and out of an editing
mode should operate more like a toggle.
•Provide inline edit configuration for modules when
configuration is an important feature.
•Provide a way to turn configuration on/off globally for module
configuration when this is secondary to content display.
Chapter 2. Drag and Drop
•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.

Figure 2.1: The Oddpost web mail client performed like


a desktop mail application and included drag and drop
as a key feature
Intersting moments
15 events
page load
mouse hover
Mouse down
drag initiated
drag leaves original location
drag renters original location
drag enters valid target
drag exits valid target
drag enters specific invalid target
drag is over no specific target
drag hovers over valid target
drag hovers over invalid target
drop accepted
drop rejected
drop on parent container.
The Actors
cursor
tooltip
drag object
Drag objects 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.
Figure 2.2: Netvibes allows modules to be arranged directly via drag and drop; the
hole cues what will happen when a module is dropped

There are two common approaches to targeting a drop:


•Placeholder target
•Insertion target
Drag and Drop List
The Drag and Drop List pattern defines interactions for
rearranging items in a list (up/down or left/right).

Figure 2.3: Backpackit allows to-do lists to


be rearranged directly via drag and drop
Placeholder target
A good example from the desktop world is Apple's
iPhoto.

Figure 2.4 : iPhoto ..
Drag and Drop Object

Figure 2.5 : Cogmap allows organizational charts to be


rearranged on the fly with drag and drop
Drag feedback: Highlighting

Figure 2.6 : Bubbl.us provides a visual indication of which node the


dropped node will attach itself to
Drag and Drop Action
Drag and drop is also useful for invoking an
action or actions on a dropped object. 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.
Figure  2.7: Yahoo! Photos provided a way to upload files
directly to the site via drag and drop from the user's filesystem
into the web page
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.
Figure 2.8: This Laszlo shopping cart demo uses both drag and
drop and a button action to add items to its shopping cart
The Challenges of Drag and Drop
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.
General Best Practices for Drag and Drop
•Keep page jitter to a minimum while dragging objects.
•Initiate dragging if the user presses the mouse down and moves the mouse
three pixels, or if she holds the mouse down for at least half a second.
•Use drag and drop for performing direct actions as an alternate method to
more direct mechanisms in the interface.
•Hint at the availability of drag and drop when using alternatives to drag and
drop.
•Pay attention to all of the interesting moments during drag and drop.
Remember, you must keep the user informed throughout the process.
Use Invitations to cue the user that drag and drop is available.
Chapter 3. 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.

Figure 3-1. DOS command line for deleting a file versus


dragging a file to the trash on the Macintosh
Types of selection patterns:

•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.
Collected Selection
Toggle Selection is great for showing a list of items on a
single page. Collected Selection is a pattern for keeping track
of selection as it spans multiple pages.

Figure 3-2. Gmail provides a way to select all items across all


pages, allowing the user to delete all items in a folder without
having to delete all items
Object Selection
Object Selection, is when selection is made directly on
objects within the interface.
Figure 3-3. Laszlo WebTop Mail uses highlighting to
indicate row selection
Hybrid Selection
Mixing Toggle Selection and Object Selection in
the same interface can lead to a confusing interface.

Figure 3-4. In Yahoo! Bookmarks, one item is selected, but


two items can be dragged by dragging on the unselected item
Part II. Keep It Lightweight
Digg is a popular news site where the community votes on its
favorite stories.

Figure : Digg makes it easy to vote to digg articles


with the "digg it" button next to each article
Figure. The first version of Digg required a two-
page process to "digg" a story
Figure . Digg now uses a "digg it" button to
immediately record a "digg" within the same page
Chapter 4. Contextual Tools
Interaction in Context

Most desktop applications separate functionality from data. Menu


bars, toolbars, and palettes form islands of application
functionality.
Figure 4-1. Google Search needs only hyperlinks and a search
button; Yahoo! Mail, on the other hand, is a full-featured
application with toolbars and menus
Figure 4-2. The Apple iPhone introduced touch-
based interfaces to the consumer market
Figure 4-3. Digg's "digg it" button is a simple
Contextual Tool that is always visible
Hover-Reveal Tools
The Hover-Reveal Tools items may be deleted or
edited directly in the interface. The tools to accomplish this
are revealed on mouse hover.

Figure 4-4. Backpackit reveals its additional tools


on mouse hover
Tip
To reduce visual clutter, hide non-primary actions until
they are needed.

Visual noise
Showing the items on hover decreases the visual noise
in the interface. Imagine if instead the delete and edit
actions were always shown for all to-do items.

Figure 4-9. What the
Backpackit interface
would have looked like
if the Contextual Tools
were always visible
Figure 4-5. Yahoo! Buzz reveals additional tools for the top
searches when the user hovers over each item
Figure 4-6. Yahoo! Buzz highlights the
row and brings in additional tools
Contextual Tools in an overlay
There can be issues with showing contextual tools in an
overlay:
1.Providing an overlay feels heavier. An overlay creates a
slight contextual switch for the user's attention.
2.The overlay will usually cover other information—
information that often provides context for the tools being
offered.
3.Most implementations shift the content slightly between the
normal view and the overlay view, causing the users to take a
moment to adjust to the change.
4.The overlay may get in the way of navigation. Because an
overlay hides at least part of the next item, it becomes harder to
move the mouse through the content without stepping into a
"landmine."
Anti-pattern: Hover and Cover
hovering over a clipped item brought in three tools:
copy, delete, and preview. However, when these tools were
placed in an overlay, it covered the item to the right, making it
hard to see that content and even navigate to it.

Figure 4-7. An early version of the Yahoo! for Teachers


beta revealed Contextual Tools in an overlay; the overlay
covered more than half of the item to its right
Hover and Cover is a common anti-pattern that occurs
when exposing an overlay on hover and hiding important
context or further navigation.

Figure 4-8. Navigating required a zigzag


approach to get around the tool overlay
Hover and Cover was resolved by no longer using an overlay.
Instead, additional margin space was added to each image, and
the Contextual Tools were hidden.

Figure 4-9. In the redesigned version, tools were shown on hover


directly surrounding the image instead of in an overlay
Figure 4-10. Since the Delete action appears in the
same spot relative to the image, the user can easily
anticipate where the action will appear
Tip
Be careful when using overlays to expose additional information
or tools. The overlay can get in the way of normal navigation or
hide important information.
Anti-pattern: Mystery Meat
Mystery Meat is a common anti-pattern that occurs when you
have to hover over an item to understand how to use it.
Tip: Don't make users hover over your tools in order to figure out
what they mean.
Figure 4-11. A very
early version of Zooomr
revealed a number of
unidentifiable icons
when the mouse hovered
over a photo
Best Practices for Hover-Reveal Tools
•Hide Contextual Tools behind a mouse hover if the actions are
secondary and you want to make the content more important (or
other visible commands more important).
•Avoid using overlays when revealing additional tools. They will
lead to the Hover and Cover anti-pattern, as well as require the
user to perform mouse gymnastics to accomplish the most basic
tasks.
•When additional tools are revealed, make sure that all parts of the
page remain stable.
•Avoid any element shifting by a few pixels or page elements
moving around. These cause the user to be directed away from
what is really happening.
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.

Figure 4-12. Basecamp reveals category-editing tools


only when the edit mode is turned on for the area
Figure 4-13. Adding an "edit" link to Google Reader's
feed list and toggling in common actions could
potentially make it easier to manage subscriptions
Best Practices for Toggle-Reveal Tools

•Toggle a tool mode for an area or page when the actions are
not the main flow, but you want to provide the most direct
way to act on these objects when the need arises.

•Make the activation and deactivation of the edit mode as


symmetrical as possible.

•Keep the transition between display and edit as seamless as


possible to provide a "soft mode" for editing.
Multi-Level Tools
Contextual Tools can be revealed progressively with Multi-Level
Tools.

Figure 4-14. Songza uses a multi-level contextual tool menu


Considerations
Songza reveals the four options "play", "rate", "share", and "add
to playlist" after the user clicks on a song title. Hovering over
"share" or "rate" reveals a secondary set of menu

Figure 4-15. Picnik wraps layers of Contextual


Tools around the imagebeing edited
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.
Figure 4-23. 
Yahoo! Mail's
"Reply" button looks
like a drop-down
when hovered over;
clicking "Reply"
replies to sender, and
clicking the drop-
down offers the
default action as well
as "Reply to All"
Anti-pattern: Tiny Targets
Even if tools are placed close by in context, don't forget to
make them large enough to target.

Figure 4-16. The Yahoo! for Teachers Profile Card info is hidden


unnecessarily
Best Practices for Multi-Level Tools
•Use Multi-Level Tools when you want to avoid revealing
Contextual Tools on a mouse hover.
•Use Multi-Level Tools to make activation explicit.
•Use muttons when you have a default action that the user
normally takes but alternate actions are still fairly frequent.
•Avoid cascades where possible. Users have a hard time
maneuvering the various mouse turns that are required to get to
these secondary menus.
•Keep actions as close to the activation point as possible.
Secondary Menu
Secondary Menus have been rare on the Web. Google Maps uses a secondary
menu that is activated by a right-click on a route.
Figure 4-17. Google Maps uses a right-click menu to add new route
stops or to adjust the map around the current point on the route
Best Practices for Secondary Menus
•Place alternate or shortcut commands in Secondary Menus.
•Consider activating Secondary Menus by holding down the
mouse for one second as an alternative to right-clicking to show
the menu.
•Style Secondary Menus differently than the Browser's standard
secondary menu.
•Avoid Secondary Menus for all but redundant commands
•Avoid Secondary Menus in places where there is little
resemblance to a traditional web page.
•Use Secondary Menus for operating on a selected set of
objects.
Part III. Stay on the Page Flow
Flow: The Psychology of Optimal Experience, published by
Harper Perennial, Mihaly Csikszentmihalyi describes the state of
"optimal experience" as the times when people enter a state of
concentration so focused it creates a state of effortless control.

Chapter-5 Detail Overlay


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.
Figure 5-1. Netflix shows "back of the box" information in
an overlay as the user hovers over a movie's box shot
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.
Figure 5-2. American Express provides Input Overlays to guide
the user through the signup process
Chapter 6. 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.
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
Figure 6-1. The BBC home page puts its customization tools
in an inlay that slides out when activated
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.
Figure 6-2. In list view, Google Reader shows all articles as
a collapsed list—except for the one that is currently selected
Detail Inlay
Detail Overlay calling out the back-of-the-box information.
Figure 6-3. Roost provides both Detail Inlay and
Detail Overlay patterns to show home photos
Tabs
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.

Figure 6-4. Yahoo's home page employs three different Tab


styles to encourage exploration of additional content
Inlay Versus Overlay?
•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 e.
Chapter 7. Virtual Pages
Virtual page is to say, we create the illusion of a larger virtual
page.
Tip
Think of the interface as a children's pop-up book. Additional real
estate can be called on as needed to extend the interface.

Patterns that support virtual pages include:


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

Figure 7-1. The now-famous Google pagination control illustrates


the most common way to move through data on the Web

Inline Paging
Figure 7-2. Endless uses Inline Paging to create a
seamless experience moving through search results
Tip
Paging is sometimes the most convenient and natural way to break
up information.
Natural chunking
Inline Paging can also be useful when reading news content online.

Figure 7-3. The International Herald Tribune uses Inline Paging.


Scrolled Paging: Carousel

•A Carousel provides a way to page-in more data by


scrolling it into view. On one hand it is a variation on the
Virtual Scrolling pattern.

•In other ways it is like Virtual Paging since most carousels


have paging controls. The additional effect is to animate the
scrolled content into view.
Figure 7-4. Yahoo! Underground uses a Carousel
to communicate a timeline of blog articles
Carousels work well for time-based content.

Figure 7-5. Flickr uses a Carousel to allow the user to


get photos in chronological order; this makes it possible
to find photos without leaving the current page
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

Figure 7-6. Google Maps creates a virtual canvas; one


tool that helps with that illusion is the ability to pan
from area to area
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.
Figure 7-7. Hard Rock Café uses a zoomable
user interface (ZUI) to allow its memorabilia
collection to be viewed online
Chapter 8. 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 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.

Figure 8-1. Google Blogger forces you through a three-step


process for each comment you delete, which is especially
tiresome if you have dozens of spam comments to delete
The Magic Principle
"What if when trying to complete a task the user could invoke
some magic?"
For example, let's look at the problem of taking and sharing
photos. The process for this task breaks down like this:
•Take pictures with a digital camera.
•Sometime later, upload the photos to a photo site like Flickr. This
involves:
• Finding the cable.
• Starting iTunes.
• Importing all photos.
• Using a second program, such as Flickr Uploadr, to upload
the photos to Flickr.
• Copying the link for a Flickr set (which involves first
locating the page for the uploaded set).
• Send the link in email to appropriate friends.
Interactive Single-Page Process
Figure 8-2. The Gap uses Interactive Single-Page Process to reflect
the sizes for each product color choice in real time
Inline Assistant Process

Figure 8-3. The Gap's single-page "Add to


Bag" process
Dialog Overlay Process
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.
Figure 8-4. Discover encapsulates its "Create Your
Profile" flow in a Dialog Overlay
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.

Figure 8-5. Porsche's car configurator provides an engaging way


to customize a car
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.

Figure 8-6. eBay's simplified one-page flow


Figure 8-7. The customized flow is a traditional
multi-page process

You might also like