Designing a ‘best-in-class’ mobile web site
Fighting against the ‘design by committee’ crowd has always been a challenge for a design lead
It is a delicate balance between satisfying the key stakeholders and showcasing a worthy design solution. There will also be a ‘safe’ option, but as a designer of merit you should be pushing for Revolution not Evolution.
I have been instrumental in delivering several mobile web solutions recently, and I’m finding it more and more exciting the bigger the brand you work with. I had some fun designing this (the names have been changed to protect the innocent!) and hopefully the rationale will be useful for other designers out there.
The ultimate objective of a mobile users is to complete their task (where ever they are) efficiently and effortlessly.
My (most recent) top three points for designing for mobile web:
- Implement mobile first technique from day one. Insisting that there is a constant and understandable typography decision cross-site. If you do this well enough your designs will be the benchmark to measure all other communications company-wide
- Design for the majority. If you have some one or two users that register from Azerbaijan and there joint spend is zero then do not include them as a typicaly user. Take a decision and stick by it, you cannot accommodate these groups and provide an amazing mobile expereince. Find clever ways to handle this in the UI i.e. ‘more’ or ‘+‘.
- Don’t recreate the same barriers you have online. Look at where the barriers are and provide an interesting alternative. This is your job, you need to to use your design skills coupled with your skills of negotiation. Conceptualise and convince.
It important to think of new users like them could be going on a date with your site.
Guide them through a graceful, intuitive, and delightful get-to-know-you process by providing simple sign posts, ‘next step’ instructions to where they want to go.
Drilling down the product detail screens
Progressive disclosure is a fantastic ‘reading than action’ UI method. Providing a What Next footer acts as a sign-post to guide the user through. This reduces the barrier to entry and is rare enough to make the user sit up and take notice.
This is a very satisfying example of plugging all your kit-of-parts together to provide the utlimate mobile web page as an effective information giver.
- Headers as signposts
- Efficient use of progressive disclosure
- What Next to guide the user through their journey
The longer the user spends on filling out your form, the more likely it is they will drop off. How fast a user can accomplish a task on mobile is crucial. As a designer you need to always be aware of this.