3. DRAG AND
DROP
3
● Drag and drop module: Rearranging module 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.
4. Drag and drop
module
4
● Normal Display style: Modules are displayed without
an explicit cue for drag and drop.
● Invitation to drag: Moving the mouse to a module’s
header changes the cursor to indicate that the item is
draggable.
● Dragging: The module being moved is dragged directly.
A ripped-out “hole” is exposed where the module was
dragged from.
● Invitation to Drop: Dragging the module opens up a
5. 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 drag list pattern defines interactions for rearranging items in a
list.
5
6. DIRECT SELECTION
6
● Toggle Selection: Checkbox or control-based
selection.
● Collected Selection: Selection that spans
multiple pages.
● Object Selection: Direct object selection.
● Hybrid Selection: Combination of Toggl selection
and object selection.
9. Contextual Tools
9
● Always-Visible Tools: Place contextual
tools directly in the contents.
● Hover-reveal Tools: Show contextual tools
on the mouse hover.
● Toggle-Reveal Tools: A master switch to
toggle on/off contextual tools for the page.
● Multi-level Tools: Progressively reveal
actions based on user interaction.
● Secondary Menu: Show a secondary
menu (usually by right-clicking on an
object).
10. It is an ergonomic principle that ties
the size of a target and its contextual
proximity to ease of use.
Fitts’s Law 10
11. Overlays 11
● Overlays are really just lightweight pop
ups.
● Browser pop-ups display a new
browser windows.
● Browser pop ups often display
browser interface controls.
12. Dialog Overlay
12
Detail Overlay
Dialog overlays replace the old style browser pop ups. Netflix provides
a clear example of a very simple dialog overlay.
Allows the user to present additional information when the user clicks or
hover over a link or section of content and this is the newest to web
application.
13. Activation
13
● Anti pattern: Mouse Traps.
● Anti pattern: Non-Symmetrical Activation/Deactivation.
● Anti pattern: Needless Fanfare.
● Anti pattern: Hover and Cover.
Input
Overlay
Input Overlay is a lightweight overlay that brings
additional input information for each field tabbed into
14. Inlays
14
● Dialog Inlay: A technique that is used to expand a
part of the page, revealing a dialog area within the
page. To smooth the introduction of the Dialog inlays
into the page.
● List Inlay: This 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.
● Detail Inlay: A common idiom is to provide
additional detail about items shown on a page.
15. Inlay Versus Overlay?
15
● 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 in there is a multi-step process.
● Use an inlay when trying to avoid covering
information on the page needed.
● In the dialog box.
16. Virtual Pages
16
● Overlays allow you to bring additional interaction
or content in a layer above the current page.
● We create the illusion of a larger virtual page.
● Pattern that support virtual pages include:
■ Virtual Scrolling
■ Inline Paging
■ Scrolled Paging
■ Panning
■ Zoomable User Interface
17. Virtual Scrolling
17
The traditional way of getting addition content by changing
pages in websites or scrolling.
Inline Paging
Instead of scrolling through content we just wanted to
make pagination feel less like a page switch by
switching the content instead of switching the page.
Scrolled Paging: Carousel
By combining both scrolling and paging together scrolled
paging carousel is obtained. Carousels work well for
time-based content.
18. Virtual Panning
18
Allowing users the freedom to roam in two-dimensional space.
This works great on a map like Google Maps.
Zoomable User
Interface
Unlike panning or flicking through a flat, two-dimensional
space, a ZUI allows the user to also zoom in to
elements on the page.
19. Process Flow
19
● Google Blogger: The website makes it easy to
create and publish blogs.
● The magic principle: A technique for getting away
from a technology-driven approach and discovering the
underlying mental model of the user.
21. Interactive Single-Page Process 21
● Consumer products come in a variety of shapes, sizes,
textures, colors, etc.
● This type of product selection is typically handled with a
multi-page workflow.
22. Inline Assistant Process 22
● Another common place where multiple pages are used to
complete a process is when adding items to a shopping cart.
23. Dialog Overlay
Process
23
● Any context switch is a chance for a user to leave the side.
● We seek an experience that has a little mental friction as
possible. But sometimes the step-by-step flow is necessary.
