A UX design guide is a valuable tool for creating the most amazing experience for your site visitors imaginable. User experience (UX) is just what it sounds like — the way your design comes together and creates what the user experiences on your website. However, UX covers far more than a few elements. It takes into account every aspect of your site, from speed to content to navigation and more. Recent studies show good UX design increases conversion rates as much as 400 percent.
The experience of those who visit your site is about more than just making a good impression. This also impacts the profitability of your company. You must understand the ways customers interact with your site and what they want out of it. A strong user-centered experience flows naturally from one element to the next. It happens in a way that requires little thought from site visitors. Good UX never gives the user a moment to think they might want to leave your site or check out a competitor.
History of UX Design
Some experts argue that the basics of UX design date back to 4000 B.C. and point to practices such as ancient Feng Shui. Creating harmony and ease-of-use isn’t a new endeavor. We’ve just taken the principles and added them to the digital medium. User experience from a branding standpoint has been around as long as people have owned businesses and worried about how to gain and keep customers.
However, the actual term “user experience” was put together in 1993 when Don Normal talked about it at Apple Computer. Other experts point out that user-centered design has been around longer than the internet. Bell Labs hired a psychologist to design telephone systems in 1945 and came up with a touchtone keypad. We still use a touch keypad design today, even on smartphones, so getting the UX of the design perfect has had an impact for 74 years and counting.
By 2050, the number of people working in the UX field will grow 100 percent. Whether you think the field of UX is fairly new or you believe it’s been around since ancient times, knowing what it is and when to use it is vital to successful websites. This UX design guide explores elements such as the importance of understanding UX in design work and the different components making up a robust user-centered design.
UX Versus UI
People sometimes grow confused over the difference between UX and UI. The two work closely together in creating the UX of your site. Designers often find they’re expected to understand both UX and UI fully. However, UX is not the same as UI. Here are the differences:
- UI, user interface, is the overall function of a website. If a user engages with your site, they do so via some type of device, such as a touch screen. The UI is the way the user interacts with your site and how seamless that interaction is.
- UX, user experience, is a way of designing that focuses on the needs of the user. UX is relatively complex, but in a nutshell, focuses on everything from the contrast between colors to where items are located to ensuring interactive elements are clickable.
We may use both the terms UX and UI throughout this guide, but the focus is as a UX design guide. You could say UX is simply refining UI and making the site as usable as possible. You can have a user interface without a good UX, but why would you want to? They work together, and both need perfecting to meet users’ needs. UX in design work drives consumers toward engaging with your brand.
Eight Basic Elements of Good UX
Good UX may vary in the look of a website or even the features offered, but eight basic elements make a site stand out as more usable than others.
- Good hierarchy: Your site’s architecture needs to make sense. Think about what your main categories are and what goes under them in a logical procession.
- Beautiful design: The aesthetics of your site should make an excellent first impression on visitors. The colors should complement one another, be easy to read and provide the right level of contrast.
- Clear CTAs: Clear calls to action guide site visitors through a sales funnel. CTAs should be easy to locate and actionable.
- Site consistency: Your website should be predictable throughout. If you place your navigation bar just under the header on your home page, put it in the same spot on every page on your site. If your logo is clickable on one page, make it clickable on the others. Keep things consistent, so users know what to expect.
- Minimal clutter: Keep your page minimal and uncluttered, so users quickly and easily find the elements they need. Your landing page doesn’t need to be everything to everyone.
- Clear purpose: Your site needs a clear focus and outline of your unique selling proposition (USP). Don’t make visitors guess what the purpose of your page is.
- Breakdown of complex data: One of the goals of good UX is taking complex ideas and breaking them down into terms and examples users easily understand. Good UX looks at content, graphics and data visualizations and ties it all up in a neat bow that tells a story.
- Accessibility: UX designers consider who the target audience is and what devices they might access the site through. Accessibility includes offering the capability for voice search and usage on mobile devices.
UX designers consider dozens of different elements when working on a website. The eight listed above are some of the more popular, but the list is expansive enough to include many others.
Tools for UX Designers
In this guide, we’ll explore some of the best tools for UX design. Before you publish, you want to make sure the site runs at optimal efficiency. Accomplish this by creating prototypes and getting feedback from your client. A business owner knows their customers much better than you do. Listen to their input about what their customers want. You’ll also need to test every element on your pages.
Multivariate testing lets you test a bunch of different elements at once and see which ones visitors respond to best. On the other hand, you may want to see if people click on a red call to action (CTA) button more often than a green one. Use A/B testing to ascertain what’s best between two choices. You should also poll users and see what they like and don’t like. You are an expert on how to present the design and get the coding in place. The customer knows what they like and don’t like.
The most beautiful design in the world isn’t much use if it doesn’t meet the expectations of your user. You must know what their intent is for visiting your site in the first place and then meet their needs.
Map Out User Scenarios
Before you learn about UX design elements, you must get to know the audience for which you’re creating material. If you don’t already have buyer personas, develop them based on the customer profiles in the company’s databases. Who is the typical buyer? Dig out demographic details such as age, gender, career, where they live and how much money they make. Next, look at their behaviors and the things driving them to take action. You should understand their emotions. Take your buyer personas and map out scenarios. For example:
- “My name is John Doe. I am a 30-something businessman with a wife, kids and a successful white-collar career.”
- “I searched for information on installing an alarm system because I want to keep my family safe. I’m concerned about some recent local break-ins.”
- “I travel frequently and I need a full solution to my problem of keeping my home safe from burglars.”
With the information above, you should be able to very easily create a page answering John’s questions that taps into his emotional pain points. John is worried about his family’s safety, so let him know you understand his fear and have a solution. At the core of UX is knowing who your customer is and what drives them. All the concepts within this guide tie into who your user is, so spend time on your buyer personas first and foremost.
UX Design Guide Series Focus
The user’s experience comes from many different elements. Think about the last time you visited the website of a large corporation. Factors such as the color choices, where the navigation bar sat and how the content all came into play as you moved through the site affected your experience.
UX starts with first impressions before your brain even has time to process the content on the page. It encompasses everything from the aesthetics of the site to the placement of objects. If you visit Walmart’s website, you’ll note it loads at lightning speed.
As a user, you may not even realize this is part of your experience. Not to mention how it impacts the way you see the brand. Other elements your mind registers in a split second include where navigation is — hamburger menu in the upper left — and big images of modern designs for your home. Your first impression is formed of a professional, easy-to-navigate site, and you then dig further. While the speed of loading is only one element of UX design, it illustrates why every piece of the puzzle matters. If a website fails to load quickly, the user may bounce away. At any point in the design process, a user may feel disengaged and leave your site.
The UX Design Guide
In this UX design guide, each chapter covers a different aspect of enhancing the UX of your website and improving your knowledge for better customer retention and conversion. We’ll dig deeper into what UX and UI design are, the UX process, laws about UX, basic user-based design principles, and testing and refining your website for the highest conversions and engagement possible.
You’ll learn what we think are the absolute best tools and tips for UX designers. One of the best ways to learn good UX design is by looking at examples and studying how other brands accomplish excellent UX. We’ll also delve into case studies showing you exactly what you need to improve user experience. Mobile browsing traffic increases every year, so we take a careful look at mobile UX and the importance of interface in relation to how well people respond via smartphones. We also do a deep dive into all the concepts you need to know to become adept at UX design.
CHAPTER 1: The Top Front-End Technologies for UX Designers
The UX Design Guide for All Levels: Introduction
Chapter 1: The Top Front End Technologies for UX Designers
Chapter 2: What is the Difference Between UX and UI?
Chapter 3: The Laws of UX
Chapter 4: Why Mobile UX Matters
Chapter 5: What Is the UX Process?
Chapter 6: Why User Experience Design Is Essential to Everything
Chapter 7: What Is Lean UX?
Chapter 8: The Top UX Design Principles
Chapter 9: The Best UX Tools and Techniques
Chapter 10: How to Become a UX Designer
Chapter 11: Top Mobile UX Design Principles to Remember
Chapter 12: Dark Patterns: The Trickery Behind These Poor UI Tactics
Chapter 13: What Does Good Customer Experience Look Like?
Chapter 14: The Different Types of User Interface
Chapter 15: The Top UX Design Courses
Chapter 16: Skills Needed to Become a Great UI Developer
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.