Our Approach to UX

An approach that you can use to apply good UX to the design of your sites, even as a novice developer

Scroll down...

Content

Resources

Comments

Our Approach to UX

It may seem a bit overwhelming to suddenly get exposed to all the details of what UX designers think about when building great sites. That's okay -- remember, your job is just to take away the high level principles and think user-first. In this brief lesson, we'll take another formal look at UX and then cover how you can apply it to your own web development projects.

UX in the Real World

Read This Article from Smashing Magazine to get a more formal understanding of how UX fits into the industry and some more details on the tools that UX professionals use.

UX in YOUR World

UX Designers have a whole host of tools at their disposal including interview methods, flow charting, wireframing, and lots of exercises that use sticky notes. They think very specifically about things like how much cognitive effort is required to use specific navigation and menu patterns. It's up to you how deeply you want to delve into these things.

Our goal has never been to turn you into a UX designer but rather to give you a good framework for thinking about your sites from a user-focused perspective so you can be a more effective developer. We want to make sure you understand some of the best practices that UX designers have established over the years so you can avoid making stupid mistakes.

The basic framework of the approach we've developed over the past couple lessons is laid out again below:

1. Identify Your User

Figure out who the key user is, especially if it isn't you. That might mean interviewing a bunch of people and creating specific user personas which represent your individual users or just thinking critically about who you want using your site.

You may not go so far as to create formal user personas for your personal projects but they can help immensely. It's outside the scope of this course to directly teach the production of personas, but this article from Smashing Magazine by Shlomo Goltz does a great job diving into them. Part II gets into how to actually produce them as well. Check both of those out if you have curiosity and time.

Happy user

2. Identify Your User's Critical Goal(s)

Once you know who your users are, you need to figure out why they actually want to use your site or product and what their critical paths will be through it. You could do lots of interviews and observe their behavior in the real world or just make your best guess based on a hypothesis.

It really depends on how much time and effort you're willing to put into it but you should at least make a written hierarchy of user goals that you can fall back on during the design process.

Goals

3. Lay Out The Information Architecture

Create the architecture that best achieves the goals you just identified. The best way to know if you're right is, again, by checking in with users to see whether your potential layout is actually what they expect.

This step can be done with simple sketches, a whiteboard, post-it notes or even just a nested list that contains all your pages.

information architecture

4. Set Up Your Navigation Flows

Think through how your user will navigate and flow through these pages by making sure they can always answer:

  1. Where am I and how did I get here?
  2. Where should I go next and how do I get there?

You can specify this by adding arrows and creating simple flow charts that show how the user will flow from one page to the next on your architecture diagram.

user flows

Source: UXBooth

5. Design Interface Elements and Interactions

Actually design the specific elements necessary for your user to navigate and use your site. Make sure they conform to established patterns that won't surprise your user. Be consistent across your whole site. Keep it simple and be forgiving of errors.

You'll want to choose your basic navigation pattern (e.g. menu-based navbar across the top? Nested list on the side? A grouping of product "tiles" which are links to the product pages?). These can be added to your first basic sketches and mockups (which you'll learn more about in the section on mockups later).

interface elements

6. Bring Back the User

Loop everything back to the user -- at each stage of design, follow your user (whether real or hypothetical) through the flow of your site and fix the major friction points that pop up. The only good way to do this is by observing real people, even if it's just watching them fake "click" on your mockups to open menus or navigate to the next pages.

Remember, if you're not designing for your user, you're designing for yourself and your site will probably suck. :)

Keep Learning

The internet is full of great resources to explore once you've whetted your appetite for designing good UX. Specifically, check out Smashing Magazine's UX section and UXMag. Just don't take too long learning every little thing -- remember, we're just here for an overview, not to become experts (yet)!

The Resources tabs in the previous few lessons have links to TONS of helpful articles that will go into much greater depth than what we've covered here (and what you actually need to know right now). Check them out if you'd like to dive deeper or save them for future reference.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: A UX Teardown