Category: Managed Services

When I tell people I work at a web design company, they often respond with “I really need a website for my _____.” More often than not, they should have said “I really need a web page.”

This weekend, I came across a tumblelog called “Never said about restaurant websites”. In Raleigh, we have a lot of great locally owned and operated restaurants. Many of them, unfortunately, either don’t have a web presence or are, well, doing it wrong. While it’s fine to think about what you want to put on your website, it’s more important to think about what people will expect on your website. When it comes to restaurant websites, people expect to find hours of operation, location, and a menu. All of those could fit on a couple of web pages (and the menu should not be a PDF).

The Good, Bad & the Ugly

To illustrate my points, I went on an Internet safari where I visited some of the websites of my favorite restaurants.

Good: Everything I need, at the top of the page

While this site used Flash and it took a little bit to load, everything I needed was right at the top of the page, clearly visible. Well done!

Bad: Difficult to find (and read) the Hours of Operation

A restaurant’s hours need to be very visible. My eyes shouldn’t have to wander to the bottom of the website and then adjust to read light-gray text with strange formatting.

Ugly

On the left, the address (without the link to the map) and phone number are clearly visible (I removed pieces of their contact information). But, unfortunately the site is difficult to look at. The menu is available as a PDF file, and the header requires Java, which I haven’t needed to install on my computer yet. I can’t find the hours anywhere except in the Menu.

Does every business need a web presence?

Unless you’re operating in secrecy, the answer is yes. Most businesses that don’t have a web presence either are doing fine without one, and/or are intimidated by the large investment of a website. In reality, just one or two well-designed web pages will often suffice when one of your customers thinks “what is their phone number again?” or “I wonder if they’re open” and tries Google unsuccessfully. Then, your customer has to resort to the phone book. Or, if they’re like me, the online phone book. Phone books, in any form factor, are not an ingredient of a healthy user experience.

The user experience extends off the screen. Proper signage, well-lit parking lots, ramps for the handicapped, and a useful voicemail message are also very important. For the established single building restaurant, barber shop, or tailor shop, a web presence might not seem like a priority. For some, they might not even want to attract new customers. But a great user experience is also important for established customers. And now, more than ever, the Web (including the Mobile Web) is part of that.

Like many holiday travelers this past December, I was recently reminded that nature was really in charge of my family’s holiday travel plans. Nature has blizzards. All I have is a GPS and a snow brush.

Not one to panic, I quickly turned to the internet to solve my problems.

I fired up my mobile device in an attempt to find an affordable hotel room. Why slip and slide in the snow when my family and I can order pizza and wait warmly while it all passes by?

The hotel finding experience started off well enough – I went to a name brand discount travel website and found they had a mobile-formatted home page. This allowed me to quickly search for and find a hotel room nearby. The site’s layout was great and the menu options helped me narrow things down quickly and efficiently.  It let me view features, reviews, and see estimated prices of the hotels I was considering. This is the sort of top-notch mobile user experience we all want, especially when a blizzard is coming.

Then, when I went to purchase the hotel room, I received what mobile web users have come to dread – the mobile-to-desktop hand-off.

We’ve all experienced it. It’s that one link tap that, without any warning or context, takes you straight to a traditional full-width desktop website. Now I’m sliding, re-sizing, tilting, and zooming the screen to find the links and buttons I’m looking for.

Sure, my iPod Touch browser handles it in stride, but if I was using my pay-as-you-go-low-tech phone browser, things would have been a great deal more painful, if not impossible.

This story has a happy ending.  I was able to book the hotel room at a reasonable price and ensure my family was happy and warm while we waited for the snow to pass – but I was left with a bad vibe about the travel company.  Not because I had to use a non-mobile website to reserve the room (not everyone had a budget for a dedicated mobile site) but because I was, without warning, passed off to a non-mobile website right as I was able to complete the transaction. Right when I was pulling out my wallet.

Why tease your users with a great initial experience and then bring in someone else to close the sale?  And why do it right before I put my credit card information in?  Why push confusion before the conversion?

This is why great online experience are often the result of user testing an entire process, not just an initial screen or menu design. Shocking layout and interaction transitions should not be part of your plan. Why leave your users out in the cold?

When the Atlantic BT User Experience team gets involved in a project, we’re presented with a great opportunity to tell a website’s story.  With the help of our clients, we tell it with outlines, content maps, user stories, wireframes and more. By telling most of the story up front, we allow the designers and developers to understand what the target is and who the users really are.

We’re strive to make this User Experience process part of each and every project we work on.

Why Wireframe?

One critical user experience technique is wireframes. We make wireframe mockups of our sites before our designers lay color to pixel because it allows us to explore ideas quickly, keeping the good ones and leaving behind those that won’t work. These wireframes act like blueprints for the complex interactions and flows for the website users.

This idea exploration leads to our client’s customers finding what they’re looking for, or looking to do, as quickly as is possible.  This speed for the user is very important.  In fact, our client’s customers demand it.

There are two wireframing tools we’re very fond of here.

1. Markers

Simple sketching with paper, markers and highlighters.  It’s a method that can’t be beat for its speed and efficiency at communicating ideas.  Think of it like the first draft of a great story — rough around the edges, but you have a fair idea as to what’s going on.

Several AtlanticBT staffers recently attended a day-long seminar put on by the Triangle Usability Professionals Association where the techniques of interface sketching were explored. We learned about using different marker shades, along with highlighters, to imply depth, focus, and interactivity.

It was great for all involved, and we knew we had to make it a formal part of our project process.

As an exercise, we took a look at our own Portfolio page and sketched out some possible upgrades to it.  The sketching allowed us to explore several ideas without spending any unnecessary development time.

2. Balsamiq Mockups

Sketching is great – but at some point it becomes necessary to get those ideas onto screen so we can share them with our clients and internal team.  That’s where we turn to a prototyping tool like Balsamiq Mockups.

Balsamiq Mockups maintains the sort of low-detail “focus-on-the-feature” feel of sketching, but in a digital format.  It’s easy to use and easy to make changes when client and user feedback starts rolling in.  Balsamiq’s interface allows the user to add common website elements like text, links, buttons, and layout elements to the page with drag-n-drop ease.

Balsamiq allows us to take our sketches, refine and annotate them, and then share them with our clients to ensure that they’re getting exactly what they’re looking for as far with their site’s features navigation.

An Ounce of Prevention

The wireframing process provides three great benefits:

1. It saves everyone time and effort by answering a lot of project questions before designers and developers get started on their work.
2. It prevents unnecessary rework later in the project.
3. It lets us explore how the user will interact with the website beforehand in a way that non-visual methods sometimes miss, and does it in a way that is fast and easy for everyone involved to give feedback on.

Have you ever clicked a link only to realize that it is opening a PDF and not a web page? It’s frustrating.

The Portable Document Format (PDF) was created back in 1993 by Adobe. Since then, it’s become the de facto standard for printable documents. It’s great because you can send someone a PDF and be virtually assured that it will be formatted as intended. PDFs have many practical uses like eBooks, fliers, editable forms that need to be printed, resumes, portfolios, and password-protected documents. But, they should not be used as a place to put useful content on your website.

Why not?

One major problem with PDFs is accessibility. It’s important to tag your PDFs so that people using screenreaders can easily navigate through them. WebAIM’s PDF accessibility article does a good job walking through the process.  Following WebAIM’s recommendations will also improve the usability of the PDF.

The other major problem is when content is better suited for a web page than a PDF. For example, my local mall has the map as a PDF. It would be very cool, and useful, to be able to see that on its own web page. I could envision mousing over a store and seeing its hours. Or, maybe checkboxes for the types of stores you want to look at. If I’m only interested in men’s clothes, then it would be very useful to not see all the restaurants, toy stores, and you know… Bath & Body Works.

The mall website also has a calendar as a PDF, which shows their “Extended Holiday Hours”.  Does anyone actually print the calendar out and stick it on their fridge? I’d like to see a year-round calendar with events that are happening in the mall (e.g. store openings).

There’s also a few other problems with PDFs. On older computers, they might take a long time to load or crash the browser. Many PDF viewers also open up security holes, which could enable credit card or identify theft.

Regardless of your reason for linking to a PDF, always make sure to label the link so that the user will know what they are about to click.

It’s the Christmas season, and The Salvation Army volunteers are outside stores ringing their bells. I would hypothesize that most people either (A) walk right past them, or (B) give them the change from their pocket. Both of those options are easy decisions that can be made quickly.

What can we learn from The Salvation Army?

People don’t like to think. The question of “how much should I donate?” is an open-ended question that can be surprisingly hard to answer. I bet a lot of people ask themselves that question and then leave without donating anything. When you are accepting online donations, make sure to have pre-set amounts with (if possible) rewards for each donation level. Kickstarter, a crowdfunding site often used to fund artistic projects, does a great job with this. They also use a threshold pledge system, which means that donations are not processed until a specific amount is donated.

A recent success story for pre-set amounts are text message donations for Haiti and Katrina. I didn’t hear many people complaining that $10 is too much or that they wanted to donate a specific amount. Most people donated $10 without question.

The restaurant industry has also figured out that people don’t like to think. I’ve been to quite a few restaurants that show automatic tip calculations on the bill. While calculating the tip is not very difficult, I’m sure the average tip has increased at all of those restaurants.

It’s very simple to add pre-set amounts to a donation form. They are especially effective if you want to attract a lot of smaller donations, while not scaring away the larger donations. Imagine if every Salvation Army bell ringer also accepted $5 credit card donations, and all they needed to do was swipe your card once. I think they would get a lot more donations…

But honestly, Judith Griggs…..

Talk about an epic fail!

The Cooks Source Magazine Disaster has turned into the biggest and fastest online “pile-on” I’ve ever seen – and it’s still going strong.

The quick rundown of the plot…

• In 2005 – Monica Gaudio, amateur writer/blogger, posted an article about her experience recreating apple pie recipes from the medieval era (no, I’m not kidding).  The article clearly contained  a copyright notice at the bottom of the page.
• October 2010 – The Cooks Source Disaster is set in motion when Cooks Source editor, Judith Griggs, gives the thumb’s up to reprint Monica’s original article in the October 2010 Cooks Source Magazine issue – without Monica’s permission or knowledge!  (Psss… Judith, that’s what we call “plagiarism”, a.k.a “stealing”.)
• October 2010 – Jeff Berry sent an email to his friend, Monica Gaudio.  “As American As Apple Pie – Isn’t!” had been published in Cooks Source Magazine.  “Is this your article?” Jeff asked.  A stunned Gaudio confirmed it was.
• November 2010 – Emails that you would fully expect ensue between Monica (“Hey, you stole my article!”) and Judith (“Uhhhh, ummm….  I’m not here right now?”).  The back and forth continued a few times, before Judith penned this doozy of an email, launching the Cooks Source Disaster into orbit, at an astonishing pace that I’ve never before seen.

“But honestly Monica, the web is considered ‘public domain’ and you should be happy we just didn’t ‘lift’ your whole article and put someone else’s name on it…  We put some time into rewrites, you should compensate me!”

Oh, Judith…. no.  You poor, plagiarizing sap – you had no idea what a frenzy you were about to unleash.  (Read the whole outrageous email here.)

Judith’s absurd email response found it’s way online, and spread like wildfire, leading to:

• Thousands of people posting put-downs and jokes on the Cooks Source Magazine Facebook page.  As we watched it unfold in the afternoon on November 5th, posts were going up faster than every 4 seconds!
• Judith’s Cooks Source team, being bombarded with Facebook slams, creates a new Facebook page (while leaving the old one active, still racking up the insults).  The new page gets hammered in the same way, at the same rate.  Judith just doesn’t get it.  On the new Cooks Source Facebook page, the Cooks Source team posted (the name has now been changed to “Josh Goldberg” , “Don’t you think that jumping on a band wagon just makes you look lily-livered?” and “I don’t know what some of you think you are going to achieve? We apologized, now go find a rabbit to catch or something”.
• A full Wikipedia page dedicated to the “Cooks Source infringement controversy” is posted the same day.  As of this post, Wikipedia contains 37 references to articles written about this disaster.
• The Cooks Source Disaster craze goes into the next stratosphere, as top media outlets worldwide cover the story, including:
  1. CNN
  2. NPR
  3. LA Times
  4. Washington Post
  5. Forbes
  6. Time
  7. New York Times
  8. CNET
  9. Boston Globe
  10. Wired

If all that wasn’t enough, all this media attention has apparently turned up more dirt on Cooks Source, with other reports of alleged plagiarism involving the Food Network and Simply Recipes.  Ouch.

I bet Ms. Griggs is wishing she could have a “do over” on that last email she sent to Monica Gaudio.  Especially when you consider that all Monica requested was for Judith to post a public apology on her Facebook page and make a $130 donation to the Columbia School of Journalism.

The Lesson Learned

Writing unique content is hard work – it takes a lot of time and effort to craft written words that others will find interesting enough to read.  But trying to dig yourself out of a deep hole after being caught plagiarizing another’s work is MUCH harder work!  If you include any snippets of content from other websites, make sure you reference the original source – and including a link to the original source website is always in good taste.

And if you find that writing original content – particularly content optimized for search engines – is too time-consuming, there are options…. enlist SEO help!