Now that we have learned some CSS and graphic design principles, time to play with it!
On the website you created for HW1 Exercise 2, add a "portfolio" page listing the apps you've worked on so far as part of this class.
Each listing must (as a minimum) have a title, screenshot or video, and a description.
Add a stylesheet on your website, that applies the design principles we've learned in class (proximity, alignment, contrast/hierarchy, repetition).
You should use grid layout at least twice (e.g. overall page layout and portfolio listing).
Your HTML will be evaluated anew as part of the assignment, which gives you chance to fix all the problems that were flagged for you in assignment 1. Or you can redo the entire website if you wish. Either way, pay attention to using correct structure and semantic elements.
Exercise 2: Evaluating calculator UIs (32%)
The OSX Catalina scientific calculatorThe Windows 10 scientific calculator
Spend some time using the native OSX and Windows 10 calculators in "Scientific" mode.
Pay attention to:
- The memory functionality (MC, M+, M-, MR etc)
- The graphic design of the interface
- The way functions are implemented
- The way grouping (parentheses) work
- How do these two interfaces indicate your current place in the calculation?
- How recoverable are errors you make?
Compare and contrast these two UIs in the three usability dimensions (Learnability, Efficiency, Safety),
as well as in terms of graphic design (grouping, proximity, alignment, simplicity etc). Apply the heuristic evaluation methodology described in class: reference any of the taxonomies provided there, and report to specific issues in the format described.
Which one do you think has better overall usability?
Is the answer different for users that have never used a calculator before and expert users that use a calculator every day?
**Deliverable:** An HTML page with your critique.
As always, please use appropriate HTML elements in your writeup and pay attention to structure, hierarchy, and readability.
You can also apply CSS to make it easier to read.
Pick four out of the following Instant Messaging UIs:
- Facebook Messenger
- Skype
- Twitter DMs
- Instagram DMs
- Whatsapp
- Slack
- iMessage
- Your choice of messenger
Pay attention to:
- Threading, if any
- New message (1 person as well as multiple)
- Search functionality
- What errors can be made with this interface?
- What is the recoverability in case of errors?
Compare these UIs in the three usability dimensions (Learnability, Efficiency, Safety), graphic design. Apply the heuristic evaluation methodology described in class: reference any of the taxonomies provided there, and report to specific issues in the format described.
**Deliverable:** An HTML page with your critique.
As always, please use appropriate HTML elements in your writeup and pay attention to structure, hierarchy, and readability.
You can also apply CSS to make it easier to read.
Please include screenshots or videos to illustrate your points.
Exercise 4: HW feedback (3%)
Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, recitations etc.
From now on, 3% of each assignment will be devoted to feedback on the previous one.
Since this is the first time we are doing this, we need feedback on the first **4** assignments this time.
Please include four sections in your writeup, one for each of [HW1](../hw1), [HW2](../hw2), [HW3](../hw3), and [HW4](../hw4), answering the following:
- What did you like about this HW?
- What did you not like about this HW?
- What was difficult?
- How long did you spend on it?
- Now that you've finished it, what did you learn?
Submitting your homework
Similar to the previous assignments, 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.
