WWW.VIDYARTHIPLUS.

COM

SOLVED ANNA UNIVERSITY QUESTION PAPERS

B.E/ B.TECH Degree EXAMINATION, MAY/JUNE 2009 CS1015 USER INTERFACE DESIGN PART A (10 X 2 = 20 Marks) 1. State the impact of human characteristics on user interface design? Perception, memory, visual acuity, foveal and peripheral vision, sensory storage, information processing, learning, skill, individual differences skill the user interface design. 2. How can you evaluate the popularity of the web user interface? We can evaluate the popularity of web usage depend on the following. The number of Internet hosts has risen dramatically In 1984 hosts online exceeded 1,000; In 1987, 10,000; In 1989, 100,000; In 1990, 300,000; In 1992 hosts exceeded one million. In 1996, 10 million host In 2009, Billion host 3. State the few application where interaction speed has an effect on the user interface design? Reading, Listening, Speaking, Keying & hand printing these application effect on the user interface design. 4. What are the needs for requirement analysis? Needs for requirement analysis A product description is developed and refined based on input from user or marketing. Capturing information through direct and indirect methods. User should be familiar with any current system. Conceptual model of the system will be formulated. Creation of design standards. Establishment of usability goals.

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM 5. What are the Components of a window? Components of a Window A Typical window composed of elements such as Title Bar Frame Title bar Icon Window Sizing Buttons Whats This? Button Menu Bar Status Bar Scroll Bars Split Box Toolbar Command Area Size Grip Work Area

6. What is selection control? Selection control A selection control presents on the screen all the possible alternatives, conditions or choices that may exist for an entity, property or value. The relevant item or items are selected are displayed. It present all the alternaltives together visibly on a screen. selection control include radio button, check boxes, list boxes, drop down / popup list boxes & palettes. 7. What is the need for feed back in websites? Quick web response time- web pages were presented at pre established delays reduced. For web page requires more than 5 seconds, give the user something to do while waiting. Avoid frustrations to users. Quickly provide at the down loading padge top some text or link. 8. State how guidance improves the user interface? Following guidance improve the user interface. Online documentation provided on line to help people to do their work effectively. Computer based training, instructional of prompting messages and system messages serves as a development tool.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Help system assist the people is all activities.

9. Define visualization? Visualization is a cognitive process that allows people to understand information that is difficult to perceive, because it is either too voluminous or too abstract. Convey most relevant information. Maintaining top to bottom and left to right flow through the screen for visualization. 10. List the information search techniques. Various information search techniques. Specific fact finding(known item search) Extended fact finding. Phrase search in textual documents. Multimedia document search include photo search, map search, design search, sound search, video search and animation search. PART B (5 X 16 = 80 Marks) 11. a. Explain the characteristics and principles of user interface design.. (16 Marks) Key points. Explain the characteristics of the graphical user interface... (8 Marks) Refer A.U. NOV/DEC 2008 question no 11.a Explain the principles of web user interface design.. (8 marks) Refer A.U. NOV/DEC 2007 question no 11.b (Or) 11. b. what are the steps to be followed for creating an effective web user interface? Web interface design is essentially the design of navigation and the presentation of information. Proper interface design is largely a matter of property balancing the structure and relationship or menus, content and other linked documents. Steps for creating an effective web user interface Key points. Presentation of elements. Navigation Content Interaction Response time Visual style
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Task efficiency Consistency Integration Reliability

Refer A.U. NOV/DEC 2008 question no 11.b

12. a state the obstacles faced in user interface design? How is it improved by the designers. (16Marks) Obstacles. No body ever gets it right the first time. Development is chock-full of surprises Good design requires living in a sea of changes Making contract, to ignore change will never eliminate the need for change Designers need good tools.

Common Pitfalls No early analysis and understanding of the user's needs and expectations A focus on using design features Little or no creation of design element prototypes No usability testing No common design team vision of user interface design goals. Poor communication between members of the development team Pitfalls can be eliminated by following design commandments.

Explain the following design commandments Gain a complete understanding of users and their tasks. Solicit early and ongoing user involvement . Perform vapid proto typing and testing Modify and iterate design as much as necessary Integrate the design of all system components.

. Designing for people: The five commandments. The complexity of a graphical or web interface will always make any problems, while obstacles to design will always exist, pitfalls can be eliminated if the following design commandments in the designer's mind.

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM 1.Gain a complete understanding of users and their tasks. Customers expect a level of design sophistication from all interfaces including websites. The product, system or website must satisfy user's needs. / A wide gap exists between users and developers. 2. Solicit early and ongoing user involvement. Involving the users in design from the beginning provides knowledge about their jobs, tasks and needs. Involvement in design removes the unknown and gives the user a strong in the system. User involvement should be based on job or task knowledge not status or position. 3. Perform rapid prototyping and testing. Prototyping and testing the product will quickly identify problems and allowyou to develop solutions. Prototyping and testing must be continually performed during all stages of development to uncover all potential defects. 4. Modify and iterate the design as much as necessary. Establish user performance and acceptance criteria and continue testing and modifying until all design goals are met. 5. Integrate the design of all the system components. The software, documentation, help function and training needs are component of a graphical system or website and all should be developed concurrently. Concurrent development of all pieces will point out problems earlier in the design process allowing them to be more effectively addressed. (Or) 12. b. discuss in detail menus and their usage on screen design (16 Marks) Menus are a major from navigation through a system. Properly designed menu assist the user in developing a mental model of the system. Explain in structures of menus Refer A.U. NOV/DEC 2007 question no 12.b. (ii) Explain in functions of menus Refer A.U. NOV/DEC 2007 question no 12.b. (ii) Explain content of menus Content of Menus A menu consists of four elements: 1. Its context, 2. Its title, 3. Its choice descriptions, and 4. Its completion instructions.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM These concepts are introduced here and will be expanded in detailed guidelines to follow on succeeding pages. 1. Menu Context A menus context provides information to keep the user oriented. This kind of information is critical in complex or hierarchical menu systems, where loss of position or disorientation can easily occur. Human memory being what it is, where one is and how one got there all too easily slip from consciousness. Verbal linkage, spatial linkage, or both may be used to provide navigation feedback. Verbal linkage involves providing, on the current menu screen, a listing of choices made on previous menus that have led to this position. It also involves assuring the user that the displayed menu is the menu desired. Its title should mirror the option selected on the previous menu, and its content should reflect its title. Spatial linkage can be accomplished by graphic methods. Each succeeding menu screen can be displayed overlapping the previous menu screen so a succession of choices can be seen in a single view. A sense of progress and distance can then be easily ascertained. 2. Menu Title A menus title provides the context for the current set of choices. The title must reflect the choice selected on the previously displayed menu. 3. Choice Descriptions Choice descriptions are the alternatives available to the user. These descriptions can range from a mnemonic, numeric, or alphabetized listing of choices, to single words or phrases, to full sentences, or more. The style chosen will reflect the experience of the user (novice or expert), the nature of the choices (well-learned alternatives or not), the nature of the selection mechanism (keyboard or mouse), and the nature of the system (business system application or Web page). 4. Completion Instructions Completion instructions tell users how to indicate their choices. They may include the rationale for why the user is being asked to make this choice and the impact the choice will have on subsequent processes. Explicit instructions may be needed for first time or casual users of a system. Experienced users will find overly verbose instructions unnecessary. Explain general menu design guidelines Briefly with one (or) 2 lines. Formatting of Menus Phrasing of menu Selecting choices Navigation menus Formatting of Menus

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM The human-computer interface has a rich history of experimental studies with menus, the results of which can and have been applied to graphical screen and Web page menu design and presentation. What follows is a series of guidelines for formatting menus. Consistency Provide consistency with the users expectations. Provide consistency in menu Formatting, including organization, presentation, and choice ordering. Phrasing, including titles, choice descriptions, and instructions. Choice selection methods. Navigation schemes. Display If continual or frequent references to menu options are necessary, permanently display the menu in an area of the screen that will not obscure other screen data. If only occasional references to menu options are necessary, the menu may be presented on demand. Critical options should be continuously displayed, however. Presentation Ensure that a menu and its choices are obvious to the user by presenting them with a unique and consistent structure, location, and/or display technique. Ensure that other system components do not possess the same visual qualities as menu choices. Organization Provide a general or main menu. The top-level menu in a hierarchical menu scheme should be a general or main menu, consisting of basic system options. This will provide a consistent starting point for all system activities and a home base to which the user may always return. Display All relevant alternatives. Only relevant alternatives. Delete or gray-out inactive choices. Match the menu structure to the structure of the task. Organization should reflect the most efficient sequence of steps to accomplish a persons most frequent or most likely goals. Minimize number of menu levels within limits of clarity. For Web sites, restrict it to two levels (requiring two mouse clicks) for fastest performance. Be conservative in the number of menu choices presented on a screen. Without logical groupings of elements, limit choices to 4 to 8. With logical groupings of elements, limit choices to 18 to 24. Provide decreasing direction menus, if sensible.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Never require menus to be scrolled. Complexity Provide both simple and complex menus. Simple: a minimal set of actions and menus. Complex: a complete set of actions and menus. Item Arrangement Align alternatives or choices into single columns whenever possible. Orient for top-to-bottom reading. Left-justify descriptions. If a horizontal orientation of descriptions must be maintained Organize for left-to-right reading. Ordering Order lists of choices by their natural order, or For lists associated with numbers, use numeric order. For textual lists with a small number of options (seven or less), order by Sequence of occurrence. Frequency of occurrence. Importance. Semantic similarity. Use alphabetic order for Long lists (eight or more options). Short lists with no obvious pattern or frequency. Separate potentially destructive actions from frequently chosen items. Maintain a consistent ordering of options on all related menus. For variable-length menus, maintain consistent relative positions. For fixed-length menus, maintain consistent absolute positions. Groupings Create groupings of items that are logical, distinctive, meaningful, and mutually exclusive. Categorize them in such a way as to Maximize the similarity of items within a category. Minimize the similarity of items across categories. Present no more than six or seven groupings on a screen. Order categorized groupings in a meaningful way. If meaningful categories cannot be developed and more than eight options must be displayed on a screen, create arbitrary visual groupings that Consist of about four or five, but never more than seven, options. Are of equal size. Separate groupings created through either Wider spacing, or A thin ruled line. Provide immediate access to critical or frequently chosen items.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Line Separators Separate vertically arrayed groupings with subtle solid lines. Separate vertically arrayed subgroupings with subtle dotted or dashed lines. For subgroupings within a category, Left-justify the lines under the first letter of the columnized choice descriptions. Right-justify the lines under the last character of the longest choice description. For independent groupings, Extend the line to the left and right menu borders.

File
New Open Save Save As Short line Separator Print Print Setup Exit Fig Partial Line Separator

File
New Open Save Save As Print Print Setup Exit Fig Extended Line Separator

Line Separator

Selection Support Menus When a small, discrete set of functions is accessed 90 percent or more of the time Use Folded menus. When a small set of items is selected between 31 percent and 89 percent of the time and the other items are selected with lower frequencies Use Split menus. If there is no small, discrete set of items that is used 30 percent of the time or more Use traditional menus. Do not reorder menus. Item 1 Item 4 Item 6 V Item 1

Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

WWW.VIDYARTHIPLUS.COM

Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

Item 4 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 6 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7

V+ TEAM

WWW.VIDYARTHIPLUS.COM

Traditional Menu Split Menu Temporal Menu Phrasing the Menu A menu must communicate to the user information about The nature and purpose of the menu itself. The nature and purpose of each presented choice. How the proper choice or choices may be selected. Following are guidelines for creating menu titles, choice descriptions, Web navigation links, and menu instructions. The standard graphical system conventions inscribed on menus, intent indicators, keyboard equivalents, and keyboard accelerators are also described. 1. Menu Titles Main menu: Create a short, simple, clear, and distinctive title, describing the purpose of the entire series of choices. Submenus: Submenu titles must be worded exactly the same as the menu choice previously selected to display them. General: Locate the title at the top of the listing of choices. Spell out the title fully using either an Uppercase font. Mixed-case font in the sentence or headline style. Superfluous titles may be omitted. 2. Menu Choice Descriptions Create meaningful choice descriptions that are familiar, fully spelled out, concise, and distinctive. Descriptions may be single words, compound words, or multiple words or phrases. Exception: Menu bar items should be a single word (if possible). Place the keyword first, usually a verb. Use the sentence or headline style. Use task-oriented not data-oriented wording. Use parallel construction. A menu choice must never have the same wording as its menu title. Identical choices on different menus should be worded identically. Choices should not be numbered. Folder Menu

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM Exception: If the listing is numeric in nature, graphic, or a list of varying items, it may be numbered. If menu options will be used in conjunction with a command language, the capitalization and syntax of the choices should be consistent with the command language. Word choices as commands to the computer. 3. Menu Instructions For novice or inexperienced users, provide menu completion instructions. Place the instructions in a position just preceding the part, or parts, of the menu to which they apply. Present instructions in a mixed-case font in sentence style. For expert users, make these instructions easy to ignore by Presenting them in a consistent location. Displaying them in a unique type style and/or color. 4. Intent Indicators Cascade indicator: To indicate that selection of an item will lead to a submenu, place a triangle or right-pointing solid arrow following the choice. A cascade indicator must designate every cascaded menu. To a window indicator: For choices that result in displaying a window to collect more information, place an ellipsis (. . .) immediately following the choice. Exceptions do not use when an action Causes a warning window to be displayed. May or may not lead to a window. Direct action items: For choices that directly perform an action, no special indicator should be placed on the menu.

To a window indicator Cascade indicator Direct action item Figures Intent indicators.

Keyboard Shortcuts
Shortcuts include keyboard equivalents and
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM

Keyboard equivalent

keyboard accelerators.
Keyboard accelerator
Visually subdued keyboard accelerator

Keyboard equivalent

Keyboard accelerators.

CCELERATOR: DESIGNATES THIS ACTION: This Accelerators Designate This Action Ctrl+C Copy. Ctrl+N New. Ctrl+0 Open. Ctrl+P Print. Ctrl+S Save. Ctrl+V Paste. Ctrl+X Cut. Ctrl+Z Undo. F1 Display contextual help window. Selecting Menu Choices Menu items can be selected by pointing at the choice with a mechanical pointer, by pointing at the choice through the keyboard, or by keying a value designating the choice.

1. Initial Cursor Positioning If one option has a significantly higher probability of selection, position the cursor at that option. If repeating the previously selected option has the highest probability of occurrence, position the cursor at this option. If no option has a significantly higher probability of selection, position the cursor at the first option. 2. Choice Selection Pointers: Select the choice by directly pointing at it with a mechanical device such as a mouse or trackball pointer, or light pen, or pointing with ones finger. Visually indicate Which options can be selected.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM When the option is directly under the pointer and can be selected. Visually distinguish single- and multiple-choice menu alternatives. If pointing with a mechanical device is the selection method used The selectable target area should be at least twice the size of the active area of the pointing device or displayed pointer. In no case should it be less than 6 millimeters square. Adequate separation must be provided between adjacent target areas. If finger pointing is the selection method used The touch area must be a minimum of 20 to 30 millimeters square. The touch area must encompass the entire caption plus one character around it. Keyboard: If moving the cursor to a menu choice The up and down arrow keys should move the cursor up or down vertically oriented menu options. The left and right cursor keys should move the cursor left or right between horizontally oriented menu options. If keying a choice identifier value within an entry field Locate the entry field at the bottom of the last choice in the array of choices. Uppercase, lowercase, and mixed -case typed entries should all be acceptable. Selection/execution: Provide separate actions for selecting and executing menu options. Indicate the selected choice through either Highlighting it with a distinctive display technique. Modifying the shape of the cursor. Permit unselecting choice before execution. If a menu is multiple choice, permit all options to be selected before execution. Combining techniques: Permit alternative selection techniques, to provide flexibility. 3. Defaults Provide a default whenever possible. Display as bold text. 4. Unavailable Choices Unavailable choices should be dimmed or grayed out.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Do not add or remove items from a menu unless the user takes explicit action to add or remove them through the application. 5. Mark Toggles or Settings Purpose: Use to designate that an item or feature is active or inactive over a relatively long period of time. Use to provide a reminder that an item or feature is active or inactive. Guidelines: Position the indicator directly to the left of the option. For situations where several nonexclusive choices may be selected, consider including one alternative that deselects all the items and reverts the state to the normal condition.

Mark toggles or settings.

6. Toggled Menu Items Purpose: Use to designate two opposite commands that are accessed frequently. Use when the menu item displayed will clearly indicate that the opposite condition currently exists. Guidelines: Provide a meaningful, fully spelled-out description of the action. Begin with a verb that unambiguously represents the outcome of the command. Use mixed-case letters, with the first letter of each word capitalized.

Toggled menu item.

Web Site Navigation Menu

Navigation refers to the method people use to find what they want in a Web site.
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Navigation, and an efficient navigational structure, is the most important element in system usability. A simple and clear navigational structure is the backbone upon which all system features are draped. Links To navigate to a destination, people use available spatial and environmental information, a process called wayfinding . Wayfinding involves four stages: o Orientation, o Route decision, o Route monitoring, and o Destination recognition. Orientation. Ones current location relative to nearby objects and the destination must be determined. This is called orientation. Dividing a space into small parts and providing landmarks and meaningful signage (titles) aids orientation. The result is that locations have identities that are easier to remember. Route decision. A path must be chosen to get to the destination. Route decision making is improved by minimizing the number of navigational choices, and by providing signs or prompts at decision points. Site maps provide good mental representations of the space to be navigated, and are very useful if the space is large, complex, or poorly designed. Route monitoring. The chosen route must be monitored to confirm that it is leading to the proper destination. Connect locations with paths that have clear beginnings, middles, and ends. person should be able to gauge his or her progress as the path is followed. Breadcrumbs, a visible history of the path followed, aids monitoring, especially when a mistake has been made, and going back is necessary. Destination recognition. The destination, when it is found, must be easily recognized. To aid recognition, provide clear and consistent identities to destinations.

Fig- Breadcrumb trails.

Fig - Graphical or iconic navigation bars.

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM Fig - Command button navigation bar.

13. a. Discuss in detail; the components, characteristics and operation of windows.. (16 Marks) Window Characteristics A window is seen to possess the following characteristics: A name or title, allowing it to be identified. A size in height and width (which can vary). A state, accessible or active, or not accessible. (Only active windows can have their contents altered.) Visibility the portion that can be seen. (A window may be partially or fully hidden behind another window, or the information within a window mayextend beyond the windows display area.) A location, relative to the display boundary. Presentation, that is, its arrangement in relation to other windows. It may be tiled, overlapping, or cascading. Management capabilities, methods for manipulation of the window on the screen. Its highlight, that is, the part that is selected. The function, task, or application to which it is dedicated.

Components of a window Explain the elements of windows. Refer A.U. NOV/DEC 2007 question no 13.a. Operation of windows Explain in Operation of windows General Guide lines for window Operations. (1) Easy to use. Design easy to use and learn window operations. Operations must be carefully designed to achieve simplicity. Direct manipulation seems tobe faster than indirect manipulation for many windowing operations. (2)Minimize Number. Minimize the number of window operations needed to achieve a desired effect.

WWW.VIDYARTHIPLUS.COM

V+ TEAM

WWW.VIDYARTHIPLUS.COM (3) Easy navigation. Make navigating between windows easy and efficient Navigation between windows was the most frequent manipulation activity. (4)Setting up. Make the process of setting up windows easy to remember. Window arrangement (opening, resizing, moving etc) was a less frequent activity. Low frequency operations should always be easy to learn (5)User specific configurations. . ,....

Specific configurations should be capable of being created, named and recalled.

13. b. Compare device and screen based controls and discuss in detail about any 3 screen based controls (16 Marks) Device based control Device based control are input device People communicate with system through device b0ased controls They are pointing devices screen based control Screen based controls are called simply controls. It Provide the entry or selection of a particular value. They are graphic objects that represent the properties or operation of the objects. These controls provide specifiable aspect of a screen including screen text, headings and group boxes. Selecting the right control for the user and the task is often difficult. Various screen based controls are buttons, text entry / read only controls, selection controls, combination entry / selection
V+ TEAM

These device provided to assist and enhance the system communication

Device based controls making right choice is critical to system success. Device based controls classified into 2 types such as direct device , indirect device. Various device based controls are track ball, Track

WWW.VIDYARTHIPLUS.COM

WWW.VIDYARTHIPLUS.COM ball. Joystick, Graphic tablet, Light pen, Touch screen, Voice, Mouse, Keyboard controls, specialized operable controls, custom controls, presentation controls web controls.

Explain any 3 among the following screen based controls Operable controls Text entry / read only controls Selection controls Combination entry / selection controls Custom controls Presentation controls Web controls Refer A.U Nov/Dec 2007 Q.no 13.b (ii) 14. a. what is the need for internationalization? Discuss the related issues.. (16 Marks) Need for internationalization To make a product acceptable world wide, it must be internationalization. A system must also be designed to be usable by an almost unlimited range of people, being accessible to any one. Cultural and language boundaries, each with its own requirements, conventions, customs and definitions of acceptability. Explain the following factors for effective internationalization. Words and text Image and symbols Color, sequence and functionality Requirements determination and testing. (Or) 14. b (i) with suitable example how icons improve user interface.. (8) Explain briefly for the following key points. Influence on icon usability Choosing a successful icon Choosing images Creating images Icon animation and audition Design process Refer A.U Nov/Dec 2008 Q.no 14.b (Or) 14. b.(ii) discuss the role of multimedia in user interface design.. (8) Graphics Images
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Image maps Photography / pictures Video Diagrams Drawings Animation Audition Combining medium

15. a. elaborate on need and types of tests.. (16) Explain the need for test Purpose of usability testing Importance of usability testing Explain the following types of tests Heuristic evaluation Cognitive walk throughs Think aloud evaluation usability test Refer A.U Nov/Dec 2007 Q.no 15.a (Or) 15. b. What is the guidance to be followed for selection of software tools for generation of user interface? Explain (16) Introduction about software tools ................................ (4) Features of user interface building tools ........................ (4) User interface independence Methodology and notation Rapid prototyping Software support

User interface model can be created with following tools. Word processor Slide show presentation software Macromedia construction tools Apple hyper card
WWW.VIDYARTHIPLUS.COM V+ TEAM

WWW.VIDYARTHIPLUS.COM Macro mind director Asymetrix tool bar Finding the right tool by the following 6 main criteria.. (8) 1. Part of the application build using tool 2. Learning time 3. Building time 4. Methodology imposed 5. Communication with other system 6. Extensibility or modularity .

WWW.VIDYARTHIPLUS.COM

V+ TEAM