UX/UI
Last updated
Was this helpful?
Last updated
Was this helpful?
Title: Beginner's Guide to UX/UI Type: Warm-Up Lesson Duration: "0:45" Creator: Cathleen Wright Course: SEIR-FLEX
User Experience (UX) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.
User Interface (UI) is the space where interactions between humans and machines occur.
Discuss - Why do you think Heinz made this change?
Discuss - How does this apply to web development?
A design should be centered around the user accomplishing their tasks. This requires stripping away any secondary or unnecessary features, and highlighting the features that will help.
Controls and functions should be intuitive and self-explanatory, and not draw attention to themselves. Remove all distractions and potential hurdles so that the person has a clear path to their goal.
User errors are bound to happen, so design in a way that these errors won’t derail the user’s progress. This typically involves clear and friendly communication, like warnings before critical actions or potential errors.
Consistency cultivates security and trust, whereas inconsistency is distracting and forces the user to question aspects unnecessarily. Have a single function work the same throughout the entire site, i.e., if you click the red button on one page, it will perform the same action if you click it on another page. Consistency reduces the cognitive load which lowers the learning curve.
The onboarding phase, when a user learns how to use the product, greatly affects the opinion they form about it. Use this phase to point out features they may not notice or understand on their own. If there's any doubt about how something works, explain it - However, don’t take too long so they can get to using the product as soon as possible.
A user interface is like a joke. If you have to explain it, it's not that good.
Discuss - How does this apply to web development?
Imagine you are a driver along this road on a Tuesday morning at 9 a.m. Can you park at this spot?
This design also makes use of visuals, rather than text, to convey information. The result is incredibly intuitive: green for OK, red for No Parking. It’s even designed for the color blind, with stripes for No Parking.
Now when you look at the sign, you’ll know that on Tuesday at 9 a.m., parking is not allowed.
Mystery Meat Navigation refers to cases where the destination of a link is not visible until the user clicks on it or points the cursor at it. The term “mystery meat” is a reference school cafeteria meals that are so processed that their exact type is no longer discernible.
Below is a screen shot of a real estate website, which is just a grid of thumbnails.
Are they clickable? If you move your mouse cursor over an image, it changes to a pointer, but what happens when you click on an image?
“Click and find out!” is never a good UX solution.
These cards not only have “View Course” at the bottom of each to indicate the action that will happen, but also have a hover state with the text “Go to course”.
Always label your links! You wouldn’t like to eat mystery meat—and similarly, your users wouldn’t like to click on mystery links.
Are you ready for a tropical vacation ... I mean, a haircut?
Goal Focused
Invisible
Forgiving
Consistent
Smooth Onboarding
Goal Focused
Invisible
Forgiving
Consistent
Smooth Onboarding
Share your projects with your friends, family, and fellow classmates! The best way to find fault in a project is for someone else to try and use it. Try to give them as little outside instruction as possible.
User stories! Write user stories from the perspective of the user: "As a user I want to be able to click on x and have y happen" or “As a , I need a in order to __”.
We're going to create the game tic-tac-toe ... but before we begin, what are some user stories that we'll want to make sure we cover?
:elephant: Reminder - Write from the perspective of the user: "As a user I want to be able to click on x and have y happen" or “As a , I need a in order to __”.
Share your user stories in slack as you write them!
What sounds like a simple question takes a lot of mental processing to answer.
You simply want to know whether they can park at a spot, yes or no, and that’s all the parking sign shows.
:book:
:book:
:movie_camera:
