COMSATS Institute of Information Technology
Computer Lab Manual
For
Introduction to Human Computer Interaction
(CSC-457)
Course Instructor
Mehwish Fatima
Lab Instructor(s)
Chanchal Raj
Section
A
Semester
Fall 2013
Department of Computer Science
COMSATS, Lahore, Pakistan
1
Table of Contents
Lab 12 & 13- HCI Projects ............................................................................................................. 3
Objectives ................................................................................................................................... 3
Partial List of Projects ................................................................................................................. 3
Lab Task 1 (To understand Importance of Good Design): .......................................................... 4
Lab Task 2 (To provide Visually appealing interface to the clients): ......................................... 4
Lab Task 3 (Choosing a proper screen based control): ............................................................... 5
Lab Task 4 (Choosing proper colors):......................................................................................... 6
Lab Task 5 (Develop system menus and navigation schemes): .................................................. 7
Lab Task 6 (Provide effective feedback, guidance and assiatance): ........................................... 9
2
Lab 12 & 13- HCI Projects
Objectives








To understand Importance of Good Design
To understand Advantages of Graphical Interface
To provide visually appealing interface to the clients.
Choosing a proper screen based control
To understand the principle of good screen designing
Choosing proper colors
Develop system menus and navigation schemes
Provide effective feedback, guidance and assistance
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.
Partial List of Projects
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
3
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.
Lab Task 1 (To understand Importance of Good Design):
Description:
As designers 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 feedback 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
Task:
Considering your project as a sample, design user interface screens. You are required to design
interaction screens that should clearly indicate usage of the good design 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?
Lab Task 2 (To provide Visually appealing interface to the clients):
Description:
Visually appeal is terribly important today because most human-computer communication occurs
in the visual realm. 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 contrast between the screen elements, providing 3D representation, creating spatial
4
grouping, aligning screen elements, choosing colors and graphics.
Task:
Considering your project as a sample, design Visually appealing interface by using
 meaningful contrast between screen 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 interface visually appealing.
Lab Task 3 (Choosing a proper screen based control):
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 choose
appropriate screen controls, designer must first identify the characteristic and capabilities of
various screen based controls such as buttons, text entry, reads only controls, combination
entries/ selection 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.
Task:
Considering your project as a sample, design user interface by selecting the best and appropriate
screens elements (e.g. Textboxes, combo box, icons, labels etc.) suitable for you project. Present
these elements on the screen to increase the usability, clarity, predictability of your interface.
While designing the you must concentrate on
- Consistency in design
- A visually pleasing composition
- A logical and sequential order
- The presentation of the proper amount of information
- Alignment of the screen items
5
You should avoid
- Clutter created by indistinct 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 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 intellectual work
- Reduce memory work
- Increase predictability
Lab Task 4 (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.
Task:
Considering your project as a sample, design user interface by choosing proper background and
foreground color that is 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 viewing environment in which the display is used
- The task of the user
- Hardware 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.
6
The conclusion should include answers of the questions
1. Explain how colors are been used with reference to your project.
Lab Task 5 (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, popups, cascades, tear offs, and iconic. In Web site design, common
menus include textual links to other pages, command buttons, and both graphical and textual
toolbars.
Task:
Considering your project as a sample, design menu and navigational scheme for your project.
You 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 designing menus for GUI application, you must consider following
1. Choosing a proper 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 titles.
7. Use of intent indicators
8. Providing defaults
9. Use of toggle menus wherever 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.
7
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.
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?
8
Lab Task 6 (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.
Task:
Provide proper feedback, documentation and assistance for your project.
You 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, you 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, you 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?
9