UNIT V

1. List out the pattern in page editing techniques in web interface design.
Single field inline edit
Multi field inline edit
Overlay edit
Table edit
Group edit
Module configuration

2. Define WYSIWYG
What You See Is What You Get: an interface where content displayed during editing appears
very similar to the final output.
If the two modes are in completely separate spaces, the user may lose a sense of what effect
the change will have during display.

3. List out the pattern in editing the inline page flow.

Inline editing keeps the editing in context with the rest of the elements on the page.
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.

4. Write about table edit

Editing tables of data is less common in consumer web applications. In enterprise web
applications, however, tables resign supreme.
The most common request is for the table editing to work like Microsoft Excel, which long
ago set the standard for editing data in grid.
A good example of table edit is a Google Docs Spreadsheet.

5. Define Module Configuration.

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.
The My Yahoo! Home page provides an Edit link that allows for module configuration.

6. List out few events in Drag and Drop.

Page Load
Mouse Hover
Mouse Down
Drag Initiated
Drag Leaves Original Location
Drag Re-enters Original Loaction
Drag Enters Valid Target
Drag Exit 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

7. What is the purpose of Drag and Drop ?

Drag and Drop Module
Drag and Drop list
Drag and Drop Object
Drag and Drop Action
Drag and Drop Collection

8. Define 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 movememt.

9. List out the iGoogle Drag and Drop modules approach

Placeholder targeting
Midpoint boundary
Full-size module dragging
Ghost rendering

10. Write note on drag and drop object.

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 toolk.
Cogmap is a wiki for organizational charts.
Drag and drop object is used to rearrange members of organization.
When object relationships can be clearly represented visually, drag and drop is a natural
choice to make these types of changes.

11. Write note on Drag and drop action.

Drag and drop is also useful for invoking an action or actions on a dropped object.
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.

12. Define 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.
13. Define 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.
Toggle selection is the easiest way to allow discontinuous selection.
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.

14. List out the drop-down menus of commands.

First group of commands in the menu operated on the collected items in the tray.
Second set of commands operated on the selected objects.

15. Define object 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.
Desktop applications tend to use object selection. It is also natural that web based mail
applications that mimic desktop interactions employ this same style of selection.
Instead of showing a control, the object itself can be selected and acted on directly.

16. List out the contextual tools.

Interaction in context
Fitts Law
Contextual Tools
Always-Visible Tools
Hover-Reveal Tools
Toggle-Reveal Tools
Multi-Level Tools
Secondary menu

17. Define Fitts Law

Fitts law is an ergonomic principle that ties the size of a target and its contextual proximity
to ease of use. Bruce Tognazzini restates it simply as:
The time to acquire a target is a function of the distance to and size of the target.
In other words, if a tool is close at hand and large enough to target, then we can improve the
users interaction.
Putting tools in context makes for light weight interaction.

18. List out the type of overlays

Dialog overlays
Detail overlays
Input overlays

19. List out the in-page panels inlays.

a. Dialog inlay
b. List inlay
c. Detail inlay
20. Define ZUI
A Zoomable User Interface 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.

21. List out the process flow pattern.

Interactive single page process
Inline assistant process
Configurator process
Overlay process
Static single page process