Hci-Unit 5
Hci-Unit 5
Then a separate page for the photo's title, description, and other
information is displayed.
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.
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.
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 2.4 : iPhoto ..
Drag and Drop Object
•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.
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.
•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.
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.
•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.