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

33
Chapter 6 Interface Design and Usability

Upload: kathryn-dalton

Post on 13-Jan-2016

227 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Chapter 6Interface Design and Usability

Page 2: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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)

Page 3: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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.

Page 4: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Single-Touch Interface The Nintendo

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

Page 5: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Multi-Touch Interace The Apple iPad

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

Page 6: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Motion Tracking Interfaces

• The Wii wireless controller senses movement in 3 dimensions

• The Kinect gaming system senses body movements for interaction

Page 7: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Motion Tracking Interfaces

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

Page 8: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 9: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Components and Features

Navigation

Menus

1. Vertical Dropdown

2. Horizontal Dropdown

3. Accordion

4. Tabs

Page 10: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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.

Page 11: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Accordion

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

Page 12: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Tabs

The TrackMyPeople.com tabs are well-designed.

Page 13: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 14: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Fat Footer

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

Page 15: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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.

Page 16: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 17: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 18: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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.

Page 19: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Dealing with Lots of Info1. Pagination

2. Archives

3. Tag Clouds

Page 20: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 21: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Managing Archives…

Would you rather look at this interface…

Page 22: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

…or this one?

Managing Archives…

Page 23: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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.

Page 24: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

WordPress has plugins for creating forms.

Page 25: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Form Fields

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

Page 26: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Personalization

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

Page 27: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Customization

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

Page 28: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Usability

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

Page 29: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

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

Page 30: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction

Moving on to more WordPress work

Page 31: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction
Page 32: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction
Page 33: Chapter 6 Interface Design and Usability. Interactivity Interactivity:  A defining characteristic of multimedia interfaces  Implies both interaction