HCI 2023 Assignment 3编程辅导

HCI 2023 Assignment 3
High Fidelity Prototype
Landing page and registration form for a carbon footprint website, and a report.
20 marks in this assignment, for 20% of your final grade.
This assignment will be completed individually
Each student should plan to spend 18 hours on this assignment
For submission instructions please see the section on submission below.
Due May 31 2023, 2:30pm
Please note the submission time of day
Aim
Aim The aim of this assignment is to develop a hi-fi prototype as a mock-up Web interface. The
assignment allows you to practice skills in high fidelity design, Web technology, HTML, CSS, and
JavaScript. It will require you to put the visual design principles discussed in class into practice. Lastly, the
assignment demands that you adopt an inclusive design practice by taking web accessibility into
consideration.
Figure 1 - Screenshot taken from a carbon footprint themed website. Your prototype should have
comparable visual complexity to this example.
Background
Imagine that you have been asked to design a website called “Carbon Easy! (CE)” including its
registration form. CE intends to use this website in order to enable users to calculate and compare their
carbon footprints.
A combination of usability, visual appeal and accessibility will make sure the visitors get the most out of
your site, building the foundation for an exceptional user experience. The login or registration form is a
typical part of websites that provide personalized services. The user experience of the website and such
online forms supports the relationship between the service and its audience.
You are tasked with developing their website. It should include a registration form which will allow new
members to fill up their details and submit the form. The business will then handle future carbon
footprint initiatives and other member benefits.
For this assignment, you will have to prototype only:
1. the homepage and
2. the online registration form
You are designing for a high-fidelity prototype therefore, it does not need to be fully functional (i.e., the
prototype does not connect to a database, nor does it actually submit the form field input). Error
checking for format of addresses, passwords, mobile number, is out of scope.
High Fidelity Prototype
Part 1 Main page
Design a homepage for CE. There are no restrictions as to what you can include in the homepage, as long
as you stay with the topic of carbon footprint calculators. You are NOT required to actually include a
functioning carbon footprint calculator, rather, you just need an informative and appealing homepage.
You should also include a navigation bar, a supporting image and a primary call-to action, in this case a
button or link for registration. Make use of the visual design principles discussed in class and take into
account the basic accessibility guidelines.
The screenshot in figure 1 shows an example of a website similar to what CE wants. Your solution should
have a similar visual complexity and use Gestalt principles and other Design principles where
appropriate, and this should be described in the report.
Your design should be suitable for a 1920x1080 screen, more specifically you should check that it looks
as you intend it with the Google Chrome tool to test a custom screen size as described in Q10 of the Q&A
, and that it is readable if it is displayed on a 14 inch screen, a typical business laptop. Your design does
not need to be responsive.
Both the home screen and the form should be useable without scrolling at this resolution.
This is important for both the homepage and the form to showcase the visual design in this exercise.
The organisation has a particular brand colour that they are known for and that they want used in the
website for brand recognition, and this is sent to you via your UPI email. Your design should use the
colour in an appropriate way that ensures the customer aim of brand recognition through that colour. It
must be present in multiple html elements in the homepage, and it must adhere to the more specific
specifications below.
The organisation CE insists on restricting the implementation to vanilla Javascript and the stylesheet
w3.css and and Fontawesome and necessary google fonts.
Your website has to meet accessibility guidelines including colour contrast.
In HTML, colours are defined using the attributes "color" typically for foreground elements, such as text
or borders on a background; and "background-color" which is a colour used to fill a background. Imagine
that you are working with a design team that requires standardised naming of HTML elements.
To apply the assigned colour to elements in your design, there are two steps:
1. you are required to define CSS class selectors in the exact format described below (with the
example assigned colour #ffffff) and
2. you must reference the CSS class selector in the element. This means, all elements that use the
brand colour should explicitly do so in your source code, and not for example inherit the colour
through other styles. You could imagine a design reviewer and brand owner using this to check
on all the uses of the brand colour.
Please note that we are using ...-colour as the spelling for the new selectors that we define.
Here are the examples of correct and incorrect definition and usage of the CSS class selectors.
CSS class selector format in your CSS file:
.custom-colour { (correct because correct CSS class selector name)
color: #ffffff;
}
.custom-background-colour { (correct because correct CSS class selector name)
background-color: #ffffff;
}
.custom-color { (incorrect because incorrect CSS class selector name)
color: #ffffff;
}
.assigned-background-colour { (incorrect because incorrect CSS class selector name)
background-color: #ffffff;
}
HTML referencing format in your HTML file (if you want to use the colour for an element):

TEST

(correct because colour class is referenced)

TEST

(correct because colour class is referenced
along with other selectors)

TEST

(incorrect because colour class not referenced)
Part 2 Registration form
Design a registration form for a CE member. The form should be in a modal window that pops up as an
overlay on top of the homepage. The modal window only appears if you click the registration button or
link from the homepage.
The modal window should also have a close button (usually a button labelled “x”) that closes itself and
restores the homepage. This can be achieved using a simple JavaScript code. The button or link that you
click to trigger the opening of the modal window must have an id of “trigger-modal”.
For example:
Register
Your form should have exactly 3 sections with all of the 8 following input fields (each is exactly only 1
input field):
● User Details
○ Given name
○ Surname
○ Username
○ Password
● Addresses
○ Home Address
○ Work Address
● Contacts
○ Mobile Number
○ Email
For the purposes of this assignment, do not add any additional sections or form fields to the registration
form which differ from the above specified sections and fields.
For simplicity, your form should keep these three sections within ONE column. The visual subdivision into
the three sections should only use proximity.
Furthermore we assume that your design team requires that the three sections have the exact div ids:
● userInfo (For example:

)
● addressInfo (For example:

)
● contactInfo (For example:

)
Remember to use these exact div ids for each section.
Your design team also requires that you enclose the entire form with a div html element with the id
"form-ct". For example,

…

.
In general, the HTML should be well-formed. This can be achieved by using some of the free IDEs that
check markup.
Assignment File Structure/Folder Requirements
While folders are common for web file organisation, for the purposes of this assignment you must not
have any folders. All of your files, such as your CSS and image files, should be in the same folder where
your index.html file is located. Do not put any files in subfolders. Your directory structure should be
similar to the file structure below for example:
The examples below show you how you call local files from your html:
(correct)
(correct)
(incorrect because it is in a subfolder)
(correct)
(incorrect because it is in a subfolder)
For questions see section 12 to 14 of the Q&A.
The Report
You will also need to submit a report. In the report, describe the rationale behind your visual design
choices.
We recommend including annotated screenshots for more clarity and professionalism. We expect that
the length of the report would be max 1200 words (including titles/headers/figure captions and
excluding references).
Submission instructions
Use the Validation Prior to Submission
The submission system https://hci-submissions.researchprogrammerhub.cloud.edu.au will help you
ensure that your submission meets certain technical specifications. (After each upload, a validator will
check most but not all of the technical requirements in this assignment). You can submit a .zip file. You
will need to login using your university email (i.e. your_upi@aucklanduni.ac.nz)
There are no restrictions as to how many times you use the validation. You can validate your assignment
as many times as you need to before the deadline.
We reserve the right to reduce marks for any technical specifications not followed. Passing all the
Validator Syntax tests is an important indicator that your assignment meets technical specifications but
you are responsible to check for all specifications.
In case of issues with the submission system, please contact d.dimalen@auckland.ac.nz.
Submission Overview
You will need to submit in two places.
1. to Canvas all files including the Report in PDF format, as a zip file
2. to the submission system
https://hci-submissions.researchprogrammerhub.cloud.edu.au
as a zip file except the report.
This submission system will accept your last submission before the deadline as
the final submission.
You need to submit in BOTH places. All of your files, such as your CSS and image files, should be in the
same folder where your index.html file is located. Do not put any files in folders or subfolders.
.
A2 Submission Marking Scheme
For evaluating the compliance of the submission, e.g., with accessibility guidelines, we will use
manual marking and we may use tools to check, e.g., colours. Please recall that only W3 CSS is
allowed.
Report
Quality, clarity of justifications for user experience, Gestalt principles, balance, emphasis, unity,
colour scheme for main page and form. (5 marks)
Visual design
Overall quality of user experience, Gestalt principles, balance, emphasis, unity, colour scheme
for main page and form. (5 marks)
Common Fate Form follows the Gestalt principle of Common Fate. (1.5 marks)
Proximity Form visual subdivision only uses the Gestalt principle of Proximity. (1.5 marks)
Colour Assigned colour is emphasised and present in multiple screen elements. Colour contrast
meets accessibility guidelines. (3 marks)
Functionality
Accessibility Submission follows accessibility guidelines presented in lecture. (4 marks)
Functional correctness Form pops up and closes as specified. No bugs. (1 marks)
Technical Specifications
All instructions and specifications have been followed. No errors from Validator. The HTML is
well-formed. (Up to -4 marks, as deduction if not fulfilled)
Q & A
This section includes common questions regarding the projects. If you still have any questions don’t
hesitate to ask on Piazza.
Q1: Can I use other colours?
A:
Yes, you can, but you need to include the exact brand colour you were given a few times on the website,
and also theme your colour scheme around said colour.
You can use a colour scheme such as complementary or analogous colour scheme that contains your
colour.
Remember, the intuition behind the assigned colour is that this is the brand colour of our customer. So
the customer wants to receive a solution that fits to the brand in terms of colour. Additionally the use of
the colour should be discoverable by using the css naming scheme that is prescribed. You could imagine
a design reviewer and brand owner using this to check on all the uses of the brand colour.
E.g., if my colour was #FFBA00 I would play around with https://paletton.com. And find
similar/complementary shades I could use.
Q2: Can I use inline styles?
A:
Yes.
To clarify, inline CSS is having the styling code inside the HTML file, and not in a separate CSS file. You are
allowed to either have a separate CSS file or use inline styles.
Q3: Will I get full marks if my project passes the
validator?
A:
No, the validator is a tool to help catch any formatting errors you may have; it will not mark your project.
Q4: Can we use Google Fonts?
A:
Yes.
Q5: Can we use templates?
A:
You may browse for templates only from w3school’s w3.css templates.
https://www.w3schools.com/w3css/w3css_templates.asp.
But you need to ensure that you modify the template substantially, to make it your own. You also still
need to indicate your code contribution.
No other templates other than the ones mentioned are allowed. You are not allowed to use anything
that generates code for you. The reason for this approach is that downloading a template that sets the
colour scheme, the font scheme or has a creative layout isn't your own work. Intrinsically, this
assignment does not require elaborate toolkits, given the super-limited functional requirements of the
system. The assignment focuses on making good design choices rather than implementing maximum
functionality.
W3schools template recommended to study popup functionality:
https://www.w3schools.com/w3css/tryw3css_templates_mail.htm
Q6: Can we use External Style Sheets?
A:
You may only use w3.css and Fontawesome and necessary google fonts. No other stylesheets are
allowed in this assignment (i.e. bootstrap). The intuition behind this is that we assume the customer has
this restriction as part of its web programming guidelines.
Q7: Does the website need functionality?
A:
No, the only functionality you need is to open and close the pop-up modal. You do not need to include
anything more complex.
Q8: Do we get better marks for responsive
websites?
A:
Although we encourage it, this assignment will not mark you based on website responsiveness, so there
are no marks for website responsiveness.
Q9: Can I use multiple HTML files?
A:
No, please only use one HTML file named ‘index.html’.
Q10: How do I make sure my website is suitable for
a 1920x1080 desktop?
A:
The examples shown will be for Microsoft Edge and Google Chrome, though most web browsers should
support this function. Before submission, you should review your design with Google Chrome.
You may follow these steps
1. Right click anywhere on the browser.
2. Click ‘inspect element’.
3. You should now see the ‘developer tools’ section. (By default it is on the right)
4. Click the ‘toggle device toolbar’ icon.
It should look similar to the image:
It is also highlighted in red in the following screenshot.
5. Now you should notice some changes to the browser.
Near the top of your browser (just under the address bar), you should see two input fields. Set
the dimensions to 1920 x 1080.
6. Now you can see your browser in 1920x1080 resolution. These are the dimensions that your
marker will see your website in.
Q11: Can I add more sections to my form?
A:
No, please only add the sections mentioned in the specifications.
Q12: Can I have multiple input fields per question?
A:
No, each question can only have one input field.
Incorrect (showing two input fields side by side):
Correct:
Q13: Can I separate the sections into multiple
columns?
A:
No, all the sections and their corresponding questions must be within one column.
Q14: Could I submit my github repo?
A:
No -- you must follow every single submission instruction precisely as they’ve been laid out. Each
instruction is there for a reason. Please ask us in lecture if you are curious!
Q15: How should I check the colour contrast of web
elements?
We recommend: https://webaim.org/resources/contrastchecker/
Q16: Can I work from my contributions to the
low-fidelity prototype from Assignment 1?
Yes! You can reuse the layout that you designed in A1 but you cannot share code or collaborate with
peers in refining your high fidelity prototype.
You do not have to reuse the layout from your A1.
Sources
Carbon footprint website example - https://www.nature.org/en-us/