Project 1 | Worst of the Web

Objective:

Identify what is bad interface design, navigation, functionality, interactivity, content distribution in a website or app and find a positive solution to that site.

Understand in practice how the Principles of UI Design affect the user interface and experience.

Considerations:

Search for sites that don’t respect three or more of the six Principles of UI Design. Look for font, color, navigation, buttons, links, graphics, sounds, etc.

The structure principle:

Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

The simplicity principle:

The design should make simple, common tasks easy, communicating clearly and simply in the user’s own language, and providing good shortcuts that are meaningfully related to longer procedures.

The visibility principle:

The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don’t overwhelm users with alternatives or confuse with unneeded information.

The feedback principle:

The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

The tolerance principle:

The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

The reuse principle:

The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Deadlines & Parameters:

Intro to Worst of Web

  • 1) Due/posted before the beginning of Class 2 – Choose a “really bad, poorly designed web site” (either fine art or commercial) and post the link to a new page in your WP Portfolio along with a list of at least 5 reasons why it is that bad according to the Principles of UI Design.
  • 2) Class 2 – Present the “really bad site” you have chosen as well as the list of at least 5 reasons based on the Principles of UI Design why it is that bad. Be ready to defend your reasons.
  • 3) Class 3 – You are expected to create a proposal offering the information architecture (site map) and a new design by drawing mock-up/wireframes for two pages ( home page and a second page).  Post to your WordPress site.
  • 4) Class 4 – Create a static digital mock-up (photoshop jpg) redesigned homepage based on the site map and wireframe.
  • 5) Class 5 – Present a functional interactive mock-up for your new interface in html. Share files with CJ.
  • 6) Class 6 – Present the final interactive mock-up with four functional/linked pages in html.

Your redesigned static digital mock-up doesn’t need to be fully functional – it can be a still Photoshop layout of the homepage – BUT it must address the issues you pointed out as not working in the original “bad” design presentation.

You have complete freedom to TOTALLY redesign the look and feel of your chosen site (that includes all graphics, content, type, layout, and navigation.)

This is not about a subtle “tweaking” of existing material – this is a COMPLETE redesign. You should also include the flowchart for your proposed navigation structure.Please compress any PSD into JPG redesign files and present them as an uploaded HTML page.

The final four linked pages in html interactive digital mock-up should be based on your static mock-up (Photoshop version).

Four Interactive Mock-up Pages:

  • Home
  • About
  • Contact
  • A Link Page

Specs:

  • Use Resolution for Desktop: 1024 x 768 pixels each page
  • Color Mode: RGB
  • Resolution Size: 72 dpi

 

Grading Criteria: 20 pts + Posting 4 pts

Due Class 2
  • “Really bad site” research, link and presentation of at least 5 relevance & interesting issues that don’t follow the Principles of UI Design. Name the issues and the Principles ignored. 2 pts
  • Posted by class time 1 pt
Due Class 3
  • Presented “Really bad site” site proposal 1 pt
  • Presentation/posted Site Map. 1 pt
  • Presented “Really bad site” redesigned wireframe 2 pts
  • Posted Proposal + Site Map + Wireframes by class time 1 pt
Due Class 4 & 5
  • Collected images and content to reproduce the digital mock-up with four pages.  2 pts
  • Created four digital mock-up pages in Photoshop addressing the found issues. 4 pts
  • Linked the four pages in Dreamweaver to create an interactive mock-up. 4 pts
Due Class 6
  • Shared the interactive mock-up files and presented “Really bad site” redesigned with the 5 issues addressed 2 pts
  • Interactive mock-up has proper file organization. 2 pts
  • Posted interactive mock-up link (created by Prof. Jacques)  to personal WordPress site 2 pts

Resources