Assignment 7
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.
A commit URL looks like https://github.com/designftw-YEAR/hw7-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 absolutelocalhostURLs, 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.
AI Usage
(guidelines updated March 18, 5:30pm)
Allowed uses
- Looking up or understanding relevant CSS properties and media query APIs for universal design
- Looking up or understanding DOM event APIs
Unallowed uses
- Do NOT ask AI to generate or refine ideas
- Do NOT generate large chunks of code. Use AI only for targeted reference (e.g. what a specific event/API does), then write the implementation yourself.
For Exercise 2, specifically, please do not use AI for help brainstorming.
Exercise -N: HW5 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.
Exercise 1: Make your homepage more universal (30%)
Now that you've learned how CSS can help make our designs more universal, put your new skills to good use by improving your website!
Ensure that your website that you worked on in HW1/ex2 and HW5/ex1 is:
- Mobile-friendly (10%)
- Adaptable to multiple viewport sizes (10%)
- Print-friendly (5%)
- Translatable. We will translate your website to a couple non-Western languages (e.g. Arabic or Japanese) via Google Translate, so make sure the CSS can handle this. (5%)
Exercise 2: Paper prototype concepts for chat/IM apps (40%)
In this homework, we continue along the iterative design process path for your chat/IM app, a process we started in HW5.
In HW6, you did needfinding and idea generation. In this homework we will focus on paper prototyping and user testing.
For paper prototyping to be effective, it is important to create several designs and iterate on them. Therefore, we want you to create at least two substantially different paper prototypes of your chat app. These should be two different prototypes about the same problem.
You do not need to prototype everything in the chat app, but you should prototype the features that differentiate your app from other chat apps, and enough other elements to let users carry out tasks that leverage your novel features.
Your prototypes should be "interactive": not just sketches of entire screens, but multiple screens and paper pieces that allow you to modify the screens based on user input. in HW8 you will test your prototypes with actual users.
To see how to create and use these "interactive" paper prototypes, watch at least minutes 10-23 of this video of a paper prototyping user test from the Nielsen Norman group. We encourage you to watch the rest as well to learn more.
Deliverable: 2 prototypes, each with:
- Photos of key prototype "screens" showing your novel features and a simple HTML page that explains them and justifies the improvements (1-2 sentences max per improvement).
- A video of you interacting with your "screens" (as in the Nielsen Norman group video) to carry out the tasks you expect users to perform with your interface. The prototype should be clearly visible in the video, as well as your hands interacting with it.
Exercise 3: Drag & Drop to reorder your to-do list (30%)
In this exercise, you will implement drag & drop to reorder the "Vanilla" JS to-do list we worked on in Studio 7 (link will become available after 1:30pm on Friday).
You will use the HTML5 drag & drop API.
You are not allowed to use a library for this, you need to implement it yourself.
Alternative implementation: Raw pointer events
We recommend using the HTML5 drag & drop API, but if you want to use raw
pointerdown,
pointermove, and
pointerup events instead,
you can do so.
Do note that this is lower level, so you need to implement certain things yourself that the drag and drop API handles for you. Some of these things are:
- You want to listen to
pointerdownon the dragged element, but you want to listen topointermoveandpointerupon the entire document. Otherwise moving the mouse too fast would cause bugs where your implementation doesn't realize the mouse button has been lifted, so you move your button around and the element is still moving. - You want your code to not confuse a click and a drag.
Your to-do list app in todo/.
If the functionality is not finished during studio,
you would need to implement that too, following the studio instructions.
Exercise N: HW7 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 HW7 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.