How to Make a Perfect Mobile UX for your Website or App

We consistently talk about the need for technology that improves the customer experience. Your website on mobile is a critical part of the user experience and is becoming the main contact point for many of your website visitors soon to be customers. Building a site with quality UX design in mind is essential and requires a thoughtful approach that considers design thinking and putting the user first.

Here are some guidelines for improving your UX design for mobile sites:

‍

Consider the Contextual use of Mobile Devices

While both are “mobile” devices, the smartphone and tablet are markedly different. Tablets are typically used in the home or while traveling and are primarily for entertainment. Whether it’s shopping Amazon while on the couch or watching a NetFlix at 36,000 feet. Smartphones are also for the consumption of content, but they’re primarily communication and information-gathering devices. This fundamental difference should be kept in mind when designing your mobile site.

If your company offers entertainment, then design towards a mobile audience with a larger screen. If the mobile site is intended to offer quick information and decisions or fast sharing, then adjust the design towards the small screen and minimalism.

There are various other considerations, such as tablet users have much longer average sessions, so you can present slightly more involved content that requires more reading and actions/steps. And the average age of tablet users is higher than smartphone users, so make sure you understand the demographics and how that can influence design choices.

‍

Create Focused Content

What we mean by “focused” is content that is intentionally written and designed and minimalist in structure. There should be thought behind all of the content, which provides the opportunity to edit or remove content that is superfluous and to expand or clarify the content that is not sufficient. If your design requires the mobile user to take several actions, then provide them with guidance arrows or tricks such as hovering messages, so they understand the next steps.

Clutter should be removed, and all swipe or tap actions should be intuitive. Think about the Facebook mobile application, where you scroll up for newer posts, and down for the older ones. It’s an intuitive and simple process.

‍

Keep it Simple

Traditional websites use menu bars at the top of the page, which simply doesn’t work for mobile as it takes up too much screen. The better choice is an accordion style drop-down menu on the left or right. You should also avoid multi-level menus to streamline down the number of taps or swipes. Imagine a busy commuter glancing at their phone as they walk to work. They won’t likely navigate through four or five levels of menus to find what they need.

Consider these other examples of simplicity in UX design:

• Provide fewer options/choices to push users towards the most desired options.
• Plainly state or show the value of your offering
• Make actions easier by including “tap-to-call”

‍

Embrace Touch-based Design

Website interaction has moved beyond the keyboard and mouse. It’s all about touch. How the various touchpoints are developed will often determine the success or failure of a mobile site. With a desktop, the cursor size of the mouse is constant. Mobile users’ hands come in all shapes and sizes, from a 10-year-old scrolling through a book to a large adult that is trying to tap on a pinpoint area of the screen.

Three tips for designing with the right “touch”:

• Buttons and forms that need a touch input must be big enough to receive the touch, but not so large that they overlap with other functions.
• Understand how some users might be navigating with a stylus or an older directional-style keypad, and adjust touch areas if needed.
• Use consistent visual cues to highlight the most important touch points.

‍

Cut Down on Images

Mobile sites succeed because they are properly sized and they perform quickly. Users have no patience for a slow-loading site. One feature of desktop sites that can drag down mobile sites is the usage of imagery. Avoid special effects with images which might not be technically viewable on older mobile browsers. You should also use actual text as text, instead of using images to relay text. Instead, rely on fonts to set content apart, and enjoy the faster load times that come from a cleaner site.