I have the privilege in my day job to work with three extremely talented in-house designers. I also work with many in-house clients who, while great to work with, often see the website as the last checkbox to check on a project and nothing more. I am often asked to simply “put it on the web,” and I bet you have been too.
This request often comes in the form of a cringe-worthy acronym: PDF. Just take those beautiful designs those amazing designers did and toss them into a PDF on site. While PDFs certainly have their place, I believe it should only be for documents that are intended to be printed (hence “Portable Document Format”) or in cases where (let’s be realistic) recreating the design is cost or time-prohibitive. On the latter, I try to only use this as a true last resort. One of the greatest lessons I learned at AEA Orlando was that not every viewport has to have the exact same design; they have to have the same type of experience. The same can be said for static graphic design and the web – don’t aim for twins, aim for siblings.
Siblings…Siblings, not twins.
This experience is not only limited to visuals – text can suffer the same fate. Take for example an awards program. The program description was already written and saved out as a PDF, so the ask was simply to add the PDF to the site. But this is a bad user experience, especially in an increasingly mobile environment. Why should I make my users download and open a PDF, rather than providing them the information right there on the page? You could make the argument that the nomination form itself should remain a PDF, but that only works if you user base is known to prefer working with paper copies, and that you as the awards program administrator, are okay working primarily with paper submissions.
For the past eight months I’ve been involved in developing an app for my day job, and it has created a new obsession with microcopy. Microcopy is all of the little text most people don’t give a second thought – it’s the error messages, form copy, headers, completion messages and more.
So why is microcopy even important? Let’s take a look at some examples by looking at something almost every site has – a Contact Us page.
This is thebay.com‘s Contact Us page. I do like the multiple options for contacting and the fact that the form is brought up front and centre – no need to scroll to eternity to find it. However, let’s think about the users coming to this page; they are likely frustrated – maybe something has gone wrong with their order or they can’t find the information they want. Now they are faced with a page full of text with few indicators as to where to look.
First, the text formatted as headings is all over the place. The options for how to contact, arguably the reason you are on a Contact Us page, are buried in the first paragraph text. But wait! There’s also a live chat option, which oddly appears directly over the form. Is that form for email or to enter the live chat? It’s very unclear.
And I won’t even mention the bold heading since I’m allergic to the words “Click here” as well as unnecessarily long link text.
If you do read to the bottom of the left column, you’re greeted with an asterisk marked warning paragraph:
**Please be sure your email pertains to the subject specified. Emails which do not pertain to the subject cannot be answered. You may send email regarding other matters to Customer Service. **
Yikes. Not really the tone I want to hear in the microcopy if I’m already annoyed and trying to reach out. Even stranger, when you go to select an email subject in the form dropdown, two of the options have a single asterisk – does that mean this message pertains only to them? Or not since the message has a double asterisk?
There’s also an inconsistency with the spelling of “email/e-mail”. BUT back to the topic at hand! Here’s what happens when you submit via the email form.
The one thing this page has going for it is the thank you. Here’s what I think could really improve it:
Give a concrete time frame (and commit to it). We’ll get back to you in two business days is much better than the wishy washy “try to get back as soon as possible.”
The entire body content of this page is one line – why not use this valuable space? Offering upfront links to your social channels might be a start, especially if you monitor those channels for customer service (although in that case, they should have been presented as an option on the Contact Us page itself).
Next, an automated email is sent.
Here’s the timeline I was hoping for on the confirmation screen. The same problem of wasted real estate applies here, with the addition of a terrible email name (General Email Response) – it’s robotic enough to get an auto response without this reinforcement.
So let’s take a look at a company that’s doing a better job with this same process.
The overall look is much cleaner, and I love that first line of copy – the tone is helpful, cheerful and human. The links below points clearly to three frequently sought after options: Track My Order, Returns and International Shipping. Next, the Frequently Asked Questions are clearly marked and what are likely the most frequently asked ones are highlighted below that heading. Rather than clutter the entire page, further help is offered by a link to their help section. I still find the use of heading formats on the right slightly confusing; I’d rather see it be a bit clearer to show the two options of Email or Phone, with the corresponding information under each. I find that bolding the Hours headings confuses matters. Overall though, this is a much clearer page to navigate. Further down, you’ll find less frequent options like press inquiries, business development and large volume orders.
Clicking the Email button takes you to the Zazzle Support Portal – a name can mean so much, can’t it? The alternate title on a smaller screen shows as Community Portal – I don’t love the inconsistency, but both names imply good feelings of support and help, the very thing your user wants most at this stage. From this clean interface, you can submit your concern, browse support articles or search for an answer in the top right search bar.
The words we choose for every bit of our sites make a big difference about the sentiment your user experiences. Especially on pages your users might come to in an emotionally charged state, you want to make the process as painless and friendly as you can – and it starts with your microcopy.
When I was in university, I was often writing two or three essays at once, and the deadlines were often within days of each other. That added up to a lot of essay writing that jumped assignment to assignment, or was interspersed with studying for exams or, you know, attending class. Most of my student clients are in the same boat. When I read through their draft essays, you can see exactly where they rushed, where their attention was divided and whether they plotted out the essay in advance.
Believe me, I know it seems like unnecessary extra work when you have no extra time to give. But trust me – a well done outline can save you a ton of time, and a reverse outline can make your essay infinitely better before you turn it in.
Outline
Thesis:
Fill in here!
Argument #1:
Fill in here!
Argument #2:
Fill in here!
Argument #3:
Fill in here!
Conclusion:
Fill in here!
Fill in this chart as you read your sources with your argument points and proofs, including any direct quotes with your sources. Distill each argument into a single statement that supports your thesis; make sure all of your proofs support that statement. Ask yourself:
Does each box of proof support the argument statement?
Do the argument statements make sense together?
Do the argument statements support your thesis?
Doing this will mean when you sit down to actually write the essay, everything you need will be in one spot. This will allow you to spend less time writing, which usually results in better quality writing because you won’t be distracted by chasing down sources or forcing arguments to fit in the greater thesis.
Reverse Outline
Once you’ve written your draft, go back and try to fill in the same outline chart with the essay you’ve already written. If you completed an outline, be honest with yourself about where you went astray and get things back on track. If you haven’t completed an outline, this is still a great tool. Try and fit in your content to the chart above and again, be honest about where it doesn’t fit and adjust accordingly.
Taking the time to really lay out your essay will take extra work up front, but it will result in a much easier time writing the essay and a better essay overall.
You might work in a small team managing your website or you may be flying solo as a freelancer. Either way, it adhering to web standards and accessibility standards can be a tough sell with either your client or your manager. So how do you go about selling the super sexy idea of web standards?
Connect Standards to Other Goals
Web standards are amazing things – coding with good web standards looks eerily similar to coding with good accessibility standards, so you’re already solving two challenges in one. But to make your client or boss care about them, you need to find a problem they are having that will be solved by web standard coding. Coincidentally, this is also a great approach when you’re writing cover letters. Think about job postings as a list of problems the hiring manager is having – how can the skills you have make their lives easier?
Web standards can help in a number of ways, but a few heavy-hitting reasons you can use are:
Allowing users of all sight and motor control abilities to read your content.
Allowing users on any platform or device to use your site.
Allowing users on any internet connection speed to see your products.
Remember to pitch your standards project as future-proofing – clearly coded content will be much easier to integrate onto other platforms in the future. Think about digital signage or audio-based platforms like Google Glass, and likely platforms we haven’t even dreamed of yet. The cost of letting your code stay as is will just get higher the longer you wait.
Start Small
Once you learn about web and accessibility standards, the task at hand can seem daunting. But the truth is, you can start small. Make a checklist of everything you want to do with every new piece of content you build and, if time allows, apply the same list to every older piece you go in and modify. Set a goal of a small section per day or per week and track your overall progress to see how far you’ve come. This is also a great method for selling your boss or client; the project doesn’t have to come with a big upfront cost if you stretch it out over time.
Come Armed with Data
This could be audience analysis data (how many users aren’t able to get to your content because of accessibility concerns or an older device?) or a demonstration of how your small changes are making a big difference. Bringing data to the table is like having an impartial, third-party judge; it can help keep egos out of the conversation.
Don’t give up – even if you’re a one-person team, your work can make a world of difference to your users.
Today I spoke to a group of 30 grade nine students for the second year and once again it proved to be the toughest speech I give all year. I think my job is pretty cool (computers! websites! social media!), but keeping the attention of 14-year-olds at 8 a.m. is…challenging.
I just got back from An Event Apart Orlando: Special Edition 2014. It was my first AEA and it definitely won’t be my last. But as my new friend Jessica neatly summarized, the “conference bubble will only last so long. I have pages and pages of notes, but here’s what my experience at An Event Apart Orlando taught me:
Design for everyone.
Between the global lens Ethan Marcotte drew to our attention to the accessibility angle hinted at by Derek Featherstone (full disclosure, I saw his Web Accessibility talk at #RGDaccess), we can’t continue to design for English-speaking, desktop users using a single browser with broadband internet connections and no challenges with sight or fine motor control.Here’s where I can dump a lot of web design’s favourite buzzwords: responsive design, device agnosticism, progressive enhancement, elegant degradation and fallback. All of these terms are exceptionally valuable (and they let me sound extra smart when telling my clients or bosses what we’re working on), but I’m finding it easier to concentrate their goal into this one concept: design for everyone. We can build sites so that while the experience may differ by browser, connection speed, device and physical abilities, the content can still be delivered effectively. Websites don’t have to look the same in every browser, but every browser should have access to your content.
Simplify.How would your website look on a phone like this? Image courtesy of: http://flic.kr/p/7tsJfN
Ethan Marcotte pointed out that an average size for a webpage in 2009 was 320mb; in 2014, that number has doubled to 1.8mb. Well, so what? That’s not surprising given the trend of full bleed images and active scripts, animation and video. But what are the implications for the users in developing countries and cities? Ethan pointed out that in Africa, mobile penetration is now 60%; that’s 700 million users, most of whom are using basic devices that render only in text.
Simplification also means enhanced performance. Users expect a page to load in two seconds or faster; anything longer and the perception is that the page is broken – 40% of users will leave. Streamlining is also the key for mobile-first development; if you take the time to organize the content and user experience and optimize it for the mobile experience, you can build out to the larger screen. And speaking of users…
Put the user first.
As Jeffery Zeldman said as he kicked off day one, “we don’t design for browsers; we design for people.” Who is using your site? And what is the job your site should do? A powerful talk by Eric Meyer put this in sharp perspective – we design for a relaxed, savvy user seeing our site in an optimal viewing environment, but we must consider how our site is used by everyone, especially those in crisis. And these considerations are not static; content priority changes over time and with location, and Kate Kiefer Lee reminded us that voice and tone must change based on content type but also user mood.
It has taken me a week to distill my notes into these points and, believe me, I know it doesn’t do the conference justice. But if this summary at least peaks your interest in the topics, that will be enough. I can’t wait for An Event Apart 2015!
