Sunday, 11 May 2014
Top 3 Irrational Fears when Designing Web Sites for Mobiles
Over the last three years there has been an explosion of web development for apps being required to run in browsers on desktops, laptops, mobile and tablets. With the savvy user, moves to improved touch acceptance and further short attention spans, user interface design has changed.
Prior to the current climate, everyone wanted to direct users to their own native apps that would give a richer experience. It is now accepted that rich native apps are the domain of the user who has already committed to your brand, service or product. They have been using your online or offline business for a while and now want quick and continuous access to you.
It is not often the case that users are won over to loyalty and consistent use to mobile apps unless there is a gimmick, game or hardware specific reason for the uptake.
A lot of people are using the browsers on their phones and tablets, in the same way that they use the browser on their laptop or even more retro desktop machine.
This means that every web developer must be aware that they are designing their apps for users who will browse them on multiple platforms, in multiple browsers and with very little momentary predictability.
With this in mind, developers are freaking out about what good web site design means. With that panic comes fear of moving from old web design habits based in skeuomorphic principles to newer interactive flat designs.
When I work with people to build multi-view web applications (usually in ASP.NET MVC), I make an effort to beat out of them their top 3 irrational fears.
Mobile over Everything
No matter what you tell yourself or how much you want to believe that people lounge in front of their laptops on the couch at home using your web site, you will have to come to accept that the majority of people will view your site on a mobile device.
If this isn't in the case right now then it will be absolute within the next year. People use their phones to check the weather instead of walking outside. People use their phones to access social media before they roll over and kiss their partner good morning. People judge your web site by the way it looks in their mobile browser.
You don't want to fail at this step. Don't be afraid though, this like everything else in our profession is a solved problem.
Scrolling over Pages
As touch interaction becomes more useable with newer mobile phones, tablets and touch enabled laptops and monitors people are more inclined to click on links on websites. However, this is more usable in higher resolutions and not always so friendly in the phone space where you sometimes feel like you are bashing the screen with your gorilla fist.
With that in mind, the rule of never scrolling that we were taught at the start of Web 2.0 is no more. Scrolling is what people do without hesitation or irritation on mobile devices. It is an opposable thumb swipe that behaves exactly as they expect without the concerted effort of clicking a link between two other links that might not be the one you meant to click.
Stick with the rule of scrolling in one direction and you will have happy users. Never scroll in two directions because it jolts the user in to having to work out if where they are going and what they are doing. One dimension only.
Always choose to put more information on a screen and let it be scrolled rather than asking the user to page.
Minimalism over Sensory Overload
Flat design is the word of the moment, although it has been around and had requests for seconds since well before iOS7. Even Microsoft pushed for minimalism in Visual Studio 2012 onwards, to the astonishment and even disgust of some devs.
Developers, especially front-end focussed ones, still tend to lean towards bringing the richness of dedicated clients to the web. Instead, the current trend is to bring usability and simplicity to the web so that mobile users are not fighting the animations and over-populated screens to get what they want done.
If you can make it simple then do. No one is impressed with the equivalent of a 1997 HTML blink tag when they can look at a clean screen and find what they want with not too much mental effort.
Remember those three guiding principles and you can start moving in the right direction, if you aren't already thinking this way.