Pemaquid Communications

As we Portlanders like to say, our town has more restaurants per capita than any city in the country except San Francisco. There is a corresponding density of that most enigmatic of Internet properties – the Really Bad Restaurant Web Site.

This was made painfully clear as I researched local eateries while preparing to entertain a guest from out of town. More often than not, I found myself served the standard fare – Flash intros (with the obligatory “skip intro” link and which don’t play on iPads or iPhones), graphics the size of an asteroid and which take more than 8 seconds to load, and menus buried so deeply I felt I had discovered buried treasure when they were finally found.

Why are restaurant Web sites so astonishingly awful?

After all, it’s 2011, not 1999. The rest of the Web has abandoned splash pages with videos that auto-play and menus encased on 40MB PDF files that must be downloaded to be read. Why do restaurants – even upscale eateries that should have the means to afford quality interaction design – seemingly exist on a Web That Time Forgot?

In a recent article on Slate, Farhad Manjoo attempts to answer the question. His conclusion: most sites are run by chefs in their 50′s who don’t spend much time in front of a computer. They are often abetted in their ignorance by Web designers who are only too glad to feed their desires for sound beds and Flash-y-ness.

But other industries have site owners that don’t get much screentime and yet long ago abandoned the worst design practices. There’s one other essential reason why restaurant sites haven’t evolved.

It has to do with usability.

Restaurants conduct no actual business on their Web sites. You can buy shirts, pants or even cars online, but to get Grilled Duck Steak with Gnocchi you still have to head over to someone’s dining room.

Because restaurant Web sites don’t (directly) ring the cash registers, most haven’t awakened to the need to make their sites easy to use. That’s a big mistake, because about a third of reservations are made during times when a restaurant is closed. Mobile traffic is growing, so making sure your site downloads information to those devices easily is critical to capturing an ever-growing percentage of site traffic.

To have a successful Web site, restaurant owners should do the following:

Make menus easy to access – Have a page in your navigation labeled “menu”, and make it a Web page, not a PDF or a graphic. Feature specials on the home page. Show prices.

Design for mobile – A simple, easy to download user interface for mobile will help capture people who are looking for a meal on the spur of the moment.

Make contact information easy to find – have your Web designer create a Google map showing the restaurant location, and feature your phone number and address prominently

Make use of social media – you *are* using Facebook and Twitter to promote your restaurant, aren’t you?

Eliminate the Flash – Flash can’t be read by the diner who’s kicking back with her iPad. Flash content can’t be accessed by search engines. Get rid of the splash pages; remember that there’s a reason why every one of them has a “skip intro” link. Save the pizzazz for the dining room.

Picking a favorite Client is a little like choosing a favorite offspring – you love them all in their own special way. But annie|catherine design stationery is certainly one of the Clients I like the most. The business run by Annie Darling and Catherine Breer has always had a warm, playful friendly vibe and an amazing creativity that is inspiring. Their work is truly unique; Annie has a knack for saying just the right thing and then translating that visually. Catherine’s art captures life along the Down East coast in a way that I’m sure Gauguin would approve.

I’ve helped them create two Web sites over the years, most recently the current version, which launched earlier this year. Annie, naturally, created the design concept, since she’s really the only person who possibly could have done it justice. Throughout the process I’ve come to understand and appreciate Annie’s attention to detail. She wanted to be very precise with fonts, layout and proportion. I also admire her patience: the annie|catherine site is one of the first in which we installed a new kind of e-commerce system, and while we’re pretty good at it now, there was a bit of a learning curve at the time. Annie handled the bumps and bruises with more grace than I would have if the shoe had been on the other foot. If she could bottle that stuff up and sell it, I’m sure she would make a mint.

I’m proud of the site we’ve built together, and I’ve learned a lot about the creative process and the fine art of working together (I still have a lot to learn). I’m sure it would still be a Very Good Site without the work of Annie Darling. But I’m not at all sure that it would be a Best of the Web award winner.

About ten years ago, just as I was starting my own company, there were several Web firms vying for the attention of anxious business owners who in many cases were looking for their very first site.

One shop in particular was a darling of the local business community. They had a glittering office space in a conspicuous location on Congress Street, a dozen employees and a bright, shiny Web site.

The company principal bedazzled members of the business community with polished presentations laden with of buzzwords like “New Economy” and “splash page”. Surely he must be endowed with special knowledge!

But as is so often the case, the beauty was only skin deep. When it came time for this Web shop’s sites to perform, they were about as effective as a supermodel trying to run a hundred dash in high heels: they quickly collapsed.

I recall one site in particular built by this firm that had a so-called online registration system built for an annual conference event held in Portland. I say so-called because some companies who registered groups of conference attendees online arrived to find that they only had one set of credentials.

This was all very embarrassing to the conference organizer who had been left holding the bag after they had paid their Web shop for a site that had failed to deliver.

That firm eventually fell from grace, but the in many ways, the more things change, the more they stay the same. “Social media” and “we do mobile!” are phrases you hear today. Why? Because it’s what people want to hear, of course.

But talking the talk is one thing, doing the hard work is another. And when every agency in town is talking about how they are experts in [---insert random skill here---], by definition they can’t all be right.

And that’s fine with me. Because while they’re all racing to say they can make the flavor of the month, they aren’t doing a single thing to differentiate themselves and cultivate the savvy that will truly set them apart.

At Pemaquid, we focus on being first, being best, being no nonsense, being practical and focusing on a common sense approach to interaction design that works (and yes, we do social media and mobile – that’s the easy part). We don’t help our Clients to simply fish for a day. We teach them how to fish, while we manage the fisheries.

It’s working. 2011 is shaping up to be our best year ever.

And that other firm, the one that made the buggy registration system? They’re gone.

A lot has changed over the last several years in the world of Web. In fact, I’ve been around so long I can remember when people used to complain about Netscape Navigator 4 the way they complain about Internet Explorer 6 (and they welcomed IE6 at the time).

One encouraging thing I’ve noticed over time is that even the most popular – yet horrendous – design techniques have been extinguished by demands for a good user experience. If you don’t provide a good user experience on your site, you are doomed, regardless of how much market share you have or how much you throw into your online marketing. Just ask MySpace, formerly the top social network and which finally cleaned up its act – and templates – in hopes of regaining its once-lofty positioning.

Here’s a list of five of the worst design techniques which – thankfully – you rarely see anymore:

Flash Web sites. These were created by designers who didn’t understand the mechanics of the Web, and how to design for different browsers and different conditions. Their solution was to create a design they could completely control. This often had unintended consequences, like forcing site visitors to do something that was inconsistent with the way they did things on other sites. Flash sites also don’t allow you to bookmark specific sets of content (they exist at one URL), and their content isn’t accessible to search engines (or the assistive devices used by many visually impaired people).

Splash pages. There’s a reason why everyone put a “skip intro” link on these Flash-rendered devices – people skipped them! Usability testing showed this over and over. It’s like forcing people to watch your TV commercial before they can enter your department store. Fortunately, this annoyance seems to be nearly extinct.

“this site is best viewed with…”. A few years ago, that sentence most often ended with “…Internet Explorer, version 7 at a screen resolution of 1024 x 768“. What it really said was “Our Web designers were too lazy to figure out how to design a site that worked in all browsers. Web Standards? What are they?” Now, with Internet Explorer’s market share dipping below 50% - and falling – virtually no one takes this approach any longer.

Back buttons that don’t go back. Usually deployed by incompetent, or lazy, developers who placed a javascript or redirect on one page to automatically forward a visitor to a second page upon taking some action. When hitting the back button, the redirect was triggered, sending the viewer right back where they were. What these insensitive programmers failed to realize is that roughly 40% of all clicks on the Web are on a browser’s back button, so they were triggering a tidal wave of annoyance. Good riddance.

spacer.gif. Untold terabytes of bandwidth was sacrificed earlier this decade so that less practiced designers could shim up their table-based layouts with cells that contained nothing but but a transparent graphic, often called “spacer.gif”. Table-based layouts, however, made design upgrades more time-consuming and more costly. Now, CSS-based designs and themes are the order of the day and all those spacers are no longer needed.

These, and many others like them, have gone the way of the dinosaur, rubbed out by the incontrovertible need to provide a good user experience to those who visit your Web site.

Is your favorite design quirk not listed? Let ‘er rip in the comments.

No, this isn’t a post about the Web sites of Zoe Duchesne or Genevieve Morton, though I have now insidiously optimized this post for those names (see, search engine marketing isn’t hard at all). This piece has to do with the design of a particular class of Web sites. (No, not *those* Web sites. Get your mind out of the gutter!)

A “Supermodel” site is one that looks incredibly pretty, but will break a nail or a heel when asked to do anything “athletic” (interactive). The graphic design of a supermodel site actually gets in the way of a slick, sleek user experience.

Often, supermodel sites are built by agencies that have great graphic artists but who lack decent coding skills. And that level of talent doesn’t work for the Web; you need to strike a balance between visual design and code.

How can agencies avoid building a supermodel site? The key is to focus on the user experience and concentrate on the things a person (like a real-life supermodel, for example) should *do* when they come to a site (‘What would Heidi Klum do if she saw this page?…’). Thinking like that helps you stay on the right track.

Now I have nothing against supermodels; I like them as much as the next guy. But your Web site isn’t a supermodel. Ideally, it’s more athletic, like, say, Lindsey Vonn, Natalie Gulbis or Ana Ivanovic (see, there’s that SEO thing again).

After building Web sites for more than a decade now, I can say that when you boil it down there are basically four types of people who build most Web sites. And three of them are not the people you want monkeying with your pixels and data, not because they’re incompetent, but because their professional interests and motivations are at odds with what makes for a great Web site.

I submit for your consideration:

Susie Sunshine (The Graphic Designer) . Susie got into design because she likes to work with colors, fonts, layouts and patterns. Designers like Susie get involved in Web design because all her Clients, for whom she already does brochures, logos, letterhead and other collateral, ask her about Web all the time (this is also how a lot of so-called “full-service” ad agencies fall into Web design work as well).

But Susie and her ilk aren’t usually great coders – in fact, they often have an aversion to it – and let’s face it, that’s not what floats their boats. So she ends up building “Supermodel sites”: they look pretty, but they break a nail or break a heel when asked to do anything athletic (interactive).

For a full-featured interactive Web site, equipped with even a simple content management system, Susie’s not your gal.

Sir Codesalot (The Programmer). Sir Codesalot can write a script to do just about anything. He’ll make your Web site sit up, beg and fetch your slippers in the morning. Content management system? Check. Chron job synchronizing online and offline databases via XML export/import schema? No problem.

But programmers far too often create systems that only other programmers could love. They’re often too complex for most people to use easily, and ignore common workflows. To make matters worse, programmers are not trained as communicators, so you often get cryptic error messages or help text that’s unhelpful because it’s chock full o’ jargon.

Sir Codealot will not slay it when it comes to your site.

P.T. Bar-Nunn (The Search Marketer). Search marketers are really good at convincing their Clients to spend money on all sorts of voodoo that may or may not bring people to a Web site (my 80-20 rule of search marketing is that 80% of the practice is drop-dead simple; but that’s a blog post for another day). Then, P.T.’s Clients pay for a monthly report filled with all kinds of statistical metrics on how well – or poorly – they are performing… and justifying more search marketing.

When it comes to actually architecting a Web site however, many search marketers are mediocre – because their focus is on the marketing, not the build. And the problem with that is that even if your search marketing campaign is successful, you could end up bringing people to A Really Bad Web Site, and that’s kinda like being The Boy Who Cried Wolf. People will come to your site based on the search marketing, but they’ll leave once they get there – and they’ll never return. At that point, your entire search marketing budget will be wasted.

Search marketing should be considered when redesigning your Web site, but don’t treat it the marketing as more important than the site itself.

Mr. Clean (The Interaction Designer). An interaction designer takes the psychology of how people browse the Web into account when building a site. He’ll first try to understand who will be using the site and what task patterns they’ll follow when navigating through it. Then he’ll use the appropriate graphic design and programming to support the needs of people visiting the site. Other architectural issues, like the types of content (news, events, job postings, resource libraries, member directories, meeting minutes, products for sale) will be taken into account to fashion a content management system that’s best for the people visiting the site.

If you want a site that gives people a great user experience (and a great user experience sells products, by the way) then look for an interaction designer like Mr. Clean.

This year Pemaquid redesigned the site of the Maine HR Convention for long-time Client Law Publishers of Northern New England. The 15th annual event, held May 11-14, 2010 at the Samoset Resort in Rockport, Maine, had over 700 attendees and more than 150 HR Expo participants, making it one of the largest of its kind nationwide.

The Convention offers high quality education, creative events, and special camaraderie for Maine’s HR professionals. This year’s high-powered keynote speakers included former Maine governor Angus King and employee engagement expert Ryan Estis.

Over the years the Convention staff has relied more and more on Web-based information management to keep things organized as the event has grown. With the 2010 redesign Pemaquid developed or adjusted a number of custom content management solutions specifically designed to help keep things organized. Here are some of the site’s key features:

Custom e-commerce. The Convention uses a custom e-commerce app designed by Pemaquid. It allows an organization to register up to six people at a time and calculates their fee based on the number of days each registrant will attend, whether they are participating in the Convention Golf Tournament, and whether they are subscribers of other materials produced by Law Publishers. Registrants can elect to pay via credit card or be invoiced.

Custom event scheduling. With the new content management system we’ve rolled out, based on the Django framework, Pemaquid created a way for Convention staff to designate some of the items on the Events calendar as workshops. This in turn allowed us to offer additional services to registrants regarding their workshop selections.

Registrant profies. Each registrant was entered into the Content Manager, along with the dates they would be attending the conference. That enabled us to customize their user experience in a few important ways and gave Convention staff the ability to better manage registrants.

Workshop selection. Registrants were each given a username and password (which they could change) as part of their profile. This allowed them to log into a members-only workshop selection section of the site where they could choose the breakout sessions they wanted to attend. Registrants had the ability to change their selections at any time, and they could print out descriptions of each workshop they had selected for a “grab-and-go” itinerary.

Headcounts. Convention staff had access to a special page that tallied up the number of registrants who had selected each workshop, allowing them to plan room assignments based on the level of interest.

Resource library. Pemaquid designed a custom resource library which allowed Convention staff to upload Powerpoint presentations, PDFs and other materials to a password-protected section of the site where registrants can log in and download them. Resources are organized by category.

Powered by Django. With this year’s redesign, Pemaquid developed a powerful custom Content Manager built atop the Django framework. In addition to the special features outlined above, Convention staff can update the copy on any page of the site, and they can create new ones, assigning the URL for search engine optimization (“www.mainehr.com/convention/my-human-resources-page”). The Django framework, which is Open Source, enabled Pemaquid to very quickly adjust and create new content management tools for the Convention site tailored to their specific needs.

Rob says: I’ve been giving Jordan some required reading during her internship. Here’s a book report.

The Design of Everyday Things sounds like a subject we shouldn’t need to read a book about. Especially the people who are trying to do the designing.

The Design of Everyday Things by Donald A. Norman (also known as The Psychology of Everyday Things) talks about how poorly some things are designed.

Have you ever had trouble figuring out how to open a door? Or do you constantly turn on the wrong light switch even though you use it every day? Do you have a coffee maker, or stereo, or alarm clock that has so many buttons you don’t even know where to start? Maybe you’ve even… had trouble finding something on a Web site?

These are all failed attempts at usability.

The kicker: People usually blame themselves when they can’t figure out how to use somehting, but when things like this happen, it’s not because you’re stupid; it’s because the device or object was poorly designed.

In The Design of Everyday Things, Norman talks about all the things about human nature that aid or detract from the ability to come up with the perfect design. Everything from the user’s “conceptual map” in their head doesn’t match the physical layout, or the designer’s conceptual map, to the subtle signals we have become used to, such as, a door with a vertical handle is to be pulled out and a door with a horizontal handle is to be pushed.

As long as designers don’t ignore what people already know, and the amount they are capable of remembering they won’t have a problem. As the book goes on he goes on to explain how new technology is making some design problems, like buttons with too many functions, obsolete. He describes the various issues with everyday designs with real examples that he has come across, making it an interesting and funny read.

To anyone who is interested in learning more about Usability and Design in a book that isn’t painful to read, like a lot of the informational books out there, pick up a copy.

Yesterday, as the first cases of swine flu were reported in Maine, one of our Clients, Parkview Adventist Medical Center, contacted us to put a special notice about the outbreak on their Web site, as the number of phone inquiries started to skyrocket.

We handled it by putting a “pushdown” on their home page, which linked to a page with more information on swine flu in Maine. This is a common Web design technique employed by media sites such as CNN and MaineToday.com, in which you push down the normal content/layout and insert a call out on your breaking news.

Our goals in designing our swine flu notice for Parkview were to make it:

• easily noticeable, without wrecking the layout or conveying an undue sense of alarm
• easily updatable
• accessible to visually challenged site visitors

I decided to take a tour of other hospital Web sites in Maine to see how they were handling things. Here are screenshots, taken at 4pm today, of five Maine hospital home pages:

Parkview Adventist Medical Center

Maine Medical Center

Mercy Hospital

Central Maine Medical Center

Midcoast Hospital

What I found provided what I think are teachable moments on two subjects: Web site usability and content management.

Usability

When people search Web sites for information on “swine flu”, they are scanning for text links that say, um, “swine flu”. That’s the reason we used text in the Parkview notice and made the words “swine flu” the link to the page with additional information. As of this writing, Maine Medical Center and Mercy Hospital use text. At Central Maine Medical Center and Midcoast Hospital, they use graphics containing text.

Text in a graphic is not the same as HTML text. A proven characteristic of human behavior, banner blindness, demonstrates that people see HTML text more quickly than text in graphics. People tend to ignore graphics, in part because they are reading/scanning and in part because graphics are commonly used to display advertisements (that are usually irrelevant to the information they seek).

It’s interesting to note that both CMMC and Midcoast used a picture of someone blowing their nose. While well-intentioned, IMHO this creates mental static because such a picture could mean “common cold”, “runny nose” or even “handkerchief” and not necessarily “swine flu”.

Granted, in this case the difference is subtle, but think about your own user experience on these sites (we’d be interested in your comments).

Takeaway: If you want someone to read something, make it text.

Content Management

The layout of each of the swine flu notices give us clues as to how each hospital manages content.

Maine Medical Center – I’m almost certain they use a dynamic CMS to post News updates to the center column of the home page. I’m guessing they may have wanted to feature a swine flu notice in the Flash “marquee” (“Maine Medical Center: Centered Around You”) – and they may still do this, but the Flash is probably not part of the site’s CMS, is probably not easily updateable (and incidentally would not likely be accessible to the visually challenged).

Mercy Hospital - Again, I’m almost certain they use a CMS to update the “What’s Happening” section in the center column of the home page. I’m also fairly sure this CMS limits how prominently staff can display special notices. “Swine Flu” heading has the same color and visual weight as other sub headings in this section.

Central Maine Medical Center and Midcoast Hospital – both very likely use either a staff Web designer or contractor to create banner graphics as needed.

As we’ve mentioned, for Parkview our staff manually creates HTML pushdowns for special notices like this. At some point – for Parkview and for other Clients – it would be nice to add this feature to our custom CMS, the Pemaquid Content Manager. In the meantime, our manual updates are quick and inexpensive.

Takeaway – Content Management Systems should not impede your ability to make appropriate layout decisions. CMS’s do only what they are designed to do. If they are not designed to effectively communicate things like special notices, make sure you have access to a Web designer who can get the job done (that statement is not a back-handed criticism of the designers at other hospitals).

What do you think?

When designing all these way-cool, bubblicious Web 2.0 apps, and when working with frameworks like jQuery, it’s easy to get caught up in the ajax-y goodness of it all and forget about accessibility requirements.

One reason many Web sites don’t have a higher degree of accessibility built in is that accessible design is seen as hard work. It’s one more set of best practices to wrap one’s brain around.

Often, for designers, it can seem to take the fun out of things (though it doesn’t have to be that way).

Drew McClellan has a recent blog post on the subject that illustrates the point. He talks about the Cappucino framework, developed by 280 North and billed as a way to build “desktop-caliber applications that run in a web browser”. The 280 guys are even working on a drop-and-drop IDE, called Atlas, for creating Cappucino apps.

I haven’t tried Cappucino first hand, but the word on the street is that this system is incredibly stunning, and the folks at 280 North should be congratulated for the accomplishment.

Cappucino’s javascript-laden framework, however, still has a ways to go to address accessibility issues. Hopefully, the 280 guys – and others developing similar systems – will take the time and do the hard work necessary to make sure their creations have a high degree of accessibility built in.

We can do it without losing the Coolness Factor. Focus on simple elegance in your design, make it your business to understand best practices for accessible design, and you’ll be able to build sites that work with assistive devices and are also fun to use.

Technological solutions need to be simple – drop-dead simple – to be successful. If we want to make our apps accessibile to everybody, then we need to eliminate the learning curve.

Let’s pick on content management systems. There’s Drupal, Expression Engine, SilverStripe, Django, TextPattern… the list goes on and on.

They are all great tools for managing content. On the other hand, you need to have a bit of savvy to use them. Take Drupal, for example. It’s a powerful and flexible framework, but I wouldn’t turn it over to the marketing guy and walk away (I know, I used to be the Marketing Guy).

For decent interaction design for Everyman we can look to social networking sites. Facebook and Twitter are easy to use. In the case of Twitter, there is a very simple core feature set that’s fine for most folks, but just below the surface there are a ton of other goodies that experts can put to use when tweeting. That’s the hallmark of a killer app.

So when creating successful interaction design, start with simple – and keep it that way.