Upcoming projects will require submission of wireframes, design process, and usability considerations
"Usability is a quality attribute that assesses how easy user interfaces are to use"
‘A look into usability design at Google’ Alley Rutzel https://www.youtube.com/watch?v=sRTydeYJVXI
“In the book, Norman introduced the term affordance as it applied to design. Examples of affordances are flat plates on doors meant to be pushed, small finger-size push-buttons, and long and rounded bars we intuitively use as handles. As Norman used the term, the plate or button affords pushing, while the bar or handle affords pulling.” https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
- Learnability
- Efficiency
- Memorability
- Errors
- Satisfaction
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
If it is good useability you probably don’t notice it
Consider
https://www.google.com/
- In groups of 6
- Discuss sites you think have good usability and sites you think have bad usability
- Work out a list of top 3 best and top 3 worst
- As a group, post links to slack including
- Link
- Who the site is for
- Why it is an example of good / bad usability
- Target User
- Non-target user
- Business Objectives
“User experience” encompasses all aspects of the end-user’s interaction with the company, its services, and its products. https://theblog.adobe.com/whats-the-difference-between-ui-and-ux-what-to-tell-your-client-if-they-ask-you-this/
UX Design Process
https://uxplanet.org/how-to-develop-the-best-user-experience-strategy-5a0b1cca5ab6
UI deals mostly with the appearance of what’s already been thought through during the UX design phase.
- UX is about the entire journey a user embarks on when they decide to give something a chance. It covers the complete overall experience that a user has with that something.
- UI deals with the specific things that the user will actually interact with while on that journey – the interface itself.
https://theblog.adobe.com/whats-the-difference-between-ui-and-ux-what-to-tell-your-client-if-they-ask-you-this/
- For larger teams and products
- Can also be for print and branding
- Traditionally did not contain much information for developers
Examples
- https://www.bbc.co.uk/gel/guidelines/category/foundations
- https://developer.apple.com/design/human-interface-guidelines/
- For larger teams and products
- Developed for designers and developers
Examples
- https://material.io/
- https://designsystem.gov.au/
- https://polaris.shopify.com/
- https://airbnb.design/
Steps
- Discover
- Plan
- Conceptual Design
Deliverables
- Identifying target audience and / or user personas
- Rough sketches
- User flows
- Wireframes
"Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like."
https://en.wikipedia.org/wiki/Website_wireframe
- Lo-fi sketches will make it easier for people to provide feedback
- Lo-fi sketches are easier to modify than detailed designs
- Electronic wireframes for easier collaboration
https://www.figma.com