4 Things You Didn’t Know About The Web

The digital world operates in its own timezone and it can feel hard to keep up. These quick facts point to important trends in our industry and we all need to strive to do better.

1. “If your site takes more than 3 seconds to load, users will abandon loading it.” @yeseniaa

Ready to feel old? According to Craig Hyde, CEO of Rigor, the size of a web page today is about the same size as an MP3 file. Do you remember how long it used to take to download a single MP3? I do.

Fast sites build trust, and slow-loading sites are abandoned. According to the New York Times, if your competitor loads 250 milliseconds faster, users will use that. In fact a mere 160kb added to page weight meant a 12% increase in bounce rate on Etsy.com for mobile users (source).

2. “There are 8 billion mobile devices in the world today.” @beep

Think about the last time you purchased something online. If you think about it, I’m betting you may have checked it out on your laptop, maybe compared places to buy from on your tablet, and maybe finally pulled the trigger from your mobile device while you were waiting for the bus. More than 40% of all online U.S. users start an activity on one screen and finish it on another.

More and more, users are becoming intolerant to differences in experience between accessing your digital product. As digital designers, we no longer have the luxury of not holding every channel we manage to the same standard. We cannot rely on driving users to our preferred platform. As Jeffrey Zeldman says, “No one wants to download your app when they come to your website.”

3. UK.gov saved £1.8 billion in support costs by redoing their digital knowledge base. (source)

Every time Walmart can reduce their page load time by 1 second, they see a 2% increase in conversions. On the other hand, Amazon loses $1.6 billion if their pages load one second slower.

Good websites save money. Efficient and user-driven content strategies mean an easy interaction for your users with your brand, and that directly affects your company’s bottom line. Keep that in mind when you’re deciding who you want to run those properties and when you’re pitching digital projects to your upper management.

4. Microsoft.com has 15 million pages, 4 million of which have never been visited.

Websites are not document repository systems – over and over I have this debate. It is easy to fall prey to the idea of putting something on the website “just in case someone needs it” but this is how we end up with cluttered, unfocused content.

Suspiciously, more often than not the “just in case” content is a PDF. Karen McGrane calls PDFs “content blobs” – not responsive, not searchable, not accessible, and ultimately, not truly digital. PDFs are essentially content coffins; if there is valuable content inside your PDFs, bring it out and make it useful.

Guest Lecture Alert – Digital Voice and Tone at George Brown College

King Street entrance of George Brown College in Toronto where I'll be lecturing about digital voice and tone.I’ll be guest-lecturing at George Brown College this week as part of their Entrepreneurship course in their Continuing Education program.

I’ll be covering how to create a digital voice including:

  • What the heck is a digital voice and why do you need one?
  • How do you create a digital voice?
  • How do you maintain a digital voice?

I will post my notes after the lecture. Hope to see you there!

Simple and Searchable: Improve Your Page Titles

Stick figure making a confused face.

I was going about my regular morning on the internet, as you do, and I found this example of a constant problem I see – the difference between how a content creator (company or organization) will name something, vs. how a user will search for it. What comes to your mind when you see:

Availability Guide

If you’re like me, you probably make this face:

Stick figure making a confused face.

 

To be fair, in search results the full page title is: Availability guide | Foodland Ontario

Screen capture of the Google search result showing the Availability Guide from Foodland Ontario.

But on the page itself, while the logo informs that name, the page title is divorced from that sole indicator as to what this page is about.

Screen capture of Foodland Ontario's Availablity Guide page.

 

Here’s my point. I actually really like this page overall. It is slick, appropriately uses a hero image (what a wonder!), minimal text and an appropriate graphic to easily show what foods are in season when (which is what “Availability Guide” apparently means). And this page does appear readily in Google results even though I search something completely different each time I want to get to this page. But why make it more difficult than it needs to be?

This title reeks of multiple approval levels. I would love to see what search results actually drive people to the page, but I suspect it would be something like “What foods are in season” or “is X in season”. Changing the page title to “What Foods Are In Season In Ontario” or even “What’s In Season: Ontario Food Availability Guide” something similar that was (and this is the crucial part) informed by the search queries people are using, it would simply this page and drive additional search results with minimal effort.

Keep it simple – if you can’t tell what the page is about from your page title, your page title needs work. If your page title doesn’t consider how the user will be looking for this information, your page title needs work.

Now back to my grocery planning!

3 Things I Learned at An Event Apart Chicago

It’s #aneventapart time again! This year, I picked An Event Apart Chicago to attend because I’ve never been to the city and because the A Day Apart workshop was put on by Karen McGrane and Ethan Marcotte. I would listen to them teach how to dust properly, but the workshop actually focused on Responsive Design, which I’m about to undertake with my main client. If you haven’t been to An Event Apart, I can’t recommend it highly enough. I learn more there than I do all year. I took eleven pages of notes, but here are the top takeaways I will be able to immediately use:

  1. “The customer is no longer King – they are Dictator.”Gerry McGovern This was my first time hearing Gerry McGovern speak, and he was excellent (plus the accent adds +10 to the entertainment factor). This quote echoes another one I heard last year at An Event Apart Orlando – your users will decide how they want to use your site; you have no say. I see this all of the time with my clients – the internal expectation is that a user will follow your navigation from top down, yet so many simply google the business name and the search term and bypass your information architecture altogether. It’s amazing how many clients seem to want to hide the meat of their content inside a lot of words, buried far down the page, or deeper in the IA. This is something I encounter with students as well – there’s an urge to really spend a lot of time and characters setting up the conclusion, instead of leading the strongest information. Don’t make your users work for the information because they won’t – they will simply go to Google.
  2. “Responsive design won’t fix your content problem.”Karen McGrane Hallelujah. During An Event Apart Chicago’s A Day Apart, Karen walked us through some high level steps to take when moving to a responsive design. She suggests that a content reduction of 60-75% isn’t uncommon, and I completely agree. So much content makes it to the site as either an archive function (put it there just in case) or without ever putting it through the test of “is this valuable to the user or does it just check a box for us”.Doing a content audit like this is hard work, and will no doubt result in a lot of testy conversations with internal clients. In much the same way that an editor becomes a therapist, so too does a digital content specialist. My personal suggestions here are to be sensitive to the attachment many clients feel to their work (it is theirs, after all) and to really find out what their goal is for the content. When you take the time to really hear what they want to achieve, you can make a lot more headway by suggesting the best ways to help them get there.
  3. “Your customers’ top tasks are often not the same as your organization’s top tasks.” or Top Tasks vs. Tiny Tasks – – Gerry McGovern How often do you find yourself in this situation? You’re spending all of your time posting information to your website that you know no one will look at, while the pages with the highest traffic remain unchanged or even looked at. For my main client, this came in the form of spending so much time adding information to pages that occupy less than 0.01% of the overall traffic, while the mobile platform, of which 73% of my users were hitting, received virtually none of my attention. Our top traffic pages (excluding a forced routing page) have not been touched in four years.I’ll be the first to say this is crazy.

    I’m betting I am not the only one who has experienced this. It is my primary goal right now to try and right the balance in this equation, and what I think will be my strongest weapon is the simple idea that right now, we’re yelling into empty rooms. I find there’s a real fear clients have of stopping a practice because of that “just in case” reason, but really, it’s just a waste of everyone’s time to shout at people who aren’t there.

Bonus quote: “Imitating paper on a computer screen is like tearing the wings off a 747 and using it as a bus on the highway”Karen McGrane

Amen. Thanks, An Event Apart Chicago.

The Web Is Not A Piece Of Paper

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.

TO2015 Graphics in Terminal 1, Toronto Pearson.
Siblings…
Screen capture of TorontoPearson.com/TO2015
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.

Microcopy: My New Obsession

Zazzle.com Contact Us page.

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.

TheBay.com Contact Us Page screenshot.
http://www.thebay.com/webapp/wcs/stores/servlet/en/thebay/content-view/ContactUsEmail Accessed 01/05/2015.

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?

TheBay.com Contact Us Email Form dropdown menu.

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.

TheBay.com Email form submitted.

The one thing this page has going for it is the thank you. Here’s what I think could really improve it:

  1. 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.”
  2. 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.

TheBay.com Email Auto Response

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.

Zazzle.com Contact Us page.
http://www.zazzle.com/about/contactus Accessed 01/05/2015.

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.

 

Outlines and Reverse Outlines: Write A Better Essay In One Easy Step

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:

  1. Does each box of proof support the argument statement?
  2. Do the argument statements make sense together?
  3. 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.

We can edit your essays too – just get in touch!

How to Champion Web Standards And Other Unsexy Ideas

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.

3 Things I Learned from An Event Apart Orlando

A white samoyed dog wearing Mickey Mouse ears.

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:

  1. 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.
  1. Simplify.
    A text-only screen of an older model Nokia cell phone.
    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…

  1. 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!