Chapter 6 Interface 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)

YouTube YouTube, 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.

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

Carousel Interface A 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 Info 1.Pagination 2.Archives 3.Tag Clouds

Pagination Whenever 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.

Forms A 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.

Usability Usability 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