Scribd
Upload
42 views

Assignment: Subject: HCI: Hci - Web Interface Design

This document discusses principles and patterns for designing web interfaces, including: 1. It describes 5 principles for web interface design: make it direct, keep it lightweight, stay on the page, provide an invitation, and use transitions. 2. It then covers several patterns for in-page editing, including inline single-field editing, inline multi-field editing, overlay editing, and module configuration. 3. It also discusses drag-and-drop interactions, including rearranging modules, lists, and objects, as well as invoking actions by dropping onto targets.

Uploaded by

RIYODOON
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
42 views

Assignment: Subject: HCI: Hci - Web Interface Design

This document discusses principles and patterns for designing web interfaces, including: 1. It describes 5 principles for web interface design: make it direct, keep it lightweight, stay on the page, provide an invitation, and use transitions. 2. It then covers several patterns for in-page editing, including inline single-field editing, inline multi-field editing, overlay editing, and module configuration. 3. It also discusses drag-and-drop interactions, including rearranging modules, lists, and objects, as well as invoking actions by dropping onto targets.

Uploaded by

RIYODOON
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Assignment: HCI - WEB INTERFACE DESIGN

Subject: HCI
Group Name
1. Ismail Mohamed abdullahi
2. Abdifatah Rabiic Ahmed
3. Daahir ahmed soomow
4. Ahmed abdinuur yasiin
HCI - WEB INTERFACE DESIGN

Designing Web Interfaces


• Principle One: Make It Direct
• Principle Two: Keep It Lightweight
• Principle Three: Stay on the Page
• Principle Four: Provide an Invitation
• Principle Five: Use Transitions
WEB INTERFACE DESIGN

•Principle Six: React Immediately


1. Make It Direct
In Flickr you can edit the photo title just like this.
Flickr’s main way to edit photos is much more direct.

In-Page Editing
Drag and Drop
Direct Selection
Page Editing

In-Page Editing
Single-Field Inline Edit
Editing a single line of text.
Cont..

Discoverability

• Just how discoverable is this feature? 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)
Multi-Field Inline Edit
Multi-Field Inline Edit describes this approach:
editing multiple values inline
Cont..

Readability versus editability


•Readability is a primary concern during display. But the best way to
present editing is with
•the common input form. The user will need some or all of the
following:
Cont…

• 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)
Overlay Edit
Editing in an overlay panel.
• Overlay Edit patterns bring the editing form just a layer above the page.
• Instead a lightweight pop-up layer (e.g., dialog) is used for the editing pane.
Cont…

•Non-editing state Invitation to edit

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.
Cont…

•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. Etc.,
Table Edit
Editing items in a grid.
Non-editing state Invitation to edit
Cont..
Editing

Group Edit
Changing a group of items directly.
•On the iPhone’s home screen, the icons are normally locked down. However, there is a way to switch
into a special Group Edit mode that allows you to rearrange the icon’s positions by drag and drop.
Cont…

Once
the
Group
Edit
mode
• is
entere
d,
•you can add another category
Module Configuration
Configuring settings on a page directly
•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
Cont…

Drag and Drop


Interesting Moments
•How will users know what is draggable?
•What does it mean to drag and drop an object?
•Where can you drop an object, and where is it not valid to drop an
object?
•What visual affordance will be used to indicate draggability?
•During drag, how will valid and invalid drop targets be signified?
Drag and Drop

• Do you drag the actual object?


• Or do you drag just a ghost of the object?
• Or is it a thumbnail representation that gets dragged?
• What visual feedback should be used during the drag and drop interaction?

The Events
Page Load
Mouse Hover
Mouse Down
Drag Initiated
Drag Leaves Original Location
Drag Re-Enters Original Location
Drag Enters Valid Target
The Events

Drag Exits Valid Target


Drag Enters Specific Invalid Target
Drag Is Over No Specific Target
Drag Hovers Over Valid Target etc.,
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,
The Actors

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
Purpose of Drag and Drop

•Changing relationships between objects. – Drag and Drop Action


•Invoking actions on a dropped object. – Drag and Drop Collection
•Maintaining collections through drag and drop.
•Normal display style Invitation to drag

•Dragging
Purpose of Drag and Drop

Example - Placeholder target


• A placeholder target always shows where the dragged module will end after
the drop; module 1 is being dragged from the upper right to the position
between modules 3 and 4
Example - Placeholder target

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.
Drag and Drop List

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.
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.
Direct Selection

• 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.
END

You might also like