
Shane Ketterman
Shane comes from an architecture and design background as well as UX, tech, startups, and content marketing.
We can achieve better user experiences with mobile UX design by following best practices, understanding constraints and facilitating a solid working relationship with developers.
We can achieve better user experiences with mobile UX design by following best practices, understanding constraints and facilitating a solid working relationship with developers.
Shane comes from an architecture and design background as well as UX, tech, startups, and content marketing.
We can achieve better user experiences by following mobile UX design best practices, understanding constraints, and facilitating a solid working relationship with developers.
A recent article on TechCrunch pointed out that mobile eCommerce accounted for nearly one-third of all online sales during the 2018 Thanksgiving day holiday period, and Digital Trends reported in 2017 that 5 billion people across the world now have a mobile device. Google also announced that mobile-first indexing is now used for over half the web pages in its search results.
People depend on mobile devices every day for communications, eCommerce, content consumption, work, banking, directions, and increasingly as their sole computing device. What’s more, they are using a variety of devices such as mobile phones, smart watches, tablets, phablets, wearables, and hybrid laptops.
Mobile user experience (UX) design refers to the design of positive experiences during the use of mobile devices and wearables, and applications or services running on such devices…Mobile UX design focuses strongly on efficiency and discoverability. - Interaction Design Foundation
For UX designers these mobile device trends represent both challenges and opportunities. On the one hand, we have to account for the variety of devices and ways in which they are used. On the other, this opens up an entirely new set of focus areas in UX design, and that means creating positive experiences for an entirely new generation of users.
Mobile UX design is tricky. As stated previously, there are so many things we have to consider, including the growing list of mobile devices, the ways people interact with them, and the fact that people want consistent and pleasurable experiences across all device types.
In 2015, Google published 25 mobile UX design best practices based on internal research. These tips were recently updated to bring them more up-to-date. The author also includes a downloadable PDF of all 25 tips that is nice to keep handy for any mobile UX project.
Another great resource to keep handy is Apple’s Human Interface Guidelines for mobile design. They are easy to read with a beautiful layout and peppered with best practices, tips, and Apple’s own take on design principles. For mobile UX designers these guidelines are a great resource for delivering high quality user experiences.
Here are a few more mobile UX design best practices that might not be as well known as Google’s, but are just as important for mobile designers to take into account.
The aim of most UX designers is to provide pleasurable experiences and come up with great designs which achieve both discoverability (what actions are possible), and understanding (how is the product supposed to be used). With mobile, however, there are some constraints introduced due to the size, portability, and environments in which these devices are used.
When dealing with native mobile apps, designers need to consider that some users may have storage constraints.
A mobile app, as opposed to a web app, uses storage right on the mobile device. This has an impact on mobile UX design because it introduces potential limitations on the quality of video, audio, and images that can be used.
For native apps, we want mobile UX designs that take storage constraints into account. When a user runs into a storage limitation, they have to make hard decisions on what to keep and what to delete. It makes for bad user experience when we force users to have to make those choices.
Another constraint we face with mobile UX design is screen size and the controls on our mobile devices.
Mobile screens are smaller: reading through a peephole increases cognitive load and makes it about twice as hard to understand. - Jakob Nielsen, Web Usability Consultant.
The best way to deal with screens and controls is to eliminate as much friction as possible. Restructure information, pay attention to the thumb zones, decrease clicks (especially with eCommerce), and pay attention to the login process which can often be frustrating.
With mobile devices, there are environmental factors to consider for UX design. Users are subject to dropping offline a lot more frequently, and these situations need to be considered in the overall user experience. How do we bring them back to where they were? How do we make sure they don’t have to start all over with what they were doing?
Another environmental factor is distractions. When we use our mobile phones or tablets, we are often in a noisy or crowded environment that makes it hard to concentrate. How can we ensure a good user experience when distractions are competing for a user’s attention? Are there ways we can save states and allow our users to save states as well?
Another constraint designers are up against with mobile UX design is the limited size of the screen. Because of that, people can only see one window at a time, and that puts a huge limitation on the user experience.
There are efforts to try and accommodate “multi-screen” and “multi-tasking” but these are not yet the norm and come with their own sets of constraints.
The key to better mobile UX with this single window constraint is that the design should be self-sufficient. Anything that needs to be done by the user should be doable within one single screen or window, i.e., they should not have to leave the app to find information, etc.
When users have to leave apps or open new screens, this adds to the overall cognitive load and that means things become too complex and frustrating.
There is one last constraint to be aware of: Holding our gadgets. How do people hold them and what does this mean for mobile UX design?
According to research by Steven Hoober and outlined in Design for Fingers, Touch, and People, Part 2, it was discovered that people interact with their devices differently depending on how they hold them, which subsequently has an impact on mobile UX design.
People hold their mobile devices in multiple ways and change their position all the time. This has an impact on what finger(s) they use and how they interact with a mobile UI (see below). As it turns out, users prefer the center of the screen and they don’t like to click items that are too close to the edges.
Here are some additional mobile UX tips from Steven’s research:
Whether working in an agile/lean UX environment or not, it’s the developers who have to interpret and implement the designs that have been so carefully crafted. It’s a good idea to establish some tried and true best practices with developers early on to make sure designs are implemented as intended. Here are a few suggestions and tips.
When preparing and handing over mockups, try to keep file names simple, consistent, and descriptive. This will save a lot of time going back and forth. It’s also a good idea to finalize all of the mockups before sharing them with devs so they only receive one version of each screen. Another time-saving tip is to test all of the interactions with prototypes so they are working and functional. Good tools for sharing mockups: InVision and Marvel.
Most of the work done as UX designers involves developers early on in the project, and a great way to facilitate an ongoing understanding of the design process and create a better line of communication is by creating and using a Functional Specification document, or a “Func-Spec.”
The Func-Spec document is similar to a blueprint that architects create, except it is shared with developers throughout the design project and allows them to understand how an application or website will function (vs. how the UI will look).
A good example of a working Func-Spec is shown below:
There is usually a lot of copy that lives outside of a mockup that needs to be communicated to developers. Here is an idea they will definitely appreciate:
As seen above, the context helps the developer understand when the message should appear or disappear. It should let the developer know what is going on so they do not have to guess. The message is the actual copy that will appear. Use the real copy and not gibberish (i.e., lorem ipsum). Developers don’t want to be copywriters and we want to make things as smooth as possible for them.
This is one of the most important parts of communicating designs with developers. Here’s where tools like Zeplin and InVision’s Inspect really shine because they take care of communicating specs like measurements, style guides, fonts, user experience flow, and how every piece of the design works.
Designers love their tools. So much so that it can be really easy to forget to pick up the phone, start a video call, or walk over to the developers and talk. A lot of time has been saved by simply meeting with developers after handing off a portion of a design because any questions or nuances can be discussed on the spot. This is often forgotten, but if made a part of the normal hand-off process, everyone will appreciate the time it saves.
Mobile isn’t going away. In 2016, the number of users accessing the web on a mobile device surpassed desktop use for the first time. For UX designers, the increased adoption of mobile and the proliferation of various device types will make user experience design that much more challenging.
For these reasons, adhering to a set of best practices, understanding the constraints that mobile introduces, and providing for a smooth working relationship with developers will be key factors in achieving designs that create positive human experiences.
User experience (UX) in mobile refers to the overall experience a person has interacting with any type of mobile device (phone, tablet, wearable, hybrid). Interactions include apps, interfaces, software, or the hardware itself.
User experience (UX) design is the process of creating products, services, and processes that provide meaningful and relevant experiences to users. The UX design process focuses heavily on the human perspective and encompasses everything from user research to usability to function.
UX has been around in various forms since the 1940s, however, it was not until the spread of PCs in the early 90’s that the term “user experience” design was coined by Donald Norman. Don worked for Apple and saw a need to cover all aspects of a person’s experiences with a system.
UX research is the process of understanding the impact of design on an audience. It is done through observation techniques, task analysis, and other qualitative/quantitative feedback methodologies. Some of the techniques include card sorting, focus groups, heuristic evaluations, and surveys.
User experience (UX) research is important because it helps create designs that are truly relevant, easy and pleasurable to use, and helps us understand the return on investment of our designs. User research influences all aspects of the UX design process.
World-class articles, delivered weekly.
World-class articles, delivered weekly.
Join the Toptal® community.