10 ways to improve your mobile experience

This week on the Boagworld web show we discuss 10 ways to improve your users mobile experience.

Play

Paul Boag:
This week on the Boagworld web show we discuss 10 ways to improve your user’s mobile experience… [groaning]

Marcus Lillington:Oh, shut-up.

Paul Boag:
I don’t want to do this. I want to lie down.

Marcus Lillington:You want to lie down.

Paul Boag:
I want a little lie down.

Marcus Lillington:I know how you feel, Paul. I know why you feel like that.

Paul Boag:
So we’ve been away haven’t we, Marcus.

Marcus Lillington:Yes we’ve had to work very hard.

Paul Boag:
We did, we’re not used to working hard. Now, we’ve been out in America, working with our first higher education client out there. Yay, and it was a really good week, I really enjoyed it. But, boy am I knackered now, unbelievable.

Marcus Lillington:I know, I mean I slept like a baby on the way home, well – that’s an exaggeration, I slept on the plane on the way home and I still feel like, well, crap, basically.

Paul Boag:
But I don’t think…

Marcus Lillington:It’s Wednesday now, I should feel better by now.

Paul Boag:
I know, but I don’t think it’s the jetlag. I think it is intensity of what you do when you’re out there. And it sounds stupid, doesn’t it, because essentially all you are doing is sitting and listening to people because we did a lot of stakeholder interviews, which are always – where basically you’re just sitting in a room listening to what people have got to say but I just – I don’t know, it’s so tiring, isn’t it?

Marcus Lillington:Yes, I think it’s age as well, Paul.

Paul Boag:
Do you reckon we’re just getting old. It was really funny just before we started recording this, we were talking about, can we retire yet, is that an option?

Marcus Lillington:No, not that old unfortunately.

Paul Boag:
No, well who says you shouldn’t retire until 65? We just need to find somebody to pay us lots of money so we can retire.

Marcus Lillington:That’s like when people say, oh, I wouldn’t know what to do with myself and I’m thinking well I bloody would.

Paul Boag:
I probably wouldn’t but I am quite happy to sit staring into space until I die basically, that’s fine by me. No, I would just play lots of computer games. And so, at the moment I’ve turned into a gamer which is really weird. I haven’t done that for years.

Marcus Lillington:Yes. It has to be a very special game to get my attention.

Paul Boag:
Well, I think I’ve finally discovered the kind of game I like. For years I thought I liked kind of open world games like MMOs and that kind of thing, right, massive multiplayer for you, Marcus, because I know you don’t know the kids language.

Marcus Lillington:Lingo.

Paul Boag:
The lingo. But I’ve discovered actually what I like are cinematic games, games that basically you’re kind of going through a movie. So I’ve really enjoyed the latest Tomb Raider, really good story, really, really engaging and you just want to give because it’s a younger Lara Croft and you just want to give her a big hug because she’s having such a bad day and getting beaten up so much and you just want to make it better.

Marcus Lillington:You still must have to kind of jump through fiery hoops and get your timing right and grab on to that ledge and all that stuff.

Paul Boag:
Yes, you do but I just play on easy.

Marcus Lillington:Yes, I agree with you there. I can remember, and the last time I played a game like that was Half Life, that’s how long ago I played a game like that and yes, always easy.

Paul Boag:
Yes, it’s like why make life hard for yourself. Life is hard enough, isn’t it, without making computer games hard too.

Marcus Lillington:Quite, quite, yes.

Paul Boag:
And then I am also playing another game called Last of Us which is a zombie game and that actually I don’t know why I am playing that one, within about the first 10 minutes, they immediately kick you in the gut, right at the beginning, it’s like emotion rollercoaster from moment one.

Marcus Lillington:Right.

Paul Boag:
So I don’t know why I am playing that one. But again it’s such a – I mean it is incredible, these are like full on blown movies these days, beautifully acted, really, really compelling, just brilliant, they really are works of art these days, you ought to have another go Marcus.

Marcus Lillington:Yes, I don’t like games that are too big, I want to be able to go away for 10 minutes and have a play and then come back again.

Paul Boag:
Yes, you are more of a casual gamer.

Marcus Lillington:A casual gamer, yes, Limbo was fantastic.

Paul Boag:
What was Limbo?

Marcus Lillington:Well, go into the app store and buy it, it’s probably about, first time through, you will do it in a few hours.

Paul Boag:
Is it a puzzle solving game?

Marcus Lillington:It’s this little boy who goes into Limbo to find his sister.

Paul Boag:
Okay.

Marcus Lillington:And he comes across lots of problems he has to – it’s not – it’s – play it.

Paul Boag:
Okay.

Marcus Lillington:It’s quite scary in places.

Paul Boag:
Oh that sounds good. So we’ve got to put a link in the show notes to Tomb Raider, The Last of Us, and Limbo.

Marcus Lillington:Yes.

Paul Boag:
That’ll annoy me when I come to do the show notes.

Marcus Lillington:Also Portal, I love Portal which is proper problem solving.

Paul Boag:
Yes, so I think this is my problem, I don’t like solving problems. I feel like I do that all day, so why do I want to do it in a game too.

Marcus Lillington:Because it’s satisfying.

Paul Boag:
I like shooting people, that’s much more satisfying.

Marcus Lillington:Well, yes. I guess that’s a similar sort of satisfaction, yes.

Paul Boag:
Putting an arrow through somebody’s head. That is one particularly nice thing about Tomb Raider, it’s got the most satisfying bow and arrow play that I’ve ever come across, it’s lovely. Anyway…

Marcus Lillington:The Half-Life Zoom in Crossbow was always my favorite.

Paul Boag:
Oh yes, that was good, zooming in. I am definitely a kind of stealth sniper kind of person.

Marcus Lillington:Coward, basically.

Paul Boag:
A coward, yes, I think that probably sums me up quite well, Marcus. So, anyway, this week, we ought to get on with this show before we fall asleep part way through. Because look 10 points always seems a lot doesn’t it? Okay, so we’re looking at 10 ways of improving your mobile experience. It was because I wrote a blogpost that I posted recently about 10 ways to improve your checkout system or something like that and I’ll put a link in the show notes to that and somebody commented, oh can you do this for mobile and I thought, no, I can’t be bothered. But then it occurred to me it’d make a great podcast. So we’re going to look at 10 ways for improving your mobile experience on a website, but of course now, not just checkout and ecommerce but just generally. Because of course now mobile is so massively important and it does amuse me, that companies are scrabbling to sell out their mobile offering. I remember talking about this in 2006.

Marcus Lillington:Well, you know, you are so ahead of your time, Paul.

Paul Boag:
I am and it was, well, only because Cameron Moll was. Cameron Moll wrote a great ebook back in 2006 about what mobile was going to do. I’ll see if I can find a link for the show notes of that as well and yes, he wrote this great book and it was like yes, this is going to happen and every year from then on I was going, right, this year’s going to be the mobile year and it wasn’t and now it is, well, it has been for a while, hasn’t it now?

Marcus Lillington:Seeing as you are so up to speed with the subject do you actually need me for the next bit?

Paul Boag:
Yes, I do because I am sure you are going to have a lot – what I envisaged – do you want to know what your role is for this podcast? It’s to moan about each point.

Marcus Lillington:Moan about it, okay.

Paul Boag:
Because I think for each of these points you’ll go, oh, yes, I went to this app and it was really shit for this and I think you’ll rant, you will be our Average Joe consumer going, this sucks.

Marcus Lillington:Right, okay.

Paul Boag:
I don’t think it’ll apply to all of them but it will to some of them. Shall we kick off then?

Marcus Lillington:Yes, let’s do it.

Break based on content not device

Paul Boag:
Alright, so number one in our list of ways to improve the user’s mobile experience is to choose your break points based on the content and not the device. So what do I mean by that? I think what there is a little bit of a thing.

Marcus Lillington:A thing.

Paul Boag:
A thing, yes, where people are going, okay, so I am going to design a desktop version and a tablet version and a mobile version. Okay, so what’s the tablet version or let me get out whatever my tablet happens to be whether it be an iPad or a Galaxy Note or whatever. I don’t know whatever the young people use these days. And I’ll go, okay, so that’s got that resolution, that’s going to be where my break point is which is a very dangerous line for lots and lots of reasons.

Marcus Lillington:See I thought we’d go around this, I thought this was the thing of the past but it’s talking to – I can’t remember who I was talking to about it, and there was an expectation of that’s what responsive design was, pick these different points where you are going to break the – where the design’s going to break into a different layout. It’s like oh no that’s not right.

Paul Boag:
I think it’s again it’s that kind of leftover desire from print to know what your canvas size is.

Marcus Lillington:Yes.

Paul Boag:
And they kind of accepted there isn’t a one canvas size now but then surely there is three, there is a mobile, or the tablet and a desktop. But of course the trouble is, there is an infinite number of screen sizes and resolutions and all the rest of it and you’ve got – I mean Android, if you take Android alone, there are just a phenomenal number of screen sizes but even if you’re stupid enough to go, oh, well, we’re going to focus on the iPhone, which by the way is stupid arse to do, but if you do, do that, even then you get into trouble because I mean what we’re probably weeks away now from an iPhone 6 coming out and that’s going to have a different screen size again and you can pretty much guarantee we’re weeks away from a Apple Smart Watch coming out or being announced and again that will be a tiny, tiny screen. So you just can’t think in terms like that, you have to think basically take the content of your website, say, start small, start down at whatever, as small as you feel you can get away with and start scaling up your browser and go, okay, so what do we look like, is it beginning to look stupid now because it’s just got one column, is it time to now switch to two columns here, is it time to increase the font size a little bit, so the line length doesn’t get too long, that kind of thing. So basically you are just breaking – you are changing your break points where the content demands it and not really worrying about the device because that way it’s going to look great on whatever comes along, past, present or future isn’t it, so that’s the first point, break based on content and not device.

Keep those links well spread

Okay, so next up is to keep those links well spread.

Marcus Lillington:What does that mean, Paul?

Paul Boag:
Well interestingly the organization we’ve just been talking to, out in America, we did a review of their site didn’t we and their site is not set up for mobile at the moment so it’s a real pinch and zoom kind of scenario there. And everybody in the organization knows it needs to be sorted for mobile and that’s great, it was actually really encouraging to find everybody was pulling in the same direction over that. But on their existing site one of the things they’ve got is, mega menus, drop down mega menus and even if you pinched and zoomed these drop down mega menus have massive lists of links in them and all these the text on these links was something like 10 point of something, it was tiny, tiny text and they were all really closely put together and so even if you zoomed right in, you couldn’t click on one link over another. And that’s the big problem because of course you get a lot more precise control with a mouse than you do with a touch screen, so it’s really important that you spread out those links, well, where possible run them horizontally rather than snacking them vertically because immediately that’s make a bigger touch point but if you have got them stacked vertically then make sure they are well spread apart so that it’s easy for someone to select one link over another.

Marcus Lillington:Especially if you’ve got big sausage fingers.

Paul Boag:
Like, I don’t know, you for example.

Marcus Lillington:Fairly sausagey. Yes.

Paul Boag:
You find touch screens quite difficult sometimes, don’t you?

Marcus Lillington:Well, I find smartphones difficult because my eyesight has gone.

Paul Boag:
Ah we come on to that later.

Marcus Lillington:But yes, mega menus a funny thing, aren’t they? I mean sometimes they are really useful. I am thinking of the law firms like we did Dickstein Shapiro where although we had – their main nav had mega menus for all items and that’s recently been reduced to two for the reason I am about to give that basically if mega menus can add something rather than just being a list of links then I think they have value. And I am thinking of the people drop down where you can kind of do an A to Z quick search, you can do a person tech search.

Paul Boag:
Yes.

Marcus Lillington:In the drop down and that’s, you’ve got a highlighted attorney as well. All of that stuff kind of adds value but if it’s just a bunch of links then why not just let people click through. Particularly bearing in mind what we’re talking about here when it goes down to small screen size, obviously screen size, the small screen version of Dickstein loses the mega menu but it doesn’t if you haven’t got a responsive design.

Paul Boag:
I think that’s a – you make quite an interesting point there is, it’s just because links are closely packed together, on the desktop version using a mega menu or whatever else, it doesn’t mean you need to do it in same way on mobile, you know what I mean? You could decide not to have a mega menu on a mobile device or you could decide to spread the links or present them differently. I think sometimes with responsive we get into the mindset, responsive is essentially just about changing the layout, but it doesn’t need to be, it can be much more fundamental than that, it can involve different typography. You could even change the color scheme if you wanted and I think we need to be much more imaginative in the way that we use responsive than we are at the moment and that is another thing that always amuses me which isn’t in the list, is, when companies say, oh, yes, we’ll make your site responsive, an agency says, we’ll make your site responsive, I think it’s really quite important to kind of pin down what do you mean by that because there are lots of different degrees of responsiveness, how far you go. So I think it’s quite important to kind of define in more detail what you are talking about when you are saying it’s going to be responsive because it’s quite easy to do a fairly bodge-it job and call it responsive. So, yes, anyway. Alright so let’s move on to number three.

Watch that complex javascript

So this one is a more techie one, Marcus.

Marcus Lillington:Yes, can I fall asleep on this one?

Paul Boag:
Well…

Marcus Lillington:Can I make a cup of tea or something?

Paul Boag:
I think you’ll have experienced the consequences of it and it’s basically to watch that you’re not using complex Javascript. Now the reason being is that smartphones are not as powerful as your desktop computer and I don’t know whether you’ve ever experienced this but I’ve comes across websites that really will slow down on a mobile device or hang the browser entirely, have you ever come across that?

Marcus Lillington
I have, yes.

Paul Boag:
And often I think that’s because it’s got quite heavy duty Javascript that hasn’t been optimized for mobile devices and so you can get quite a performance hit if you are not careful, not in terms of necessarily download but in terms of how sluggish it feels in the browser and I think this is particularly important because users are used to mobile apps, native apps that are very snappy and very fast and then suddenly you get this kind of what feels like quite an inferior experience on a website because the Javascript is chugging away and the browser isn’t doing a particularly good job at it. So just keep an eye on that, I don’t think this is as major a one as some of the other issues so I am not going to dwell on it massively but I have noticed it one or two times on a few websites that I have visited. And it is yet another reason in my opinion for using Javascript lightly. I got myself in trouble recently on Twitter over this because I basically said where possible websites should work without Javascript enabled and that caused a huge uproar saying, Javascript is part of the modern web blah blah blah, and I am not saying that you shouldn’t use Javascript, all I am saying is where possible progressively enhance, have it working without Javascript and then layer in Javascript on top of it. Now, admittedly if you are talking about a kind of web app rather than a website then that’s probably a more unrealistic expectation. But I think once you start getting into web applications then maybe you are better off, certainly considering whether you want to build a native app in such cases rather than a web app if that makes sense.

Marcus Lillington:Well, I am pretty sure I am correct in saying that, if your website doesn’t work without Javascript then it doesn’t reach certain WCAG levels.

Paul Boag:
Yes, absolutely.

Marcus Lillington:I think it’s the lowest level.

Paul Boag:
Yes, I mean, this is an interesting one and again causes arguments because the truth is that screen readers always used to be a problem group when it comes to Javascript but actually screen readers is just a layer that’s layered on top of your browsers, so they can – it’s not that they can’t understand Javascript, they can understand it because if the browser can understand it so can the screen reader. The problem is, is that some uses of Javascript can cause problems, so for example, as with all things, it’s down to how well you code it and how well it’s created. So for example, let’s say you update a piece of content on the page using Ajax, okay? So someone clicks a link that updates content on another part of the page, in theory that’s fine because a screen reader user if it’s coded correctly can be notified of the change and moved to it, but often the case is, people haven’t thought of that and so therefore the screen reader user will be completely unaware that something is updated on the page. So that’s one example. Another example is not putting keyboard navigation into it. There is – breaking the back button, there’s all kinds of different things that you can do badly with Javascript. So it’s not that Javascript is inherently inaccessible, it’s just that it can create problems if you are not thinking through all of the ramifications of it and that includes how well it’s going to run on a mobile device. So it’s a tricky area, Javascript. Shall we move on to number 4?

Marcus Lillington:Move on, yes.

Serve the appropriate size image

Paul Boag:
So we move on to number four. So this is quite an important one I think because it can make all the difference on your mobile app which is to serve the appropriate size imagery. So what do I mean by that? Well, again, as with all things it’s not black and white. If I am using a mobile device it is possible that I am using a cellular connection, okay?

Marcus Lillington:Yes, correct.

Paul Boag:
I suppose equally if you are using a desktop device. It is possible I am using a cellular connection but certainly when you are using a small screen device, you don’t need to download and serve very large images because if you are viewing it on a cinema display monitor you are going to need a bigger quality image to display than you are on a kind of 4 or 4.7 inch mobile device. So the kind of advice here is to think very, very carefully about what image you are serving in what situation on what device. Because if someone is on a cellular connection, you don’t want to be serving a bigger image than they actually need. That said, it is more complicated than that because a lot of small screen devices are actually retina displays, so in that situation you want to be serving a higher resolution image to ensure it looks good on that screen. Also just because someone is using a mobile device doesn’t necessarily mean they are using a cellular connection, they might be on Wi-Fi at home equally just because someone is using a laptop doesn’t mean that they are on a good connection. So there’s kind of a little bit of kind of uncertainty on this.

Marcus Lillington:So what should we do, Paul?

Paul Boag:
I know it gets worse, it’s worse than even that because also on some cellular networks the image is automatically compressed pretty damn well for you, especially on UK networks we seem to be better at this than in the US. So the kind of – the server is compressing the image as well. So what do you do? Don’t know really.

Marcus Lillington:Well, how can you have something serve the appropriate sized image? What is the appropriate sized image?

Paul Boag:
I think the advice I am giving here is to think about it and kind of come to your own conclusion. I don’t want to – in some ways I don’t want to give a black and white answer with this one because there isn’t one. My feeling is, you should be serving, I think, generally speaking, you try and serve a smaller image on a smaller screen size because yes, sure, it might be retina but actually – often times it’s when I say smaller I am not talking about physical dimensions, I am talking about file size, alright?

Marcus Lillington:Yes.

Paul Boag:
So, for example, it’s often better to serve a still quite a big image in terms of dimensions but at a really high compression rate and then scale it down in dimensions when it’s being displayed on a mobile device because actually that visually will look better.

Marcus Lillington:Yes, I mean that’s what we’ve done on the latest Headscape site I believe.

Paul Boag:
Oh is it. I don’t know.

Marcus Lillington:I wasn’t talking into the microphone there, sorry microphone.

Paul Boag:
I don’t get offended to microphone, it’s okay. I’ve since given up trying to work out what clever magic Dan does. But this is where I mean Dan, half the things that I am quoting in this particular podcast are straight out of Dan’s mouth, he is far cleverer than I am over this stuff and he’s spent quite a lot of energy looking at the appropriate image sizes and stuff and this is kind of – the answer I got from him when I asked exactly the same question as you just asked is, well it depends. So I don’t think there is a black and white answer to this but certainly carefully consider the best approach. I’d be interested in what other people do, so if you’re listening to this, pop along to the show notes which are at boagworld.com/season/10 and you can get to this episode which is number five, give us a comment and let us know how you are dealing with images because that’s quite an interesting one.

Don’t presume users are on the go

Okay, next one kind of follows on actually nicely from that because one of the things that we were saying on that last one is you can’t presume that someone who is using a mobile device necessarily is on a crappy connection and that is because you cannot presume that a user is on the go just because they’re using a mobile device. I don’t know about you, Marcus, but I seem to have – I spend as much time using my mobile at home as I do away, especially when I am watching TV.

Marcus Lillington:Yes, I think people use their iPhones, Android devices whatever on their home Wi-Fi probably more than anywhere else, to serve up kind of web related content, obviously for making calls and texts and things maybe not but for using is as a kind of minicomputer if you like, I reckon and I am making this up obviously but I reckon the most common place that people use it is on their home Wi-Fi when they can get served whatever they want basically.

Paul Boag:
And this is where it gets quite interesting because there was a train of thought, and it is a train of thought that’s going away thankfully. But there was a train of thought for a while, oh, if somebody is using a mobile device we need to prioritize content that mobile users might want like contact information because they’re walking down the street trying to find our address. And I just don’t think you can presume that. The truth is you’ve got no idea why someone is accessing your website via a mobile device and I think as a result you have to serve pretty much the same content. I don’t think you can presume one way or another. What is it they say about assuming? It makes an ass out of you and me, or me and you, I don’t know, something like, some witty thing. So yes, don’t make presumptions about what people are doing on their mobile devices, they might not be using it on the go.

Marcus Lillington:Yes, it’s only take away stuff that makes the mobile experience harder, that’s the only thing that I think like as we – like a mega menu for example.

Paul Boag:
Yes, I mean that’s about changing the interface not the content. Yes, so perhaps this one should be serve the same content to everybody. Don’t know, but certainly don’t presume that they’re on the go.

Think mobile from the start

Okay, number six and this is a really important one, think mobile from the start. The worst thing in the world that you can do is build a desktop website and then go okay so how do I make this mobile. You will make your life so much more painful. This is something Dan bangs on about endlessly, he’s so annoying which is that really you should start with a very basic content and work up in your design. That is a really hard transition to make for those of us that kind of have either come from a print background or have kind of come from the desktop era of the web to start by just looking at the very basic content and then building it up is a hard, hard thing to do but it is really, really important. So the way that I kind of do it is that I start with the individual – so you get your content in place, then you start styling the basic styling for typography, headings, sub headings, all of that kind of stuff, then after you’ve got that, then you start styling the different modules that make up your website, so whether it be a news listing or a search box or a header bar or whatever else and I get it styled for mobile. And then you start adding in some grid system, a grid system for on a tablet and on a desktop and then kind of adapt the modules for those different sizes at the end. It’s quite a hard way to work but it’s really nice because when you start that way around, you’re building yourself a pattern library as you go, link in the show notes to the definition of pattern library.

And that makes a huge difference, it makes the whole process much, much easier because you then got this’ve great library of modules that you can essentially re-use from template to template and ensure consistency across your site and all the rest of it. So it does make a huge difference starting with content, starting mobile first and building up.

Marcus Lillington:I agree that content first is right.

Paul Boag:
Yes.

Marcus Lillington:I think that mobile first is not really workable because in a kind of an agency client world where if I was a client, I would fit into this – well I was a client recently with the new Headscape site, I wouldn’t been able to go, yes, that design works for me just seeing a mobile version.

Paul Boag:
Oh, no, no, no, no, no I am not suggesting that, sorry, I didn’t mean to apply that. I think, yes, it depends on, I was talking about how you physically build the site more than anything else.

Marcus Lillington:Right, sure, okay.

Paul Boag:
But even in the design process I think it probably helps the designer a lot to start with content then do the mobile device, then do the tablet and so on and so on, up to desktop, then present it to the client. I think the client definitely needs to – essentially I think the client definitely needs to see those kind of three main views of the site if that makes sense.

Marcus Lillington:Yes.

Paul Boag:
After just saying earlier, not to break – to break based on content and not device, so I think clients often need to be able to see, you know, okay, it’ll look like this on a mobile device or it’ll look like this on a tablet et cetera. Now of course, whether you should be mocking those different ones up in Photoshop or whether you should be doing it in a browser, well, that’s largely up to you. That’s just however you choose to build it. Okay number seven.

Avoid form filling

Avoid form filling. I bet you hate this one, Marcus, I can imagine – I can just hear you swearing and ranting.

Marcus Lillington:Because you can’t – I am assuming and this is an assumption again, that the way that sort of text area of the screen is dealt with – appears it’s different from device to device, what usually happens with form filling is you can’t see what you are filling in because the keyboard covers up whatever it was you were working on. I mean you can get around it but it sort of becomes – obviously you are taking over half of your view if you like, so…

Paul Boag:
And it’s just typing on mobile devices is not the most pleasant experience, you’re more likely to make errors, it auto completes stuff and auto corrects stuff that drives you nuts and so I think – and actually I’m really pleased, this is one of the benefits I think that mobile has brought to the web as a whole is making filling forms bloody frustrating, well I’ll tell you why I think it’s benefited the web as a whole is because it finally made marketers pause from adding loads of optional fields in.

Marcus Lillington:Yes.

Paul Boag:
You know when they always used to kind of, oh, tell us your inside leg measurements so we can sell your data to third parties who want to sell you trousers.

Marcus Lillington:Yes, I think this point is really reduce forms to their most basic.

Paul Boag:
Absolutely.

Marcus Lillington:You can’t – some reasons for going to a website are to fill a form in, but yes, don’t make it any more difficult than it can be but also and I guess the point I was making and this is me not really knowing all of the different systems that well is you need to consider what happens when you tap on that form to fill it in, how does the view change and I think is something that maybe could be considered by a lot more website designers than they currently are.

Paul Boag:
Tab order is another really important one that’s kind of related to that because like for example on the iPhone when you are filling in a field there is a little arrow that lets you move to the next field and sometimes it jumps you all over the place because the tab order has not been set properly. So basically filling in forms is damn fiddly on mobile devices and you need to give it a lot of love and attention.

Marcus Lillington:Yes.

Paul Boag:
That’s the long and the short isn’t it and again this can be another situation where if you are not careful with bits of Java script you’ve got going on can cause all kinds of problems. So I remember filling in a form once where it had validation as you go, right? And so I was using the arrows to move between fields and for some reason I pressed it twice and it skipped a field because it had recognized that I had focused on that field it then tried to validate it, the validation was wrong and so it jumped me back up the page to show me the validation error and I lost my place in the form field, so you can have weird things like that. So you really need to kind of test on mobile devices for form filling to ensure that it’s not an absolutely pain in the ass basically.

Focus on legibility

Okay, this one is in here just for you, Marcus, because you are getting blind, aren’t you, in your old age?

Marcus Lillington:Yes, the difference because people laugh at me including you, Paul.

Paul Boag:
Would I laugh at you?

Marcus Lillington:They go, they just look at my phone and just start laughing, what’s wrong with them? And then they go, look how big your text is, and it’s like, well, actually there are many more options, I can make it much bigger but you get to the point where you can only get one word per line and obviously when I’ve got glasses on it’s fine, although I still wouldn’t want to go down to where I had it two years ago, kind of standard size but that just looks minute to me now, so yes, bear in mind that people who have standard sight if you like i.e. don’t wear glasses when they’re young, will all, this will happen to all of them at some point in their forties because the muscles weaken around your eyes and you just can’t focus on stuff anymore that’s close up. So, yes, I guess where I am going with that is that particularly if you’ve got an audience of 45 plus, bear it in mind. Bear it in mind for everyone.

Paul Boag:
Yes, I mean legibility is a huge issue I think on mobile devices and we’re not even just talking about necessarily the size of text, we’re talking about line length and spacing and all of those kind of things.

Marcus Lillington:Spacings are massively, massively important. It’s almost, spacing between lines is as important as the size of the text.

Paul Boag:
So, spend some time really thinking about it, it’s one of the things that I love that Dan has done with the new Headscape and Boagworld site is that as you scale that site the typography adjusts. So on a mobile device actually it does get kind of smaller which at some stage I think I need to have words with him on. But what he’s tried to do and I can totally understand why he has done it, he’s adjusted the line length, so the line length always remains consistent, even at a small screen size but when you scale up his website into a massive browser like a cinema display all the text gets considerably bigger because it’s making use of the available space again he is keeping the line length consistent and readable. So focusing on legibility I think is a really quite important area.

Consider one handed use

Number nine is to consider one-handed use, there’s been some really interesting research done on this about different ways people hold their mobile phones. Now, I sometimes think this can be overplayed a little bit because I think if someone is navigating a website, they’ll hold it in one hand and peck at it with a finger in the other but certainly if you are creating any kind of app, it’s certainly worth considering the positioning of buttons and key pieces of content on that. So for example, if you open your average app today, I don’t know let’s pick one. I’ve just opened Tweetbot, along the bottom it has all of the main sections that you might want to navigate through because your thumb can easily reach that and you’ve got this kind of arc that you can easily reach but if you want to reach say the top left corner of your mobile device actually it’s kind of a stretch. So you put less important stuff up in that corner.

Marcus Lillington:It depends on the size of your hand surely.

Paul Boag:
It does but it’s still a kind of fairly consistent – it’s still going to be easier generally speaking within that kind of arc. It also depends on how you hold it, because people hold their phones in different ways. There is actually several routes for holding it, I’ve been avoiding saying this but there is somewhere I have seen some great diagrams about this and how different people hold their mobile devices and the different reach they’ve got, I will try and find a link in the show notes to that one because it really does demonstrate how one handed use is quite an important factor to consider.

Marcus Lillington:Yes, I mean I don’t have a problem with it personally.

Paul Boag:
Do you not?

Marcus Lillington:No, I can use it one handed easily pretty much anywhere. I mean you just tip the phone toward you to get to the top of it.

Paul Boag:
Yes, see I have bigger problems but then that’s probably because I cut the tendon in my thumb years ago, so I don’t have as much movement in that thumb.

Marcus Lillington:I am also sort of slightly weirdly ambidextrous and I can do it with either.

Paul Boag:
Oh, no, I can do that, yes.

Marcus Lillington:That’s an interesting point though isn’t it, so if you can and you are a proper right hander I assume.

Paul Boag:
No, I am a bit weird, I am kind of ambidextrous.

Marcus Lillington:Ah so am I.

Paul Boag:
I am a weird one like that.

Marcus Lillington:I do wonder with – that’s a question I would like to ask.

Paul Boag:
Okay.

Marcus Lillington:Do you pick up your phone with same hand every time, because I don’t?

Paul Boag:
Do I, I do tend to but if I’ve got something in my right hand, I will pick up with my left, I won’t put down or swap what’s in my hand.

Marcus Lillington:Yes, I use my left mostly because I write with my left hand, but yes, interesting.

Don’t dismiss mobile apps

Paul Boag:
It is, okay so consider one-handed use, that brings us onto our final point. And our final point is don’t dismiss mobile apps, I never thought I would be saying this because for ages it was like, oh, we’ve got to have an app in the appstore, and this might just be in the kind of circles that I move in but I do feel like native apps I should put dismiss native mobile apps, that’s what I meant, I’m just updating my notes. Within the circles I move in there has almost become a bit of a snobbery about native apps because yes, they are expensive to support and you have to build for multiple platforms and all the other drawbacks of them and everybody is going, oh, responsive, that’s the answer to everything but it’s not always the answer to everything. There are situations where a native app makes a lot of sense and I think you’ve got to be very, very careful not to bring your kind of agenda to the table when it comes to these things and you’re kind of biases. So native apps make a lot of sense when you need access to functionality that isn’t available through the browser, so for example, access to the camera or the microphone and makes a lot of sense when somebody is doing a task on a regular basis like for example, with the people that we were meeting last week, getting access in a university to your grades or lecturer’s notes, then maybe a mobile app makes a lot of sense in that kind of situation. So there are times when a native mobile app does make sense, don’t kind of just become blinkered over it I guess is what I am saying. Everything has its place.

Marcus Lillington:Well, yes, definitely, I mean certainly, yes, I wouldn’t choose to access Twitter via Safari on my iPhone, I would use the app.

Paul Boag:
Yes, because it is something that you use all the time. Obviously another one is offline access, yes I know websites can be made to operate offline but I don’t think users wrap their heads around that. So I think a native app makes more sense in that kind of situation. So there are occasions when having a native app is a good way to go and just, bear that in mind.

Marcus Lillington:Okay.

Paul Boag:
Okay, so that wraps up our list of top 10 tips for improving your mobile experience, I’d love to hear other peoples as well, definitely let me know in the comments. Hey, I’ll tell you another thing is other ideas to top 10 lists, so if you have 10 things on a subject that you think we should talk about, please send them to [email protected] because it’s nice for it to be stuff coming from you guys rather than just us the whole time but I think that was good one actually. Mobile experience is a really important area these days and so it’s good to spend a bit time talking about it. Marcus, top 10 terrible jokes.

Marcus Lillington:Oh, does that mean I can go back and find my top 10?

Paul Boag:
You ought to do that. Maybe the last in the series.

Marcus Lillington:Yes, maybe the last one of these. I don’t have a joke this week.

Paul Boag:
Pardon me.

Marcus Lillington:I don’t have a joke and I deliberately didn’t go and research one because people send me good jokes and nobody has, so this is a request, please send good jokes.

Paul Boag:
Because you are just too lazy.

Marcus Lillington:That are podcast friendly to [email protected] please.

Paul Boag:
Now, that’s really interesting because I noticed someone I can’t find it now it’s typical isn’t it. Someone posted a joke for you on Twitter and I can’t find it now.

Marcus Lillington:If it was one I felt was usable then I almost certainly would have just copied it over and sent to myself in an email, that’s I do.

Paul Boag:
That’s weird because I don’t know whether it necessarily they copied you in on it because not everybody knows your Twitter id. What is your Twitter id?

Marcus Lillington:Marcus67.

Paul Boag:
So if you want to send a joke to him on Twitter.

Marcus Lillington:Don’t, send it to me in email. Well that way I can search on it.

Paul Boag:
He’s just so old fashioned.

Marcus Lillington:It’s not old fashioned, it’s sensible.

Paul Boag:
You are, get with the times. Email is dead.

Marcus Lillington:What? Put it on something throwaway like Twitter?

Paul Boag:
Anyway, I think that’s really disappointing. I think you’ve let our listeners down.

Marcus Lillington:Really?

Paul Boag:
You should feel ashamed of yourself.

Marcus Lillington:No, no, I was going to look one up, but I thought, no, that’s not what this is about.

Paul Boag:
Okay, if you feel that’s acceptable behavior, Marcus?

Marcus Lillington:Well I can’t see any jokes in Twitter.

Paul Boag:
Yes, and neither can I, I definitely read one, it’s really annoying. Anyway, alright, well, thank you very much for listening to this week’s show, we’ll be back again next week, when we’ll be talking about something else but I’ve no idea what because I haven’t planned it yet. Right, Marcus, we can go for a little lie down then.

Marcus Lillington:Oh, brilliant.

Paul Boag:
Alright, bye guys.

Marcus Lillington:Bye.

  • fanfarian

    I’m disappointed Marcus. “The Joke” is always the highlight of the show :(

Headscape

Boagworld