Mobile UX Design: How will future mobile phones affect mobile UX design?
By Raeleen
| 19 November 2021
A great mobile User Experience (UX) design is essential for the success of your website or app and helps you achieve your business goals.
But before we delve into the details of mobile UX design, let’s first define user experience (UX) and UX design.
What is user experience?
The term user experience was coined by Donald Norman, co-founder of Nielsen Norman Group and former Vice President of Apple Research Lab. He defines UX as everything that touches upon your experience of a product. It encompasses all aspects of the end-users interaction with the company, its services, and its products
Peter Morville of Semantic Studios developed the UX honeycomb to further describe UX. He said that there are several facets of user experience that he represented in a honeycomb diagram.
The following are the characteristics of UX according to Peter Morville.
- Usable – The product needs to be simple, easy to use, and familiar.
- Useful – The product must fill a need.
- Desirable – The product needs to be attractive and evoke positive emotions.
- Findable – The information that your user seeks must be easy to find.
- Accessible – The product or service needs to be accessible to everyone, including those with disabilities.
- Credible – The company and its products need to be trustworthy.
- Valuable – The product must deliver value to the business and the customer.
What is UX design
UX design is the process of creating products, both physical and digital that provide meaningful and relevant experiences to the users. It requires a deep understanding of the users’ needs, wants, behaviours, and the context in which they will use a product.
It is sometimes confused with “User Interface (UI) Design” and “Usability”. But they are just subsets of UX design. UX design encompasses the entire users’ journey and includes aspects of branding, design, and function among others.
Since UX design is a multidisciplinary field, UX designers come from different backgrounds such as visual design, programming, psychology, interaction design, and more.
What is Mobile User Experience Design?
Mobile UX design is about creating the best user experiences for hand-held and wearable devices. This includes designing mobile applications and mobile-friendly websites that meet the unique requirements and restrictions of mobile devices.
Mobile UX designers must design apps and websites that make the best use of smaller screens and consider how humans interact with the device (using their thumb/finger on a touchscreen).
Designers must also consider the context of using the device in their designs. People typically use their mobile devices in the following scenarios.
- They use their mobile devices in short, intense spurts to complete a microtask like buying a ticket, or getting a rideshare etc.
- They use their mobile devices to see what’s happening around them or to find a certain establishment (restaurant, etc)
- They use their mobile devices to surf their newsfeed when they are bored or waiting.
The importance of mobile UX design
According to Statista, more than 80% of the world’s population own a smartphone. That is over six billion people! Moreover, the World Advertising Research Center predicted that by 2025, 72% of internet users will access the web solely via smartphones.
The above trend means that businesses should give ample attention to the needs of mobile users.
A great mobile UX design is essential for the success of your product and your business. Studies show that 88% of online consumers are less likely to return to a site after a bad experience.
Putting the users’ needs at the core of design can help increase customer satisfaction which in turn can help build your brand and get more conversions. On average, every dollar invested in UX brings 100 dollars in return according to Forrester Research.
Considerations for mobile UX design
Mobile smartphones come with inherent constraints but they also have unique features. Both should be taken into account when designing websites and mobile applications.
Small screen
size of mobile devices means that designers can’t just use the same layout they use for desktops or laptops. To ensure the best user experience for small screens, web designers do the following.
- Prioritise what content or design element to put above the fold. Keep calls to action front and centre.
- Structure the content in just one column for mobile phones.
- Strike a balance between saving space and legibility. Font size should at least be 11 points. Use appropriate spacing and layout to improve legibility. Adding space in between text reduces overwhelm. Using clear headers, bulleted or numbered lists, short paragraphs help make the text more legible on mobile phones.
Touchscreen/Input
In the absence of a mouse and keyboard, mobile phone users have to rely on the touchscreen to interact with the device.
Using a touchscreen presents some challenges. It is possible to tap a button by mistake and it is hard to type on a small onscreen keyboard.
Here are some design guides to work around the challenges of touchscreen input.
- Ensure that buttons are large enough and have enough space between them to prevent accidental touches.
- Create an undo button so that the user can undo the last action if made by mistake.
- Offer the right keyboard to users when they need to enter information (during sign up, entering billing information etc). This can help the input be much more comfortable. For instance, if the information requested is phone numbers or zip codes then a numeric keyboard must be offered.
- Minimise data input. Remove unnecessary fields, get only the basic information, and use “remember me” options for future use.
- Gestures can be performed by users as an alternate user interface. Examples are pinching to zoom in or out, using two fingers to move around the screen (for a map for example), touching and holding to simulate right click etc.
- Research shows that 49% of smartphone users rely on one thumb. Design should accommodate for the thumb’s reach zone. Common features should be placed in accessible regions while delete buttons should be placed in harder to reach areas to avoid errors.
No Split-Screen
The majority of smartphones do not offer the split-screen function. This constraint means the design should be self-sufficient.
Any task should be easy to complete in a single app or on a single website. Avoid calls to action that launch new windows.
Limited computing power/inconsistent data connection
Mobile phones are getting more advanced each day but they still have some limitations. Likewise, mobile data connections may be inconsistent. Designers take this into consideration when designing a website or mobile app.
To ensure that websites load fast regardless of the device being used, web designers employ mobile optimisation techniques such as optimising images, using content delivery networks, and minifying codes.
Portable means interruptible
Because people use smartphones in a variety of contexts and situations (at home, at the office, while waiting for a ride, or while inside a train, etc), they are most likely to be interrupted when using such portable devices. This means that attention on mobile devices is often fragmented and short.
- Allow users to save state so that they can pick up where they left off.
- Simplify tasks and interactions.
Environment
People use their phones anywhere – indoors or outdoors. It is important to have sufficient contrast between background and text so it is legible in any setting.
Portrait and landscape orientation
Users have the option to change the orientation of mobile devices. Studies show that 94% of users prefer vertical orientation and the rest prefer horizontal orientation.
Designers generally create a website or an app that can be used in two different orientations.
Phone features
Designers should use the phone’s features to lessen the work on the part of the user. For example, if the phone has GPS, users shouldn’t have to enter zip codes. If the phone supports electronic fingerprint recognition, the users should have the option to use fingerprints to log into their accounts.
How do Future Mobile Phones Affect Mobile UX Design
Every year, newer smartphones with the latest design and technology are being released. A few years back, brands like Samsung, LG, Motorola, and Huawei released foldable smartphones. Although their widespread adoption is yet to be seen, foldable smartphones may capture a bigger share of the market in the future.
So far, there are four types of foldable smartphones out there.
The first category is reminiscent of the old clamshell flip phones back in the ‘90s. This includes the Samsung Galaxy Flip and Motorola Razr 2020. There is a small display on the outer clam which can show notifications and the date and time, weather, depending on the widgets you want. When you open it up, it pretty much looks like a regular smartphone.
The other three types of foldable smartphone fold out on a vertical axis in a tablet-like form but they have some key differences.
The second type folds outward, meaning it has a display that wraps around the back like in Huawei Mate X and Royole Flexpai. When it is folded, one half of the screen is active and you can use it like a typical smartphone. When you open it flat, you will have one big screen.
In the third type of foldable phone, the bigger display folds inward. There is another cover screen on the front when it is folded. Samsung Galaxy Fold, Huawei Mate X2 belong to this category.
The fourth type of foldable smartphone also folds out on a vertical axis. But when you open it up, you will have a dual screen–two screens side by side rather than one big screen folded out flat. Surface Duo and LG G8X ThinQ belong to this category.
With these new form factors, what does it mean for mobile UX design?
Designers now have to consider more factors when building a website or applications that will work with these new generations of smartphones.
They have to think of how their designs will work in a different aspect ratio. Foldable phones also support multitasking in the main screen and designers have to think how their website or app will work in this scenario.
Another thing to think about is how the thickness and the size of the phones when unfolded will affect how the users will interact with the device. Can they operate the device with one hand as easily when folded? How do they use the phone when opened? Designers have to create a UI that has the flexibility to change throughout the foldable phone form.
We can expect that in the future more technologies will come out and designers will have to adapt so that they can provide the best possible experience to the users.
Nationwide Insurance
Nationwide Insurance is an insurance company based in the United States.
- The website’s design is streamlined.
- No pop-ups or interstitials. You are given the option to install their app, but the placement of the notice does not interfere with the website
- Two tabs on the top — personal or business allow you to identify the types of users to customise your experience.
- Common tasks are easily available. In this case, get a quote, pay a bill, file a claim, find an agent, and log in buttons can all be found above the fold of the website whether you are accessing from a desktop or a mobile phone.
- Calls to action is front and centre
- An accessible home button allows you to return to the home page with one tap.
- Menu options are not overwhelming
Cornerstone Medical Recruitment
Cornerstone Medical Recruitment offers a personalised medical recruitment service. It aims to make the best match possible between employers and job seekers not only in terms of skills to job position but also workplace culture, lifestyle and personal fulfilment opportunities.
- There is a click to call button if the users want to call directly from the site.
- An accessible home button allows users to return to the home page with just one tap.
- Call to action in front and centre of the website
- Menu options are not overwhelming.
- Streamlined information entry with autofill function to make input hassle-free.
Etsy
Etsy is a popular eCommerce platform where people can buy and sell vintage and handmade items.
- Promotion placement does not interfere with the website.
- You have the option to sign in but you’re not required to create an account if you just want to explore the site.
- Navigation options for two types of users: the searchers (those who want to buy with a specific product in mind), and the browsers (those who just want to browse the site and look for something that might interest them).
- Predictive search and popular searches lessen the hassle of typing in the complete queries.
Max Solutions
Max Solutions is a large corporate entity that provides a range of community services including employment, disability, and training services.
- There is an accessible search button on the home page
- Contact information is easy to access through the “talk to our team” button on the home page on top and at the bottom (contact us button) if you scroll through the page.
- Everything you need is upfront yet the website looks streamlined.
- Got a quick question? There is an ask a question button at the bottom of every page.
- The “ask a question” button leads you to its chat function.
- The contact us page provides the users many options to connect: via chat (same as the ask a question button) via phone or email or through a form depending on the intent. Autofill is enabled on the site so if you don’t have to type in your info.
- Multiple access points for news, About Us, and more detailed info about the services. Users can scroll down the homepage or access them through the menu.