chapter 6 interface design and usability. interactivity interactivity: a defining characteristic of...
TRANSCRIPT
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