Presentation on theme: "Introduction to Human Computer Interaction"— Presentation transcript:
1Introduction to Human Computer Interaction Menu Selection, Form Fillin, and Dialog BoxesEarly systems used full screen menus with numbered itemsModern menusPull-downs, check-boxes, radio buttons, hyperlinksMenus offer cues to elicit recognitionDo not require the user to recall commandsUsers point or use keystrokes and get immediate feedbackWelcome to Lesson 7 Part A. In this unit we will discuss menu selection, form fillin and dialog box interface elementsEarly computer systems used full screen menus with numbered items.The screen would display options and the user would select the desired option.In the example the user can press “1” to “Start in MS DOS mode”, or “2” to start Windows, etc.Modern menus include Pull-downs, check-boxes, radio buttons, and hyperlinks.The advantage of modern menus is that the user can immediately identify that the desire items are contained within the menuSpecifically, modern menus Do not require the user to recall commandsThe Users only needs to point and click to get immediate feedback as to their selection
2Introduction to Human Computer Interaction Menu Selection, Form Fillin, and Dialog BoxesSimple menu selection is valuable whenUsers have little trainingIntermittent usageUnfamiliar with the terminologyAssist in structuring decision makingDesign also must considerTask related organizationPhrasing of itemsSequence of itemsShort-cutsSelection mechanisms (viz., keyboard, pointing device, touch screen, voice)Simple menus are especially valuable to the user when:Users have had little training and must be able to quickly use the applicationWhen users use the application occasionally and may not recall specific command (e.g., to change the font style)When users are Unfamiliar with the terminology such menus are useful to provide more detail regarding their choicesMenus also Assist the user in structuring their decision making by clearly providing available choicesWhen using menus, a few items that the UI designer needs to keep into consideration include:Task related organization (for example in the diagram the user can choose to print all slides or a sub-set of slides. If the user selects a subset, then the can specify which slides to print, in multiple ranges)Phrasing of items is also important (for example note the bounding box in the print example. The terminology is “Print Range” where the user can respond with “All” or enter a slide range.Sequence of items is also important in that the higher used items should be placed on the top of a drop-down list.Short-cuts are also necessary in that as users learn the application, they should not have to use a drop-down list for the most frequently used items (e.g., crtl-c (copy) and ctrl-v (paste) from the Windows Edit menu)Selection mechanisms (viz., keyboard, pointing device, touch screen, voice) also relate to how menus are displayed. For example, for non-touch cell phones the user must traverse menus to find items. For touch devices, the user does not have to traverse as many menus. This is due to the fact that for most touch devices, they are one touch actionable. This means for example that the user can press “Home” directly on the keyboard, and not have to highlight the “Home” button and then select OK.)
3Introduction to Human Computer Interaction Task-Related Menu OrganizationGoal: create sensible, comprehensible, memorable, and convenient organization relevant to the user’s taskHierarchical decompositionChaptersBiological TaxonomyRestaurant MenusDifficulty in classifying an item as belonging to only one categoryCould lead to forming a networkThe menu organization should support the task. The goal of the user interface designer should be tocreate sensible, comprehensible, memorable, and convenient organization relevant to the user’s taskIn many experiences information is hierarchically decomposed to facilitate our processing of the information.Examples include:Books that are organized by chapters,Biological taxonomies andRestaurant menusIn some cases an object can belong to more than one category. I this case, the relationships may be defined best by a network strucuture.
4Introduction to Human Computer Interaction Example: Music concert ticket systemMenus for types of sports (e.g., MLB Playoff, NFL football, etc.)Menus for sports locationsMenus for datesSearch by teamInterface objects: tabs, hyperlinks, search boxesLet’s look at stub hub as an example of a menu structure.Menus are used to select type of event (e.g., sports such as MLB Playoff, NFL football, etc.)Menus to specify sports locationsMenus to specify dates of eventsInterface objects: used include tabs, hyperlinks, and search boxes
5Introduction to Human Computer Interaction Menu SystemsBinary MenusSingle and Multi-Choice Binary MenusMenu systems include:Binary menus (e.g., Save or Don’t Save)Single Choice Menus which includeOption menus (e.g., a drop-down of fruits)Combo menus (which combine drop-down and direct entry of data by the user)Radio buttons (where the items are mutually exclusive)Multi-choice menus include:Check-boxesScrolling list field menus where the user can select multiple rows in the list
6Introduction to Human Computer Interaction Menu SystemsPull-downAlways available via a top menu barItems that are not available can be grayed outShort-cuts (e.g., Ctrl-S)CascadeAdditional menu systems include:Pull-down menus which are always available to the user on the top menu barItems that are not available from the list can be disabled (or grayed out)Short-cuts can be associated with items that are frequently selectedCascading menus structure information in a hierarchical manner
7Introduction to Human Computer Interaction Menu SystemsCascadeDisplay icons to facilitate learningDisplay short-cuts to facilitate learningEnhancements to pull-down menus include:Adding icons adjacent to the menu itemAdding short-cuts to frequently select itemsProviding dots to indicate that if the an item is selected, then a dialog box will be displayedThree dots to indicate leads to dialog box
8Introduction to Human Computer Interaction Menu SystemsToolbars and palettesSupport single click action that applies to a displayed objectUser controls items in the toolbar or paletteUser controls location of toolbar or paletteMenu systems also include Toolbars and palettes.The power of toolbars and palettes is that they both Support single click action that applies to a displayed object (e.g., save a file)Most applications also support the User customization of items in the toolbar or paletteIn additional most applications allow the user to control location of toolbar or palette (e.g., attached to main toolbar or detached)
9Introduction to Human Computer Interaction Menu Systems for Long ListsList BoxesSingle vs. Multi-SelectAuto-completeFisheyesLet’s look at three menu system that are designed to support long lists of items.The first menu type List boxes. List boxes can be single select or multi-select as displayed in the diagrams.Auto-complete takes the users input and matches the entry with a list of available items. Check out the Fisheye link to interact with a fisheye view menu.Finally, a Fish-eye view uses zooming to expand sections of the list so the items can be easily located.
10Introduction to Human Computer Interaction Two-dimensional menusProvides a good overview of the choicesReduces the number of required actionsAllows for rapid selectionUseful for web page design (minimizes scrolling – single screen overview)Two dimensional menus follow a grid layout. The advantage of two dimensional menus includeThey Provide a good overview of the choicesThey Reduces the number of required actions by the userThey Allow for rapid selection of itemsThey are Useful for web page design (since they minimizes scrolling and provide a single screen overview)Note the two-dimensional menu in the diagram of the Peapod web-site
11Introduction to Human Computer Interaction Embedded Menus and HotlinksPermit items to be viewed in contextKeeps users focused on the task and objects of interestThe University of Delaware (UD) is the largest university in the U.S. state of Delaware. The main campus is located in Newark, with satellite campuses in Dover, Wilmington, Lewes and Georgetown. It is medium-sized — approximately 16,000 undergraduate and 3,000 graduate students. Although UD receives public funding for being a land-grant, sea-grant, space-grant and urban-grant state-supported research institution, it is also privately chartered. At present, the school's endowment is valued at about $ billion US. The University of Delaware is ranked 71st by US News in the category of nationwide "Top Schools."  In 2008, UD was ranked No. 20 in the in-state category of Kiplinger's Personal Finance magazine's list of the 100 Best Values in Public Colleges.The school from which the university grew was founded in 1743, making it one of the oldest in the nation. However, the University of Delaware was not chartered as an institution of higher learning until Its original class of 10 students included George Read, Thomas McKean, and James Smith, all three of whom would go on to sign the Declaration of Independence.The school has, among others, engineering, science, business, education, urban affairs and public policy, public administration and agriculture programs, as well as programs in history, chemical engineering, chemistry and biochemistry, drawing as it does from the historically strong presence of the nation's chemical and pharmaceutical industries in the state of Delaware. In 2006, UD's engineering program was ranked number 10 in the nation by The Princeton Review. It is one of only four schools in North America with a major in art conservation.Embedded menus and hotlinks (such as hyperlinks) provide menu options to the user while the can view the information in context.The advantage being that the users can keep their focus.
12Introduction to Human Computer Interaction Menu SystemsSingle MenuLinear SequenceWelcome to Lesson 7 Part BMenu systems pertain to how users navigate an application.A single menu system involves the user making a choice within a single screen.A linear sequence involves the user sequentially moving through an application in a series of menus.An acyclic network involves the user making choices on specific screens and depending on the choice navigates to the next level of the application, however the user cannot traverse to a prior levelA cyclic network does permit the user to traverse to a previous levelAcyclic NetworkCyclic Network
13Introduction to Human Computer Interaction Acyclic and Cyclic Menu NetworksMental model of the structure and of relationships between menusLack a single parent menuBackward traversals toward the main menu may not map to a single parentAcyclic and cyclic menus often become complex and make it difficult for the user for form a mental model of the application.Also, each back step in the traversals toward the main menu may not map to a single parent. This may cause the user to lose orientation in the application.Acyclic NetworkCyclic Network
14Introduction to Human Computer Interaction Linear Menu Sequence (e.g., wizards)The following is an example of a linear sequence menu. These types of menus are often used for wizard type applications (e.g., set-up a printer)Linear Sequence
15Introduction to Human Computer Interaction Simultaneous MenusMultiple active menus on the screenChoices can be entered in any orderRequire more display spaceShopping.comSimultaneous Menus allow the user to specify a criterion from multiple categories. In the example, the user’s task is to purchase a PC laptop. They can filter the criteria based on Price range, brand, processor type or other such criteria.An advantage of this type of menu structure is that there are Multiple active menus on the screenAn additional advantage is that Choices can be entered in any orderHowever, one draw-back is that the menu structure Requires more display spaceCheck-out the Shopping.com website for an example.
16Introduction to Human Computer Interaction Tree-structured MenusDependent on the definition of categoriesUser familiarity improves performanceIf groupings are unfamiliar, performance will sufferUse terminology from the user’s task domainDepth – number of levels (ideally less than 3 or 4)Breadth – number of items per each level (ideally 4 to 8 items)Breadth is preferred over depthTree-structured Menus are a commonly used selection mechanism.The mechanism works well when there are well defined categoriesThe more familiar the user is with the categories, the better the performanceHowever, If groupings are unfamiliar, performance will suffer since the user will have trouble locating a specific functionFor these types of menus, it is important to Use terminology from the user’s task domainTree structured menus have two dimensions: Depth – number of levels (ideally less than 3 or 4)And Breadth – number of items per each level (ideally 4 to 8 items)Breadth is preferred over depth in terms of having the user be able to quickly locate specific functions, and accessing those functionsBreath = 11Depth = 2
17Introduction to Human Computer Interaction Content OrganizationTask-related grouping in tree structuresCreate groups of logically similar itemsE.g., Countries = Level 1; States = Level 2; Cities = Level 3Form groups that cover all possibilitiesE.g., Ages = 0-9, 10-19, 20-29, > 30Make sure items are not overlappingE.g., “Entertainment and Event” versus “Concert and Sports”Use familiar terminologyE.g., Day/Night versus 6am to 6pm and 6pm to 6amContent organization is critical when using tree structures. As such, the following principles can assist the UI designer in improving the usability of their application:Create groups of logically similar itemsE.g., Countries = Level 1; States = Level 2; Cities = Level 3Form groups that cover all possibilitiesE.g., Ages = 0-9, 10-19, 20-29, > 30 and Make sure items are no overlapping groupsAnd Use familiar terminologyE.g., Day/Night versus 6am to 6pm and 6pm to 6am
18Introduction to Human Computer Interaction Item Presentation SequenceAlphabetic sequence of termsGrouping of related itemsMost frequently used items firstMost important items firstTime (chronological)Numeric ordering (ascending or descending)Physical propertiesIncreasing/decreasing length, temperature, etc.AdaptabilityAutomatically list most frequently selected to the topCan be confusingThis form of adaptability is likely to have a negative impact on performanceInfrequently used items not appearing in drop-downsHybrid: Most frequent at top, alphabetic thereafterAlso, for tree structures, Item Presentation Sequence can be based on various criteria:Alphabetic sequence of terms (for example, the diagram displaying font styles)Grouping of related items (for example, the File menu: saving, printing, recently opened files)Most frequently used items firstMost important items firstTime (chronological – most recent first, versus oldest first)Numeric ordering (ascending or descending for number ranges in menus)And Physical properties (e.g., Increasing/decreasing length, increasing/decreasing temperature, etc.)Adaptability refers to menus that adjust to user previous selections.One approach is to Automatically list most frequently selected on the topHowever, this Can be confusing and is likely to have a negative impact on performanceInfrequently used items not appearing in drop-downs is a second strategyA third approach is a Hybrid: where the Most frequently selected items are at top, and the other items are listed alphabetically thereafter
19Introduction to Human Computer Interaction Menu Maps (also site maps)Menu maps, or site maps, provide an overall view of a website.Specifically, the menu map does not use extensive graphics, but rather localizes the key hyperlinks and groups them into appropriate categories.
20Introduction to Human Computer Interaction Menu LayoutTitlesSingle menus – use a title that identifies the situation (e.g., warning)Linear menus – titles should represent the stage in the processTree menus – use a meaningful term for the root (e.g., “Main Menu”)Menu layout has multiple design considerations. One consideration is the menu Title.Single menus – use a title that identifies the situation (e.g., warning)For Linear menus – the titles should represent the stage in the processFor Tree menus – the UI designer should use a meaningful term for the root (e.g., “Main Menu”, or in the example “Vodafone Live” with the main menu icons on display)
21Introduction to Human Computer Interaction Menu LayoutPhrasing of menu itemsUse familiar, concise termsThe first word should allow easy discrimination between itemsE.g., “Size of type” versus “Set the type size”Graphical layout and designConsistent layouts improve:The locating of informationPredictabilityTitles (typically left justified)Item placement (typically left justified)Error messages (consistent location)Other principle related to menu layout include:Phrasing of menu items, that is Use familiar, concise termsAs a general rule The first word should allow easy discrimination between items E.g., “Size of type” versus “Set the type size”The menu objects should have Consistent layouts to improve the tasks ofThe locating of informationAn Predicting where items are to be locatedIn general:Titles are typically left justifiedItem are typically left justifiedAnd Error messages display in a consistent location
22Introduction to Human Computer Interaction Menu LayoutFont Style as an indicator of levelIndicators of stage in a linear menuMain MenuRevenue ManagementDenied AmountsPayer+---------+-With regard to indicators as to where in the menu structure the user is located, some type of visual indicator shouldBe used, for example:Font Style (however, the UI designer should take care with over using both different font styles and different font sizes)In a very simple example, note the indicator as to the stage in the process, where is it is easy to determine stage one from stage 5.This concludes Lesson 7