Podcast

#59 James & Per suck up leaves

Why do we produce so much content, and so many websites and apps, that people don’t want or need? We take a look at the problem of bloat that so many information rich (non-transactional) sites have. How did our sites end up this fat and irrelevant?

Read More

#58 James & Per & Mattias have beards

We meet up with Mattias Beijmo, founder of Duma and course leader for Web Management at Berghs School of Communication for a chat about beards. After the facial hair chat out of the way we ask Mattias how, back in the 90s, he got into the web branch.

Read More

#57 James & Per avoid spinning

Episode 57 of UX Podcast is a link show. James and Per discuss three articles found during their digital travels.

We start off with some satire and discuss a humorous article about top carousels, a conversation that evolves into a reflective discussion about culture and native languages. The middle article focuses on navigation design patterns for responsive sites and apps – specifically the “left navigation fly out”. We finish off with a look at a post by Luke Wroblewski about how you should avoid using a spinner to indicate when something is happening or loading.

(Listening time: 34 minutes)

References:

Transcript:

Per: Hello and welcome to UX Podcast. You’re listening to me Per Axbom.

James: And me James Royal-Lawson.

Per: And we’re sitting in our favourite place at the Clarion Sign Hotel.

James: Our favourite place?

Per: Favourite place in town for recording.

James: You’re right.

Per: I think right now. Yeah.

James: And they actually just tweeted to us.

Per: Yes, it’s fantastic. We say we were going to record here and they tweeted us and said good luck.

James: Yeah. See, some people have got their eyes peeled for customer interaction.

Per: They’re pretty good.

James: And today is going to be …

Per: A link show.

View the full transcript

James: A link show – to dive straight into what we’re going to do today. We haven’t had a link show for a little while because we’ve had Conversion Jam and a few interviews and things. It felt like I want to talk about some of the great content that people produce out there.

Per: We want to hear some of our own voices more as well.

James: Oh, your ego Per. We were just discussing. We got three articles coming for you and it’s a bit of a design pattern thing to these three. We were just trying to decide a little bit on running order – because we do actually plan a little bit before these shows. I was bringing up the fact – the article that we are going to talk about first …

Per: Is now …

James: Yeah, it’s a little bit humorous and Per suggested, it was good idea to finish on a humorous note.

Per: Peak end theory.

James: Yeah.

Per: Yeah.

James: And I said, “Well, maybe it’s good to begin with a humorous one.” Are we trying to keep listeners to the next show or are we trying to keep them to listen to this show? So if we make you all laugh now at the beginning, then maybe you’re more likely to listen to the whole show and if you laugh at the end, you will maybe like listen to us next time.

Per: Right. So if you seriously believe that we’re going to lose or gain listeners based on the running order of our links in this show, then give us a heads up.

James: I like to think that we have some content strategy for this. So the first article.

Per: The first article.

[Music]

James: Which touches on one of my favourite pet subjects, carousels, banners, sliding banners on the webpages which all of you who listen to the show regularly will know that we’ve talked about a few times and you will probably also know what we think about them, which is not very much. An article – I think you actually brought this one to my attention.

Per: Yeah, because I thought of you straight away when I saw it, of course.

James: It’s excellent. It’s actually a satire piece. It’s humour. It’s written to take the mickey out of carousels and the way in which we end up having carousels on websites.

Per: Right. It’s written by a guy called Stephen Hay from California but he lives in the Netherlands actually and well, he’s one of us dudes or guys and he has a blog called The Haystack and that you will find the post Carousel-Based Web Design and he’s trying to make a case for how excellent carousels are.

James: Yeah.

Per: And calling it a new technique and showing how carousels can be used for really communicating the key messages.

James: And they solve all the world’s problems and …

Per: He even has the acronym CBWD for carousel-based web design. That’s a new technique that we should all employ actually.

James: Exactly. “It’s easy to remember. It can help you please your clients for giving them more opportunity for publishing trivial content in less space. It saves money by eliminating tiresome considerations like content relevance and importance, accessibility, and website performance.”

Per: Oh, and this is pretty good actually. “At the end of the day, users don’t just want to get the information they want. They want an experience. We know this because we present statistics in such a way that they support our opinions on these matters.”

James: It’s an absolutely wonderful satire piece.

Per: Yes, it is.

James: Now, it takes all the points that you know are true about carousels, why they don’t work, what’s the flaws in them and so on and reverses and pushes them out as a serious sounding piece defending carousels. Now, that you kind of realize very quickly when you read this article. I thought …

Per: Yes. But if you’re not a native English speaker, then satire and sarcasm and irony are not a given.

James: Yeah.

Per: So the first comment actually is …

James: Well, actually just back a little bit. I got to the addition because he has actually updated the post. So when you’re reading it …

Per: Oh, yeah, that’s right.

James: When I read it, it was a day or so after it has been released because you tweeted me and he has written, “Just to be on the safe side, this article is sarcasm. I do not advocate using carousels. Read that again. It pains me to have to point out the obvious” and so on and so on.

This was where I was almost crying with laughter. I’ve read the whole article and then at the end of this fantastic satirical piece, he still had to point out that it was a joke and I started to think – I was thinking about kind of Americans maybe not understanding satire as well as maybe British and all this kind of clichés, stereotypes. Then after that, I actually went back much later to read the comments. I think you pointed out again to me, “Read the comments, read the comments.”

Per: The first comment is a really, really long comment outlining why carousels are bad.

James: Considered, carefully written. It’s well-written.

Per: Yes.

James: Rodrigo.

Per: Murillo.

James: Murillo.

Per: Yeah.

James: Yeah.

Per: And he’s right of course but the sad thing is of course that he didn’t understand that Stephen was making …

James: It’s a blog post in its own right, this comment, and it’s good.

Per: It is.

James: And do you want to read Stephen’s reply to Rodrigo?

Per: Oh, yeah. “Hi there, Rodrigo. No, I’m certainly not taking your comment in a bad away. If we ever meet, I will buy you a drink. In fact, unless your sense of humour is dryer than mine, you just spent about 15 minutes typing out why you agree with me. Yours is a valuable comment.” They are in complete agreement but I mean Rodrigo misunderstood the sarcasm.

James: Exactly. For a moment there, they thought they were on opposite sides of the war.

Per: Yeah.

James: Because satire is difficult.

Per: But it also brings up the case. I mean how many people out there actually do think that Stephen has a case for making carousels? It’s something that organizations should use. I think there are people out there.

James: Or rather what kind of experience has Rodrigo had in his life as a web.. digital person or whatever that has made him react so instantly and thoroughly to this? He must have had several situations where what Stephen has written has been true for him.

Per: As we all have actually.

James: Yeah. See now that’s the key to good satire. They’ve taken the situation which is kind of – you’ve taken this to the extreme but at the same time you’ve made it kind of convincing and believable. But not only important points about carousels but also just – I think you were like saying about language and how easy especially now when we have so much skydiving that happens. You get a link. You find a link and you dive into a website. You read the content on a single webpage. You possibly don’t even read the header.

Per: No, exactly.

James: You definitely read the About Me page or about-this-website page. You land on some content.

Per: You have no idea about who the author is.

James: No. You look at the words. You look at the words in the middle of the article and you read it from start to end especially if it’s a well-written, thoughtful piece like this one. Then you feel like you want to respond. It’s only then that you …

Per: And also I mean yeah, actually Rodrigo also replied.

James: Oh, that was actually excellent.

Per: Yeah, and he reread the post of course. He has a good laugh and he was a bit sad that the joke had to be explained and …

James: A bit embarrassed, yeah.

Per: Yeah. “Maybe I’m letting carousels drive me way too mad” and I really feel for him because I feel the same. When you see a post like that, you instantly – it’s like that XKCD cartoon where it says, “Honey, come to bed.” “No, I can’t. Someone on the internet is wrong,” which I completely agree with. I’m always sitting up, trying to correct people’s mistakes when I think that they are like way out of order.

James: But you’re right. You see the carousel and you think this is an organization that doesn’t do the full job. They’re not close to it. They don’t measure. They don’t understand what they’re trying to do. They’re not going forward as they should do. But I think what really warmed me about this is that Rodrigo didn’t delete his comments.

Per: Yes, exactly.

James: He left his embarrassing – well, his well-written, 15-minute epilogue comment. He left it there and I think as a series of four posts, with Stephen’s original post, the first comment, response, and then the humble, “You’re right. I’m sorry. I’m a bit embarrassed. What a great post and thanks for this.” Makes an excellent series of – it’s a story.

Per: Yes, it makes a story.

James: It turns content into a story.

Per: It’s a great piece of history.

James: Yeah.

Per: I should print this out and like put it in a book. Yeah.

James: Yeah. So hopefully we’ve made you laugh with that, with our humorous first article.

Per: Well, at least you should go read the post.

James: You definitely read the post. It’s well worth doing it.

Per: Right. Moving on.

[Music]

Per: Our buddy Alexander Skogberg on Twitter has written a post. He has actually redesigned his blog recently. I like it. He has also gone for single column.

James: Oh, yeah, there we go.

Per: So the title of his post is Stop Placing the Men Button in the Wrong Corner and the examples he’s using, the screenshots is from the Facebook app, and I believe it’s on the iPhone. Yes, it must be.

James: Yeah, it’s talking about the navigation pattern for apps and responsive websites. It’s often – the hamburger to the top left.

Per: Right. So you all know the hamburger menu, the three lines, pushed together.

James: We talked about it a fair bit in an article at the end of last year, beginning of this year, I think.

Per: Wow.

James: One article with all those 10 design things.

Per: Oh, yeah, right. Yeah, exactly.

James: On Android often it’s three dots vertically positioned rather than hamburger …

Per: Because I don’t like the hamburger menu but that’s me.

James: No.

Per: Why don’t they just say menu? Anyway, you click that and it’s in the left top corner.

James: On the Facebook app …

Per: And that actually brings out a left hand navigation which is sort of the menu for Facebook.

James: Yeah, Facebook itself slides the other way and reveals a menu to the left.

Per: So what he is really criticizing here is that it’s in the top left so it’s hard to reach and also that it moves. So the location of the menu button actually moves when you click it, which is also bad. I agree with him because I feel it’s quite hard to reach in a lot of cases as well. What I thought of instantly was now that sometimes I hold the iPhone in my left hand and then it’s actually not too bad because I’m using my right hand, because I’m right handed, to do other stuff. So, since it’s my second screen off, then I’m eating with my right hand and then using the phone with my left hand. So that actually may be a use case where it would be good to have it on the left side. Also as you pointed out, I think …

James: I’m left handed.

Per: You’re left-handed. Oh, yeah.

James: So instantly reacted in saying it’s not that difficult. Like so many left-handers, I do do a lot of stuff the other way around too because it’s a right-handed world. So as a left-hander, you grow up getting yourself used to right-handed things whether it’s putting – as a kid, I remember putting coins into – putting money into the – when I get on the bus. You throw the money into the little collector to pay for your bus journey.

Per: Oh, yeah.

James: And the way that is meant you had to have your coins in a certain hand or it just didn’t work. It kind of got all out of sequence. But I think for me, yeah, the whole top part is kind of quite difficult. But using two fingers, while using one hand, another hand, quite often works or you can use the thumb and stretch right across.

Per: Exactly.

James: Top left or top right I think I’m – it’s awkward anyway.

Per: Exactly.

James: When we’re talking about the four-inch or three and a half to four-and-a-half-inch, maybe that kind of size of device. We’re talking about the mobiles, smaller mobiles. I say smaller mobiles now. God, listen to me. A couple of years ago, we wouldn’t have even dreamt to say that a four-and-a-half-inch was a smaller device. Then I think what we’re talking about there with the top area being difficult to reach is true.

Per: Right.

James: And I was at Luke – actually Alexander references Luke Wroblewski in the article and I was at his workshop at UX Lx.

Per: Oh, yeah.

James: Where we discussed this with zones that were easy and hard and OK. And it’s complicated.

Per: It is.

James: It’s not actually a black and white solution to this mainly because of the fact that the screen – a certain pattern solution is valid for a certain range of devices, size of devices.

Per: And for certain use cases as well.

James: And for certain use cases and left-handedness or right-handedness.

Per: Because when I’m watching a movie on my iPad when I’m lying down on the couch, the iPad is rested on my tummy which makes it hard to reach the buttons in the bottom for some reason. I don’t know.

That’s the use case where actually if you have a movie app, don’t put the buttons at the bottom. Put them at the top because that’s where my fingers are.

James: Well then, if you’ve got a phablet or you’ve got one of these five, six-inch devices, then suddenly you can’t use that top area with one hand. You’ve got to use two hands.

Per: Right.

James: So again, different parts of the screen become easier and hard depending on what size you’re at. It’s different for the phablets which are different to the desktop which are different to mobile.

Per: Right.

James: But what’s Alexander’s solution? What does he suggest?

Per: Well, he suggested the top right.

James:You see, I don’t buy it.

Per: Yeah, exactly. I realized that after I actually posted that link to that site. He suggested the top right and the interesting thing about this is that Apple has redesigned the app for iOS 7 and they put that …

James: Facebook.

Per: Yeah, sorry, the Facebook have redesigned it for Apple iOS 7 and then actually put the button in the – down in the right hand corner, which is actually what we’re saying is – would probably be the best place for it if that’s the button that you’re using the most.

James:They’ve read Luke’s post and presentation.

Per: Yeah.

James: And interestingly, Android, that’s where they used to have the buttons a couple of years ago like Gingerbread. My first Android phone, it actually had a hardware button but the menu button was at the bottom right or maybe middle depending on whether you had HTC or some other one.

But bottom was where you got your menu and iPhone became so popular and really kind of picked up and everyone started standardizing their apps across platforms, so iPhone, Android. The apps converged in their design patterns and we saw the advent of the hamburger or the three dots to indicate a menu and often to the top left or top right, especially top left. So it’s fascinating now that – well, we’re starting to see that the easy zone for one finger or thumb navigation is at the bottom of the screen for the smaller devices.

Per: Right.

James: So I don’t agree with Alexander. I think top right isn’t much better than top left. I agree with his point maybe that sliding out is not necessarily a good idea and that dropping down so that your screen, your original state remains visible. I think maybe keeps a better context maybe.

Per: Right. Sliding out I found recently is a pain especially on the iPad. I use the Gmail app on the iPad and sometimes I slide out the menu. But I still see all my emails and when I click the email, nothing happens and I’m wondering – it’s behind but I’m not realizing it’s behind.

James: Yeah, yeah. It sounds …

Per: Yeah, exactly, yeah.

James: I think another thing I don’t actually – and I’m shooting from the hip but animations are GPU-heavy. So by having a sliding action, you’re using more graphical power whereas if you’re just overlaying or dropping or some kind of partial animation, maybe that’s easier on your processor or battery or whatever.

Per: I have no idea.

James: I’m shooting from the hip with this one.

Per: It’s interesting. I mean you need to at least research that.

James: Yeah.

Per: So that’s a good point.

James: The reason why I thought of that is in my head now when I’m thinking of these fly-out menus and swiping and so on, I mean there are times when things lag or they – you get a slower – you click on a menu and it doesn’t come out at the speed you expect because something else is going on with the telephone as well. So it kind of drags its way slowly across the screen.

Per: Right.

James: Because the effort of moving all that content, rolling it across the screen, takes a bit of power.

Per: It does.

James: In some devices.

Per: In some devices, exactly.

James: Little stars everywhere in this.

Per: In some slow devices.

James: Sorry. Have you upgraded an iPhone 4 to iOS 7?

Per: I wouldn’t want to do that.

James: Oh, my wife did it.

Per: Oh, OK.

James: Yeah. She’s not happy.

Per: OK.

James: Yeah, sorry. That’s an aside. So well, conclusion from this one. I think it’s a good article and good point.

Per: Yes.

James: Good that someone is raising these things all the time. We got to keep testing. We got to understand and learn.

Per: We need to be talking about it. We need to realize that there are places that are better than others and it’s not black and white. I mean you can’t decide for every app that it’s always top right or something like that but you need to really think about what’s the most important buttons you have on the screen. How are people using it? Are they like me having breakfast, even though they’re right-handed, having the sandwich in the right hand and the phone in the left hand and stuff like that?

James: And this is crucial as well for responsive that your responsive design, you may set visual breakpoints based on the content. I want the site – this one looks better here. Let’s put it there.

Per: Right.

James: But you’ve got to remember about size of devices and sometimes, resolution doesn’t equal size of device.

Per: Exactly.

James: Because as we know, a lot of devices, when you use the standard responsive of doing width 100 percent, so you force the browser to zoom the content to device width which is not pixel width. You might have a five-inch device but you’re showing a 360 or 400 and something pixel wide, point wide website in the viewport.

Per: Right.

James: Maybe a different navigation would work. So it’s complicated.

Per: I’m actually designing a website right now which is responsive and when it gets down to phone sizes, it actually puts the menu in the bottom. Then I’m testing that in November so remind me to get …

James: What are you basing it on? Viewport or you’re basing it on something else?

Per: I’m basing it on viewport.

James: We should test and have a look and see whether that gets a range of devices and see how that behaves on some of the phablets, some of the other things, a range of things and see whether the way which …

Per: Exactly.

James: … it spreads itself to the fit still makes it feel like it’s the right navigation pattern.

Per: That makes it really hard because like I said, I’m testing it in November. But I mean how many devices can you really test with users? It’s impossible.

James: Yeah, yeah.

Per: You need to make a lot of assumptions and you need to test them.

James: Oh, I think I talked about a little while ago in a show. You’ve got to set up a way of working and a way to go forward where it’s not a delivery and finish. You’re going to have – with responsive now and the multitude of devices, you’ve got to keep on analyzing, keep on testing, be prepared to tweak and change and maybe add breakpoints or change breakpoints over time as you learn more about your site usage or the site usage changes.

There are devices released now which weren’t here a year ago. So if you’ve got a year – there are such things as year-long web projects. If you’ve been in it for a year, when you started your project, it’s not the same as it is now.

Per: Exactly, yeah.

James: Someone has pulled the rug from under you.

Per: Yeah, you need to be changing it all the time. You need to make it as flexible as possible and you need to make your team working on this stuff as flexible as possible.

James: You got to be open to iteration and budget for iteration. Shall we move on?

Per: I have so much stuff I’m thinking about talking about now. I have no time.

James: I think we probably should move on.

Per: We move on.

[Music]

Per: OK. We’ve talked about him a bit today earlier.

James: Yeah, Luke again. Well, not Luke again but he’s coming up again.

Per: Luke referenced again.

James: Yeah. But this time, it’s actually his.

Per: Luke Wroblewski on his blog LukeW.com. He’s talking about spinners and what …

James: What are they?

Per: What are they? I think they have lots of different names

James: Yeah, I think they do.

Per: And I forgot the most common name now of course. You can …

James: Well, loading indicator is one of them.

Per: Right, yeah. And if you search for loading indicator in Google, you will find out all the other names as well.

James: Probably. It’s just a visual indication that something is supposed to be happening.

Per: For some reason, this sort of flower thing, the circular thing – well, sort of almost like a sun, seems to be the most often used one.

James: I mean we used – well, a little while ago, before – I think before mobile really kicked off, it used to be the hour glass which used to turn – sometimes I think the percentage. It used to turn upside down.

Per: Yeah. Wasn’t that Flash or …

James: Flash or Mac or something that was kind of an hourglass that rotated and counted up and then rotated. Well, that was desktop.

Per: Exactly, yeah.

James: Yeah. I think Windows had just an hourglass. But now there’s some kind of spinning flower petal thing. It has been very common and I think Android now, it’s a round ring where it kind of phases aaround. It kind of something – or the petal going around. It’s like – it’s doing travels around this ring.

Per: Oh.

James: But it’s the same concept. It’s a circle with something altering around it. What Luke is saying here is basically avoid the spinner. Loading indicator, something telling you that something is happening, is a bad thing.

Per: Exactly, and the reason for that is because everyone is using it.

James: Yeah.

Per: So you were seeing the same pattern that – you’re seeing the same type of loading GIF indicator, circular thing moving. One is thinking, if you have the experience that OK, when I see that, something usually takes a long time to load. If someone else uses it, even though it doesn’t take a long time to load, they’re going to think it does.

James: Exactly. This is lovely psychological behaviour. We’ve now associated that symbol with slowness. So what Luke is saying here is irrespective of how fast your website is, if the spinner comes up, people perceive …

Per: Your brain says “slow”.

James: Yeah, there’s something in your head that goes, “Oh, slow.”

Per: Yeah.

James: Which is fascinating that we’ve already built up that kind of association. Between this design pattern and that psychological response.

Per: Yeah.

James: And the thing there is that yeah, you’ve got to make your app either so fast that you really don’t need to worry about the spinners. But given variance in mobile bandwidth and other kinds of things and I suppose there’s always a risk that you’ve accidentally ended up on a GPRS network or …

Per: And you have a blank page which you never want.

James: Or you’re going through a tunnel and your page does take a long time to load or something. Then you’ve got to indicate something.

Per: Right.

James: But I mean thinking about my own responses to spinners, one thing I noticed – and this is me as more kind of geek level I guess, is the amount of times when there are animated GIFs and have absolutely zero connection with what’s actually happening.

Per: Oh, yeah, true.

James: So I kind of just get frustrated by the fact that they’re not even trying to communicate something decent to me. Someone is pushing out – they’re printing a GIF, the animated icon to the page. Then going off and doing something and forgetting to come back and maybe getting rid of it or tell me that well, actually, what we want to do, we can’t do.

Per: Exactly.

James: Instead of just leaving me the spinning GIF there and letting me realize that actually my connections died and I need to stop the app or restart it.

Per: It’s a really important distinction that it’s not a progress indicator. It’s just an animation.

James: In some cases, it’s – likely it’s an animation rather than a progress indicator.

Per: Usually it is nowadays.

James: But I think it feels like if you do have a situation where you need to indicate progress, then I think it’s pretty important that you do actually indicate progress.

Per: I would think so, yeah.

James: Rather than do the cheap kind of con, of just here’s an icon. We will get rid of that when we’re already.

Per: Well, especially when it does take a longer time perhaps than 15 seconds. Then you would want a progress indicator.

James: Yeah. What did Luke recommend?

Per: I haven’t read it all.

James: You haven’t read it all! We’re talking about it. I’ve read it and I know. I will save you on this one Per. He talks about skeletons screens as one way.

I think this is one that he mentions but the skeleton is one of the way he says to do it where rather than have a loader, you would leave I suppose – I mean you would recognize it as almost like wireframe-like. You leave maybe a grey box where a picture should be and while that image is lazy loading or is kind of catching up, you leave a grey box there and then just put the image in when it’s ready.

This is good for page – efficiency for page performance point view as well because you’ve designated a space for the image using height and width and so on, which means the browser is enough to do a redraw.

Per: Right. If you’re doing it correctly, then yes.

James: Yes. So not only is this a good way of avoiding a spinner and getting the page ready and out there and ready to interact with. It’s performance-wise good as well.

Per: Exactly. He’s actually talking about the app he’s involved with, Polar, one of his own apps.

James: Yeah, his own products.

Per: Yeah, and he has the example. But what you said about the previous article was that animation takes a long time and it puts a load on the CPU as well and this is actually an example of where you’re using animation to indicate progress. But hopefully in a good way, the way you described it just now that you’re actually creating a placeholder for the content that’s just about to appear.

James: Yeah, I think that’s a good way of doing it because I don’t think you’re creating an overhead there. I think you’re making good use of the natural – the sequence of events that happen when the page is loading. Now using the skeleton concept is a good way of implementing that.

Per: Right. I actually did have this exact challenge recently in my project which is why I love that you actually picked this article and I thought of the normal, usually the Ajaxload GIF thing that people always have and I thought that well, people are going to think that we’re going to wait a while now and usually that’s not the case.

But sometimes I also know that time is perceived differently based on different stuff. So you can actually – if you make it fun to wait, then hopefully people won’t perceive it as taking a long time.

If you don’t use that animation but using animation like a flower growing or a dog eating food or something like that, then that’s more fun to watch than the spinner and then you would actually have something that perhaps people would accept that yeah, every time something takes a bit longer than usual, I will see that fun stuff and you could actually have different things as well.

James: I just sort of now have an example. Don’t lose your thought but I just remembered a funny example which my kids love as well. On the Wii, the original Wii, if you’re installing an app from the app store, there’s kind of a Mario sequence that comes up, it’s like 90s old school graphics. Mario runs across and he runs across the screen and he comes – he loops around. It’s a platform game. He jumps up and hits a box and he opens up and leaves the coin and it kind of goes ding-ding-ding.

Per: Right.

James: He collects the coins. So it’s just a fun little animation, real simple graphics. But my kids love it. If I ever install an app, they come running in and going, “Oh yeah! What’s Mario doing? What’s Mario doing?”

Per: That’s beautiful. Just as well as we’re talking about micro copy, this is a type of micro interaction where you have the possibility of making something more fun. It’s like an error message. You have the possibility of making something more fun.

I think in our conclusion there is don’t rely on what other people are doing because that can backfire if people actually experience that something is taking longer than usual even though it isn’t. Try and tie it in with your brand, something that makes it more fun, and then people will actually enjoy waiting for a bit.

James: I think the spinner is a good example of a design pattern that’s cheap and easy. You can just throw it out there without any thought whatsoever whereas the underlying issue is actually a bit more complex. Thinking as well about – I’ve got a few apps that I use where they use a spinner but when I’m on a 4G connection or a really good connection, it’s so fast, that you end up with this kind of flickering, it flickers. Was that a spinner? It just kind of – it’s like a subliminal advertising. I have this vague memory that there might have been a spinner there. It actually just disrupts. It’s a loose cannonball. It kind of shimmers because the …

Per: Subliminal messaging, yeah.

James: You’ve got to understand what’s happening and there’s going to be metrics and there will be – you learn, OK, this is a point where we know – because we’ve tested. We’ve measured. It’s probably going to take us not 0.6 seconds for this to happen. Generally. Then you can take the decision about what kind of indication or example that you’re going to use to fill that gap where it’s skeleton lazy loading and so on or where it’s a spinner or an animation or whatever you think of. But if you find good research that generally no, it’s so instant, maybe you don’t need to worry.

Per: True. Actually, when I redesigned my form contact form on my website three years back or something, I had a loading indicated because the form is Ajax-submitted and I realized just as you’re saying, it was too fast. It didn’t have time to load the indicator. So what I did was I actually put in a pause. So it never was faster than two seconds because that gave it time to actually see something is going on and it’s finished, done.

James: Exactly.

Per: Yeah.

James: Yeah, you’ve got time to take in the sequence.

Per: So you actually delay it on purpose for the sequential items that are happening which actually makes sense in your head.

James: Yeah. Right, that could be a sensible thing. As long as you keep it within the magical 0.1 seconds or whatever for response, then that maybe is a sensible thing to even your interactions out, if you’re lucky enough to have everything so fast. Maybe you spread things out a bit, to give people time to visually absorb what’s going on.

Per: It’s like having white space.

James: Yeah.

Per: It’s having white time.

James: Yeah, white time. Oh, I like that.

Per: Yeah.

James: That’s good.

Per: Oh, wow.

James: I’m done.

Per: I am too actually. I’m off to a meeting.

James: It’s Friday afternoon and Per has a meeting.

Per: Oh, yes.

James: It’s one of those really cruel things that people schedule meetings for quarter past three on a Friday afternoon.

Per: Yeah, it’s crazy.

James: They love you.

Per: They do. They just want to meet me. OK. As always, remember to …

James: As always, you mess it up. We used to be good at saying these endings.

Per: I know.

James: What happened?

Per: Why is this so hard? I need to get a new tagline.

James: No, don’t start doing that on me because you won’t remember to say the new one.

Per: That’s right. Remember to keep moving.

James: And see you on the other side.

Hide the transcript

#56 James and Per at Conversion Jam 3

This podcast is episode 6 of 6 recorded at Conversion Jam 3

Conversion Jam 3 was held recently here in Stockholm. Conversion Jam is a conference for online marketing/ecommerce managers, optimizers and analysts. About 350 people gathered together to spend a day listening to international speakers and a number of interesting cases. We managed to interview four of the speakers – Craig Sullivan, Ton Wesseling, Brian Massey and Nathalie Nahai.

Read More

#CJAM3 UX Podcast Pre-Jam meetup at Valtech

This podcast is episode 1 of 6 recorded at Conversion Jam 3

The night before Conversion Jam 3, 40 optimisers, 3 speakers and 2 podcasters gathered at Valtech‘s offices in Stockholm Sweden for a “pre-jam” meetup.

Conversion Scientist Brian Massey, Wheel of Persuasion Bart Schutz and (Ton Wesseling) all gave 15 minute presentations as well a “conversion clinic” (where they were also joined by Craig Sullivan).

Here is the live unedited footage of all 3 presentations, the 20 minute break, and the conversion clinic.

The unedited footage is sadly currently not available.

#CJAM3 Nathalie Nahai interview

This podcast is episode 5 of 6 recorded at Conversion Jam 3

Nathalie Nahai, The Web Psychologist, was the closing keynote speaker at Conversion Jam 3. We talked to her just a few minutes after she came off stage.

We chatted to Nathalie about “culturability” and having a cultural understanding when working with international websites.

#CJAM3 Brian Massey interview

This podcast is episode 4 of 6 recorded at Conversion Jam 3

We managed to catch up with morning keynote speaker Brian Massey in the Meet The Experts room at Conversion Jam 3.

Brian talked this morning about “copy” and it’s crucial role in online conversations and conversion. We throw out lorem shitsum and produce content.

Read More

#CJAM3 Ton Wesseling interview

This podcast is episode 3 of 6 recorded at Conversion Jam 3

The final speaker of the morning at Conversion Jam 3 in Stockholm was Ton Wesseling, Dutch Online optimisation specialist.

We talked to Ton about cloudberry jam as well as the importance of actionable changes and getting things out there – always be optimising.  Plus, we ponder the thought, do we really need interaction design?

#CJAM3 Craig Sullivan interview

This podcast is episode 2 of 6 recorded at Conversion Jam 3

A few minutes after walking off the stage at Conversion Jam 3 in Stockholm Sweden, we grabbed a chat with Craig Sullivan. This is the third time we’ve talked to Craig on UX Podcast. Our chats are always inspiring and insightful and full of practical tips.

Read More

#55 James & Per & Steve buy beer with Bitcoin

On Obama-day here in Stockholm we were joined by Stephen Early, owner of Individual Pubs in the UK and, earlier this year, became the first pubs in the UK to offer Bitcoin as a payment option.

Read More

#54 James & Per become unicorns

A Link show. James and Per discuss three articles found during their digital travels.

We begin by talking about Deception and when does persuasive design become evil? Ethnographical research gets a run-through – too achedemic, or value for money? Finally we tackle the question: should designers code? Do we become pegasuses or unicorns?

(Listening time: 38 minutes)

References:

Transcript:

Per: Hello and welcome to episode 54 of UX Podcast. You’re listening to me, Per Axbom.

James: And me James Royal-Lawson.

Per: And you will notice I did not scream hello.

James: No, you didn’t. We practiced before the show.

Per: Yeah. Well, I was thinking about it real hard now.

James:  You were.

Per: It is really difficult not to say hello loud because I’m so excited every time we record something.

James: Yeah, we’re so happy to be here.

Per: Lovely day in Stockholm. It’s a bit colder now going into August and I haven’t slept really well actually so I’m really tired this morning. I hope you will do most of the talking James.

James: As long as you’re not grumpy.

Per: I’m never grumpy.

James: Never grumpy?

Per: No.

James: No.

Per: I may slur and not talk very coherently but never, never, ever grumpy.

James: As far as kind of like building up buy-in for this episode, you’re doing a fantastic job there Per.

Per: Really? Aren’t I? What are we talking about today James?

James: Oh, well. Today is a link show.

View the full transcript

Per: Yes, finally! We haven’t done one in a while.

James: We haven’t done for a while. No, we’ve been quite wound up about certain topics. We’ve had a few topic shows and a few interviews including Brad Frost who’s in Sweden at the moment.

Per: Oh, yeah.

James: At this very moment. Not here with us. Unfortunately

Per: Right. He’s in Malmö.

James: Now, he is. Yeah. Also we’ve decided to throw together a link show. So we’ve got three links, articles to talk about today that we’ve found during our digital travels.

Per: Right.

James: As they are normally right?

Per: And we don’t agree with any of them apparently.

James: It would appear from our little chat this morning that we don’t agree.

Per: We are really hard to please.

James: Today we seem to be. See, see grumpy old men who haven’t slept. There we go. So which one is first?

Per: Let’s start off with deception.

[Music]

James: This is How Deceptive Is Your Persuasive Design.

Per: Yeah, it’s an article by Chris Nodder on the UX Magazine and you know how we design stuff and we have gotten into the habit of realizing that we need to use all these psychological tactics and techniques for persuading people and we’ve in recent episodes talked about social proof and scarcity and all these different things.

James: And behavioural psychology.

Per: Yeah, peak-end theory and sometimes we get into the, well, insight that perhaps we’re not just persuading people. We’re also deceiving them and this is more notably in the field of ecommerce which neither you nor I really work with a lot James. But if you’re in ecommerce and you’re trying to get people to buy stuff then you want to get people to buy as much stuff as possible because you used all these techniques and I think …

James: There’s a business drive there that the business themselves want to convert everybody into customers.

Per: Right.

James: By and large.

Per: And I think the hotel business is really good at this. Hotels.com, I mean you can find so many examples right there. There are not many rooms left. You have a special price offer that runs out in 10 minutes, stuff like that. So you really have to act now and buy or you lose a lot of the chance of making good deals. What they want you to feel. And Chris Nodder has some examples in his article as well. He starts off the Amazon example, where what’s actually an old bookstore technique that has been used pre-internet of course is having as few books in stock as possible of new releases so that they’re sold out really fast.

James: Yeah.

Per: So the example is that Amazon usually has something that says perhaps only nine left in stock which sort of gets …

James: Only one left in stock.

Per: Yeah, maybe, and it supposedly gives you an incentive to buy now because maybe you will not be able to buy one if you come back tomorrow to buy it.

James: Yeah, it’s the principle of scarcity there, that you think that something is scarce and that you need to get it now. Before it vanished.  He mentioned this as the Tom Sawyer effect.

Per: Right.

James: Which is from Mark Twain’s book where Tom Sawyer, as a punishment, he has to paint and polish the fence, to whitewash it and as a punishment – He thinks it’s a punishment. He thinks it’s a really dull job and he convinces – manages to convince his friends into thinking that painting the fence is a privilege. It’s something that is an honour and a privilege to do it and they weren’t all allowed to and that’s going to make some of it kind of jealous and make some – well, I really want to do that because we’re not allowed to do it. So he ends up charging them for the privilege of painting the fence because it is a privilege and they believe that. So he has deceived them and made some money from it.

Per: Right. And here’s where it really gets interesting. Is it wrong to deceive people in that way if they are happy, if they are happy doing it? Because that’s really interesting, what you’re saying if the people that he persuaded are still happy about paying to do – to paint the fence, then perhaps the deception was OK as long as …

James: As long as it lasts.

Per: As long as it lasts. They don’t find out about it later.

James: Exactly. Once they’re happy and they think that it bought an experience they have and they’re pleased with that …

Per: Right.

James: … the only time it comes to an end is when they found out the magic behind the deception. They did realize that it’s a punishment. This was actually not fun at all.

Per: Exactly. Which is really strange to have an experience where you’re thinking it’s fun and then to find out another detail later on and realize that, oh, that wasn’t fun. Even though you had the experience of fun, that’s – I haven’t thought about that a lot actually. But how can I change your perception of something that happened earlier that you really enjoyed?

James: Could we say that – well, you’re trying to buy airline tickets and you’re searching and you’re finding various prices and you think, “Should I go? Shouldn’t I?” and then you search again. Even though the prices have gone up a little bit and you say, “Oh, I will do it. I will buy it now before it goes up any further.” Buy your tickets. Yes, we’re going on that weekend to Paris now or whatever and then the next day, you read an article that explains that flight prices often go up when you search, if you don’t delete your cookies because they know you’re researching and artificially inflate the prices to panic you into buying it. Suddenly you get a bitter taste in your mouth and you think, “Oh, I’ve been cheated.”

Per: Exactly.

James: So you go from euphoria, the moment of purchase and then you’ve done a good deal, to crashing down when you’ve had the magic trick revealed.

Per: That’s an excellent example and this is where I start having trouble with Chris’ article as well is when he starts seeing that it’s OK to deceive people if it’s in their best interests.

James: That’s right.

Per: How could you possibly know? You need to have so much information about the needs and habits and desires of the person you’re selling to, that you have to be really, really certain that it is in their best interest that they buy this product from you or read whatever information or download or subscribe or whatever it is you’re trying to persuade them to do. But how can you really be sure that that’s in their best interest?  It’s a misnomer to me, you can’t really do that.

James: Now we’re still talking about the commerce, the transactional side of persuasion. You’ve got the service side of persuasion. When you provide information rather than – or even healthcare stuff, that side of things. Why does persuasion or deception in that side of the scale is hard to be relevant and good? Can you deceive people into making the right choice as opposed to the right purchase? See what I mean?

Per: Yeah, I know exactly what you mean and I think it’s Dan Ariely that has the example of people signing up for donor cards, donating their organs after their death.

James: Yeah.

Per: And that’s really different in different countries.

James: In some countries it’s default isn’t it?

Per: Yeah, and the reason is – yeah, what’s default on the form. If the default is that you actually donate, then it’s going to be higher. So you’re actually deceiving people to donate their organs which you would perhaps think that’s for a good cause. But in the end, are people aware of what they’re actually doing? If people aren’t aware, I mean how stupid can people be? Apparently, they are pretty stupid. We all are. I’m not saying the user is stupid but I’m saying we’re all ready to be deceived really.

James: I think that’s a good point. Most of our designs are trying to persuade people to do something and it makes me remember now Jesper Åström who we talked to in episode 39. A really clever guy  and we had a really good chat to him.

Per: Yes.

James: He said the other day that he actually feared for the free thinking of mankind because of how easy it is to manipulate people online.

Per: Right.

James: You can just change the font on a website and conversion rate goes up or you can make a tweak here and there and suddenly people are starting – I would say there’s only one book left and people buy it. Maybe just kind of worried about how little people think for themselves because of the various persuasion techniques we can use and do use to succeed online.

Per: That is really interesting. I mean then we can go back and talk about what is the school’s responsibility in all this. How do we teach people to interpret information online, to be wary of what they’re reading and when to buy stuff and how to interpret stuff online and I think that’s something that is – we’re on the breaking point of everything that’s happening online …

James: Social media and we had a case in the UK of social media bullying of a young girl who took her own life allegedly because of online bullying.

Per: We’ve had cases like that in Sweden.

James: Exactly, our court case in Gothenburg. Yeah, it’s a complex world and reading, judging – making an assessment of what you’re dealing with online, whether it’s a purchase and whether it’s social is a skill that – yeah, it needs to be developed…

Per: So it is pretty scary. So basically I think it comes back to what is the intention of the organization who owns the website. If their intention is to deceive you, then they’re doing it wrong. If their intention is they really, really believe that they have something good, then you can perhaps start to question. Is it OK for them to use all these techniques to actually think that you needed more or faster or now perhaps than you would otherwise?

James: We chatted briefly about this before the show. Deception and persuasion. Deception by definition is evil.

Per: Yeah, it is. Yeah.

James: If you’re deceiving someone, you’re hiding the truth whereas persuading is actually just arguing. Having an argument as such. I think the discussions are using techniques to kind of make people understand the benefits and understand that this is a worthwhile thing than trick them.

Per: Yeah.

James: So I think yeah, your persuasive design shouldn’t be deceptive because in the long run, that’s going to hurt you.

Per: But where do you draw the line of deceptive? When you change the wording of a button from “click here” to “buy now” and you realize that you get more leads or more buys with one text or with the other. Is one more deceptive than the other?

James: In that example… I wouldn’t probably class that as deception. Whereas the aeroplane,  the ticket, artificial inflation in terms of how many visits you’ve made or searches you’ve made, that’s deception.

Per: But there is stuff I work with everyday. I mean even copywriting. I know if I write something in a certain way or use storytelling, the more people are going to start listening and they will have more of a chance of actually persuading them to do what I want them to do.

James: Isn’t that good communication?

Per: It is good communication or it’s like people selling hair medicine like in the old West.

James: That’s snake oil. That’s different. That’s deception because it didn’t work.

Per: Hmm. True. But am I sure that what I’m selling is going to work for the person I’m selling it to?

James: Sure, if you’re open about the fact this is not for everyone. Oh, you’re right. It’s marketing in numbers.

Per: This is really hard.

James: It’s ageing cream on your – you know, 90 percent of women said this made their skin less wrinkly.

Per: I’m feeling really philosophical now. But he does I think – you should check out this article and also read some of the comments. I think they’re saying a bit of the stuff that we’re saying as well and he does have a diagram in there that we both actually like.

James: Yeah.

Per: I mean there are – of course there are shades of gray. It’s not black and white and I think that’s very apparent.

James: Yeah.

Per: So I mean if you have another take on this, I would love to hear it because I think this is a really interesting thing to dive into, deception or persuasion or something in between.

James: Design ethics. Time to move on.

Per: It is.

[Music]

Per: Let’s move on to another UX Magazine article actually written by Jessica Weber and John Cheng. It’s called Making the Most of Ethnographic Research.

James: Yeah. So let’s start off with what’s ethnographic research Per?

Per: Ethnographic research is akin to GOOB, one of my favourite …

James: GOOB!

Per: GOOB.

James: You know, now you have to explain two things.

Per: I know, but that’s easier to explain. GOOB means “get out of the building” and ethnographic research means “go visit the gorillas”.

James: I like it.

Per: It means just go out and observe and draw conclusions from what you’re seeing and of course you don’t just go out …

James: I mean seeing people and communicating with groups of people and interaction.

Per: Right, ethnographic research can be done in so many different ways for so many different purposes. I mean you could be – to find a new market area but also to find out more about the type of target group that you’re actually selling to already. I think many people have heard about going to skate parks and researching the kids, observing the kids and understanding their lingo and what they’re talking about and that using what they say and their habits and their needs and desires and pleasures that they’re actually – well, I don’t know, communicating in the sense that they’re talking to each other and you as an observer can kind of draw conclusions from that and make better products for them and that’s the essence.

You’re trying to make something new, trying to make something better and you go out and observe people, to learn more about them and find out how could I – I don’t know – satisfy their needs in a different way and that sounds also – get ahead on my competition.

James: Well, in the article here it says “ethnographic research is all about discovery of the unknown, disproving assumptions about user behaviour and uncovering unexpected insights”. Now I reacted a little bit to that line because that meant – it sounded to me – it made it sound bad that ethnographic research might prove an assumption correct about user behaviour or might actually fail to uncover something new. And that’s not what it’s all about to me. It’s not just about the discovery of unknown or disproving if the assumptions are uncovering expected stuff. You can confirm things with this as well.

Per: Absolutely. For me, ethnographic research is about sitting down with people and in their natural environment. I mean that’s why I said go and visit the gorillas. It’s in their natural habitat and where they’re doing stuff and talk to them, observe them, get to know them and they won’t feel so self-aware about – like in a traditional usability study, people are very self-aware of their being evaluated or something is being evaluated and I had to give the right answers and stuff like that.

James: I thinking about the fruit now..

Per: Right, and you need to get to know people for them to actually feel confident enough to actually tell you what they really are doing or saying or acting like and what they’re using. I’ve actually done one of these studies like in a bank. I don’t know how much I can say right now but it’s a bank.

James: Don’t say.

Per: It’s a bank.

So I was sitting in a branch office with the other people and I was really – we were making a new intranet design and I sat down there with them for a full day. I was actually watching them take care of customers. People are walking in and I had just a note on my table saying that I wasn’t giving service that day so everybody just thought that I was an employee. I mean and they got really confident with me sitting there. I mean after a client walked out, I could bring up my table or my chair to their table and have a chat about how that went and maybe they told me something about – yeah, maybe I should have told them something about this other service we’re offering but I didn’t know where to find it on the intranet. So I didn’t sell them that.

That gave me a really great insight about how the intranet is supposed to help people sell but it wasn’t and the bank was losing a lot of business due to this. So that was getting the insights thanks to actually being out there for a day in their habitat and not just calling them up on the phone and interviewing them and I wouldn’t have found that out at all.

James: That sounds good because it was a day. It was quite a reasonable thing. It was insights. It was nicely packaged then. Both me and you, we believe in this kind of talk to the user and get out there. I mean we mentioned how many times during the couple of years of the show but this article got me a bit irritated about the fact that it was very, very academic and made me react against ethnographical research. I was like yeah, it may be challenging to get organizational buy-in to pursue ethnographic research because of its long time horizon for results, its cost and the perception that it may not deliver efficient results. I mean it’s impossible.

Per: They’re making a case against ethnographic research.

James: No one is going to buy that. I mean that’s just saying it’s kind of – it’s only kind of – the only right way of doing it is full year-long massive studies, academic studies where we truly get inside the head of the user and so on. I mean you can get a lot more action on that a lot quicker and a lot …

Per: You can.

James: You say if you spend the day and sat down there observing and you can get an awful lot of input.

Per: You can sit in a café or a hotel lobby and just observe people and draw conclusions from that.

James: I mean that …

Per: Yeah, they’re making it a lot more academic than it has to be. They’re putting up rules for how it has to be done and I don’t really agree with that and they’re making it seem a lot more complicated than it should be.

James: And making it sound like it’s only for large organizations.

Per: Right.

James: Who don’t care about return on investment. Oh, but unless you’re a start-up. I reckon a lot of time, you’re going to be better off testing or tweaking, iterating as far as return on investment goes than doing some of these lovely, deep, honest studies that potentially show that the company’s product is utterly useless.

Per: Yeah, I completely agree.

James: No one wants to buy that. No one wants to buy a survey that’s going to tell them that their entire product is useless, I guess.

Per: I think when we were in Portugal, I got the question, “How do we get started getting buy-in from managers on why UX is important?” and my most common answer to that question is get out. Talk to people. Make a video and show it to managers and that’s something that really dates back to our favourite session at UX Lx ever I think with gorilla research …

James: Oh, that was one of my favourites, yeah.

Per: With Russ Unger.

James: Yeah.

Per: And we actually did go out and just interview people and get videos and …

James: I can link to the film.

Per: Yeah, and just that, I mean that took half an hour and that’s one form of ethnographic research as well.

James: In a couple of shows ago when we talked about intranets, after Intranätverk, there we brought up the example of IKEA redoing the intranet. They went out and interviewed. They filmed employees from various different points of the world, asking what they wanted from a future intranet and they just got to speak for a minute and talking about what they wanted.

Per: Right.

James: Some of these things are not pure ethnographic research but I don’t think you need it a lot of the time.

Per: For me, there’s no pure anything.

James: No.

Per: They’re just different schools.

James: Yeah.

Per: And I mean if they’re going to make the case that this could be expensive and maybe not give results that you want, I mean that’s – you’re doing it wrong. You need to get results fast and the more results you get fast, the more buy-in you will get to make the longer studies. So starting out quick and dirty will give you management buy-in to do the better studies.

James: If you’ve got goals or you know what you’re trying to achieve with whatever digital product you’re working with and you can measure them, then whatever you’re doing, whatever you’ve got to do whether it’s research or tweets or whatever, if it brings you close to those goals or shows a rise in conversion of whatever you’re doing, then you’re doing it right.

Per: Yes.

James: Maybe not as right as something else but you’re obviously doing something more right than you were doing.

Per: I think we’re in complete agreement there.

James: Yeah.

Per: Moving on, I think.

[Music]

Per: This is one you found I think. I love the title.

James: I found a response to this article first and then I went back and read this one which is interesting. But I thought we will use this one as the talking point.

Per: So the title is Unicorn, Shmunicorn – Be a Pegasus.

James: So we’re all clear on exactly what this is all about.

Per: Oh yeah, and it’s the blog of Wayne Greenwood, MC UX. Dropping Soft Science is its tagline. OK.

James: This is basically about – oh, should designers code?

Per: Right.

James: It’s a topic we’ve touched upon a few times before I think.

Per: I think so and mostly because both you and I James I think like code.

James: We do, although these days I wouldn’t say we’re coders.

Per: We’re not coders but we see the benefits of understanding code to achieve the goals that we want to achieve. If we don’t understand the code, there are some, I don’t know, some aspects of UX design or decisions that we’re not able to make unless we actually get into the nitty-gritty of what’s the best – I mean UX for me is balancing the technology, the business and the users. If you don’t understand …

James: It doesn’t even our little intro say that?

Per: Yeah, exactly, right. It does. If we don’t understand the technology, then we won’t be able to have the right tools to accomplish what we’re trying to accomplish.

James: I think to back up a little bit to what the article is saying here, when saying that he doesn’t – he’s basically saying that unicorns are this mash-up between designers and coders, the one that can do both. So I suppose it’s one body that encompasses both scales and he thinks this is a step back in time to like the 80s and 90s where everyone was coders who were basically producing – doing the full job, producing the software and designing it as a consequence of the fact that they were coding it and shifting by making this combined – these unicorns, shifting your attention away from the user and back towards the technology. Which he says got us into the mess we’re in, in the first place.

Per: Right.

James: But I don’t agree with what – obviously what we’ve already said though. We don’t really agree with him. I don’t think we’re getting back into the same mess. I think it’s more that we were – we know how quickly and how much the whole branch has been evolving. I mean it’s so quick how we’re going forward and learning things. I think we were ignorant in the 90s. I don’t think it was – it wasn’t that we deliberately got ourselves in that mess. We were – the people doing software, when I was programming in the 90s, user experience, improving user experience was about fixing bugs.

Per: Yeah.

James: Yeah, because my boss was the one who decided what products we were making and he talked to them. He did some research by talking to his customers and things and found out what they wanted but for me, my view point is a programmer who effectively designed as well. If I improved it for the user, if I made it faster, if I made it less buggy.

Per: You had the requirement specifications and if it didn’t meet those requirements, it wasn’t useful.

James: Yeah, I don’t think we were going to get ourselves into a mess. That was what we – we did back then. We have moved on.

Per: But also I mean I was working with usability quite early on but even then usability at least when you were working in the online world, it was about where to place a button, something like that, getting closer to what we today term user experience…

James: Don’t get me wrong. It’s not the certain things. I mean HCI, human computer interaction, I mean you could study that.

Per: Right.

James: It was courses at university but it wasn’t really applied in the same – people doing the programming were maybe too young back then to have gone through those courses.

Per: And people weren’t asking for it.

James: I know. They’re were not interested. I wouldn’t think I would have a hell’s chance of being able to do something like that even if I’ve come out of university and gone into it. There wasn’t the understanding there. So we’ve moved on. We’re mature and I think as much as you can – you can focus most of your like on the user. You should, but you can’t get away from the technology.

Per: Right.

James: In the branch we’re dealing in, we’ve always – at the end of it, you’re always going to come back to technology. You can’t not. It’s fundamental.

Per: It’s what it’s based on.

James: Yeah.

Per: Yeah.

James: So by ignoring the code side of things, by ignoring how it’s implemented as a designer, you’re creating a silo for yourself and you’re distancing yourself from the end result.

Per: Right.

James: And there are situations where maybe that is fine. Innovation, conceptualization.

Per: Yeah. I mean there are times when you should actually stop thinking about the limitations and go wild, go crazy and think about what we really want to accomplish. What would be the dream scenario?

James: Yeah.

Per: But then after that, you always have to back up and say, “OK, so what can we do now?”

James: There’s a thud. We have to come back down to earth because we have to produce something.

Per: Right.

James: And …

Per: We have to accomplish something.

James: Yeah. And then you can’t ignore the technology because we’re going into it with the whole white elephant projects. You get into situations where you get to the point of implementation and someone goes, “You got to be kidding. You can’t do that.” For me it’s all about like how can you – it’s a bit like if you were a car designer, but refused to accept that wheels are round, so you end up designing a car with square wheels.

Per: Yeah.

James: I mean come on. You’re going to be thrown back straight. When it comes to the guys who are going to actually manufacture it, they’re going to say, “Don’t you know anything about designing cars?”

Per: Right.

James: I don’t think that falls into – you can’t – I don’t think we’re killing innovation by saying that you’ve got to design cars with round wheels because if you are designing a car, I think today I’m not going to expect that you understand a certain amount about cars, so that it’s going to move on when I try and drive it. The same thing with digital design or web design things. I’m going to expect that you a designer are going to understand a certain amount and we see it constantly where designers don’t understand enough and you end up with things that fail usability-wise, fail SEO-wise, fail conversion-wise.

Per: Bloated and huge and just haven’t thought about the complete experience. Just think about the visual experience. But I don’t think we’re saying that all designers need to code.

James: No.

Per: What we’re saying is that you need to be aware of it and then have an understanding for it and have the dialogue with the people who do understand the technology because that’s what I do. You need to bring – the whole team has to be there early on. It’s not a solo approach by a UX designer. You bring in everybody from the start. This is what we’re trying to accomplish, what our options and we start designing it and the technology people are there or you know enough about it yourself. You realize that OK, we can do it this way or that way. That way, the technology is going to cost 200,000 and that way it’s going to cost 20,000. Is it worth it for the user experience to go the more expensive way? That’s the way you balance it. Going through all those steps with every decision you’re making.

James: Yeah. Could you spin around towards, “Do coders need to design?”

Per: They need to have an – I mean I think we’re getting there. That’s my experience now is that they really have a respect for what I’m doing and I have respect for what they’re doing and I’ve been in situations where the coders have had better design suggestions than I have and you need to swallow your pride sometimes and realize, “Oh my god, if we do it that way, you’re right.” I mean most people have experienced designing stuff now. We’re doing these online services for a few years.

James: Yeah.

Per: And people have seen different solutions and people surf online and they take impression from other sites. So it’s not like you have that one and only solution because you’re the UX designer. A lot of the different competences in the organization have lots of ideas. So when he’s saying also that a company that doesn’t have a fulltime UX designer doesn’t understand the value of UX, that’s not true either because you can have that across the whole board and that’s what you really want and also the tagline of our show actually. Break down the silo.

James: Yes.

Per: UX is part of every role in the organization. It’s not just one person.

James: Yeah. If you ignore one aspect, you’re more likely to fail. I think now I’m just thinking again about future-friendly.

Per: Right.

James: Brad Frost, a coder by background but also a bit of a UX designer these days in what he does. Thinking about how we work with future-friendly responsive and the plethora of different screen sizes we’ve got. You as a designer who has no feeling and understanding for code or technology, you maybe will design a desktop website because that’s seemingly perfect in your world without any consideration of the fact there’s all the different technologies and screen sizes. How can you possibly be a great designer in that kind of multi-screen world without an understanding of the technology? A level which does get very close to coding, as in you would understand how it’s built inside. So yeah, again, we’re not saying that you need to be a coder but there has to be a proximity there, a closeness to your end medium.

Per: But I do feel maybe we’re being a bit hard on Wayne here as well because I think he has a fair point about – I mean you can go both ways. As a UX designer, if you want to develop, I mean you could either go into coding or I mean learn more about coding. I’m not saying you have to necessarily go into being a coder but you can also go the other way and approach management and see if you can actually be a more visionary employee, have a more visionary status where you actually take control of the whole situation, in which case you could actually be the person who understands that technology is important. But you have it on a higher management level and he’s making it really the case for that. A UX person could perhaps be a person who is of more value to the board than someone who works within the IT organization perhaps.

James: You’re right. He does admit. That is kind of – oh, closing the line there. There’s another space for the unicorn. Unfurl your wings and have the overhead view of the business instead and be a Pegasus. We can’t all – all UX can’t be Pegasus.

Per: No, but some can.

James: Absolutely. You need to get UX people higher up the chain and so on. But he’s saying don’t be a coder. Be a business analyst. It’s basically what he’s saying. Well, that isn’t going to directly produce better digital stuff. It’s part of the long term though but I don’t think it’s a fork where – I don’t think we should just shift everyone that way.

Per: No, absolutely not. That’s not what I’m saying. I’m saying that as a UX designer, if you’re not getting people – oh you feel that nobody’s understanding you, then you have different ways to go and this is one of the ways to go. You can perhaps make a case for being – playing a more important part or role in the organization but I mean that takes some balls actually.

James: Well, I think it obviously takes the right organization as well.

Per: Yeah, it does very much so, and I think the only way – I actually have to come back then. The only way to get people to listen to you is to show results.

James: Yeah.

Per: If you’re not showing results, you’re not going to take this route anyway or you quit your job and do something else.

James: Yeah. Wayne here as well says if your company doesn’t feel that UX design is important to have a fulltime position, then he basically says don’t work for them.

Per: I want to change that and say if the company doesn’t feel that it’s important enough to have a UX person, then you’re doing it wrong. All right. Isn’t that true? I mean if you can’t show that you’re valuable, then you’re doing it wrong.

James: I agree with you to an extent but to me that’s the whole kind of – I think Wayne needs to work for a smaller company for a while because I work with lots of companies where they don’t even have a fulltime web person, let alone a fulltime UX person. It’s not like they don’t understand or appreciate UX. Maybe they just don’t have the budget for that or maybe they’re not mature enough as an organization to take on that role. It’s not a definition that says if you don’t have a UX-er, then clearly don’t understand UX. We’re not there yet. We’re not all multinationals. We’re teams of people working on stuff.

Per: No, true.

James: It’s a sliding scale.

Per: And it’s getting back to the really tough conflict of explaining how UX brings monetary value to an organization which often is really hard.

James: And for smaller organizations, it’s nigh on impossible when you enter the really small organizations to sell in multiple roles. You have to be multiple roles. You have to be the designer who can code because they’re not going to spend money on two people. They’re going to come to me or you or someone else and say, “Well, can you do that wordpress site?” So then it’s your responsibility to code a little bit and to think about the UX side of things and to analyze their business needs to make sure you package it all together.

Per: Sometimes if you understand the technology, it’s actually easier to make a case for how you can save money. So that actually makes it easier for you to sell and …

James: Yeah, improve results straight off. Yeah. So yeah, so next time round, you’re getting maybe more buy-in for the next step up in the UX because you’ve shown that just that little change can make that much. So maybe another change can make that much more.

Per: Yeah.

James: Persuasive.

Per: I think James we have to get you off to a meeting.

James: You’re right. I forgot to look at the time.

Per: Yeah.

James: Oh, blimey. No, I really do have to go to a meeting though.

Per: You’re in a rush. OK.

James: I’ve got to really rush now. Should I just throw the mic down and run.

Per: Yes.

James: You got the keys.

Per: James, remember to keep moving.

James: I’ll see you on the other side!

Hide the transcript

#53 James & Per quantify themselves

James and Per are both fans of quantified self. In this show we take a look at what quantified self and life logging are. We chat about some of the potential benefits plus some of the challenges that surface from a UX and user perspective. Is quantified self ready for mainstream, or is it still a play thing of early adopters and gadget geeks?

(Listening time 37 mins)

References:

Per wearing a Jawbone UP and a Fitbit Flex:
flex-and-up

Transcript:

James: Hello and welcome to episode 53 of UX Podcast with me James Royal-Lawson.

Per: And me Per Axbom.

James: It’s a little bit odd when we do that the other way around. Not as often we do it that way.

Per: No, that’s true. I usually start off. It feels kind of weird.

James: It’s like wearing someone else’s underwear.

Per: Yeah. It’s August 6th of 2013. It’s a Tuesday today, I think. I have been working a bit that I’m off again and I’m actually at the summer house now.

James: I’m at Beantin HQ.

Per: Yeah. I’m sitting in a really hot car because this is the only place I could find that would be silent.

James: You’re in your car!

Per: I’m in my car in the passenger seat because I have five kids I’m taking care of. Well, two of them are mine at the summer house here. So it’s really loud.

James: Beantin HQ is 29 degrees at the moment. I’ve got two, maybe three kids. I don’t really know, to look after. I’m clearly not doing it very well.

Per: Instead we are recording.

James: Exactly. Well, OK, let’s jump into it. First of all, welcome back to all of you in Sweden who have bothered to start working again and is starting to listen to the show.

Per: Right. A lot of people are returning this week and next week …

James: of our Swedish audience..

Per: Yeah.

James: …We can see that they roll back into work now and start listening again. So, hello there. Welcome back. Today though, we’re going to be talking about quantified self and life logging. What’s all that about?

View the full transcript

Per: Well, interesting that you should ask James because I think we’ve talked about a bit before, you and I, about life logging and what’s the difference between life logging and self quantification. The gist of it is that you gather as much data about something as you possibly can to like make out trends and behaviour of yourself or in trips you’re making, your weight, whatever.

So usually when you talk about quantified self, you’re talking about data that you’re collecting about yourself and your body and your behaviour but life logging goes even beyond that. I think one of the hugely massive great examples that’s making the rounds and it should have been out by now is the Swedish innovative Kickstarter project Memoto where you actually have a wearable camera. You could even argue that that’s quantifying yourself but it’s also quantifying your life and what you’re seeing around you.

So that’s a camera that you attach to your clothes and it’s taking a snapshot. I don’t know what it is actually. It’s maybe every 30 seconds something. Yeah, something like that. So once you start doing all this life logging, you’re starting to see trends and behaviour because then you can see maybe from the photos. You see what you’re eating or how much you’re exercising and the gadgets that you and I will be talking a lot about today, the wrist bands that we wear to monitor our sleep and see how much we moved during the night. You can connect that and how badly you sleep, to exercise, and how much you’re moving around where you’re checking in.

Sometimes you see trends which could be quite interesting and that’s the incentive or the appeal for people to actually realize stuff that they haven’t realized before about themselves, but also to be able to look back I guess to previous behaviour and previous data about yourself that has changed over time.

James: Yeah. I’m just going to have to go and shut the window.

Per: Oh, absolutely.

James: I can hear the kids that I’m meant to be looking after far too much. I don’t want to hear them at all. So just hold on a second.

Per: OK.

[Pause]

James: So sounds are gone. Yeah, well for me, the quantified self aspect is when you gain  insights from the data you gathered by various means whether it’s weighing yourself or taking pictures every 30 seconds or counting how many steps you’ve done and so on.

Per: You could argue even then that it’s a variant of behavioural therapy that to be able to change your own behaviour you need to become aware of your own behaviour and that’s the basis of behavioural therapy. So what you’re doing here is automating that using a device of some sort. Well, it can actually be that you’re entering data yourself but as long as you’re doing it consistently over time.

James: Well yes, exactly. I think it’s just – like all statistics, you’ve got to be careful to make sure that you understand what you’re reading and what it is that you’re looking at. So for self-improvement or the behavioural therapy side of things, I mean if you look at a chart that tells you you’ve had this much sleep, and you believe it’s correct, you’re going to be changing your behaviour best on that information.

Per: Right.

James: And whether it’s correct or not is something that’s questionable.

Per: Yes.

James: Or how correct is it.

Per: Exactly, how correct is it and what type of conclusions should you be drawing from the data.

James: Yeah. One of the reasons I mentioned just that is because I have a Jawbone UP band.

Per: Yes.

James: Which I wear on my wrist. It says – looking down at the wrist, realizing it’s not there. Where is it? Then I’ve just remembered now, I put it in my pocket, which is a thing in itself actually that I have to put in the pocket around that, but I will get to that. Now I have a Jawbone UP band I wear and I keep it on during the night as well and it measures steps during the day and it measures how little I move during the night and from how little I’ve moved or how much I’ve moved, it judges whether I’ve been sleeping deeply, lightly or awake.

Per: Right.

James: Now this produces lovely little graphs. I think the Fitbit Flex that you have, you know collection, does a similar thing. It measures how little you move and produces nice little sleep graphs.

Per: Exactly, basically the same output from these different devices actually.

James: Yeah.

Per: To be clear, I have the Jawbone UP as well before and we both had it while we were travelling to UX Lx. So we were sort of comparing the data we were getting from that as well at that time, which was really interesting.

James: It was very interesting because we were sharing a hotel room as well so we had very similar sleep patterns because we were going out together and so we’re waking up together.

Per: Oh my god. We’re going there again.

James: Oh, really. Anyhow, what you could see was that you Per for example, you actually – my wife as well. You’re very still during the night.

Per: Yeah, exactly.

James: So even though you’re awake, it doesn’t register you’re awake because you’re not moving enough and my wife, when she was using hers at first, she ended up getting to the habit of when she woke up during the night, she would shake her arm so that the UP knew she was awake. So it would register an awake moment.

Per: So basically telling the – that’s how you talk to your arm band. You shake it …

James: Yeah, which is silly really. But no, but for her that was her pattern of sleep. So to try and improve the graph, she was doing this kind of – she was having to work a little bit extra to get better data but that’s a learning thing. when the app presents the graph to you, it doesn’t really – there isn’t really so much talk about it’s inaccuracy or potential inaccuracy. The marketing and the drive of a lot of these quantified self things is this is how much sleep you’ve got. This is how many steps you’ve taken.

Per: Yeah. When you open up the app, it actually tells you you’ve been awake seven times this night.

James: Yeah.

Per: And the funny thing about that is that a lot of people are going to take it literally because it is presented literally.

James: It is presented literally.

Per: Yeah, and that pisses a lot of people off and they realize, “Well, I haven’t been awake that many times.”

James: Exactly.

Per: And you have to start interpreting the data. Well, that means that you’ve moved around quite a lot perhaps seven times during the night and you may and may not have woken up specifically during those times.

James: You want to peel back a little of the UI effectively and say OK, when it says this, it really means this. My wife, she actually stopped using her Jawbone UP for two months, the last couple of months, because she just got so disappointed that it wasn’t really telling her how much sleep she was getting and I explained to her in my usual way. Well, of course it’s not going to know exactly how much sleep you’ve gained because you haven’t got electrodes attached to your head. The only way you can tell exactly how much of six different levels of sleep you’ve got and the four different types of REM sleep and so on is by the electrodes attached to your head. This is just a kind of gyroscope that’s attached to your wrist. Of course it doesn’t know.

Per: But I mean most people won’t know that and I mean they will trust the app, what it’s telling them, because this is a new thing. It’s a great new device. It’s being marketed that way. It doesn’t have a big disclaimer when you open a box that – don’t trust the data. It tells you that this will measure sleep patterns. It will measure the number of steps you’re taking – and that’s it.

James: You had both on your wrist for a while, the Jawbone UP and the Fitbit Flex.

Per: Yes, I did.

James: So there you got to see how each of them has different formulas you could say for judging what kind of movement is a step.

Per: Yes. When I walked more than 10,000 or 12,000 steps per day, usually the Jawbone UP was almost 1500, 2000 steps less than the other one. So I mean that’s how you can tell that they’re not really exact and usually you probably have to calibrate these to your own walking style, your own gait, which is really interesting as well. I mean you can’t take a device and be sure that it will fit with your body and the way that you move around and if you’re – and as we’ve both noticed I think is that if you’re riding in a car or riding a bicycle and stuff like that, it does register something and sometimes not as much as other times. So many different aspects of this that can affect the data that you’re seeing.

James: Shopping trolleys Per.

Per: Shopping trolleys, oh that’s interesting.

James: I realized that when I do shopping which sometimes can take an hour and a half, I just get almost a flat line on my graph of how many steps I’ve taken even though I’ve been walking for an hour and a half.

Per: It doesn’t register.

James: And that’s because my arms are holing the trolley.

Per: So you will have to start walking with only one arm pushing the trolley.

James: So you put your Jawbone UP in your pocket which is why mine was in my pocket now because we went shopping this morning and I put it in my pocket while we were shopping. So again, you have to learn an interaction in order to fix the limitations of this particular device. I mean OK, if we’re talking about the – what is it? Withing scale, the Wi-Fi scale that can measure your weights and it transfers up to the app it’s on. That’s a little bit different thing because with the scale, I expect it to be 100 percent accurate when it comes to weighing me. Although as we know, if you weigh yourself in the evening or morning and so on, you get different weights because of different liquids and different food in you and so on and waste in you.

Per: You’re even actually – well how do you say it? Less tall in the evening than you are in the morning.

James: That’s right. Your spine compresses and it can be a couple of centimetres.

Per: Yeah.

James: Or a half an inch. But yeah, so even there, there’s a certain pattern you got to follow because – to get the accuracy. Then there’s some other guessing aspects to it that he tries to do but the weird thing is a pretty definite thing because you’re still in the platform and it tells you how much …

Per: So if we connect this to a UX perspective, then I think it’s really interesting how you communicate to the user will set the expectations of that experience and if that experience is not aligned with what you’re telling them, then they’re not going to like it.

James: But if you told someone, “Ah, this is all a bit of fun. It’s not really accurate,” would they sell any? Would people be interested in changing their behaviour? Doesn’t it have to lie a little bit given the limitation, the intrinsic limitation?

Per: Excellent point. Could it perhaps be saying something in the lines of that this is accurate to the point of X and we can’t really promise anything but it gives you something to work with. I’m not sure what I’m saying here but …

James: No, I know what you mean but there is going to be a lot of people – there are going to be a lot of people that – like my wife that think, “Oh god, if you can’t do it properly, I’m not interested.”

Per: Yeah, so that’s interesting. So people would buy it. Well, they use it. So does that really mean that people are not ready? Is the device not ready for the mass market yet? Is it just ready for the geeks like us?

James: I would say so. I think generally a lot of this quantify self stuff demands you to be quite – well, highly engaged. You’ve really got to be driven to want to keep it on you, to keep syncing or checking the app or learning these little tweaks to make it good. Most people aren’t going to bother doing that.

Per: Yeah.

James: OK. Maybe we go beyond geeks here. We’re going to get into the fitness geeks as well.

Per: Yeah, exactly. Like my wife currently who is running a lot and she has been using a Fitbit One which is not the arm band but the one that you attach to your clothes. She has been using that for over a year now. She has been using it like everyday and she’s really fond of it and it has changed her behaviour a lot because I mean – and mine sort of. I mean I had a Fitbit One and didn’t have anything for half a year or something but we started taking walks in the evening to get up to 10,000 steps as per recommendation of what someone our age probably would need to walk everyday to keep healthy. That’s really interesting how that behaviour changes and we can bring people together as well, not only in the virtual world but in the physical world.

We’re actually starting to take walks together and which is an interesting effect. Whether or not the accuracy of the device is an issue here, I’m not sure, because I have – I think I have the same discussion with her that it’s not that accurate but it’s a trend and that’s sort of fine with her.

James: I think that’s the key. Just when it comes to these bands, being aware of the days when you’ve not moved so much is quite useful. It’s a reminder to say, “Oh, you actually do need to move more than this.” It can make a couple of hundred calorie difference in your burn rate by walking a few thousand steps less. I noticed that during the summer. When you’re in holiday and you sat around, you’re drinking beers and relaxing, I’m not walking about. You understand why people go gain weight during the summer, during the holidays. Have you tried the FuelBand, Nike FuelBand?

Per: No, I have not.

James: This is for people that run. This is another wristband that you put on and the FuelBand in my impression – and I’ve got no real idea about this – is that there’s more normal people who have the FuelBand than the UP and the Fitbit.

Per: Oh, interesting.

James: It’s pushed by Nike with trainers and everything. I’ve got a couple of running friends in England that have the FuelBand.

Per: I’m guessing it’s also time to market and I’m guessing in the fitness world the FuelBand is a lot more used. The FuelBand though does not have the sleep monitoring, I think. It only has steps.

James: Yeah, steps. What’s that with the little satellite thing, the little – there has got to be a name, the little thing that you put on your trainers.

Per: Oh, that you put in your shoe. I actually have shoes that one of those fit in.

James: It’s called Jeremy or something. No, not Jeremy. It has got like a man’s name.

Per: I don’t know.

James: I’m sure it has but that’s another little thing. Is that something you have in addition to the band or you have just that and an app?

Per: Just that and an app I think.

James: Right, OK. That measures steps as well.

Per: Yes.

James: Yeah.

Per: That was a Nike Plus thing that they – that’s the first launch they did together with Apple I think, one of the first devices that could actually talk with your phone and give you information about how far you were running.

James: Right, yeah. One of the first ones on the market. But this whole – back to the question about whether I still – I think generally it’s just geek stuff. To go mainstream, with almost all of these things we know that to go mainstream, involves a level – I think a level of simplification that isn’t there yet or a level of desire that isn’t really there yet.

Per: Right, and something that they are trying to do is be able – you’re making people able to personalize these armbands more and more and have your own colour. They’re trying to design them in a way to make them more appealing as well. So that’s one big aspect of these arm bands is that they have to be designed really well for people to even want to wear them and that’s one reason that my wife actually doesn’t have an armband. She doesn’t want to wear one though all the time. She has the one that she has in her clothes even if that means that she sometimes forgets to put it on.

James: The thing there is you could use it sometimes with these telephones and have apps on their telephones.

Per: Oh, yeah.

James: But I get the impression they’re really – even less accurate. I’ve got that impression.

Per: Yeah, I can’t really say.

James: Also you don’t wear it around – it’s not with you maybe every single hour of the day, so you can see things.

Per: And having the phone on your arm when you’re sleeping isn’t really that comfortable and believe me, because I’ve tried because there are apps for that. Oh, actually when you attach it to your chest.

James: You mean you strap an iPhone.

Per: You strap an iPhone to your chest. I have tried this but not – like two times.

James: Like Iron man. The generator thing in the middle of your chest.

Per: And that was the first one time I tried what you have in the Jawbone UP which I don’t have in the Fitbit Flex where it actually wakes you up when you’re in light sleep.

So that’s one of, I think, the main features that I am sort of envious of you that you have is that it wakes you up. It can tell when you’re moving around a lot so it wakes you up before you’ve set your alarm for it, before the time that you set the alarm for it because if you wake up now, you will feel better than if you wake up later or maybe in deep sleep.

James: Exactly, that’s the thing. It is a Smart Alarm and you’re right. This is my killer feature with the UP and I love this. I’ve changed using this every single day now as my alarm. You give it an alarm window of 20 minutes or half an hour and you tell it this is the latest time I want to get up. Say 20 past 7:00 and if you get an alarm window of 20 minutes, the band will – it will of course be monitoring your sleep. It’s monitoring your movements and if it notices you’ve come up from deep sleep into light sleep or rather if it notices you in deep sleep when it’s your alarm time. It won’t wake you. It will wait as long as it can to let you come out of deep sleep naturally and start moving around a bit. Then a few more minutes and it will vibrate unless it reaches the end of it.

It’s right. What happens is that, that you wake up more naturally. You wake up at a point where you’re actually ready to wake up and you feel much less tired than that car crash of an alarm when suddenly something starts wailing at you at a certain time. You have move around then to go to snooze and so on. It’s an excellent feature. I’m hoping they develop it a bit more to make it a bit more – a little bit more flexible.

Per: And I’m hoping that the Fitbit Flex will develop it because I mean that is a software feature that they have the data so they could implement it afterwards.

James: Yeah.

Per: It’s what I’m thinking.

James: Yeah, it’s software mainly but at the same time, I’ve noticed that you can only see what alarms are set by looking in the app.

Per: True.

James: An app will only show you the alarms when the band is connected and because the UP isn’t wireless, you have to plug it in. So to check your alarm for the morning, is actually quite complicated especially – it’s happened several times – I get into bed, put my band to sleep into night mode. Then realize, “Oh god, have I actually set the alarm for the morning?”

So I have to get out of bed, go to my phone because I don’t charge my phone in my bedroom and plug the band into the app, open the app, check the alarm, see that it sets and undo all that. Go back to bed. It takes minutes whereas if there was some kind of display, it could just tell me so many hours the next alarm.

Per: Right. That’s true. Yeah, I agree and I’ve been comparing the Jawbone UP because I’ve had both with the Fitbit Flex and what has been surprising for me is how enormously different these two arm bands are based on – well, they’re supposed to be doing the same thing really, measuring steps and like monitoring your sleep.

They’re designed very differently. Just studying these two devices, it’s interesting from a UX perspective looking at how they actually implement it and how you charge it, how you sync it which is wireless for the Fitbit Flex if you have certain phone times like the 4S and up, iPhone 4S and certain Android phones as well.

James: Does it use Wi-Fi or does it use Bluetooth?

Per: It uses a special type of Bluetooth. I’m not sure if it’s called Bluetooth 4.0 or low energy Bluetooth but one of those and not all phones have it.

James: It might be the same thing. I’m not quite sure.

Per: It could be.

James: Yeah, OK. That’s interesting but I like the fact that the Jawbone UP needs to be charged every 10 days and it’s pretty much true. It’s more than a week anyway so I change it every Monday morning.

Per: I can easily say that the UP has better battery life than the Flex and the Flex does not always last a week which means that I can’t have like a set day in the week that I can recharge it because I have to monitor it and there’s another big issue with the Fitbit Flex as well actually. It does not have a battery indicator which is …

James: At all?

Per: … insane. Yes. There is an API and there is a third party app for – that I’m using that actually emails me when it’s getting low in battery but I’m so surprised they haven’t implemented it on the device.

James: I mean that’s the kind of thing we’re talking about, this extra step, these little extra things you got to learn and tweak and do to make this work which implies that it’s clearly not ready for mainstream.

Per: Right, which makes me think also because I mean the display that my wife has on the Fitbit One, it’s a large display. You can just look down and see how many steps you walked. It has a clock which none of our devices have and stuff like that and I’m not sure if it shows the alarm. Maybe it does. Maybe it doesn’t. But you can see so much more without having to sync it, without having to go into the app, which I think is a real benefit as well for the most people who are just getting started with this device and who are more accustomed to the old types of pedometers and stuff.

James: I mean I wonder if the whole quantify self thing is kind of doomed to be like low adoption and inaccurate, given that we know that most people don’t bother configuring things. Is it ready out of the box? And just with quantified self, it’s incredibly personal. You’re measuring you and so if you are prepared to customize, and most people aren’t, then how can you make a product that is a one size fits all?

Per: Exactly. I think that’s a really good point and I mean just one example is that both of them comes at actually – you’re supposed to walk 10,000 steps everyday.

James: Yeah.

Per: And there are a lot of people who don’t do that and aren’t able to. So what happens is that you get all these sad faces and red alerts and stuff that you haven’t and you get that for two weeks and I mean you’re ready to give up and the thing about UX and your experience in behavioural psychology is that you need to get quick wins fast. You need to see the benefits of using it really fast. So it should be set like at 5000 and then my recommendation is usually set it at 5000 and when you manage to do 5000 steps everyday for a week, then raise it to 6000.

James: But if you’re a jogger, wouldn’t you be really kind of frustrated and disappointed with that, that you get this thing, new thing and even the first week, it’s kind of like oh my god, you’re utterly fantastic. You’ve done 30,000 steps. I mean you’re just going to go, “Come on. Of course I am. I’m running.”

Per: Yeah, yeah.

James: Again, one size fits all. It’s a very different use case.

Per: You need the quick setup guide.

James: Yeah, me and you and not runners. So we don’t knock up that kind of number of steps in the same way because we’re just walking.

Per: Right.

James: Yeah. So we need a quick setup in the beginning. Yeah, that maybe it is.

Per: It would help at least, I think.

James: Yeah. I mean we’ve focused an awful lot on just these bands in the show because that’s probably because we both got them and we’ve been talking a lot about this during the summer and you’ve written a blog post in Swedish about this. But I don’t think the problems are limited to this type …

Per: No, it’s all the same things. How do you get started? How do you talk to it? I mean the Jawbone UP has a physical button. The Fitbit Flex, I have to tap it, different stuff like that. How do you get it to talk to the device, to the app?

James: The interaction itself.

Per: How does the app talk to you? Is it telling you stuff that aren’t true and how do you react to that? Like the example I gave with waking up seven times even though you haven’t and there are so many aspects in UX to this – since it’s a physical device in which I love about it and you have to think about – well, from the point that you wake up in the morning and how you interact with it during the day and how many days before you charge it and stuff like that and all of those things combined is what creates your experience.

I mean the main reason for me, using the Fitbit Flex right now is because I’m competing with my wife who has also a Fitbit device. But I mean I can’t say that there’s a clear winner between the both of them even though they’re very different in design and functionality. They both have benefits and well, disadvantages to them. But there’s so much more to do in that area actually I think.

James: I didn’t realize until we talked about it a little bit ago that you have to shake the Flex to tell it what to do because there’s no button. I had no idea …

Per: Well actually, you have to tap it and you like tap it twice and you see how far you went. Oh, there’s an indicator for how far you’ve reached, how close you are to your goal and you have to tap it like four times quickly in a row when you’re telling it that you’re going to sleep and usually that fails for me and I have to do it like three different times.

James: Have you seen – there was a sketch on an American – one American talk show kind of late night – late evening talk show ones where they did Google Glass and he was tacking the mickey – go back glass back! And he was shaking it flicking his head flicking his head and it looks like you’ve got some kind of crazy tick because you’re going to do this head motion thing to make it go back.

Per: And sometimes I have an alarm going off when I’m like in the store or something or standing by the cashier and I have to start tapping violently on my wrist and they can’t really understand why. At one point I actually – I was shaking a juice carton and I realized that my band was set to sleep because it thought I was tapping it.

So I mean that type of interface has lots of disadvantages to it. I mean you have to think about people actually move their arm in real life even though they’re telling you that you should put it on the arm that’s not your strongest. I mean that doesn’t always like solve all the problems that you can encounter during the normal day.

James: Fascinating, but it’s – there’s a lot of stuff here and a lot of stuff to do that you said, the interaction and about a two-way interaction with a physical device and communication feedback. Not just feedback in the from of graphs but feedback from a small visual acknowledgements or sensual acknowledgements.

Yeah, it’s a fascinating area when it comes to these bands, but even with some of the other quantify self things and how you – why do it, what you can do from it and the incentive side of things is crucially important. I’m thinking of Memoto there and taking the photos all the time and trying to build up some excuse as to why the hell you would want to take a picture every 30 seconds of your life. I can say that that’s definitely not going to go main stream. Same thing with Google Glass. I just can’t see why or maybe I’m just being old there, Per. Are we being old again?

Per: I’m not sure. I was sort of thinking the same thing. Are we being too old? This spring I was – at a talk with – there was a Quantified Self Stockholm meetup and Kevin Kelly came.

James: Oh, yeah.

Per: He’s the founder of all this quantified self groups and also the founder of Wired, a co-founder of Wired Magazine. But he was talking about how important it is to keep measuring even though you don’t know why you’re measuring.

James: He’s right there.

Per: Yeah.

James: Absolutely.

Per: Because sometimes you just find stuff because you’re measuring.

James: Yep.

Per: Yeah, and I really love that, what he was saying there because that’s really an important point. If we stop measuring, if we don’t see the point of it, then we’re not going to discover anything new. But if we start collecting data, as much data as we can and start seeing trends, then all of a sudden new stuff is going to appear that we can draw conclusions from and probably change the world basically in the end.

James: Now he’s absolutely right with that. You can never go back and start collecting data again. You don’t do it. That’s true of everything, whatever we’re talking about, analytics for our website or temperature values from your house or your wristband that’s measuring you.

Per: And that’s something we haven’t talked about today is the data that we’re actually collecting can be used by our respective apps and the companies that they’re behind, so you can actually get – I mean you’re inputting your age, your weight, your height and everything. So you can get on the whole population. You can start seeing trends on how much our people are walking during the day in different age groups and what is the norm and what is the mean and what should be the recommendations. We’re seeing that people are walking less over time and you can start seeing that over the next 10, 12 years if people are using these types of apps.

James: Yeah. Why don’t we just all get the chips fitted?

Per: I mean it’s inevitable, isn’t it?

James: To be honest, I’m starting to think probably. It’s going to be so much – I mean you’ve already had the night clubs. A few high end night clubs have the little chips inserted, injected into your arm.

Per: Oh, yeah.

James: It is a way of kind of having VIP pass and non-transferable. So I think there is going to be a growing group of people who are quite willing to have a little thing injected somewhere. Now people have got tattoos and all the rest of it, and piercing. So I can’t say there would be too much of a problem with a chip, provided they’re reassured about the integrity side of things. You’ve got control over it and it’s not some kind of like dog tagging system where you are getting hooked up to a government database somewhere to monitor how much you’re sleeping.

Per: I think the conclusion here is that I mean these devices that we’re talking about, the sensors and the self-quantification, I mean it’s ripe for the picking for us geeks and it’s fine for us early adopters but it’s not really there yet for the mass market. But perhaps that’s what we’re for, that we have to use these devices so that they can like calibrate them and make them better over time so that more people can use them.

James: And learn a huge amount. This is an excellent opportunity for us to analyze what we’re doing, analyze and to look at – how does this physical object that we carry with us all the time, how does it work? What’s making this work, user-interaction-wise or UX-wise? What don’t work? I mean give us a little chance to experiment. That’s what us early adopters are for. We are for testing up.

Per: We are guinea pigs.

James: Yeah, we’re guinea pigs and we like complaining about it a bit and so on. But it’s fun and I mean that’s the most important thing to remember of the quantified self stuff. It’s actually fun.

Per: Exactly. Yeah. Good point. It’s getting really, really hot in this car.

James: And me too. I shut the windows so I’m up to 30 degrees now in here and I need to stop. But before we go …

Per: Yes.

James: A little reminder, now that our Swedish listeners have come back and come back to work after the summer break. We’re going to be at Conversion Jam 3 on the 10th of September like we were last year.

Per: Really, really fun.

James: It was really good fun. It’s a really intensive day of speakers here in Stockholm, Sweden. Really well-organized little conference and …

Per: Lots of international speakers.

James: Yeah, including one of our favourites, Craig Sullivan.

Per: Yes.

James: Also Brian Massey. He did that last year too. Sorry, André Mores was there last year. So no, it’s normally a really good day and for you listeners out there, we have a discount code if you want to come along or you are in Stockholm or in Sweden and want to come along.

Per: And just for the sake of meeting us.

James: Yeah, that works too. The code is simply “UXPODCAST” if I can remember correctly.

Per: Yes, it is.

James: Yeah, UX Podcast and you get …

Per: When I saw it, it said “UX Podcast” in capital letters. I don’t think that matters.

James: If you don’t get the 200 kroner discount with it in lower case, try it in capitals..

Per: Oh, yeah. I’m really looking forward. Yeah, we will be recording our shows on location there as well, which would be excellent fun.

James: Yes.

Per: One great way to get access to the speakers.

James: It’s, as always, great fun. So thank you very much for listening today.

Per: Yes, and we will talk to you again in two weeks.

James: What do you say?

Per: I say remember to keep moving.

James: I say see you on the other side.

Per: Ah, that’s it.
Hide the transcript

#52 James & Per move beyond 960

Inspired by a question Bruno Figueiredo posted to Facebook, James and Per try to answer the question – How do you decide what resolution to design for? We talk about screen resolutions, viewports, typography, whitespace, languages, statistics. To finish off, we even try to provide an answer to the question…

(Listening time 44 minutes)

References:

James’s whiteboard showing a 6-step answer to the show’s question:
DSC_1267

Transcript:

Per: Hello and welcome to episode 52 of the UX Podcast. You’re listening to me Per Axbom.

James: And me James Royal-Lawson.

Per: And we’re set –  what date is it?

James: Eighteenth.

Per: Eighteenth of July, Thursday. I’m recording this a week ahead because you’re going to Spain.

James: I am.

Per: Yeah.

James: On Monday and well, I’ve bottled it. We recorded one episode when you were in America but to be honest, I just got excited about the fact we could use our new microphones.

Per: Right, new microphones, condenser microphones hooked up to Blue Icicle. So you will have to let us know on Twitter if this sounds better than usual. I really hope so.

James: I just couldn’t bear the fact that you would be recording using these new microphones and I would be using Skype on my tablet from a little apartment somewhere in the south of Spain.

Per: You want to sound as good as I do.

James: Yeah.

View the full transcript

Per: OK. We’re fully dressed.

James: Yeah, hold on. You’re making me very confused now. So we’ve been here for an hour and you said, “And now we’re fully dressed.”

Per: Don’t go there. You’re always confusing the listener. I was going to explain one of the fun things about doing a podcast is you don’t really have to take a shower but people don’t really care what you look like or smell like because you only had to listen to our voices, our beautiful voices. When we decided to do this – we just decided yesterday. You made a joke that when it’s coming over here early, that you wouldn’t be fully dressed probably.

James: I said that you were scared of Jimbo flesh.

Per: Yes. Thankfully you were dressed when I came over here. You hadn’t had breakfast yet.

James: No, I hadn’t.

Per: Oh, well.

James: Sorry, I’m fully of food now. I’m dressed.

Per: Yes.

James: Everyone is dressed. To calm you all down, we’re all dressed.

Per: But it is really hot and it’s getting hotter in here.

James: Yeah. People who have been listening to this show for a long time will know that the – well Beantin HQ, the studio where we record this, during the summer months, it does get warm in here but we’re only up to 24 degrees.

Per: And we have entertainment because just outside our window there are bouncing kids. Well, two right now but …

James: It’s just two but not the same two as it was a second ago, the trampoline in the garden, which we can see from the studio window.

Per: Which also is a good test of the soundproofness of your studio and the quality of our microphones.

James: Yeah, and the loudness of my kids.

Per: Yes.

James: It’s not going to go well, is it? So what are we talking about today?

Per: Well, I think it was last Friday. Bruno Figueiredo, you will know him from UX Lx, the curator of the UX Lx Conference.

James: And we talked to him in one of our …

Per: Yes, we did on the first conference show. He posted on Facebook about screen sizes and he was looking at statistics and seeing that with the 1440 pixels is becoming more and more common, 1440 and wider and the general question was, “Should we start moving away from the 960 pixel width standard of our designs and go higher than that?”

My first thought was well, hold on. We have all these tablets and mobile and we’re thinking mobile first. Should we start going wider? But then I realized it was like – it was a good question partly because mobile first is valid in countries where mobile first is true but also as you pointed out to me James, clients are still designing or wanting websites that look like websites.

James: Yeah, there’s an actual element there that it’s not just about the kind of design utopia. You still got to – a clients relationship and a lot of times, they’re going to want to have a desktop design or something they can give an opinion about and look at and I know that you have to deliver that kind of thing quite a few occasions.

Per: Yeah. And other stuff going through your head is like, “Oh, do we go wider?” Does that mean wider columns for content? I mean must decrease legibility and readability and all that stuff. It would be so hard to read. What would you put in all that space? It’s like some Manhattan architect seeing a new space and you have to build something there. But do you really have to fill every space on screen just because people have bigger screens?

James: You threw a lot of questions out there all in one go. But I mean the 960 grid, there has been the – that has been the kind of foundation of a lot of the design work for a long time.

Per: And people have loved it.

James: Well obviously about 2007 or something, 2006 or something like that.

Per: And it has worked nice because it split it into four columns, six columns, eight columns.

James: Exactly. It’s a beautiful number. It came along when laptops suddenly got bigger. We got bigger screens and desktops and monitors got better and we end up with these 1024 by 768 4:3 aspect ratio screens and 960 became a real good thing. Everybody stayed with it. It was across the board. It was valid but then I think for the – when I did a little research last night, I saw that basically for the last I think five years, you can find articles talking about, “Is it time to move on from 960? Is 960 dead?”

So even before the mobile revolution, people have been questioning the 960. Should we move up? And now …

Per: Is that probably because as a designer you’re aching, aching to design new stuff that fits the screen that you’re on everyday?

James: Or as an agency or something as a team delivering to the client. You want to deliver that little bit of magic, that new thinking to push you ahead of the crowd.

Per: Yeah.

James: But then we got the whole mobile thing comes and we’re all going to mobile first and small things first. So you get people saying, “Well 960 is dead because we shouldn’t be starting with 960.”

Per: Now the interesting thing of course then is can we even have this discussion about what size to design for without knowing what we are designing. That’s kind of funny. So when we talked about this yesterday, we thought, “So how do you actually decide what is the best screen size to design for?” It’s really impossible unless you actually know what product you’re designing, what goals you have.

So I mean the gut feeling is start looking at statistics like Bruno did and seeing that oh my god, people are using all these large screen sizes now. Should we start taking them into account? Then the research you’ve done James is pointing out that people actually have large screens but they’re maybe not even having the browser maximized meaning that they really don’t have the need for actually having that big large real estate screen size that you’re designing for.

James: Well, we talked about, for a while ago now, I think it was autumn last year. Jakob Nielsen, he altered his recommendation. I think it was – how long is that? It was the end of last year, I think it was. His recommendation for what width design for from 1024 wide to 1440. He went up 50 percent in his recommendation based on screen resolution research he had done showing people are using screen resolutions that are huge amount bigger.

Per: That’s about the time when we started wondering if Jakob Nielsen was getting high.

James: Oh, we just presumed he was not writing the articles anymore. He was getting a student or something to write them because there was a whole row of articles there which were just off the wall. They really weren’t quality and good like they used to be. One day we have to interview him.

Per: Yes, we do.

James: But anyway, so what I did, I updated my – I’ve been doing viewport research for a few years now and I’ve created methods that can help you log viewports in Google Analytics. They log it themselves on Google Analytics but you can access the data in a good way.

Per: So just to clarify now so that everybody is on the same plate. Viewport size is the size of the browser that’s – the actual screen size. Do you have the definition? That what you’re seeing is the viewport. I mean you can make your browser smaller and then the viewport is what you see.

James: But your laptop still has the same screen size.

Per: Yeah, exactly.

James: But you’re using less of it for your webpage.

Per: Right, yeah.

James: So this is the viewport. It’s the real estate you’re actually using to put your webpage on.

Per: Right, and you also have to subtract the address bar and whatever …

James: Yeah, this bevel around, stuff like this. So everything has a viewport whether it’s mobile phone or it’s a smart TV or a laptop. You still – there’s a bit of the screen you’re using to show a webpage on.

Per: So you could basically say that the webpage is never the size of the screen.

James: That’s impossible.

Per: Unless you’re maximized.

James: Now, it’s not – I think even then you find that it’s like a one pixel bit here or there.

Per: Yeah, OK.

James: It’s difficult to watch it getting maximized even on tablets because you even got pixel density ratios.

Per: Right. Oh, that’s another story.

James: We don’t need to get into it just now really but I mean it’s complicated. My research, I’ve seen – I’ve been monitoring, I’ve been tracking the viewport size on Beantin.se for three years I think now or more and I’ve seen the resolutions of visitors go up. I mean there’s just a lot more huge screens anywhere. These Retina Displays are two and a half thousand pixels and so on.

But what I’ve seen over the last two years or so is that the width, the average width hasn’t really increased. It’s still hanging around the kind of – well, 1280 or just under 1280 wide.

Per: Yeah.

James: And it has been like that 2010, 2011, 2012. It has not got bigger. I’m excluding mobile from that because this is – when we’re talking about these giant screen sizes, I think it’s relevant to talk about just the desktops.

Per: So can we make any assumptions about why that is? Is that like people don’t like to maximize their browser even if they have bigger screens or …

James: I think you would have to do some proper research onsite with real users and what’s their behaviour because you can’t see that from your statistics.

Per: Right.

James: But I know from ones I’m looking around is that the people who do have the giant screens, I’ve seen – what I see there is that there were maybe two side by side that you and I have a giant 27-inch screen. You’ve got two Safaris or you’ve got programmers for example. This is where I see it quite often that they would have test version of – webpage will be open on one side and then the other side would be the coding screen.

Per: Tools and Photoshop.

James: Or where they’re writing, when they’re doing something. So that’s huge split screens. We used to have – I mean I still do. I have two monitors here in the office.

Per: Right, yeah, and I like to do that as well.

James: So these giant screens, they just allow you to have two screens.

Per: Yeah, to see more at the same time.

James: Yeah, because you’re viewing angle – you can’t look at these big screens all at the same time. You’ve got to turn your head.

Per: Yeah.

James: So if you designed a website that was two and a half thousand pixels wide, a person looking on the content of the left of the screen would have to move their head to see the content on the right.

Per: Yeah.

James: That’s a design that’s huge by itself. Interaction design, how do you solve that? So you can argue there’s no point trying to fill up that space because it’s – most people are not going to stretch your site that wide.

Per: You also have to think about the incentive from manufacturers to actually build these fantastically large screens. It’s not so that you can view your webpage or your corporate webpage in a fantastic, beautiful big size in which case you would like to have to stand 20 feet away from the monitor to read it correctly. But it is actually too that you can get more work done faster and you can multitask and see stuff at the same time. So you can put windows side by side. That’s the main reason for these monitors …

James: These desktop screen sizes, yeah. Then smart TVs have a massive resolution as well.

Per: Yes.

James: People don’t use the browser on them because it’s awful.

Per: I tried.

James: It’s horrible. Interestingly there, if you do run the browser on them, they don’t use the full resolution anyway.

Per: Oh, yeah. You were saying that. It’s interesting as well. So I mean you can’t even …

James: They adjust it so that they’ve had to zoom in without getting too deep into the ratios and things. It’s not about the pixels that you kind of – you’re being sold. It’s about the way that your operating system or your laptop or device is presenting those pixels to you or that real estate to you.

Per: And should we really even be talking about pixels anymore? I thought we were beyond all that. We should be talking about the content, the content living in any device and you guided me into this article that you were reading yesterday and life beyond 960 pixels, designing for large screens in which …

James: That’s from last year, wasn’t it?

Per: Yeah, I think it is and Ian Yates, he makes the case for the responsive. Then you don’t always talk about responsive in this way because you always think about responsive web design being as something that you do to accommodate mobile devices. But responsive goes both ways. It goes smaller. It goes wider.

James: Exactly.

Per: So responsive is all about accommodating the large screens and he makes a lot of examples or provides a lot of examples of what could you do with this new real estate that you have.

James: Because we have to fill it.

Per: Because we have to fill it and it does make a point in the end that you don’t have to fill it. It means you don’t have to fill – the obligation to fill every space on the screen but it does provide some examples of what you could do, like have more right hand columns, move the footer to the right hand side and again, that’s why I don’t like responsive because you get disoriented when you’re actually moving from one device to another on the same website and you can’t find this stuff where you expect to find it.

James: Was it his article that had the Windows 8 screenshots?

Per: Yes, yes. It was.

James: I love that screenshot because it shows Windows 8 like on a tablet and a reasonably regular smallish device and it has got like 12 bricks or something or 16 bricks, something laid across. It looks – and they’re all on the Microsoft standard, nice colours, the primary colour kind of thing and orange or so.

It looks really quite stylish and nice and then there’s a screenshot of someone with a 27-inch monitor or whatever it is and they filled up the whole thing with tiles and that must be like 150, 200 tiles and it looks like your grandma has made a patchwork quilt from all the leftover material you had.

Per: It’s impossible to find anything.

James: It’s just mad.

Per: That’s something that we know and we know it from psychology studies. We know it from a research and from just experience working with the web for so long.

James: Less is more.

Per: Less is more. The more choices you give the user, the harder of a time they will have finding something useful and making a decision about where to go next in solving their task.

James: That’s the risk with more real estate. You fill it for the sake of filling it.

Per: So we have this case of larger screens but we want to have less information. We’re moving towards less information in most designs I’m working with and I made the case tons of times about – I mean the right hand column, just ditch it.

James: Yeah.

Per: It’s not helping your user. It’s just distracting your user.

James: And then we can expand that and say that while if you’re going to have a super-sized monitor, the right right hand column that you’ve added to fill the space even further beyond the right column. It’s definitely not going to be used, so just get rid of both of them.

But another aspect I think one of the articles brought up that we read last night, we have to put the links to these articles that we’ve read because we’re not referencing them properly but we have read them so it’s good if listeners read them as well. I was talking about the viewing distance we have for these monitors and comfortability, readability of fonts and so on, on the screens.

Like when you’ve got the very large monitors, you’re expected – well, your font is going to be tiny. You can’t read them, so you need those to be bigger. There was a demo I saw with someone who had done – I think using the webcam or something that he did a demo so that when you came further and closer away from the screen, it automatically adjusted the size of the fonts. It’s like an eye tracking kind of demo thing.

Per: Wow.

James: Because readability is all down to how clear letters are from a distance, viewing distance, comfortable viewing distance from the screen. You know that you hold a phone a certain distance away from you. You hold a tablet a certain distance away. You generally sit a certain distance away from your desktop machine and that’s the same and true for even giant monitors.

So we’ve got an added aspect there that we need to know more about where you are in relation to the device, decide what font size or typography we use to make it comfortable for you to read it. Then the pixels don’t really matter in that sense.

Per: True.

James: So yes, EMs, again getting into measurement units. That is much more sensible to use rather than pixels because the web is a reading medium.

Per: Right.

James: We have to make sure everything is readable so you can take actions and you can achieve what you need to achieve. So typography is maybe a more sensible starting point than physical pixels on the device.

Per: I think it is, yeah. Typography, content. I mean well, the content is your starting point. What is the content that you put in there? And the goals, yeah.

James: Yeah, what you want to do and the content from that.

Per: So if you were putting out content, think about what could support that content, not what else could you put on the screen, but what supports the content that you’re showing currently just now.

James: Yeah.

Per: And so few websites do actually, which is a pain. But also what I found – I mean at the same time as I’m saying that you shouldn’t fill every pixel on the screen just for the fun of it, I actually stumbled – and this article reminded me of it.

I stumbled upon it when I was first designing for the iPad, realized that yeah, I want to have all these buttons over here and I want to have this and then there was space left and it was designing an app for the iPad. You need to fill the space. You can’t have empty space in an app and that’s really interesting because then you have to really think about it and that’s when you have these background images coming along, that you would have something that actually fills the space but doesn’t distract you from the content, but actually just makes something that’s in the background, something to rest your eyes on. Not even notice basically but it doesn’t make this page seem strange when you’re looking at it.

There is a case – I mean going back to Bruno’s original question is that so many people actually have larger screens and sometimes you actually do have this wide space on the sides and people are wondering and I know that some of the clients I have been working with are asking – this looks strange. This looks weird. Why is there so much space over here?  Should we do something with it?

Something like background images and stuff like that. I like more than putting more banners or links or whatever, sponsored ads on the sides.

James: Yeah. I get some complaints about my blog because it’s a very narrow single column at the moment and on the giant screens, if you do happen to run it full width, then you’ve got like 1000 pixels either side of white space. It looks very strange.

Per: You were mentioning also – now I’m blabbering here but all the things at the same time but you were mentioning – when you were talking about typography and stuff there as well, you were mentioning before to me as well this thing about language and some languages have longer words than others, so column width actually has to be wider for certain types of languages as well.

James: Yeah, that was really interesting. I’m speaking Swedish of course but we know the Swedish where you do have a habit of …

Per: You have composite words.

James: You have composite words. It does get strung together to be very, very long at times. I mean generally speaking, you would say – well, one of the things that you could find with the research and what I recommend is that you never go lower than 45 characters on a row, on a line. So when you’re doing responsive, one of the checks you need to do there is see how few letters you’ve got left on a line when you’ve shrunk it to its minimum viewport because less than 45, it starts being ridiculous. You end up with one word on each line quite often.

Then you shouldn’t go beyond like what – between 70, 75, somewhere around there and it’s the maximum length for each row. After that, readability drops because nine, ten words on a row is roughly good readability. Generally speaking for us English speaking people, that would be 70 odd characters.

Per: Right.

James: But that’s not true for all languages. German is one of the examples that German has longer words, largely speaking or broadly speaking, which means you might prefer to have a little bit more than that – or towards 80 plus, 85 maybe is more sensible for German. So you get on average maybe the nine, ten words still.

But there then we’re saying maybe it’s more sensible to design for each language you tend to use rather than each resolution, the user specs the user might be using.

Per: Yeah, I like that, adding a completely new complicated dimension to your web design.  Yeah, using it to another language.

James: But from a user point of view, that’s much more relevant. I mean if I’m looking at a site in German that was designed in English, with the 960 grid and the right hand column is 50 characters wide or something, when I look at it in German, or – the web editors, the web managers are not looking after the site when they’re trying to put all their headlines in. You suddenly find that the German part of the organization can’t put the title in for that particular function because it’s 25 characters instead of the 14 in English.

Per: I’ve been there, done that. Working with Vattenfall, the large energy company because …

James: Oh, you’re naming names.

Per: I know because I stopped working with them. It’s so long ago. But they have operations in Finland, in Poland and in Germany. Also Finnish and Polish also have extremely long words.

James: Oh, Finnish has some monstrous words, yeah.

Per: I mean Finnish, it was impossible. I mean the lengths, you had big tabs.

James: Finnish is impossible.

Per: No, but the design was impossible. Let’s not go there!

James: Sorry.

Per: The tabs on the front page. They were just saying like home, business, private. They couldn’t fit. They couldn’t fit!

James: Yeah, the sale content first but language – well, you go to content first then language automatically becomes part of the content first because you’re going to – it would help you produce all your languages beforehand. We know this doesn’t happen. This is the thing about reality – theory in reality. All the great web minds are saying mobile first or content first or both.

That’s what we’re meant to do and we know usability-wise, we’re not meant to confuse our users. We got to keep it simple, focus on tasks, focus on conversion, all that kind of optimization and so on. Yet when it comes to building this stuff, it’s just …

Per: We do it in the wrong way all the time.

James: We do it in the wrong way all the time or we’re forced to do it in the wrong way all the time. I think this is – we talked about this with Brad in the last show about how – I mean it’s one thing standing up and being counted and saying I believe in future-friendly – in doing stuff right and following my heart, my web brain and knowing what I should be doing.

Per: Yeah.

James: But then your client comes along and goes, “Yeah. Well, I want a new desktop site.” You design me of a new product page or landing page or whatever it is.

Per: Right. Sometimes you’re just caught up in building more pages on the website that’s already there.

James: Yes, they don’t want to replace their content management system and they haven’t budgeted or they aren’t ready for doing a major redesign to maybe go responsive.

Per: Yeah.

James: They just come to you and they’ve asked you to do a new – do a wireframe for a new product page.

Per: Right.

James: You forced them maybe into a certain width…

Per: Maybe they’re saying that well, you told me it was future-friendly six years ago. But apparently it wasn’t because then all these mobiles came and what we did before wasn’t future-friendly. So how can I be sure it’s future-friendly now if you just do it responsive? We can’t because maybe that changes in two years. We have some new technology that makes it easier for us to push out content in different devices. Someone will think of something new.

So of course you’re never safe and that’s why – I mean going back to two episodes ago when we had that webpage. “This is a webpage.”

James: Oh, yeah.

Per: That’s where we should be starting with our content, putting it out there, just in plain text. Then start adding the pictures, start adjusting the fonts, the width. Test it. Then start adding the navigation. So do it in the right way instead of so many times going to the ad agency or whatever agency you’re going to and they will design something before having any content at all and you’re trying to squeeze it in.

James: I joked last night when we were chatting about what topic to record today, about web design being impossible.

Per: It is impossible.

James: It is.

Per: The more you know, the more – I mean …

James: The more enlightened you become.

Per: Yeah.

James: The more dark and evil the whole thing becomes. I mean OK, we’re 25 minutes into a podcast show now and we’re trying to help people here and we just said it’s impossible. So you might as well switch off now and go out in the garden.

It’s very, very difficult to mix all of this together and even the greatest web minds out there still don’t really have the perfect answers to everything. It’s a changing landscape as well as a complicated one. We’ve got all these devices. We’ve got all these languages.

Per: And you can’t trust the statistics.

James: You can’t – I think more there is – yeah, at times you can’t trust the statistics. You can’t also maybe trust your own analysis or analytics.

Per: Yeah.

James: Because most people actually don’t know what they’re reading. The people’s knowledge about what does that mean.

Per: You’re looking at quantitative data and unique …

James: Lots of visits.

Per: Yeah, you need qualitative data to actually go out there and like you were saying, see people using your site, using your services and that’s where you draw your conclusions from.

James: So we’ve got language. We’ve got typography. We’ve got behavioural science. We’ve got – the list is endless. We got clients. We’ve got agencies.

Per: Yeah, and the experts online as well, saying something.

James: Also you maybe work for an agency and that agency itself has sales goals. You’ve got a sales team who sold in a project to a client. The whole complexity of how we built up the industry and what we’re expected to deliver. It makes it impossible to do the perfect website.

Per: So I’m the CEO of Kellogg’s James. I don’t know why I pulled that out and I come to you and I’m asking we want to build a website. How do you decide what resolution to build for?

James: Oh, I like that. If I turn around slightly, can I look at my whiteboard?

Per: Yes.

James: Well, first of all, you’ve got to make sure they’ve got their goals set right.

Per: Yeah.

James: Because you come to me Mr. Kelloggs and so you want that. I want to ask you and check that you know what you want from it. Why are you doing it? What’s the point behind your website? How does it fit into the rest of your business, your business goals? What are you trying to achieve? Or even just that one page you want me to design. What’s that going to achieve?

And after that, we can then start getting into maybe what’s going to be on it, the content. Shall I go through – I actually wrote a six-step answer to how you could go about this.

Per: Go for it.

James: Yeah, first of all were goals as I said Mr. Kelloggs, and then research, research and measure. Really the measure. You know that I push this so much that you’ve got to measure the viewport being used and see what is happening because I’ve done this on several sites now and I know it varies from site to site quite a lot and I know that resolution is irrelevant.

Per: OK, James, but I’m Mr. Kelloggs now and we haven’t measured this at all over the years and we need that …

James: And you’re not going to do it before then.

Per: No.

James: In that sense, I’m going to recommend that you try and put that in place for the future so we can do a better job next time. But then we’re just going to have to basically guess based on resolution and yeah, then we know as well though that from other research, that – well, depending on what resolution was popular, that we can properly guess that – the laptop, the standard laptop size is still the most common, 1378 by 768.

Almost every single laptop screen is still that even though it’s pixels and we said about don’t use pixels anymore. That’s the size it is. Retina Macs and things, that’s different but most normal laptops and in business environments, a lot of people are still using those resolutions.

Per: This is where I want to go out and verify the goals with the actual users and actually like go – well, call some people up that are actually using the service or know something about Kelloggs based on the goals that you got from the CEO. Actually make sure that those match some of the goals that users have because if there’s no match, if there’s no win-win situation to be held here …

James: Yeah.

Per: … then you may have to go back and actually you need to find the goals.

James: So you’ve got to do the research there and even as you can’t do analysis and measure the viewport, then yes, you got to – exactly what you said. Reaffirm that these goals are going to work and the same time, you bring out some empirical research that says oh look, our users are mainly doing this or look, consuming the website or the content in this way.

Per: And then also set how you’re going to measure the goals.

James: Yeah. And then I want you to take – to do the content. Actually produce the content.

Per: Yes.

James: That is going to support the goals.

Per: But I haven’t hired a copywriter yet.

James: Then we have to try and use the existing content, if it’s an existing website and this also may be difficult in that you might – I think some people are going to struggle maybe to do content for a page, all content, including micro content for micro copy for various bits. We got any kind of design whatsoever. If I tell you to write a webpage, and you’ve got no idea of menus, you’ve got no idea of whatever site you are, what they’re all called, if it’s going to be – you’ve got nothing. You’re building from zero.

Per: I think I love trying to do that. I can honestly say I haven’t done it. I think it’s a really good way to do it.

James: Yeah.

Per: And I’m going to try it at some point in the future.

James: It would be interesting because I think it’s going to be a real challenge – with a blank piece of paper doing content first.

Per: Then you’re really focusing on the goal. What do you want the user to understand or achieve or do after doing this?

James: You’re right. It has got to have the goal and even some – yeah, and even SEO comes into it though. That maybe is a way of helping with content first.

Per: Yeah.

James: Making people think about the – the kind of good headlines then how it’s going to be appearing in search engines. What’s the readability level? What’s good? Making sure content is easy to read not just from a number of words on the row but also the language level.

Per: Yeah.

James: Not making it too technical or too high level language, keep your readability age down because we know people find that easier and allow people wonderful reading.

Per: I’m actually reading The Art of Explanation now by – I forget his name but I will post it on the show notes but the guy – do you remember these videos about RSS in plain English?

James: Yeah.

Per: All those, the Common Craft …

James: Yeah, Common Craft.

Per: Yeah. Sold the guy who made those. He also made the video for Dropbox.

James: Yes.

Per: And there’s a lot about explanation, how you have to really dumb down the language and make people – start off at least explaining stuff, getting the context of stuff so that people know where are they. What do you want them to do and why? Understanding why before you understand what and I really like that.

James: You try to solve something. Yeah. Then once you’ve actually worked out your goals and you’ve got all your content produced, then I think you should design for the smallest screen.

Per: Right.

James: Produce something for the smallest screen size. Do the whole mobile first thing.

Per: From my perspective, the smallest screen will always be the iPhone.

James: Yeah. Well, I mean depending on where you were in the world and what markets because there are still groups of – there are countries and groups of people that are using feature phones.

Per: Yeah, future-friendly.

James: You’ve already done your research.

Per: James, it has to be future-friendly. These people are going to buy iPhones.

James: Yeah. They will. But if you’ve done your research and you understand your users then it doesn’t matter because you choose the right device to do that smallest one first.

Per: Yeah.

James: But OK, now you’ve done a design and it’s – we’re probably talking about three-inch and 320 pixels wide now because it’s the smallest group first.

Per: Yeah, bump that up to 1440.

James: I don’t think you should. The step there I reckon, prototype, because if you then prototype that smallest one, you got something to play with and I’d – well, you test it in the smallest device but also you could start then to – seeing how this copes in the other devices or other sizes that your research has shown that are relevant for your products or site.

So rather than kind of saying, “OK, we do 960,” you might not need 960. You actually might find that other sizes are more relevant to look at and then you can start stretching and playing and see what breaks and tweak and adjust to make it work on the larger sizes.

Per: Right.

James: Or smaller ones. It might be that the one you realize afterwards that you want to go a little bit smaller to cope with an edge case.

Per: Yeah, that’s what I’m thinking because I mean designed for the smaller screen. Well, we’re actually saying design for the smallest …

James: Relevant screen.

Per: That most users use.

James: The smallest, relevant screen.

Per: Exactly, the smallest relevant screen because I mean if 60 percent of the users have 1290 whatever and, I don’t know, five percent have less than that. Then that’s probably …

James: I’m not going to start …

Per: You’re not going to start with the mobile.

James: You would struggle to justify to your client starting with the smallest one I think, because if you’re a live site, live product just selling stuff or doing stuff now on the site, then you’ve got to care for that big chunk and so maybe you start with that one first and then move down. So maybe there’s a star next to my “smallest screen first” there…

Per: Now I’m getting really complicated and you’re realizing that you have some power users and the power users are the ones that are buying and they’re going online and have a ready shopping cart and then perhaps a few of them are actually going and pushing the buy button in the mobile resolution. Then you would realize that those are the guys that you want to design for. So it’s all down to which ones are making the money as well. If that’s your goal, if you have money making goals.

James: Which ones are relevant. The smallest relevant screen size first.

Per: So many parameters there that you have to take into account.

James: Told you it was impossible.

Per: Exactly, totally. Well, it’s complicated but there are like – I will make a template for it.

James: Yeah. So you can grow – with the whole mobile first thing and start with the smaller one first and it is easier to grow because you’ve already done the job of focusing your content and making sure you’ve got just the bare minimum you need to fulfil your goals because we know as soon as you start – you said as soon as you start more real estate, there’s an instant desire or you need to fill it and there’s often the battle to get stuff left alone. I mean not fill stuff. You’ve got an AD or some designer that’s filling up the page and then maybe aren’t the ones who has worked with the content. They aren’t the ones who are going to program it and so on. We’ve got these islands of – these silos of competence that are involved in these kinds of projects. You are going to fight to get your white space or to not add extra features just because there’s room for extra features.

Per: Yes.

James: And making sure you make – whatever you do add, you measure to make sure you understand the success of it.

Per: Or the failure of it.

James: Or the failure of it.

Per: Yeah, because sometimes you have to add something because the client is just on you all the time.

James: Yeah.

Per: And you add it and you have to measure them and see how does that take away from what you’re trying to accomplish with the webpage.

James: I got a question the other day about – oh, there was a suggestion of a mobile’s version of a page my client is asked to be produced for his agency. It doesn’t include like five features from the desktop site.

Per: OK.

James: I haven’t answered yet. I haven’t had time. But just that. Well, if the agency decided not to include these five features, is that because they’re really not that relevant?

Per: Yeah, we’ve encountered that before.

James: Or is it that they’re trying to save time and money? There’s no budget to produce all these features in the mobile version but the client wants the mobile version. You end up getting it – you’ve lifted a stone and so now you go, OK, what’s the business needs? What are the business limitations? Is it a budget thing here or is it a lack of research, a lack of understanding or readiness in the organization for certain decisions?

Per: Yeah.

James: Suddenly, a simple web design question becomes a business question…

Per: Yeah, that’s what I’m thinking. We started out with the screen size and we’re now into business goals. You have to dive into every part, every crevice of the organization and actually realize what they are all about. What can they accomplish? How much money do they have? What competencies do they have? How much time and money do they have to actually work with this over time?

After you’ve done the prototype, I mean you’re launching and your point number five on the whiteboard there is you actually grow as dictated by research. OK. So do we have any money left to do research and to actually do the redesign? Maybe not. How sure are we that we’re right when we launch?

James: Probably a good thing to finish off on now is just say that in digital and on web, any – if there’s a quick and easy answer to one of your questions, it probably means you’re doing it wrong or doing it in a quick and dirty way, and you’re not doing it the best way.

Per: Yeah.

James: And in some ways, that’s fine because that’s how it is. If I came to you and say, yes, design for 960, then I’m just giving you a quick and dirty answer and I’m not giving you the full picture because we just explained – just spent 40 minutes explaining a lot about the full picture and it’s very, very complicated.

Per: But are people going to have time to understand the full picture?

James: But then that’s the business decision itself. As long as you’re aware of the fact that these quick, simple answers mean that you’re ignoring a lot of elements and a lot of factors and as long as you understand that by taking these quick, simple decisions, then you probably are doing that. You’re not doing the right thing. Then fair enough. Just keep it in mind for the future that you probably need to allocate some time and money to doing it a bit better later on.

Per: I can’t stop thinking about the quick, simple decision people are making nowadays is responsive web design.

James: You’re right.

Per: And I’ve met so many people who – well, owners of websites that are thinking now, “Oh my god, what did I do?”

James: Yeah. I emplore you, if you’re doing responsive, make sure that you monitor your page load times as part of your web analytics and segment it by mobile and desktop and so on.

Per: Yeah, just make sure you visit your website now and again in your mobile and see what’s going on there.

James: Yeah.

Per: Wow, thank you for listening to all this rant about screen size. But it has been fun actually, I think. You’re going off to Spain.

James: I am. But you’re not back at work yet, are you?

Per: No, no. I’m – well, I’m semi-back first of August. I will be working on and off from the summerhouse I think, and so living the good life of the freelancer.

James: But for our listeners, we’re always open.

Per: Of course we are. Yeah, Twitter, email, yes. I’m in there all the time as always.

James: Yeah. And as usual, if you like the show, then give us some feedback. Get in touch with us or if you’ve got any questions or any points you want to argue about or correct us on, then yeah, get in touch. We would love to hear from you all.

Per: Check back in two weeks. Continue having a great summer everyone and remember to keep moving.

James: And winter for the people in the other side of the world.

Per: Sorry?

James: Winter for the people in Australia.

Per: Oh my god! I always forget that this is a podcast and internet is global.

James: We’re a big round thing.

Per: Yes.

James: It’s not the same everywhere.

Per: But it’s summer.

James: Here.

Per: Yes.

James: Not down there.

Per: Yeah, but it’s summer months.

James: No. It’s winter months down there. Their seasons are the same.

Per: Do they actually say winter?

James: Yeah, absolutely! Because it’s winter. It’s colder.

Per: I didn’t know that. I’ve been to South Africa although it’s not …

James: Oh, South Africa is not that far south really.

Per: Yeah.

James: Not when you look at Australia.

Per: Well, the seasons don’t change as much.

James: They don’t need the geography lesson.

Per: I didn’t realize this.

James: This is not a geography podcast.

Per: No, but this is interesting, because that means when you’re …

James: Can I get a cup of tea?

Per: We will save it. We will save it but I didn’t know that. It was fun and so I hope some other people didn’t know that as well. Now remember to keep moving.

James: And see you on the other side.

Hide the transcript

#51 James & Per & Brad go future friendly

We’re joined in Episode 51 by mobile web strategist and front-end designer Brad Frost. Brad’s blog posts have featured in a number of UX Podcast link shows, and he’s a bit of an ideological soul-mate of James and Per.

We talk about breaking down silos, standing up and doing things “right”, the importance of consistency, the usefulness of frameworks and style guides – and, of course, Future Friendly.

(Listening time: 45 minutes)

References:

Brad Frost

Transcript:

Per: Hello and welcome to UX Podcast episode 51. You’re listening to me Per Axbom.

James: And me James Royal-Lawson.

Per: It is 51, isn’t it?

James: I reckon so. It says 51 on my notes here.

Per: Excellent.

James: I know it’s going to be difficult for you because you’re jetlagged.

Per: I am extremely jetlagged and I’ve had like an excellent vacation. But I had the worst ending to it with the travels back to Sweden and I must say it took us almost 40 hours to get from Detroit to Stockholm.

James: I was following your adventures on Facebook. It didn’t look fun.

Per: Yeah, it was insane. First, the flight was delayed hour after hour after hour and then finally then it was actually cancelled and the whole family had to sleep on the airport floor and spend the whole day at the airport again and then leave again in the afternoon.

James: But I’m so impressed that your luggage arrived.

Per: I am too actually, because we were rebooked on different flights all over all the time but our luggage actually made it at the same time as us to Sweden, so that was really good.

James: Impressive. One thing though Per.

Per: Yeah.

James: You got to be careful. What you need to try and do is not let this be your holiday story.

Per: Very true actually because this actually hooks into what we were talking about last week with these psychology theories that we’re all into these days with the peak-end theory. I was actually thinking about that. So this was the end of the thing and that was the peak of the thing almost. Unusually that’s what basically – mostly remember from it and that’s what you can begin talking about.

James: Yeah, it’s top of mind. It’s the most recent memory. It’s the most recent adventure during your holiday. So someone asks you how your holiday was, you say it was fantastic but you might be going home. Exactly what you did when I asked you how it was.

Per: Yeah, exactly but that’s also the fun part to talk about sort of.

James: Yeah. Hold on. That must be episode 52 or something. This is episode 51 and in this episode we’re going to be talking to Brad Frost.

Per: Yes, we are. Excellent.

James: Yeah.

Per: And we have Brad also on the last show. We talked about one of his articles.

James: Yeah, we talked about his articles.

Per: And then we had some contact with him on Twitter and you thought it was a good idea to interview him. I thought as well and he thought as well.

James: Well, let’s ring him then.

View the full transcript

Per: All right. Let’s go for it.

James: Yeah.

[Music]

Brad: Hello.

Per: Hello Brad.

James: Hello there.

Brad: Hey, how are you?

Per: Hey. We’re fine.

Brad: Can you hear me alright?

Per: I hear you great.

James: I can hear you Brad. Yeah, I can hear you Brad.

Brad: Perfect. I just got a new sort of like recording set up for music and so I’m using that and this is like my first time playing around with it.

James: Oh, that’s really nice of you. Are you going to give us a song as well Brad?

[laughter]

Per: Excellent. I’m actually cooped up in my bedroom because the kids are outside playing Xbox in the living room and that would be too loud.

Brad: Nice.

James: I’m actually in my office which is in the house in the garden. My kids are cooped up in the cellar, playing Skylanders.

Brad: Nice. My kid or should I say my dog is outside and I’m actually – if you want to hold on just like a couple of seconds, I forgot I left him out there. So I got to bring him back in. Hang on one second.

James: Sure.

[Music]

Per: So waiting for Brad to get his dog.

Brad: All right. I’m back.

Per: That’s OK.

Brad: My dog Ziggy, I love him but whenever I’m at my computer, so he will come up and just sort of claw at me and he’s like hey, you shouldn’t be on your computer right now. You need to be paying attention to me. So I’m like oh, maybe you need to go outside.

Per: Oh, wow.

James: Brad, I got a friend who does a podcast and he has Basset Hounds and they really love being in and around when he’s doing his podcast.

Per: Oh, wow.

Brad: Yeah.

James: And drooly.

Brad: Yeah.

Per: So excellent that you wanted to be on the show.

Brad: Yeah.

Per: We don’t know yet what we will be talking about. We had some ideas of talking about future friendliness. But let’s, I mean you’re based in Pittsburgh, Pennsylvania.

Brad: Yeah.

Per: And I had to check sort of. That’s like 250 miles west of New York or four hundred kilometres.

Brad: Yes.

Per: Yeah.

Brad: So it would basically take you around six, six and a half hours or something to drive home, maybe between five and half and six and a half hours to drive west, pretty much straight west.

Per: Right.

Brad: From New York, which I did a lot because actually up until last year, I was living in New York City.

Per: Oh, OK.

Brad: Yeah. So I was there for five years and actually Pittsburgh is home and so I’m sort of moving back home, which I’m really happy with that decision.

Per: So based on the quick research we’ve done about you, we think alike very much. Both James and I follow your blog and I think we’ve – I mean last time wasn’t the first time we talked about one of your posts.

So given that we’re very similar, I was trying to think about a subject for us to talk about and I was looking through the front page of your website and very similar subjects but the one that caught my mind or caught my eye rather was the future friendly as one of your services where you actually say something about offering future friendliness. I‘m going to try and bring it up here actually because I had it before.

“In order to deal with tomorrow’s diversity, we must acknowledge and embrace unpredictability as well as think and behave in a future friendly way.”

Just embracing unpredictability and behaving in a future friendly way, that seems like kind of a hard thing to do and I think that’s something we all come across. How long have you been doing UX work or do you even call yourself a UX designer?

Brad: Yeah, actually I do even though I’m technically a developer. I actually sort of get into these little battles with people about stuff like that just because I get really annoyed whenever people try to silo our disciplines into these very neat, tidy buckets.

James: Yeah.

Brad: So the UX designer is technically historically like an information architect or somebody like that. The agency I worked at, they called them interaction designers but they were basically just making PDFs all day. They were making wireframes in InDesign, like that. That’s not really interaction and then you have visual designer is like oh, you’re just the people that are colouring the lines and oh, developers. You’re just these techy blah. I especially hate the developer role or title because really it’s just we “creative” people will be over here doing all this fancy thinking and stuff and you’re just going to be the little monkey that actually hooks it all up and makes it work and stuff.

So that has been the story of my career has been trying to fight against that sort of developer only as this person that you call into a meeting to just say, “Yes, this is feasible. No, this isn’t feasible. Yes, this is feasible. No, this isn’t feasible,” and like seriously that’s how it works.

James: And I know. I’ve had a very similar time as well. I spent most of my time crossing these bridges and trying to make these silos talk to each other and we actually started the entire podcast just over two years ago and after been at UX Lx and hearing everyone there, just all these UXs complaining about how theirs is the perfect silo and how all the other silos don’t understand them and they just need to listen to – start listening to them.

We thought, my god, with all these silos just sitting there thinking they’re perfect, we’ve got to start crossing them over and really blowing them and …

Brad: Yeah, it’s ridiculous. It’s totally ridiculous but yeah, I consider myself a UX designer even though I’m the person doing like HTML and stuff and CSS. But I’m creating an experience or I’m creating something that a user will experience, right? I’m creating something that someone will interact with and enjoy and whatever and what I’m doing is actually constructing that. So I do think that there is pretty much anyone involved in a project and can call themselves a UX designer.

Per: I like that actually. I mean as long as you’re concerned about what the use of things and what the …

Brad: Well, that’s exactly it. I mean even project managers and stuff and again like I see that a lot or everyone tries so hard to put up these walls and it’s like, “You know what? We should all just be thinking of this.”

Per: You should be thinking about the end product, not what role you’re playing.

Brad: Precisely, precisely.

James: I think there’s also this degree of honesty that we spend – I know a lot of people in different roles spend far too much time not really being honest about what they’re doing and what they’re producing and just getting on with doing it because life is easier if you just produce that code or you do those wireframes or just deliver that document.

Brad: Yeah.

James: And standing up and doing something about it. Now that’s a difficult path to take.

Brad: It is and I like that joke around about how I feel like my career path has basically been a salmon swimming upstream a waterfall process. It’s really difficult to do but basically especially with a lot of sort of like responsive work and just getting people to care about that, it first began with the people earlier in the process in the assembly line.

So the visual designers have to convince them and then go on to convince the information architects and then eventually convince the project managers and stuff and then eventually sitting in front of the clients and stuff.

So it has been a long, hard battle and stuff but yeah, it’s something that we need to do is just convince everyone and help everyone stay on track and I can’t even count the amount of time where I’ve just had stuff thrown over the fence to me, stuff that – like here, you just build this. I’m like this is a terrible idea.

And them I’m like wow, you’re really mean Brad and it’s like no. I mean seriously, how did they get this far? It is because it’s because people want to do their job and nothing more. They don’t want to rock the boat and stuff like that in order to do really good work. I do think that you need to challenge people and you need to really – again like break out of your own discipline in order to work with people that they’re just – it’s not very fun if you’re just sort of sitting in your middle bucket that’s for sure.

James: I quite often, well, half-joke about the fact that every project, every deliverable almost is more of an education project. You have to educate more than deliver.

Brad: Yes.

James: I mean I half-joke about it because it is like that. Every time I stand up and present something or explain something I’m delivering to a client, it’s mostly passing on knowledge rather than implementing a solution because it doesn’t really work unless they’ve really understood why and what you’re doing.

Brad: Absolutely. I mean I would say that that sort of sums up where I’ve been going with my career. It has been moving more into this, “Well, how do I make it really easy to get this point across?” or “How do I make it easy to bundle up all these resources under one roof?” or “How do I demonstrate these patterns in a way that people are going to get them or something?”

It is. It’s all about education because the context of the specific project is going to change but part of where I was at, at the agency I was working for which is R/GA, I was there in New York for a long while, and part of what made my role great was that I wasn’t stuck on one project. I sort of floated between a bunch of them and as a result, I was able to sort of see the common problems, the common sort of road blocks or the common sort of misunderstanding or whatever that people have run into.

What that did was sort of provided me this very bird’s eye perspective of what people are struggling with and as a result, I was able to sort of make resources and make decisions and stuff that extended beyond the scope of just a single project. It wasn’t like I’m just solving the problem that’s right in front of my face. You’re just like, “OK. Well what’s really going on here? What’s the big misconception here?”

So it has been really nice to have that perspective and that has definitely influenced the kind of stuff that I work on.

Per: I think the three of us have had the same type of experience that we have to educate the client all the time and we’re finding new ways to do that and I’m using a lot of sketches and visual presentations nowadays to do exactly the same thing. But it would be nicer if I didn’t have to spend all that time explaining why I’m doing this stuff because often the problem, the basic problem is that the client doesn’t even have an answer to the simple question of why are we doing this.

Brad: Yeah, exactly.

Per: So we have to go back and educate them about their own business, not only about our own work that we do for them, and that’s what’s really surprising to me.

James: Yeah, be business consultants to help them alter their internal organizations first before you can actually produce something.

Brad: No, absolutely. I think that you especially run into that stuff with these – with big brands or something or people that are well, it’s 2013 and so now we have a chunk of money in. So we’re going to redesign our site again and it’s that question of “why” doesn’t get asked often enough.

But yeah, I mean I think there are lots of tools and stuff that we can do to – and just even images. For example, I made an image or a series of three images that I’ve used in a lot of my presentations but I ended up throwing it up on my blog because this for me has saved me so many words and has convinced people and sort of got the point across better than any sort of speech could give. But it’s basically just three images and it says, “This is not the web,” with a picture just like a desktop, old trusty desktop.

Per: Oh, yeah. I’ve seen those pictures.

Brad: Yeah, and it’s like this is the web and it’s like smart phones, dumb phones, ereaders, tablets, like all sorts of stuff and then it’s like this will be the web with like a bunch of question marks and stuff. The whole idea again is that just showing those three images in quick succession is like – it’s like OK, I get it. I get why we’re even in this room talking about why we need to address this or why we’re even talking about responsive design or why we’re talking about what’s next. It’s because things have changed and I get that perceived.

So yeah, just doing like little stuff like that, just like producing a quick series of little images and stuff have gone a long way for me.

James: I think one of the big issues that we’ve got in the entire branch, I mean OK, we’re three guys now talking that have understood. We’re members of the chosen few that understand about performance, responsive design or like “carousels don’t work” or whatever subject one will think about.

But yet, as we’ve just said, lots of places are doing this wrong or their organizations can’t cope with it or they can’t see the forest because of the trees. One of the reasons I think is because it’s so easy to do web stuff and there’s so many businesses out there that their entire product is doing stuff easy without all the care, the attention, the management to detail that we know delivers.

How can we come over that? How can we bridge those two worlds? The quick solution to the company that buys that quick solution and then those of us who know that doesn’t really cut it.

Per: I’ve actually had clients who – well, mostly in the past, mostly in the late 90s, they always had a relative or a niece or a nephew who could do this stuff and my nephew could do this website or whatever. But I’ve actually come across that later on as well when doing campaigns that hire like a student to do some Flash stuff or something like that because it’s much cheaper. As long as you don’t know why you’re doing it, you don’t even care what it costs. You just know they need a Flash presentation.

Brad: Sure, yeah. I think that what you’re talking about is something that’s extremely, extremely important and I see it more and more which is like how do we bridge that world of plug and play, turnkey solutions, the things that all these companies like to sell so much. How do we make tools? How do we make methodologies and stuff like that, that takes a lot of the hard work out of it but still don’t get in the way of you doing really good work properly?

I see a lot of I guess the things that I’m working on now. I’m working on this Pattern Lab thing which is trying to do that, which basically it’s – what it is, is it’s not like a solution. It’s not here’s your website and you could skin it however you want and here’s like all these different components so you could combine them however you want.

The idea is this is more like a framework for like stitching together your own interface. But what I’m really cognizant about in making this tool is not to influence how you want to create your own site.

So all the HTML, all the CSS, all the JavaScript, all the stuff that your website is made of, you still have full control over it. There’s like no dependencies. You could write code as crappy or as great as you want but really all this thing is doing, all my framework is doing, is making it easy for you to sort of stitch together this interface and stitch together, create your own like pattern library and stuff like that. But I see that also with tools like – have you guys seen like Jetstrap?

Per: Well, is that the tool that’s based on Bootstrap but you pull things in? It’s like a site builder but based on Bootstrap, right?

Brad: Right, precisely and so that’s what I like about that is that it’s this very easy, very drag and drop. You double click on the text and you could change the buttons and you could change the size and you could reorder things and stuff but you’re actually manipulating like real HTML ultimately, right?

So it’s very realistic and as far as like getting a quick prototype up and running to show someone here’s what we’re thinking or whatever, like that’s a great idea and what it does is it – so it doesn’t dumb down what’s ultimately being created. You’re not like creating like a drawing of a website. You are actually creating – you’re manipulating an actual website but they have provided this UI for you to sort of quickly and easily drag things on to the screen and reorder them and stuff like that.

So that I think that that’s the kind of thing that I’m getting excited about where it’s like how do we make it easier for people to construct web experiences, to do their wireframes, to do their Java a lot better without having to go through all the tedium of like manual code and every time I want it on another list, I’m going to have to write all that stuff from scratch.

I do like the idea of like giving people like a better starting point but still give people the flexibility and the power to like get under the hood and really do things the way that they want to do them.

Per: I’m really loving Bootstrap these days. I’m using Bootstrap a lot for prototypes and I’m realizing how much – bringing it closer to something that looks like the end product makes it so much easier to communicate both with developers and with the clients, so I’m all for that.

But then there’s always the next step of actually building the site as well and making it optimized and streamlined and whatever and sometimes there are so much belief in that what is the prototype is something that you can just take and just modify a bit and that will be the final product. That’s what I sort of am seeing is the danger in the projects that I’m participating in right now is they don’t see how far we have left because there’s a lot to go and ways to go after that as well.

Brad: Yeah. It’s like wow, it looks like we’re done. Yeah, no, not really. But yeah, and I think that is certainly again something that requires education where it’s – listen, we’re showing you this prototype and stuff like that. Yes, it is working. Yes, we’re showing active states. Yes, we’re able to click from page to page and stuff and that’s so, so much better and more effective than printing out a 90-page PDF of like here’s what your website is going to be with all the annotations that are just so verbose, it’s amazing.

So yeah, like that definitely gets us a lot closer and stuff but then ultimately yes, you have to build the thing for real. But I will take a prototype and an explanation over intentionally dumbing down things on paper just so that whenever we build the thing, we are only building it once, right?

James: And after all this, we’ve got the next phase which is websites need to be run. They have to be taken and lived with after you’ve done a new design, a new skin to it all or bumped it into a new tool.

Brad: Yeah.

James: And that’s often where they start to fall down and fall down rapidly.

Brad: Right.

James: And maybe the frameworks will help us take a little step beyond that as well by standardizing or reusing a lot more. Maybe it will make it slightly easier to maintain sites and keep them running and tweak them instead of rebuilding them.

Brad: Right. Well, so, this is where something where it’s one thing to talk about frameworks as a prototyping tool and stuff and I’m all for that. I do shy away from it for like production builds and stuff just because some of the clients I’ve worked with in the past. Like Nike isn’t going to make like a Bootstrap site for like your site.

You know what I mean? But Dave Rupert had this great post talking about responsive deliverables and he worked on Microsoft.com and he was talking about how we need tiny Bootstraps for every client. So the idea is no longer here are your page templates and I’m going to run away and see you next year or whatever.

The idea is that we now need to deliver these full-on component libraries and commented code and here’s how you use this stuff. Here it is in context and all this and I totally love that idea of yeah, we have to live with these websites and the clients have to live with the websites. The organizations have to live with them and what better way than to actually instead of just throwing them over some final code or whatever, let’s actually deliver them this full-on system that’s nice and extendable.

They could take it, run with it and maintain it and pass it off to different people and everyone will be brought up to speed instead of just this like sort of like black box like OK, here’s your home page. Here’s your contact page. Here’s your check out page like whatever.

We need to get a lot more sophisticated than that. That’s why again the tools that I’m working on now are trying to sort of venture into those waters.

James: I think that’s great and also then we come back into the whole honesty thing again and that organizations themselves need to be honest about whether they can deal with these frameworks and systems and so on that we’re presenting to them. It’s too easy for them to say, “Yeah, yeah, just bring it on. We will do that,” and then they can’t actually cope internally with using it and getting on with it.

Brad: Yeah, yeah.

James: So it would be better for them to say, no, hold on. I think this has stepped too far. So dumb down or go back a step and you’re like OK, well in that case we will do this because we think this is more achievable for you right now and because this is good groundwork that we’re laying. Maybe in a year, we can revisit this a bit and we can take the next step when you’ve matured a bit more organizationally and then we can do the rest.

Brad: Yeah. A post I just posted yesterday was sort of introducing this concept, just to – because a lot of people, again education, they don’t understand that. They don’t just need another design that they need this – to think of things as more like a systematic sort of approach. So I just wrote something called interface inventory and the whole idea is like basically the steps you take to create an interface inventory. So you take whatever your client site is and then just start screenshotting the crap out of it and sort of clumping them into like different buckets and stuff.

So it’s like here’s our button styles and here’s our form styles and here’s our breadcrumbs and here’s our tabs and here’s our accordions and whatever. But basically, you’re deconstructing the interface, the existing interface into like a keynote like presentation or something.

The whole idea is to sort of show a lot of like the inconsistencies that arrive whenever like we just treat things as like pages or whatever or have 17 agencies working on the website or just seven different teams and stuff. It’s staggering like how quickly everything could fall out of whack and I use my bank as an example which is just all over the place. I screenshotted a bunch of their buttons and they have like 100,000 different button styles that are all similar but no two are the same.

James: I think it’s great. It’s a great example of that picture on the blog post.

Brad: Right, right.

James: Makes me laugh but then some people are going to go, “What’s the problem?”

Brad: Right. I think that anybody would – and you would acknowledge that as a problem. But the thing is, is that like you were saying is like from an organizational standpoint. Like this is the kind of stuff that you could put in front of them and say, “Here’s where we’re at.” You could look at this picture of 100 different button styles and realize that yeah, we probably should do something about this. We should probably have some guidelines. We should probably think of things in a more systematic way.

So again, really like something – a tool like this, like a technique like this is more or less just to educate, just to get people on the same page, to convince them that like yeah, we just don’t want to go down yet another redesign path again for no good reason other than you have a little money to spend.

Per: I like that because it sounds like it’s an activity that anyone could get started with quite soon. It doesn’t take a whole lot of time but it’s really enlightening for the whole organization about what’s going on.

But also you would want to create something that perhaps not only the people within the organization could use but that other suppliers could use because that’s a problem I sometimes run into that when I’m hired by a large organization, I don’t get the tools that allow me to access the CSS files and stuff so I can’t create the – I can go visually and look at the stuff and they probably mean like that and I can create something similar but I don’t get the tool set that will help me to actually do it exactly the way they want to or the way they should want to.

Brad: Right.

Per: That’s what you’re really getting to when you’re providing this tool I think.

Brad: Yeah, and I’m working on some other stuff that’s trying to address that too, just because again I’ve worked with a lot of brands. I’ve worked with a lot of different agencies, a lot of different third party vendors, a lot of different – but even just internally, people come and go and they take the knowledge with them. They know where the latest files are and stuff like that. It’s amazing how much of an ordeal it is just to even get like a PSD or just to get a style guide or just to get – it’s like locked up in like final underscore version two, underscore for print, underscore for printer, underscore version two dot PDF and it’s like oh yeah, it’s in page 14 of that. Everybody knows that.

It’s just it’s amazing like how disorganized these organizations could be and so I think that in order to do really sound work, web work and stuff especially, with these organizations that are just so big, you need those guidelines. You need those starter PSDs. You need those component libraries in order for you to know what you’re working with, how things should be done, but also to get an idea of like where you might be able to like bend rules.

I see a lot of this like systematic design and style guides and stuff like that not as like here’s exactly how you do things all the time. But rather as like a good baseline of like here’s where we’re at. We do have some flexibility hopefully to like do some really innovative things and stuff. You shouldn’t only be limited to what we have in our style guide or a pattern library or whatever and just arrange them in a certain way. That’s not terribly fun.

But at the same time like just know the difference between making something intentionally different versus totally unintentionally different. I think it’s a really important point to get across.

James: I think it’s – you can’t start too soon or too small with this. I mean even if you’re a small organization. One thing I’ve done over the years with small clients who maybe just want to work a site with a standard template, I make sure – I encourage and educate them about keeping track of their little style guide even if they don’t have an official style guide or brand guidelines. I mean most of them have some kind of logo or there’s a font they use generally or there’s some type of colours that they’ve chosen.

So I make sure I kind of get them to write up somewhere. That’s a hex code for your colour. This is roughly what we do with the logo and how much space we’re going to use and help them understand that when you open that Twitter account, maybe you’re not doing it now but you’re going to open it up. Then choose this colour as the background colour or get used to picking that colour so you get some consistency because the amount of these small clients, they – you see quite a lot that they will have like 5000 shades of red …

Brad: Oh, definitely.

James: It’s red and they don’t really understand how you – be consistent, so small and large. It’s never wasted time to kind of have a central place where you keep the details to help you be consistent.

Brad: Yeah.

Per: Isn’t this also gentlemen actually a nice segue into future friendliness, that this is actually the baseline for making it future friendly? Have something in place – yeah, you don’t want to really spend time on all this. I mean the amount of time you spend and actually trying to find those documents but the version 2 underscore 3.6. That’s time that could be spent doing so much more things that would be better for the user experience.

But it’s actually having the baseline of something that is a guide. Then regardless of technology in the future, you would go back to the guide, and see how that fits and how you could actually develop that with the future technology that is existent whenever.

Brad: Right, exactly. I think that this is – a lot of the stuff reflects the fact that you can’t control the technology landscape. You just can’t.

Per: Yeah.

Brad: And nobody knows where it’s going to go and then so really the basic question is like, “Well, what can you control?” Well, you can control your own stuff and so this is what we’re doing. We’re trying to make it easier for people to control their own stuff, to have a better idea of what the organization is, what it does, who they’re trying to reach because those things aren’t going to change hopefully. I mean like your audience and stuff might over time but like – but today, it’s iOS apps. Today’s it’s Android apps. Today it’s a standard website and really who knows what sort of stuff we’re going to be making just a couple of years from now.

But having that inventory, having that strong sense of like this is our red and this is our tone of voice, I’m sure you guys have seen like voice and tone by MailChimp.

Per: Yeah.

Brad: Yeah. Just having that sort of stuff today just absolutely prepares you for whatever is in store.

Per: I think that’s really important to stress touching upon there. Like it’s not only style but it’s also like microcopy, the little – how you stay say stuff, how the error messages should be presented.

Brad: But even just – again, like what is our company. What does it stand for? What are our values? What are our things? It’s like it is. It’s amazing how many people don’t have that stuff in place. It’s crazy.

James: But I’ve said to a few clients recently, well, every single webpage needs to have a goal and they go, “What? Every one?” Yeah, because why is it there? But that’s just too difficult. Yeah, no, it’s not easy.

Per: How else can we measure? Well, we measure whatever how many people visit the site. Yeah.

James: Well, I think it’s probably time for us to wrap us, isn’t it Per?

Per: I think so. There is one question I have for Brad and that has to do with his avatar because I was really curious about it. Is there a story behind the space helmet?

Brad: Yeah.

Per: Because I know that Luke Wroblewski has a space helmet. So I guess is there a meme going on here that I don’t know about?

Brad: Yeah. So a few of us got together outside of Nashville around the Breaking Development Conference. This is now almost a two years ago I think but it was basically a bunch of people that all care about the web and sort of where things are going and all these different mobile devices and stuff like that.

So we all got together to discuss these things in this house and the result of that sort of little retreat was the future-friendly manifesto which is online now, which is …

James: All right. All the names. All the undersigns.

Brad: Yeah, yeah. So what ended up happening, the story of the helmet is that at this house, it just happened to be this astronaut helmet there.

James: Just happened to be?!

Brad: Yeah, I know. It’s just it’s pretty – yeah, it’s pretty fortuitous there but yeah, so that sort of became the de facto sort of like icon for the whole thing which was pretty appropriate because we ended up calling it Future Friendly. So yes, so that’s why Luke and Jeremy Keith and a few others had their space helmet avatars.

We actually just created a United Pixelworkers future-friendly helmet t-shirt and all the proceeds are going to Archive.org to helping them back up the internet.

Per: Nice. I had no idea about this.

Brad: Yeah.

James: That’s something we have to buy Per.

Per: Yeah.

Brad: Yeah, but yeah, so that’s the story behind it and I really like it. I like having my professional headshot be a – picture of me in a helmet.

James: I think most of us got a little astronaut somewhere inside us.

Brad: Oh, yeah, absolutely. But that’s what I do. I love that about being future friendly is that it is something that I think a lot of people can just understand whenever I explain it to clients or I can explain it to other people. They’re like oh yeah, that makes sense. Expect that things are going to change and make things as friendly for whatever is coming down the pipes. Like that makes perfect sense. I do. I love that. It’s pretty accessible.

Per: Excellent.

James: Excellent.

Per: Excellent note to end on as well.

Brad: Cool. Yeah. Well, thanks for having me.

Per: Oh, thank you for giving us your time.

Brad: Yeah, it’s no problem.

James: I think we could have you on every week.

Per: Yes. I think so as well.

Brad: Well, feel free to give me a call in a couple of weeks. I will be happy to do it.

Per: Great. What time is it over there?

Brad: It is 11:11 on July 11. Wow, I just looked it up in my computer.

Per: Oh, wow.

Brad: It’s like ultimate wish making stuff right there.

James: A binary end.

Brad: Yeah.

Per: OK. Then have a good lunch and we will let you know when we post the show.

Brad: OK. All right. Sounds like a plan.

Per: Yeah.

James: Thanks very much Brad.

Per: Thank you.

Brad: All right. Hey, thanks a lot guys. Take care.

Per: You too.

James: Take care.

Brad: Bye-bye.

[Music]

Per: Excellent. I think that was great talking to Brad and that was so funny about the story about the helmets because I sort of wanted to start off talking about future friendliness. We talked about so much other stuff and then all of a sudden, the helmets had something to do with future friendliness which was really quite funny.

James: We had a half hour intro to what you wanted to talk about.

Per: Yes. I think so.

James: I think we did quite alright there and not turning into a love-fest because what we realized is that Brad is on the same track as us.

Per: Yeah.

James: He has got a lot of same ideas, understanding and hopes and dreams about what we can do in this wonderful world of web and digital. He sits a little bit more on the developer side than us.

Per: Yeah.

James: Which is an excellent insight.

Per: Exactly.

James: Additional insight.

Per: And a concept of anyone calling themselves a UX designer. I like that actually. That’s what has happened. I mean there are a few of us who call ourselves a UX designer that actually have any sort of formal education.

James: We touched up on the whole title of UX, didn’t we a few episodes ago? That’s one of the things we basically came to conclusion on that. It doesn’t really exist, does it? We’re all doing UX to a degree. We’re just doing other things under the umbrella of UX. When it boils down to it, we all just need to get along.

Per: I think so.

James: To quote Jack Nicholson from …

Per: From what movie?

James: Why can’t we all just get along?

Per: OK. So the next challenge is for us to record the next episode while you’re away on vacation.

James: Yeah, I think I’m going to be out of the country next time.

Per: Yeah.

James: We been assured we’ve got internet so we will – well, hopefully that will work.

Per: It usually does in some way.

James: It’s all sticky-tape and string anyway. We’ll work it out.

Per: Yes. OK. I think I heard your kids shouting in the background.

James: I think they’re still on the property. I can still hear them so they’re not too far away. Well, I’m going to go and salvage them from whatever mischief they’re getting up to while I’m recording this with you.

Per: OK. Excellent. To our listeners, remember to keep moving.

James: And see you on the other side.

Hide the transcript

#50 James & Per begin with words

Separated by a hundred million square kilometres of Atlantic Ocean, James and Per bring you a link show featuring three articles we’ve found during our digital travels.

We start, as the article itself prescribes, by discussing content, words in particular. We then dovetail into Atomic Design and using chemistry as a conceptual metaphor for web design. Finally we look at persuasion profiling and how the psychology of persuasion could be used in our work with websites.

(Listening time: 32 minutes)

References:

Transcript:

Per: Hello and welcome to episode 50 of UX Podcast. You’re listening to me, Per Axbom.

 James: And me, James Royal-Lawson. Fifty episodes!

 Per: Fifty episodes.

 James: Fifty.

 Per: Yes.

 James: Oh, 50 episodes.

View the full transcript

 Per: And to celebrate, I’m in the country of 50 states. In our efforts to actually produce this show during the summer as well and we find ourselves in different locations. So I’m set …

 James: Really different locations.

 Per: Really different locations. I just woke up actually. I’m up north in Michigan in a town called Charlevoix or Charlevoix if you speak French but Charlevoix in American English, in a quaint little hotel and I just sent my family to breakfast. I’ve been vacationing now for a week and a half up here. So I’ve been having fun. It has been really, really hot. It has been like 30 degrees Celsius, in the 80s if you’re speaking Fahrenheit and been having a good time and then James reminded me via Facebook we have to record the show and here we are.

James: I’ve kind of grabbed you now. You must be a week and a half into your holiday. Your brain must be like jelly because your body starts relaxing right now in hot temperatures, taking it easy and not working and things. So it’s going to be a real struggle getting anything useful out of you today.

Per: Do you think?

James: We will see.

Per: There’s no difference from my voice. But you haven’t left from vacation yet, have you?

James: No, I’m really busy today. I’ve got a deadline in two and a bit hours. Yeah. So I’ve been frantically producing a document. I’m actually trying to design a model for measuring usability. We can actually do a whole podcast about that. Oo, now there’s an idea.

Per: Excellent.

James: I mean model for measuring usability in a very limited number of hours based on stuff that already exists.

Per: Yeah, designing the model. Then actually using the model and writing up the report.

James: Frankly, I’m not – this particular model, I’m not using it and writing it up.

Per: Oh, OK.

James: Someone else will have the joy of doing that.

Per: Oh, excellent.

James: But as for me, it’s nearly 3 o’clock in the afternoon. I’ve been at this now for – actually I’ve been at this for like seven hours. Might as well just …

Per: You’re probably actually – I went to bed quite late so you were probably waking up when I went to bed.

James: Probably. So my brain is probably nearly as much jelly-like as yours but for a completely different reason.

Per: Oh, wow.

James: Anyhow, yeah, so today though we’ve got a link show.

Per: Yeah, to make it a bit easier on ourselves.

James: Yeah, not subjecting a third person to this time zone mayhem. The link shows means for those who don’t know is when we take –well, in this case, three articles that we found during our digital travels and talk about them a little bit.

Per: Yeah. And I think the theme of today is sort of going back to basics. I love it.

James: Oh, yeah. I like the way that these three articles interconnect and interplay. It’s quite a nice little threesome. Did I just say that?

Per: Yes, you did just say that. Oh my god.

[Pause]

Per: Anyway, I really love you found this – the first one we’re talking about. It’s called Words and it’s one of the best things I’ve read in a long while I must say. It’s just words basically on a webpage and it’s beautiful. It makes me cry almost.

James: It’s actually excellent. It’s sort of what you engage, just HTML with text on it. Only it has got the title “this is a webpage” and I mean I could – it’s almost like you want to read this one out. It’s one of those kinds of ones. But the gist of it is that this webpage, it’s just words. You’re reading them when you visit it and the most powerful tool on the web is still just words. I think what brings a smile to you. here and make sure you really think about this a lot is the bit where it says – he says, “I remember teaching my daughter to code HTML when she was eight. The first thing she wrote was a story about a squirrel,” which he has actually linked to the story.

She wasn’t writing HTML. She was sharing something with the world. She couldn’t believe that she could just write a story on the home computer and then publish it for the world to see. She didn’t care about HTML. She cared about sharing her stories.

Per: And the next line is actually one of my favourites also, “You are still reading,” and it’s down in the middle of the text.

James: Yeah.

Per: Yeah, it really does make a read and it has no fancy design and has no columns. It has nothing, no graphics.

James: No images.

Per: So yeah, it’s …

James: No distractions. It’s wonderful. It’s taking the essence of what the page is about and it’s sticking to it and it’s keeping you entertained, engaged, and on topic.

Per: Yeah. We’ve talked about those before about one-column layouts because you and me both like one-column layouts and this is like even more proof that yeah, that’s what we’re going for here because we just want everyone to just focus on the words, on the text. My one complaint with something like this and what it’s trying to prove may be that what really made the web like go mainstream is sort of graphics and the ability to help people understand stuff.

James: Do you reckon …

Per: I’m thinking the first graphics web browser Mosaic is what – well, made people – well, it was a real eye-opener I guess.

James: Wasn’t it bandwidth?

Per: No, no. Listen to that. We should play that like modem thing when it takes like 15 seconds.

James: But that’s fun. We have fun with it anyway. Without the bandwidth, we wouldn’t be able to do some of these designy, flashy things.

[Crosstalk]

Per: … it all dovetails into one another, I think.

James: Yeah, you’re right. It does. But thinking back when we first started using the webinar in the 90s, back in ’94 on the first time I opened up a web browser and started searching for stuff, it was text. You searched for things in text and you went link to link. You hopped from link to link to find stuff often and they were text links, hyperlinks and you went to another text-based page. Occasionally you’d have a little crappy picture and so on because back in the 90s, there weren’t so many digital cameras. There wasn’t so many ways of getting content, digital imagery onto the web. It was all crappy icons if anything.

Per: Actually you sort of swore when you saw a picture because it took so long to download. You only saw the top part of the picture and then five minutes later you saw the whole picture.

James: You cursed the people who didn’t save their gifs interlaced.

Per: Yeah, exactly.

James: Oh, how the world was simple.

Per: Oh my god. Now we’re an old man again. OK.

James: Now we’re talking about responsive images and everything. The essence of this though is we don’t have to make things overcomplicated. Content is possibly – we talked about content being king or not. Context is king is what I like to say but the two interrelate.

Per: That’s another thing that actually I don’t like with this article is it has no date.

James: No.

Per: It has it in the text but not like you can find it when was it written. You have to read sort of into the text, didn’t know that it was written on June 20th.

James: Yeah.

Per: And it already has like 15 different translations as well. I love that.

James: I agree with you about the date, but you’re picking a little fault there and I do like the fact that it has inspired people to create their own language translations of the post. I also like the fact that he did a next step call to action as such on the end of the article. You can find it where to follow him, what’s his name, and then it says, “I’m writing a book. I’m building on building and launching things on the web,” and have the link to it there. The guy who wrote it by the way, is Justin Jackson.

Per: Right.

James: I will link to his Twitter page from the show notes. But content, I mean is it – you got to start with words and yeah, you do need to start with words, I think.

Per: I totally agree.

James: Or at least start with thinking about what you’re going to say and what you’re going to achieve.

Per: This is all back to the lorem ipsum or “lorem shitsum” as I call it, the fact that we always hire these agencies and they have placeholders for content which is often lorem ipsum content and we don’t really think about what we’re going to put into the content before we actually then – well, it’s too far gone. The graphics doesn’t fit with the content and so on.

James: It’s belittling your content.

Per: Yeah.

James: It’s from this first moment. It’s making the content less important than the template, the design and so on.

Per: Right, so the main point is actually making this that – start with the content. Make sure that you know what you’re going to say and then if you can find some way to support that probably with anything else, then do that. But if you can’t find anything to support it, then just stay with the content and text on a page because that’s what people want and that’s what people came for.

James: Yeah. And how many times have both me and you been involved in projects where you’ve had to – well, ruin a headline on a page or boxes on them because there’s not enough space for it in the design or you’ve had to take away paragraphs from text because it doesn’t fit.

Per: Oh, and the menus …

James: You’ve had to merge menu items or create submenus because there’s only space for, I don’t know, five menu items across the top.

Per: Yeah, exactly. We don’t care what people have to say. We care if it fits into this space over here.

James: Yeah, we prioritize designing something and we pay for the design. Then we’ve got to cram all our stuff into it. It is a topsy-turvy way of going about stuff really.

Per: Let’s move on.

James: Let’s move on.

[Pause]

Per: To Brad Frost.

James: That we like.

Per: Yes, we do.

James: Well, that I like. Sorry, I’m just saying things for both of us like we’re tweedledum and tweedledee.…

[Crosstalk]

Per: Name of his post, Atomic Design, and you found this one as well James. I hadn’t actually seen it because I’m on vacation and …

James: You’re still reading stuff.

Per: Yeah, I am actually. He starts off with a quote there, “We’re not designing pages. We’re designing systems of components.” The article sort of goes into setting up different parts of a webpage, sort of like a periodic table of the elements with small components being the atoms and larger components being molecules and organisms and so on. I kind of like this the first time I read it. I kind of liked it.

James: Yeah.

Per: Having just read the Words article, I was wondering where are the words because I couldn’t find them. I don’t know where they were.

James: Exactly. I love this too, just the periodic table and the analogy with – yeah, like you said, chemistry and physics and the atoms, molecules, organisms, templates, pages being the building blocks of what we’re doing there. It looks wonderful and gives you one of those satisfying feelings when you read this and look at this.

Yeah. No this makes sense. You take the smallest component possible of the web, of HTML, and group these together in various different stages and ways to build a solution or a system or a site.

Per: Yeah.

James: So it’s a nice model and a nice way of working.

Per: It’s a way of thinking about – making sure to think about the small details and the small components as well as the big picture because sometimes we forget about the small components, I think.

James: Yes, and creating consistency.

Per: Yeah.

James: I had a flashback in reading it to gosh it’s another old man comment.. Some of the digital style guides that I was part of producing maybe 10 years or more ago.

Per: Yeah, exactly.

James: I mean I used to love producing those. At least back then we were building style guides built on the back of brand manuals. I chose a few that were – were down to this kind of atomic level you could say of – the molecular level where there was – we create examples of oh this is how – a right hand menu object should …

[Crosstalk]

Per: I’ve done exactly the same and I think we called it design patterns. Well, based Yahoo who the made their design pattern library available a long time ago. So the design patterns became one of these buzzwords as well and that’s how I sold it into some companies that I put together and exactly as you were saying, I had an example. This is what a search box should look like. This is what a Submit button should look like. So those were the tiny components of the page and then it had this is what a table should look like which was a bit bigger and then perhaps this is what we use the right hand column for which was even bigger than part of the template.

James: We know that – well, consistency is an essential part of good usability or the user experience and this kind of atomic thinking helps maintain consistency, I think.

Per: Yeah, I agree.

James: But at the same time, exactly on the back of the Words article, this is – it’s not obvious from Brad’s article about the importance of words or micro content.

Per: Yeah, exactly.

James: I mean when you read it, I mean it’s clear that the words are reasonably important when you start getting into producing, what, molecules, as he calls them. The molecule here, an example would be – he announced that he has got a search group so you’ve got your field, your button and the heading above that collection and to be together, those three – three atoms I guess produce a molecule. See I’m hoofing – I’m kind of just winging this.

Per: Yeah. I know you are but I’m sort of interpreting it in the same way. I was thinking that’s almost too big of a molecule but whatever. The word in the button is search. That would be the atom and the whole button would be the molecule. You can interpret it however you want as long as you adhere to the principles of actually having smaller components build on bigger ones and staying consistent.

James: What you’re saying there is – well, in the atomic level, those three components, the label, the input and the button also have a textual atomic component.

Per: Yeah.

James: It’s like antimatter.

Per: We’re getting into physics now. I have no idea what I’m talking about.

James: I hope no one who understands physics it listening…

Per: Yeah.

James: We would get shot to death. But if you look at the end, there was also another – it gets really satisfying when you get into the templates and pages and we’re getting closer – worryingly close to lorem ipsum stuff towards the end of the article. But there’s a pattern lab and some of the comments, a good example of these patterns labs where they built collections of code snippets, ready-made code snippets that are built up into these – well, atomic groupings and we’re calling them pages and templates and so on which means you’re a step closer to putting in real content before you’ve gone too far.

So I think it is an excellent way of going forward so that you can at the same time bring in content that is real and real situations, real scenarios and actually produce something that’s going to work.

Per: Yeah. I like how he ends it as well with some further reading and how he actually realizes that this is something that he thought about a lot. Then he starts to search. After he wrote the article, he started to search and realized, “Well, other people have been thinking like this as well.” That’s like finding confirmation on that thinking in the right way and you’re on the right path and I sort of like that way of working actually and sharing the stuff that you found that really fits into the same type of thinking, the same line of thinking. Yeah.

James: Yeah. It was one of the further readings there. It was Responsive Deliverables by Dave Rupert. He talks about the idea of constructing tiny bootstraps for every client. I like that quote as well.

Per: Yeah.

James: But for those who don’t know what bootstraps are, bootstraps are these – kind of like development platforms, ready-made tweakable platforms for HTML that you can quickly create sites or prototypes and so on.

Per: Yeah, I’m a big fan of particularly the one that actually is called Bootstrap.

James: Yeah.

Per: I’ve been using it a lot over the past year.

James: And they’re good. So …

Per: Again, moving on I think actually. I need to go to breakfast.

James: It’s the hunger taking over.

Per: Yeah.

[Pause]

Per: The last one is something I wanted to include because I think it’s one of these buzzwords that are going to make the rounds over the next few months and perhaps it will make it into mainstream, perhaps not. But I already found there’s a conference that has been going on for six years around this. So maybe it’s not that new but again like – sort of like the – when we started talking about customer journey paths and stuff like that. All of that suddenly became the new thing in UX but it has been in use for well, 15 years at least, if you talk service design.

So this is something that’s really interesting and well, in UX, in the UX arena we really like to grab stuff from other areas as well and this is – persuasion profiling is really about psychology and …

James: That’s the first time you mention that, you need to explain a little bit Per about what we’re talking about.

Per: We’re talking about the article that this guy Michael Straker who wrote the blog post, he attended a virtual seminar or a webinar and it’s about persuasion profiling. It’s the subject of the seminar and persuasion or rather the psychology of persuasion which we’re really talking about can be subdivided into like popularized themes like authority. We tend to listen to authority figures and what they say.

So that’s one persuasion technique. It would show someone, an authority figure, telling you to do something and perhaps you would make people do that and we tend to do stuff that other people like us do and we commit to something. If we are given something, then we find a need to reciprocate and do something back and that’s one way to persuade people to do something as well. So there are various different techniques.

James: Social proof is one of the ones we’ve heard an awful lot of talk about in recent years where you follow – we show that other people have done something and then people just follow suit.

Per: Yeah. When you talk about persuasive technology, it’s really about designing to influence people’s attitudes and support positive behaviour change and you could argue a lot about the positive behaviour change because sometimes you just want to convert and that’s what this article is really about.

It’s conversion optimization, i.e. getting people to buy or do whatever you want them to do online and could persuasion profile help in that and persuasion profiling, building on these building blocks of persuasion and within the psychology, is finding out what your particular user groups or target groups or users or personas. This could even be – serve as a really good complement to personas, finding out which one of these persuasion techniques is the one that works the best for your particular target group and work with that.

The article really made me think about this is one way of finding out what you would A-B test perhaps. Different messages and content based on these different persuasion techniques and test different ones and make sure you’re using the one that works best over the whole site because you’re finding out what really works for your particular target group or your users.

James: Yeah. I think the article actually goes on to talk – well, it talks about each visitor more than …

Per: Yeah, and I’m not sure I really like that.

James: That was one of my worries on reading it, was that I know that it’s the optimist’s dream or the marketer’s dream that you have data on every individual visitor and you know what they’ve done and what they’re going to do and you can work on it. Yeah. But unfortunately, that causes lots of problems when it comes to integrity and privacy and so on in many countries and all kinds of laws that stop you from doing some of these kinds of suggestions.

One suggestion here was to build a persuasion profile for each visitor. We must follow the person around for a while …

Per: I didn’t really get what he means with that.

James: Well, it means tracking the individual on the website.

Per: Yeah. So you put cookies on the site and make sure if that person comes back, then you would use the same persuasion messages again.

James: Yeah, exactly. So you want to be careful though that you’re not tracking them in a personally identifiable way.

Per: Right. And we know this doesn’t work because we have so many different devices that we have logged on with and so on.

James: But because it does work when you’re an Amazon or Facebook or something. Then people are, or with an app. You’re logged in from …

Per: Oh, yeah.

[Crosstalk]

James: In a logged-in environment, then profiling becomes a lot easier because you’ve got a database of stuff and you’ve already accepted terms and conditions that allow them to do this kind of profiling and going back to the last episode when we talked about terms and conditions and privacy. This is exactly the kind of thing that’s in there in these terms and conditions. So they want to be able to use your behaviour and data to analyze, to tweak and to sell you things.

Per: Yeah.

James: But for a website that has not got a log-in product or log-in side, then it gets more difficult and then down to an individual and you may be shouldn‘t but you can fall back to personas and try and group people and classify them and maybe you make use of variables and tagging in your analytics system to keep track of these and see what’s happening.

Per: Yeah. One of the reasons I actually wanted to include this article is because there has been a lot of discussions about the usefulness of personas in the UX community over the last year or so and people are adding this stuff. People have dogs and they have this type of job and it’s – well, you’re sort of trying to create empathy for a user and making – helping people who are developing the site whether they are UX designers or developers, whatever. Understand the needs and behaviours of that particular individual and then people are constantly asking, “Well, why did you include that specific bit of information?” I don’t know how to use that to actually make a design decision.

But the more we can include about it that actually helps us make design decisions, the better, and I think persuasion profiling is attaching to that something that we can actually show people, show even executives down to developers and show that we’re doing this because we’ve realized that people are persuaded in this particular way as long as we can get the right data out there.

James: You can’t go for too many persuasion techniques…

Per: Oh, yeah, exactly.

[Crosstalk]

Per: Yeah.

James: the same time – that ties in what we know about and talk about, that you can’t have too many goals on a webpage.

Per: And you can’t design for everyone.

James: On a product. You can’t expect everyone is going to do every single goal on your page all the time and this is an extension of that. So a question there is, “Do you have a single goal for a webpage or do you have a single persuasion technique for a webpage but potentially multiple goals?” for example. So it’s an interesting aspect and maybe you could even create personas based on persuasion techniques.

Per: Yeah, that’s what I’m thinking, that you can actually use a persona, have a persuasion technique for that particular persona and make sure that – then you would understand that this is the reason they’re taking this design decision. We’re using that authority figure or we’re not using the authority figure because that person doesn’t respond to it.

James: Sometimes the – a secondary aspect would be the target group as such. You could build the base the personas first and foremost on persuasion technique, like social proof and then split that up into target groups within it.

Per: Yeah.

James: Oh god, sounds expensive Per.

Per: Well, you make assumptions. I think it’s always you have to make some assumptions and then you keep testing. You never like lock down the document, even a persona. I don’t think you should lock it down.

James: No.

Per: You need to be always discussing it, have it on the wall, and have all of the persuasion techniques on the wall. I mean this is good stuff for people to know about and talk about and have a meeting and think about. Well, if we talk about it this way, is that a good way of persuading people? Maybe not. We have all these other techniques that are available as well. If you have that on the wall as well, I love this – because it’s like the pop culture of persuasion profiling.

[Pause]

James: I think one way I would like to tie up all three of these articles is just reflect on the challenge of running a web presence and especially one that’s of a reasonable size because if you think of these three things we just discussed, words, the content, design or development of design, using the actual purchase and the way they’re going to fit into and then profiling, the underlying work to work out what the way users want and the way we want and how do we get them from there to here. You scale all of these three to a large site with thousands of pages and tens of thousands of visitors.

Per: Yeah.

James: That’s difficult, keeping track of all this and pulling it all together.

Per: It is, yeah. It’s a big job.

James: These are three highly interconnected – you used the expression “dovetailed” areas and if you don’t weave them in correctly, then it’s not going to work. It’s going to be suboptimal. There would be a compromise or a cost.

Per: And I’m going to have to say that whichever way you start, you have to start with the words anyway or the main message you want to get across.

James: You got to have a goal.

Per: Yeah. That’s always nice to end with. You have to have a goal.

James: It is and with that, you’ve got a very specific goal and that’s to eat breakfast.

Per: Yes. Yes, I do. I haven’t found the menu online so I’m going to go down and check.

James: Is that what you’ve been doing? While we’ve been talking, you’ve been searching for the menu. Focus, Per. Focus.

Per: I’m coming home in like another week and a half and it’s time to record again. Where will you be at?

James: Oh look, there’s have a quick look, it’s Thursday the 27th of June for anyone that’s still listening and still interested. Yeah. That means we’d be recording around about the 11th, 10th, 11th of July, episode 51. I’m here in Stockholm.

Per: Oh, wow.

James: And you’re over there. I think I will be here in Stockholm. Yeah, I might actually be at my summerhouse. We will see.

Per: We will see. That will be interesting.

James: It’s the one after that I think I’m in Spain.

Per: Yeah.

James: The police, they usually come out with reminders this time of year. Don’t tell everyone when and where you’re going to be on holiday. I just realized we’re sat here doing a podcast discussing to everyone.

Per: I stopped listening to the police actually.

James: I thought you were going to say you stopped listening to me …

Per: I haven’t heard yet of any example. Maybe our listeners have where somebody has posted that away on Facebook and then apparently burglars go into your house because they read your Facebook account, I don’t know, or Foursquare even.

James: On Twitter or Instagram.

Per: There are so many to choose from anyway. Everybody posts where they are.

James: Yeah. Anyway, on that note …

Per: I no longer have anything valuable anyway. OK.

James: It went last time …

Per: Should anyone be listening. Yeah, exactly. I already have that, my house burgled. OK. I guess we’re finishing off and I’m going to breakfast and you keep working on your deadline James. Ha Ha.

James: I will. Thank you.

Per: People, remember to keep moving.

James: And see you on the other side.

Hide the transcript