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

  • Published on

  • View

  • Download

Embed Size (px)


  • Chapter 6Interface Design and Usability

  • InteractivityInteractivity:

    A defining characteristic of multimedia interfacesImplies both interaction and activityAllows users a new way to access and experience media contentNot limited to one-way flow of information (such as old-style broadcast television)

  • YouTubeYouTube, the worlds 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 InterfaceThe Nintendo 3DS features a single-touch interface that users can control using a finger or stylus.

  • Multi-Touch InteraceThe Apple iPad features a multitouch interface that responds to multiple touch points and gestures simultaneously.

  • Motion Tracking InterfacesThe Wii wireless controller senses movement in 3 dimensionsThe Kinect gaming system senses body movements for interaction

  • Motion Tracking InterfacesA teenager plays a video game with a wireless wheel remote.

  • Designing User Interfaces (recap)Specify project requirements Analyze the usersInvolve users in the design processUse an iterative design process in evaluating and modifying the interface

  • Components and FeaturesNavigationMenusVertical DropdownHorizontal DropdownAccordionTabs

  • Vertical and Horizontal Dropdown MenusLike many applications, the Safari Web browser provides a system of vertical dropdown menus for user navigation.The sidebar navigation system at combines an interactive sidebar component with a horizontal dropdown menu for secondary navigation.

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

  • TabsThe tabs are well-designed.

  • BreadcrumbsBreadcrumbs are useful for complex sites with many levels of information. Visitors to 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 incorporates a fat footer at the bottom of the page with additional internal and external links.

  • Above and Below the FoldAbove 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.

  • 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 InterfaceA 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 InfoPaginationArchivesTag Clouds

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

  • Managing ArchivesWould you rather look at this interface

  • or this one? Managing Archives

  • Tag CloudsThis tag cloud displays a collection of the all-time most popular tags generated by the users of Flickrs 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 FieldsInput prompts provide a visual hint to users entering data into a form field.

  • PersonalizationWith every search, acquires valuable information about the shopping and buying habits of its customers.

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

  • UsabilityUsability is a measure of peoples experience with a user interface.

  • UsabilityUsability is a measure of peoples experience with a user interface.

    It is measured in five essential criteria: LearnabilityEfficiencyMemorabilityError ManagementSatisfaction

  • Moving on to more WordPress work

  • *