6.4500 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-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

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, which introduces basic chat creation and chatting. Then, you will modify it to support your applications own specialized ways of chat creation and chatting.

First 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?

Answering where people can "find" chats can help you decide which channels you need to post your objects to. See the lecture slides on channels. For example:

• If group chats are user created, you might want to create a channel randomly as we did in studio.
• If you only have direct messaging, you might consider using a user's actor ID as the channel - you can think of it as their "inbox", a place they know where to check.
• If you want to chat about a specific MIT class, maybe use a channel name of the form class:mit:6.4500.

Next consider what sort of interactions are associated with a group chat. Does a group chat need to be created? Do users invite other users? Can users join on their own? Can users leave or be kicked out?

These questions can help you decide what type of objects you need. See the lecture slides on objects. In studio we made "Create" objects to create new chats. You could also use objects for adding/inviting people to a chat:

{
	// 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
}

See the Activity Vocabulary standard for some common object types, but don't feel constrained by it. You are welcome to introduce new objects as you'd like.

As we did in studio, you will need to create these objects using put and retrieve them using discover and an appropatie JSON schema.

You can also add objects for managing chats that have already been created---renaming them, setting a background color, etc.

In addition to including basic functionalty, the chat app should begin to look and feel like a real chat app and so change the styling appropriately. 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.
• Are the names you choose for certain interactions clear and understandable? The names you display to the user do not necessarily need to exactly match the property names you use in your objects.

← Assignment 9 Assignment 11 →