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

← Assignment 4

Assignment 5

Due

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. You can submit as many times as you want. Your homework is not submitted and is accruing slack hours until you do this!

Please make sure each of your exercise-N 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 that expect a local server to run at a specific directory within your repo, and if 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 (33%)

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: Evaluating calculator UIs (32%)

Screenshot of the calculator in the middle of the operation (42 +
The OSX Catalina scientific calculator
Screenshot of the calculator in the middle of the operation (42 +
The Windows 10 scientific calculator
Spend some time using the native OSX and Windows 10 calculators in "Scientific" mode. Pay attention to: - The memory functionality (MC, M+, M-, MR etc) - The graphic design of the interface - The way functions are implemented - The way grouping (parentheses) work - How do these two interfaces indicate your current place in the calculation? - How recoverable are errors you make? Compare and contrast these two UIs in the three usability dimensions (Learnability, Efficiency, Safety), as well as in terms of graphic design (grouping, proximity, alignment, simplicity etc). Apply the heuristic evaluation methodology described in class: reference any of the taxonomies provided there, and report to specific issues in the format described. Which one do you think has better overall usability? Is the answer different for users that have never used a calculator before and expert users that use a calculator every day?
**Deliverable:** An HTML page with your critique. As always, please use appropriate HTML elements in your writeup and pay attention to structure, hierarchy, and readability. You can also apply CSS to make it easier to read.

Exercise 3: Evaluating instant messaging UIs (32%)

Pick four out of the following Instant Messaging UIs: - Facebook Messenger - Skype - Twitter DMs - Instagram DMs - Whatsapp - Slack - iMessage - Viber - Signal - Telegram - Your choice of messenger Pay attention to: - Threading, if any - 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), graphic design. Apply the heuristic evaluation methodology described in class: reference any of the taxonomies provided there, and report to specific issues in the format described.
**Deliverable:** An HTML page with your critique. As always, please use appropriate HTML elements in your writeup and pay attention to structure, hierarchy, and readability. You can also apply CSS to make it easier to read. Please include screenshots or videos to illustrate your points.

Exercise 3: HW4 feedback (3%)

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 HW4 in `exercise-4/index.html`.