chapter 6 interface design and usability. interactivity interactivity: a defining characteristic of...

Chapter 6Interface Design and Usability

Interactivity

Interactivity:

A defining characteristic of multimedia interfaces

Implies both interaction and activity

Allows users a new way to access and experience media content

Not limited to one-way flow of information (such as old-style broadcast television)

YouTubeYouTube, the world’s largest distributer of video content, appeals to a new generation of “interactive and active” users who want to produce and distribute, as well as consume media fare.

Single-Touch Interface The Nintendo

3DS features a single-touch interface that users can control using a finger or stylus.

Multi-Touch Interace The Apple iPad

features a multitouch interface that responds to multiple touch points and gestures simultaneously.

Motion Tracking Interfaces

• The Wii wireless controller senses movement in 3 dimensions

• The Kinect gaming system senses body movements for interaction

Motion Tracking Interfaces

A teenager plays a video game with a wireless wheel remote.

Designing User Interfaces (recap)

1. Specify project requirements

2. Analyze the users

3. Involve users in the design process

4. Use an iterative design process in evaluating and modifying the interface

Components and Features

Navigation

Menus

1. Vertical Dropdown

2. Horizontal Dropdown

3. Accordion

4. Tabs

Vertical and Horizontal Dropdown Menus

Like many applications, the Safari Web browser provides a system of vertical dropdown menus for user navigation.

The sidebar navigation system at Amazon.com combines an interactive sidebar component with a horizontal dropdown menu for secondary navigation.

Accordion

This horizontal accordion component expands to reveal the contents of the section whenever the user clicks on one of the six menu options.

Tabs

The TrackMyPeople.com tabs are well-designed.

Breadcrumbs

Breadcrumbs are useful for complex sites with many levels of information.

Visitors to Newegg.com can quickly jump to a previous page by clicking on any of the links in the breadcrumb trail.

Breadcrumbs in WordPress can be done with a plugin

Fat Footer

Last.fm incorporates a fat footer at the bottom of the page with additional internal and external links.

Above and Below the Fold

Above the Fold: refers to the part of a Web page or a screen that is visible without scrolling.

Below the Fold: refers to the part of the Web page or a screen that is visible only after scrolling.

ThumbnailsClearleft.com uses unconventional stamp-shaped thumbnails to preview websites designed by them.

Carousel InterfaceA carousel interface is used in these examples by Time and Apple.

Carousel Interface

A carousel interface option is built into Apple OS X and can be used for browsing attached storage drives and specific file collections such as your music library from within iTunes.

Dealing with Lots of Info1. Pagination

2. Archives

3. Tag Clouds

PaginationWhenever possible, add pagination to the interface of multipage or multiscreen sites.

Managing Archives…

Would you rather look at this interface…

…or this one?

Managing Archives…

Tag Clouds

This tag cloud displays a collection of the “all-time” most popular tags generated by the users of Flickr’s photo sharing website.

FormsA typical form layout with text fields, dropdown lists, radio buttons, and checkboxes for user input.

WordPress has plugins for creating forms.

Form Fields

Input prompts provide a visual hint to users entering data into a form field.

Personalization

With every search, Amazon.com acquires valuable information about the shopping and buying habits of its customers.

Customization

You can customize your iGoogle interface cosmetically by changing the theme and by adding or removing gadgets.

Usability

Usability is a measure of people’s experience with a user interface.

UsabilityUsability is a measure of people’s experience with a user interface.

It is measured in five essential criteria:

1.Learnability

2.Efficiency

3.Memorability

4.Error Management

5.Satisfaction

Moving on to more WordPress work