data编程代写、代写Java，Python程序

日期：2023-05-20 01:23

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):

<div class="custom-colour">TEST</div> (correct because colour class is referenced)

<div class="custom-colour sample-class">TEST</div> (correct because colour class is referenced

along with other selectors)

<div class="sample-class">TEST</div> (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:

<a href="#" id="trigger-modal">Register</a>

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: <div id="userInfo">)

● addressInfo (For example: <div id="addressInfo">)

● contactInfo (For example: <div id="contactInfo">)

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, <div id="form-ct"><form>…</form></div>.

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:

<link rel="stylesheet" href="index.css"> (correct)

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> (correct)

<link rel="stylesheet" href="css/index.css"> (incorrect because it is in a subfolder)

<script src="scripts.js"></script> (correct)

<script src="js/scripts.js"></script> (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/