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.
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) Posted on Blackboard / Discussions – Due by the beginning of Class 21. Search the Internet for sites that DON’T respect four or more of the six Principles of UI Design. We will call these sites Worst of the Web.
2. Select one Worst of the Web site from the ones you researched and copy the site’s URL (the web address).
3. In Blackboard, Go to Discussion Board / Class 2: Worst of the Web Discussion and Create a New Thread.
4. Paste your chosen Worst of the Web URL in the thread you just created.
5. Observe your Worst of the Web site closely and answer the following questions:
a. How does the site makes you feel?
b. Why is the site making you feel like that?
c. What are the Principles of UI Design being broken and how are they broken? You need to identify at least four Principles of UI Design.
- 2) Class 2 – Present the “really bad site” you have chosen as well as the list of at least 4 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) for web or phone in Photoshop (jpg). Post to your E-portfolio site.
- 4) Class 4 – Design the two pages ( home page and a second page) for web and phone in Adobe XD based on your proposed site map and wireframe.
- 5) Class 5 – Create the other two pages and implement an interactive prototype for phone in XD with four functional/linked pages.
- 6) Class 6 – Create the other two pages and implement an interactive prototype for Web in XD with four functional/linked pages.
- 7) Class 7 – Share your phone and web prototypes links on your E-portfolio.
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 interactive prototype page.
The final four linked pages in XD interactive digital mock-up should be based on your static mock-up.
Four Final Interactive Prototype Pages:
- A Link Page
- Version for Web
- Version for Mobile
- 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 Site Map + Wireframes + Proposal 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 XD addressing the found issues. 4 pts
- Linked the four pages in XD 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 prototype has proper file organization. 2 pts
Due Class 7
- Posted interactive prototypes links to personal E-portfolio site 2 pts
- Initial Planning: Site Proposal
- Information Architecture: Site Map | Navigation
- Wireframe: Sketches
- Raster x Vector
- Photoshop: Image Optimization
- Mock-Up Site Tutorial
- Adobe XD
- File Management: https://youtu.be/7YB6FxYvQr4
- Sketch Mock-up & Grid
- Photoshop Basics
- Visual Communication in UI Design
- UI Design Videos
- Design Principles: Unite, Emphasis & Focal Point