6.S063 Design for the Web: Languages and User Interfaces

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

• Please make sure each of your exercise directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly.
• Do not use root-relative URLs (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.

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

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 layout at least twice 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.

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

We have anonymized a selection of the Expenses App submissions from HW3 and made them available for you to critique and improve. You can find the list here.

Sign up here to critique one of the apps by entering your GitHub username next to the app you will improve.

Some rules to follow:

• You cannot select your own app. Please click through the app before selecting it and make sure it's not your own.
• Do not select the same app as someone else, unless there are no other apps left. In other words, do not fill in the "Student 2" column if there are still apps left in the "Student 1" column. The spreadsheet itself tries to enforce this too.

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.

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

You will receive feedback on your expenses app by Friday of this week. 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)

Exercise 4: Evaluating instant messaging UIs (30%)

Pick three out of the following Instant Messaging UIs:

• Facebook Messenger
• Skype
• Twitter DMs
• Instagram DMs
• Mastodon DMs
• Whatsapp
• Slack
• iMessage
• Viber
• Signal
• Telegram
• Your choice of messenger

Pay particular attention to:

• Threading, if any
• Compose new message (1 person as well as multiple)
• Search functionality
• What errors can be made with this interface?
• What is the recoverability in case of errors?

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".

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.