《UX for Beginners:A Crash Course in 100 Short Lessons》笔记（2）

发表于 分类于

VI. Information Architecture

38. What is Information Architecture?

  • What: Information Architecture (IA) is the idea of giving a bunch of information some structure (i.e., organizing it, somehow). 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.
  • Some general guidelines:
    • Just because it looks simple, doesn’t mean it makes sense.
    • Keep it clear and readable.
    • We usually draw top-to-bottom, not left-to-right.
    • Don’t make a site map “fancy.” It’s a technical document, not a fashion show.
  • Deep or Flat
    • Deep: simpler menus, but more clicks to get where you’re going.
    • Flat: includes more sections in the menu and requires less
  • 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.

39. User Stories

  • A user story describes one possible path a user can take in your site or app. It should be short, but complete. You will need many user stories to describe your whole design.
  • Notice that nothing in the story tells me speciically 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.
  • 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.

40. Types of Information Architecture

  • Categories: When you click those categories, you expect to see content that its in that category.
  • Tasks: Another way to organize your site or app is by the goals the users need to achieve.
  • Search: If your site is very complex, or if it is mostly full of user-generated content, a search-based architecture like YouTube might make more sense.
  • Time: Design IA that changes with time(Time-based IA design).
  • People: Facebook—or any social network—is IA based on people.All of the pages are designed around who the information is about, and the relationships between them.

41. Static and Dynamic Pages

  • Static Page: A static page (or screen) is the most basic form of a digital layout. It will look precisely the same every time, for every user. It is hardcoded.
  • Dynamic Page: A dynamic page is a page that isn’t always the same.
    • A dynamic page might react to your choices.
    • A dynamic page might look different depending on the user.
    • A dynamic page might act as a template for lots of content.
  • Static vs. Dynamic:
    • Static design is more about the exact layout.
    • For dynamic pages you have to design containers, not the content itself.
  • Don’t be afraid to create useful limitations so users will make more effective choices.

42. What is a Flow?

  • Architecture without getting stuck or lost, and the easier it is for them to “flow” to where they want to go, the better your design will perform and the happier the users will be.
  • It is more important to give people the right information at the right time so they know whether to turn left or right.
  • Make sure there is always somewhere to go, and make sure the users know how to get there.

43. Users Don’t Go Backward

  • If users can always click forward, they never have to stop and decide where to go next. Decisions are hard. Doing the same thing over and over is easy.

VII Designing Behavior

44. Designing with Intention

  • UX is the science of design. It’s all about results. But to get good results, you need to motivate users to be more effective. This also means that one UX design can be “more right” than another, regardless of which one everybody likes better. And we can prove it. Sometimes even the users prefer the wrong one!

45. Rewards and Punishments

  • The designer, can control what happens, that means you can control the feedback. Which means you can train your users by rewarding them for something you consider good, and punish them for something you consider bad.
  • Pay attention to when users feel good and bad. Over time, those rewards and punishments can create lasting associations and behaviors that boost engagement through the roof, or crush your entire company.

46. Conditioning and Addiction

  • People will do a little work or pay a little cash to get a reward, if the reward is worth it. But, the first reward should be free.
  • Type of conditioning
    • Classical: Connect a signal of your choice to an existing behavior.
    • Operant: Reward or punish a random action.
  • Focus on giving so there is a sense of progress over time. Plus, your users will become loyal instead of resenting you.
  • Random rewards based on the quality of content—like blogging or social media comments — will raise the level of content overall.

47. Gamification

two major elements of game design:

  • Feedback Loops
    • motivation
    • action
    • feedback (emotion)
  • Progressive Challenges: it’s not about just getting it done anymore. It’s about getting it done better. To create progression, you merely have to create a bigger, better, harder way to do what the user already knows.

48. Social / Viral Structure

  • The Basic Formula: Action from User A = Feedback for User B = Content for User C
  • Viral structure achieves a few things when done right:
    • 2-in-1 actions
    • Good shit floats
    • Social proof
    • Self-promotion
    • Network saturation

49. How to Create Trust

  1. Professionalism: Part of that is visual design, part isn’t.
  2. Nothing is 100% positive or negative: Top-rated product reviews are both positive and negative. It has also been shown that app ratings and book reviews are most-trusted when they do not have all 5-star ratings.
  3. Democratize: As a group your users can be like a quality filter.
  4. Accountability: Trust can be built by showing information and by hiding it.
  5. Handle negativity with grace: When a company receives negative feedback and then deals with it gracefully in public they actually build more trust than positive feedback does.
  6. Keep users informed: It is better to tell the truth than let the user worry about it. Even when the truth isn’t the answer the users want.
  7. Use simple words: Just speak like a normal person would speak.

50. How Experience Changes Experience

  • If you want millions of happy users, design for the distracted idiots, not the obsessed geniuses.
  • Visible features will always be used more and discovered more than hidden features.
  • The users will use fewer and fewer features. Not more and more.
  • Habits are created very quickly in your users’ minds, so you should design a “fast way” to do key features, which might not be as obvious.

VIII Visual Design Principles

51. Visual Weight (Contrast and Size)

  • Remember: visual weight is relative. All visual principles are about comparing a design element to whatever is around it.
  • Contrast: The difference between light things and dark things is called contrast.
  • Depth and Size: In the real world, we notice things that are close to us more than things that are far away.
  • 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.

52. Color

  • Sometimes color is function. Like traffic lights, or making the color of a popsicle match the flavor.
  • If you don’t need to indicate something like that, let the UI designer choose colors. But if you do, let your wireframes do the talking.
  • Colorful wireframes just get in the way of the functional details. Use colors where they matter, but don’t make your wireframes blue like blueprints, or dress them up for clients.

53. Repetition and Pattern-Breaking

  • You could expect more people to click the options on the left, and fewer people to click the options on the right.
  • Pattern-breaking can also lead the user’s eyes away from other important things. Before you can break a pattern, you have to make one.

54. Line Tension and Edge Tension

  • 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.
  • Edge Tension: 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.

55. Alignment and Proximity

  • Alignment: Different levels of content can be aligned. Information can be in a grid of rows and columns like a spreadsheet to create complex meaning.
  • Proximity
    • The closeness or distance between two objects creates a feeling of those objects being related or unrelated. That distance is called proximity.
    • In your designs, put related elements closer together and unrelated elements farther apart.

56. Using Motion for UX

  • If Motion Makes People Wait, It’s Bad
  • If you made a list of the things your brain notices, in order of priority, motion would be first.
  • If you are using motion to highlight key features or tell users where to go, straight lines are a good choice.
  • Curved lines make people follow the curve - Like when you’re explaining your app for the first time.

IX Wireframes and Prototypes

What is a Wireframe?

  • A wireframe is a technical document. Lines, boxes, labels. Maybe a color or two.

What isn’t a Wireframe?

  • A wireframe is a planning document. It is a technical instruction document for the “builders.”
  • Top 5 unforgivable (!) wireframe sins:
    1. Wireframes are not a basic sketch: Explain early concepts/thoughts in words and pictures, not with wireframes.
    2. Good wireframes take time: Wireframes are 90% thinking, 10% drawing. Make sure everyone respects the need for the 90% part.
    3. Wireframes aren’t presented in phases: Everything made by humans goes through “drafts” as we perfect our ideas, but wireframes are either ready or they’re not.
    4. Wireframes should be taken seriously: Plan enough time for wireframes—especially in large projects. Label and describe (i.e., annotate) each element of each page so a developer never has to ask you what a button is supposed to do.
    5. Wireframes are not meant for display.

59. Learn Skills, Not Tools

  • Find and use the simplest tool that can handle the project and make files that your team can share easily and cheaply.
  • Always design what you want first, and then use wireframes to make it into a technical document.
  • My first recommendation to all new UX designers is to use a pencil and paper for wireframing until you need to be so specific and technically accurate that something digital is required.

60. Avoid Convenient Examples

  • In my experience, conversations about UX design focus on the way you want users to use your stuff, not the way they could use it. That’s dangerous.

61. What is a Design Pattern ?

  • A design is not necessarily good just because it’s common. To be a “good” design pattern, a solution must be common and usable.

62. Z-Pattern, F-Pattern, Visual Hierarchy

  • It is easy to imagine every user excitedly reading every letter you write and every pixel you make. Get over it, because real users won’t. They scan.
  • “Scanning” means the user only stops to read when something catches their eye. This lesson is about scanning patterns.
  • In a design like that—which I hope you never create—users will generally scan it in a pattern something like a “Z,” starting in the upper left and ending in the lower right. Anything in the layout that isn’t near the Z probably won’t be noticed.
  • The F-Pattern works like this:
    1. Start in the upper-left corner, like the Z-Pattern.
    2. Read/scan the first (head)line of the text.
    3. Scan down the left side of the column until you ind something interesting.
    4. Read the interesting thing more carefully.
    5. Continue scanning down.
    6. By repeating that method over and over, the scanning pattern starts to look like an “E” or an “F,” hence the name.
  • A button in the upper left will get more clicks than a button in the upper right, which will get more clicks than a button in the lower left, which will get more clicks than a button in the lower right. And all of those will get more clicks than something randomly stuck in the middle, unless you do something about it.
  • 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.

63. Layout: Page Framework

  • Start with the big parts, then ill in the details.
  • 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.
  • Navigation:
    • Main Meu: If you did your information architecture properly, then you already know what should be in the main menu. It’s the first level of links in your site map (below the home page).
    • Submenu: The main thing with the submenu is that it should ideally be in the same place on every page, even if the links change all the time. That way, users will quickly learn where to ind it.
  • Everything-in-one-menu is the laziest design in the universe.
  • Create navigation and footers that work for all of the pages/ screens in your app before you get into content.

64. Layout: The Fold, Images, and Headlines

  • Give people something to focus on before they scroll.
  • Make it obvious that they can scroll.
  • Choose images that add emotion and direct the user’s eyes.
  • Use headlines to direct users to what matters most.

65. Layout: The Axis of Interaction

  • The axis of interaction is the imaginary “edge” your eye follows naturally. The closer something is to the axis, the more visible it is to the user.

66. Forms

  • The main thing is to make a form feel simple. Keep related questions together; eliminate questions you don’t really need; and use as many pages as you need, no more, no less.
  • Whether you use a standard text field or a super-custom slider, you should choose the input type that gives you the highest quality answers.
  • When you’re labeling your inputs – how else will the user know what to do with them? — be short, clear, legible, and put the labels close to the input.
  • Preventing and Handling Mistakes
    • You can prevent mistakes by adding some intelligence to the inputs.
    • Giving users an example of the input you expect can also reduce errors.
    • When users miss a question or make a mistake, you should alert them so they can ix it.
    • Do not use inline error handling if you can’t verify the input, like when people type their name.
    • When the user clicks “next” or “done,” you can check the form for missed questions or mistakes. If there is a problem, make it visually obvious which ones they missed and why they are wrong.
  • A form with labels that are left-aligned and above the input will get users through it as fast as possible. It keeps everything on the Axis of Interaction.
  • For most forms, put the “done” button on the left, on the Axis of Interaction.

67. Primary and Secondary Buttons

  • As a general guideline, you will need only two button styles:
    1. Primary Actions that are helpful to our goals.
    2. Secondary Actions that are not.
Type Action Style Position
Primary Buttons 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. High contrast compared to the background (very different color or shade). On or near the Axis of Interaction so users notice them first, by reflex.
Secondary Buttons They remove or stop the creation of new things. Those are secondary actions, or things we don’t want the user to do, but we provide the option for the sake of usability. Buttons that execute secondary options—secondary buttons—should be less visible, to prevent accidental or “reflexive” clicks. Low contrast compared to the background (a similar color or shade). Away from the Axis of Interaction so users notice them only when they are looking for them.
  • It is a good idea to give this button a warning color that indicates the importance of the action (red, orange, yellow, etc.).
  • In some cases, you will have one type of action that is unique to your site or app, which requires special focus. Design a special button for this so it stands out in your design (pattern breaking).

68. Adaptive and Responsive Design

  • Adaptive design is really just a couple of different designs.
  • Responsive design is one design that fits all screens.

69. To Design or Redesign?

  • If you don’t know what you’re solving, you don’t know how to solve it. So, first, decide exactly what result you’re aiming for, and think about how far your current design is from doing that.
  • Sometimes doing everything is simpler than doing one thing. When you have a sense of the problem and what it might take to solve that problem, don’t look for the biggest, coolest way to solve it. Look for the minimum number of changes you can make that will get the job done.
  • A new design from scratch takes away all the baggage of the old design, but it means that you have to be more careful about using all of the existing data and managing expectations.
  • Adding features isn’t always the right choice. It is always worth asking yourself if you can solve a problem by taking things away.

70. Touch versus Mouse

  • The Mouse’s Advantages:
    • Small and accurate
    • Ability to hover
    • Selects items easily
    • Hidden options/navigation
    • Can change shape
  • The Finger’s Advantages:
    • Built-in feedback
    • Direct-to-interface
    • Creates a physical orientation
    • Always available
    • Gestures and multitouch
    • Fully trained right out of the box