It’s time to throw away lorem ipsum

Use proto-content and highlight unfinished content.

Whilst a lot of web designers advocate a content-first approach (myself included), it is not always possible to get content from clients to fit with the project schedule. If the client is providing their own copy rather than hiring a copywriter, then delays in the process can be common. So what can the web design team do to keep the project on schedule and ensure that the design of the site will work with the final content?

I recently heard Robert Mills, Content Strategist at GatherContent, recommend using proto-content in the wireframing/prototyping stage of a project. The simplest form of proto-content would be content from the existing website, especially if you’re working on a redesign. But what happens when new content areas are identified? Until recently, I would prototype a website using existing content and then use lorem ipsum for new sections. Admittedly, this has caused confusion with users at the prototype testing stage where they have been puzzled as to why “the page is in Italian”.

Obviously lorem wasn’t helping this person understand the message of the webpage and also distracted them from the feedback that we were looking for on the functionality of the design. (One could also argue that the prototype was not fully functional because it didn’t have relevant content, and I feel bad about that now.) Having better understood the case for proto-content, I will no longer be using lorem ipsum.

So what should the designer do to replace the customary lorem ipsum? This is where Robert suggests the designer should be writing their own proto-content. Having identified gaps in content within a redesign, the designer could write a basic version of the new section copy. It doesn’t need to be perfect as it will be replaced by finalised copy at a later date but it means that we can user test the prototype with content that actually makes sense to the user.

Another advantage of working with proto-content is that the visual design takes realistic content into account. There is a GatherContent post about this by Liam King, Designing content-first for a better UX where he demonstrates that when the designer designs with lorem, they make everything fit as they want it to. Once the design is developed and the content added, things move and don’t line up, text no longer fits neatly into allocated spaces, and content is then either cut to fit the design, or the design needs to be edited to work with the content. If the designer has only been brought into the first part of the process, they don’t necessarily have the control to make changes to the design at this stage so visual changes are made by others whose skills lie in different areas. This is not a great way of working, so proto-content solves this problem.

After we’ve told lorem to sling its hook (by replacing it with proto-content) user testing, wireframing and visual stages won’t be delayed by missing content. But how do we identify whether the content included in a prototype is final text or placeholder (i.e. proto) content? We should have a content plan document where this can tracked, but I think there is a case for making it obvious in a visual way on the development site too. Not only to ensure that the website doesn’t go live with placeholder text but also to highlight content areas that are incomplete. Before I designed for web, I worked in print and we had a little trick we did to highlight placeholder text so it wouldn’t accidentally get printed: make it magenta. If there was any magenta text, the copy was not final and the design wouldn’t get printed.

This is an easy idea to translate to website design. Where there is placeholder copy, I use a css style, applied by a WordPress shortcode, to highlight it as such. To further develop this, I’ve also applied the same theory to highlight images as placeholders. There are many ways this could be done but perhaps the simplest is to reduce the opacity of the image and add a border to highlight that it is not finalised. Highlighting proto-content and images gives a quick visual representation of which content areas on the website are finalised and which are outstanding.

Highlighting proto-content on the development website

To make sure that all of the content gets replaced before the site goes live, I’ve also added a warning that the page contains placeholder content at the top of the screen so it is obvious to anyone viewing the development site that there is outstanding content, as this could easily be missed if it is below the fold.

A warning at the top of the page indicates that there is proto-content on the page

I’m now a convert to proto-content and will no longer be using lorem ipsum but I think that styling the placeholders in the developing website is also important to give clients (and the web team) an instant glimpse on what is final and what they need to focus on.

A better way to vote?

Could design come to the aid of democracy?

As a member of the design and tech community, last Friday was a dark day indeed. As someone whose career has always been within the creative industries, I worry that the tear away from Europe will have devastating effects on arts and culture. The UK seems to have little regard for the creative industries despite the fact that last year they contributed £71.7bn in gross value added (GVA) to the UK economy, and export over £10bn to Europe (I guess that won’t be happening any more).

In the first few days after Brexit, we’ve seen promises backtracked on immigration and NHS pledges, the demise of the UK economy with figures worse than 2008, blatant and completely unacceptable racism and the rise of #Bregret.

Now, all of these things are upsetting, but it’s ‘Bregret’ that depresses/angers me the most. Some people believed the lies of the Brexit campaign saying they felt “conned” and “robbed of their votes”. One guy “didn’t think (his) vote was going to matter too much because (he) thought we were just going to remain.” And then I found a comment from ‘JE’ on the Daily Mail (urgh) comments saying “People dont (sic) HAVE to know why they voted: they still have a right to vote.” Really!?!

Whichever side they’re supporting, people must know WHY they are voting. Democracy isn’t about making a 50/50 choice without understanding the facts. If you don’t know why you are voting, why should your vote carry the weight as those who are well informed and have reasons behind their vote?

There’s nothing I can do to change the results of this referendum, but as I designer, I can share my idea of a better voting system. It’s 2016, I think we’re ready for electronic voting (which would avoid the whole pencil conspiracy). There seems to be a very real sense that some people didn’t actually know what they were voting for. I think it’s acceptable to ask people to demonstrate they understand what their vote is for. After all you can’t take a driving test without knowing the theory so why can you make a decision that has thrown Europe into turmoil without having some comprehension of what the issue is? Here’s my idea:

If the answer given is anything other than the description of the vote (which is on the polling cards!) then their vote would carry less weight than if they answer correctly. (Disclaimer: I’m not a political scientist so would suggest the above as a starting point on which to test and iterate.) Now obviously there is no way of knowing whether this would have impacted the final count but it might mean that JE from London who doesn’t know why he’s voting wouldn’t be representing the population of voters who did their research and made informed, sometimes difficult, decisions on the future of our country in Europe.

Here’s a little video of my suggested voting interface:

The benefits and barriers of eHealth

The benefits and barriers of eHealth

I’ve just finished weeks one and two of my first MOOC (Massive Online Open Course) on eHealth. I’ve designed websites for healthcare organisations including POSNOC, a website for a international breast cancer clinical trial, as well as Derby Hospitals Charity and Derby Private Health. In the days before I was a web designer, I also worked on print projects for NHS trusts and Bupa.

Despite having some experience of designing for health, I wanted to learn more. After all, the traditional method of design is for the designer to be briefed by the person commissioning the project. Without additional knowledge, the designer is often guided by a single person or a team of experts but they don’t necessarily have access to other expertise. User testing brings us closer to designing effective websites for both the organisation and user but what about industries or sectors where professional opinions differ? How do we know that the commissioners of our project have the right objectives to brief us with in the first place?

This is why I am learning about designing for health, not based on the opinions of a client, but those of people across the healthcare sector, and across the world. To be honest, I’ve felt a little out of place in parts of the course so far. When asked how I might design something to aid depression, I don’t have the expertise or training to know, but in this case I have been able to observe how hundreds of other healthcare professionals would solve the problem. Just reading though the comments and discussions has been really interesting.

Even though there are hundreds of comments and opinions, there is an emerging theme to the answers. People on the course are psychiatrists, pharmacists, biomedical engineers, nurses and many more types of healthcare professionals, and while there is a general consensus to the solution, there are all these little insights that come from individual experience. In addition to the healthcare professionals, there are software developers, IT professionals and UX designers making sure that concerns such as security, usability, accessibility and user experience are also addressed. If I were to get nothing else out of this course, just immersing myself into a topic that so many people are passionate about being involved in and improving has been refreshing.

As a way of learning, I am very taken with this MOOC. It’s much more immersive than reading articles or watching documentaries (although I enjoy both of these too). The course is structured for people to post their comments and engage with each other so I’ve been exposed to a lot of opinions and it’s been very eye-opening. The course I am taking is eHealth: Combining Psychology, Technology and Health at Future Learn.

So what is eHealth?

Generally speaking, the term eHealth refers to delivery of health services and information through technology. This could be a website, app, or even discussions between patients and doctors over Skype or IM. The course breaks eHealth into three domains: self-care and prevention; supportive Care; and societal health. Self care is patient-led, for example a person using an app to quit smoking or a person using a website to find health-related information.

Supportive care is where healthcare professionals are more involved, ideally working with patients. An example of supportive care might be an app for a diabetic patient to share data with their nurse so in their appointments, the nurse has the information beforehand and the appointment can focus on discussing the patient’s concerns or questions rather than gathering data.

Societal care is more about the big picture. For example, educating people about the spread of disease and infection across the world though educational or gaming applications.

What are the benefits of eHealth?

The course outlines several benefits including: access to care; equity; patient-centredness; effectiveness; plus more. Immediate benefits of access to care is that patients could get the medical advice they need without making trips to hospital or their GP. For people who struggle to make appointments within normal hours, part of their consultation could take place online. In a similar vein, equity means that patients who live in remote areas could seek consultation online rather than driving to a medical centre over an hour away, or people suffering from certain conditions could discuss their health with other suffers who understand without having to get to a physical support group.

Patient-centredness allows people to take responsibility for their own health. By helping patients learn about their health, and by giving them access to their health records, patients can make more informed decisions. Effectiveness can be improved with eHealth, for example in appointments where nurses have to input patient data, the data could already be being tracked through wearables and inputted automatically. This takes repetitive tasks away and means that appointments can focus on care.

What are the barriers?

To list just a few, barriers include: lack of stakeholder support; cultural, organisational and psychological factors; legal issues; and non-adherence. For eHealth applications to be effective, all stakeholders need to be invested. For example, if an app is designed for a nurse but they are not given training on how to use it and it is thrust upon them, they might not think it relevant and it might not fit into their work routine. Concerns might arise that are of a cultural factor, what if the use of technology means that human contact is taken away from vulnerable and elderly people. E.g. Paro the Robo-Seal. Then of course there are legal issues. What happens if a wrong diagnosis is made through an app? Who is responsible when a wrong decision is made? And then we have non-adherence. Will people engage with the technology? Will they use it obsessively for a few days and then forget about it. Will they use only a small percentage of the application and not use it to it’s full potential. Will they find motivation in using it and keep coming back to it. Will they understand it? Is it too complicated to learn?

In week one, we were asked whether we thought the benefits of eHealth outweighed the barriers. Looking through over 300 comments, the general consensus was that the benefits do, or at least will, outweigh the barriers even if we’re not quite there yet. Several comments suggested that the barriers need resolving before eHealth can become the status quo and that it needs to go hand-in-hand with traditional healthcare and not be seen as a replacement.

I agree that perhaps more time is needed before eHealth becomes fully accepted in society. Web design has been going for over 20 years and is still a relatively young industry and one that many people commissioning it don’t understand. So I think it’s going to take quite some time for eHealth to really establish itself. The education of it will need to be spread equally amongst the creators, designers, implementers and the users.

Wit on the web

I recently found out that there is an updated second edition of A Smile in the Mind, my art school bible. I had been thinking just the other day about the book, how it influenced several generations of young graphic designers, and how a 20 year old book could relate to today’s digital design and online experiences.

I didn’t attend the type of course that had set reading lists (we were much more informal than that) but I seem to remember that every student on BA Graphic Design in 2002 had a copy. We were taught that for effective graphic communication, wit and humour was key.

On pulling the book off the shelf to inspect it earlier today, mine is well-worn. There’s a rip on the dust jacket where it fell off and tore on the cheap, industrial shelving from my first year room, which really, really annoyed me at the time. There are also some 13 year old page markers from when I had to do a presentation with slides. (Actual glass slides, with a projector and everything! Although I think this was outdated for the early 2000s.) I’d highlighted classic designs including work by Bob Gill and Milton Glaser’s iconic I heart New York campaign.

The synopsis of the book says: “The best graphic design does more than capture attention and make the audience linger. It prolongs the encounter, compelling the reader not only to notice, but to remember. This book is about making graphics memorable by using witty thinking.” Sounds fun doesn’t it?

Creative Bloq recently ran a print design feature of 100 brilliant print ads and these are perfect examples of the type of witty thinking outlined in A Smile in the Mind. In the introduction, there is a long list of the benefits of using wit in design, including: inviting participation; getting people to engage with the design for longer; amusing people; building a brand; and being memorable. This is what I was taught as a graphic design student, and this is still relevant to today’s advertising and print designers. But how can we use it to better effect our online interactions?

In comparison to clever, award-winning ad campaigns, I sometimes feel that online interactions are a little dry in comparison. Why is that? Perhaps it’s because we know that users are trying to accomplish tasks on a website, whether it’s a purchase, signing up to a service or posting something on social media. We want to help our users achieve their goal as efficiently as possible so adding a bit of humour along the way can not only seem frivolous, but actively distracting to our users accomplishing their given task.

But is this really the case? Where do we find engaging and humorous online interactions? Out of all the services I use, MailChimp is one of the few that has embraced the Smile in the Mind way of thinking. MailChimp successfully use fun in their interface, without distracting from the task in hand. Alas, one of my favourite interactions disappeared when they brought in responsive previews. Before this, Freddie Chimpenheimer’s arm hovered over the preview window and if you pulled it really wide, his arm popped out of his socket.

Ouch! Image from http://littlebigdetails.com/post/4983862770/mailchimp-as-you-stretch-the-browser-window-the

Another little interaction that I love are the animations you see when sending an email. I regularly send emails to lists with hundreds of subscribers but that doesn’t stop me freaking out when I have to hit send. Even though the email has been checked multiple times, I worry I may have written something stupid, spelled the company name wrong or generally done something that hundreds of people will see and think I’m a idiot. When you are ready to send your campaign, you get an animation of Freddie’s hand hovering above a red button, after a couple of seconds, it starts sweating and shakes a bit.

Designed by Brent Clouse: https://dribbble.com/shots/1552347-MailChimp-Button

This is a great example of emotional design, MailChimp are empathising with you, they know that sending emails can be a bit scary but make you feel better about it. After you press the big red button and send your email (how much better it this than just a basic web button) you get another animation of Freddie high-fiving you. Awesome.

https://dribbble.com/shots/1548634-MailChimp-High-Five

This fun approach to sending email will ultimately divide opinion, but with over 600 million emails being sent a day, they’re striking the right chord with enough people. A quote from Fast Company says “MailChimp has added a splash of mischief to a product category not known for…well, much of anything.”

I’m not sure if Aarron Walter, former General Manager of New Products at MailChimp ever read a Smile in the Mind, but he certainly subscribes to the ethos. In his book, Designing for Emotion, he asks:

What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed! That would be an experience you’d recommend to a friend; that would be an idea worth spreading.”

Looking at digital design today, there are lots of different principles. We’ve got emotional design, design thinking, Human Centred Design, UX design and more. What they come down to though is great communication, designed for real people, with an outcome of greater engagement and enjoyment. Let’s put a smile in the mind of our customers and users in their online experiences and see if our work could make the third edition.

Update: This blog post was expanded into a talk at DxN (Design Exchange Nottingham). Slides of the talk can be found at Speaker Deck.

Toast (or how to please your customers by making them do more)

A few years ago, on a sunny Winter’s morning, I walked into the breakfast room of a B&B. At first it seemed like any other British countryside establishment, but then I noticed the toasters. Toasters, you ask? Toasters. Every table in the little dining room had its own toaster with a loaf of bread sat next to it. There was a slightly worrying extension lead configuration to host the eight or ten toasters. But after the initial confusion (and a passing thought to health and safety fire hazards) Pete and I started toasting.

Now you might be thinking that this was pretty lousy hospitality. If you’re on holiday and paying for breakfast, shouldn’t someone bring you toast and look after you? Why should you do it yourself? Although on casting furtive glances around the room and seeing other couples happily making their own toast, we shrugged our shoulders and joined in.

There are a few reasons why this highly unusually DIY toast situation was awesome. Firstly, you could butter the toast as soon as it was done and eat it while it was still hot — none of the trying to spread cold butter on cooling toast that’s been sat in the kitchen for minutes before you get it. Secondly, it was bespoke. If you liked your bread lightly toasted and just golden, you could have it. If you prefer a darker bronze, then you could do that too. You could also control the supply, if you were hungry, you could have as many slices as you wanted, without having to ask for more. If you didn’t want much, then there wasn’t wasted food. It seemed the perfect set-up.

I’m not sure if the reasons behind the toasters were to give customers exactly what they wanted, or if it was to free up time in the kitchen by not serving toast every few minutes. The proprietor seemed pretty savvy, so I’d like to think it was both. We thought it seemed like a good idea and it was actually quite fun so we enjoyed our breakfast but eventually forgot all about the unusual toast situation.

The other day, I was staring down the top of our toaster at home waiting for it to pop when I remembered the dining room full of toasters. It got me thinking, the customers were doing the labour that they were paying for, but they were happy. A quick check for the B&B on Trip Advisor shows 22 five star reviews all mentioning the table-top toasters. It seems that the pay-off for putting in a minimal amount of effort resulted in receiving an efficient and tailored service. Where else might we be able to implement this approach?

With the toast situation, only a small part of the process was given to the customers. They still received a full breakfast from the kitchen (and were not expected to do the washing up) but they had control over the extras. So I’m not suggesting that customers are made to do all of the work that they are paying for, but there seems to be an opportunity to let them get involved and take on some actions that result in benefits for the customer and suppliers.

Are there any parts of your online service that you could hand over to your customers? Are there any processes that take up your time that would be easy for your customers to do themselves? What could you achieve with the extra time you’d save? Would your customers actually be happier to do some work themselves if they see a real benefit? Food for thought.

Originally published at www.clarkcx.com on March 6, 2016.

Paper Prototypes: What are they and why use them?

Website design is ever-changing and, consequently, the way that website designers work project-to-project changes as we learn better ways to do things, embrace new technologies, methodologies and processes.

We’ve been making websites for many years, and have experimented with different ways to get clients to engage with the wireframing stage of the process. We have sketched out really rough wireframes with clients and used online wireframing tools such as Balsamic and InVision to present them. This way of showing wireframes to clients has been fine but we’ve felt like we’ve not quite been able to get people connecting with the functionality of the design. We felt it was important to wireframe most of the website with our client so they knew they had full input into the design but we didn’t need to do every page and certain pages such as a blog overview or contact page were so simple that they didn’t really need to spend that time with us.

Wireframes are the blueprints of the website and it’s important to make sure that the content and functionality is right before the website is built. But because we’re all visual creatures, it’s still hard to see past what font has been used, whether the navigation is on a light or dark background, should the buttons have rounded or square corners? etc. It’s easy to ask people to not worry about those things at this stage but we can’t help being drawn to the visual, even if it’s just monotone and basic. Our clients naturally want to skip ahead to the visual design stage where the colours, nice fonts, photos and illustrations live. Wireframes are not the sexy part of the web design process and grey boxes and buttons are, to be honest, a bit of a turn off.

A better way to engage with wireframes

So what can we do to get our clients more engaged with wireframes? Draw them! For our latest project, we rough sketched some of the important pages on the site with our clients to make sure we had everything we needed on the page and then rough sketched out the remaining page templates as a team to get all the elements in place. Then I drew every page template out on quadrille paper, both desktop and mobile versions. I also had separate cut outs of recurring elements, such as the header and footer so these could be placed over the page templates.

So why draw pages? There are several reasons that we decided to work this way in this project. One of the main reasons for drawing out the pages was because they are drawn by hand, there are no styles to be districted by. No fonts, no shades of grey, no corner radiuses. We and our clients could concentrate on the content and functionality of each page template.

The act of drawing out each element meant that I thought extra carefully about the elements going on a page template. It’s easy to copy and paste elements using design software but because each element was inked in, it was considered. Sometimes, we realised that we were missing something, a call to action or similar and I simply drew it and taped it into the design. The designs were modular and amended easily without having to save and update pdfs.

As well as there being no visual design distractions, presenting the wireframes actually worked really well by them being on paper. They could be picked up and examined, mobile pages could be held in our hands and scrolled by pulling the paper down, customer journeys around the website could be followed by placing the pages next to each other and checking that the journeys made sense. When our clients had suggestions, I simply drew them on, no waiting until I was back at a computer to make the changes. And because changes could be suggested and instantly implemented, our clients knew that this stage was a discussion for them to get involved with, not something finished that they had to approve.

But paper? In web design?

But the website isn’t printed, it will be used on computers and phones, shouldn’t you show them on those devices? We’re not going to go from paper prototype to finished website, there are a couple more stages between these. The paper prototype is important to check that the functionality and content of the website is right and to engage our clients but we will show the prototype on screen too. The next stage is to build a HTML prototype which will act the same as the finished website but we know that by testing out the pages on paper first that the processes have been well-developed. That’s not to say that things won’t change at the HTML prototype stage, but we are confident that we haven’t overlooked anything before proceeding. We had a fantastic meeting showing our clients the paper prototypes and getting them excited about the project. Visual design might always be the bombshell of the process but paper prototypes are, at least, charming.

First posted at https://www.ablewild.com/journal/web-design/paper-prototypes-use/