Note: This assignment has no implementation work; that makes it the exception. By next week we'll have covered enough technical machinery to begin making things every week.
Exercise 1: UI Hall of Fame and Shame (40%)
Help populate the UI Hall of Fame and Shame!
Find two examples of user interfaces that attempt to solve the same problem, or address the same need, one that you consider to have **good usability** and one that you consider to have **bad usability**.
Note that the good usability does not have to be uniformly good, since you may discover problems with it on closer inspection.
Likewise, bad usability does not have to be uniformly bad. Probably the most interesting examples will be mixed.
Your interfaces might be desktop software, web applications, smartphone apps, consumer devices, car dashboards, building entrances, traffic intersections, shower controls, etc.
For each interface, you should:
- describe the purpose of the interface and its intended users
- analyze its good and bad points of usability
- focus on learnability, as we have dived deeper into that topic
- make effective use the vocabulary we introduced: discoverability, affordances, signifiers, mappings, direct manipulation, feedback, etc.
- give some attention to efficiency and safety as well
- you may discuss other aspects of usability if you have space and consider them important
- illustrate your analysis with appropriate screenshots or photographs
You are limited to half a page of text (250 words) for each interface, for a total of 1 page of text (500 words) for your entire report.
You can include as many images or videos as are helpful; they don't count toward the word limit.
Write your report with the following goals in mind:
- **Completeness.** Don't omit a dimension of usability, and don't overlook an obvious usability issue that even the reader notices.
- **Thoughtful Analysis.** "Efficiency is good, because it feels fast 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, topic sentences, bullets for lists, boldface (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.
Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images.
Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy.
Internal links and linked resources should use relative URLs.
Exercise 2: Evaluating Graphic Design (20%)
Pick four of the graphic design principles we discussed in class.
For each, find an example around you that violates it and an example that follows it.
The examples could be either printed materials (stationary, flyers, posters, magazines, books etc) or websites.
These do not have to be different, you can use the same example for multiple principles.
For each principle, explain (in a sentence) how the example you picked follows or violates it.
If it violates it, how would you improve it? (1-2 sentences)
Make sure to include photos, videos, or screenshots for the examples you pick.
Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images.
Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy.
Internal links and linked resources should use relative URLs.
wify.me logo
**wify.me** is a fictional startup around a website for crowdsourcing public wifi passwords.
They already have a logo (Figure 1) and they need a corporate identity that is based on that logo (business cards, letterheads, envelopes).
Their brand colors are `#B3CC1F`, `#553F2E` and `#f7ecdf` and the typeface used is [Museo](https://www.exljbris.com/museo.html).
You may know that print design should use CMYK colors instead of RGB colors, but for the purposes of this exercise, don't worry about that!
Design a corporate identity for this company, putting the graphic design principles we discussed in class into practice.
The corporate identity needs to consist of at least:
- A 3.5 × 2 in business card with the following info:
- Name: John Doe
- Job title: Manager
- Phone: 555-123-4567
- Email: johnd@wify.me
- Company website: wify.me
- Address: 32 Vassar St, Cambridge, MA 02114
- The information above is for a sample employee. Do keep in mind that what you design needs to work for a variety of names, job titles etc.
- The business card needs to be double sided, but it's up to you whether both sides will contain information, or whether one side will merely consist of unifying visuals.
- A letterhead for the same person, which can be single or double sided
- An envelope, which can be single or double sided. The envelope only needs to contain the company logo, address, and URL, no employee information.
Use the design principle of **Repetition** to visually unify the three designs.
Pick at least **four** of the other design principles that we discussed in class and apply them to your design.
You may use any vector editing application you prefer. Two good ones are [Figma](https://www.figma.com) (free trial) and [Adobe Illustrator](https://www.adobe.com/products/illustrator/free-trial-download.html) (free 7 day trial).
**Deliverable:** An HTML page with the three (or more) visuals, saved in an `images` folder. Please save/export your visuals as SVG, to preserve details.
In that page, also describe:
- the various ways you used the design principle of Repetition to visually unify the three assets.
- the principles you picked and a sentence about how you feel they have enhanced your design.
Submitting your homework
Similar to the previous assignment, we are going to use Github Classroom again.
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.
Make sure to update README.md with your Kerberos username, especially if it's different than your GitHub username.
If you push after the deadline, it will count towards your slack hours.
