Making Your Website Work: UX/UI

Making Your Website Work: UX/UI

by Team Yakkety Yak April 26, 2019

Why you need to think about your user’s experience

Websites have gone through a glow up in the last two decades. Picture yourself circa 2002, just having lived through Y2K. When you used the World Wide Web, websites were text-heavy and lacked engaging design elements, created solely for storing information. Flashforward to the internet of today, where thoughtfully designed and user-friendly websites are everywhere.

The best websites are tailored to meet the needs of their users. User-based website design theories are the standard for web design today. The two prominent theories of website design are User Experience (UX) and User Interface (UI).

Yakkety Yak’s UX/UI designer Cesar Molina covers UX and UI design 101.

What is the difference between UX and UI design?

UX design focuses on making a website easy for users to complete their goals. “UX is a structured approach to website development,” explains Cesar. “The focus is on creating systems for users that are learnable, efficient, memorable, free of errors and satisfying to use.” The idea is that if a user is able to find what they’re looking for easily, they’ll stay on the site longer and, ideally, come back for more.

In contrast with UX design, UI is all about the look and feel of a website. “UI is what people first think of when design is mentioned,” explains Cesar. “It’s made up of the visual and interactive components of a website. These are things like page layout, typography, colors, animations and links.”

How do UX and UI work together?

There are five tenets of UX design:

  1. Learnability – How easy is it for users to accomplish basic tasks the first time?
  2. Efficiency – How quickly can users perform tasks?
  3. Memorability – How easily can users reestablish proficiency?
  4. Errors – How easily can users recover if they make an error?
  5. Satisfaction – How enjoyable is it to use the site?

UX design impacts site usability and layout, which requires you to think about the site interface and design elements. So, it’s important to keep your user’s experience top of mind when designing your website.

Why you need UX and UI:

Designers need to take every detail into account as they create a new website. UX design theory helps designers focus their goals to give users the site they deserve.

UX and UI are connected, and both are necessary for a website’s success. When designers consider both UX and UI, a website will function well and include design elements that give visual interest to each page. In other words, website designers should create websites that work well and look good.

“Designers should be aware that they are designing websites for actual people,” says Cesar. “The solutions we provide should be validated through testing. Because there are processes in UX and UI, we are able to focus our efforts to make the website stronger for the user.”

How to create a website using UX and UI:

1. Research user intent

“First and foremost, designers should know the users,” says Cesar. “Understand their goals and motivations. Ask yourself what you can do to make their experience more fulfilling while achieving your company’s goals.” Define the problem that users come to your site to solve and ask yourself: are they coming to learn, purchase, play or do something else?

2. Problem solve

Understanding the user’s needs will give insight into the next step: solving the user’s problems. Once you understand the problem, you can develop solutions using improved user flow charts or performing card sorts, which involves organizing your site’s content.

3. Design the website

Draft a wireframe website using the information gathered in the previous stages. Wireframes should be the bare-bones version of the site, showing where items are placed and how the user moves from page to page. You’ll also need to consider UI during this step. Determine the colors, typography, images, video, buttons, transitions and other visual aspects of the website.

4. Test and build

Conduct usability tests with people who haven’t been involved in the project to get a fresh perspective. Take careful notes during the tests. How are users moving from one page to the next? Are they struggling to find important information? Is there a way you can shorten the workflow and streamline the user’s experience? Use this information to make changes to your site and voilà! You’ve got a website glow up worthy of before and after pictures.

For more on website design and how to build a stunning site, check out our guide to Web Design 101.

Leave a Reply

Your email address will not be published. Required fields are marked

All Yakkety Yak services are tailored for each of our clients, so please contact us to get started.