Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience

11 Ways to Improve Your Website’s User Experience​

If designing a website weren’t difficult enough, then designing a website that looks good and is easy to use might prove to be even more challenging. Fortunately, there are several ways to instantly improve your website’s user experience. Below are 11 UX tips for your next website redesign ranked from quickest to hardest to implement.

11 Actionable UX Tips for Your Website

1. Review your content

Read the content on your website. Does it make sense? Are you using industry or (worse) internal jargon the average user wouldn’t know? Make sure your content is easy to understand for your users. This begins with using terms they use to describe the services or products you offer.

2. Use headings and chunk content

Break up your content with headings and visuals. Blocks of text are uninviting and reduce readability. Using headings to divide your content into digestible chunks not only caters to users who skim, but those headings are also great for SEO. Images and videos are another great way to break up content so long as they are high quality and relevant.

3. Use one color for call-to-actions (CTAs)

Limit your website’s color palette to two to three colors—with the third color being your accent color that should be reserved for actions. Make your CTA buttons and links the same color to help users distinguish between clickable and static text.

4. Create contrast

Create contrast between your foreground (text) and background colors. There are other ways to make your website modern than making your content illegible. You should aim for a contrast ratio of 4.5:1 per Web Content Accessibility Guidelines (WCAG) 2.0. For more ways to make your website accessible, check out their recommendations here.

5. Have a clear navigation

Make your navigation visible and clear. Users will land on your website from various sources—from a social media post to a search engine results page. A navigation that includes the most important pages on your website helps users orient themselves, eliminating confusion. Plus, a well designed navigation can prompt them to explore your website, increasing dwell time and potential to buy.

6. Make your contact information global

Keep your contact information visible at all times. This can be quickly achieved by placing your phone number, email, and address in either the header or footer. These sections of your website are global elements that should be located in their respective areas on every page. Users may want to contact you at anytime during their experience, so make that information easily discoverable.

7. Leverage the upper right corner

Websites serve a purpose. Your users are visiting your website to complete a task whether it’s contacting you, signing up, or logging into their account. Elements in the upper right corner make for easier targets compared to elements positioned in the middle of the screen. In addition, since it’s a common design pattern, your users will know where to look to find those functions.

8. Speed up your website

Your website has three seconds to load before users leave. Compressing your images is an easy way to increase the speed of your website. My favorite tool to compress images is ImageOptim. After optimizing images for SEO in Photoshop, I drag my photos into the tool and it compresses the images while keeping the metadata intact.

Aside from image optimization, Google PageSpeed Insights is a free online tool that identifies areas of your website that could be better optimized for speed. Just enter your website’s URL and a report will be generated for you.

9. Make your website mobile responsive

There is absolutely no reason for your website to not be mobile responsive. There are frameworks that are already mobile responsive, such as Bootstrap. Content management systems, such as WordPress, also have mobile responsiveness built into their free templates. With so many devices to access your website, make sure it looks good regardless of screen size.

10. Provide system feedback

Always let your users know what’s going on. Users perform various tasks on your website, such as submitting a contact form or filtering products. They don’t know whether or not your system is registering their actions unless you tell them. Show a progress bar, loading spinner, or change in button color to reassure users their input is being recorded. Providing instant system feedback instills trust in your users, especially first-time visitors.

11. Listen to your users

Finally, one sure-fire way to make a website easy to use is by giving your users what they want. Why spend time thinking of what would improve your website’s UX when you could ask those visiting your site themselves? Ask your users for their feedback to understand what isn’t making sense to them, where they are struggling with, and how you can improve their experience. Listening to users is at the core of user experience design, and should be the first source of information before starting a redesign project.

Implementing these tips can instantly improve your website’s UX, but you shouldn’t stop here. Investing in professional UX design services can benefit you more than a faster website or longer page time—it can save you resources, development costs, and headache in the long run. If you find your users still struggling after following the above tips, it may be time to reconsider your design strategy.

Troika Dashboard

Troika Dashboard Design

UX Design / UI Design / Mobile App

Troika Dashboard Design​

Troika Dashboard

Troika is a well-known brand experience agency in Los Angeles. In my role as designer, I provided UX/UI services to support their product Fandom Connect. With some guidance from the Troika team, I designed the admin dashboard as well as the mobile mockup.

Process

  • Requirements gathering
  • Sketches
  • Wireframes
  • Prototypes

Challenge

The challenge was to create a user-friendly dashboard their clients can easily understand and use. The dashboard was to take on both the Fandom Connect and Troika branding.

Process

As with all of my projects, I first sought to understand the product’s goal. The goal was to provide clients with brand programming and content during a sports game.

Design

From there, I designed the following pages:

  • Admin dashboard
  • Admin – layout uploader
  • Admin – carousel uploader
  • Admin – menu setting
  • Admin – social uploader
  • Admin – engage uploader
  • Homepage/landing page

Admin dashboard

One of the design requirements for this product was to have a preview panel on the right side of the screen. Any changes made to the homepage (consumer-facing page) in the dashboard would be reflected in real-time in this panel.

Admin carousel uploader

I made the center of this page a drag-and-drop area, allowing users to easily upload images. They can switch between media uploaders by selecting “Images” or “Video” on the left side of the main content area.

Image Carousel Uploader

Carousel Uploader List

Admin menu setting

Pairs of upward and downward arrows allow users to move a navigation item between positions.

Admin Menu UI

Mobile mockup

Below is an example of how the final homepage would appear on mobile.

Fandom Connect Mobile

Result

The result is a simple-to-use dashboard that matches the look and feel of Fandom Connect as well as Troika’s brand. If the scope extended beyond the deliverables, I’d be interested in testing the prototypes with users and collaborating with programmers to ensure the designs are feasible.

“Rachel helped us on a project that required UX/UI expertise. Even though it was a short period of time, she understood our need, the request we were asking for in our brief, and asked great questions that helped move the design process along! She also delivered rough drafts and final edits on our timetable. It was great working with her!” – Jaja Hsu, Associate Producer

MBA Portal Design

MBA Portal Design

UX Design / UI Design / Design System

MBA Portal Design

MBA Portal Design

Due to the nature of this work, designs are not shown below.

FCTI operates a network of multi-bank ATMs (MBAs) that provide cardholders of small banks and credit unions access to their accounts. On these ATMs, partners also have the option to run campaigns or display advertisements. Creating these campaigns, however, was a manual and time-consuming process. Seeking a way to automate the campaign creation process, they hired me as their first UX/UI Designer to design the end-to-end user experience of the MBA Portal.

Process

  • Requirements gathering
  • Information architecture
  • Sketches
  • Wireframes
  • Prototypes
  • Design system

Requirements gathering

After interviewing stakeholders and internal team members, the objective of the portal boiled down to two tasks: 1) Provide users a self-serve platform to submit their campaigns and 2) Allow FCTI to review campaign submissions. The portal was to be simple and straightforward enough for their wide range of users.

Requirements Gathering

A picture worth too many words

User research and internal interviews revealed graphics to be the biggest pain point for both personas. To address this, I designed several reminders in the Content step of the multi-page campaign creation flow. Placeholders are thumbnail versions of the actual graphic size and orientation, providing a visual cue to partners. Size dimensions are explicitly written beneath each label. As an extra layer of prevention, I suggested the system reject graphics that don’t meet the dimension requirements and trigger an error message to users if unqualified graphics are still uploaded.

Wireframe Examples

Scalable design

As part of the project, I supplied a style guide for this new product. Using the marketing website as a base, I extended beyond its colors and components to develop a scalable style guide for the MBA Portal.

Scalable Design System

Result

After several sessions of usability tests and design iterations later, I delivered high-fidelity mockups of the MBA Portal. FCTI regains the hours previously lost to submitting campaigns on behalf of partners. In addition, users are given more control over the campaign creation process and have more insight on when their campaigns will be reviewed and published. The result is increased operational efficiency, higher ratio of correct graphics being submitted, and more satisfied partners.

Portal Design Result

Contact Form Design

Contact Form Redesign

UX Design / Marketing Design / WordPress

Contact Form Redesign​

Contact Form Design

I led a responsive redesign of the contact form task flow for Animal Behavior College. A major source of their student enrollments comes from users filling out the contact form. I worked with stakeholders and programmers and used user data to design their contact form process to be responsive.

Process

  • Design review
  • Stakeholder interviews
  • Conversion rate optimization
  • Wireframes
  • Content writing

Background

The process of getting their information is split into two contact forms or screens.

The process begins with the first contact form. After users fill it out, they’re taken to another page with a second contact form. Any input on this page is optional. However, as an incentive for users to submit this second form, this page says it will check whether or not there is an externship location in their area.

If the zip code is valid, they’re taken to the second (and final) Thank You page. If the zip code is invalid, users are directed to an error page where they can try again.

Contact Form Flow Chart

Challenge

An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. Also included was their redesign of the first contact form. They didn’t include annotations, so the challenge was designing contact forms and Thank You pages that were in line with their design, but also met business goals.

Process

The first step was to take their design of the first contact form and improve on it based on stakeholder preference and usability. Their design had a couple of usability issues. First, the proximity between the radio buttons was too narrow. The form displayed radio button options on a single line. Not only does this decrease the tap target size of each option, but also the burden was then on the user to accurately select his desired option on his mobile device.

The second issue were the field names. While having field names within the field makes for a shorter form and cleaner look, it can become a frustrating experience for the user. When field names are within the field where placeholder text would be, they disappear upon selection of the field. This may lead users to forget the information they should enter and potentially leave the form altogether.

Working off of the agency’s mockup, I created wireframes for the:

  • First contact form
  • Second contact form
  • First Thank You page
  • Invalid zip code page

 

First contact form

Aside from displaying the radio buttons vertically and moving the field names above the fields, I also designed one field per line as opposed to having two fields on the same line. I did this to help make filling out the fields easier for users on mobile. I also changed “What program interests you most?” to “Which program interests you most” for grammatical purposes.

Contact Form Iterations

Second contact form and first Thank You page

The existing second contact form included some text I felt were unnecessary. For example, above the fields read: “Please fill in the fields below.” Another bit of unnecessary microcopy was the “Almost Done!” text after the Country field.

I removed these from my wire and instead wrote “Meanwhile, see if we have a location near you by telling us a little more about yourself” above the second form.

From past experience with this company, I knew the original microcopy was added to get users to fill out the form, so I reworded it and placed it outside of the form on top.

I also switched the red font color to the brand’s navy blue color because users might mistake the red text for an error message.

Previous First Thank You Page

Thank You Page Design

Second Thank You page

If users enter a valid zip code into the second form, they’re directed to this page. This one needed the most improvement because it was the final page in the taskflow and a great opportunity to improve the conversion rate.

Old Second Thank You Page

The existing second Thank You page read “Congratulations! We have locations that provide hands-on training for ABC students residing in zip code _____.” Then, in red again, “Please contact us at (800) 795-3294.”

After users get to this page, they receive a call from the company. To help prepare them for the conversation, stakeholders suggested creating a list of topics users should discuss with the Admissions Counselors. They had brainstormed other ideas, but nothing was ever set in place.

I looked at their list of ideas, selected the ones I felt would be best for conversions and provide value to users, and included my own ideas. For the second Thank You page, I:

  • Wrote new copy
  • Added a click-to-call phone number
  • Made a bullet point list of topics the user should discuss
  • Selected an image
  • Added a few testimonials
  • Added social media buttons
  • Included a carousel of student images

The result was a content-rich Thank You page designed to keep the user engaged and excited about his chosen course.

New Second Thank You Page

Invalid zip code page

If users enter an invalid zip code on the second contact form, they’re directed to this page. For this wire, I edited the copy to have a warmer, human-like voice. The existing error page read: “I am sorry the zip code you have entered is not valid or is currently not in our database. Please try again.” I changed that to “Unfortunately, we don’t have externship locations for students residing in _____.” I mentioned externship locations to remind the user why he had entered his zip code in the first place.

 

Review

From my wires, the graphic designer made mockups, which we presented for review. Stakeholders preferred to preserve the colors of the original forms (i.e. yellow top bar and red button). They also wanted to keep most of the original copy on the first Thank You page and invalid zip code error page.

The second Thank You page was completely approved. However, they requested a few more changes to our mockups.

After a few iterations, we had our final designs.

Design Iterations

In the beginning of this process, I had originally suggested having an inline error message on both contact forms. Rather than the user selecting the button and then seeing error messages for either missing fields or invalid data entries afterwards, I suggested having a tooltip display during the form filling process.

This would help users fill out or correct any fields on the spot, which may reduce the time it takes for them to fill out the form. Furthermore, this feature would eliminate the need for an invalid zip code error page.

I had presented a wireframe for this tooltip as well as a video demonstrating the behavior of the tooltip to the developer and stakeholder. While the idea was approved, it didn’t make it in the final design due to programming issues.

Result

With a contact form that is responsive on all devices, users have an easier time filling out the form, which increases the potential for more enrollments.

Contact Form Responsive Design

Epiphone Ecommerce Design

Epiphone Ecommerce Design

Web Design / Mobile Responsive / Landing Page

Epiphone Ecommerce Design​

Epiphone Ecommerce Design

Epiphone is an American musical instrument manufacturer known for their acoustic and electric guitars. Their website was dated and due for a modern upgrade. For this ecommerce design, I focused on redesigning the ecommerce grid and product detail pages with consideration to mobile responsiveness and usability.

Process

  • Heuristic evaluation
  • Competitive analysis
  • Sketches
  • Wireframes
  • Prototypes

Filters, no fillers

An important feature of any ecommerce site is the ability to filter products to avoid decision fatigue. After reviewing Epiphone’s current products and conducting competitive analysis, I designed a filter for the ecommerce grid page. Filter options include the product type, brand, and price. Set to “Featured” products by default, the sort feature allows users to view the latest products or products in ascending or descending order of price.

Ecommerce Grid UI Design

Taking center stage

The product detail page gives each guitar the stage it demands. A bold hero sparks interest and a balance between words and imagery, modern layout, and smart use of trendy UI elements pull the user further down the page. Paragraphs accompanied with bulleted summaries aid with skimming and paginated reviews save vertical real estate.

Ecommerce Landing Page Design

Result

Modern and mobile responsive, this ecommerce design concept for Epiphone highlights the qualities of its products and makes it easier for users to find the perfect guitar for their musical needs.

UX Working With Marketing

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts

How UX Can Amplify Your Digital Marketing Efforts​

Looking to boost sales? Are your digital marketing efforts not working? You may need to take a deep look at your product or service and optimize its user experience.

User experience refers to the overall experience your customer has during their interaction with your product or service. UX encompasses a person’s emotions, attitudes, and opinions about her experience using your website or app.

Web Designer vs. UX/UI Designer

Unlike a traditional web designer, a UX/UI designer identifies the problem and takes a user-centered approach to solve it. The UX design process includes: talking to customers, using research to inform decisions, testing and iterating designs, and ensuring business requirements are met and technical constraints are considered to produce a win-win solution for everyone.

What Does UX Design Have to Do With Marketing?

You might be asking, “What does UX design have to do with marketing?” It’s simple. The goal of UX design is to design products that make your customers happy. What makes them happy? Intuitive interfaces that help them accomplish their tasks. It also helps if the interface is easy on the eyes and maybe even delightful to use.

One way to think of UX is Yelp. Companies with a good Yelp rating often reflect positive user experience and, conversely, those with a bad Yelp rating reflect a negative one. No amount of marketing can turn those negative reviews into positive ones. Those customers have already had first-hand experience with a company’s offering. If that’s the case for you, it’s time to step back and understand how you can improve their experiences.

Why are your customers hesitant to purchase? What is preventing them from submitting a contact form? Getting to the root of the problem—why your customers are frustrated—will guide you to the solution. Perhaps you had too many competing CTAs on your landing page or your error messages weren’t specific enough. Listening to your customers and providing solutions to their problems set your business up for success. Designing a website, app, or product from a usability standpoint lets users know you care to address their pain points and goals and that your product or service can meet their needs.

UX Working With Marketing

Marketing is great at driving traffic to your website and conversion rate optimization (CRO) excels in closing those leads into sales, but both of these tactics end there. They don’t take into consideration what happens to users after they become customers. UX bridges this gap and delivers on what you’re promising in your marketing campaigns.

When you invest time improving the product or service you’re marketing, you’re giving a reason for your customers to talk positively about you. Given that people are 4 times more likely to buy when referred by friends, these word-of-mouth recommendations can cut your marketing spend and increase customer retention.

UX is an important part of your digital marketing strategy. Aside from creating an inherently marketable website or app, it can also positively impact the rest of your organization, including your customer service and engineering teams. Before spending another dollar on a paid ad or commercial, look internally at your product or service. It may be time for an update.

Legacy System Modernization

6 Signs Your Legacy System Needs Modernization

6 Signs Your Legacy System Needs Modernization

Legacy System Modernization

Company websites are often the top priority when it comes to modernizing a brand, leaving the legacy systems that support those websites behind. A legacy system is a backend interface or application that plays a critical role in day-to-day business operations. It’s often built on outdated technology with little to no consideration of user experience. They can be a custom homegrown system or a system of multiple applications.

Legacy systems pose several problems ranging from operational inefficiency to even security vulnerabilities. While your backend could get by with a repair here and there, it might make more financial sense to replace the system altogether and rebuild on a more secure and growth-driven platform instead. If you’re on the fence on whether or not your legacy system is truly in need of modernization right now, read on below.

6 Signs You Need to Modernize

1. Your development team spends more time fixing than developing

Every day seems to come with a new issue. The save function is no longer working, data goes missing, or an invoice was never sent. Your programmers should be spending more time developing new functions for your expanding business—not fixing repeat issues or those that could have been prevented with a better infrastructure.

2. Fixing one area of the application breaks another

You know there’s a problem with the underlying technology when resolving one area of the system causes the failure of a different area. Sometimes, it’s not always clear-cut that those two events are even related to each other either. Perhaps one of the applications was updated at the time or maybe hosting was the root of the issue. You start to become weary of making any fixes at all.

3. Difficult, or impossible, to implement new features

As your business grows, your strategy or offerings may change with it as well. You may want to add new functions, but are often limited by what the current technology can accommodate. At this point, you begin making compromises for what can be technically achieved while still making progress with your goals. Your legacy system is holding you back from expanding your business.

4. Special training is required

Your employees don’t understand how the system truly works. They might be wondering what an input field is asking them to enter or where to go to complete a task. Their misconceptions and lack of knowledge may cause them to make grave mistakes, costing you time and money to correct.

5. The system frequently crashes or shuts down

It’s not uncommon for the backend interface or business application to crash. Your development team have looked into it, but can’t pinpoint the root of the issue. Fortunately, the system does end up rebooting and your employees can resume their work. While the system always gets back up and running, those few seconds or minutes can greatly hinder your business and not to mention your customers’ perception of your company.

6. Workarounds are often the solution

Your employees are turning to workarounds to perform their jobs. They have stopped emailing your IT team for support because they know their priorities fall low on the list. Out of necessity, they have found ways to make the legacy system work for them—even if it’s a temporary solution. Sure, they get the job done, but these quick wins run the risk of being lost after an update or cause an issue with the code. Worst is that these employees might be teaching their coworkers these workarounds too, further spreading a nonviable solution.

There are a number of problems with legacy systems, but at the end of the day it’s up to you to decide what is best for your company. Modernizing your backend interface or business application is a major undertaking—costly at that. However, when done right, rebuilding your system for sustainable growth can also save you a lot of headaches and money in the long run.

UX and SEO

How UX and SEO Can Work Together

How UX and SEO Can Work Together

UX and SEO

UX and SEO Go Hand-in-Hand

User experience (UX) refers to the end-user’s emotions during the interaction with a product or service. UX design is the process of improving a website’s usability through user research, testing, and reiterating.

Search engine optimization (SEO) is also a process of improving a website, originally focusing on increasing visibility in search engines. It achieves this through on-page SEO, backlinks, and other methods. With Google’s algorithms getting smarter—RankBrain, I’m talking to you—the goal of SEO has shifted from satisfying Google bots to satisfying users.

SEO Now Focuses on UX

It can be said that the focus on UX within the SEO community began when mobile devices became a popular way of accessing the Internet. As more users turned to their phones to do a Google search, Google needed to provide faster and more mobile-friendly results. Hence, the first mobile-related ranking factor in July 2013. What better way to get publishers to adopt your idea than to make it an SEO ranking factor, right? 😉

Aside from having a mobile responsive website, there are several traditional SEO factors that involve UX. In fact, UX impacts SEO more than you might think. Poor usability, mystery meat navigation, and lack of content can hinder a website’s SEO efforts. Let’s take a look at factors that affect both UX and SEO.

Factors that Impact Both UX and SEO

Page Speed

The time it takes for a page to load affects UX and SEO. Users’ attention spans have reduced from 12 seconds to 8 seconds, and 40% of users will abandon a page if it takes more than 3 seconds to load.

For the rest of the users waiting for websites to load, they’ll be frustrated in the moment, especially when feedback is nonexistent. When users get frustrated, they’ll likely not return. The next time they search for a website that offers similar products or services, they might click on a different website in the SERPs. Thus, negatively affecting the other websites’ SEO efforts.

Page Speed Meme

There are several ways to improve a website’s page speed. One (free) tool to diagnose how Google views your page load time is PageSpeed Insights. It gives you a page speed score on both mobile and desktop along with recommendations to reduce page load time.

Minifying code bloat, enabling browser caching, and compressing images are all ways you can speed up your website. A note about images: Before you reduce their files, make sure they have optimized meta data. Fill out the title, description, and keyword fields of the image file. Save the file with a descriptive name that includes your keyword (e.g. cosmetic-dentistry.jpg). Filling out this data and saving the file with your keyword helps its discoverability in image search.

Site Structure

Site structure, or information architecture (IA), is an SEO ranking factor. A well-organized site structure with content arranged logically plus a clean global navigation to reflect that is beneficial for both users and Google.

Users depend on the navigation menu to discover and find their desired pages. Google uses the sections and sub-sections to determine the website’s theme. When organizing your pages into sections and sub-sections, use your keywords as the menu labels. If you use breadcrumbs, which you should, use your keywords as the labels as well.

Using keywords where appropriate and relevant in your navigation helps users understand the topic of a page without having to click on it. Links should explicitly describe their target pages. Having broad terms as navigation links or using “Click Here” are both examples of mystery meat navigation.

Mystery Meat Navigation

Dwell Time

Dwell time, or time spent on page, is one data-backed way to measure user engagement. Long dwell times usually indicate high engagement whereas short dwell times may mean user dissatisfaction. One way to keep users on your page is by ensuring your content is exactly what they need.

In SEO, content is king. Although content is sometimes neglected in the final product where large beautiful images are instead prioritized. Despite the rise of image-heavy web and mobile app experiences, there’s still tremendous value in having high-quality content. (I mean it is one of the three biggest SEO ranking factors.) Plus, images aren’t sufficient for those with disabilities.

When writing content, make sure you keep the scent. Write descriptive title tags and meta descriptions that include your keywords. Then, reiterate the topics of your pages by including your keywords in the page titles and/or H1 tags. Matching what users see in the SERPs to your actual page reassures users they’re on the correct page.

It’s not enough to have well written content though. Part of high-quality content is having the right typography to get the message across. Font choice, size, and color all play a critical role in the readability of content, especially on mobile screens. UX should enhance the reading experience for users.

Broken Links

No one likes using a website littered with links leading to 404 pages—not even Google. Broken links are a sure-fire way to lose users because 1) they’re not valuable to the user and 2) they can reflect negatively on your company because it shows disregard to the quality of your website.

From an SEO perspective, broken links prevent Google bots from crawling your pages. This is especially bad when your backlinks point to 404 pages. Imagine if all your hard work to get authoritative sites to link to you diminished because the wrong URL was used.

UX and SEO teams should work together to identify and resolve broken links. They should either write 301 redirects to alternative, but relevant pages, or provide a user-friendly 404 error page.

Accessibility

Bouncing off broken links, websites should be accessible to users who have disabilities and/or who depend on screen readers. Both UX and SEO teams can help those who use assistive technologies by writing descriptive title tags for links and images. They should also write descriptive alt text for images.

Title tags should describe the target pages of links and alt tags should describe images. You should include your keywords in these HTML attributes as long as they’re relevant and appropriate. Doing so provides context to screen reader users and serve as a relevancy signal to Google.

As you can see, UX and SEO are quite complementary to each other. UX depends on SEO to be visible in search engines while SEO depends on UX to retain users. Prioritizing UX and SEO in the early stages of web development can only benefit your final product. When executed flawlessly, you can have a high-performing website optimized for user satisfaction and ultimately conversions.

Benefits of UX Design

3 Benefits of UX Design

3 Benefits of UX Design

Benefits of UX Design

User experience (UX) has become a buzzword as of late, but it has existed for a while. As companies become more competitive and Google emphasizing the need for great user experience, it is more pertinent than ever to invest in UX.

What is UX?

UX is the process of designing digital experiences with the user in mind. UX design is a user-centered approach to designing solutions that anticipate user needs.

3 Benefits of UX Design

1. Increases conversions

Good UX helps ensure marketing efforts don’t go to waste. You may rank on the first page in Google or have a compelling Facebook ad offer that drives users to your website, but if your website suffers from bad UX those users will abandon.

2. Lowers development costs

How often have your programmers rushed to release a new feature only to spend the following three months fixing it? You’re not alone. Dr. Susan Weinschenk found that developers spend 50% of their time fixing problems that could have been avoided in the first place. In addition, fixing the problem after development is 100 times that of fixing it prior to the project’s completion.

Spending the time to do user research, explore different solutions, consider edge cases, test ideas, and finalize the design all before the design is even sent to your programming team can save you valuable resources spent on rework.

3. Boosts brand perception

Your website is an extension of your brand. A well-designed website that goes above and beyond meeting user needs says your company cares about users. An outdated website that lacks the most basic of functions may signal otherwise. Good UX has the power to keep your existing customers happy and increase customer acquisition.

UX is about making your users happy. Investing in UX not only benefits your users, but also your employees. It improves the bottom line, keeps overhead costs down, and strengthens your brand.

Usability Heuristics

10 Usability Heuristics for User Interface Design

10 Usability Heuristics for User Interface Design

Jakob Nielsen’s Usability Heuristics Explained

Usability Heuristics

In the beginning of a project, it’s easy to start brainstorming design ideas. The usability issues are evident, and you have ideas for how to solve them. Before jumping straight into design, you may want to consider conducting a heuristic evaluation.

A heuristic evaluation is a method to identify usability issues in a user interface (UI). During the evaluation, you compare the UI to a set of predefined usability heuristics. The most common set of heuristics are from usability consultant Jakob Nielsen.

Evaluating the UI against these principles allows you to objectively assess a design. Plus, it serves as documentation, which can help you gain buy-in from stakeholders. Below are the top 10 usability heuristics you should refer to next time you’re auditing a website or product.

10 Usability Heuristics for UI Design

1. Visibility of system status

The first principle states that the system should always keep the user informed of its status. Displaying system status can take on the form of a progress bar, loading spinner, or change in button color. These microinteractions provide users instant feedback, so they always know what’s going on. Rather than wonder if they need to submit an image or fill out a form again, they rest assured knowing the system is computing their actions.

Visibility of System Status
A confirmation in VSCO informs users their image was imported successfully.

2. Match between the system and the real world

A website or product should speak the user’s language. Sometimes, businesses bog users down with long promotional content before they present the information pertinent to the user’s search. Or worse, content will include system-oriented language that no one other than programmers would understand. Keeping the copy relevant and concise will help users complete tasks faster.

In addition to language, this principle states that an interface should match the mental model of users. A mental model is a user’s idea of how an interface should work. Users develop a mental model based on their experiences and beliefs. An example of matching the system with the real world is designing a navigation menu that conforms to how a user would find information in a brick-and-mortar store.

Match Between System and the Real World The Metrolink app uses words users would say when referring to train tickets and the location where they would physically store them.

3. User control and freedom

Users should have the ability to correct their mistakes. They should be able to take control of their actions and have the freedom to leave the interface without an extended dialogue. Users who feel empowered interacting with your website or product even if they make a mistake will have a much better experience than users who have to contact customer support to have their mistakes corrected for them.

User Control and Freedom An undo function allows Evernote users to revert to a non-formatted note.

4. Consistency and standards

It’s important for your website or product to have a consistent UI and standardized processes. A button that always turns a darker shade of blue on hover or confirmations that always appear at the top of the page teaches users how an interface works. If a button turns blue on one page, but turns orange on another page, users may be more hesitant to take their desired actions.

In addition to having a consistent UI, a design should also follow platform conventions. A couple of platform convention examples include the placement of the company logo on either the top left corner or in the top center of the page or a magnifying glass icon to represent the search function.

Consistency and Standards The Starbucks Locations page follows the design pattern of many other Locations pages with the list of locations on the left and a map view on the right.

5. Error prevention

While an interface should support undo (see heuristic no. 3), it would be more ideal to design an interface that prevents users from making mistakes in the first place. One way to prevent users from making mistakes is providing a confirmation message before the system registers the action. This way, users are forced to verify whether or not they meant to delete an item from their cart.

Error Prevention ID.me displays a tooltip with password requirements. As users type in a password, each requirement turns green to indicate it is met.

6. Recognition rather than recall

Along the same lines of the error prevention heuristic, an interface should be designed in a way that allows users to complete tasks without having to rely on their memory to do so. All objects, actions, and options pertaining to a particular screen should be visible on that page. This minimizes memory load and assists with faster completion rates.

Recognition Rather Than Recall Google Maps displays recent searches to allow users to select from one of their previous destinations.

7. Flexibility and efficiency of use

An interface should be flexible enough to cater to both novice and advanced users. Some users may be visiting a website or product for the first time, which may mean a higher learning curve. In contrast, some users may already be experienced with an interface and may seek shortcuts to complete frequent actions.

Flexibility and Efficiency of Use

Novice and advanced users have access to the same data, but Google Analytics offers Segments for advanced users who would like to drill into the data.

8. Aesthetic and minimalist design

Minimalist design refers to an interface that is stripped down to only the core functions and content the support a user’s goals. Irrelevant content clutters the design and can detract the user from completing their tasks.

Aesthetic and Minimalist Design Nordstrom’s layout is minimal, but not plain. White space separates groups of information from each other and the size of the buttons draws users’ attention to the CTAs.

9. Helps users recognize, diagnose, and recover from errors

Users will make mistakes whether they triggered them or the system did. An interface should clearly explain the error, so users can take the appropriate action to correct it. Error messages should be written in the user’s language (see heuristic no. 2) rather than system-oriented language.

Helps Users Recognize, Diagnose, and Recover From Errors

An inline error message in Best Buy’s checkout process specifically informs users which field needs to be corrected.

10. Help and documentation

This last heuristic states that every interface should be equipped with help and documentation. These usually come in the form of a help desk or FAQ section. Providing these resources allows users to find answers to their questions, which results in fewer calls to the customer support team.

A help desk should be organized by the user’s goals with articles that clearly define the steps to achieve them. Apply heuristic no. 2 regarding the user’s voice and add images to support the text.

The ultimate goal of a heuristic evaluation is to identify usability issues objectively. You may present this evaluation by annotating the design or creating a spreadsheet. In most cases, you may want to prioritize the issues based on level of effort and impact on usability—creating a roadmap for improvements.

Help and Documentation Shopify’s help center places a search bar at the top and divides content into broad categories with descriptions of each sub-section below.