LAB 7: Designing a website of your choice

GOALS
Our theme this week is heuristic evaluation. We will use the 10 heuristics at the heart of the
heuristic evaluation to make our design, from its conception, up to the expectations of the
evaluators who could revise our design.
During this laboratory, you will need to:
• Design a site of your choice (this site will have to meet certain criteria listed in the Design
section)
• Prototyping (paper sketches, or mock-ups) of your site.
• Organize the underlying knowledge of your site's domain.
• Set a set of UI elements for your site related to usability heuristics.
Careful:
• Choose a topic that you like for your site because you will have to continue on this site duringthe next
2 laboratories. Lab 7 is therefore a first step (design), will follow Labs 8 and 9 for implementation with
React technologies. If you want to get a little ahead of these technologies, go back to net Ninja
videos! It has a very good series on React.
SUBMISSION DEADLINE
● Wednesday, March 24th, 2021, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, the Lab 7 module contains a link to your submission.
● Submit a PDF file containing your design report that will include your prototypes and
responses to the requirement provided in the Design section.
SEG3125 Analysis and
Design of User Interfaces LAB 7:
Designing a website of your choice
INSTRUCTIONS / TUTORIALS TO FOLLOW
This laboratory is different from the previous ones. I ask you to make a design that will include several
elements taught in the videos of previous weeks:
• You can choose to make paper sketches or, if you wish, you can decide to use
mockups/wireframes to make your prototype.
• You will need to make a semantic network that reflects the organization of your site's
knowledge, and you will need to make a site that contains at least 3 different human
interactive processes.
Design
As this is a design laboratory, the requirements of this laboratory are listed in this section.
Requirements for your website:
1. Your site must use at least 3 human interactive processes among theses 8:
• Following instructions.
• Absorb information.
• Monitored activity.
• Exploring.
• Analyzing results.
• Production/Design.
• Communicating.
• Planning.
2. Your site's UI should include an element related to each heuristic.
Requirements for your design report:
1. Give the name of your company (or organization).
2. Give a description of the purpose of this site.
3. Discuss the necessary knowledge organization, and present a semantic network showing
this organization. Limit your network to a dozen concepts, that will be enough.
4. Explain which human interactive processes will be put forward (at least 3).
5. Show a sketch/maquette for each process. Name these sketches to be able to refer to it in
your point (6).
6. For each usability heuristic (10 heuristics):
a. Explain what design element of a sketch is related to this heuristic.
STARTING POINT
I give you three examples of possible sites. You can use these examples to think about your site.
You don't have to find something super original.... That is not the point here. The goal is to practice
making a good design. Think of a website you would like to make because you will also continue it
in the next two laboratories.
For each of my examples:
• I've shown three processes. Your site must cover at least 3 different processes.
• I also give you some terms that would be part of the knowledge organization.
You must present a semantic network with terms and relationships.
• I'll give you some ideas for IU items related to heuristics. With my 3 examples, I cover the
10 heuristics. You have to discuss the 10 heuristics and point, in your sketches to the
elements corresponding to these heuristics.
My examples are incomplete. My goal is to indicate what to do, not to do it in its entirety.
Website for Student Painters
1. The site is a site of a company "Students at the Brush".
2. Students at the Brush offers services of indoor and outdoor painting, but also helps people
make good color choices.
3. The 3 processes:
a. Follow instructions: Users will be required to provide information on
work to be done, and the IU will guide them to obtain this information.
b. Explore: Users will be able to explore paint colors, types, prices. They will also be
able to explore the types of work done previously by the Team of Students at the
Brush to eventually choose the service they want.
c. Produce/Design: Users will be able to design virtual rooms with walls of various
colors side by side so they can see the layouts.
4. My semantic network should include the terms painting, works, measurements, colors, etc.,
and show the relationships between these terms. This organization will help me in the
design of structuring patterns that will be found in my sketches.
5. I should include at least 3 sketches for my 3 processes. Probably 4 sketches even here
because (3b) contains 2 different aspects in exploration.
6. I will give a design element for each of the 10 heuristics:
a. Consistency: We find the same theme (image and logo) at the top of each
page. See the sketches ...
b. Familiar language and metaphors: The words chosen for the buttons will be: ...., for
menus will be... (see sketch ...)
c. Simple Design: See sketch 1 in which it will be easy to explore paint colors by
doing ...
Website for a Virtual Museum
1. The site is a site of a non-profit organization "Art with You".
2. Art is with you aims to introduce all the great works of painting to those who cannot visit all
the different museums.
3. The 3 processes:
a. Explore: Users can explore exhibitions and artwork for the purpose of choosing one.
b. Absorbing information: Users can see a painting and zoom on various parts, and also
listen to an audio description of the artwork.
c. Communicating: Users can exchange opinions on the artwork
4. My semantic network will contain the terms work of artwork, artists, opinion, etc. and the
relations between these terms.
5. I should include at least 3 sketches for my 3 processes.
6. I will give a design element for each of the 10 heuristics:
a. ...
b. Freedom: When a user no longer wants to listen to the audio description of the work,
he or she will be able to stop. We can see the STOP buttons at the bottom of sketch 2.
c. Flexibility: Some art experts don't want to explore the works but already know
the title. The IU will provide a QUICK SEARCH entry allowing the user to write
the name of the work.
d. Recall Recognition: All information about artists and artwork will be shown as a list,
and small images (reduced sizes)
e. ...
Website for a Tennis Club
1. The site is a site of a community organization “At you rackets”.
2. At your rackets offers tennis lessons to its members, but also access to the tennis courts it
owns.
3. The 3 processes (here 4):
a. Follow instructions: Users can make a reservation for a tennis court. To do this,
the UI will guide them in what to input.
b. Follow instructions: Users can register for a course. To do so, the UI will guide
them in what to enter.
c. Explore: Users can explore the courses offered, as well as the availability of tennis
courts.
d. Communicating: Users can communicate with each other to help find people of the
same level to play singles or doubles with.
4. My semantic network will contain fields, hours of availability, instructors, courses, ...
and will also show the relationship between these terms.
5. I should include at least 4 sketches for my 4 processes.
6. I will give a design element for each of the 10 heuristics:
a. ...
b. Clear state: In each page, the menus will clearly give the options. For example,
in sketch 2, we see... and when a person presses the button to Book, there will
be a message...
c. Error prevention: When booking, the UI will show a calendar with only the
available hours.
d. Error Recovery: For all pages not on scheduled routes, the UI will display...
e. Help: There will be a global help with an item at the top of the page (see sketch 2)
explaining the website. Also, there will be local help, for example, sketch 3 shows.
an active tooltip for the Z button.
Programming
No programming. The requirements were given at the design level. See Design section.
EVALUATION
● This lab is worth 1.5%.
● Any delay, beyond the deadline, will have a penalty of 10% per day of delay.
Questions
● You can ask your questions during the lab session on Wednesday, March 17th.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)