Skip to main content
Business LibreTexts

5.4: Core principles of UX design

  • Page ID
    24882
  • User-centric design

    While this may seem like the most obvious point, it’s surprising how often the user is forgotten in the user experience. Business owners, marketers and web developers frequently focus on creating the web platforms they want and think are best, instead of really interrogating what the user needs. Often, the performance of web assets is compromised when the design process is driven only by internal business needs, for instance, ensuring that each department in the company has a space that it controls on the home page at the expense of what the user needs. When designing for the user, you need to ask the following questions:

    • Who is the user?
    • What are the user’s wants and needs from your platform?
    • Why is the user really coming to your website?

    Note

    The customer journey is introduced in the chapter on Strategy and context. It refers to the steps your customer takes when engaging with your brand.

    • Where is the user most likely to be in their customer journey when they visit your site?
    • What are the user’s capabilities, web skills and available technology?
    • How can the site facilitate the customer journey to conversion and purchase?
    • What features would make the user’s experience easier and better?

    The answers to these questions will come out of user research, as discussed in the Market research chapter earlier in this book.

    clipboard_e5a641669b1eac86b4b2bf05776692e18.png
    Figure \(\PageIndex{1}\): It’s essential to give users exactly what they need Adapted From XKCD, 2015.

    Of course, many users may not know exactly what their wants and needs are. It is the UX practitioner’s job to discover these through research and interpret them in the best way possible. Keep Henry Ford’s famous quote in mind here: “If I had asked people what they wanted, they would have said faster horses.”

    (www.goodreads.com)

    Mobile users When discussing user-centric design, whatever you have gleaned about the user context must be considered. Today more than half of web traffic originates from a mobile device, with users accessing the Internet through either a smartphone or tablet (think with Google, 2016). This number is increasing every year and is expected to be over 70% by 2019 (Internet Society, 2015). Therefore, designing for mobile must be a priority. The context of mobile users affects the way in which they use their devices. Mobile users are:

    • Goal orientated. Mobile users turn to their mobile devices to answer a question, quickly check email, find information or get directions. They often have a distinct purpose in mind when using their phone.
    • Time conscious. There are two aspects to this. On the one hand, mobile users are often looking for urgent or time-sensitive information such as the address of the restaurant they are looking for, so answers should be available as quickly as possible. On the other hand, the mobile device is also frequently used to kill time or as a source of entertainment such as reading articles on the couch, or playing games while waiting in a queue, so content is also crucial. User research will tell you which of these groups your users fall into and how you need to structure your site accordingly.

    Note

    Some mobile users use their phones for browsing in a similar way one would use a desktop computer. How does your audience use their devices?

    • Search dominant. Even users who know what they are looking for tend to navigate there via search, for example, typing the brand name into Google, rather than accessing the page from a bookmark or typing the URL directly into the browser bar.
    • Locally focused. According to Google search data 30% of all mobile searches are for location (think with Google, 2016). Since mobile phones are always carried, users turn to them to find information on things in their surroundings from local businesses to more detail on a product they have just seen.

    Usability is especially challenging with mobile. One of the biggest challenges is the sheer number of different device categories and models available. The OpenSignal report from 2014 identified 18 796 distinct android mobile devices, running a myriad of operating systems (The Next Web, 2014).

    The limitations of mobile create additional considerations for the UX designer to address to ensure that visitors have a pleasant user experience while visiting the site. These limitations include:

    • Small screens. Even the largest smartphones are screens many times smaller than a standard laptop and tablets fall somewhere between the two. This means that the user has a much smaller window through which to perceive and understand the website, so it may be difficult to get an overall impression of where things are or what’s important.
    • Difficult inputs. Mobile phones don’t come with full-sized keyboards and mice, so they are usually a lot more difficult to operate fluidly and accurately than desktop computers. Touchscreens may be the exception here, although they also have their own pitfalls.
    • Slow connection speeds. Many mobile phone users, especially in developing countries, are on slow Internet connections. Even fast options such as 3G can often be more sluggish than a desktop equivalent. This makes loading large websites or images slow and frustrating and can be expensive in terms of data costs.

    Note

    One design approach places ‘content first’. This means that you should decide which content to provide on your site depending on whether users are viewing it from a mobile or a desktop computer, and then adapt the layout and material to that device.

    • Slow hardware. Sometimes the slowness comes from the hardware itself. The more basic the phone, the slower its processing components are likely to be making the simple act of opening the browser and loading a page time consuming.

    There are three main approaches to creating mobile-accessible content.

    1. Mobile websites (called mobi sites)
    2. Native and web applications (called apps)
    3. Responsive websites (websites that adapt to the device).

    Usability and conventions

    Note

    Read more about this in the Web development and design chapter.

    Usability is about making the digital assets we build easy and intuitive to use. To paraphrase Steve Krug, don’t make your users think: they should just do (Krug, 1997−2013).

    One of the most important aspects of usability involves sticking to conventions, which are simply common rules or ways of displaying or structuring things on the web. Popular conventions include:

    • Links that are blue and underlined
    • Navigation menus at the top or left of the web page
    • The logo in the top left hand corner which is linked to take the user back to the home page
    • Search boxes placed at the top of the page, using standard wording such as ‘search’, or a magnifying glass icon.

    Note

    Can you think of any other web conventions? How have these evolved over time, and how important is it to stick to the rules?

    Ensure that all website elements such as menus, logos, colours and layout are distinct, easy to find and kept consistent throughout the site. There are some key ‘dont’s’ when it comes to building a user-friendly and usable website:

    • Never resize windows or launch the site in a pop-up.
    • Do not use entry or splash pages i.e. a page that site visitors encounter first before reaching the home page.
    • Flash is no longer used to design websites. Unaided, most search engine spiders cannot effectively crawl Flash sites, and Flash usually doesn’t work on many mobile devices.
    • Don’t distract users with ‘Christmas trees’ such as blinking images, flashing lights, automatic sound, scrolling text and unusual fonts.

    And finally, while the following principles apply to desktop as well, they are especially valid for mobile:

    • Reduce loading time. Try to keep content and actions on the same page as this ensures better performance as there are fewer page loads. Encourage exploration especially on touchscreens, users like to browse elements and explore. This makes them feel in control.
    • Give feedback. Ensure that it is clear when the user performs an action. This can be achieved through animations and other visual cues.
    clipboard_eafade348c30a3ae43f13227fe0940152.png
    Figure \(\PageIndex{2}\): Animations providing feedback to the user of the action they have requested Adapted From Dribble, 2013.

    Note

    Some note the increasing presence of one page websites, especially for sites with limited content and large images, which enables the site to load quicker. Check out this article that provides guidance on what types of sites should opt for one page sites: www.webinsation. com/should-i-havea-one-page-website. This approach is less effective in countries where data costs are prohibitive.

    • Communicate consistently. Ensure that you deliver the same message across all your touchpoints, for example, using the same icons on the website as you would on the mobile app prevents users from having to relearn how you communicate.
    • Predict what your user wants. Include functionality such as autocomplete or predictive text. Remove as much manual input as possible to streamline user experience.

    It’s useful to consider usability guidelines to ensure that your website is on track. Stay In Tech provides a usability checklist online at https://stayintech.com/info/UX.

    Note

    Mobile users prefer to scroll in one direction.

    Simplicity

    In UX projects, the simpler option is almost always the more user-friendly one. Even if your service or product is complex your customer-facing web portals need not be. In fact, it’s important to remember that most customers want the most basic information from you, such as “What is this?” and “How does it work?” Simplicity can mean several things:

    • Lots of empty space. In design terms, this is referred to as negative or white space. Though, of course, it need not specifically be white. Dark text on a light background is easiest to read. In general, the more effectively ‘breathing room’ is placed between various page elements, lines of text, and zones of the page, the easier it is for the user to grasp where everything is.
    • Fewer options. Studies have found that people faced with fewer choices generally choose more quickly and confidently, and are more satisfied with their decision afterwards (Roller, 2010).
    • Plain language. Unless your website is aimed at a highly specialised technical field, there’s usually no need to get fancy with the words you use. Clear, simple, well-structured language is the best option when creating a great user experience.

    Note

    Read more about this is in the Digital copywriting chapter

    • Sticking to conventions. As we’ve said before, conventions are excellent shortcuts for keeping things simple for users. There’s no need to reinvent the wheel and try to teach your users a whole new way of navigating a website.
    clipboard_e3f09b91f416dbd499ff3330b95700037.png
    Figure \(\PageIndex{3}\):The Fresh Books homepage is clean, simple, inviting and easy to use Adapted From Screenshot, FreshBooks 2016

    When it comes to mobile, it’s even more important to simplify. Show information only when it’s needed. While you should ensure that the mobile asset provides all the same information as the desktop equivalent, this doesn’t need to be presented in the same format or volume.

    Credibility

    Credibility refers to how trustworthy and legitimate something looks, and is a big consideration for web users when deciding to use your website or not. Here are some of the cues that visitors use to determine the credibility of a website:

    • Looks – does it look professional and beautiful?
    • Prominent phone numbers and addresses are easy to locate – this assures the visitor that there are real people behind the website, and that they are easily reachable.
    • Informative and personal ‘About us’ – some customers want to see the inner workings of a company and are interested in the head honchos. Consider including employee pictures and profiles to add personality to the site.
    • Genuine testimonials – testimonials are a great way to show potential customers what your current customers have to say about your organisation. Trust is vital, and this is one way to encourage it. Video testimonials can be particularly effective, assuming your audience does not face data restrictions.
    clipboard_e03f1baa0cd463ed51b51b3efa24c2e26.png
    Figure \(\PageIndex{4}\): Genuine user testimonials can create a sense of credibility, like this example from Xero which includes text and video testimonials Adapted From Screenshot, Xero, 2016.
    • eCommerce – using a reputable sales channel helps your websites credibility.
    • Social media – having a social media presence often goes further towards establishing credibility than testimonials, which could have been faked.
    • Logos of associations and awards – if you belong to any relevant industry associations or have won any awards feature them. Not only does this go a long way towards establishing your credibility, but it will show that you’re at the top of your game, a notch above the competition.
    • Links to credible third-party references or endorsements – this is a way to assert your credibility without tooting your own horn.
    • Fresh, up-to-date content – a news section that was last updated a year ago implies that nothing has happened since or that no one cares enough to update it.
    • No errors – spelling and grammar mistakes are unprofessional, and while the large majority of readers may not pick them up, the one or two who do will question your credibility. This extends to broken links, malfunctioning tools, and interactive elements that don’t work as advertised.