LAB 3 – Online Grocery Website Alternative Design

GOALS
The proposal of design alternatives is fundamental to user-centered design. The purpose of this
laboratory is to build an alternative version for the website built during Lab 2 that allowed a user
to buy items from an online grocery store.
During Lab 3, you will need to:
• Continue to familiarize yourself with JavaScript for building responsive web pages.
• Get familiar with UI implementation toolbox: components (widgets), structural patterns,
navigation patterns.
• Implement various elements of this toolbox, in JavaScript, to develop a different website
than the one you proposed in Lab 2.
SUBMISSION DEADLINE
● Wednesday, February 17, 2021, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, the Lab 3 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 and your web page for the previous Lab (Lab 2) So the TA can compare the
rendering of your online grocery alternatives.
● 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 ........................................(link
html)")
SEG3125 Analysis and
Design of User Interfaces LAB 3 – Online Grocery Website
Alternative Design
INSTRUCTIONS / TUTORIALS TO FOLLOW
From a technology perspective, this module encourages you to continue to familiarize yourself with
JavaScript. Structure and navigation patterns are important in UI design. So, I invite you to explore
the section HOW TO, under MENU, because you will find several examples of patterns of structure
and navigation. You will find that there are many more patterns than seen in class, but you will
recognize some (accordion, breadcrumbs, pagination, etc.).
Design
In this lab, you need to generate an alternative to your design from last week. To do this, keep
keeping your 2 characters in mind.
Lucie, 28, is a vegetarian. She'd like to be able to go grocery withoutbeing offered meat and fish. It has a
limited budget, so likes to see the items in order of price to be able to buy the cheaper. Lucie has vision
problems too, so she appreciates when the characters on the screen are big enough.
Eric,45, has a gluten intolerance. He would like to do his groceries without being offered items containing
wheat. He prefers to buy organic products, unless it is very expensive. Eric feels intimidated by all the
vegetable names he does not know and prefers to see pictures.
Consider staging these characters (screenplays). A scenario for a character is a journey through the
application that allows him to achieve his goals. The navigation pattern(s) you choose should allow
the scenario to come true.
STARTING POINT
I'm not providing any new code this week. It's up to you to generate your alternative design. Your
code from last week can be a starting point for you, and you can change it.
Programming
Using HTML/CSS/JavaScript, you need to generate a small, dynamic website that allows a
user to shop online.
Basic requirements of your page (Compulsory)
Our focus for this week will be on a good demonstration of UI’s design tools and
navigation patterns. Your website should contain:
• All laboratory 2 functional requirements are still required.
• The display of images of the products, to help Eric, was not required in Laboratory 2.
Your alternative should include images for products. If for your use images from a website,
indicate the source in your README file in your repository.
• Words
o Think about the choice of words. What words to put on the buttons? What
words to use in lists? In the instructions?
o For example, the departure code for Lab 2 contained:
▪ "Choose a category." That's too vague a question. And also, the choice
"Vegetarian” or "Gluten Free." A person cannot be "Gluten Free”, this a bad
choice of words.
▪ "We preselected based on your restrictions." Are they really restrictions,
or preferences? How to ensure that the user will not be shocked by the
word "restriction."
▪ "Here’s your cart." That is not very fair. Rather, it is the content of the cart
that is shown.
o Your new alternative should contain a fairer language.
o Watch out spelling mistakes, too. Your site should not contain any faults.
Have it reviewed by a relative or friend if you are unsure.
• Components (widgets)
o Incorporate various components such as lists, radio buttons, checkboxes into your
alternative. You certainly had some components in your Lab 2 site. Change these
components. For example, replace a list with checkboxes, or vice versa. Try to
understand how these choices constrain the user.
• Structure patterns
o In Lab 2, our list of products was a simple list, with no organization. You must add a
categorization of the products: vegetable, fruit, dairy, juice, etc. Choose the
categorization you want. And use a structure pattern that allows the user to see only
vegetables or only fruits, etc. Use a structure pattern that you think is appropriate.
• Navigation patterns
o For Lab 2, I offered you a navigation with the “Tab", this aim is to show information
in blocks, while at the very least leaving the user free to open one card (one tab) at
a time. Propose and implement a different navigation pattern (you can refer to the
HOW-TO area of the W3schools tutorial).
Additional possibilities (Optional)
• Did you code the Level 1 requirements quickly? Make a third alternative! It is often the
third time that we "don't know what to do" ... because you feel like you have already
done a good design on the 2nd try. That's where we have to push our imagination. If you
make a 3rd alternative, include the 3 links in your submission.
EVALUATION
● This lab is worth 3.5%.
● This lab gives you a lot of freedom, and so your evaluation will be based on your effort to
build an alternative site (so different from Lab 2) that meets the above requirements for
words, components, structural patterns, and navigation.
● Failure to provide code-inspired sources of online code will result in a score of zero.
● Any delay, 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, February 10th.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)