We've talked a lot about UX as the user flowing towards his goal, but what are the tools at your disposal to make this process as easy, efficient, and satisfying as possible?
We'll focus on the few high level things that are most important to you as a developer who is starting from scratch. You've likely dealt with the following components intuitively before but the whole point of this lesson is to get you thinking in a more structured and user-driven way about how you approach them:
Once you've figured out who your user is and what her critical goals are, you can sketch out all the pages necessary to accomplish them and what information needs to be present on each. For example, a very simple e-commerce site will probably need a landing page, one or more product pages, and checkout pages that are arranged in a linear fashion. The landing page might only contain brief summaries of the products while the product pages contain detailed information.
If this is your first exposure to IA, take a quick hop over to Lynda and watch the video What is Information Architecture.
When you've got a lot of pages, how do you organize them? Again, as long as you single-mindedly think about what your user's goal is, it should help you clarify this organization. A few questions will help you organize your thinking:
In the end, it's a question of what organizational scheme causes the least friction while still providing the users with the information they need to make good decisions.
You'll still have a lot of tough questions leftover... how do you know the answers? If you've been reading so far, you can probably guess -- talk to your users and have them show you what works best!
For your first few sites, you will probably be the user so it's a lot easier. When you begin working with external users, there are some established techniques for testing your information architecture that you might want to try out.
Because UX is all about flows, we usually represent our sites using sitemap diagrams that capture these flows. For small sites, that's pretty simple -- just a couple of boxes or post-it notes with navigation arrows pointing from one to another:
Source: Six Revisions
For more complex sites, it can get a whole lot messier but the idea is the same:
See the Resources tab for more in-depth readings but first check out these articles:
Read Information Architecture 101: Techniques and Best Practices by Cameron Chapman for a more detailed overview of IA.
Read 9 Information Architecture Patterns by Donna Spencer for examples of different IA patterns like "linear", "hub-and-spoke" or "strict hierarchical".
As a useful rule, it's typically better to use a shallow "page depth" than a deep one. This basically means you should link to more pages from each one so the user has to click fewer times to access information.
But everything is a balance -- too many links stuffed onto a page or in a navigation bar and you've got the opposite problem -- information overload:
For a more formal look at creating your site's information architecture, read Website Information Architecture for Optimal User Experience from ConversionXL.com.
It will cover things more from the perspective of an established business than a scrappy startup or freelancer, but should be helpful to show you some of the tools at the disposal of a "real" UX team to figure this stuff out (like user personas and card sorting). The only limit on adapting these techniques for rapid prototyping on a shoestring budget is your own creativity. Again, the goal here isn't to memorize or replicate all these techniques -- just observe how established teams think about IA and how important it is for overall UX.
Your information architecture and navigation are heavily dependent on each other. As we saw above, a very "simple" (flat) architecture can lead to a messy navigation. You'll need to strike the balance between the two.
It's worth noting that when we say "navigation", we don't just mean the little navbar across the top of most pages. We mean all elements on the page which direct your users' flow. And since we don't want our users to get lost on their way, we need to make it abundantly clear where they need to go. Is that all there is to good navigation?
Actually, research shows that our user needs the following navigation-related questions answered at all times:
The first question, "where am I", is important because users may enter any page directly from a search engine, a mis-clicked link, or a misunderstood link. Without navigational cues, they will be frustrated and lost.
That first question can be answered in a few different ways. You might put a breadcrumb navigation to show the user where in the page depth they are:
...or you might nest the elements of your sidebar categories:
Knowing where he is gives the user the comfort of being able to go back if necessary and the context to continue on with his flow.
The second question, "Where should I go next and how do I get there?" can be answered in several ways but it should be abundantly clear to the user what their next step is on the way to their goal. This is usually called a "Call to Action", or just CTA.
In many cases, the CTA is a big bold text that leads to a button:
As an example of missing navigation, when you're finished reading a blog or news article online, what happens? If there's nothing waiting for you at the bottom, you sort of think for a second and usually either go back or close the window. That's probably not what the site owner was hoping!
Many websites have figured this out and instead offer you a list of similar articles to keep you reading:
However you design the navigation of your site, make sure it orients the user properly and points them toward the next step in their goal.
Check out Designing for the Next Step by Joshua Porter for a more in-depth look at this. Again, don't get lost in the details, just absorb what's out there so you can start thinking more critically about the navigation on the sites you use and ultimately the sites you will build.
See the Resources tab for more articles on the specifics of designing navigation elements.
How your users actually interact with your page is a major determinant to their overall success and satisfaction. The navigation elements used as examples above all require interactions and are therefore a form of "interface" between your users and your site.
While navigation is a very important area of user interaction and one worth focusing on, it's certainly not the only one on your page. Anywhere you need your user to click or hover or type represents an interaction interface. That could mean menus or forms or links or even just scrolling through content.
Some methods of interaction are more effective than others. There's actually a whole field of study called "Human Computer Interaction" and a class of people called "Interaction Designers" who spend their time studying the most effective ways for users to interact with pages. They look at things like how long users spend focusing on specific areas of the page, where they click, and so on.
You don't need a PHD in HCI to accomplish our goals here -- you just need to open your eyes and start thinking about how your users will interact with the pages you design and what the most successful methods of interaction are for them. Follow these basic principles and you'll do just fine:
For another look at first principles of interaction and interface design, check out 11 Principles of Interaction Design Explained from Paul Trenchard-Seys.
A final note on error messages -- make them actionable and not accusatory. Most sites get this wrong. For instance, instead of "Your password is too long", go for "Please enter a password less than 20 characters". That might be too obvious... instead of "Your photo failed to upload", try "Make sure you've selected a file with the extension .jpg and try again". See the Definitive Guide to Sensible Form Validations from html-form-guide.com for more information if you're curious.
We'll dive a bit deeper into some of these when we cover visual design a bit later in the mini-course. Most of them should seem obvious in hindsight but I bet you never considered a couple of them before. Now you have no excuse!
These articles go in much more depth than you really need right now but consider them a good reference for when you revisit this stuff in the future.
You shouldn't need to memorize any of this, but it can be useful (and fun) to learn more about what navigation patterns are most effective.