INTRO (10 min) Welcome to General Pysch 101. My Name is Brent Alexander. Please take out your blue books and the exam will begin in 2 minutes. Just kidding. You are in the right room. You are at WordCamp. Some of you guys just got flashbacks to your college days… And while this isn’t a college classroom, I do want to share with you some principles taken from the world of cognitive psychology and how they relate design. And even how they relate to WordPress websites. And no there won’t be any exam at the end.

Assumptions

  1. You know what UI/UX Design is

  2. You know and use WordPress

  3. You have a general understanding of Psychology

Assumptions I’m going to assume you already know what UI/UX design is. I’m going to assume you know and use WordPress. I’m going to assume you have a general understanding of psychology - the study of the human mind and its behavior. And if you don’t have any of these, then that’s OK too. You will be just fine! There’s nothing high-level about this. Trust me. Now, Most of these principles are common sense. You will hear them and think, well, of course, Brent. And it's very true. If you've been desinging for any sort amount of time, you are more likely than not already practing these things without even knowing why. And you more than likely do not know what these common sense laws are called, why they are important, and the underlying psychological ties. You see, many times as Designers and Creatives we think about the design process backwards. We open up Sketch or Figma, and just start going to town, aiming for that masterful end-result. The pixel-perfect product. We imitate. We copy. We steal. And some of that is okay and fine. I do it. They say the bad artists imitate and the great ones steal (Picasso). But don’t limit your stealing to the end-result.

Start with Why

Start with Why. ### 1 ### - Why do people need this product? - Why does a user go to your website? - Why are people unsatisfied with the experience of your WordPress site? Once you know the answer to those questions you can start asking things like: ### 2 ### - How will people use this product? - How does a user navigate your website? - How are people going to be satisfied with the experience of your WordPress website? And once you can answer those questions, then and only then, you can give definition to the What: ### 3 ### - What is the product going to look like? - What navigation items will there be? - What colors and font faces will I use? - What plugins and themes are you going to use? I think a lot of times we start with these questions first, instead of last, is because the tools are fun. We can get our hands dirty.
And it’s just like being a kid outside jumping through mud puddles in the rain. It’s so. much. fun. Until its not. Until your parents yell at you, you better come back inside boy before i hose you down in the front yard for the whole neighborhood to see.
And you come crashing back into reality.

Strategy > Tools

You see, in the real world, stategy is always going to be more important than tools. When solving problems, the tools you use are never as important as the strategy. Never accept a problem at face value. Instead ask these questions: - Is this the main problem we’re trying to solve? - Is there a problem behind the problem? - Is this the right problem to solve? - What other problems could we solve that would bring more value to our customers than this one?
EXAMPLE - You break down and go to your favorite guilty pleasure. You order a big mac and a side of fries. Jumbo size. Because YOLO. Not even 30 minutes after you cram every last fry inside you, your stomach starts hurting. Bad. Everything on your insides wants to now be on your outsides. What do you do? You take some pills. And hey, what do you know. Not even 15 minutes later, your stomach starts to feels better. Great, problem solved, right? Wrong. Problem patched. Medicine fixes symptoms, not causes. Since only the symptoms were fixed, the root cause of the problem was never diagnosed. Thus, it still existed.
NEXT NEXT NEXT
Quite similarly, clients don’t know what they need. I’m a designer and developer and I don’t even know what tools I need sometimes. How can I even expect trust the client to know exactly what font or colors they need on their website. Don’t take their word for it.

Why Purpose Process Product

Figure out the why. It’s in that order: - Why - the core, the motive, the purpose - How - the journey, process - What - final / end-result, the product It’s only when we understand the why, then we can determine the how, and the how is what gives birth to the what. And that’s why these 10 principles are much more than common sense. They matter because they are at the core of why people do what they do. - Why people think. - Why people act. - Why people love you. - Why people hate you. Applying these 10 principles will change the way people feel about your product, and how people feel about you. And that’s the core of UI/UX design.

Jakob's Law

Jakob Nielsen is a computer scientist and web usability advocate, who coined the term Jakob’s Law. Yep. Made his own law. (Bold and daring - Brent’s Law - All clients must clear the cache before submitting a support ticket).

Jakob's Law

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. ### This Law is not even a future trend since it has been ruling the Web for decades. It has been happening since the dawn of the Internet error. Think the term “shopping cart” and the cart icon. Think blue text links. Your website is going to perform better if you use familiar design patterns. - Placing your navigation at the top of the page. - Utility links (cart, account, profile) in the top right. - Using 3 lines (or a hamburger icon) for a fly-out menu on smaller screen sizes. Many times designers want something wild and different. That is sometimes fine. But think about your audience before doing so.

Von Restorff Effect

Coined by German psychiatrist Hedwig von Restorff. She did an experiment and found that when participants were presented with a list of items, but made one item more distinctive than the rest, the memory for the item was improved.

Von Restorff Effect

The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.

The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. ### This is the main reason we make Calls To Actions look different than the rest of the buttons on a site. Making important information or key actions visually distinctive, will not only help your users remember them, but it will help them notice them in the first place. It will also prime them. There's a pyschology term. Priming is what happens when the implicit (shorterm) memory interacts with an external stimulus. In our case, a visual stimulus — a button. You see the visual stimulus, and it triggers your brain to interact with it. People are lazy. Your user will go down the path of least resistance. Use that to your advantage by making the desired outcome the most noticeable, the most different, and the simplest path to go down.

Serial Position Effect

Speaking of memory, The serial position effect was a term coined by Herman Ebbinghaus. It describes how the position of an item in a sequence affects recall accuracy.

Serial Position Effect

Users have a propensity to best remember the first and last items in a series.

Users have a propensity to best remember the first and last items in a series. ### Place the most important information first, and last. Place the least important information in the middle. This is why in public speaking courses, people are taught to nail the first 30 seconds, and the last 30 seconds. The rest can be terrible. As long as the first 30 seconds grabs your attention, i've got you hooked. And ending the final 30 seconds with a rock-solid close, you're going to remember that. Not the points where I messed up in the middle. That said, we're 15 minutes in you probably forgot that I even just told you there. So the same goes for design. it's important to do start well and finish well. Here's an idea you may have not thought of – Positioning key actions on the far left and far right of navigation elements can increase memorization, and thus, their performance.

Law of Prägnanz

If you have ever study Gestalt theory, you know this one. We prefer things that simple, clear, and ordered. Prägnanz is a German word that means “good figure”, or just “simplicity”. The human eye tends to reduce the complex into simple concepts to decrease cognitive load.

Law of Prägnanz

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.

People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us.
Have you ever seen a movie marquee sign, with the flashing bulbs encircling it? To the observer, it looks like the light is traveling from bulb to bulb as it moves around the marquee. But in reality, it’s a series of buble turning off and on and the lights don’t move at all. How we visually perceive the object is much simpler than what is actually happening. The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information. If we had to think about every single off and on on every single bulb every time we look at the sign, our brains would explode. Brains like shortcuts. How does this apply to UI/UX design? Knowing that people prefer things simple, clear, and ordered, we can reduce complexity in a number of ways: - Take a complicated checkout process and make it a multi-step form. Make it multiple pages to not overwhelm the user. - Reduce the complexity of navigational items by limiting the number of pages in the global navigation and using deeper hierarchy.

Miller's Law

Limiting the number of items is also important because of Miller’s Law. In 1956, George Miller asserted that the span of immediate memory and absolute judgment were both limited to around 7 pieces of information.

Miller's Law

The average person can only keep 7 (plus or minus 2) items in their working memory.

The average person can only keep 7 (plus or minus 2) items in their working memory. ### One of the most common complaints we hear about why clients don’t like their existing website is because there are too many options. Our working memory is limited. As UI/UX designers, we must reduce the number of choices that we are offering. When confronted with too many choices, what happens is what psychologists call decision paralysis. Meaning, there’s so many options, I’m just going to give up, and no decision is actually made. It is important that we minimize the choices the user must make at any given moment, especially in places such as navigation, forms, and drop-downs, all reducing the cognitive load on the user.

Zeigarnik Effect

This one is a fun one to say. Zeigarnik was a Soviet psychologist in the 1920s. She conducted a study on memory in relation to task completion. She concluded that incomplete tasks were easier to remember than completed ones.

Zeigarnik Effect

People remember uncompleted or interrupted tasks better than completed tasks.

Have you ever been on trying to purchase something online putting the items in your cart, filling out all the information, only to get to the end, and the whole site just crashes. You refresh, hoping and praying your information is still there. It’s not. It never is. Users remember uncompleted tasks. This is the whole reasoning behind those pesky red badges on your iphone’s app icons. You know, the one that says 17,483 emails in your inbox. The reason that badge exists is because of Zeigarnik. One practice I do for multi-step processes is I place a progress bar at the top of the page. Doing so increases the likelihood of conversions. People just hate seeing something incomplete. Why not use that do your advantage?

Pareto Principle

Here’s one you all know. The Pareto Principle. Anyone heard of it? (hands) Anyone heard of the 80/20 rule? Yeah, that’s Pareto.

Pareto Principle

For many events, 80% of the effects come from 20% of the causes.

For many events, 80% of the effects come from 20% of the causes. Pareto was an Italian economist who noticed 80% of Italy’s land was owned by 20% of the population. This happens A LOT. - The richest 20% of humans have ~83% of the world’s income. - 20% of patients use 80% of healthcare resources. - In 2002, Microsoft reported that 80% of the errors of Windows crashes were caused by 20% of the bugs detected. It’s a bit uncanny how the world works. The Pareto Rule is everywhere. When designing, spend the majority of the time working on what will bring the most benefit to the most users. Nuances and Edge cases are less important so don’t spend too much time there. For example - Instead of spending 17 hours on tweaking a gallery on an inside page that you know only 10% of your audience is going to see, spend most of your time when designing the home page, the header, and important CTAs. Also, if only a 1% percent of your audience is using Internet Explorer, then don't spend hours trying to make it look idential from Chrome to Explorer. The return is not worth it.

Doherty Threshold

Speaking of time, the Doherty Threshold waits on no one. There's a thresold of time that the brain can wait without it feeling like it's truly waiting.

Doherty Threshold

Productivity soars when a computer and its users interact at a pace (400ms) that ensures that neither has to wait on the other.

400ms. Productivity soars when a computer and its users interact at a pace that ensures that neither has to wait on the other. ### In order to keep a user’s attention, you must provide system feedback within less than half a second. This isn’t so much talking about page load time, although that is connected. This is more so connected to how fast a user expects a result when interacting with a system. I'll give you an example, if we were to flip the light switch in this room... I asked Taylor to assist me in this visual earlier, do you mind just flipping the lights off for me? So you see, immediately as she pressed that off button, the lights faded down like that *snap*. You can bring them back up... Great job! Everbody, give Taylor a hand. The same goes for interacting with websites. When your users click a button to submit a form, the validation on that form should appear in less than 400ms. If it takes longer, than the user’s attention is more likely to be diverted. This is especially telling if you ever have to use a really old, slow computer, after using a much faster one. Your brain has been trained to expect the computer to open applications and execute commands much faster than they actually are happening. What happens when the Doherty threshold is not met is frustration, anger, abandoned carts, unmet conversions; ultimately unhappy customers that are going to go somewhere else.

Hick's Law

Remember Miller’s Law - we can only remember 7 items, this one is similar, but in relation to time.

Hick's Law

The time it takes to make a decision increases with the number and complexity of choices.

The time it takes to make a decision increases with the number and complexity of choices. ### You are costing your users valuable time the more choices you offer them. This is decision paralysis again. Instead, simplify the number of choices. - Eliminate what's unnecessary. - Use chunking to break up complex tasks into smaller tasks. - And avoid overwhelming users by highlighting recommended options.

Postel's Law

Jon Postel was one of the early pioneers of the Internet.

Postel's Law

Be liberal in what you accept, and conservative in what you send.

Be liberal in what you accept, and conservative in what you send. The Law was primarily a design guideline for software, specifically in regards to the transfer of data across computer networks. This is also known as the Robustnuss Principle. What postel was saying was, when a computer program receives input from a user, it should accept any range of input, no matter what it is. But then when the program sends a message to the user, it should be as specific as possible. Why is this important? It's important becuase the way the brain receives feedback. The mind is bound to "What I see is all there is..." So if the feedback isn't clear or accurate, the brain gets confused. This is absolutely applicable to UI design. You must be tolerant to any number of actions a user could possibly take. This is important when testing an application or website. When I run tests, I try to think of the weirdest, most ridiculous ways to break what I just developed. This means accepting variable input from users (especially in forms), and then translating input to meet the requirements. For example, when asking for a phone number, instead of requiring the user to format the phone number in with parenthesis, area codes, and dashes, why not just accept any phone number and then do the validation and formating on the server side. Lastly, sending conservatively means providing clear, concise feedback to the user. For form validation, Instead of sending, "There was an error" or "username or password is invalid". Be more specific in your feedback so the user knows exactly how to fix the error. Having both sides of this law met will result in a website that functions much like a well-tuned machine, firing on all cylinders, and requiring light, easy maintenance. ### Check time - was hoping to keep this around 30 minutes so we have plenty of time for Q&A and break.

Parkinson’s Law

That means we have just enough time for a bonus. Number 11. Parkinson’s Law is a perfect one to end with.

Parkinson’s Law

Any task will inflate until all of the available time is spent.

It states that any task (or WordCamp Talk) will inflate until all of the available time is spent.
In all seriousness, I hope learning these principles has given some insight on why people make the decisions they do. As you can see cognitive load has some of the biggest impact on the decisions we make on the internet. The one commonaility that all these laws have can summed up in 1 word: Simplicity. We must do what we can to eliminate, reduce and simplify. We must find ways of making complex tasks into smaller, simpler tasks. We must leverage common design patterns, and not aim for weird, unusual, and never-before-seen tactics. Applying these principles will change the way people feel about your product. It will change the way people feel about you. And hopefully, for the best.

thank you.

thanks thanks thanks clap clap clap

need moarrr.

iz me

  • @brentalexander

  • @bfa

  • bfa.me

my main gig

  • @engeniusweb

  • engeniusweb.com

Credits

Get Me Dat

Lastly, if this talk wasn’t enough and you wanted even more Brent, feel free to check me out on Twitter, GitHub, and on the web at bfa.me. I occasionally post on Instagram. I’m @brentalexander there as well. ### Big thanks to my boy jon yablonski, at laws of ux, where I got all of these principles from, inclduing the beuaifully designed iconography. there's 8 more principles that I didn't even cover, go check out lawsofux.com for more ux goodness. ### A little more about myself, for those that don’t know me, I make the internets with the awesome people at Engenius. We are a digital marketing agency that aims to demystify digital marketing so you don’t have to. I have a lot of fun designing and developing all sorts of websites, and spend the majority of time solving past present and future problems. At Engenius, pride ourselves on our customer service and dedicated support we offer our clients. I seriously mean that I work with the most kind-hearted, passionate people in the world, and they are serious figuring out the root causes to problems our clients are facing every single day. When I’m not making the internet better, I love going brewery hopping, trying different bourbons, and recently have been doing a little bit of light wood-working. If you want to chat about any of that, i would love to meet you and hang out and buy you a beer. And If you guys could all clear your caches that would make my life easier.

q&a

ask me allzzz the questions plz