“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.” – Steve Jobs
I just took my first Starter League class: User Experience (UX) Design.
If you aren’t already familiar with it, Starter League is a rad school currently based out of Chicago that teaches: HTML, CSS, Ruby on Rails, visual design, and UX design. People from all over the world come to Starter League—which is hosted at the popular community and co-working space, 1871—to learn how to code, design, and develop web apps. The in-person classes are quite intensive, ranging from 1-3 meeting days per week, for hours at a time.
I’ll be taking the UX design class for the next three months, and blogging about the experience each week. The purpose is to capture what it’s like to go from knowing nothing to building something valuable—to fully describe the learning process for a student participating in Starter League and learning UX design from scratch.
First, the swag. It is seriously delightful stuff. Nothing is better than getting swag you actually want to wear and use. Let’s be honest, I will probably be living in this hoodie from now on.
Then came the course framework and the list of topics we’re going to be discussing during the next three months.
The course framework:
The topics we’ll explore in class:
- Sketching and usability assessment
- Project planning and vision
- Field research
- User models like personas & mental models
- Product features and content planning
- Information architecture: user flows and site maps
- Interaction design: wireframes
- Basic visual design
- Usability testing
Seriously, though. I have no idea what half of this stuff means. But that’s part of the joy of this learning experiment—diving into an area I know nothing about, and hopefully coming out on the other side with some amazing UX knowledge.
We did get a few warnings at the beginning of the class: be careful not to assume everyone is a target user; don’t incorporate other people’s feedback without thinking it through first; and don’t let people talk you out of an idea when you haven’t finished baking it yet.
That last piece of advice is my personal favorite. We can be very quick to let others talk us out of our own potentially great ideas—probably because we’re all a little bit insecure inside about whether our ideas are any good. But, as our super bright teacher Carolyn Chandler said, “It’s hard for people to change and anticipate what they need, especially when you show them something that’s different from how they normally do things.” Not all negative feedback means you should immediately go back to the drawing board. Lesson understood.
Up until this point, we’ve been skirting around the main question: What is design?
Contrary to popular belief, I’m learning that design does not equal graphics (although the graphics are also important elements). Design is about more than just the look and feel of what you create. It’s also about the choices you make, and how you make them. Design starts at the concept level, where you first begin to create a solution for a problem.
Beyond design itself, design thinking adds another layer. It “combines empathy for the context of the problem and those faced with it, creativity in the generation of insights and solutions, and rationality to analyze and fit solutions to the context.” That’s a mouthful. But essentially, I’m learning that great design thinking involves not just what people see—but also how they interact with what you create, and how you go about solving problems by designing better solutions.
In other words, user experience design isn’t a “paint-by-numbers” type of process. Rather, it’s an a way of thinking that considers the tasks, goals, and motivations of the person expected to use a particular product.
After reviewing the basic definitions of design, design thinking, and UX, we went on to the really fun stuff (this is what I’m going to call the part of every class where we’re required to doodle). That’s right, we learned about the importance of sketching. It’s so important to the UX design process because sketching “is usually the shortest distance between a thought and the visual expression of that thought.”
And with that, we were given our first assignment: if you could redesign airport security, how would it look?
Here’s what I came up with:
I loved this exercise. How often do we complain about how broken things are—like airport security, and financial systems, and politics? Even with the smaller things, it feels like we’re always complaining: “the microwave doesn’t heat my food fast enough”; “the salt shaker pours out too much at once”; “I can never find what I’m looking for quickly at my local grocery store.”
What I’m beginning to love about UX design is that it’s solutions-oriented. It’s not about just aesthetics. It’s about solving real-world problems beautifully and simply. It’s about creating unforgettable experiences. Can you imagine airport security being a fun experience? Maybe you can’t—but after sitting in a room for three hours with a bunch of aspiring UX designers, I know for sure that they can. It’s an inspiring way to approach the world’s problems.
For the final portion of the class, we began talking about conducting heuristic evaluations.
It can get complicated, but basically, heuristic evaluation is a fancy way of saying you’re going to use experience-based techniques to solve problems and learn. In other words: trial and error.
Ideally, before you start a trial and error process to test out potential solutions to a user experience problem, you should have decent knowledge of the product’s purpose, objectives, audience, supported user tasks, and technical and environmental constraints. Why? Because trial and error isn’t always the most efficient process ever, and understanding the basics will help you limit the scope of what you’re going to test.
In the end, the whole point of heuristic evaluation is to build a well-designed system, which contains these elements:
- The site’s purpose is apparent and valuable
- The current state is obvious (you know what’s going on with it when you land there)
- Next steps are clear and relevant
- Interactive elements are fun to use
- The actions you take will have immediate and powerful effects
- There are elements of “surprise & delight” every now and again
- You are never made to feel stupid
The last one is my personal favorite. I’m all about not feeling stupid.
Apparently, Jakob Nielsen is the king of heuristics in the UX community. Basically, he’s a walking genius and his 10 usability heuristics are the most commonly used set for UX evaluations.
Here they are:
1.) Visibility of System Status
Whatever you’re building, you’ve got to keep people informed on what’s happening behind the scenes and how long something is going to take. Otherwise, they’re going to be pissed off at you, and maybe never come back to your site.
Here’s a good example:
You can very clearly see a bar showing how far along backup progress is. Because of this bar, you know the process is working; you can go do something else while the files are being backed up.
2.) Relevance & Familiarity
The system should speak the user’s language, with words, phrases and concepts familiar to the user, rather than obscure, system-oriented terms.
Example:
When you’re on a flight booking site, it would be incredibly awkward to see the calendar appear in a way much different from the one in the graphic above. Why? Because this is how people are used to processing all things “calendar.” By keeping certain elements the same as users would expect (as opposed to going crazy on design for the sake of aesthetics), you’re more likely to get users to do what you want them to do.
3.) Control & Freedom
Users should be free to explore the system without being afraid that anything bad will happen.
For instance, tell me this isn’t one of your favorite features in Gmail:
This is possibly the best mail feature on the planet. Gmail has done an incredible job of giving users control and freedom—making the experience customizable, but also enabling tools like this one that help reduce your fear of anything bad happening. Like hitting “reply all” instead of just “reply.” Eek.
4, 5, 6.) Error Prevention
There’s nothing better than using something that has been carefully designed to prevent problems I might face as a user from occurring in the first place.
Examples:
You’ve got to love these features. How annoying/embarassing is it when you mean to send an attachment, but forget to actually attach something? Gmail’s “Did you forget an attachment?” message does a great job of making users not feel like idiots.
The jury is still out on the iPhone’s autocorrect feature, though. I can’t decide yet if it’s done more harm or good in the texts and emails I send on my phone.
7. Design with Consistency
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow existing conventions, where applicable. Design consistency allows users to: transfer existing knowledge to new tasks, learn new things more quickly, and focus more attention on tasks. Basically, it avoids frustrating people unnecessarily.
8. Design for Recognition Rather Than Recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another.
Example:
How much better is your experience when you go to book a flight and the airport codes auto-populate once you begin typing your destination city in? Visible information and choices reduce the user’s mental workload. Since users can recognize a command more easily than they can recall it, design for the former rather than the latter.
9. Flexibility & Customization
Let users customize and save frequent actions, personal preferences, and settings. It saves them the time and frustration of having to search for or enter the same things over and over again.
Examples:
On the left, you can see the infamous search options on a Mac. The right is a screenshot of one of my favorite apps, Buster. If you happen to live in Chicago and take public transportation, this app is a must-have. Here, you can see that it allow you to save your “favorites”—buses and trains that you take frequently so you don’t have to do an organic search for them every single day.
All of this being said, we were warned not to fall into the trap of making it too easy for users to customize their experiences. Sometimes, that’s just a designer’s way of avoiding the decision-making process about what should and should not be customizable.
And finally…
10. Aesthetic and Minimalist Design
Eliminate any information or elements that are irrelevant or rarely needed. Every extra unit of information in a dialog competes with the relevant units of information, and diminishes their relative visibility.
In short, keep things simple. Don’t take away things that people need or will be looking for. But also know that you don’t need to have every single feature available to users. Simplicity is king. The fewer the distractions, the more likely you are to nudge users to interact with whatever it is you created the way you want them to.
Until next week!