6.4500 Design for the Web: Languages and User Interfaces

Submitting your homework

To submit the assignment, please visit Canvas [CANVAS URL MISSING!] and submit the URL to your final commit that you want us to grade. A commit URL looks like https://github.com/designftw-YEAR/hw10-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: User testing of Balsamiq/Figma mockup of your Chat/Messaging App (30%)

For this part of the assignment you will do a user testing session of your Balsamiq/Figma Chat/Messaging App mockup from HW9. Then, you will use these insights to improve your design further, and in HW10 you will implement a high fidelity prototype of your Chat/Messaging App in HTML and CSS.

You can use the same tasks as in HW8, or you can come up with new ones if your design evolved significantly since then.

All of the advice about user testing from HW8 Exercise 2 applies here as well.

You should test with at least 5 users if your target audience includes undergraduate students, and at least 3 users if not.

Exercise 2: Improve Color on your website (10%)

Use what we learned this week to improve color on (or add color to) your personal website from past homeworks. Make at least 3 improvements and point them out in a short writeup (~1 sentence for each improvement).

Exercise 3: Starting Your Chat App (60%)

In this exercise you will start to implement your own chat application, starting from the basic chat apps you've been working on in studio. You will focus on implementing the base functionality:

• Creating/joining a chat
• Chatting
• Setting up profile

This does not need to include all the special design features you have been designing in your prototypes, but it should be a step towards your design and usable as an intermediate. Feel free to include "fake" functionality for some of your specialty features---much like the paper prototypes and figma mockup this should be just one more step of fidelity, but not the final product.

Start by finishing studio 10 if you have not already. From there, all of your applications will involve slightly different mechanisms for chat creation, chatting, and setting up a profile. Some questions to consider:

• Where can people "find" chats to join? Do they need to be explicitly invited? Are the chats associated with a specific topic (e.g. a chat for each MIT class)? Does your app only involve direct messaging?
• Do users create their own "profiles" or do users curate a "contacts" list, like with traditional SMS?
• What information should be included in a profile? Name? Pronouns? Profile picture? Interests? Location? etc.

These questions can help to guide what channels you will need to create and what objects you will need to support the various interactions your app needs.

To make a profile object, you likely want to create an object that describes the actor of interest. In an app where users create their own profile, this would be the user themselves, as in the example below. In an app where users create curate "contacts" this would be the "actor" they are creating a contact for.

{
	value: {
		name: "David Karger",
		pronouns: "he/him",
		describes: session.actor
	}
	channels: [session.actor]
}

Your app may also involve some process to invite users to a chat, accept an invitation, leave a chat, etc. You can create objects to represent whichever actions your app needs. For example, to add someone to a chat, your object might have the value:

{
	// Add someone to a group chat
	activity: "Add",
	object: "https://theia.example.com", // The actor ID of the person being added
	target: "my-chat-12345" // The identifier of the chat
}

Feel free to introduce new objects as necessary. See the Activity Vocabulary standard for some common object types, but don't feel constrained by it.

Also, keep the following usability goals in mind:

• Are appropriate loading signals displayed for async operations?
• Does the chat interface feel consistent with other chat apps you've used? Or is there a design reason why you are intentionally breaking the norm?
• Can mistakes be recovered from easily? Deleting or editing messages, leaving groups, etc.

← Assignment 9 Assignment 11 →