UI Design Good Example vs Bad Example: Course Website

Here I’m gonna compare two course website from two courses that I’ve taken.

Bad Example: CGT 511 offered by Purdue University Computer Graphics Technology Department

Problem 1: CGT home leads to a broken link

Problem 2: Project listed under Paper

Problem 3: Reading listed under resources

Problem 4: Assigned to and reading column is complete blank

Problem5: Deadline for assignment not clear from home page

Problem 6: click schedule go back to home page

Problem 7: no information about the instructor on home page

Problem 8: Top bar doesn’t link to home page

Problem 9: Text book picture not clickable

Problem 10: Font size way too small

Problem 11: Font size inconsistent in Syllabus

Problem 12: Lecture notes when opened by Safari on Macbook Pro with OS X is flipped to the side.

Problem 13: Lecture notes when opened by Safari on iPad with iOS 6 doesn’t allow scroll down.

Problem 14: Publishing lecture notes way early which leads to changing lecture notes after it’s published

Problem 14: No information about the TA found on the website

Problem 15: No section for announcement

Problem 16: the content isn’t centered

Problem 17: Top menu bar way too small for clicking

Problem 18: Inconsistency between project and homework, project links open up a new page, homework links open up a document

Problem 19: All projects listed under one page

Problem 20: doesn’t indicate which semester

Good Example: CS 61C offered by University of California Berkeley Electrical Engineer & Computer Science Department

Good design 1: Prominently display semester, location, and time of the course

Good design 2: Prominently display announcement and automatically take off old announcement

Good design 3: Show instructor and TA’s picture

Good design 4: Offer both pptx and pdf version of the lecture note (pptx is more convenient for taking notes and editing content

Good design 5: All assignments (projects and homework’s) are shown on the row of the due dates

Good design 6: Use different color to highlight holiday, midterm, final and review session.

Good design 7: Separate weekly schedule to show time and location for lecture, discussion, lab and office hour of both TAs and instructors.

Good design 8: Separate page for each assignment, lab and discussion

Dylan Liu


1 thought on “UI Design Good Example vs Bad Example: Course Website

  1. I got the analytics report yesterday and it seems the courses page is the most visited page on our website… but we don’t put enough time and attention into designing it or keeping it updated. 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s