Intro to UI/UX
aka Empathy & Usability in Design
this is what you don’t necessarily want your users to feel when they use your apps - yeah, there’s awe, but also confusion and horror
By the end of the lesson, you will:
- Have an understanding of basic user experience (UX) principles
- Be able to articulate why usable, empathetic design is necessary
- Be able to recognize bad UX design
- Have an understanding of the tools you can use to create good UX design
UXDUser experience design
UsabilityHow easy your design is to understand and use
User Experience Design
This might be an opinion at the moment, but time will reveal it to be a HARD FACT:
You can’t be a good front-end developer without understanding the fundamental concepts of user experience design.
You don’t need to be an artist or graphic designer. You don’t have to create beautiful designs out of thin air. But you DO need to understand who will be using your app, how they’re using it, and what they want to accomplish while using it.
- UI: user interface; what the user actually sees and interacts with in an app
- UX: user experience; the overall experience of using an app - what it’s like to use an app in pursuit of a goal (buying something, getting information, etc)
- UXD: user experience design: the art and science of creating apps that seamlessly meet user needs and create a painless experience
What even is it?
User experience design is simple and also very complex. It’s the act of making your app usable and painless for the end user.
Turn and talk!
What are some examples of apps that you use (think about the sites you use for social media, looking up info, booking travel, etc). What apps are easy to use? What apps are really fun to use? What apps are the worst? Think of times when you had a very frustrating experience with a website (making a payment, filling out a form, etc).
WHY were those experiences frustrating? What would have made them better? What makes an app enjoyable to use?
Why does User Experience Design matter?
Even if your app offers a great service, it won’t matter if no one can figure out how to use it. And maybe you offer a service that people have to use, but they hate the process (health care websites, banking sites, etc).
We know it when we see it. Let’s figure out what exactly makes a design bad.
Consider this form:
There’s a lot that makes this a huge pain in the neck:
- The input fields are very close together; difficult to use on a touchscreen interface
- It’s very long
- The colors are alarming; we’re used to red being reserved for error messages
- Some of the fields are not going to be used by everyone
- It doesn’t look very trustworthy
Okay, that was fun and infuriating. How many of our concerns were PURELY aesthetic? How many were based on usability (aka how much was bad because it made it harder to use this form)?
So now what can we do to improve it? Brainstorm some ways to make the form more pleasant and intuitive to use.
It turns out, most of what makes a design “good” is how usable it is, rather than how pretty it is.
When people talk about design, a lot of times they’re picturing fluff - the finishing touches that make something look nice.
But as developers, when you hear “design”, you should be thinking “functionality”. Good design is pleasant to look at, yes, but more importantly it’s pleasant to use.
Good design anticipates users’ needs.
Principles of Usability
Here is your starting toolkit to create usable designs for your apps!
- User Testing
Your app should give the user what they need, when they need it.
A great real world example of this principle is TurboTax. (And actually the TurboTax site is a great example of UXD in general.)
Why TurboTax works:
- Doesn’t swamp the user with all the info at once
- Breaks it down into digestible, manageable bits without being condescending
- Is reassuring and conversational
- Is goal-oriented (basically no one uses TurboTax because they thrill at the act of filing taxes - they do it because it’s mandatory, and to get a refund)
It’s important to anticipate what a user needs to know. It’s poor UXD to withhold necessary information (instructions, etc), and it’s also poor UXD to slam them with everything they might need ever, because humans are notoriously poor at sifting carefully and thoughtfully through a pile of data, especially when most of it is irrelevant to what we’re trying to accomplish.
When designing an app, keep in mind the user’s context:
- Metadata (time of day, location, language, etc)
- Explicit interaction (the user actively and consciously changes the design of the app)
- Changes the color in the settings
- Sets the location or time of day
- Implicit interaction (the app changes its design without the user consciously making the change)
- Detecting the time of day and showing the nighttime mode
- Remembering the user’s last search and showing that info
- Detecting the location and updating displayed info
- Give the information a user needs when they need it
- Microinteractions to improve the onboarding experience
- Real-time feedback through error-messaging
Of course, knowing the user’s context is dependent on our next UXD tool …
Empathy is crucial and vital to UXD. It’s like an oxygen tank when scuba diving; you need it, but you also need additional tools to make it useful and effective.
Empathy in User Experience Design means understanding and serving the needs, motivations, difficulties, and goals of your end user.
It is a first step - the second step is actually bringing in your users and getting their real, live perspectives (and not just your imagined users’ perspectives). Remember, you will still drown if you have an oxygen tank but no hoses or scuba mask. We’ll get to examples of software designed with empathy but without user testing, and how the results are strong but also sometimes disastrous.
But let’s start unpacking how we can begin to build empathy for our users, and informing our designs with empathy in mind.
Consider your user:
- Their familiarity with technology
- Their familiarity with this app
- How often they use the app
- When/why they use the app
- What they want to accomplish
- How many other ways can they get what they need, other than your app?
- What accessibility needs do they have?
User experience designers use a number of tools to help them keep the end user in mind:
- Personas (imaginary end users - we will go over this in our next UX/UI lesson!)
- User stories (detailed road maps of a user’s journey through an app while attempting to reach a goal; every button they click, every page they visit)
- Consider voice/tone
- Forgiving (what happens if a user makes a mistake? Can they go back and fix it? Do they feel chastised or supported?)
- Intuitive (does an app work the way a user expects based on previous experience?)
- Consistent (layout, interactions, functionality should be consistent from one page to the next)
- Seamless learning curve (the onboarding process should be painless and intuitive)
Note: sometimes you will see the phrase “empathic design” - this means the same thing. Be empathetic. You don’t have to be empathic.
Users will always find new and creative ways to misunderstand how to use your app … so do user testing!
Earlier we said that empathy is one part of creating a great user experience. User testing is the other half of the equation. It’s what reveals the actual weak points in your app, the places that need to be tweaked, the functionality that users are expecting.
User testing helps account for any biases we might have as developers. We can’t assume that we know all the pain points our users might run into, and we also can’t assume that we know the right questions to ask!
Steve Krug’s excellent book on usability and user testing, Don’t Make Me Think is worth reading if you’re interested in making your apps more usable. Hint: everyone should be interested in making their apps more usable.
No matter how empathetic and diligent you are, you can’t assume you know everything about your users, or that you’ve closed all the gaps in your own assumptions.
One last note
As in your code, when it comes to design, avoid cleverness for the sake of cleverness.
Take a look at this website.
This is a great example of clever but stupid design. It’s really cool! A super fun bit of interaction and animation, and it hearkens back to decoder rings and secret messages that most kids love. But from a usability standpoint, it is awful. You have to mouse pretty far to the sides of the screen to trigger the color overlays that reveal the text.
It’s even worse from an accessibility standpoint.
The point is, something like this is cool as a part of a design portfolio - it shouldn’t be the landing page of your website.
Good design is about making an app usable. Creating a usable app requires empathy and seeking out and listening to the app’s end users.
- User Testing
- User stories
- Explicit interactions
- Implicit interactions
- Info when the user needs it
- When you run across bad design, take a minute to analyze what makes it bad and how you can make it better!