Mobile app design: some lessons learned
Posted: April 15, 2012
Last week I took a week off from the day job to develop some ideas for a mobile app I’ve been thinking about for a while. Having some dedicated time to work on it really helped and also taught me a thing or two about mobile app design. In no particular order here’s what I learned:
Where to start?
I’ve been reading a fair number of books on the subject, including Luke W.’s Mobile First and the Sitpoint’s catchily-named Build Mobile Website and Apps for Smart Devices. However when I’d got beyond the initial sketching and wireframing stages I found myself at a bit of a loss as how to proceed until I decided there was no point worrying about the “app” side of things, I could just prototype in HTML and view via the browser.
No problem. However, after a day and a half of building some basic HTML screens I found myself bogged down with things such as icon size and resolution for the iPhone’s retina screen (I have an iPhone so am concentrating on designing for this, at least in the first instance). The work I’d done just wasn’t looking very convincing. I needed to up my game a bit if I was going to get anything done by the end of the week which led me to me to my next discovery…
Use a framework
Although I’d heard of various frameworks I’d more of less discounted them due to the fact they seemed like overkill and I’d have to spend a bunch of time getting up to speed with them before I could create anything. However I was at the stage where I thought they were worth another look. I looked at Sencha Touch for about five minutes before I went cross-eyed and then settled on jQuery Mobile which seemed much more lightweight.
Although jQuery Mobile does that jQuery UI thing of inserting a whole bunch of extra markup and styles into your code it does at least give you a load of common design patterns and interaction styles. Also, let’s face it when you’re prototyping it’s best not to get too hung up on final design but boil things down to key interactions and navigation flows.
Mobile design is not web design
Sounds almost too obvious to state but the reason I do is it’s interesting how much you really have to change your mindset when you approach a mobile app. This is not web design, it’s not even responsive design. Throw everything out and start from scratch. User flow and navigation become more important than ever. Just working out where the navigation should go in different contexts can be pretty challenging (hint: not just at the top and the left).
Get others involved
I’m lucky enough to know some talented developers who are keen at giving this whole thing a go too, which is handy given that about four days in I’d felt I’d gone as far as I could. Although I toyed with the idea of setting up some basic database I realised that this would soon make me quite angry and not a nice person to be around so I decided to drop a couple of friends an email.
Talking to someone else really helps put things in perspective as well as providing some practical advice about how to move forward.
So, the next steps are really to get back to basics: firm up the storyboards which can be quite illuminating in showing you the screens you’ll need (hint: a lot more than you probably initially thought). Once this is done, pass these on to others to take a look at and put a big black marker through anything that’s going to take too much time and set priorities. Then, some short, concentrated sprints to create some basic prototypes we can actually show people and see if it’s something they’d actually use.
So, overall this has been a worthwhile exercise, even if what I’ve learned is I know less about this area than I thought!
No comments? The comments haven't exactly been coming thick and fast recently so I've disabled them for the time being. Instead, why not drop me a Tweet at @littlednet or email me at firstname.lastname@example.org?