5 Principles for a Mobile-First Mindset
When it comes to digital design, there are multiple factors to consider when you first attack a project. Visually, where do you start? Beauty vs. functionality? Desktop vs. Mobile? Which gets priority? Where to begin? Let’s be clear – your digital experience needs to work flawlessly across all major devices to create a cohesive design and seamless communication so that your audience can choose where and how they want to engage with your brand.
In general, we as humans spend the majority of our time digitally on mobile devices rather than actual computers (71% of our digital time to be exact). Since more people are looking at your website on their phones as opposed to their computers or tablets, we have our answer! The mobile-first mindset is again reinforced by attacking the most difficult design challenge first – the limited space constraints of the mobile screen. As designers, we need to figure out how to capture the attention of the audience and portray the brand effectively in just a few inches. Not an easy task, my friends.
So to help deliver a flawless experience for your customers, here are a few UX principles to keep in mind as you start designing:
Create a Fully Responsive Experience
Being fully responsive means that whatever device your customer is using, the experience shifts and modifies to optimize for each device. The industry is moving to a place where the optimal design is dictating the breakpoints. You may start with a certain breakpoint but designing the interface to look good and be functional is the primary goal, therefore your breakpoint may shift to accommodate the best design solution. The jury is out, by the way, on how large is the largest size you should accommodate. 4K resolutions are not super common for the mainstream, but they are gaining traction. You really just need to know your audience to determine the outer-limits resolution to plan for. Here’s a guide to the most common starting points.
Don’t Reinvent the Wheel
Users are familiar with the main mobile operating systems and are already familiar with how they engage with websites on their mobile devices. Generally speaking, there is no need to completely reinvent what they are already familiar with. Take a que from common operating systems. For example, iOS and Android have already set up a strong visual vocabulary for button styles, toggles/switches and actions (swipe, pinch, tap, pressure-based actions, etc). You’ll want to mirror common user experiences, but use your brand identity to customize the experience.
Keep Content Visual
Content is King, and engaging, storytelling visuals are what rules today’s digital world. As our attention spans fade and consumption of mobile content increases, people’s expectation of visual content increases. They want to see more images, more videos, more infographics and more compelling (but also short) copy that gets right to the point and supports the visuals. As you are writing for digital, keep it crisp and cut out the excess clutter. Consider meshing amazing visuals and succinct copy for a win-win. (And yes, SEO is always important, but there are other ways to optimize for keywords other than copy-heavy pages.)
Functionality is Critical
The days of truncating the experience for mobile are over. Users expect to be able to perform the same interactions on their mobile phone as they can on any computer. They want what they want, when and where they want it. So, how do you translate a large screen into a tiny hand-held device? From a design perspective, that may mean abridging the UI elements themselves – for example using icons on mobile where words are used on a desktop.
When designing for a smaller mobile device, it goes without saying. It’s also important to consider your audience and keep the UX at the very forefront of your design elements. Font sizes need to be large enough for them to read, but small enough to fit on the screen. Touch targets like buttons need to be usable for your audience. Make sure you are allowing enough size on the screen for male targeted sites vs female targeted sites. Minimum size is generally 48px x 48px, erring on the larger side to avoid the dreaded “fat finger.” Images need to load quickly and create a consistent feel with the other elements on the screen. No matter how you dice it, size is critical in designing for mobile.
Keep these principles top of mind as you set out to design digital experiences that can be viewed on any device. A simple, intuitive user experience is what makes the biggest brand impression on your customers and these concepts outlined above set the foundation for success.