6.4500 Design for the Web: Languages and User Interfaces

↑ All assignments

Assignment 5

Due

In Exercise 1, you'll apply CSS and design principles to your HW1 homepage. Then, you'll practice heuristic evaluation by critiquing a peer's Expenses App (Exercise 2), improving your own Expenses App from grader feedback (Exercise 3), and comparing instant messaging UIs (Exercise 4). Also, you can optionally do a HW3 Exercise 1 retrograde.

Submitting your homework

We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw-YEAR/hw5-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

If you submit after the deadline, it will count towards your slack hours.

AI Usage

(HTML generation guidelines updated March 4, 11:30pm)

Allowed uses

Unallowed uses

Exercise -N: HW3 Retrogrades (Optional)

Now that you've received feedback on some of your assignments, we are offering a (completely optional) opportunity to improve some of your past work and resubmit it for a retrograde. Your final grade on an exercise will then be the average of the original grade and the retrograde. For example, if you got 10 points on the original exercise and 20 points on the retrograde, the final grade we'd put down for the exercise would be 15 points. We will never give you a lower grade than you got originally.

Not all exercises are eligible for retrogrades, either because they are part of multi-week assignments already or because we don't think fixing up that exercise provides a good learning opportunity.

This week, you may request retrogrades for any or all of:

To submit a regrade, simply commit and push additional changes to the relevant exercise in that week's repo. Retrograde submissions are due with the assignment where they are offered.

Regrades are an experiment. We would like to offer them in future weeks, subject to how this initial experiment goes. In future weeks, the amount of credit you regain, the problems you can regrade, and other details are subject to change.

Exercise 1: Adding CSS to your HW1 homepage (30%)

Now that we have learned some CSS and graphic design principles, time to play with it!

On the website you created for HW1 Exercise 2, add a "portfolio" page listing the apps you've worked on so far as part of this class. Each listing must (as a minimum) have a title, screenshot or video, and a description.

Add a stylesheet on your website, that applies the design principles we've learned in class (proximity, alignment, contrast/hierarchy, repetition). You should use grid and flex layout at least once each across the website (e.g. overall page layout and portfolio listing).

Your HTML will be evaluated anew as part of the assignment, which gives you chance to fix all the problems that were flagged for you in assignment 1. Or you can redo the entire website if you wish. Either way, pay attention to using correct structure and semantic elements.

Deliverable: Your updated website in homepage, including:

  • A portfolio page that lists the apps you’ve worked on in this class; each listing has at least a title, a screenshot or video, and a description.
  • A stylesheet that applies the design principles from class (proximity, alignment, contrast/hierarchy, repetition).
  • Grid and flex layout each used at least once across the site (e.g., overall page layout and portfolio listing).
  • Valid, semantic HTML with appropriate structure and elements (your HTML will be evaluated again as in HW1).

Exercise 2: Critique another student’s Expenses App (20%)

We have anonymized your Expenses App submissions from HW3 and made them available for you to critique and improve. Sign up here.

Some rules to follow:

Perform a heuristic evaluation of the app you selected, following the methodology described in class. Descriptions of issues should use the vocabulary discussed in class, not subjective assessments like "this is hard to use" or "this is confusing". Use the suggested report format from the slides. Going beyond LES, label each issue with one of the categories from either Nielsen's Heuristics) (details) or Tognazzini's First Principles (details).

Report 4 issues fitting 4 distinct categories in the list of heuristics you have chosen (Nielsen or Tog). Do not report cosmetic flaws, nor flaws of low severity if there are flaws of high severity. If your chosen app is so good that you cannot find 4 flaws, report instead on particularly notable positive contributions to usability, in the same format.

You may not discuss your app with others who are evaluating it, nor share the feedback you receive on it from the graders, until this exercise is complete.

Deliverable: An HTML page with your critique in expenses-evaluation/, including:

  • A heuristic evaluation of the peer Expenses App you selected, using the suggested report format.
  • 4 issues in 4 distinct categories from either Nielsen's Heuristics or Tognazzini's First Principles (or notable positive contributions, if the app has fewer than 4 flaws).
  • Valid, semantic HTML with appropriate structure, hierarchy, and readability; you may apply CSS to make it easier to read.

Exercise 3: Fix up your Expenses App (20%)

You have already received feedback (from course graders) on your expenses apps. Fix up your app to address problems it identifies. It will be graded according to exactly the same criteria as in hw3. If you are satisfied with your previous grade, you can skip submitting (leave the directory empty) and you'll get the same grade again (scaled appropriately)

Deliverable: Your improved app in expenses/, including:

  • Fixes or improvements that address the problems identified in the grader feedback you received on your HW3 Expenses App.
  • The same functionality and structure as required in HW3 (graded according to the same criteria).

Exercise 4: Evaluating instant messaging UIs (30%)

Pick two out of the following Instant Messaging UIs:

Pay particular attention to:

Compare these UIs in the three usability dimensions (Learnability, Efficiency, Safety) and graphic design. While you need not write the formal heuristic evaluation reports of Exercise 2, you should still anchor your discussion in the heuristics and vocabulary discussed in class, not in subjective assessments like "this is hard to use" or "this is confusing".

Deliverable: An HTML page with your critique in im-critique/, including:

  • A comparison of two instant messaging UIs in the three usability dimensions (Learnability, Efficiency, Safety) and in graphic design.
  • Discussion anchored in heuristics and vocabulary from class, e.g., Nielsen or Tog (not subjective assessments like "hard to use" or "confusing").

Exercise N: HW5 feedback

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc.

Please fill in your feedback about HW5 in this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.

← Assignment 4 Assignment 6 →