Published: 17 August 2016
Mobile First UX & Design
As an Agency, we have the privileged access to be able to delve deep into our client’s sites behaviour and see first-hand the trends that are emerging. Within the travel industry we observe that mobile usage is increasing, tablet is tapering off with mobile gaining market share of desktop views.
The increase of consumer adoption of technology platforms is not just focussed on the young! We bear witness to daily commuters glued to their phones researching, planning and ‘pinning’ their next dream holiday – escaping from the present! This perhaps exposes the common myth that people only browse on mobile and don’t buy? Even if this is the case, isn’t there still a place for graceful mobile led design?
We at Sagittarius believe it is important to think beyond the present and encourage users to make the next step. If we make ‘buying’ easier on mobile, then maybe we would see more people buying...it’s that simple!
Why mobile first?
To put it simply, it’s the hardest, smallest platform with the largest constraints. Therefore, if you design with mobile first, you design all the essential features. The theory being that if your site is good on a mobile device then it seamlessly translates to all other devices.
As mobiles present us with so many design limitations, it also makes you prioritise content…and we all know that content is king! Therefore, if you focus on the content, then you focus on the user and your design becomes driven by your goals.
Responsive V Adaptive Design
There are different ways to go about designing and building sites suitable for mobile devices, all of which have their own merits. With this in mind, the big debate is whether you should design an adaptive or a responsive site.
Adaptive Design (AWD, or Dynamic Serving)
Adaptive design, uses fixed layouts based on breakpoints which don’t respond until they are initially loaded.
This offers clients more flexibility to create entirely new interfaces and user experiences based on the platform which can therefore reduce load time. However, this can also increase the cost of the build as you are effectively designing 2 or 3 sites instead of just the 1. We typically see this approach if a client wishes to retrofit their site to accommodate for mobile users rather than re-design their platform.
Responsive Design (RWD)
Responsive Design, uses fluid grid layouts which adapt to the size of the screen and therefore work on any device size.
Typically, the majority of the sites that we now UX are based on the Responsive Design approach. With devices changing and morphing in size, it allows the design to be as future-proofed as you can expect. Unfortunately, one downside of this approach is that it doesn’t offer the user as much control over the layout, but it does on the other hand take a lot less time to maintain.
One aspect to consider with a responsive site is that they can suffer with site speed, therefore ensuring that all imagery and videos are optimised is key. It is also important to consider the visual hierarchy of components as they shift and move on each device.
My Top 10 UX Considerations for Mobile
- Above the fold / above the scroll
You have (on average) 15 seconds to attract the attention of an average visitor. Take the user on a journey and try and break away from displaying key content ‘above the fold’.
- Show and hide content
Take advantage of ‘hidden on mobile’ and only show users essential information, don’t bloat their journey!
- Large clickable areas
Google’s Developer’s Guidelines, recommend that your key touch points should be no less than 48 CSS pixels tall/wide, with less-frequently used links being smaller.
- Touch animations on mobile.
Just because you can’t have hover features, doesn’t mean you can forget the micro-interactions on mobile. Create seamless design. Pygmy Elephant demonstrate effortless interactions both on their mobile and desktop site.
- Beat the long scroll
Parallax design sees the background and the foreground of a site (or differing layers of the background) moving at different speeds. The Gramercy Park Hotel in NYC demonstrates fluid parallax behaviour and also presents an alternative approach to mobile experience.
- Card design – nurtured by Pinterest
Don’t beat them, join them! Open up 10 Apps on your phone and count how many of them use Masonary (grid) or Magazine layouts? Why so many? Simple - they are compatible with mobile screens and are perfect for a Responsive Layout!
- Sticky Navigation
User sticky navigation and visual clues to help the user navigate up and down the page.
- Motion & Visual hierarchy
Entice and reward your visitors! Animations make the user feel more connected and help breathe life into the scroll. Check out Parcours Canada for some travel inspiration!
- Identify the most important tasks
Help the user by identifying key calls to action and offer a search functionality so users can find what they want quickly and easily. Don’t over design it!
- Make it easy to come back
Take a tip out of Pinterest and AirBnB’s book! Let your visitors love, like and share!
We at Sagittarius help you establish a pallete of baseline features to enhance your mobile experience. We interrogate the data so that you don’t have to remove content, we just help you establish primary, secondary and tertiary Call’s to Action to establish a great User Experience. As Nielson Norman from the Group Design Consultancy effortless summarised "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.”