Designing for mobile

booncon pixels mobile responsive design
Where is your phone?

Based on our previous post Ready for Mobile? it is clear why mobile devices are hot right now – in 2014 mobile devices will surpass desktop devices in amount.

What this means for businesses is a new era in digital tools. Company websites, online stores, applications, campaigns, everything online should be awesome also when viewed and used with a mobile device. However, this is hardly the case right now.

The do’s and dont’s of mobile design

Our team has been working with mobile solutions and put together a list of do’s and dont’s of mobile design.

DO

1. Think about your content from the mobile point of view!

mobile web design platform

Arrange all of your information for a website, online store or application in the order of importance. Think about the information. What are the pieces you want all your mobile visitors to see? What are the actions you want all of your mobile visitors to take?

Since mobile devices are, in general, smaller than desktop devices, the content and functionality has to be optimised for them.

One philosophy for this is the Mobile First way of thinking. It guides designers to start with the mobile design and then move on to desktop devices.

…don’t try to squeeze the PC world onto mobile — but instead fit just right on mobile. It’s more than just avoiding mistakes, however. Designing mobile first is about exploring, sharing, and embracing new ways of doing things. It’s an exciting time in design. – Luke Wroblewski, Wired, Sep 18th 2013.

2. Decide between responsive and a separate mobile version

When designing anything to work smoothly on mobile devices you need to decide whether you want to have a responsive solution that functions on all device sizes, or whether you want to create a separate mobile app.

Pros and cons exist for both solutions, but a clear decision is needed to create something that works.

DON’T

1. Underestimate mobile users

Right now you might not yet have that many mobile users to please. This does not mean that even this small group would settle for a so-and-so functioning website, online store, or application.

If your solution doesn’t convince your visitors they are out in seconds and it’s double as hard to get them to come back.

2. Settle for a quick fix

This one should be self-explanatory. Quick fixes do not work. If you decide to invest in mobile, do it right the first time.

3. Make your visitors wait

One of the limits for mobile devices is that they are mostly used when on the move. Quite often when people are trying to fill in time. When on the move the networks are usually slower than the ones used with desktop devices. This means all of your content loads slower. So, aim for less complicated content and a faster load time.

A quote to keep in mind is one from Mike Krieger, the co-founder of Instagram:

“Who wants to wait while they’re waiting?”

4. Forget to double-check everything

When desigining and building something it is vital to have someone from outside checking the end product. They will tell you in split seconds if something isn’t working or if you forgot to include a vital piece of information.

Especially younger siblings have proven to be ruthless with technical feedback 😀

Our favourites

A few companies have really nailed it with their mobile design, be it native mobile apps or responsive websites. These are our favourites:

Pocket app

Pocket is an application that helps you to save interesting videos, articles and pictures for later reading. Our team uses it more or less everyday when browsing through intruiging information online.

pocket app mobile responsive browsing

What makes Pocket an example of a great mobile design is its ease of use, intuitive user experience and logic. In picture 1. you can see the overview of the app. It lists all your saved items and you can scroll down to see more. By swiping to right on the left side of your screen (pic 2.) the menu appears, swipe back towards left and it disappers.

When swiping left on top of an item (pic 3.) you see a list of actions for the item: tag it, archive it, favourite it, delete it, or share it. In picture 4. an article is opened inside Pocket. The user never leaves the app unless specifically wanting to.

SLUSH app

Our team really enjoyed using the 2013 SLUSH app by QVIK. Again, easy to use, logical and also visually very impressive with nice little details in transitions.

slush startup event mobile app

Picture 1. shows you the overview of the app and event news. It also immediately displays the most important and commonly used functions for an event: info, agenda and map.

Again, intuitively, when swiping to right on the left side the menu pops open (pic 2.). This time with some nice details in the transition 🙂 Picture 3. shows the agenda of the event. This is something many mobile apps and sites fail to get right. In this one, however, information is clear, reabadle and in a user-friendly form.

Following the same style, the map of the venue (pic 4.) is clear and makes it actually easy for a user to know which way to go.

HRT responsive website

The Helsinki Region Transport has succeeded extremely well in creating a user-friendly, clear and visually appealing responsive website.

hsl user experience responsive web site

The very first thing a user sees is the journey planner (pic 1.), which is probably the most popular reason to enter the website. Next on the page you’ll see the most recent news, which might affect your journey (pic 2.). Keep on scrolling and you’ll find all the needed practical information from ticket prices to how to contact the lost and found services (pic 3).

At the bottom of the website, separated with a dark grey background, you’ll find all the official info about HRT (pic 4.).

Almost there

Rock Werchter, a yearly rock festival in Belgium, is a perfect example of almost making it with their responsive website.

 rock werchter responsive website mobile devices

In the first picture you see the overview of the website. It looks all fine, guiding a user to buy tickets quite strongly. There’s one important thing missing, however. Checking out a festival website in addition to tickets and lineup, what do want to know…? The dates of the festival. On desktop devices and basic tablets the dates appear below the very first title “Rock Werchter”. In the mobile view for smartphones and small tablets this information has disappeared and you have to click 3 times to get to a page where the dates are visible. This is unecessary extra effort for users.

Another major minus for this website is the actual ticket service website (pic 4.). After clicking “get your tickets now, click here” the user is taken to another website, which is in no way mobile friendly. This is when the user most likely leaves and doesn’t buy a ticket.

The cringe-worthy ones….ugh

The following don’t need any explanations. Just imagine how long you would stay on a page or app like these…

non-resposive sites

psst…!

If you have a mobile optimized site, direct mobile device users there automatically 🙂

Until next time…

Get your daily dose of web design inspiration from booncon PIXELS!


Sources:

http://www.wired.com/opinion/2013/09/designing-for-mobile-means-ditching-deeply-ingrained-pc-instincts/

http://www.lukew.com/ff/entry.asp?1841

http://getpocket.com/

http://www.slush.org/

http://qvik.fi/en/

https://www.hsl.fi/en

http://www.rockwerchter.be/en