iAllenkelhet er firmabloggen til Netlife Research. Vi lager slanke, lettstelte og effektive interaktive løsninger som gjør at du oppnår dine mål og
får fornøyde brukere.
5 lessons learned from a mobile first, responsive design process. 3
Av Will, 24. mai 2012
While designing a portal for finding and comparing dentists’ prices across Norway (to be launched later this year), @schjonhaug and I decided to dive fully into a mobile first approach. We designed the site for mobile screen sizes, and then gradually made it into a fully fledged responsive site through several iterations, user testing along the way.
Here’s some of what we learned during this process:
1. Prioritisation comes naturally, go with it!
Given that mobile content is largely structured in a linear way due to the relatively small width of a handset screen, we quickly sketched out rough page concepts, with each unit of content stacked on top of each other.
One of the main benefits of designing mobile first is forced prioritisation of content. While this is potentially obvious, it cannot be overstated. Sidebars for stuffing extraneous fluff became a thing of the past. Anything that did not aid the user to achieve their main goal could be either left out altogether, or placed further down on the page, if absolutely necessary.
This prioritisation early on helps retain focus when designing for larger screen sizes later on, but can also lead to some tricky situations, as can be seen in point #2…
2. Combine pages rather than adding content
As the content had been cut to the bone for the mobile experience, there wasn’t much content left to “spread” to fill the larger screens, but we didn’t want to resort to reintroducing content we had already managed to strip away.
The main task of the site, to find a dentist, on mobile screens, consists of either searching directly by location, or navigating through a few simple pages of place lists (region > commune > neighbourhoods > top results). This process of page by page navigation was so stripped down that it was decided the entire process could be take place in one page on tablet sizes and up.
By introducing a map, focusing on this, searching and displaying the results dynamically, we were able to use the space in a more efficient way and consolidate multiple mobile pages into one on larger screens.
3. Links like going from mobile to desktop
One unexpected benefit of designing for a mobile screen first was link styling. Traditionally, designing a desktop-sized website could potentially lead to small links which, while browsing with a mouse might work fine, but prove to be problematic with an inaccurate finger for tapping on a small screen.
This situation was reversed in our case, as all links had a large tap area and solid colour-blocked hover state, which worked as an active tap state on mobile. On larger screens, we found this translated really well to mouse hover, without having to do any extra work. The other way round, at least in our case, would have certainly involved more effort.
4. A menu toggle button is not enough
In order to maximise space usage on mobile screens, we decided to hide the top level navigation, consisting of five items, in a “menu toggle button”. The full, expanded navigation was also included in the footer of the page.
This approach is clearly not new, but we found all the same that in user tests, some would see and use the top menu button, but those who didn’t would scroll to the bottom in any case and find the footer navigation. No one was ever lost, but it was certainly key to include the full expanded footer menu.
5. Don’t forget the big screens!
It’s easy to get carried away in this all-mobile first approach. We went straight from sketching out wireframes into HTML prototyping, with CSS catering solely for the mobile experience. Only after having fleshed out the site into a working application, did we begin to sketch out the transition to larger screen sizes.
Aside from some general thoughts, this was the first time in the process we concretely worked out how the site could adapt to larger sizes. In hindsight, this phase could have been smoother if we had planned some designs for larger screens right after the initial mobile sketches, before the HTML prototyping.
What lessons have you learned, designing mobile first?
Etter at jeg ble konsulent, har jeg opplevd flere ganger at en kunde ber meg hjelpe ham eller henne med å overbevise en sjef om at et eller annet er riktig og viktig. Det er alltid hyggelig å få oppdrag, det alltid fint å kunne hjelpe til, og det er som regel mulig å lykkes, […]