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/hw1-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: Noticing the design of everyday things (25%)

Find 3 usability problems with things you use every day (e.g. oven, light switches, doors etc). None of these things should be software. For each of these:

1. Include one or more photos or video that showcases the part of the interface that is problematic.
2. Describe what the problem is. Which of the dimensions of usability discussed in lecture (learnability, efficiency, safety) suffer as a result? (1-2 paragraphs)
3. What could be done to fix this problem? (1 paragraph)

We have not yet given you substantial technical vocabulary to talk about usability, so it's fine to describe your observations in plain English. You should read chapter 1 of The Design of Everyday Things (DOET) and, where relevant, make use of the terminology introduced there — signifiers, affordances, mappings, conceptual models, and so on. If you read ahead, feel free to use that vocabulary as well.

Write your report with the following goals in mind:

• Completeness. Consider at least the LES dimensions of usability, at minimum to say there is no problem, and don't overlook an obvious usability issue that even the reader notices.
• Thoughtful Analysis. "Efficiency is bad, because it feels slow to use" is not a thoughtful analysis. "I've never made any errors with it" is not deep analysis.
• Clarity. The reader should not struggle to understand what you're talking about.
• Conciseness. This is technical writing. Unnecessary verbosity will be judged severely.
• Usability of presentation. Your report is itself a user interface whose purpose is to convey ideas to a reader. If your report isn't efficient to read then it will be harder for the reader to use, and it will not demonstrate an ability to apply the ideas of this class. Make judicious use of headers, short paragraphs, bullets for lists, emphasis (where appropriate), captions, labeled image parts (not simply a big blob of text + big unlabeled image), numbered figure captions, and other devices that make reading easier.
• Readability of code. Your code is also a user interface, whose purpose is to communicate with other coders (and your future self). Take care in making it readable, using proper indentation, alignment, line breaks etc.

Exercise 2: Learning to write good HTML (25%)

You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture (color, font, font-*), if you must. You will add CSS in the next assignment, but the focus of this one is to learn to write good HTML.

Create a personal website for yourself or someone else. It should have at least the following three HTML pages:

• Home with at least a picture and bio
• CV with at least Education and Work Experience
• Contact form with at least a subject and message

Pay attention to good information architecture, navigation, using semantically appropriate HTML elements, and good keyboard and screen reader accessibility. The CV will be an HTML page (not PDF, Word etc), though you're welcome to make it downloadable via HTML, if you want to.

Make sure that the form uses appropriate input types, as well as form validation attributes, where appropriate.

Exercise 3: Couple Expenses App Part 1 (25%)

You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture (e.g. color, font-size, font-weight), if you must. You will add CSS in a future assignment, but the focus of this one is to learn to write good HTML.

Neo and Trinity live together as a couple but prefer to maintain separate finances. Each of them has their own bank account and personal credit card, but they also share a joint credit card. They use the joint credit card to pay for shared expenses and split the bill equally at the end of each month.

However, this plan doesn't always work out. Sometimes one partner may pay for joint expenses with their personal card, or pay for personal expenses with the joint card. This can happen for various reasons, such as a more advantageous points program on the joint credit card or a temporary lack of funds.

To keep track of these anomalies, they currently use a spreadsheet that tracks who owes whom what. The spreadsheet is organized in columns based on how each transaction affects the total balance, such as "Trinity paid for Joint (expense)" and "Joint card paid for Neo" being in the same column because they both add half (i.e., X/2 where X is the amount) to the total balance.

Task 1: Usability problems with their current method (10%)

Copy the spreadsheet over and play around with it a bit.

What is the most important usability dimension for this app? What usability problems can you detect with this method? These may be problems inherent in using spreadsheets for these kinds of tasks, or problems with the design of this particular spreadsheet.

For each issue, note which dimension of usability (Learnability, Efficiency, Safety) it affects.

Task 2: Wireframe of app to help them manage expenses in a better way (15%)

As their usability minded friend who dabbles in web development, you are fed up watching them struggle with this spreadsheet, so you decided to build an app for them.

Design an app that would help them manage these expenses without the issues of the spreadsheet. Wireframe the UI you have in mind with HTML. That is, create an HTML document demonstrating what your app would look like after some representative data has been entered. Include text, images, form fields with data in them, buttons, selectors, and other controls, but don't make them do anything yet.

Don't worry about CSS or implementation yet, your goal in this assignment is to design a good interface. You will implement it in the next assignment. Also don't worry about painting yourself into a corner: you will be able to change any design decisions later on, so feel free to be creative and design a UI that you think would be great.

Exercise 4: 6.S063 Grading Calculator (25%)

Part 1: Basic functionality (15%)

To start dabbling with VueJS, you will implement a little application to help DesignFTW students calculate their final and/or projected grade in this class, based on this formula for calculating a student’s final grade.

Students need to be able to enter their participation grades for studio, feedback, and other participation, as well as their grades for each homework, and see their final grade as a number 0 - 100 (no need to calculate letter grade).

You will be using VueJS for interactivity. Since we will learn JS properly later in the semester, but we want you to be able to practice interactivity earlier, we have written MaVue: a number of Vue helpers for you, to reduce the amount of JS you will have to write, and make certain usability concepts easier (e.g. sensible defaults), and we will be evolving it throughout this semester, based on your feedback. The skeleton Vue app already uses MaVue.

The bare minimum functionality you need to implement is:

• UI to enter grades for the three kinds of participation (clearly labeled)
• UI to add homeworks and enter grades for each homework (clearly labeled)
• Output that displays the projected grade

Part 2: Making it pleasant to use (10%)

While this is an implementation exercise, usability matters here too. Do not overwhelm students with a complicated or convoluted interface (learnability), try to design an interface that is fast to use (efficiency), and do not allow students to enter incorrect data (safety).

One good strategy for efficiency is to make sure the app can be used without a mouse and that this doesn't require too many redundant keystrokes (e.g. simple tabbing — while important for accessibility — is often not the best keyboard UI for efficiency).

The skeleton code already includes any JS needed for calculating average grades. Any missing grades (null values) are ignored.

You will need to modify the HTML we provide (even change generic elements with more suitable elements), but it is possible to implement the exercise fully without modifying index.js. However, you may wish to modify the JS to implement certain interesting features of the application, and you are welcome to do so. The skeleton is provided to assist you, and is not binding.

Exercise N: HW1 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 HW1 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.