To design a successful mobile experience you’ll need a considered content strategy first
Often we automatically focus on the design and technical challenges we’re faced with first, from designing with less screen real estate, to optimising for new input methods, such as touch. While these are very important, they don’t solve a fundamental problem many websites and applications have on mobile: getting the actual content right.
When it comes to mobile design, start with the content. Your content should define the layouts you need, rather than layouts and containers defining the content. This means focusing on the strategy, rather than the actual copy itself: understanding what content is needed, when it’s needed and how it should be organised.
One of the great things about designing for the small screen from the outset is that it helps you to really focus in on what content matters (and this can be applied to larger screens too). By removing any decorative content, added to fill whitespace rather than provide value, you’re creating a solid platform with substance to deliver seamless experiences across any device.
However, it’s important to remember that assumption is the enemy of a good content strategy. If you hear people say “Our users won’t do that on mobile” or “Strip that content because mobile users won’t need it,” challenge them to back it up. If users want to do something, they will do it using any device available to them, especially their phones. To emphasise this, a car is bought every 3 minutes in the UK using eBay on mobile!
FINGER FRIENDLY DESIGN
Touchscreens have transformed the design landscape, bringing how we hold devices (and our fat fingers and thumbs!) into the mix
Once the stuff of sci-fi fantasy, the touchscreen has pretty much become the norm for today’s mobile devices, ever since Steve Jobs first announced the launch of Apple’s original iPhone back in 2007. When designing for touchscreen devices, there are many considerations that go beyond traditional mouse and keyboard inputs.
You’ll need to consider how people actually hold their device and how they’ll physically interact with your design. The most popular way for many people to grip their phone is with one hand, tapping away using a solo thumb. The design needs to be carefully organised, so that key elements we want our users to tap are nearer the bottom of the screen, comfortably within range of their less dexterous thumbs. With tablets, we tend to hold them at the sides, so this becomes the optimal location for key buttons and controls.
Our fingers and thumbs are rarely accurate when it comes to tapping a target on a touchscreen. Therefore, ensure your buttons are big enough for our clumsy digits. Apple’s iOS guidelines recommend that tap targets should ideally be 44 pixels wide or high. Similarly, don’t place tap targets too close together; give enough breathing room for them to be easy for the user to hit.
Gesture-based interactions (such as swipe or drag) present a great opportunity to enhance the experience of your design for touchscreen devices that support them. On the other hand, you cannot rely on hover (or rollover) states on a touchscreen. So, from indicating buttons and links are clickable, to presenting more complex interfaces, hover should be similarly treated as an enhancement to the core experience.
Finally, when designing for touch, always thoroughly test your design by getting your hands on real devices where possible (via opendevicelab.com for example) and by using tools like Plunk (plunkapp.com) to capture feedback from real users remotely.
Speed and performance are absolutely critical to delivering a good experience to your users, whether on mobile or not
A 2011 study found that 71% of global mobile web users expect websites to load as quickly (or faster) on their mobile phone, compared to the computer they use at home; over 59% even expect websites on mobile to load in 3 seconds or less.
Unsurprisingly then, speed has a massive impact on conversion rates and whether people stick around or are driven into the arms of a competitor. Therefore, put performance at the heart of each design and technology decision. Speed affects the experience of all users, regardless of their platform or device, so good performance is an essential design feature.
DESIGN PERFORMANCE TIPS
Framework bloat – Is the framework or library you’re using worth the added bloat for the sake of easier, faster development?
Set performance budgets – Define a ‘budget’ for the performance of your website or app and stick to it. The budget could be the overall file size, the number of server requests or even the total loading time.
Conditional loading – Improve perceived loading times by only loading only what you need, when you need it, through conditional loading and progressive disclosure.
Use caching – Set caching headers for any static assets (such as images) to not expire for at least a month to speed up loading times for return visitors.
Test on real devices – You cannot get a true picture of the performance of your app or website using an emulator. Test with real devices on 2G and 3G networks as early and often as possible during the design process.
Lazy loading – The perception of speed is just as important as speed itself. Think about it – waiting is frustrating! ‘Lazy loading’ in sections can draw users into content immediately, while secondary elements like ads continue to load in the background.
Performance-wise, images will often be the most expensive part of your design, so proper optimisation is vital
The past few years have seen the average mobile page download size balloon from 542kB in 2012 to 953kB in 2014! Why have mobile page sizes nearly doubled? More often than not, images are the culprit. They now make up over 63% of the average mobile page load and will often be the most ‘expensive’ part of your design, performance-wise. Therefore, it’s important to ensure:
– You actually need them
– They’re optimised and exported, using the right format
– They’ve been compressed, removing any redundant bytes
Images in your design will often fall into three categories: graphical interface elements such as icons; images crucial to the content; and images merely used as decoration to enhance the experience.
The explosion of high-resolution ‘retina’ screens has complicated this further. You’re left in the catch-22 situation of wanting to send larger images that look sharp on retina screens, but you can’t be sure of whether the user is connected to blazing fast WiFi capable of the download, or a weak 2G or 3G connection that is not, due to data limits.
For this reason, use resolution-independent vector formats wherever possible, especially for interface elements like icons. SVG is becoming a widely supported (caniuse.com/svg) format across mobile platforms that will ensure your graphics look sharp whatever the resolution, at a far smaller cost to your users. Alternatively, Icon Fonts are another viable route for implementing vector graphics in the design.
For photographic images where SVG wouldn’t be suitable, you’ll need to use bitmap images. Before exporting JPGs or PNGs, optimise the image by selectively blurring parts of it that are not essential, and cut down the number of colours where possible. These techniques reduce the overall file size of the image, without diminishing what the image is communicating.
The layout and flow of content is critical to the user experience, especially on mobile where screen size is at a premium
Consider how your content is structured and presented within a limited space, and how easy and logical it is to navigate from one section to the next. To design the perfect layout for mobile and create a genuinely enjoyable user experience, you first need to understand the tasks users want to complete. To better understand their needs, it’s recommended to conduct research by:
– Interviewing them (either face-to-face or remotely).
– Performing card sorts and surveys.
– Analysing available data and trends.
– Even just observing how they use relevant apps and websites.
All of this gives you a better insight into your users’ mental model (the past experiences they will apply to how they will use your app or website). From this base, you will be able to map out and prioritise the layout and flow of your design, according to the needs of your users.
When designing responsive websites, layout patterns such as ‘Off Canvas’ or fluid grids help to deliver richer experiences that feel tailored to the device and orientation chosen. The ‘Off Canvas’ pattern removes clutter from the interface by taking advantage of space off-screen to keep extra content or controls hidden until the user exposes them. Prototyping tools like POP (popapp.in) are a great way to quickly test and iterate interface design ideas with real people. You can learn which layout patterns and interaction flows deliver the best experience – helping users find key content and achieve their goals.
Lastly, the subtle use of transitions and animations, from squashing and stretching, to shaking and sliding, can help breathe life into layouts and user journeys. A little movement can draw attention to key information, clarify the status, provide context and, importantly, add a touch of magic to the mobile experience.