GENINTDRM-UX Flashcards

Question

good persona

Answer 1

Persona A is an experienced manager, mostly interested in one or two areas of expertise. They visit often, but they are pressed for time, so they focus on “collecting” content to read on the weekends. They tend to be prolific social media sharers, mostly to Twitter and LinkedIn. They consider themselves thought-leaders, so public image is important. Why it’s useful: Now you have a lot of information to use! You know that fluffy content will not be popular, self-curating will be a big deal and you have a basis for setting up content categories. They need easy access to sharing, and only certain types of social sharing will be relevant. You also get to say “no” to a Facebook campaign, because these users don’t spend time there, and digest emails will be better than frequent notifications because these people are already pressed for time.

Answer 2

Several! When you think about features, think of the most valuable version of the users you see in real life. You’re not trying to support the current behaviour; you’re trying to nudge those users toward an “ideal” version of themselves.

Answer 3

remember that all users are not alike! You will probably have a few different behavioural groups, and they all deserve a good profile.

Answer 4

Step 1: How does it like to be touched? With your finger or your mouse? I am not going to cover that in this article, because I already wrote this ProTip about Touch vs. Mouse interfaces. It should get you started.

Answer 5

Step 2: Start small. Many people think “mobile first” has something to do with mobile being popular. Kind of, but not really: if you design for the smallest, least powerful device first, then you will focus on the content, and your core functionality. That leads to simple, beautiful apps. If you do it the other way around, it’ll be like trying to put a marshmallow into a piggy bank, which is neither simple, nor beautiful.

Answer 6

Step 3: What special powers does this device have? Mobile devices travel with us so — surprise — we spend more time on them and location becomes a factor. They are also small, so moving the device itself can be a feature. Laptops, on the other hand, don’t travel as well, but they are more powerful, they have huge screens and keyboards, and the mouse allows more precise selections and functions. Don’t worry about “consistency” so much — different devices require different thinking sometimes.

Answer 7

Step 4: Consider the software. “Mac vs. PC” is more than a cute ad campaign. Read through the UX guidelines before you start. Also, iOS7 or Windows 8 look different than iOS6 or Windows Vista. You may need to choose which versions you will support, and which you will ignore. Every time you support one it multiplies the design, development and maintenance time in the future. Think ahead!

Answer 8

Step 5: Be responsive. Is it on the web? Does it support a few different types of phones? What if Apple makes a new iPhone that is a little different? The modern internet — whether it is a website or an app — works on all devices, so make sure yours can stretch or adapt to whatever device the user decides to use.

Answer 9

Step 6: Think about more than one screen at a time. This one is a bit advanced, but I think you’re ready for it. Can you use your phone and computer together, like a remote for your TV? Could a group of phones control a game on a tablet, all in the same room? What if you’re logged in on two devices, can you “throw” data from one to the other? What about syncing information; will that cause issues in real-time? Give it some thought!

Answer 10

A design is not necessarily good just because it’s common. To be a “good” Design Pattern, a solution must be common and usable. Some design ideas become popular because they allow lazy UI designers to ignore a challenging feature. It’s like putting a bag over someone’s head because they are ugly.

Answer 11

For example: Facebook’s “hamburger” button — which represents the hidden menu in many mobile apps — has started appearing on full-size websites that have plenty of space for a menu. It’s common because hiding the menu is easier than designing a nice one, not because the results are better. In real life, many users don’t notice the hidden menu at all, and they leave the site or get lost. That’s bad. And lazy.

Answer 12

``` Good UI PatternTap Anatomy of Perfect Landing Page Mobile Patterns Timoa on Pinterest ```

Answer 13

``` If the idea of creating “structure” in “information” is completely new to you, this presentation might help get you started: Understanding Information Architecture. Information Architecture (IA) can be relatively simple with a small project, and incredibly complicated with a large project. IA is invisible. To work with it, we need to draw a Site Map.When pages are organized this way — like a family tree — it is called a “hierarchy” or “tree”. Most sites and apps are organized like this (but it’s not the only way). ```

Answer 14

Deep or Flat, not both. Generally speaking, your site map will either be very “flat” — which includes more Sections in the menu and requires less clicks to reach the bottom — or your site map will be “deep” — simpler menus, but more clicks to get where you’re going. Notice that both of the structures in this example have the same number of pages. Equal, but different. If your site is deep and flat, that’s bad. You might want to simplify your goals, or design a good search as a core feature.

Answer 15

Sites like YouTube, which only has users and videos to deal with, are usually more “flat”.

Answer 16

Sites with a lot of products, like Wal-Mart, often need a deep architecture, otherwise the menus get ridiculous.

Answer 17

You might hear people say that everything should be “3 clicks away” at all times. That means they learned UX in the 90’s and haven’t learned anything new since then. Focus on the user instead. Make sure they understand where they are, and where they can go, at all times. If your navigation is easy and clear, the number of clicks is irrelevant.

Answer 18

The goal of a UX designer is to make users effective.

Answer 19

A user’s individual experience is their conscious, subjective opinion of your app or site.

Answer 20

What is the user’s motivation to be here in the first place? How does this make them feel? How much work does the user have to do to get what they want? What habits are created if they do this over and over? What do they expect when they click this? Are you assuming they know something that they haven’t learned yet? Is this something they want to do again? Why? How often? Are you thinking of the user’s wants and needs, or your own? How are you rewarding good behaviour?

Answer 21

Could you get the job done with less input from the user? Are there any user mistakes you could prevent? (Hint: Yes, there are.) Are you being clear and direct, or is this a little too clever? Is it easy to find (good), hard to miss (better), or subconsciously expected (best)? Are you working with the user’s assumptions, or against them? Have you provided everything the user needs to know? Could you solve this just as well by doing something more common? Are you basing your decisions on your own logic or categories, or the user’s intuition? How do you know? If the user doesn’t read the fine print, does it still work/make sense?

Answer 22

Do users think it looks good? Do they trust it immediately? Does it communicate the purpose and function without words? Does it represent the brand? Does it all feel like the same site? Does the design lead the user’s eyes to the right places? How do you know? Do the colours, shapes, and typography help people find what they want and improve usability of the details? Do clickable things look different than non-clickable things?

Answer 23

Does it sound confident and tell the user what to do? Does it motivate the user to complete their goal? Is that what we want? Is the biggest text the most important text? Why not? Does it inform the user or does it assume that they already know what its about? Does it reduce anxiety? Is it clear, direct, simple, and functional?

Answer 24

Are you using data to prove that you are right, or to learn the truth? Are you looking for subjective opinions or objective facts? Have you collected information that can give you those types of answers? Do you know why users do that, or are you interpreting their behaviour? Are you looking at absolute numbers, or relative improvements? How will you measure this? Are you measuring the right things? Are you looking for bad results too? Why not? How can you use this analysis to make improvements?

Answer 25

``` Categories Tasks Search Time People ```

Answer 26

A User Story describes one possible path a user can take on your site or app. It should be short, but complete. You will need many user stories to describe your whole design.

Answer 27

The user arrives on the main search page. The user can enter any search query and submit with the mouse or keyboard. The next page displays a list of search results with the most relevant results on top. The user can click the link to go to the appropriate site, or they can navigate through more pages of results until they find something useful.

Answer 28

nothing in the story tells me specifically how to solve or design those actions; just that they are possible. The purpose of these stories is to describe flows. Sequences of user choices. Not the final UI.

Answer 29

If the flows are simple and effective, you are doing a good job

Answer 30

Managers often think User Stories are a way to order UX from the designer, but that is absolutely wrong. Why? Because a user story is basically a list of features or functions, and that has a major effect on the final solution. The UX Designer writes user stories to communicate to the team. Not the other way around.

Answer 31

The structure of your pages determines the steps in your user stories. And to structure your pages you have to pick a type of Information Architecture to work with (or a couple types, but let’s keep it simple for now).

Answer 32

When you think of a retail store like H&M, you probably imagine their menu as a set of categories: “Men, Women, Kids, Sale” and so on. Types of content. When you click those categories you expect to see content that fits in that category. This is the most common type of Information Architecture. However, if the categories are complex, like banking products, or industrial chemicals, or sex toys (a friend told me), then you and your users might not have the same expectations about what is in those categories, and that can get confusing. If I want to buy a butt plug, is that under “Battery-Operated” or “Glow-in-the-Dark”? Life is full of hard questions.

Answer 33

Another way to organize your site or app is by the goals the users need to achieve. If you are a bank, perhaps something like “Save, Loan, Invest, Get Help, Open an Account” would make a simpler menu. If the user knows what they want, this is a great way to structure your design. But be careful… users don’t always know enough to choose their own adventure. If you think about it, you will realize that a Task-based site and a Category-based site for the same company could look very different. It’s an important choice.

Answer 34

If your site is very complex, or if it is mostly full of user-generated content, a search-based Architecture might make more sense, like YouTube. If YouTube only had categories (Funny, Sad, Ads, Movies, etc.) it would actually be hard to use, and a lot of work to keep the categories correct!

Answer 35

If you’re just starting in UX this might blow your mind a little: you can also design Information Architecture that changes with time. The simplest version would be your inbox, where messages are displayed in the order they arrived. That is “Time-Based” IA design. On a site you would have pages for things like “hot right now, archived, later, new” etc. Reddit or the Facebook News Feed are also an examples of time-based design.

Answer 36

Facebook — or any social network — is Information Architecture based on people. All the pages are designed around who the information is about, and the relationships between them. Once you are on someone’s profile, Facebok uses categories (Photos, Friends, Places) to organize different types of content.

Answer 37

The idea of visual weight is fairly intuitive. Some things look “heavier” than others in a layout. They draw your attention more easily. And that idea is valuable as a UX designer. Our job is to help users notice the things that matter. And it is equally important not to distract the users from their goals. By adding visual “weight” to certain parts of your design, you increase the chance that a user will see them and you change where their eyes will go next. Remember: visual weight is relative. All visual principles are about comparing a design element to whatever is around it.

Answer 38

The difference between light things and dark things is called contrast. The more different a light thing is compared to a dark thing, the “higher” the contrast. In UX, you want to give important things higher contrast, like the duck in the center. In this case most of the image is light, so a dark duck is more noticeable. If the image was mostly dark, the lighter duck would be more noticeable. If these were buttons, more people would click the dark one than if all the buttons were the same colour.

Answer 39

In the real world, we notice things that are close to us more than things that are far away. In the digital world, bigger things are perceived to be closer, like the middle duck above, and something that is smaller is perceived to be farther away (like the blurry duck in the back.) If these ducks were all the same size, you would probably look at them left-to-right (assuming you read that way). If you use blur effects or shadows it just makes the perception of depth more realistic. Size has this effect even if your design looks “flat”. As a general rule, you want more important things to be bigger than less important things. This creates a visual “hierarchy” on the page and makes it easier to scan, but it also allows you to choose what the user notices first. That’s why it’s wrong to “make the logo bigger”. Unless you want users to stare at your logo instead of buying something.

Answer 40

As UX designers, we usually rock the wireframes in black-and-white. And that’s a good thing! We focus on the function, while the UI designers can focus on the style. However, sometimes colour is function. Like traffic lights or making the colour of a popsicle match the flavour. You know, important shit.

Answer 41

In the top picture above we see three ducks: blue, yellow, and red. They’re so handsome. Immediately these ducks seem to have different tonality, and it is easy to imagine how the colours can change what each duck “means”. If the ducks were buttons, they might be: confirm, cancel, and delete. If they were indicators on a fuel tank: full, half, and empty. Or if they were on a stove: cold, warm, and hot. You get the idea: the ducks are identical, but colours change the meaning.

Answer 42

The other thing to keep in mind is that colours can be “loud” or “quiet”. The second image above shows a red duck and two blueish ones. The red duck almost looks a little closer, doesn’t it? It’s not. Something like a “buy” button should have a colour that makes it jump off the screen. More people will click a colour that “advances” (comes forward). On the other hand, sometimes we want things to step back so they are visible, but not too distracting, like the two blueish ducks. They “recede” (sink back). This is good for something like a menu that is always on the screen. If it is always yelling at you, that’s unnecessary and it steals focus from more important things.

Answer 43

Colour can work really well with the lesson about Visual Weight from yesterday. Something big is noticable, but something big and red can’t be missed! Make your errors and warning labels red and high-contrast. Or, if you’re just confirming what the user did, something a little smaller in a receding green might be perfect. Human brains have a particular talent for patterns and sequences. Whenever something in nature happens over and over, we will quickly notice. In fact, we don’t just notice, we think about those things differently. The first image above shows five identical rubber ducks in a row. We don’t see five individual ducks though, we see a row of ducks. We treat them as a group or a sequence, and if you live in the Western world, you will probably look at them left-to-right because that’s how we read. If that row of ducks were a menu or a list, we would do the same thing. Therefore, you could expect more people to click the options on the left, and less people to click the options on the right.

Answer 44

Colour can work really well with the lesson about Visual Weight from yesterday. Something big is noticable, but something big and red can’t be missed! Make your errors and warning labels red and high-contrast. Or, if you’re just confirming what the user did, something a little smaller in a receding green might be perfect. Human brains have a particular talent for patterns and sequences. Whenever something in nature happens over and over, we will quickly notice. In fact, we don’t just notice, we think about those things differently. The first image above shows five identical rubber ducks in a row. We don’t see five individual ducks though, we see a row of ducks. We treat them as a group or a sequence, and if you live in the Western world, you will probably look at them left-to-right because that’s how we read. If that row of ducks were a menu or a list, we would do the same thing. Therefore, you could expect more people to click the options on the left, and less people to click the options on the right.

Answer 45

To make a pattern or a sequence, keep visual weight and colour consistent. The users eye will start at one end and follow the pattern to the other end. To break the pattern, just switch it up in the place where you want to add focus. Make the “Register Now” button an unexpected colour, size, shape, or style, and watch your clicks go up overnight! Visual “tension” is a concept that seems very elementary, but you’d be amazed how useful it can be. Our brains are a little too good at seeing patterns where they don’t exist. As a designer you can use that.

Answer 46

The first image above shows 8 ducks in a row. We don’t see 8 individual ducks; we see a line. That’s line tension. The perception of a line or a “path” when there isn’t one. Our eyes will follow the path to see where it goes. Super useful. If we break that path — like any broken pattern — the gap steals more focus.

Answer 47

So far we have assumed there is only one line. But what if we create line tension using more than one line? The result can be “shapes”. In the second image above, I have arranged the ducks so they appear to form the “corners” of a box. You could see 12 ducks, or four groups of 3 ducks, but your mind really wants to see the box, so it does. Furthermore, now we can put things “inside” the box (like more ducks?!), or in the “spaces” between the “corners”. Similar to line tension, edge tension brings focus to the gaps. Layout-wise, this can be an excellent way to put more focus on something small, like a label. Or you can create visual paths leading to the button you want people to click. Vintage ads use this technique often. And conveniently, it makes a layout feel “simpler” and “more cohesive” because a path or a box is only one mental thing, but 12 separate ducks is too much awesome to handle.

Answer 48

In this lesson I have left the “tension” gaps blank, but you don’t have to. You can also use colour to create a path like a gradient on a list of items. Or you can add visual weight to a group of elements by treating them like one shape instead of separate pieces. It’s a great way to direct the user’s eyes without adding any more “things” to a layout!

Answer 49

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. Only the alignment creates these perceptions. Buttons with similar functions can be aligned. Different levels of content can be aligned. Information can be in a grid of rows and columns like a spreadsheet to create complex meaning.

Answer 50

The closeness or distance between two objects creates a feeling of those objects being related or unrelated. That distance is called “proximity”. In the second image you see 6 identical ducks which are not aligned horizontally or vertically, but we definitely see two groups. The ducks in each group seem “together” like a team or a family. The only thing creating that perception is their proximity. In your designs, put related elements closer together and unrelated elements farther apart. For example: a headline, a block of text, and a button that are all related to one action — like a purchase or an app download — are usually designed like a “package”. That allows the user to understand that they go together without reading anything. 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…

Answer 51

Let’s start with the most boring design I can imagine: an entire newspaper page of solid text. All one story. No headlines. No images. No breaks or pull quotes. Just text, in even columns, from corner-to-corner. 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! Zzzzzzzz…. (see what I did there?) 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.

Answer 52

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”. Eye tracking records where people look; the longer they look at something, the more “hot” it looks in the heatmap. Similar layouts = similar results. The F-pattern made the founders of the Nielsen Norman Group famous a while back. And although they haven’t done any “breakthrough” work in a while, they still publish many reports worth reading. The F-Pattern works like this: Start in the upper left corner, like the Z-pattern. Read/scan the first (head)line of the text. Scan down the left side of the column until you find something interesting. Read the interesting thing more carefully. Continue scanning down. By repeating that method over and over, the heatmap starts to look like an ‘E’ or an 'F’, hence the name.

Answer 53

You may notice that some parts of the page get lots of attention “naturally” while other parts of the page are overlooked most of the time. This is what we mean by “strong” and “weak” spots in a layout. A button in the top left will get more clicks than a button in the top right, which will get more clicks than a button in the bottom left, which will get more clicks than a button in the bottom right. And all of those will get more clicks than something randomly stuck in the middle …unless you do something about it. It might also be good to know that each “block” of content and each column can have their own F-pattern. It doesn’t have to be one-F-pattern-per-page, but that is a more advanced conversation for another day

Answer 54

When you consistently use typography to indicate the importance of text, and certain colours to highlight buttons, and when you give more visual weight to things that matter, it creates a visual hierarchy. i.e. — a design that people can scan easily. Our eyes jump from important thing to important thing rather than scanning like a robot. Some designers think visual hierarchy is good because it looks better, but the truth is that it feels better because it is easier to scan.

Answer 55

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.

Answer 56

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. They might skip some, but that’s ok. Photos that the user finds attractive will get extra attention (maybe even a click!). To design for browsing: make scanning easy and keep the content quick and visual. Don’t overcrowd the page with too much shit. Focus on the aspects of the products that create emotional appeal. If that’s style, focus on photos. If that is power (like boat engines or guns) then provide that info as clear labels. If that is brand names, clearly show the logos. If it is craftsmanship, magnify the handcrafted details. And so on.

Answer 57

when you go to Ikea looking for a new sofa that will fit in your absurdly small apartment.

Answer 58

When someone is trying to find something they have in mind, it may seem similar to browsing, but eye-tracking studies show a very different behaviour: they are hunting. A searching user will ignore a lot of products or pictures. Organization in your layout will help them systematically work through the options; they don’t want to miss any! A Pinterest-style layout works against them because it is “staggered” and random. But being able to “filter” the options is often useful. To design for Searching: Focus on attributes. If they want a Russian Bride with brown hair and blue eyes, they will stop at every photo that has those attributes, but blondes are only getting in the way. Highlight the attributes that are most likely to be “critical” for most users, and nothing more. Ignore any ideas you might have about what looks “cluttered”… if the information is useful, it isn’t “clutter”. This isn’t an art gallery. When the user finds what they want, they will click for more information (or buy). A Russian Bride’s name, photos, and opinions about older creepy men might be major points of interest, but her shoe size and intense love of waffles… not so much.

Answer 59

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.

Answer 60

Ok, so let’s say you users aren’t finding your amazing selection of antique kazoos, but you think they would buy them if they did. How do you create discovery? The way you think people discover new things is probably the opposite of how people actually discover new things. Welcome to the wacky world of UX. There are two mistakes you will probably make: 1) You will put it in the main menu, or create “banners” on your own site promoting it. 2) You will expect your most loyal users to find it first, because they spend the most time with your current design.

Answer 61

#1: Users only click things in the menu if they are looking for those things. Simple as that. Almost nobody “discovers” via the menu. And banners don’t work because banners never work. Haven’t you ever used the internet before? Why would people suddenly get excited about banners now?

Answer 62

#2: The more experienced a user is, the less they explore for new things. In real life, only beginners explore sites or apps to find out what it can do. Experienced users know what they want, and they know how to get it, so why would they explore?

Answer 63

#2: The more experienced a user is, the less they explore for new things. In real life, only beginners explore sites or apps to find out what it can do. Experienced users know what they want, and they know how to get it, so why would they explore?

Answer 64

#2: The more experienced a user is, the less they explore for new things. In real life, only beginners explore sites or apps to find out what it can do. Experienced users know what they want, and they know how to get it, so why would they explore?

Answer 65

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. We’re talking about millions of people here. Get a life. The most effective rewards and punishments are free because they are feelings, not some random stuff. Imagine we took you up on stage and told 50,000 people that you are one of the best friends a person could ever have, and that the world is a better place because you’re in it. Would you like to do that more than once? Probably. Now imagine we took you up on stage and told you that you had been voted “most useless” by all your closest friends & family. Would you like to do that again? Probably not. Those are a bit extreme — unless you’re on reality tv — but notice that we didn’t give you anything or take anything away from you. It’s all about perception. But the feelings those perceptions create can get pretty intense!

Answer 66

it is crucial to understand how it affects and how can impact their state of mind, their emotions, feelings, mood and body.

Answer 67

It’s important to connect. It’s important to involve,

Answer 68

the crucial part is building a powerful experience to people, driving the right message at the right moment, contributing with relevance across their experience independently of the product or the brand.

Answer 69

UX professionals need to understand who their customers are, their behaviours, when and in what circumstances they get involved with a brand or product, and of course, where:

Answer 70

It’s what involves us, make us buy or share with the world what we are doing. It’s much more than people imagine, it is not just the design or the flow of information — it is responsible for reactions in people.