HUMAN COMPUTER INTERACTION UNITV Web Interface Designing Web

HUMAN COMPUTER INTERACTION UNIT-V Web Interface Designing Web Interfacs Contextual Tools Process Flow Prepared By T. SUGANYA M. E. ,

WEB DESIGN Designing Websites Displayed on the Internet Web design Focused on desktop, Mobile, Tablet Web designer works on Appearance : color, font , image Layout: structured, organized Easy to use Simple

6 PRINCIPLES FOR CRAFTING RICH WEB EXPERIENCE Make it Direct Shorter Keep Ex: Stay the length of interaction it Light weight contextual tools – rating stars, drag & drop on the Page : overlay Provide Invitations : call on action Use Transitions : focus attention React Immediately: live suggest, auto complete

IN-PAGE EDITING a separate form is presented with a series of input fields and a button to submit the change. Letting the user directly edit content on the page follows the principle of Make It Direct.

IN PAGE EDITING Single Edit Multi Field Inline Edit a single field Field Inline Editing Overlay Light Table multiple values Edit weigh Popup Edit Group Edit Module Configuration

Overlay Edit Over lay edit patterns bring the editing form just a layer above the page Ex: In a paint application a dialog overlay (save) is used for editing a folder name

Module Configuration is a common pattern Configure the amount & type of content

2. DRAG AND DROP Grab an object Drop it somewhere else Interesting Moments No. of States Events At least 15 events are available

DRAG & DROP ACTION

CONTEXTUAL TOOLS Principle : Keep it Light Weight Bring tools nearer to the content to make the interaction as lightweight Fitts’s Law The time to acquire a target is a function of the distance to and size of the target. Contextual Tools are the Web’s version of the desktop’s right-click menus Right click to reveal a menu Reveal Tools in context with the content

WAYS Always-Visible Tools Place Contextual Tools directly in the content. Hover-Reveal Tools Show Contextual Tools on mouse hover. Toggle-Reveal Tools master switch to toggle on/off contextual tools Multi-Level Tools Progressively reveal actions based on user interaction. Secondary Menus Show a secondary menu (by right-clicking).

ALWAYS-VISIBLE TOOL Gmail provides a single Always-Visible Tool in its list of messages—the star rating—for flagging emails Simply clicking the star flags the message as important

HOVER-REVEAL TOOLS Gmail provides a Hover-Reveal Tools in its list of messages To delete, make as unread, archive and snooze directly the mail list elements in the interface. The tools to accomplish these actions are revealed on mouse hover.

TOGGLE-REVEAL TOOLS Doesn’t show any Contextual Tools until a special mode is set on the page. When Edit is set to on then it displays option to edit the read only ticks

Before the Edit is set. Here Edit is the toggle option to reveal contextual tools • When the Edit option is set, • The deny checkboxes are displayed for each action in the list • it reveals additional contextual tools • Add • Remove

MULTI-LEVEL TOOLS Tools are not visible normally Mouse hover just highlights the song

MULTI-LEVEL TOOLS When click the song it shows a clover-leaf style menu indicates four operations play, rate, add share

MULTI-LEVEL TOOLS Second level actions are exposed when mouse hovering over share or rate

MULTI-LEVEL TOOLS • Desktop applications have provided Contextual Tools for a long time in the form of Secondary Menus. • These menus have been rare on the Web • Google Maps uses a secondary menu that is activated by a right-click on a route. It shows additional route commands Ex: Ms – Word when right click over a text it displays the secondary menu options font. paragraph, color

Ex: Route When mouse not hovered over , it doesn’t show additional information INVITAION When mouse is over the route, potential stops are marked with white circles

It shows an option to DRAG TO CHANGE THE ROUTE Right clicking on the item

PROCESS FLOW Creates a flow within a page itself instead of moving from page to page Types 1. 2. 3. 4. 5. of process flow Patterns Interactive single page process Inline Assistant Process Configuration Process Overlay Process Static Single Page Process

PROCESS FLOW Interactive single page process Ex: Online Shopping Cart Shirt-size-color-price All in one page controls To avoid multiple page flow to decide a specific shirt Inline Assistant process Previews and invalid choices can be shown in context and in real time

PROCESS FLOW Configurator Used Process to invoke delight in users Overlay Process Used to keep the user on single page by providing virtual space to conduct the conversation Static Put Single Page Process the complete flow on one page in a static single page process

Thank You