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

  • Published on
    13-Jan-2016

  • View
    213

  • Download
    1

Transcript

Chapter 6Interface Design and UsabilityInteractivityInteractivity: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 interactionMotion 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 interfaceComponents and FeaturesNavigationMenusVertical DropdownHorizontal DropdownAccordionTabsVertical 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 Amazon.com 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 TrackMyPeople.com tabs are well-designed.BreadcrumbsBreadcrumbs 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 pluginFat FooterLast.fm 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. 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 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 CloudsPaginationWhenever possible, add pagination to the interface of multipage or multiscreen sites.Managing ArchivesWould you rather look at this interfaceor this one? Managing ArchivesTag 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, Amazon.com 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 ManagementSatisfactionMoving on to more WordPress work*

Recommended

View more >