Usually been backend, but recently did a new an interesting site for twitter and the elections. First time looking at responsive design, found it really interesting.
Example of the Sydney Morning Herald. As you make the view port smaller, you have to scroll. If you pre tent to be an iPhone, get a completely different version. m version. Simpler, smaller, cut down experience for mobile. One set of content, optimise for two different sites for different devices.
This means two sets of code, two places where it is hosting. Have to keep them both in sync. As a dev, having to do the same thing more than once is irritating. What happens when you introduce a new device type? If you go super widescreen, lots of whitespace either side.
Summary: “Never show a horizontal scroll bar” – always fit content horizontally. Have a single site that does this. Never show the scroll bar, regardless of what screen size. Multiple versions is more complicated and expensive. This way, one site, happy developers.
Case study for #youdecide9. Coverage of the 2013 federal elections. It’s an experimental site with twitter integration, and responsive behaviour is baked in.
Notes from demo
Top story bit, question that people can vote on.
Featured tweets.
Leaderboard. Secret formula with ranking for each politician.
Twitter stream
As you adjust, drops to two columns from 3.
Hide some things so columns are not uneven.
Then one column (what users see on mobile).
Vote modules starts with 2 columns.
Page reacts to the different properties do devices viewing it.
On Design
Movement in the last year or two.
Start with mobile first as it has the most limitations (tiny screen, processing power).
If you know you have to cut things out, better to cut earlier.
Mock up all layouts in parallel.
5 different layouts at least. Have to think about them all concurrently.
E.g. of tweet box – had to put the description on the right, because on the left it stacks below.
About 15% more effort to convert mobile site to the desktop.
Comparatively not that much overhead, huge benefit in terms of maintenance cost.
Downside: Need more time in design phase, more back and forth with designers.
On Optimising Content
Semantic web: make it meaningful.
Content is king! Content is the most important thing on the site.
Site without styles still works. Still makes sense in a linear way – this is important for screen readers. These are the most limited devices accessing the web.
Request images in largest sizes and adjust with CSS. Not efficient, asking for large images when only need a small one, but better than trying to request lots of them and pick the right one.
Choose which bits are important – can get rid of some.
On Implementation and Testing
Used @media screen.
Use print to print in serif fonts.
Supply queries – what is the size of the screen right now. phone/tablet 400/755.
Decided to break when content didn’t look good anymore, rather than default.
Orientation and aspect rations – lots of things you can do to your page to customise content.
Can see if device is in colour. Screen reader means no colour. If no colour, don’t need CSS.
Testing
Use viewport resized. Animates.
Lots of manual testing, not a lot of automated testing is possible.
BBC – wraith. Takes screenshots, highlights the differences in blue.
Things Learned
Focused well on smaller devices, didn’t focus as well on larger devices.
Whitespace on wide monitor. Didn’t change layout for widescreen, which is a shame. Left lots of content below the fold.
15% overhead. Interesting learning – something to put forward for new projects.
Trying to balance design requirements and product with lean development.
Didn’t implement all designs, could have had designers use that time differently.
Usage shifts during the day, more desktop during the day, phone as people go home.
Have you noticed, how people hate their computers, but love their phones? Truly, it is our most intimate device – we share every moment of our day with it, we sleep with it, we capture special, and not so special moments with it, and it is our constant connection to the people we love the most [interesting slide deck on mobile usage].
The keyboard separates us from the computer, but touch brings us closer to the device. We stroke it, we pet it, and we interact with it differently because of our emotional attachment to it. Have you noticed, how many people seem to fear their computers? For the most part, they don’t fear their phones, or tablets.
My grandpa never opened his laptop, but he claims to use his iPad every day. I think he’s just sparing my feelings because it was a gift from me, but his usage habits seem to be about lack of need, rather than the laptop which was always “not working” in some intimidating way. I don’t think he likes email. But he doesn’t call me either, so I’m not sure that’s anything to do with user experience.
Let’s Play
In 2009, 8 of the top ten most popular (paid) apps were games [source]. That’s still true today [source]. Different games, but still games. These devices are personal, we use them for pleasure, for distraction. Computers are “work”. Phones, and even more so tablets, are for fun.
I think you can look at the things I work on, and be surprised that someone so obsessed with user experience would focus on B2B. But actually I think there is the most potential for happiness differential in these unloved places, on our most loved devices. Creating a great game, or consumer application, is at this point just an incremental improvement. B2B apps are the apps that people have to use for their job. I used to work summers at a company that used Filemaker Pro. I interned at IBM, where yes, I had to use Lotus Notes. These pieces of software are sold on the features that the administrators want, not on the experience of the humans who use them. There a huge amount of ignored human misery there. Making a great B2B experience that also wins on administrator cares – like security – has a much bigger happiness differential.
Sometimes the best we can aim for is like a good dentist – quick, and painless. There’s a potential there – maybe it’s not to make people happy, but to make them less miserable, less stressed, less overwhelmed. But the potential for happiness differential is significant.
Love In a Time of Mobile
Who has set a special ringtone for your partner, or you bff, or home – wherever that is? It is a way to differentiate, without looking, the calls that you really want to take… or sometimes that you’re avoiding.
In the age of the app, there’s a natural extension to this, and it’s not just designating a sound, but a space, on your device for an important person in your life.
There are a few, but the first one I heard of was this app called “Pair” – they later renamed it to “Couple”, which I don’t like as much but whatever. Anyway, it had a message client, video chat (kind of, it connected to FaceTime so didn’t work on Android, or iOS to Android), you could draw pictures with your “pair”, and share your location with them. It also had a feature called “thumbkiss” where holding your thumb to the same place on the screen would cause the phone to vibrate. And a section of “memories” which collected the pictures you had sent, and you could go and see the picture in context of the stream of communication – what text messages you had sent.
There is a sweet story around it. This guy was in California doing a startup, and missing his girlfriend in KW, Canada – where I used to live – and he made this app as a way for them to stay in touch [source].
And it’s a little gimmicky, and there’s not much feature-wise that doesn’t exist in other places, but I think the charm of it is, it’s a place for the person you love, on the device you love.
We Have Changed
Text Messages
Text messaging originally began as a way to share emergency information, but it gained popularity with the public and as of 2007, 74% of phone users worldwide used text messaging [source]. If we think about where we are now, the way we communicate on our mobiles now, text messaging was the start. It was billed as a way to communicate when one or both parties were in different countries. It allowed us to communicate in places we weren’t able to before – during meetings, in public places.
As a teenager, I got kicked off an unlimited text messaging plan for sending too many. Teenagers today face far fewer restrictions, because they can use data instead, and services like SnapChat [interesting article by danah boyd] or Viber. Although text messages are still really popular [source].
Long Term Trend – Everything on The Mobile Device
One of the most miserable parts of flying is security. You have to take your laptop out, go through the naked body scanner – in Australia they say “You have a choice, we don’t make you. But you can’t fly if you refuse.”
Since the iPad came out, I’ve noticed that sometimes you see smartly dressed people, likely travelling for meetings, travelling without a laptop. They just have a tablet and a smart phone. That makes sense, right? Why carry a laptop if you’ve no time to do actual work, a tablet is a fraction of the weight, with better battery life, and functional enough that if you need to write a short document, or take notes, do some research.
In another story of my failed tablet giving, I re-gifted my dad a tablet I got given as a thank-you for some diversity stuff I did. I thought he could take it on business trips instead of a laptop, but actually he just carries both.
But I maintain, eventually he’ll ditch the laptop. I think a lot of people will. We – software engineers – will be in the weird class of people who actually need a computer and can’t make do – probably. Maybe. The long term trend is that we’ll be able to do everything on mobile. 13,000 people a year buy a car using the EBay mobile app [source]. I find that incredible, and it’s just the start.
Meanwhile, when laptops can also be tablets, and there’s a 7” tablet and a phablet, the lines are blurred – in this what is mobile, and what is “computer”? What is tablet, and what is phone?
The Rise of The Amateur Artist
Apple is the second most popular camera manufacturer on Flickr [source]. One of the side effects of the mobile revolution, is that a lot of people are wondering around with the ability to take high-resolution images in their pocket.
And they do. Our urge to express ourselves, to create, is enabled like never before. And there’s some beautiful work out there. When I found Darcy the Flying Hedgehog, I declared – the cutest place on the internet has been found. And it was just a regular person, who took artsy pictures of their adorable hedgehog and posted them on Instagram. But when they stopped – Darcy is too old now, apparently, they had over 400,000 followers, many of whom were disappointed not to get to see more pictures of Darcy. The last picture had 63,000 likes, and many people commenting to express their disappointment.
Or consider the slightly tragic story of the man who takes pictures, with his smartphone, of him with his imaginary girlfriend. He calls it “hitori date” or “one-man date” [source]. He uses wigs, and paints one hand with nail-polish, and takes sweet beautiful photos that illustrate a couple in love, when in reality, he’s very alone – and seemingly, quite despondent about it.
We Are Not Really Here
Our Lives Are Online
This slideshow requires JavaScript.
Recently I did something… morally questionable. I went out on a date with a misogynist. And I live tweeted it. It started as a joke, and can I claim it happened by accident? But then he started saying things like “so do you actually write code then?” and “I’ve worked with a few women, but only one or two of them were any good”.
And you know… I just kept tweeting. There was a hashtag. I type really fast and I pretended that I was on call and helping someone with an emergency.
I can’t claim that I enjoyed my evening with him. He didn’t come up with anything I hadn’t heard before, but he did pack a lot in to the two unbearable hours I endured with him.
Socially conditioned that it’s rude to run away, I took the more passive aggressive route, channelled my inner Lady Gaga – life is art – and my friends appreciated the show. I had people pinging me from as far away as New Zealand, my exploits were discussed over dinner in California. Someone in New York hoped it was satire. It wasn’t. People I’ve never met or spoken to tweeted, one from Nigeria. Another, in North Carolina, advised me to run away.
My favourite response was one from my friend who messaged me the following morning saying: “please continue to express yourself in ways that allow me to feel a part of your life“.
Rather than moan about the desolate wasteland of broken promises and missed expectations that is my romantic life, I invited my friends in. And we do this in less extreme – and less morally dubious ways – all the time. We post pictures of the places we go, and the things that we buy, the people we love, and of ourselves.
The downside to this is that these are for the most part, not a whole view. We emphasise the positive things. More time on Facebook correlates with low self esteem [source]? That’s not surprising, really.
Presence
I didn’t hear from the guy again. Which is mostly a relief. I imagine him telling his friends about it and saying, “She was on her phone all night! She said it was a work emergency, but everyone knows women don’t have jobs like that.”
Because now we talk about this idea of “being present” which is the flipside of being distracted. We used to just be where we were, but now we feel pulled every which way [source]. Creating an idealised version of life, rather than actually living it [source 1, 2, 3, 4].
And so we practise things like “mindfulness”.
From Google N-Gram Viewer
The disconnected vacation is now a thing [source 1, 2, 3]. Notice the qualification – disconnected – we used to just call this vacation. In theory, we can turn these devices off. But sometimes it’s easier to go somewhere remote without service and have a break that way instead. It requires less willpower.
Design for Distraction
There’s a tumblr called “Damn you autocorrect”. It’s hilarious text messages that are the result of the autocorrect feature… but also these message, these snafus, are the result of not giving texting full attention.
Texting whilst driving is more dangerous than driving drunk. Texting whilst walking causes poorer recall, slower walking, and actually a change in gait [source 1, 2].
This is the cognitive overhead of distraction. Of multitasking. Which actually women don’t do better, but rather less badly on a subset of tasks [source].
You can think of it as distraction has a cognitive overhead comparable to that of being drunk.
On mobile, your users are multitasking. They are watching TV – splitting their attention. Ad break, and the device gets more. But when a Kardashian gets married, they are back to the TV.
We have to consider this in our designs because, you know, Kardashians get married a lot. And forms and pages are especially hard, because I’m filling it in but then Lady Gaga wore something fabulous and I forgot what I was doing.
This is your user on mobile. In love. And also kind of drunk.
There’s No App For That
I want to finish with a story about going mobile.
Who reads Postsecret? Postsecret is a project where people put their secret on a postcard – often with an image that illustrates it in some way, and they send it to this guy Frank, who puts up a selection each week on a blog. I love Postsecret, I have the books (Amazon), I saw the live show, I read it every Sunday. And for years now it has featured in talks I’ve given because I think it is a great story and example about bridging the gap between digital and analog.
They released a Postsecret app. And it was a great concept, people created their digital secrets and shared them, and commented on them. There were beautiful stories that came out of it, in the same way that the “don’t jump” campaign came from the blog. And the digital secrets seemed different, the use of pictures was different.
They had to pull the app. Anonymity is the foundation of this project, but it wasn’t sustainable in this model. The necessity that users could be anonymous enabled some small subset to destroy it for everybody.
And Postsecret doesn’t have an app anymore.
We can talk about web versus native, but I don’t think that is the most important thing to consider. I want to take this broader view of mobile and consider what changes.
If we look back at what destroyed the Postsecret app, it was nothing to do with form factor. It was about lowering the barrier to entry (no need to buy a stamp), and removing the gatekeeper. These seem to be almost inevitable side-effects of creating this mobile-centric experience. But they couldn’t build around them. I don’t think they anticipated them.
As we approach the point where mobile traffic overtakes desktop, it’s time to rethink what we are doing, and what assumptions we haven’t considered. How is our usability when our user is distracted? How about when they are interrupted? If we’re not making a game, or even if we are – there are many games, and there will be a pull to move away. We can’t eliminate it, but we can reduce it – how do we do that?
I have carried multiple cellphones for about 2 years now. I think as a mobile developer, it’s important to be familiar with both the major platforms (iPhone and Android) and I find the context helpful regardless of which platform I am working on.
Currently, I carry an iPhone 5 and a Nexus 5. My Nexus 5 is my “primary” phone – it has my UK sim card in it, and as such is the one that I use when I am not on a wifi connection (not that often, since there is wifi at home, at work, and in the gym). My iPhone has a US sim card in it, as it is now my designated travel phone. I use this to listen to music, and (almost) all the pictures I take, I take on my iPhone.
A couple of things:
The apps I use most (chat, Twitter, 4Square, Feedly) are on both.
Email and calendars are synced on both – not that I use email on my phone much. Now that I’ve eliminated most junk mail I get notifications for personal email on one phone, only.
Necessary apps that aren’t instant are only on my secondary phone – this includes banking apps and personal activity tracking apps. This forces me to switch over periodically.
Also, music and pictures.
I make an effort to switch to my secondary phone when I get home and ignore my primary. Same in the gym, where there is free wifi – I leave my primary phone in my locker, and take my secondary with me to the x-trainer (with my iPad – I now tweet and watch TV whilst I get my cardio).
In fact basically anywhere with wifi, I use my secondary phone.
My usage is the best it has ever been, a big factor in which is that I actually love my Nexus 5 enough to want to use it (a level of affection I never managed for my old Galaxy Nexus – I think this is mostly the beautiful screen), but after the first thrill of getting it, and a brief period of neglect for the iPhone I’ve found a balance.
I think, on the whole I slightly prefer my iPhone – the great camera, and all my music being on iTunes is great – I can play music on my Apple TV, and then when I head out the door I plug in my headphones and it continues right where it left off. Also, some apps are better on the iPhone, Twitter being a big one – the Android app is much more likely to lose my place in the stream, which annoys me, and the clicking out to launch chrome rather than the embedded web view is slower. Also on Android, you don’t see the page snippet in the expanded tweet view (sometimes enough that I don’t need to click out). Although I use Buffer on both, and it’s so much easier on Android, because of the share intent. In fact sometimes my workflow is that I go through my favourites (which I use as a mechanism for things to read later) using both devices (web page loading being the bottleneck) but do all my sharing from the Android.
People throw the word “mobile” around a lot, and my observation is – they all mean different things, but think they are talking about the same thing.
When I talk about mobile, I want to talk about how everything changes when everyone has a device this powerful on them, all the time.
“An app for that” only scratches the surface for how things change (that link contains the most fascinating stats on mobile usage I’ve seen, and the surveys were done Q1 2012, the world has only become more mobile-centric since then). And sometimes people talk about “not having a mobile experience” – that is nonsense, the mobile experience is whatever happens (or doesn’t) when the user tries to use whatever it is on their mobile device.
A restaurant with a flash only website has a “mobile experience” – it’s just not one that makes you more likely to eat dinner there.
There’s a fascinating document on mobile insights from Ford (related article), which is interesting because they are a car company, but in this context makes sense, because everything changes.
Individuals have mobile strategies – phone stacking is an example. When out for dinner with friends, cellphones are placed face down on the table (pile optional), and whoever touches their device first, pays. That’s part of a mobile strategy, aiming to address the need to be mentally and emotionally present for the people we are physically present with. The book Alone Together covers so many examples of individual disconnection as the result of devices.
I wear two activity trackers
with a third on the way. Part of my mobile strategy addressing my need to stay active (and measure my mood and sleep as a result).
One of the things I find fascinating, that no-one seems to talk about, is how people take more pictures as a result of having these devices, and they are shared much faster. See how Apple is the second most popular “camera brand” on Flickr.
People ask me what North Korea was like, I say, “do you ever feel you have decision fatigue? You can go to North Korea and make no decisions for 6 days.”
I think decision fatigue must be worse as a result – every time my device beeps, and it beeps so much more because it’s not just calls or text messages but instant messages, and Facebook likes, and Twitter mentions, and emails. And I have to decide whether to look, whether to read it, whether to respond.
At the level of creating user experiences, I think the question is not “web or native?” but rather – what is different? What do users want?
Web or native is a much easier question to answer.
I think I first rode the tube in London about 10 years ago. Now I ride the tube a bunch, and sometimes I see people doing something I find really weird.
Reading a physical book. Sometimes – especially odd – a large, hardback book. Who carries such a thing around with them, when you can carry hundreds of books at a tiny fraction of the weight?
I’m sure 10 years ago people were reading books on the tube. And that it did not seem weird at all.
More “normal” on the tube, is use of a smart phone. It is our most intimate device, always close to hand, there to while away the time.
This is how we use our phones. Whenever we have a minute, here and there. Always with something else going on. Whatever the technical capabilities of “multitasking” on the device, the screen only supports viewing one app at a time, yet it is so rare that is all we are doing. We go back and forth, here’s my stop, woah that guy is reading a book, “let me offer you my seat, ma’am”, oh back to the device. Or watching TV, oh, ads over, back to the program. Bored, back to the phone, wait, a Kardashian is getting married? Back to the TV.
We expect things to be easy, on the phone, we use the apps that work well, that entertain us or offer us something we want, whether it’s connection, or amusement (as of 2009, eight of the top ten paid iOS apps were games). If it’s painful, why suffer, we can put it off to later, when we’re near a computer.
By which time we may well have forgotten about it.
I think this has a few implications for how we approach creating experiences on mobile.
Firstly, it has to be a good experience. It’s rare we will suffer through a painful experience on a phone, it has to be a real emergency. If, say, you’re at the airport and have forgotten to apply for an ESTA.
When you start expecting users to be distracted, I think you run into some other concerns.
Consistency. Something isn’t getting my full attention, so when something not where I’m absent mindedly poking, it’s more jarring. Consistency is king.
Call to actions need to be clear, it’s easy to forget what I was doing there in the first place. I’m also liable to forget what I filled in to get to this point, so keep reminding me.
This is the cognitive cost of multitasking. This is your user on mobile – they are distracted, a cognitive impairment equivalent to that of a few vodkas.
When we create mobile experiences, we shouldn’t underestimate that. Little things, that it’s easy to write off as no big deal, a UX designer getting too worked up about.
Think about the last time you came home drunk, and had to focus to put your key in the lock. Or the last time you were super jet lagged, to the point where you had a hard time directing the cab driver to where you live. Or when you had your wisdom teeth out and took a bunch of narcotics.
This is your user on mobile. Multitasking. It makes sense to allow for it.
I had a bit of a career crisis earlier this year. I asked myself, when did I become an iOS developer? I did not mean for that to happen. And so I made a plan, where I would diversify, and expand my skills, and explore. There’s are many good reasons not to tie your career to one platform, (as someone once observed to me, “there are a lot of unemployed BASIC programmers”), and if you work at a competitor, all the more reason.
At a crossroads, I had choice between mobile, and non-mobile, and whilst there were many other reasons and thoughts in this decision, I ended up staying with mobile. But I wasn’t feeling great about it.
A year ago, I gave a talk, where one of the things I mentioned was that I had the second best job in the world, because I get to build things for humans. It was why I wanted to work where I do – but I’d lost sight of that, in the day to day, fix this bug, build this feature. The bigger picture was obscured.
Mobile is Where Your Human Is
Here’s the thing about mobile though, humans often hate their computers, that thing they sit down at with a heavy heart and a large coffee every morning, but they love their phones. They take it to bed, to the bathroom, with it they capture the highlights of their days and lives, they turn to it in crisis. A mouse and keyboard separated humans from the computer, but a touch device is closer to them. Pet it, play with it, know where it is every minute of every day.
I build things for humans. I take pains over and pride in creating a great UI. There are those who despise UI, “real” engineering, after-all involves zillions of cores and unimaginable amounts of data. And we need that stuff – I don’t disparage it – but as far as your human is concerned, the UI is the application. Creating a great user experience is gift a software artiste gives a human.
Bridging the Gap Between the Analog and the Digital
I’ve been on a bit of a blogging hiatus of late, and one reason for that is that I upped and moved to the Southern Hemisphere. But whilst my accessories have yet to arrive, my personal computer has been sitting in my apartment since the day I moved in, well over a month ago. But I haven’t turned it on. I didn’t even have internet in my apartment for the first month – why did I need it? I’m rarely home and I have a data connection on my iPhone, that at a push, I’ll just tether my iPad to. When I was on vacation in San Juan, not deliberately disconnected, but coincidentally so (our cabin was damaged, and we were relocated to a more luxury one… without internet), but I didn’t take a laptop. I went “low tech”, with two smart phones, an iPad, and a Kindle.
Engineers sometimes find this weird, but it’s not. I see people at airport security – well dressed businessmen, young urbanites, pulling the tablet out of their bag, the cell phone from their pocket, but no laptop. Moving, I was pulling out two computers. This was difficult and seemed like lunacy – but I remember when it wasn’t so odd, your work machine was locked down, so of course you would take your personal one too. Once I got my iPad, once of the best things was that on business trips I could just leave my laptop at the office – who wants to carry it around? There’s exploring to do.
But I am never parted from my smart phone. The closest I get to disconnected is when I’m in another country and turn off data. But there’s always internet in some form, free wireless in cafes, or broadcast from a friend’s phone.
So my smart phone knows where I am, every minute of every day. My calendar is sync’d, and that says where I will be. Around my wrist, my nike fuel band tracks my activity, combine these and it’s pretty evident what I’m doing – Spinning? Skiing? Walking my usual route to work? My contacted people via twitter, email, text, phone, reveal the most important people in my life.
And so little is done with all that information, but there is a lot of potential there.
As an example, I’m not a huge downloader of apps to my phone, but two I’ve seen lately that I’ve thought were exciting:
Pair, which uses the device a human is closest to, to bring them closer to their favorite fellow human.
Twist, which uses information about where the human is to keep who they are meeting updated with their ETA.
There’s a gap, between the digital and the analog. I find these apps interesting, because they bridge some part of it. That gap is where I think software artistes can create transformative, compelling, experiences for humans, particuarly on mobile, and it’s where I like to play.
Cookie Consent
We use cookies to improve your experience on our site. By using our site, you consent to cookies.
