SlideShare a Scribd company logo
1 of 46
Download to read offline
HCI LAB WORK
Week No. Lab Topic
1 User Experience Goals finding and relating them with existing designs
2 Identification of GOMS
3 Color Guidelines
4 Stages of action
5 Menu types and design
6 Construction of Prototype
9 Design Principles (Norman)
10 Heuristic Evaluation
11 Application of Trunk Test
12 Interaction
13 Behavior and Form (Interaction)
14 Preparation of Questionnaire and evaluation
1 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 1
Topic: User Experience Goals
Question:
List the 5-10 User Experience Goals you come up with and list of five existing designs (inspirations) that
relate to your thinking. The relationship could be very concrete or very abstract. For each design, give
brief explanations (1-2 sentences) for why you chose those designs.
Mechanism to Conduct Lab:
Students and teacher communicate through Adobe Connect.
Solution:
 Satisfying
• Enjoyable
• Fun
• Entertaining
• Helpful
• Motivating
• Aesthetically pleasing
• Supportive of creativity
• Rewarding
• Emotionally fulfilling
Our inspirations are:
1. Freelancing:
This interface is attractive for having a very nice navigation bar and excellent grid view. We want to add
these things in our interface.
Link: https://www.fiverr.com/
2 | H u m a n C o m p u t e r I n t e r a c t i o n
2. Fedena Students Record System:
This website provide several features like attendance, paid dues and other history. This website inspired us
to have a graphical representation of the records of the people and things, which are under custody of
police.
Link:http://www.fedena.com/?utm_source=googleadwordsp&utm_medium=cpchp&utm_co
ntent=cchp&utm_campaign=cnhp&gclid=CLSchq663cgCFUccGwod__EDnA
3 | H u m a n C o m p u t e r I n t e r a c t i o n
3. Viooz:
Having very good grid and searching options. We want to have that features in our interface.
Link: http://viooz.ac/movies/
4 | H u m a n C o m p u t e r I n t e r a c t i o n
4. Ilm ki Dunya:
All the options are in the Home page. Dropdown lists give easy access to all the options.
Link: http://www.ilmkidunya.com/
5. Sales force
The interface is having attractive style and dropdown list is awesome, this is time saving and easy
interface.
Link: http://www.salesforce.com/platform/products/force/
5 | H u m a n C o m p u t e r I n t e r a c t i o n
6 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 2:
Topic: GOMS
Scenerio:
You are required to edit an article. Analyze the situation and find out GOMS (Goal, Operators, Method,
Selection rule) for that particular scenario.
Mechanism to Conduct Lab:
Students and teacher communicate through Skype/Adobe Connect
Solution:
• Goal: Edit an article
• Operators
 Use arrow keys
 Use mouse
 Use other keys
• Method: Delete text (sub-goal)
 Positioning:
1) arrow key
2) mouse
 Marking:
1) double click
2) use mouse
 Delete (and add text):
1) start writing
2) press delete, then write new text
• Selection rules: If close, use arrow key etc.
7 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 3:
Topic: Color Guidelines
Scenario:
In the figure below there are four colored backgrounds B1- B4 and four colored texts T1- T4.
Using color guidelines for color readability (using color brightness and color difference) find the text-
background pairs from below for best color text readability.
B1 B2
HAPPY (T1) HAPPY (T2)
B3 B4
Happy (T3) HAPPY (T4)
8 | H u m a n C o m p u t e r I n t e r a c t i o n
Solution:
9 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 4:
Topic: Stages of Action
Scenario:
I might want a place where I can relax outside that won’t get muddy and that I don’t have to move my
outdoor furniture around to mow.
What are the stages of action?
How the stages of action will be applicable on this scenario to achieve the goal?
Solution:
Stage 1 is Forming a Goal. This is what you want. As an example, I might want a place that I can relax outside
that won’t get muddy and that I don’t have to move my outdoor furniture around to mow.
Stage 2 is Forming the Intention. This is what would satisfy the goal. A deck would satisfy my goal of place to
relax outdoors that won’t get muddy or be in the way of mowing.
Stage 3 is Specifying an Action. What do I have to do to achieve the intention? I would need to build a deck to
meet the requirement set in my goal.
Stage 4 is Executing the Action. Here I would do the steps of the action. I would build the deck.
Stage 5 is Perceiving the State of the World. Using the senses to gather information. My finished deck would
be off the ground and have my outdoor furniture on it.
Stage 6 is Interpreting the State of the World. What has changed? My furniture is off the ground away from
the mud and no longer has to be moved to mow the lawn.
Stage 7 is Evaluating the Outcome. Did I achieve my goal? I can relax outdoors now without worrying about
mud or moving furniture. I achieved my goal
10 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 5:
Topic: Menus
Question:
 Why menus are used in the websites?
 Compare the different types of menus used in different websites (provide screenshots of the
menus). What are the advantages and drawbacks of those menus?
 Design a menu for an app that helps the user in finding the timing of the Prayers and the direction
of Qibla.
Solution:
Navigation is an important part of your design that helps users to get to the website sections they need.
Menus are used for this purpose.
Types:
1) Horizontal menu
Screen Shots:
Advantages:
i) Horizontal Menu is good for usability. Users clearly see which section they are currently
looking at.
Disadvantages:
i) The drawback of horizontal menu is that the number of links they can contain is pretty limited.
2) Vertical Menu
11 | H u m a n C o m p u t e r I n t e r a c t i o n
Screenshots:
Advantages:
i) Vertical Menus are used for article and blog site where each article corresponds to its
description on its right side.
Disadvantages:
i) Vertical menus have more space for links, sometimes they tend to become hard to look
through.
3) Dropdown Menu:
12 | H u m a n C o m p u t e r I n t e r a c t i o n
Screenshots:
Advantages:
i) Drop-down menus are good for websites with complex structure. Online shops with a wide
range of goods and a lot of product groups. With them you can hide subsections and keep the
precious space uncluttered.
Disadvantages:
i) This type of menu has a drawback though — it can be too hard to notice. That’s why it is used
for data of secondary importance. Nonetheless, designer has to make it visible enough to a
user.
13 | H u m a n C o m p u t e r I n t e r a c t i o n
Part 3:
Design menu for an app.
14 | H u m a n C o m p u t e r I n t e r a c t i o n
Mechanism to Conduct Lab:
Students and teacher communicate through Skype/Adobe Connect
Students will use paint, corel draw or any other tool for designing the menu.
15 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 6:
Topic: Prototyping
Question:
You have to design a prototype for an application.
Application’s goal is “to help the people to find out the timing of Prayers and the direction of the Qibla”.
Note: You do not need to prototype “How to Pray” and “Zakat Counter” functionalities.
Solution:
16 | H u m a n C o m p u t e r I n t e r a c t i o n
17 | H u m a n C o m p u t e r I n t e r a c t i o n
18 | H u m a n C o m p u t e r I n t e r a c t i o n
19 | H u m a n C o m p u t e r I n t e r a c t i o n
20 | H u m a n C o m p u t e r I n t e r a c t i o n
Mechanism to Conduct Lab:
Students and teacher communicate through Skype/Adobe Connect
Students will use paint, corel draw or any other tool for prototyping design.
21 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 9:
Topic: Design Principles (Norman)
Question:
Identify one example of a good designed and one example of a badly designed handheld device, e.g.
remote control, hand phone, hard phone, digital camera, calculator etc.
Use your intuition and Norman’s design principles: mapping, visibility, feedback, consistency, constraints
and affordances to do the following evaluations:
 For the good designed device: state what is good about the design and why you find it well
designed (e.g., show how does it follow Norman’s “feedback” principle)
 For the badly designed device: state what the problem is and why you find it to be a problem (i.e.,
what difficulties, misunderstandings does it cause).
 In both cases, support your argument by using at least two (2) of Norman’s design principles.
Explain how these principles are met or violated by the devices you have chosen.
Solution
Bad Design Device: Remote control
Intuition about design: The basic purpose for the remote is just to change the channels, tuning, volume,
display and audio settings but recently TV remote controls have lots of buttons and no one knows that
what is their working actually. They are controlling DVD and CD Players and many others. That makes it
complex.
Norman’s design principles:
Visibility: A TV remote is showing all the operations it can perform with a better sectioning in a good
arrangement. Each function can be seen on the remote, but all the functions which are needed and which
are needed rarely, it makes your deign a bit complex and difficult for a naïve user to understand.
Feedback: In a TV remote, it’s easy to get feedback, as whatever you are doing it is performed on the
screen. But in the case of AC remotes, sometimes, you press a button and AC can’t accept it due to missing
signal. On AC remote screen, that task is done, but the AC didn’t accepted that command. There’s a slight
problem with the feedback of the AC and AC remote.
22 | H u m a n C o m p u t e r I n t e r a c t i o n
Affordance: Affordance problem exists with the remotes, sometimes what you perceive is actually not
the actual operation. As the image above, here someone can perceive that these upper and lower arrows
are for the channels and left and right arrows are for volume, as some remotes follow this structure.
Note: it does not give any option to undo your last action.
Good Design Device: Hard phone
No problem with the interface with respect to my intuition.
Norman’s design principles:
Visibility: Hard phone has a limited set of operations and buttons on it. Each button is visible with its
operation on it. If user presses button 5 then it appears in the display section and same is the case with
other buttons. Hard phone satisfies visibility principle.
Feedback: Hard phone holds the principle of feedback. Whatever you do on your hard phone it gives
response either on its screen or by using a dial beep.
Affordance: Each of the buttons defines its purpose by a symbol. For example, Speaker button has a
Speaker symbol on it same is the case with hold button. Hard phone has a well-defined interface satisfying
affordance.
23 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 10:
Topic: Heuristic Evaluation
In this Lab, you will be given
Task List of Five mobile applications: Calendar, Skype, Gallery, Amazon, and CNN
Solution Table: Which you should fill up after task performance.
Heuristic List Table: This table will help you to solve assignment.
Assignment Execution:
Pre-Requisite:
Understanding of core functions in applications
Understanding the below given tasks list
Understand and read “Heuristic list” with examples given at the end
Understanding of “Heuristic/Guideline List Table”
Understanding of basic HCI, Usability, cognitive modeling, Interaction paradigm and mobile paradigm
related concepts
Procedure:
1-Pick up first application (calendar),
2- Execute task 1.1 on your smartphone while in motion/ doing some other task,
3-Observe interface behavior, brainstorming, think about any user related issue, if you find out usability
related flaw, write up.
4-Else perform again in moving environment/while doing some other task,
5- Go to step 3 (Observe behavior)
6- Now, if you still unable to find any flaw, take help from “Heuristic/ Guideline List Table” where you will
find “violations” in third column of table. See one by one and if you find one or more that represent your
observation.
7- Select these violations and look up corresponding heuristic number in the same table. Enter heuristic
number (only number) in 4th column of solution table. Also mention the violation in third column.
8- Keeping in view each violation nature, you are required to assign severity number of each usability
related flaw in 5th column
9- Write up reason of this assignment of severity number in 6th column
10- Write up environment in 7th column
11- Go to step 1 and repeat the whole procedure for task 1.2 of calendar application.
12- Go to link of Calendar Survey Form and fill up with the same values. Submit button
13- This 1-12 point procedure of usability evaluation will perform for Skype, Gallery, Amazon, and CNN.
Calendar
Task 1: Event creation
Task 1.1: Add an event in your calendar mobile application. Give values to different fields like select
date, place, add guests list etc. and finally save the event.
Task 1.2: Use “Reminders” to create and view to-dos alongside your event.
24 | H u m a n C o m p u t e r I n t e r a c t i o n
Skype:
Task 2: Send Message to group
 Task 2.1: Message your friends in an instant and add up to 3 people to a group chat.
 Task 2.2: File Transfer: Select a person, make a Skype call and during conversation, share a file.
Gallery:
Task 3: Search .
 Task 3.1: Search the specific picture using “filter by” (Events, people, scenery, food, pet etc) from
gallery application. Tap the picture you want to view and set as a wallpaper
Searching picture isn’t effective.
 Task 3.2 Select a picture or a video from Gallery and apply different basic operations like “copy to
album”, “move to album”, “rotate left”, “rotate right”, “add tag” etc.
Amazon Shopping: Hard to find, ergonomics in motion, error prevention mgt (no suggest solution at
signup), avoid misleading links (I asked for television, but here display DVD’s , restaurant but lamp, meal,
books) , user awareness about task steps
Task 4.1: Go to main page of Amazon, register yourself (sign up). Then, using your credentials to sign in
and select search by voice option, here are things you can do with voice like “search, reorder, add to cart,
track order etc. Do this task and observe behavior.
Task 4.2: Go to the shopping page, select few items to buy, add to cart. Then modify the order and finally
place the order (fill up desired fields without giving account detail and submit form) observe behavior.
CNN
Task 5: News Alert
Task 5.1: Open the app to scan the world’s top headlines. Explore interactive featured stories.
Task 5.2: Quickly catch up on International, Opinions, Entertainment and other CNN coverage. Watch CNN
TV live on your device
Summary:
Every expert t will perform each task in sitting as well as in moving/dynamic state.
The following 0 to 4 rating scale can be used to rate the severity of usability problems:
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
25 | H u m a n C o m p u t e r I n t e r a c t i o n
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
Solution Table
App
Name &
Task #
Mobile
Device
Did you observe any
violation from
heuristics?
please mention
flaw/violation of
heuristics
Which Heuristic
Violated?
Mention Number of
heuristics
Given in table below
(Note: Don’t mention
name of heuristic or any
other data )
If you are
given a task to
rate the
severity of
usability
problems of
this violation.
Choose any
one from
0,1,2,3,4.
Reason Environment
like jogging,
sitting etc
Calendar
1.1
(Event
Creation)
Samsung
Galaxy
Core II or
any other
2 .
Calendar
1.2
(Remind
ers)
. . . .
Skype
2.1(msg
sending ,
add
people in
group
chat)
. .
Skype
2.2(file
transfer
during
call)
.
Gallery
3.1
.
26 | H u m a n C o m p u t e r I n t e r a c t i o n
Gallery
3.2
Amazon
4.1
Amazon
4.2
CNN
5.1
.
CNN
5.2
.
Joyce Method:
SMART6 (Aesthetic, pleasant, appealing)
Design a visually pleasing interface. Mobile interfaces that are attractive are far more memorable and are
therefore used more often. Users are also more forgiving of attractive interfaces.
SMART7 (Learnability)
Intuitive interfaces make for easier user journeys. Mobile interfaces should be easy-to-learn whereby
next steps are obvious. This allows users to more easily complete their tasks.
SMART8 (multiple usage of multi touch gesture, user control obviousness)
Design a clear navigable path to task completion. Users should be able to see right away how they can
interact with the application and navigate their way to task completion.
SMART9 (Allows Configuration Options)
Heuristic/Guideline list Table (Solution)
Heuristic Name Possible Violation
SMART4
User isn’t clear about the interface initially
about what to do to complete task
Don’t provide clue about what to do next for
task completion
I feel difficult to perform task while doing other
task in parallel
SMART5 I found an additional step while performing task
I feel design of interface don’t focus properly
only on user task
I feel this task can be accomplishedwithout any
specific requirement
A task consist of many pages/clicks, which is
difficult to continue while in motion
27 | H u m a n C o m p u t e r I n t e r a c t i o n
SMART2 Logo, words, phrases, concepts aren’t match
with real world scenario.
Contents and/ buttons aren’t properly
organized
SMART11 Control/object size doesn’t appropriate, feel
difficulty to access action, speed issue due to
less control over objects/button specially in
motion
SMART7  Demands some extra effort to
understand interface
SMART1
No feedback upon any action
SMART6  No pleasant view, irrelevant and
additional information
SMART10 I found no/less audio sound of by default ring
tone attached with reminder etc while in
motion and noisy situations like on the road.
SMART3 Displayed error message don’t diagnose
problem properly,
Error Message don’t suggest solution in an
appropriate manner
SMART8 Not Design a clear navigable path to task
completion
SMART9
System don’t provide shortcuts for expert users
to speed up
System don’t provide interaction for naïve users
SMART 12 NOT Use the camera, microphone and sensors
when appropriate to lessen the user’s
workload. Consider the use of the camera,
microphone and sensors to lessen the users’
workload. For instance, by using GPS so the user
knows where they are and how to get there
they need to go, or by using OCR and the
camera to digitally capture the information the
user needs to input, or by allowing use of the
microphone to input content.
Lab 11:
28 | H u m a n C o m p u t e r I n t e r a c t i o n
Topic: Trunk Test
Question:
Consider the Following Link. https://www.aliexpress.com/.
You are required to perform Trunk Test on this site and provide the solution using the screen shots.
Solution:
Trunk Test:
1. Site 1D
29 | H u m a n C o m p u t e r I n t e r a c t i o n
2. Local navigation
3. Page name
30 | H u m a n C o m p u t e r I n t e r a c t i o n
4. "You are here" indicator(s)
5. Sections and subsections
31 | H u m a n C o m p u t e r I n t e r a c t i o n
6. Search
32 | H u m a n C o m p u t e r I n t e r a c t i o n
Lab 12:
Topic: Interaction
Scenario:
You must be well aware with the basic concepts of HCI and have good knowledge of mobile applications
discussed in previous lectures. Now, it’s time to perform tasks using those mobile applications. Tasks given
below have been defined corresponding to each application. There are two tasks against each mobile
application. These are very simple tasks. You can comfortably perform these. There is a table below whose
different fields and its related concepts have already been conveyed to you. For recap, I again present
these concepts in audio file. This audio file also contains description of tasks assigned to you. This file tells
what should keep in mind while executing tasks. This file tells about survey form whose links are given in
assignment. This file also explains you the steps and sequence to solve this assignment perfectly.
Link to Audio File:
https://vulms.vu.edu.pk/Courses/CS408/Downloads/Assignment%20NO%201%20Fall%202016.rar
Calendar
Task 1: Event creation
· Task 1.1: Add an event in your calendar mobile application. Give values to different fields like select date,
place, add guests list etc. and finally save the event.
Task 1.2: Use “Reminders” to create and view to-dos alongside your event.
Skype:
Task 2: Send Message to group
 Task 2.1: Message your friends in an instant and add up to 3 people to a group chat.
 Task 2.2: File Transfer: Select a person, make a Skype call and during conversation, share a file.
Gallery:
Task 3: Search
Task 3.1: Search the specific picture using “filter by” (Events, people, scenery, food, pet etc) from gallery
application. Tap the picture you want to view and set as a wallpaper
 Task 3.2 Select a picture or a video from Gallery and apply different basic operations like “copy to
album”, “move to album”, “rotate left”, “rotate right”, “add tag” etc.
33 | H u m a n C o m p u t e r I n t e r a c t i o n
Summary:
Every student will perform each task in sitting as well as in moving/dynamic state. So, total number of
tasks is twenty whose data should get and filled up in the table. You may present your solution in a single
file containing the record of every task. OR you can split the solution into five different tables
corresponding to each task.
Make sure that you performed this activity in a pair
Your major role:
Understand mobile application functionalities and the way to use it.
Observe the behavior of mobile application (only display) While using mobile applications.
Keep in mind the following questions while performing a task on mobile application.
 Do you understand task and its related description?
 Do you have an idea about the outcome of task?
 Did you achieve the goal/objective of the task?
 Did you find any confusing interface that leads to misunderstanding while achieving goal?
 Did you perform any irrelevant/additional work while achieving target?
 Did you precisely mention the identified problem?
App
Nam
e and
Task
#
Mobile
Device
Target
achieved?
(Effectiveness)
Any
confusing/mi
sleading/com
plex/irreleva
nt Step to
achieve
target?
please
mention
Time to
complete
task(efficiency
)
If you are
given a task
to evaluate
interface/s
to make it
more usable
for yourself.
Do you
Suggest any
change? Just
mention
change.
Reason/s
of change?
Pairwise
Activity is
more
appropria
te?
Yes/No
Environmen
t like
jogging,
sitting etc
34 | H u m a n C o m p u t e r I n t e r a c t i o n
 Do you have any suggestion to improve performance? Do you think it is possible to achieve goal
more quickly?
 Did you calculate efficiency? Time required completing the target. Did you study the helping
material and understand the way to calculate the efficiency?
 Do you think working in pairwise is more appropriate and helps to identify flaws easily?
 Do you know and understand the usage of gestural operations, its meaning and behavior?
 Do you think Context aware app provides usable interface to users?
 Do you suggest what app should display for more usability if required?
Lab 13:
35 | H u m a n C o m p u t e r I n t e r a c t i o n
Topic: Behavior and Form (Interaction)
Scenario:
You must be well aware with the basic concepts of HCI and have good knowledge discussed in previous
lectures. In this lab, you will perform some tasks over mobile applications and share your experience.
Now, it’s time to perform tasks over desktop applications. You are well aware with www.vu.edu.pk and
you accessed and performed many tasks on regular basis like “access vulms” download assignment” post
query on MDB”, upload assignment” admission procedure” accessing useful links” etc.
This Lab is about performing two tasks listed and described below and fill up the table accordingly. These
two tasks will carry out on three different e-learning universities one is Virtual University of Pakistan,
Second one is University of The People, USA and third one is Athabasca University, Canada's Open
University.
Execution Plan:
Task 1 will perform on Virtual University of Pakistan, get the data for table, fill up the table and then,
perform task 2 for the same application, get the data, fill up the table and then fill up the survey form.
Same procedure follow for University of The People
Same procedure follow for Athabasca University, Canada's Open University.
Note: You can answer the Last question of survey form after studying three web applications
Task 1
Study the whole admission procedure including schedule, eligibility criteria, fee structure, duration of
study program etc and observe the admission mechanism.
University URL’s (three addresses are given below): 3
Task 2
Find the “About us/ About” option available on main page of university, open that page, and explore
different details available. As a student, think critically and find out which universities this web page is
more useful for you.
University URL’s:
http://www.athabascau.ca/, http://www.vu.edu.pk/, http://www.uopeople.edu/
36 | H u m a n C o m p u t e r I n t e r a c t i o n
Important Note: This survey should be filled up after the execution of tasks and after thorough study of
each web application. I will upload the audio file containing the understanding of survey form
questionnaire in easy words with examples. Please listen audio file before filling up survey.
Your Major Role:
Keep in mind the following questions while performing a task on mobile application.
 Do you understand task and its related description?
 Do you have an idea about the outcome of task?
 Did you achieve the goal/objective of the task?
 Did you find any confusing interface that leads to misunderstanding while achieving goal?
 Did you perform any irrelevant/additional work while achieving target?
 Did you precisely mention the identified problem?
 Do you have any suggestion to improve performance? Do you think it is possible to achieve goal
more quickly?
 Did you calculate efficiency? Time required completing the target. Did you study the helping
material and understand the way to calculate the efficiency?
Lab 14:
Topic: Questionnaire and Evaluation
Question:
Unive
rsity
Nam
e
Task
No:
Target
achieved?
(Effectiveness)
Any
confusing/mi
sleading/com
plex/irreleva
nt Step to
achieve
target?
please
mention
Time to
complete
task(efficiency
)
If you are
given a task
to evaluate
interface/s
to make it
more usable
for yourself.
Do you
Suggest any
change? Just
mention
change.
Reason/s
of change?
Which
University
application
is more
useful?
Reason?
37 | H u m a n C o m p u t e r I n t e r a c t i o n
You have already designed the prototype of an app that helps the people in finding the time of prayer and
the direction of Qibla.
 Now you are required to design a questionnaire to identify the problems of the users. It will show
that how you can overcome problems according to user needs.
 Also evaluate the feedback of the users and provide the results.
Solution:
Severity Rating
The following 0 to 4 rating scale can be used to rate the severity of usability problems:
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
Severity Rating: Mark with (*)
*
0 1 2 3 4
1. Show System Status
(Time, Space, Change, Action, Next Steps, Completion)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) ______________________________________________________________________
b) ______________________________________________________________________
38 | H u m a n C o m p u t e r I n t e r a c t i o n
c) ______________________________________________________________________
Suggestions
a)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
2. Familiar Metaphors and Language
(Familiar Metaphors, Familiar Categories, Familiar Choices)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) ________________________________________________________________________
b) ________________________________________________________________________
39 | H u m a n C o m p u t e r I n t e r a c t i o n
c) ________________________________________________________________________
Suggestions
a)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
3. Control and Freedom
(Freedom to undo, Freedom to explore)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) ________________________________________________________________________
b) ________________________________________________________________________
c) ________________________________________________________________________
40 | H u m a n C o m p u t e r I n t e r a c t i o n
Suggestions
a)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
___________________________________________________
4. Consistency
(Consistent layout, Consistent name, Consistent choices, Clearer choices)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) ________________________________________________________________________
b) ________________________________________________________________________
c) ________________________________________________________________________
Suggestions
41 | H u m a n C o m p u t e r I n t e r a c t i o n
a)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
5. Flexibility and Efficiency
(Flexible shortcuts, Flexible defaults with options, ambient information, Proactivity,
Recommendations, Keep it relevant)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) _______________________________________________________________________
b) _______________________________________________________________________
c) _______________________________________________________________________
Suggestions
42 | H u m a n C o m p u t e r I n t e r a c t i o n
a)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
6. Help
(Help and documentation should be provided to focus on user’s task)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) _______________________________________________________________________
b) _______________________________________________________________________
c) _______________________________________________________________________
Suggestions
43 | H u m a n C o m p u t e r I n t e r a c t i o n
a)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
7. Recognize, Diagnose and recover from errors
(Errors expressed in simple language should suggest a constructively solution)
Severity Rating
0 1 2 3 4
Group name _______________________
Problem
a) _______________________________________________________________________
b) _______________________________________________________________________
c) _______________________________________________________________________
Suggestions
44 | H u m a n C o m p u t e r I n t e r a c t i o n
a)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
b)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
c)____________________________________________________________________________
______________________________________________________________________________
____________________________________________________________
Evaluation:
Group no 4 Average evaluation:
S.NO 7 Heuristic
Group
NO:4(MOR) Average
1 Show System Status 3 60%
2 Match between system and real world 3 60%
3 Control freedom 2 40%
4 Consistency 3 60%
5 Flexibility and efficiency 5 100%
6 Recognize, diagnose and recover from errors 2 40%
7 Help 2 40%
Total 2.85 57.00%
45 | H u m a n C o m p u t e r I n t e r a c t i o n
Group no 2 Average evaluation:
S.NO 7 Heuristic
Group
NO:2(EVE) Average
1 Show System Status 5 100%
2 Match between system and real world 4 80%
3 Control freedom 4 80%
4 Consistency 3 60%
5 Flexibility and efficiency 4 80%
6 Recognize, diagnose and recover from errors 3 60%
7 Help 5 100%
Total 4.0 80.3%
Total average of Evaulation
Group
NO.
AVE
RATNG Average%
4 2.85 57.0%
2 4.0 80.3%
Average 3.42 68.65%
Mechanism to Conduct Lab:
Students and teacher communicate through Skype/Adobe Connect

More Related Content

What's hot

Affordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciAffordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciShoaibidd514
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaAnton Chandra
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bbShahid Riaz
 
Session 1 Lecture 2 PACT A Framework for Designing Interactive Systems
Session 1 Lecture 2 PACT A Framework for Designing Interactive SystemsSession 1 Lecture 2 PACT A Framework for Designing Interactive Systems
Session 1 Lecture 2 PACT A Framework for Designing Interactive SystemsKhalid Md Saifuddin
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principalsAnwal Mirza
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Lahiru Danushka
 
User Interface Design,Principles & process
User Interface  Design,Principles & processUser Interface  Design,Principles & process
User Interface Design,Principles & processAbd-Ur Rehman Saqib
 
Software testing lab manual
Software testing lab manualSoftware testing lab manual
Software testing lab manualTanzeem Syed
 
7 Stages of User Action Theory
7 Stages of User Action Theory7 Stages of User Action Theory
7 Stages of User Action Theoryhacrombie
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysisAlan Dix
 
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....
Human Computer Interaction Chapter 5 Universal Design and User Support -  Dr....Human Computer Interaction Chapter 5 Universal Design and User Support -  Dr....
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....VijiPriya Jeyamani
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Sachith Perera
 

What's hot (20)

Affordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hciAffordance,mapping,constraints and convention in hci
Affordance,mapping,constraints and convention in hci
 
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni MahariashaUX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
UX Prototyping (UXiD) - Slide by Anton Chandra and Bahni Mahariasha
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
 
6 mobile user interface design bb
6   mobile user interface design bb6   mobile user interface design bb
6 mobile user interface design bb
 
Session 1 Lecture 2 PACT A Framework for Designing Interactive Systems
Session 1 Lecture 2 PACT A Framework for Designing Interactive SystemsSession 1 Lecture 2 PACT A Framework for Designing Interactive Systems
Session 1 Lecture 2 PACT A Framework for Designing Interactive Systems
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principals
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
Human Computer Interaction Evaluation
Human Computer Interaction EvaluationHuman Computer Interaction Evaluation
Human Computer Interaction Evaluation
 
Pact framework in hci
Pact framework in hciPact framework in hci
Pact framework in hci
 
User Interface Design,Principles & process
User Interface  Design,Principles & processUser Interface  Design,Principles & process
User Interface Design,Principles & process
 
Graphical User Interface
Graphical User InterfaceGraphical User Interface
Graphical User Interface
 
Software testing lab manual
Software testing lab manualSoftware testing lab manual
Software testing lab manual
 
Cohesion and coupling
Cohesion and couplingCohesion and coupling
Cohesion and coupling
 
7 Stages of User Action Theory
7 Stages of User Action Theory7 Stages of User Action Theory
7 Stages of User Action Theory
 
HCI 3e - Ch 15: Task analysis
HCI 3e - Ch 15:  Task analysisHCI 3e - Ch 15:  Task analysis
HCI 3e - Ch 15: Task analysis
 
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....
Human Computer Interaction Chapter 5 Universal Design and User Support -  Dr....Human Computer Interaction Chapter 5 Universal Design and User Support -  Dr....
Human Computer Interaction Chapter 5 Universal Design and User Support - Dr....
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
Managment spectrum
Managment spectrumManagment spectrum
Managment spectrum
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI) Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 

Similar to HCI LAB MANUAL

eLearning Project - "Imagine That! Journey through the Creative Process" - do...
eLearning Project - "Imagine That! Journey through the Creative Process" - do...eLearning Project - "Imagine That! Journey through the Creative Process" - do...
eLearning Project - "Imagine That! Journey through the Creative Process" - do...Julie Urtz
 
Interface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksInterface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksJulie Dirksen
 
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docx
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docxSTAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docx
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docxwhitneyleman54422
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
Blender Class Syllabus.pdf
Blender Class Syllabus.pdfBlender Class Syllabus.pdf
Blender Class Syllabus.pdfSamuelAssefa9
 
Google Design Sprinting Webinar
Google Design Sprinting WebinarGoogle Design Sprinting Webinar
Google Design Sprinting WebinarRafiq Elmansy
 
NPS-WEB Hompage- TestPlan V.1.docx
NPS-WEB Hompage- TestPlan V.1.docxNPS-WEB Hompage- TestPlan V.1.docx
NPS-WEB Hompage- TestPlan V.1.docxCarolina Murcia
 
Introduction to Lean UX Methods - General Assembly
Introduction to Lean UX Methods - General AssemblyIntroduction to Lean UX Methods - General Assembly
Introduction to Lean UX Methods - General AssemblyDoralin Kelly
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshopPatrick McNeil
 
App entry presentation
App entry presentationApp entry presentation
App entry presentationEuanovich
 
Technovation challenge workplan for week 4
Technovation challenge workplan for week 4Technovation challenge workplan for week 4
Technovation challenge workplan for week 4wetech_global
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignCheryl Platz
 
Day 15: Pitch & mobile
Day 15: Pitch & mobileDay 15: Pitch & mobile
Day 15: Pitch & mobileCOMP 113
 
Coding Unplugged_Focus on problem solvin
Coding Unplugged_Focus on problem solvinCoding Unplugged_Focus on problem solvin
Coding Unplugged_Focus on problem solvinEnkelejdaMica1
 
Steam Project.docx
Steam Project.docxSteam Project.docx
Steam Project.docxKod Alketbi
 
empowerment-4_compress.pdf in senior high school students PSU
empowerment-4_compress.pdf in senior high school students PSUempowerment-4_compress.pdf in senior high school students PSU
empowerment-4_compress.pdf in senior high school students PSUaliyahdalogdogan
 

Similar to HCI LAB MANUAL (20)

eLearning Project - "Imagine That! Journey through the Creative Process" - do...
eLearning Project - "Imagine That! Journey through the Creative Process" - do...eLearning Project - "Imagine That! Journey through the Creative Process" - do...
eLearning Project - "Imagine That! Journey through the Creative Process" - do...
 
Interface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and TricksInterface Design for Elearning - Tips and Tricks
Interface Design for Elearning - Tips and Tricks
 
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docx
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docxSTAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docx
STAT 200 Final ExaminationSpring 2017 OL1US1Page 2 of 10STAT .docx
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
Blender Class Syllabus.pdf
Blender Class Syllabus.pdfBlender Class Syllabus.pdf
Blender Class Syllabus.pdf
 
Google Design Sprinting Webinar
Google Design Sprinting WebinarGoogle Design Sprinting Webinar
Google Design Sprinting Webinar
 
NPS-WEB Hompage- TestPlan V.1.docx
NPS-WEB Hompage- TestPlan V.1.docxNPS-WEB Hompage- TestPlan V.1.docx
NPS-WEB Hompage- TestPlan V.1.docx
 
Introduction to Lean UX Methods - General Assembly
Introduction to Lean UX Methods - General AssemblyIntroduction to Lean UX Methods - General Assembly
Introduction to Lean UX Methods - General Assembly
 
User centered design workshop
User centered design workshopUser centered design workshop
User centered design workshop
 
UX workshop
UX workshopUX workshop
UX workshop
 
Lesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptxLesson 2 HCI 2.pptx
Lesson 2 HCI 2.pptx
 
App entry presentation
App entry presentationApp entry presentation
App entry presentation
 
Technovation challenge workplan for week 4
Technovation challenge workplan for week 4Technovation challenge workplan for week 4
Technovation challenge workplan for week 4
 
TTT 2012 slide deck
TTT  2012 slide deckTTT  2012 slide deck
TTT 2012 slide deck
 
Psychology
PsychologyPsychology
Psychology
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
Day 15: Pitch & mobile
Day 15: Pitch & mobileDay 15: Pitch & mobile
Day 15: Pitch & mobile
 
Coding Unplugged_Focus on problem solvin
Coding Unplugged_Focus on problem solvinCoding Unplugged_Focus on problem solvin
Coding Unplugged_Focus on problem solvin
 
Steam Project.docx
Steam Project.docxSteam Project.docx
Steam Project.docx
 
empowerment-4_compress.pdf in senior high school students PSU
empowerment-4_compress.pdf in senior high school students PSUempowerment-4_compress.pdf in senior high school students PSU
empowerment-4_compress.pdf in senior high school students PSU
 

More from Um e Farwa

Tele presence and co-presence in HCI
Tele presence and co-presence in HCITele presence and co-presence in HCI
Tele presence and co-presence in HCIUm e Farwa
 
Cognitive frameworks in HCI
Cognitive frameworks in HCI Cognitive frameworks in HCI
Cognitive frameworks in HCI Um e Farwa
 
Virtual reality v/s augmented reality
Virtual reality v/s augmented reality Virtual reality v/s augmented reality
Virtual reality v/s augmented reality Um e Farwa
 
Cognition in HCI
Cognition in HCICognition in HCI
Cognition in HCIUm e Farwa
 
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI Um e Farwa
 
Understanding the Problem Space and Conceptualizing in HCI
Understanding the Problem Space and Conceptualizing  in HCIUnderstanding the Problem Space and Conceptualizing  in HCI
Understanding the Problem Space and Conceptualizing in HCIUm e Farwa
 
14 technologies every web developer should be able to understand
14 technologies every web developer should be able to understand14 technologies every web developer should be able to understand
14 technologies every web developer should be able to understandUm e Farwa
 
Why we need functions in c
Why we need functions in cWhy we need functions in c
Why we need functions in cUm e Farwa
 
Good and Poor design HCI perceptive
Good and Poor design HCI perceptive Good and Poor design HCI perceptive
Good and Poor design HCI perceptive Um e Farwa
 
Bakery algorithm
Bakery algorithmBakery algorithm
Bakery algorithmUm e Farwa
 

More from Um e Farwa (10)

Tele presence and co-presence in HCI
Tele presence and co-presence in HCITele presence and co-presence in HCI
Tele presence and co-presence in HCI
 
Cognitive frameworks in HCI
Cognitive frameworks in HCI Cognitive frameworks in HCI
Cognitive frameworks in HCI
 
Virtual reality v/s augmented reality
Virtual reality v/s augmented reality Virtual reality v/s augmented reality
Virtual reality v/s augmented reality
 
Cognition in HCI
Cognition in HCICognition in HCI
Cognition in HCI
 
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI
IINTERFACE METAPHORES , INTERACTION TYPES AND INTERACTION PARADIGMS IN HCI
 
Understanding the Problem Space and Conceptualizing in HCI
Understanding the Problem Space and Conceptualizing  in HCIUnderstanding the Problem Space and Conceptualizing  in HCI
Understanding the Problem Space and Conceptualizing in HCI
 
14 technologies every web developer should be able to understand
14 technologies every web developer should be able to understand14 technologies every web developer should be able to understand
14 technologies every web developer should be able to understand
 
Why we need functions in c
Why we need functions in cWhy we need functions in c
Why we need functions in c
 
Good and Poor design HCI perceptive
Good and Poor design HCI perceptive Good and Poor design HCI perceptive
Good and Poor design HCI perceptive
 
Bakery algorithm
Bakery algorithmBakery algorithm
Bakery algorithm
 

Recently uploaded

Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`dajasot375
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricksabhishekparmar618
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...Amil baba
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 

Recently uploaded (20)

Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable BricksCosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
NO1 Famous Amil Baba In Karachi Kala Jadu In Karachi Amil baba In Karachi Add...
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 

HCI LAB MANUAL

  • 1. HCI LAB WORK Week No. Lab Topic 1 User Experience Goals finding and relating them with existing designs 2 Identification of GOMS 3 Color Guidelines 4 Stages of action 5 Menu types and design 6 Construction of Prototype 9 Design Principles (Norman) 10 Heuristic Evaluation 11 Application of Trunk Test 12 Interaction 13 Behavior and Form (Interaction) 14 Preparation of Questionnaire and evaluation
  • 2. 1 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 1 Topic: User Experience Goals Question: List the 5-10 User Experience Goals you come up with and list of five existing designs (inspirations) that relate to your thinking. The relationship could be very concrete or very abstract. For each design, give brief explanations (1-2 sentences) for why you chose those designs. Mechanism to Conduct Lab: Students and teacher communicate through Adobe Connect. Solution:  Satisfying • Enjoyable • Fun • Entertaining • Helpful • Motivating • Aesthetically pleasing • Supportive of creativity • Rewarding • Emotionally fulfilling Our inspirations are: 1. Freelancing: This interface is attractive for having a very nice navigation bar and excellent grid view. We want to add these things in our interface. Link: https://www.fiverr.com/
  • 3. 2 | H u m a n C o m p u t e r I n t e r a c t i o n 2. Fedena Students Record System: This website provide several features like attendance, paid dues and other history. This website inspired us to have a graphical representation of the records of the people and things, which are under custody of police. Link:http://www.fedena.com/?utm_source=googleadwordsp&utm_medium=cpchp&utm_co ntent=cchp&utm_campaign=cnhp&gclid=CLSchq663cgCFUccGwod__EDnA
  • 4. 3 | H u m a n C o m p u t e r I n t e r a c t i o n 3. Viooz: Having very good grid and searching options. We want to have that features in our interface. Link: http://viooz.ac/movies/
  • 5. 4 | H u m a n C o m p u t e r I n t e r a c t i o n 4. Ilm ki Dunya: All the options are in the Home page. Dropdown lists give easy access to all the options. Link: http://www.ilmkidunya.com/ 5. Sales force The interface is having attractive style and dropdown list is awesome, this is time saving and easy interface. Link: http://www.salesforce.com/platform/products/force/
  • 6. 5 | H u m a n C o m p u t e r I n t e r a c t i o n
  • 7. 6 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 2: Topic: GOMS Scenerio: You are required to edit an article. Analyze the situation and find out GOMS (Goal, Operators, Method, Selection rule) for that particular scenario. Mechanism to Conduct Lab: Students and teacher communicate through Skype/Adobe Connect Solution: • Goal: Edit an article • Operators  Use arrow keys  Use mouse  Use other keys • Method: Delete text (sub-goal)  Positioning: 1) arrow key 2) mouse  Marking: 1) double click 2) use mouse  Delete (and add text): 1) start writing 2) press delete, then write new text • Selection rules: If close, use arrow key etc.
  • 8. 7 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 3: Topic: Color Guidelines Scenario: In the figure below there are four colored backgrounds B1- B4 and four colored texts T1- T4. Using color guidelines for color readability (using color brightness and color difference) find the text- background pairs from below for best color text readability. B1 B2 HAPPY (T1) HAPPY (T2) B3 B4 Happy (T3) HAPPY (T4)
  • 9. 8 | H u m a n C o m p u t e r I n t e r a c t i o n Solution:
  • 10. 9 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 4: Topic: Stages of Action Scenario: I might want a place where I can relax outside that won’t get muddy and that I don’t have to move my outdoor furniture around to mow. What are the stages of action? How the stages of action will be applicable on this scenario to achieve the goal? Solution: Stage 1 is Forming a Goal. This is what you want. As an example, I might want a place that I can relax outside that won’t get muddy and that I don’t have to move my outdoor furniture around to mow. Stage 2 is Forming the Intention. This is what would satisfy the goal. A deck would satisfy my goal of place to relax outdoors that won’t get muddy or be in the way of mowing. Stage 3 is Specifying an Action. What do I have to do to achieve the intention? I would need to build a deck to meet the requirement set in my goal. Stage 4 is Executing the Action. Here I would do the steps of the action. I would build the deck. Stage 5 is Perceiving the State of the World. Using the senses to gather information. My finished deck would be off the ground and have my outdoor furniture on it. Stage 6 is Interpreting the State of the World. What has changed? My furniture is off the ground away from the mud and no longer has to be moved to mow the lawn. Stage 7 is Evaluating the Outcome. Did I achieve my goal? I can relax outdoors now without worrying about mud or moving furniture. I achieved my goal
  • 11. 10 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 5: Topic: Menus Question:  Why menus are used in the websites?  Compare the different types of menus used in different websites (provide screenshots of the menus). What are the advantages and drawbacks of those menus?  Design a menu for an app that helps the user in finding the timing of the Prayers and the direction of Qibla. Solution: Navigation is an important part of your design that helps users to get to the website sections they need. Menus are used for this purpose. Types: 1) Horizontal menu Screen Shots: Advantages: i) Horizontal Menu is good for usability. Users clearly see which section they are currently looking at. Disadvantages: i) The drawback of horizontal menu is that the number of links they can contain is pretty limited. 2) Vertical Menu
  • 12. 11 | H u m a n C o m p u t e r I n t e r a c t i o n Screenshots: Advantages: i) Vertical Menus are used for article and blog site where each article corresponds to its description on its right side. Disadvantages: i) Vertical menus have more space for links, sometimes they tend to become hard to look through. 3) Dropdown Menu:
  • 13. 12 | H u m a n C o m p u t e r I n t e r a c t i o n Screenshots: Advantages: i) Drop-down menus are good for websites with complex structure. Online shops with a wide range of goods and a lot of product groups. With them you can hide subsections and keep the precious space uncluttered. Disadvantages: i) This type of menu has a drawback though — it can be too hard to notice. That’s why it is used for data of secondary importance. Nonetheless, designer has to make it visible enough to a user.
  • 14. 13 | H u m a n C o m p u t e r I n t e r a c t i o n Part 3: Design menu for an app.
  • 15. 14 | H u m a n C o m p u t e r I n t e r a c t i o n Mechanism to Conduct Lab: Students and teacher communicate through Skype/Adobe Connect Students will use paint, corel draw or any other tool for designing the menu.
  • 16. 15 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 6: Topic: Prototyping Question: You have to design a prototype for an application. Application’s goal is “to help the people to find out the timing of Prayers and the direction of the Qibla”. Note: You do not need to prototype “How to Pray” and “Zakat Counter” functionalities. Solution:
  • 17. 16 | H u m a n C o m p u t e r I n t e r a c t i o n
  • 18. 17 | H u m a n C o m p u t e r I n t e r a c t i o n
  • 19. 18 | H u m a n C o m p u t e r I n t e r a c t i o n
  • 20. 19 | H u m a n C o m p u t e r I n t e r a c t i o n
  • 21. 20 | H u m a n C o m p u t e r I n t e r a c t i o n Mechanism to Conduct Lab: Students and teacher communicate through Skype/Adobe Connect Students will use paint, corel draw or any other tool for prototyping design.
  • 22. 21 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 9: Topic: Design Principles (Norman) Question: Identify one example of a good designed and one example of a badly designed handheld device, e.g. remote control, hand phone, hard phone, digital camera, calculator etc. Use your intuition and Norman’s design principles: mapping, visibility, feedback, consistency, constraints and affordances to do the following evaluations:  For the good designed device: state what is good about the design and why you find it well designed (e.g., show how does it follow Norman’s “feedback” principle)  For the badly designed device: state what the problem is and why you find it to be a problem (i.e., what difficulties, misunderstandings does it cause).  In both cases, support your argument by using at least two (2) of Norman’s design principles. Explain how these principles are met or violated by the devices you have chosen. Solution Bad Design Device: Remote control Intuition about design: The basic purpose for the remote is just to change the channels, tuning, volume, display and audio settings but recently TV remote controls have lots of buttons and no one knows that what is their working actually. They are controlling DVD and CD Players and many others. That makes it complex. Norman’s design principles: Visibility: A TV remote is showing all the operations it can perform with a better sectioning in a good arrangement. Each function can be seen on the remote, but all the functions which are needed and which are needed rarely, it makes your deign a bit complex and difficult for a naïve user to understand. Feedback: In a TV remote, it’s easy to get feedback, as whatever you are doing it is performed on the screen. But in the case of AC remotes, sometimes, you press a button and AC can’t accept it due to missing signal. On AC remote screen, that task is done, but the AC didn’t accepted that command. There’s a slight problem with the feedback of the AC and AC remote.
  • 23. 22 | H u m a n C o m p u t e r I n t e r a c t i o n Affordance: Affordance problem exists with the remotes, sometimes what you perceive is actually not the actual operation. As the image above, here someone can perceive that these upper and lower arrows are for the channels and left and right arrows are for volume, as some remotes follow this structure. Note: it does not give any option to undo your last action. Good Design Device: Hard phone No problem with the interface with respect to my intuition. Norman’s design principles: Visibility: Hard phone has a limited set of operations and buttons on it. Each button is visible with its operation on it. If user presses button 5 then it appears in the display section and same is the case with other buttons. Hard phone satisfies visibility principle. Feedback: Hard phone holds the principle of feedback. Whatever you do on your hard phone it gives response either on its screen or by using a dial beep. Affordance: Each of the buttons defines its purpose by a symbol. For example, Speaker button has a Speaker symbol on it same is the case with hold button. Hard phone has a well-defined interface satisfying affordance.
  • 24. 23 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 10: Topic: Heuristic Evaluation In this Lab, you will be given Task List of Five mobile applications: Calendar, Skype, Gallery, Amazon, and CNN Solution Table: Which you should fill up after task performance. Heuristic List Table: This table will help you to solve assignment. Assignment Execution: Pre-Requisite: Understanding of core functions in applications Understanding the below given tasks list Understand and read “Heuristic list” with examples given at the end Understanding of “Heuristic/Guideline List Table” Understanding of basic HCI, Usability, cognitive modeling, Interaction paradigm and mobile paradigm related concepts Procedure: 1-Pick up first application (calendar), 2- Execute task 1.1 on your smartphone while in motion/ doing some other task, 3-Observe interface behavior, brainstorming, think about any user related issue, if you find out usability related flaw, write up. 4-Else perform again in moving environment/while doing some other task, 5- Go to step 3 (Observe behavior) 6- Now, if you still unable to find any flaw, take help from “Heuristic/ Guideline List Table” where you will find “violations” in third column of table. See one by one and if you find one or more that represent your observation. 7- Select these violations and look up corresponding heuristic number in the same table. Enter heuristic number (only number) in 4th column of solution table. Also mention the violation in third column. 8- Keeping in view each violation nature, you are required to assign severity number of each usability related flaw in 5th column 9- Write up reason of this assignment of severity number in 6th column 10- Write up environment in 7th column 11- Go to step 1 and repeat the whole procedure for task 1.2 of calendar application. 12- Go to link of Calendar Survey Form and fill up with the same values. Submit button 13- This 1-12 point procedure of usability evaluation will perform for Skype, Gallery, Amazon, and CNN. Calendar Task 1: Event creation Task 1.1: Add an event in your calendar mobile application. Give values to different fields like select date, place, add guests list etc. and finally save the event. Task 1.2: Use “Reminders” to create and view to-dos alongside your event.
  • 25. 24 | H u m a n C o m p u t e r I n t e r a c t i o n Skype: Task 2: Send Message to group  Task 2.1: Message your friends in an instant and add up to 3 people to a group chat.  Task 2.2: File Transfer: Select a person, make a Skype call and during conversation, share a file. Gallery: Task 3: Search .  Task 3.1: Search the specific picture using “filter by” (Events, people, scenery, food, pet etc) from gallery application. Tap the picture you want to view and set as a wallpaper Searching picture isn’t effective.  Task 3.2 Select a picture or a video from Gallery and apply different basic operations like “copy to album”, “move to album”, “rotate left”, “rotate right”, “add tag” etc. Amazon Shopping: Hard to find, ergonomics in motion, error prevention mgt (no suggest solution at signup), avoid misleading links (I asked for television, but here display DVD’s , restaurant but lamp, meal, books) , user awareness about task steps Task 4.1: Go to main page of Amazon, register yourself (sign up). Then, using your credentials to sign in and select search by voice option, here are things you can do with voice like “search, reorder, add to cart, track order etc. Do this task and observe behavior. Task 4.2: Go to the shopping page, select few items to buy, add to cart. Then modify the order and finally place the order (fill up desired fields without giving account detail and submit form) observe behavior. CNN Task 5: News Alert Task 5.1: Open the app to scan the world’s top headlines. Explore interactive featured stories. Task 5.2: Quickly catch up on International, Opinions, Entertainment and other CNN coverage. Watch CNN TV live on your device Summary: Every expert t will perform each task in sitting as well as in moving/dynamic state. The following 0 to 4 rating scale can be used to rate the severity of usability problems: 0 = I don't agree that this is a usability problem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project
  • 26. 25 | H u m a n C o m p u t e r I n t e r a c t i o n 2 = Minor usability problem: fixing this should be given low priority 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released Solution Table App Name & Task # Mobile Device Did you observe any violation from heuristics? please mention flaw/violation of heuristics Which Heuristic Violated? Mention Number of heuristics Given in table below (Note: Don’t mention name of heuristic or any other data ) If you are given a task to rate the severity of usability problems of this violation. Choose any one from 0,1,2,3,4. Reason Environment like jogging, sitting etc Calendar 1.1 (Event Creation) Samsung Galaxy Core II or any other 2 . Calendar 1.2 (Remind ers) . . . . Skype 2.1(msg sending , add people in group chat) . . Skype 2.2(file transfer during call) . Gallery 3.1 .
  • 27. 26 | H u m a n C o m p u t e r I n t e r a c t i o n Gallery 3.2 Amazon 4.1 Amazon 4.2 CNN 5.1 . CNN 5.2 . Joyce Method: SMART6 (Aesthetic, pleasant, appealing) Design a visually pleasing interface. Mobile interfaces that are attractive are far more memorable and are therefore used more often. Users are also more forgiving of attractive interfaces. SMART7 (Learnability) Intuitive interfaces make for easier user journeys. Mobile interfaces should be easy-to-learn whereby next steps are obvious. This allows users to more easily complete their tasks. SMART8 (multiple usage of multi touch gesture, user control obviousness) Design a clear navigable path to task completion. Users should be able to see right away how they can interact with the application and navigate their way to task completion. SMART9 (Allows Configuration Options) Heuristic/Guideline list Table (Solution) Heuristic Name Possible Violation SMART4 User isn’t clear about the interface initially about what to do to complete task Don’t provide clue about what to do next for task completion I feel difficult to perform task while doing other task in parallel SMART5 I found an additional step while performing task I feel design of interface don’t focus properly only on user task I feel this task can be accomplishedwithout any specific requirement A task consist of many pages/clicks, which is difficult to continue while in motion
  • 28. 27 | H u m a n C o m p u t e r I n t e r a c t i o n SMART2 Logo, words, phrases, concepts aren’t match with real world scenario. Contents and/ buttons aren’t properly organized SMART11 Control/object size doesn’t appropriate, feel difficulty to access action, speed issue due to less control over objects/button specially in motion SMART7  Demands some extra effort to understand interface SMART1 No feedback upon any action SMART6  No pleasant view, irrelevant and additional information SMART10 I found no/less audio sound of by default ring tone attached with reminder etc while in motion and noisy situations like on the road. SMART3 Displayed error message don’t diagnose problem properly, Error Message don’t suggest solution in an appropriate manner SMART8 Not Design a clear navigable path to task completion SMART9 System don’t provide shortcuts for expert users to speed up System don’t provide interaction for naïve users SMART 12 NOT Use the camera, microphone and sensors when appropriate to lessen the user’s workload. Consider the use of the camera, microphone and sensors to lessen the users’ workload. For instance, by using GPS so the user knows where they are and how to get there they need to go, or by using OCR and the camera to digitally capture the information the user needs to input, or by allowing use of the microphone to input content. Lab 11:
  • 29. 28 | H u m a n C o m p u t e r I n t e r a c t i o n Topic: Trunk Test Question: Consider the Following Link. https://www.aliexpress.com/. You are required to perform Trunk Test on this site and provide the solution using the screen shots. Solution: Trunk Test: 1. Site 1D
  • 30. 29 | H u m a n C o m p u t e r I n t e r a c t i o n 2. Local navigation 3. Page name
  • 31. 30 | H u m a n C o m p u t e r I n t e r a c t i o n 4. "You are here" indicator(s) 5. Sections and subsections
  • 32. 31 | H u m a n C o m p u t e r I n t e r a c t i o n 6. Search
  • 33. 32 | H u m a n C o m p u t e r I n t e r a c t i o n Lab 12: Topic: Interaction Scenario: You must be well aware with the basic concepts of HCI and have good knowledge of mobile applications discussed in previous lectures. Now, it’s time to perform tasks using those mobile applications. Tasks given below have been defined corresponding to each application. There are two tasks against each mobile application. These are very simple tasks. You can comfortably perform these. There is a table below whose different fields and its related concepts have already been conveyed to you. For recap, I again present these concepts in audio file. This audio file also contains description of tasks assigned to you. This file tells what should keep in mind while executing tasks. This file tells about survey form whose links are given in assignment. This file also explains you the steps and sequence to solve this assignment perfectly. Link to Audio File: https://vulms.vu.edu.pk/Courses/CS408/Downloads/Assignment%20NO%201%20Fall%202016.rar Calendar Task 1: Event creation · Task 1.1: Add an event in your calendar mobile application. Give values to different fields like select date, place, add guests list etc. and finally save the event. Task 1.2: Use “Reminders” to create and view to-dos alongside your event. Skype: Task 2: Send Message to group  Task 2.1: Message your friends in an instant and add up to 3 people to a group chat.  Task 2.2: File Transfer: Select a person, make a Skype call and during conversation, share a file. Gallery: Task 3: Search Task 3.1: Search the specific picture using “filter by” (Events, people, scenery, food, pet etc) from gallery application. Tap the picture you want to view and set as a wallpaper  Task 3.2 Select a picture or a video from Gallery and apply different basic operations like “copy to album”, “move to album”, “rotate left”, “rotate right”, “add tag” etc.
  • 34. 33 | H u m a n C o m p u t e r I n t e r a c t i o n Summary: Every student will perform each task in sitting as well as in moving/dynamic state. So, total number of tasks is twenty whose data should get and filled up in the table. You may present your solution in a single file containing the record of every task. OR you can split the solution into five different tables corresponding to each task. Make sure that you performed this activity in a pair Your major role: Understand mobile application functionalities and the way to use it. Observe the behavior of mobile application (only display) While using mobile applications. Keep in mind the following questions while performing a task on mobile application.  Do you understand task and its related description?  Do you have an idea about the outcome of task?  Did you achieve the goal/objective of the task?  Did you find any confusing interface that leads to misunderstanding while achieving goal?  Did you perform any irrelevant/additional work while achieving target?  Did you precisely mention the identified problem? App Nam e and Task # Mobile Device Target achieved? (Effectiveness) Any confusing/mi sleading/com plex/irreleva nt Step to achieve target? please mention Time to complete task(efficiency ) If you are given a task to evaluate interface/s to make it more usable for yourself. Do you Suggest any change? Just mention change. Reason/s of change? Pairwise Activity is more appropria te? Yes/No Environmen t like jogging, sitting etc
  • 35. 34 | H u m a n C o m p u t e r I n t e r a c t i o n  Do you have any suggestion to improve performance? Do you think it is possible to achieve goal more quickly?  Did you calculate efficiency? Time required completing the target. Did you study the helping material and understand the way to calculate the efficiency?  Do you think working in pairwise is more appropriate and helps to identify flaws easily?  Do you know and understand the usage of gestural operations, its meaning and behavior?  Do you think Context aware app provides usable interface to users?  Do you suggest what app should display for more usability if required? Lab 13:
  • 36. 35 | H u m a n C o m p u t e r I n t e r a c t i o n Topic: Behavior and Form (Interaction) Scenario: You must be well aware with the basic concepts of HCI and have good knowledge discussed in previous lectures. In this lab, you will perform some tasks over mobile applications and share your experience. Now, it’s time to perform tasks over desktop applications. You are well aware with www.vu.edu.pk and you accessed and performed many tasks on regular basis like “access vulms” download assignment” post query on MDB”, upload assignment” admission procedure” accessing useful links” etc. This Lab is about performing two tasks listed and described below and fill up the table accordingly. These two tasks will carry out on three different e-learning universities one is Virtual University of Pakistan, Second one is University of The People, USA and third one is Athabasca University, Canada's Open University. Execution Plan: Task 1 will perform on Virtual University of Pakistan, get the data for table, fill up the table and then, perform task 2 for the same application, get the data, fill up the table and then fill up the survey form. Same procedure follow for University of The People Same procedure follow for Athabasca University, Canada's Open University. Note: You can answer the Last question of survey form after studying three web applications Task 1 Study the whole admission procedure including schedule, eligibility criteria, fee structure, duration of study program etc and observe the admission mechanism. University URL’s (three addresses are given below): 3 Task 2 Find the “About us/ About” option available on main page of university, open that page, and explore different details available. As a student, think critically and find out which universities this web page is more useful for you. University URL’s: http://www.athabascau.ca/, http://www.vu.edu.pk/, http://www.uopeople.edu/
  • 37. 36 | H u m a n C o m p u t e r I n t e r a c t i o n Important Note: This survey should be filled up after the execution of tasks and after thorough study of each web application. I will upload the audio file containing the understanding of survey form questionnaire in easy words with examples. Please listen audio file before filling up survey. Your Major Role: Keep in mind the following questions while performing a task on mobile application.  Do you understand task and its related description?  Do you have an idea about the outcome of task?  Did you achieve the goal/objective of the task?  Did you find any confusing interface that leads to misunderstanding while achieving goal?  Did you perform any irrelevant/additional work while achieving target?  Did you precisely mention the identified problem?  Do you have any suggestion to improve performance? Do you think it is possible to achieve goal more quickly?  Did you calculate efficiency? Time required completing the target. Did you study the helping material and understand the way to calculate the efficiency? Lab 14: Topic: Questionnaire and Evaluation Question: Unive rsity Nam e Task No: Target achieved? (Effectiveness) Any confusing/mi sleading/com plex/irreleva nt Step to achieve target? please mention Time to complete task(efficiency ) If you are given a task to evaluate interface/s to make it more usable for yourself. Do you Suggest any change? Just mention change. Reason/s of change? Which University application is more useful? Reason?
  • 38. 37 | H u m a n C o m p u t e r I n t e r a c t i o n You have already designed the prototype of an app that helps the people in finding the time of prayer and the direction of Qibla.  Now you are required to design a questionnaire to identify the problems of the users. It will show that how you can overcome problems according to user needs.  Also evaluate the feedback of the users and provide the results. Solution: Severity Rating The following 0 to 4 rating scale can be used to rate the severity of usability problems: 0 = I don't agree that this is a usability problem at all 1 = Cosmetic problem only: need not be fixed unless extra time is available on project 2 = Minor usability problem: fixing this should be given low priority 3 = Major usability problem: important to fix, so should be given high priority 4 = Usability catastrophe: imperative to fix this before product can be released Severity Rating: Mark with (*) * 0 1 2 3 4 1. Show System Status (Time, Space, Change, Action, Next Steps, Completion) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) ______________________________________________________________________ b) ______________________________________________________________________
  • 39. 38 | H u m a n C o m p u t e r I n t e r a c t i o n c) ______________________________________________________________________ Suggestions a)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ 2. Familiar Metaphors and Language (Familiar Metaphors, Familiar Categories, Familiar Choices) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) ________________________________________________________________________ b) ________________________________________________________________________
  • 40. 39 | H u m a n C o m p u t e r I n t e r a c t i o n c) ________________________________________________________________________ Suggestions a)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ 3. Control and Freedom (Freedom to undo, Freedom to explore) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) ________________________________________________________________________ b) ________________________________________________________________________ c) ________________________________________________________________________
  • 41. 40 | H u m a n C o m p u t e r I n t e r a c t i o n Suggestions a)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ___________________________________________________ 4. Consistency (Consistent layout, Consistent name, Consistent choices, Clearer choices) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) ________________________________________________________________________ b) ________________________________________________________________________ c) ________________________________________________________________________ Suggestions
  • 42. 41 | H u m a n C o m p u t e r I n t e r a c t i o n a)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ 5. Flexibility and Efficiency (Flexible shortcuts, Flexible defaults with options, ambient information, Proactivity, Recommendations, Keep it relevant) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) _______________________________________________________________________ b) _______________________________________________________________________ c) _______________________________________________________________________ Suggestions
  • 43. 42 | H u m a n C o m p u t e r I n t e r a c t i o n a)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ 6. Help (Help and documentation should be provided to focus on user’s task) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) _______________________________________________________________________ b) _______________________________________________________________________ c) _______________________________________________________________________ Suggestions
  • 44. 43 | H u m a n C o m p u t e r I n t e r a c t i o n a)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ 7. Recognize, Diagnose and recover from errors (Errors expressed in simple language should suggest a constructively solution) Severity Rating 0 1 2 3 4 Group name _______________________ Problem a) _______________________________________________________________________ b) _______________________________________________________________________ c) _______________________________________________________________________ Suggestions
  • 45. 44 | H u m a n C o m p u t e r I n t e r a c t i o n a)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ b)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ c)____________________________________________________________________________ ______________________________________________________________________________ ____________________________________________________________ Evaluation: Group no 4 Average evaluation: S.NO 7 Heuristic Group NO:4(MOR) Average 1 Show System Status 3 60% 2 Match between system and real world 3 60% 3 Control freedom 2 40% 4 Consistency 3 60% 5 Flexibility and efficiency 5 100% 6 Recognize, diagnose and recover from errors 2 40% 7 Help 2 40% Total 2.85 57.00%
  • 46. 45 | H u m a n C o m p u t e r I n t e r a c t i o n Group no 2 Average evaluation: S.NO 7 Heuristic Group NO:2(EVE) Average 1 Show System Status 5 100% 2 Match between system and real world 4 80% 3 Control freedom 4 80% 4 Consistency 3 60% 5 Flexibility and efficiency 4 80% 6 Recognize, diagnose and recover from errors 3 60% 7 Help 5 100% Total 4.0 80.3% Total average of Evaulation Group NO. AVE RATNG Average% 4 2.85 57.0% 2 4.0 80.3% Average 3.42 68.65% Mechanism to Conduct Lab: Students and teacher communicate through Skype/Adobe Connect