LAB MANUAL

HUMAN COMPUTER INTERACTION

COMPUTER ENGINEERING – SEM VIII

FR. CONCEICAO RODRIGUES COLLEGE OF ENGINEERING Department of Computer Engineering

Class: B.E. Computer Engineering Semester: VIII Subject: Human Computer Interaction (HCI) (Elective) Term work: Term work should consist of at least 8 practical experiments and two

assignments covering the topics of the syllabus

List of Experiments

It is proposed to complete a project, with a team of minimum 2 and maximum 3. The purpose of the project is focused on User interaction and NOT on the implementation of the Entire project. The project will consist of Designing HCI for various projects. The partial list of projects could be (select ONE from the following):

1. Interface for online shopping website. 2. Mall Map 3. e learning web site 4. Tele-shopping 5. Video/ Audio on demand web site 6. Online banking 7. ATM interface 8. Automatic vending machine for Drinks 9. Travel reservation system 10. Booking of movie tickets 11. Route finder 12. Railway enquiry 13. Students’ Kiosk for institute’s information 14. Interface for waiter for billing (table wise etc.) 15. Online buying of books. 16. Online trading on Stock market 17. Web site for buying Car 18. University web site 19. Week end holidays 20. Pass port application tracking system 21. Zoo information kiosk 22. Museum Information Center 23. Help desk for Hotel 24. Hospital Management 25. Servicing center for Automobile 26. Patients information storage 27. Website for Tuition class 28. Catering Service ( on-line chef) 29. Marriage burro 30. Placement agency 31. Event management 32. Web site for Device drivers and service center 33. Just Dial type web site 34. Website for promotions of new construction projects.

Students are needed to submit the two versions of the project. The first version will be user interaction based on non-familiarity of UI principles. The second version will show how the students have understood the principles of UI. Every experiment will have conclusion, explain the changes made in version 1 and two. Experiment No. Title

1 Importance of Good Design 2 Advantages of Graphical Interface 3 Use of interactive devices 4 Visually pleasing composition 5 Organizing screen elements 6 Choosing colors 7 Develop system menus and navigation schemes 8 Provide effective feedback, guidance and assiatance

Assignment 1

1) Explain technology Considerations in interface Design. 2) Explain the user Interface Design process. 3) What are possible uses of colors and problems associated with it? Give

guidelines to choose proper color. 4) Speech Recognition and speech generation.

Assignment 2

1) Types of windows. 2) Components of User Interface, such as Text Boxes, List Boxes, Messages,

Icons, Multimedia 3) Explain proper device based control 4) What are mental models? Importance of the same in User interface design.

Experiment No. 1 Objectives: To understand Importance of Good Design Description: As students are not aware of characteristics of a good interface, there could be lacunas in the interaction screens designed by them. These could be because of

1. Not understanding the users’ profile (such as age, educational background etc.), hence not providing the ease of use.

2. The flow of information capturing is not appropriate, as the Business Logic is not understood.

3. Physical constraints of the user not understood, screen to crowded with options, font size very small etc. No menus, hierarchical ordering of information etc.

4. Wrong Selection of appropriate type of interaction devices, always use mouse or pointing devices

5. Ambiguous messages. 6. No feed back provided for actions or progress 7. Less use of graphics 8. Wrong/ over usage of colors 9. Not organizing the layout properly 10. NO testing

Stunent’s task: Considering your project as a sample, design user interface screens. You are required to design TWO interaction screens, one without knowing the principles and one after understanding the principles. The second version should clearly indicate usage of the principles. The conclusion should include answers of the questions:

1. Explain the importance of good design and benefits of good design. 2. What are the steps involved in designing a Good User Interface?

Experiment No. 2 Objectives: To understand Advantages of Graphical Interface Description: Graphics revolutionized design and the user interface.The older text-based screen possessed a one-dimensional, text-oriented, form-like quality Graphic screens assumed a three-dimensional look. Information floated in windows, small rectangular boxes seemed to rise above the background plane. Windows could also float above other windows. Controls appeared to rise above the screen and move when activated. Lines appeared to be etched into the screen. Information could appear, and disappear, as needed, and in some cases text could be replaced by graphical images called icons. These icons could represent objects or actions. Graphic presentation of information utilizes a person’s information-processing capabilities much more effectively than other presentation methods. Properly used, it reduces the requirement for perceptual and mental information recoding and reorganization, and also reduces the memory loads. It permits faster information transfer between computers and people by permitting more visual comparisons of amounts, trends, or relationships; more compact representation of information; and simplification of the perception of structure. Graphics also can add appeal or charm to the interface and permit greater customization to create a unique corporate or organization style. Students Task: Considering your project as a sample, design user interface screens using graphical interface. Comparison of Command line versus Graphical Interface. You are required to design TWO interaction screens, one without using graphical interface, text boxes, combo boxes etc. and one using icons, text boxes, lists etc. The second version should clearly indicate advantages of graphical interface. The conclusion should include answers of the questions:

1. Advantages of Graphical Interfaces? 2. Limitations of Graphical interfaces.

Experiment No 3

Objectives: To understand importance of interactive devices in good interface design Description: Device-based controls often called input devices are the mechanism through which people communicate their desire to the system. The important task in designing interface is to select proper devise bsed control that best suits your application. Developer must do the following

- Identify characteristics and capabilities of various device based controls - Select the proper controls for user the user and task

Student’s task: Considering your project as a sample, design user interface screens using various interactive devices. You are required to design TWO interaction screens, one without using interactive devices, one using interactive devices. The second version should clearly indicate advantages of interactive devices. The conclusion should include answers of the questions: 1.Any specific interactive devices used to make the applicaions usable for a) People with difficulty using keyboard b) People with visual disability c) People who are more than 45 years old.

Experiment No 4

Objectives: To provide Visually appealing interface to the clients. Description: Visually appeal is terribly important today because most human-computer communication ocuurs in the visual relm. A lack of visually pleasing composition is disorienting, obscures the intent and meaning, and slows down and confuses the user. Visual appeal is provided by providing meaningful contrst between the screen elements, providing 3D representation, creating spatial grouping, aligning screen elements, choosing colors and graphics. Student’s task: Considering your project as a sample, design Visually appealing interface by using

- meaningful contrast between sceeen elements - Grouping and Aligning screen elements - Using colors and graphics effectively.

You are required to design TWO interaction screens, one without using Visually appealing interface, One using Visually appealing interface . The second version should clearly indicate advantages of Visually appealing interface. The conclusion should include answers of the questions:

1. Explain importance of visually appealing interface. 2. What features of GUI in your project makes the interfcae visually appealing.

Experiment No 5 Objectives: 1) Choosing a proper screen based control 2) To understand the principle of good screen designing Description: Screen based controls are the elements of a screen that constitute its body. Choosing and selecting appropriate screen elements is an important task in screen designing. In order to chhose appropriate screen controls, designer must first identify the characteristic and capabilities of various screen based controls such as buttons, text entry, reads only controls, combibnation entries/ slection controls, custom controls etc. After selecting the controls for screen designing, they must be presented and standard and consistent manner and used exactly as its design intended. Visual clarity is achieved when the display elements are organized and presented in meaningful and understandable way. A clear and clean organization of screen elements makes it easier to recognize screen’s essential elements and to ignore secondary information when appropriate. Student’s task: Considering your project as a sample, design user interface by selecting the best and appropriate screens elements (eg. Textboxes, combobox, icons, labelsetc.) suitable for you project. Present these elements on the screen to increase the usability , clarity, predictability of your interfcae. While designing the students must concentrate on

- Consistency in design - A visuallyb pleasing composition - A logical and sequential order - The presentation of the proper amount of information - Alignment of the screen items

Students should avoid

- Cluter created by indistict elements - Random placement - Confusing pattern

You are required to design TWO interaction screens, one without using principles of good screen design (That is without grouping and aligning etc.) and one using using principles of good screen design. The second version should clearly indicate its over the first version The conclusion should include answers of the questions:

1. Are appropriate screen elements are used in your project? List all the components used and their relevance.

2. Explain how your screen design is able to achieve following goals. - Reduce visual work - Reduce intellactual work - Reduce memory work - Increase predicatbility

Experiment No 6 Objectives: Choosing proper colors. Description: Color adds dimension, or realism, to screen usability. Color draws attention because it attracts a person’s eye. If used properly, it can emphasize the logical organization of information, facilitate the discrimination of screen components, accentuate differences among elements, and make displays more interesting. If used improperly, color can be distracting and possibly visually fatiguing, impairing the system’s usability. Student’s task: Considering your project as a sample, design user interface by choosing proper background and foreground color suitable for your application. Also appropriate color should be selected for highlighting selection. While choosing colors for display, one must consider these factors:

- The human visual system - The possible problems that the colors’ use may cause - The veiwing environmemnt in which the display is used - The task of the user - Harware on which the colors will be displayed.

You are required to design TWO interaction screens, one without using colors and one with the use of appropriate colors. The second version should clearly indicate its advantages over the first version. The conclusion should include answers of the questions

1. Explain how colors are been used with reference to your project?

Experiment 7

Objective: Develop system menus and navigation schemes Description: A system contains large amounts of information and performs a variety of functions. Regardless of its purpose, the system must provide some means to tell people about the information it possesses or the things it can do. This is accomplished by displaying listings of the choices or alternatives the user has at appropriate points. These listings of choices are commonly called menus. Menus are a major form of navigation through a system and, if properly designed, assist the user in developing a mental model of the system Menus are effective because they utilize the more powerful human capability of recognition rather than the weaker capability of recall. Working with menus reminds people of available options and information that they may not be aware of or have forgotten. Graphical and Web systems are heavily menu-oriented. In graphical systems they are used to designate commands, properties that apply to an object, documents, and windows. When selected, a graphical menu item may lead to another menu, cause a window to be displayed, or directly cause an action to be performed. To accomplish these goals, a graphical system presents a variety of menu styles to choose from. Included are entities commonly called menu bars, and menus called pull-downs, pop-ups, cascades, tearoffs, and iconic. In Web site design, common menus include textual links to other pages, command buttons, and both graphical and textual toolbars. Student’s task: Considering your project as a sample, design menu and navigational scheme for your project. Students are required to submit two versions of menu and navigational scheme design. One without using principles of menu design and another by following menu design guidelines. While designinig menus for GUI application, students must consider following

1. Choosing a propoer menu structure suitable for the application 2. Proper ordering and grouping of menus 3. Use of line separators 4. Providing short cuts for menus using keyboard equivalents 5. Use of keyboard accelerators 6. Choosing appropriate menu tiltles. 7. Use of intent indicatiors 8. Providing defaults 9. Use of toggle menus whereever required.

For web based applications

1. Provide a global navigation bar at the top of each page. 2. Provide a local category or topical links navigation bar on the left side of a page. 3. Place minor illustrative, parenthetical, or footnote links at the end of the page. 4. For long pages, provide a navigation bar repeating important global or local links

at the page bottom.

Examples:

Figure1:Command button navigation bar

Figure2 : Graphical or iconic navigation bar

Figure3: Web navigation component location The conclusion should include answers of the following questions. For GUI based projects:

1. Which of the available menu structure used in your project? Justify you answer. 2. What all features have been added to your menu to assist the user in developing

a mental model of the system? Explain with respect to your project. 3. Is your design supports requirements of novice as well as expert users? If yes,

how? For Web based projects:

1. Explain the menu and navigational scheme used in your project? How effectively the menu and navigational scheme has been designed?

2. Were there any menu navigation aids been provided in your project? 3. Is your design supports requirements of novice as well as expert users? If yes,

how?

Experiment 8 Objective: Provide effective feedback, guidance and assiatance Description: All user actions must be reacted to in some way. To be effective, feedback to the user for an action must occur within certain time limits. Excessive delays can be annoying, interrupt concentration, cause the user concern, and impair productivity as one’s memory limitations begin to be tested. Also to aid user learning and avoid frustration, it is important to provide thorough and timely guidance and assistance. New users must go through a learning process that involves developing a conceptual or mental model to explain the system’s behavior and the task being performed. Guidance in the form of the system’s hard-copy, online documentation, computer-based training, instructional or prompting messages, and system messages serves as a cognitive development tool to aid this process. So does assistance provided by another form of online documentation, the Help function. Student’s task: Provide proper feedback, documentation and assistance for your projrct. Students are required to submit two versions of the system. One without using principles of UI design and another by following principles and guidelines of UI design. While providing feedback, students must consider the following

1. Acceptable response times 2. Dealing with time delays 3. Blinking for attention 4. The use of sound

While providing assistance and guidance, students must consider the following

1. Providing appropriate Instructions or prompting. 2. Provide a Help facility. 3. Provide contextual Help. 4. Provide Task-oriented Help. 5. Provide Reference Help. 6. Hints or tips

The conclusion should include answers of the questions

1. How effectively the feedback is provided to the user? Explain with respect to your project.

2. What kind of help and assistance is provided in your project?