Construction of a survey’s User Interface

GOALS AND OBJECTIVES
This laboratory aims to build a static web page that lays out a survey to describe the user
interface of a site of your choice. During this laboratory, you will need to:
• Get familiar with HTML and CSS for webpage building.
• Set up your site to demonstrate your practical work.
SUBMISSION DEADLINE
● Wednesday, February 3rd, 2020, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, In the Lab 1 submission link.
● Don't submit files.
● Submit only a link to your web page for the teaching assistant to see the rendering of your
survey.
SEG3125 Analysis and
Design of User Interfaces MODULE 1 - TUTORIAL / LABORATORY
Construction of a survey’s
User Interface
INSTRUCTIONS / TUTORIALS TO FOLLOW
(1) You must first familiarize yourself with HTML/CSS. The
tutorial on the W3 School website is really great. Take it one
step at a time. You can't see everything, but look at
least until the HTML Blocks part and until the CSS Align part.
(2) Since the purpose of your lab is to build
an HTML questionnaire, you can look at the
following site:
https://www.wikihow.com/Create-aQuestionnaire-in-HTML
(3) Create your demonstration space for your
labs/project. Use GitHub Pages that will allow
you to have your own website at the address
username.github.io.
Programming
Using HTML/CSS, you need to generate a static web page (which does not respond to actions) which
is a survey of the user interface of a website of your choice. You decide for yourself which questions
to ask.
Basic requirements of your page (Compulsory)
Your page should be minimally "pleasant to look at" and have some consistency (coherence). We will
see throughout the semester different design principles, so this is only a firststep. Your page should
contain:
• A title
• A link to the website
• An image of the page (IU to be evaluated) that also serves as a link to the website.
• A form containing at least 6 questions related to the evaluation of the
Website:
o A text-type question
o Two single choice questions (radio button and a list)
o A selection question (several boxes can be selected)
o A space to write down comments.
• A button to submit the questionnaire.
• Your signature (Website designed by ...) at the bottom of the page.
• The use of <div> tags to make the questions uniform.
• Using external CSS (separate file) to set styles for titles, divisions, your signature at
the bottom of the page. Explore font, color, alignment, etc. changes.
Additional possibilities (Optional)
• Allow the user tozoom in on part of the image.
• Use a photo gallery to show multiple pages of the site.
• Ask questions related to various images (various parts of a site)
• Use an image in the background to make the site prettier.
• Add any other HTML/CSS elements to improve the rendering of your survey and make
people want to do it.
WARNING: You create a static site, the "submit" button does nothing. We
will use Javascript from next week to get dynamic websites.
FOR START: If you don't know how to start, use this
Repository as a starting point SEG3125-Module1-Survey.
You can see the rendering of this page here.
EVALUATION
● This lab is worth 3.5%.
● Any group who has included all the items requested in the basic requirements will be
awarded 10/10. One point will be deducted for each missing item.
Questions
● You can also send your questions directly to Farouk (bfarouk@uottawa.ca)