LAB 5 – Improvement of a service business website

GOALS
Design principles help us design websites that will make users more productive. Knowledge of the
characteristics of human cognition also helps us to design websites that respect the strengths and
limitations of users.
This laboratory aims to improve and expand the service business website developed at lab 4.
During this laboratory, you will need to:
• Learn a JavaScript framework, jQuery, to get a responsive site.
• Think about the cognitive load your website has.
• Think about the use of icons (an important visual communication tool)
• Continue your design in relation to the design principles presented in Dr. Norman's
book Design of Everyday Things.
SUBMISSION DEADLINE
● Wednesday, March 10, 2021, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, the lab 5 contains a link to your submission.
● Don't submit files. Submit a link to your GitHub repo as well as your web page for
this lab. The link for Lab 5 should not be the same as the link for Lab 4. Keep both
versions of the site separate.
● WARNING: Any code or even "little piece of code" you take from such a stack
overflow or other website should be accompanied by a comment that recognizes the
source. You must, in your submission text, state "Code for X inspired by (html link)."
SEG3125 Analysis and
Design of User Interfaces LAB 5 – Improvement of a service
business website
INSTRUCTIONS / TUTORIALS TO FOLLOW
We are continuing our exploration of HTML/CSS/JavaScript technologies to build websites. This
week we will use a framework called jQuery.
You've seen so far that HTML/CSS
is used to design your web page
and that JavaScript allows actions
(change of the DOM based on
events).
jQuery is primarily used to help write
JavaScript and make it easier to call
functions that "react" to various
events occurring on the HTML page.
I suggest you use w3schools.com website, to explore what is possible to do with jQuery. You can also
use the code I provide you (see Starting Point section) which contains several small bits of code and
links to the appropriate sections of the jQuery tutorial in the w3schools site.
DESIGN
In this lab, you must continue the development of your service business website that you started
last week, either a hair salon or a bike repair shop. Depending on the new requirements requested
in the Programming section, you may need to rethink some of the design.
STARTING POINT
I provided a folder with a bit of JavaScript code that shows the use of jQuery. You can see the
rendering here. I suggest you browse through this code in which I have entered several comments
and put links to appropriate sections of the tutorial offered by the w3schools as well as to other
tutorials.
Don't forget that this is just a starting point, your site should reflect your design choices.
PROGRAMMING
Basic requirements of your page (Compulsory)
1. Two new functional requirements:
a. Currently, your site demande to a user to choose a service (e.g. long cut, brake repair)
and a date. Now, your site will also have to allow the user to choose the professional
(hairdresser, mechanic) of his choice.
b. In order to guarantee a reservation of services, the user must provide his credit card
Information. You need to add a payment section to your site.
2. Requirements for human cognition:
a. Warning: To ensure that the user "knows where he is" when he returns to the site, it is
useful to add a menu, like a NavBar, at the top of the page. Users tend to look at the top
of the page (focus point), and if they see a menu, this will be reassuring. The NavBar you
use will actually be just a menu whose options bring the user back to a place in your
page. You don't have to create other pages; your new menu will contain pointers in
places on your page.
b. Memory: Due to the brain’s short-term memory limitations, avoid having large menus
(multiple sections). If you offer 10 types of services, for example, organize these services
into subgroups.
c. Perception: Think of these Gestalt's laws by looking at your site. For example:
i. Law of Similarity: Do you have similar elements (same color, same icon) that
help you see a group.
ii. Background law and form: do you have clearly visible icons on the various
backgrounds.
iii. Focus Law: Do you have a highlighted point (such as the navbar mentioned
above).
3. Requirements for visual communication tools:
• Choosing good icons to use on a website is difficult, especially for actions or abstract
concepts for which it is more difficult to find good metaphors or representations. To
force you to think about the choice of icons, you need to add icons to:
o Services
o Experts
o Payment
o Two other elements of your choice
You'll see in the starting code that I put icons not really appropriate but that come from a bank of
icons(Icons 8). There are several other icon banks. You can also draw your own if you want. Also, look
at one of my icons as it is visible on a white background, but not on a black background. You have to be
careful about that.
4. New requirements related to the design principles presented in Dr. Norman's book Design of
Everyday Things. In the last laboratory, your requirements included visibility, affordance,
mapping, and consistency. In this lab, we will try to focus specifically on feedback and
constraints, but also keep the other principles in mind.
Visibility and affordance: I see what I can do, and I understand how to do it.
• Help understand what information to provide and why:
o Using tooltips, help the user understand what to provide as information and why.
For example, asking for his credit card information may seem strange to him, and
therefore it must be explained to him that it’s in case of a last-minute cancellation
(or other reason).
• Increased entries:
o When the user puts his mouse on an entry box, change the color of the
input, for example, or accentuate that entry in another way.
Constraints: I can only make acceptable choices.
• Input validation: When a user enters information into a text-type input component, they
can write anything. You will need to use regular expressions to validate the format of the
following entries:
o Phone with format (xxx) xxx-xxxx (or other, of your choice)
o Credit card number with format "xxxx xxxx xxxx xxxx"
• Available dates limits: When the user chooses a date for their service, they are presented with
a timetable. In this calendar, some dates will have to be unavailable.
o Weekends (or Sunday/Monday, as you like)
o Dates that do not correspond to the chosen professional. You will need to have a
data table in your kind (Daniel, Tuesday-Wednesday-Thursday, Johanne,
Tuesday-Wednesday) that establishes the working days of each professional.
Thus, when the user chooses Daniel for example, the only days of the available
calendar should be Tuesday-Wednesday-Thursday.
Warning: Regular expressions can become very complex. I'm only asking for fairly simple number
validations, and I'm putting an example in the starting code. Also, for date validation, I suggest you
use datepicker, a component of jQuery UI. I put an example in the starting code. Your challenge will
be to hide certain days depending on the choice of the professional.
Feedback: What just happened? Did I make a mistake?
• Entries errors: When a user enters information into a type “text” component, he can write
anything. In addition to validating these entries (see section constraints) you need to give error
messages.
• Any other feedback you feel is necessary to help the user understand what happened.
Consistency: The site is uniform.
• Choosing the jQuery UI theme related to the atmosphere of your site.
o jQuery UI offers themes for your components https:/jqueryui.com/themeroller/
and you have to choose a theme that fits well with your site. You will see in the
starting code that I have chosen a theme; you can change it.
• Choose icons related to the atmosphere of your site.
o You need to add icons to your site, make sure you choose icons styles that represent
the style of your website.
EVALUATION
● This lab is worth 3.5%.
● Any student with requested requirements will be granted 10/10. Each requirement
will be penalized by one point.
● Failure to provide code-inspired sources of online code will result in a score of zero.
● Any retard, beyond the deadline, will have a penalty of 10% per day of delay, up to 2 days.
QUESTIONS
● You can ask your questions during the lab session on Wednesday, March 3rd.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)