User Interface Design and Implementation
Lecture Notes
|
SES # |
TOPICS |
LECTURE NOTES |
|
1 |
Usability |
|
|
2 |
Learnability |
|
|
3 |
Visibility |
|
|
4 |
Efficiency |
|
|
5 |
Errors and user control |
|
|
6 |
User-centered design |
|
|
7 |
Task analysis |
|
|
8 |
Generating designs |
|
|
9 |
User interface (UI) software architecture |
|
|
10 |
Layout |
|
|
11 |
Output |
|
|
12 |
Input |
|
|
13 |
User testing |
|
|
14 |
Controlled experiments |
|
|
15 |
Experiment analysis |
|
|
16 |
Web-scale research methods |
|
|
17 |
Prototyping |
|
|
18 |
Graphic design |
|
|
19 |
Information visualization |
|
|
20 |
Color design and typography |
|
|
21 |
Accessibility |
|
|
22 |
Internationalization |
|
|
23 |
Heuristic evaluation |
|
|
24 |
Animation |
|
|
25 |
Input/output technology |
|
|
26 |
Mobile user interfaces |
|
Assignments
Five problem sets (HW, PS/RS) are assigned, which you must complete individually, not in a group. HW1–2 ("homework") are assigned to both courses. PS1–3 ("programming") are assigned only to the undergraduate course 6.813. RS1–3 ("research") are assigned only to the graduate course 6.831. These five assignments will constitute 30% of your grade.
Homework Assignments
|
ASSIGNMENTS |
ASSIGNMENT FILES |
|
HW1: UI Hall of Fame and Shame |
(PDF) |
|
HW2: Heuristic Evaluation |
(PDF) |
Programming Assignments
|
ASSIGNMENTS |
ASSIGNMENT FILES |
SUPPORTING FILES |
|
PS1: Implementing an HTML/Javascript Application |
(ZIP) (The ZIP file contains: 2 .js files, 1 .html file and 2 .json files.) |
|
|
PS2: Output |
(PDF) |
(ZIP) (The ZIP file contains: 1 .project file, 3 .js files, 1 .html file, 1 .ccs file, and 4 .png files.) |
|
PS3: Input |
(PDF) |
|
Research Assignments
|
ASSIGNMENTS |
ASSIGNMENT FILES |
|
RS1: Experiment Implementation |
(PDF) |
|
RS2: Data Collection |
(PDF) |
|
RS3: Analysis |
(PDF) |
Projects
For the course project, you will work in small groups to design, implement, and evaluate a user interface through an iterative design process with a series of graded milestones (GR1–GR6).
|
PROJECT ASSIGNMENTS |
ASSIGNMENT FILES |
|
GR1: Project Proposal and Analysis |
(PDF) |
|
GR2: Designs |
(PDF) |
|
GR3: Paper Prototyping |
(PDF) |
|
GR4: Computer Prototyping |
(PDF) |
|
GR5: Implementation |
(PDF) |
|
GR6: User Testing |
(PDF) |
In-Class Activities
Selected activities are available below. The remaining sessions either did not have in-class activities or contained content that could not be made available here.
|
SES # |
TOPICS |
|
1 |
|
|
2 |
|
|
3 |
|
|
4 |
|
|
5 |
|
|
6 |
|
|
7 |
|
|
8 |
|
|
9 |
|
|
10 |
Layout |
|
11 |
Output |
|
12 |
|
|
13 |
|
|
14 |
Controlled experiments |
|
15 |
|
|
16 |
Web-scale research methods |
|
17 |
|
|
18 |
|
|
19 |
|
|
20 |
|
|
21 |
|
|
22 |
|
|
23 |
|
|
24 |
Animation |
|
25 |
|
|
26 |
Mobile user interfaces |