atomic design

#198 Connected content with Carrie Hane

This podcast is episode 6 of 7 recorded at UXLx 2018

Given the benefits of producing content first, why do we still usually leave it to last? Carrie Hane ,co-author of Designing Connected Content, joins us to talk about how we can work smarter and better with producing – designing – content.

Read More

#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