SENG 310 - Human-Computer Interaction - Midterm

Instructor: Dr. Charles Perin

Name (as it appears on Brightspace): _____Mahi Moghaddasi______

UVic ID number: ______V00925398_______
The interface that you were assigned via email: _____Reddit_______

Exam Details:
- Made available: June 11.
- Due: June 14, before 11:59pm Victoria Time.
- Test Duration: You have 4 days to complete the test. You can complete the exam sooner, and you can
update your submission as many times as you like.
- Instructor email: cperin@uvic.ca
- This is an open book exam. This means you can reference any material posted on the SENG 310
Brightspace page. You are also welcome to reference the optional textbooks suggested for this course,
the majority of which are accessible digitally via the UVic library, and additional resources.
- Answer the questions in the document and when complete, save the file as a PDF document. Upload the
completed file to Brightspace.
- The completed exam must not exceed 10 pages, including instructions. Do not alter the formatting,
content, or margins. Use Calibri font and size 10. Content beyond the page limit will not be marked.
- In the case of Brightspace issues, consult:
https://onlineacademiccommunity.uvic.ca/TeachAnywhere/student-help/
- You are not allowed to communicate with other students or teaching assistants about the midterm on
Slack, during the labs, or through other means. If you have an outstanding question, the only person you
can ask is me, either by direct slack message (not on the #general channel) or by email to cperin@uvic.ca.
Do know however that some open-endedness is intentional as the point of the exam is for you to think
and reason.

Academic Integrity Pledge:

You must abide by UVic academic regulations and observe standards of ‘scholarly integrity,’ (no plagiarism or
cheating). Therefore, this exam must be taken individually and not with a friend, classmate, or group. You are also
prohibited from sharing any information about the exam with others. I, _______Mahi Moghaddasi______ affirm
that I will not give or receive any aid on this exam and that all work will be my own.

There are 50 marks available in this midterm.

 SENG 310 - Human Computer Interaction - Midterm

Question 1 [5 marks] [suggested length: 0.5-1p]

Explain any five of Don Norman’s Principles of Interaction in your own words and for each principle provide one
example from your everyday experiences.
=================================== BEGIN QUESTION 1 ANSWER ==================================
From the book: “The design of everyday things” by Don Norman 2013- chapter 1 page 10
5 principles: affordances, signifiers, constraints, mappings, and feedback.

1. Affordance: Afford is a verb and one of its meaning is provide. Affordance refers to the relationship
between a person and an object. What does the object afford to the user and how easily user can figure it
out? The capability of the user to identify how to use the object.
Because the affordance is a relationship, it depends upon the abilities and properties of both the user
and the object. The example from the book is a chair. The chair is for sitting and they usually can be lifted
and carried by a person. If the chair is heavy some user can move it some other cannot. So for some
people the chair does not have the affordance.

2. Signifiers: Signs that help user to understand. This term means where the actions should take place.
People need to know what is the product for, what is happening, they need clues.
The term signifier refers to any mark or sign or any prompt that communicate appropriate behavior to the
user so they know what to do and what to expect in return. It is somehow an instruction to find out where
the user stands in the interaction with the object. An example can be a door and the sign on the door to
instruct us to push or pull in order to open it.

3. Constraints: Restrict a particular form of user interaction. Difficulty of doing something wrong. There are 4
kinds of constraints: Physical, Cultural, Semantic and Logical. For example, in a puzzle logic dictated the
placement of things or the right way of doing things. Physical constraints provided strong restriction on
which parts would not fit together and these constraints put restriction on what made sense.

4. Mapping: It is a relationship and correspondence between layout of design and controlling the object or
interaction. If the mapping is right, it is easy to determine how to use the device. There should be an
understandable mapping between the controller and the object to control. An example can be the wheel
of a car. If you turn it to the right the car turns right. It is a proper mapping.

5. Feedback: Some way of letting the user know that the task they wanted to do is done. So they are not
confused or unsure, and they don’t repeat the same action again because they want to make sure they
successfully did it. For example, the pedestrian light, when you push the button a beep noise would let
you know that you successfully pushed it and you then wait for the light to turn green.

==================================== END QUESTION 1 ANSWER ===================================

For the following questions, select a sub-part of the interface that was assigned to you and use that to answer
the remainder of the exam.

Page 2
 SENG 310 - Human Computer Interaction - Midterm

Sub-part of an interface can consist of one of the below or a combination of the below examples:
(a) A sub-part for an entire system or interface can be a few specific screens on an app or a few specific web
pages for a website
(b) A sub-part can consist of interaction sequences that enable people to complete 1-2 tasks
(c) A sub-part can consist of one specific and important feature of the interface

When selecting the sub-part, you will use for the following questions, I suggest you think about the following:
1. Does your choice provide you with enough material to study and evaluate? That is, is it meaningful
enough? - make sure you carefully read all questions before deciding on the sub-part to select.
2. Can you use this sub-part for the exam questions without spending too much time and running out of
space? (see the exam submission page limit requirements). That is, is your choice of sub-part manageable?

Question 2 [5 marks] [suggested length: 1p]

Describe the interface sub-part you are focusing on in detail and include screenshot(s) as figures (not as a link).
Provide a rationale for why you selected the particular sub-part.
=================================== BEGIN QUESTION 2 ANSWER ==================================
The sub-part that I chose consist of a few specific web pages of Reddit website

First webpage is the sign-up page to Reddit as a first time user and second page is the home page of Reddit.
In order to have access to any feature of Reddit user has to sign up for an account and User can comment or post
only after registering. Signing up has 2 parts. First, it requires a username, password, and email. Second, it requires
user to join to at least 5 communities. The website has chosen 5 communities for the user by default and the user
has to click on the blue “join” button to join any other community from the lists. They have to click on the white”
joined” button in order to leave. The user should click on finish button to finish the sign up process. Then it takes
you to the home page and it advises you to confirm your email address.

Page 3
 SENG 310 - Human Computer Interaction - Midterm

Second Webpage describe is the Home page. It has a lot of different features. you'll see a feed of trending posts
showing popular content from all the subreddits you've joined. You can click on posts and read the comments, see
full-sized image, visit the link. Next to the post and comments on posts, you'll see a number that represents its
score, along with an up arrow and a down arrow. These allow you to upvote or downvote content. Up right next to
the user name, you can see Karma and get coins that are among all the featurs on the home page.

==================================== END QUESTION 2 ANSWER ===================================

Question 3 [10 marks] [suggested length: 1-1.5p]

Provide a heuristic evaluation for that interface sub-part. Describe any 5 heuristics that the interface fails to meet.
The evaluation must clearly explain what the issue is and why you think that is an issue. You can add screenshot(s)
as figure(s) if that is necessary for the explanation (not as a link).
=================================== BEGIN QUESTION 3 ANSWER ==================================

1.VISIBILITY OF SYSTEM STATUS: Keep user inform about what is going on

When the user wants to sign in, the second part seems a bit odd and confusing for a first time user. The interface
does not specifically tell you that it has already joined you to 5 of its community by default. The user might click on
finish button without knowing what happened. They are joined to communities and they are not aware of it!

2.MATCH BETWEEN SYSTEM AND REAL-WORLD: Should speak the user’s language
Reddit newcomers will encounter lots of slang acronyms and terminology that are confusing. The features on web
page does not have any similarity to previously used interfaces. Karma is a feature in home page that user would
not understand it by their intuition.

3.USER CONTROL AND FREEDOM: User should be provided with emergency exit. Support undo or redo
If you press on get coin it will then take to some webpage with no exit you have to close it from the top not being
sure that it might get closed completely.
User does not have control over not wanting to join the 5 community at the beginning, when they are signing up.

4.RECOGNITION RATHER THAN RECALL: Make objects and things memorable instead of using user’s memory.
Instruction should be visible or easily retrievable. At the sign in there is no instruction how to do the second step.
There is no instruction and the user must figure it out by themselves. the user has to click on the blue “join” button
to join any other community from the lists. They have to click on the white” joined” button in order to leave.

Page 4
 SENG 310 - Human Computer Interaction - Midterm

5.HELP AND DOCUMENTA: It is better to be used without documentation, it is better to have that handy to
provide.
No documentation anywhere. There are a lot of odd terms and weird features, user must guess or make errors to
somehow figure them out. No documentation on what that feature is. How it is used. For example, Get coin.

==================================== END QUESTION 3 ANSWER ===================================

Question 4 [10 marks] [suggested length: 1p]

Using one usability issue identified from the heuristic evaluation, demonstrate a way to solve the issue using one
storyboard prototype. Provide an explanation for why you think your suggested prototype is good. Do include the
storyboard as a figure (not as a link). You can hand-sketch the storyboard or use digital tools.
=================================== BEGIN QUESTION 4 ANSWER ==================================

The issue I want to address is visibility of system status: Keep user inform about what is going on
When the user wants to sign in, the interface does not specifically tell you that it has already joined you to 5 of its
community by default. I am going to add that to the interface.

The user join the community and a prompt clearly tell them that how many community they ate joined to and
what is their name and how many more the user need to join. The user knows what is going on.

Page 5
 SENG 310 - Human Computer Interaction - Midterm

==================================== END QUESTION 4 ANSWER ===================================

For questions 5, 6 and 7, assume that you are asked to re-design the sub-part of the interface using the human-
centered design process.

Question 5 [5 marks] [suggested length: 0.5p]

Create a persona for someone you would consider is a typical user for the interface and provide
rationale/justification for your choice.
=================================== BEGIN QUESTION 5 ANSWER ==================================
Persona: Mary, 21 Uvic student
Mary wants to take an elective for her next semester. She did not have the best experience with one of the
courses she took lately. This time, she wants to know what exactly she is signing up for. She does not know any
upper level student that could give her information about the experience of a specific elective course with a
specific instructor. She tries to find something in the internet.
She uses the Google search engine and types: “UVIC CSC electives”. Google provides her with links to related UVic
websites and the 5th suggested link by google is a link to the Reddit website. She clicks on the Reddit link and a
related post from the r/uvic (Uvic page on reddit) webpage would open up. She found exactly what she was
looking for. A few firsthand and real experience of students going through the courses and they wrote about the
material and the instructor of the course.
She is proud by her discovery, and wants to share it with her friends, but they already knew about the Reddit
website, as front page of the internet, and they explained that it is somehow a news forum with lots of topics.
rational/ justification:
The choice for the age of the persona is based on the fact that majority of the users of these new trending popular
websites are younger generation. The persona is a student so she has uses google to find out almost everything
and she is good with exploring the web and trying new platforms. The task is to find out what course is better to
choose as her elective. Students usually have a lot of choices for their electives and they might not choose wisely
without help. Almost all the student would learn to research about a course and its instructor before committing
to it. The university is chosen to be Uvic because if the location was USA, the persona would have known about the
reddit already, because Reddit is well known in USA. If the location was somewhere in middle east, probably it
would not come up.
==================================== END QUESTION 5 ANSWER ===================================

Question 6 [5 marks] [suggested length: 0.5p]

Develop one key task description for this persona and provide rationale/justification for your choice.

Key task: Read the comments on the post she just discovered on the Reddit website and saving the post. She even
might want to join the r/UVic page on reddit.
Rationale/justification for your choice: One of the main features of Reddit is to enable users to share and discuss
the content they enjoy. The first task the persona would want to do is to gather more information about the UVic
CSC electives. She notices the discussion under the post. She wants to explore the comments because those are
former students’ opinions and experiences with those elective courses. The post was commented with the upper
level UVic students and there are discussions and opposite opinion as threads. Users even rated a comment based
on its content. The comments are so helpful and educative for our persona and her first action would be to read
those comments to fulfill her primary motivation that was gathering information about the elective courses.

Page 6
 SENG 310 - Human Computer Interaction - Midterm

After reading comments she might want to save the comments that she found helpful. She might not bother to
make any other interaction with the website. It is possible that she just read the comment, find it helpful, makes
her decision about which course she wants to take and she might just leave the website. The persona interest and
behavior modeling depends on many factors but the primary task for this scenario is to read the comments. To
have more content for question 7, Let’s say she wants to save the post for her later references and the website
encourage them to join the r/UVic community as well.

=================================== BEGIN QUESTION 6 ANSWER ==================================

==================================== END QUESTION 6 ANSWER ===================================

Question 7 [10 marks] [suggested length: 1.5-2p]

Propose, using sketches / photographs and textual descriptions, two different solutions that will allow the persona
from Question 5 to complete the task identified in Question 6, and discuss the strengths and limitations of your two
solutions. Again, the sketches / photographs must be included as figures, not as a link to an external site.
=================================== BEGIN QUESTION 7 ANSWER ==================================
First solution: This solution considered a guest user, like our persona, that does not know the first thing about the
website. A prompt would inform them that they are at Reddit website and what they can expect.

Prompt: “You are visiting a post from “r/Uvic” community on “Reddit” website. Reddit is comprised of a network of
communities each with their own front pages. You are welcome as a guest or choose “Sign up” from top right of
this page to become a user and to have access to more features. Users can follow and submit posts to each
community and comment on posts.”

The user decides not to log in yet. They close the pop up with the cross. They start reading the post about the
courses. They now want to start their tasks which is to read the comments.

User clicks on view all comments and all 7 comments would appear in one screen and no other posts would clutter
around.

Page 7
 SENG 310 - Human Computer Interaction - Midterm

Persona wants to save a comment that they found informative, a pop up would appear to let the guest user know
that they cannot save a comment as guest user. And the pop up would give information about the page that the
post and comments are from.

Prompt: “In order to save a comment, you need to sign up using sign up button up right. The comments you are
interested in is from a post on “r/UVic” community that you can join. Click on “UVic” icon on the right to visit the
community.

The strengths and limitations for first solution: The design is easy and functional and not crowded
Strengths:
1. First time users will have enough information to decide if they want to continue with the website or leave.
2. The design is not cluttered with all other disorganized texts and links all over the place. It is to the point.
3. Prompt give the instruction to what to do in order to complete their task
Limitation:
User is missing all the possible potential of the Reddit website because the design in trying to be not too crowded.

Second solution:
I want to address that users intuitively scroll to the bottom of the page to see comments. Threaded discussions are
still the preferred way to organize the conversation when there’s a lot of content. But in the current design of
reddit there are a lot of other suggested pages at the very end. So in my design when the user scrolls down there is
just the comments.

Page 8
 SENG 310 - Human Computer Interaction - Midterm

The strengths and limitations for first solution: The design makes sense based on previous experience
Strengths:
1. The intuition of the user is taken in account
2. Prompt give the instruction to what to do in order to complete their task
Limitation:
Cannot have related post at the end of the page

==================================== END QUESTION 7 ANSWER ===================================

Page 9