Daily UX Crash Course: 31 of 31. (If you’re just starting the UX Crash Course: Start Here.) Let me paint the picture a little bit first… Imagine that you want to design a page to sell shoes. And, of course, you want to sell as many shoes as possible. What do you think would get more people to buy? A video of the shoes? How do you choose? If your first thought was “ask the users!” So how can you decide between subjective things, like a boss?! The answer: Design all the things! What is an A/B Test? An A/B test is a way of asking thousands or millions of real visitors which option is best. The tests makes sure that each unique visitor only sees one option, then — after enough people have gone through your test — you can see which version of the design created more clicks. You can do it with 2 versions, or 20 version. A couple details: 1) A/B Testing is usually free, other than the time it takes to design and create the pages you’re testing. 3) An A/B Test is most reliable when you only change one detail.
That’s it! Daily UX Crash Course: 30 of 31. (If you’re just starting the UX Crash Course: Start Here.) There are two graph styles that human behavior creates fairly often: Traffic and Structured Behaviour. One little note: I have used a “bar graph” in these examples because it was faster to draw. Your analytics may use different types of graphs. Don’t panic. They all do basically the same thing. That’s why we’re learning shapes, not graph types. Traffic Graphs These graphs show the number of people that did something, over time.
Traffic will always be moving up and down a little, because random things in the world happen every day. That’s why we can never assume that a small change in traffic was caused by a new feature or a design change. Now, on with the shapes! If it would be fairly easy to walk across your graph, and it shows a consistent “rise” or “fall” then the trend is likely to continue, unless you change it. Did you run a weekend campaign? See how there is a pattern repeating over and over? But… Structured Behaviour Graphs. Daily UX Crash Course: 29 of 31. (If you’re just starting the UX Crash Course: Start Here) There are 7 basic stats that you will need to understand if you want to do anything with a website. Not just what they measure, but what they mean. Numbers are not good or bad: 1 million users is only good if it’s higher than last month.
If you’re Facebook and you have 1 million users this month, you’re in trouble. Before you analyze anything, take aminute to think about what your site is supposed to do, and realize what numbers would indicate that type of behaviour. 1 & 2) Total Visits & Unique Visits This may surprise you, but Total Visits measures the number of times your site has been visited, total. Unique Visits is a little different though. What they mean: Comparing these numbers will tell you whether your traffic is: High quality — Total is much higher than Uniques.
"Uniques" are a more authentic representation of your traffic, but I would rather have 1000 people who visit every day than 10,000 people who visit once a month. Daily UX Crash Course: 28 of 31. (If you’re just starting the UX Crash Course: Start Here.) Data is Objective In one of the early lessons we learned about user research. Data is different. Data measures user behaviour. It is collected by a computer, so it can’t influence the user. And data never lies. But it also doesn’t tell you anything about context, so be careful. Data is Made of People You will be tempted to treat data as “just numbers” that mean whatever you want them to mean. Do not reduce millions of people into a single number and expect it to be reliable in every situation. You may also be tempted to look for numbers that “prove” you were right. More data is better data If you measure the clicks of 5 people, they might all be drunk, and you have no way to know.
The bigger the decision you are trying to make with data, the more data you need before you decide. A Few Ways to Collect Objective User Data There are just as many ways to get objective data as there are ways to get subjective user research: Daily UX Crash Course: 27 of 31. (If you’re just starting the UX Crash Course: Start Here.) Power Users are the Minority: Statistically-speaking, it is impossible for advanced or power users to be “most” of the people using your design. Although it can be very tempting to believe that. Unless your product/service is highly technical the vast majority of your users will be normal people with other shit to do. Not super-focused, tech-savvy people like you and your colleagues. Hard truth: If you want millions of happy users, design for the distracted idiots, not the obsessed geniuses.
Hidden vs. In most projects there will be situations where you have to decide how “clean” you want your layout to be. Designers will usually choose to hide everything because it looks better. Non-designers will want all of their favourite features to be visible all the time. So how do you choose? Visible features will always be used more and discovered more than hidden features.
Make sure beginners can find the core features easily. Daily UX Crash Course: 26 of 31. Daily UX Crash Course: 25 of 31. (If you’re just starting the UX Crash Course: Start Here) What is Conditioning? It has nothing to do with how far you can run, but it has everything to do with what you expect and what you want. If you have heard of Pavlov’s drooling dogs, then you might be familiar with “conditioning” in a scientific context. In fact, if you have a dog, you might have even used conditioning before, when you trained them to sit, shake hands, do your taxes, and so on. It works just as well on people. Conditioning is the fundamental principle that animals — including humans — will do something again if they are rewarded, and they will avoid doing it again if they are punished. That might seem obvious, but 99% of the designers I’ve met ignore it in their UX designs. Rewards and Punishments are feelings, not things. When we talk about rewarding users, 9 out of 10 people automatically think about offering the chance to win an iPhone or movie tickets or something else equally dumb.
Would you like to do that again? Daily UX Crash Course: 24 of 31. (If you’re just starting the UX Crash Course: Start Here.) The example above shows two button examples (don’t click them). As a general guideline you will only need two button styles, because most user actions fall into one of two categories: 1) Primary Actions that are helpful to our goals.2) Secondary Actions that are not. Primary Buttons: Some actions that are available to the user are productive, like registering, buying, submitting content, saving, sending, sharing, and so on. They produce things that didn’t exist before. Those are primary actions, or things that we want the user to do as often as possible. Buttons that execute primary actions — primary buttons — should be as visible as possible. Primary Style: High contrast compared to the background. Position in Layout: On or near the Axis of Interaction so users notice them first, by reflex. Secondary Buttons: Secondary Style: Low contrast compared to the background (a similar colour or shade).
Importance is a BIG exception: Daily UX Crash Course: 23 of 31. (If you’re just starting the UX Crash Course: Start Here.) There are four places when a UX designer might give input about the words being used to communicate with users. Otherwise, it’s a good idea to let the content creators do their thing. Those four places are: Calls-to-ActionInstructionsLabelsLonger, persuasive text. This lesson will cover the first 3. #4 gets a whole lesson of its own, later in the Crash Course. Calls-to-Action A “CTA” is the headline or the text on/near a button that tells people what to do. The general formula for a good CTA is: VERB + BENEFIT + URGENT TIME or PLACE Verb: is the thing they will do.
Benefit: is what they will get (if the verb didn’t already include it). Urgency: is a time frame like “now” or a place like “here”. For a slightly more detailed explanation of this formula: READ MY CTA METHOD HERE. Instructions: If it isn’t 100% obvious how the user should do something — and even if it is — you might want to help them out. Tell them exactly what to do. Labels: Daily UX Crash Course: 22 of 31. (If you’re just starting the UX Crash Course: Start Here.) Forms are one of the places you will spend a lot of your time, usability-wise. They cause confusion, mistakes, and loss of engagement, and they are one of the most valuable parts of your site.
If they aren’t one of the most valuable parts of your design, why are you using a form? Did I mention that they cause confusion, mistakes, and loss of engagement? One Long Page or A Few Short Pages? The most common question with forms — from UX designers and marketers alike — is “how long is too long?” It is a good general rule to keep forms as short as possible, but don’t be afraid to break it into pages if it makes sense, or if you want to save information in steps, just in case the user quits in the middle.
The main thing is to make a form feel simple. Input Types The purpose of a form is to get input. i.e. — information from the user. For example, lets say you want the user to pick their favourite type of goat. Labels & Instructions. Daily UX Crash Course: 21 of 31. (If you’re just starting the UX Crash Course: Start Here.) This idea is deceptively simple. Human attention is very limited. We can only focus on one thing at a time, like a squirrel or boobs or Duck Dynasty. So while we’re focusing on one chunk of content, the other chunks of content effectively become invisible. Don’t believe me? Watch this. Find the Edges: In every design, you will use the visual principles you learned in this course.
They might be the aligned edge of the text, or your images, or groups of things in a row. Each of those edges is an Axis of Interaction. Your user’s attention is almost always focused on an Axis of Interaction, and when it stops focusing there, it will hop to the next Axis of Interaction. Therefore: If you want people to click something, put it on (or near) an Axis of Interaction. The farther an element is from the Axis, the less people will see it, and if you don’t see something, you can’t click it. That’s it! Daily UX Crash Course: 20 of 31. (If you’re just starting the UX Crash Course: Start Here.) The Fold: One of the most popular old-school misconceptions is about “The Fold” which — in case you’ve never heard of it — is the part of your design that is visible before the user scrolls.
Everything above The Fold will get maximum visibility. However, from the studies I have seen, you can expect 60-80% of users to scroll if they expect to find something useful below the fold. Whatever is above The Fold should inform users about what is below The Fold. Careful: It is popular right now to use huge background images at the top of the page. Learn more about The Fold Here. Images: Many UX designers treat images as if they are not functional, but images can lead the user’s eyes, so you should think about them. Images of people, specifically, draw more attention than anything else you can use in your layout. As a general guideline, the more emotion an image adds, the more engaging it is. Both heatmaps above show the same layout. Headlines: Daily UX Crash Course: 19 of 31. (If you are just starting the UX Crash Course, Start Here.) Although it might be tempting to approach your wireframes on a page-by-page basis, don’t do it!
This is one of those “measure twice, cut once” kind of things. As a general rule, you should do your wireframes like you do your tattoos: start with the big parts and add details as you go. In this case the big parts are the elements that will appear on all of the pages: navigation and footers. Footers: A footer is typically a list of static links that are too general and too insignificant to get a place in the main navigation. Ask yourself: "Are there going to be any pages that have an infinite scroll? " Navigation: Menus come in at least two flavours: main menu and sub menu.
Main Menu: If you did your information architecture properly, then you already know what should be in the main menu. If this is a brand new menu just make your best guess, and tell the developers that you want it to be easy to re-order them later. Tl;dr. Daily UX Crash Course: 18 of 31. (If you’re just starting the UX Crash Course, Start Here.) The words above can mean a variety of things in the real world, so for the purposes of this lesson: Browsing is when you go to Ikea to look at all the model rooms “just to get ideas” and you walk out with a bunch of random crap anyway. Searching is when you go to Ikea looking for a new sofa that will fit in your absurdly small apartment.
Discovery is when you find the sofa you’re looking for, and also buy those clever little nested end-tables because they are so damn clever and nested. As if those are things you need in your life. Browsing: When you visit an online store just because their products look nice or because you’re following trends, or because you’re dreaming of the day when your life will finally be completed by a $2000 handbag, you are browsing. A browsing user will glance quickly at most of the images, one by one, starting at the top left. To design for browsing: make scanning easy and keep the content quick and visual.
Daily UX Crash Course: 17 of 31. (If you’re just starting the UX Crash Course, Start Here.) Using a website or an app may feel like a different experience every time, but in fact, the way people look at any design is fairly predictable… The Z-Pattern: Let’s start with the most boring design I can imagine: an entire newspaper page of solid text. All one story. In a design like that — which I hope you never create — users will generally scan it in a pattern something like the “Z” shown above. Boring! The reason I spent the last five days teaching you visual design principles is so you would know how you can make this layout better. Aha! If we add a bigger headline (visual weight), create one column to follow (line tension), and use smaller sections (repetition) we can get people closer to the famous F-Pattern.
The colourful image above shows eye tracking results, called “heat maps”. Similar layouts = similar results. The F-pattern made the founders of the Nielsen Norman Group famous a while back. The F-Pattern works like this: Daily UX Crash Course: 16 of 31. (If you’re just starting the UX Crash Course, Start Here.) Today we say goodbye to the Old-Timey Rubber Ducks, but first they will demonstrate two of the most fundamental principles of visual perception. The ducks aren’t just pretty faces! Alignment: In the first image above we see a group of 6 stunningly handsome ducks, but we also see a lot of relationships, because of the way they are aligned: We see two rows.The far left and far right ducks seem to be “separated”.The two center ducks seem the most “organized”.All ducks seem to be going in the same direction.If you see motion, the far left duck might be “falling behind”.If you see motion, the far right duck might be “leading”.
Those 6 ducks are identical. Buttons with similar functions can be aligned. Proximity: The closeness or distance between two objects creates a feeling of those objects being related or unrelated. In your designs, put related elements closer together and unrelated elements farther apart. Daily UX Crash Course: 15 of 31. Daily UX Crash Course: 14 of 31. Daily UX Crash Course: 13 of 31. Daily UX Crash Course: 12 of 31. Daily UX Crash Course: 11 of 31. Daily UX Crash Course: 10 of 31. Daily UX Crash Course: 9 of 31. Daily UX Crash Course: 8 of 31. Daily UX Crash Course: 7 of 31.
Daily UX Crash Course: 5 of 31. Daily UX Crash Course: 4 of 31. Daily UX Crash Course: 3 of 31. Daily UX Crash Course: 2 of 31. Daily UX Crash Course: 1 of 31.