A Guide to Good User Experience Design In my ten years of web development and web design, I see people make the same stupid mistakes over and over when it comes to designing websites. Most people think that just because they understand something, that everyone understands it same way they do. But this never the case. EVER! _Someone, somewhere, is not going to understand something the same way as you understand it, no matter how simple or intuitive something may seem to you, it will not make sense to someone else, and there is nothing any of us can do about it. You have to accept this, understand it, and move on knowing this._ Important: It is critical that you understand what I just said to be successful in pretty much anything you do, but most importantly design and user experience. These people are the lowest common denominator. Which means, just like adding fractions we need to break it down before we add it all together. I want you to read that again. I have lived by and it as made be very successful as a web developer, a designer, and pretty much everything else I’ve done. one simple rule, “People are dumb and should be treated like morons” If you don’t want a user to think something, you better clarify, because someone is going to think it. If you don’t want a user to click something, you better hide it or disable, because some moron is going to click it no matter what it says it does. Keep it simple, keep it stupid! Just because something makes sense to you doesn’t mean it makes sense to everyone else, and it is better to error on the side of than leaving important gaps because you assumed everyone understood something. over clarification Think about, for instance, reading the rules to a board game, and they tell you that you can spend the red tokens as health. But, as you look at everything in the game you realize that there a 3 different red tokens and the rules never clarify which red tokens to use. It’s probably the ones with the cross on it, but who knows! I didn’t create the game. This kind of crap happens all the time, everywhere! And if people would just get out of their own heads for a minute, stop making assumptions based on logic we could solve a lot of problems. Most people, even the smart ones can lack the ability to think logically, if not all the times, then at least sometimes. It is our jobs as developers and user experience designers to try to make things so simple, so intuitive, that anyone, of any age, of any intelligence can figure it out. Just ask yourself, . And still even then. would my Grandma understand this I have worked with a lot of people over the years that struggle with this concept, and the crappy part is, these are usually the people that don’t think the same way as everyone else. I often refer to this as the , when someone is so smart they are stubborn and overly logical to a fault. Anyone that has worked in IT for over a year knows who I’m talking about, and if you don’t there is a good chance it’s you, case and point, so keep reading. Curse of Intelligence “When I think of design and creating great user experiences, I generally think of it in terms of three things: usability, utility and desirability.” — Jon Wiley, Google 10 User Interface Design Guidelines . Visibility of system status Users should always be informed of system operations with easy to understand and highly visible status displayed on the screen within a reasonable amount of time. If a page, or a section on a page, is loading data, show the user a loading icon. Don’t wait for your page to load before taking the user to that page. This creates delays and makes the user feel like the site is broken. People are impatient and need instant feedback. Example: . Match between system and the real world Designers should endeavor to mirror the language and concepts users would find in the real world based on who their target users are. Presenting information in logical order and piggybacking on user’s expectations derived from their real-world experiences will reduce cognitive strain and make systems easier to use. : You wouldn’t make your user fill out his credit card information shopping on your online store. You also probably aren’t going to make their cart their default homepage. Because thats not how people shop. You go to a store, look at products, fill your cart, then check out. Your users experiences should mirror that. Example before . User control and freedom Offer users a digital space where backward steps are possible, including undoing and redoing previous actions. My god, we have all used these sites before. You get halfway through filling out some forms and you realize you $#@!ed up. To bad, can go back, got to start all over. Yeah… Don’t do that. Example: . Consistency and standards Interface designers should ensure that both the graphic elements and terminology are maintained across similar platforms. For example, an icon that represents one category or concept should not represent a different concept when used on a different screen. Holy crap, this is probably the most abused rule. Learn More, Read More, Read, View More, View, More… PICK ONE!!! They are all the same thing really! Close, Cancel, Finished, Done, X… Yes, sometimes it makes sense to have different ones like and Close and Cancel. Just stay consistent with you use Close and Cancel. And, if close is a red button with an X one page it better not be a green button with check on another page. Example: how . Error prevention Whenever possible, design systems so that potential errors are kept to a minimum. Users do not like being called upon to detect and remedy problems, which may on occasion be beyond their level of expertise. Eliminating or flagging actions that may result in errors are two possible means of achieving error prevention. Try not to show users errors unless there is a way that the user can fix it, and make that way clear and simple. If your user is filling out a form, and certain data is requires or must be in a specific format, don’t let them submit the form without first filling out that data. If your user doesn’t have access to a certain page or action, hide it so they don’t receive an error when they click on it or try to visit that page. Example: Recognition rather than recall. Minimize by maintaining task-relevant information within the display while users explore the interface. Human attention is limited and we are only capable of maintaining around five items in our short-term memory at one time. Due to the limitations of short-term memory, designers should ensure users can simply employ recognition instead of recalling information across parts of the dialogue. Recognizing something is always easier than recall because recognition involves perceiving cues that help us reach into our vast memory and allowing relevant information to surface. For example, we often find the format of multiple choice questions easier than short answer questions on a because it only requires us to recognize the answer rather than recall it from our memory. cognitive load test Say you want to have a short survey after users checkout from your online store, while be it annoying no one is ever actually going to fill it out. Instead of requiring your users to describe their experience in text box, present them with multiple choices like; Great, Good, Poopy, Horrific, and then give them the to express why they felt that way, even though they will never fill it out. Also helpful, if your survey has multiple pages, and you want to reference something from a previous question, include some blurb about that question and their answer on that page the user is currently on. That way the user knows what you’re asking them… even though that are never going to fill it out (-_-) Example: option . Flexibility and efficiency of use With increased use comes the demand for less interactions that allow faster . This can be achieved by using abbreviations, function keys, hidden commands and macro facilities. Users should be able to customize or tailor the interface to suit their needs so that frequent actions can be achieved through more convenient means. navigation Medium has a great example of hidden commands. If you are writing an article in Medium and you press [Command]+[ / ] it will open the Keyboard Shortcuts menu on in your browser. Its not customizable a but it’s really easy to get to and find a helpful shortcut key. Example: . Aesthetic and minimalist design Keep clutter to a minimum. All unnecessary information competes for the user’s limited attentional resources, which could inhibit user’s memory retrieval of relevant information. Therefore, the display must be reduced to only the necessary components for the current tasks, whilst providing clearly visible and unambiguous means of navigating to other content. Cut the annoying intrusive ads that are littered all over your web pages. I know, that’s how you make money but mother of god, does anyone actually click on those things on purpose. Medium is another great example of clean minimal user interface. Nothing to distract the users from the stories being told. Sometimes less is more. Example: . Help users recognize, diagnose and recover from errors Designers should assume users are unable to understand technical terminology, therefore, error messages should almost always be expressed in plain language to ensure nothing gets lost in translation. I have already hit on this point but the bigger take away here is to speak in plain english — or what ever native language your site is in. An error read something like “Our servers were unable to authenticate your identity token”, it just be “Login Failed”… because, that’s what it is. Keep it simple, keep it stupid. Remember, people are dumb, even if your site is something like technical documentation for debugging a supercomputer and the only people ever to read it are computer scientists. Don’t assume they know what you’re talking about, because like I said before, someone won’t understand. Example: shouldn’t should . Help and documentation Ideally, we want users to navigate the system without having to resort to documentation. However, depending on the type of solution, documentation may be necessary. When users require help, ensure it is easily located, specific to the task at hand and worded in a way that will guide them through the necessary steps towards a solution to the issue they are facing. Sometimes shits complicated, and in those instances we might need to help the user. If you can, give them a tooltip pop-up. If it needs more explanation then a tooltip can provide, then create some sort of documentation page. But above all make both tips and/or the documentation . Example: follow all of the above rules Final Thought A users experience shouldn’t be like an episode of Lost where the user is left with more $#@!ing questions and no $#@!ing answers. Assume people have no clue what you are talking about no matter how obvious something actually is. Remember to think to yourself, will my grandma understand this. Source
