I’ll keep this simple:

1. Your full address, hours, and phone number should appear on EVERY SINGLE PAGE, please. Don’t make me hunt for this information, since this is what at least 90% of your visitors are hunting for. Jam it into a sidebar or footer, but do NOT make me click a separate link or search like a truffle pig for something so very basic.
2. Put a map on your contact page. Don’t just link to it, put the damn map there. This is extraordinarily simple, and full instructions are here, but suffice to say, enter your address on Google maps, click the Link option in the upper right corner, and copy and paste the embed code that appears. Don’t make me click through to see the map.
3. Stop using Flash. Just stop. Resist the urge. It doesn’t make you edgy. It annoys the hell out of me. And any of your users who are trying to pull your site up on their phones. You can accomplish cool image changing effects in other ways, and if you’re playing music, that needs to stop too. Save the ambiance for your restaurant. Flash is also exquisitely bad for search engine optimization; people searching for a specific dish or words and phrases that would otherwise appear on your site may not find them if the search engines have trouble grabbing them. They’ve gotten better at searching Flash, but it’s still nearly impossible to drop someone accurately to the right spot in your Flash movie, so it just frustrates people.
4. Make your full menu available. With prices. And incredibly prominently. The 10% of users who already know where you are and when you’re open are coming to check your menu. If you have several menus, list each of them. If they change often, that’s fine, but keep it seasonally representative at the very least.
5. Make your menu available in a manner other than PDF. I know this one is a toughy and it’s unlikely to be a change anyone adopts in the near future. Restaurant owners are busy people who barely have the time to update the menu in PDF form, which is how they get it printed, to worry about converting it to HTML or making it otherwise available on the site in a way that looks half decent. But doing this the right way is better for search engines, mobile users, and people who know that opening a PDF is a sometimes-Sisyphean ordeal that causes you to curse the gods. Don’t put us through that. We want to plan our meals or see if you have something we like. Make it easier on us.
6. Only show fantastic food photos. Pay a photographer to get it right if you must, but do NOT post cell phone pictures from your Blackberry that you took on the patio at 11pm. This reflects poorly on your presentation even if the dish looks fantastic in person, and there’s no need to give people a specific reason NOT to show up. Also, you need not over-emphasize photos. While fantastic photos can really help push someone the right direction, you don’t need to overwhelm them. This isn’t McDonalds. In any event, make sure they’re great quality photos: well-lit, not overly compressed, and of something appetizing and plated well.
7. Make sure you list things that set you apart. If you offer dietary considerations for diabetic, gluten-free, kosher, vegetarians, or vegan dieters, mention that. It’ll help in search engine results, and it’s invaluable for people who are looking specifically for that information and are unsure if you have anything that works for them. Consider whipping up an online menu that showcases some of those dishes; people in those communities will be extremely appreciative.
8. Give us a little personality. Clearly state your purpose, your passion, and what you do to deliver and set yourself apart. A simple explanation with a few well-written bits about how much you love making great food for people can get your visitors energized and ready to make a reservation.

These are pretty universal, simple to apply tips that can enhance the experience for visitors who need a very specific piece of information typically very quickly: don’t frustrate us by burying it, forgetting to supply it entirely, or by designing the site so horribly that it’s nearly closing time when we finally track down your hours.

WELCOME TO THE WORLD WIDE WEB, AN INTERACTIVE MEDIUM IN WHICH SCREEN RESOLUTION STATISTICS ARE TRIVIAL, BROWSER VIEWPORTS ARE VARIABLE, AND SCROLLING BEHAVIOUR IS A STANDARD. THERE IS NO PAGE FOLD. LOVE YOUR SCROLLBAR.

The buzz on Twitter from “designer” types appears to be a knee-jerk “ZOMG YES SO TRUE!!!111one” while responses on the site’s reddit thread have been more measured. I especially appreciate the following comment, by one fletcher_t:

Well of course it depends on the context of what the site is providing… but there is indeed a fold and if you’re ignorant of that, may god have mercy on your soul.

Let’s be perfectly clear: There IS a “fold”. For the uninitiated, the “fold” refers to the literal crease in a newspaper. Editors recognized the importance of catching their reader’s interest “above the fold”, because the likelihood a reader will bother to look under the fold is lower as a whole. Readers who might not typically read the sports section, for instance, will notice a story above the fold if it’s of interest to them. If they’re just flipping past as they always do, they’re far less likely to look beneath the fold.

The assertion made by the “no fold” site is that, because technology has provided us with infinite page lengths, we should design our pages accordingly. We can space things out more, we can use larger print and increase readability, and we shouldn’t be so concerned with what lies above the fold because users will scroll anyway! We were on a roll there up until that third point, weren’t we?

The reality is that the science of user attention is a tricky one, and more of an art than anything. Heat maps and eye-tracking studies frequently show huge dividends by presenting the initial page-load in a clear, concise manner, with well delineated courses of action visible to the user and readily accessible. Users will absolutely scroll, if you’ve given them a compelling reason to believe anything of interest lies beneath the fold. Users are fickle types, though, who scan quickly, look for large visual cues, and make an off-the-cuff and perhaps misinformed decision to bounce away from your site in an incredibly short amount of time, if you don’t captivate them instantly. To capture their interest, you simply must pay attention to the content that resides above the fold.

With Google’s release of Browser Size the other day, Tech Crunch mentioned that Google saw a 10% increase in the number of installs of Google Earth, simply by moving the download button up 100 pixels. By placing the call to action and primary focus of the page above the fold, users were far more likely to follow through. Naturally, this will vary from site to site. Amazon.com has a rather long page, which they use to show multiple categories of products they think you’ll be interested in. Their primary feature and what they hope will have the most success is always at the top, though—a compelling enticement to scroll further and see what else they got right.

Understand, this is by no means an argument for cramming everything of any importance above the fold. Not even a little bit. (And I understand that the no-fold site is likely directed at those types—but does anyone actually try to force entire sites above the fold anymore?) Whitespace should be well utilized, large print is totally acceptable, and designers shouldn’t force pages to fit into any idea of a “standard” vertical viewport. CXPartners even argues that including less information above the fold can encourage users to scroll more, arguably by reducing the utility of the site to the point where they’re forced to scroll.

It’s not my claim the no-fold site is implying you should ignore the above-fold design or disregard its design entirely, but the cheeky site title and its assertion that there is NO page fold degrades the importance of how you construct your pages for those first 700 or so pixels. Encourage your users to scroll, not by reducing utility but by increasing interest. Facilitate this behavior by keeping large, blocking horizontal lines and blocks at bay (advice from CXPartners’ piece) and providing clear paths downward. Ensure that users see that additional content exists further down. But don’t forget that your site’s first impression is above the fold.

Browser Size allows you to enter any URL  and see an overlay of visible browser space broken up by user demographics. Specifically, you can see what percentage of the Google-using populous would be able to see what portion of your screen on an initial page load. Apparently, this is based on typical browser dimensions for users, and not screen resolutions outright. (Taking into account non-maximized browsers.)

I understand that Labs products are by their nature not fully baked, but this one lands on the other extreme: half-assed. Perhaps the overlay is a rough attempt at being cheeky, but to me, it’s ugly, and its jagged, hand-drawn lines reduce its utility, rather than amping up its “cute” factor. The percentages aren’t even consistently rendered—it’s like My First Photoshop session here.

This isn’t to say that the concept isn’t a good one. I just wish they let this one cook a bit more before releasing it.

Browser Size | Google Labs via TechCrunch

It’s no surprise then that they’d take the time to get surveys right. Netflix (like most companies trying to make a profit) has a need for constant feedback from their customers. They want to know how their distribution system is working, where there may be bottlenecks, and other things like how their new instant streaming service is performing. Instead of producing staid, time-consuming, multi-page affairs, they send an email with a single question.

In my most recent survey, that question read “How was the picture and audio quality?” Simple enough. The real stroke of genius lies in how the user is asked to respond: Three links are displayed, each with a different quality option: “The quality was very good”, acceptable, or unacceptable. You click the link and your survey response is sent. Done. That’s all there is to it.

The survey requires exactly one click to respond to. Users aren’t asked to login, fill out demographic data, attempt to remember details they aren’t likely to, or even read anything to qualify their answer. They are given three relatively unambiguous options and clicking the link from within the email submits their response.

Since not every company has the luxury of being able to boil their customer feedback loop down into simple multiple choice questions, let’s look at a few key points almost anyone can replicate:

1. Keep it simple. Remember that users value their time, and while they may like to let you know what they think of your company and how you’re doing, they may simply not have the time. Focus on a few measurements that can be easily procured and ask just a couple of questions. Consider anything else an imposition for the sake of a casual survey.
2. Don’t require a login. If your users have accounts with you, don’t require them to login to complete their survey. Include a hash tag unique to the individual survey in every call to action link and compile your results from that. Every additional step a user has to complete is another hoop that will encourage them to close their browser and forget about responding. Remember that when you consider adding a confirmation screen, for instance.
3. Provide a call to action. Even if you can’t find a way to boil a survey down into a completely self-contained piece like Netflix does, provide the user with an initial call to action. Have them answer a single question up front, and present the user with an optional means to supply more information based on their response. In the Netflix example, the user might be prompted to explain the issue if they mark the quality as unacceptable.
4. Require as little data entry as possible. This goes back to items one and two: every next step or request for additional information is an opportunity to frustrate your user. In order to ensure the highest quality data, don’t give your users those opportunities to jump ship.
5. Allow users to opt-out or set email frequencies. Don’t abuse users with surveys, or you’ll find they’re no longer users. Provide an unsubscribe link that does the work for them so that they can go back to enjoying your service and so that you don’t frustrate them.
6. Keep the design simple, too. More than just the format of the survey itself, consider paring the design down dramatically. If you’re emailing the survey, the user shouldn’t have to activate images to make a selection. A logo, a border, and some simple elements that tie your corporate color scheme in are acceptable, but making the entire email HTML-based is yet another barrier for users to hit when they may have otherwise completed your survey.
7. Provide context. Users love to know they’re making a difference. While it may seem obvious, just mentioning that you’re issuing the survey as a means of proactively enhancing their experience can go a long way. Feel free to let some personality come through, but don’t forget to keep it simple overall. The less users have to read, the better your response rate will be.
8. Say “thank you.” This may seem like a no-brainer, but since the user will be directed to a page upon clicking your call to action/survey response link, make sure you thank them and provide them with options to navigate back to your site if they so desire.

Even with these tenets in mind, you may find it difficult to break out of the mold and build surveys based around such narrow data points. Consider it an exercise in analyzing what really makes your customers happy and what makes your business tick. Think a bit outside the box and consider: If you can only ask your customers one question about their experience with you, (a multiple-choice at that!) what would it be? Remember that you can rotate questions around of course, but start there.

Finally, if you’re reading this and not sure how to implement this sort of survey system on your own website, by all means please contact us over at Synapse Studios. It’s what we do!

With the exception of the penultimate “new Facebook”, they have had to rollback or significantly change tack from their initial position of “this is new and you’re going to like it,” forced  instead to listen to their users, post a mea culpa and attempt to save face with the global press and the blogosphere collectively rolling their eyes at each new foible. TechCrunch has an idiotic post about how when Facebook listens to their users, God kills a kitten for bowing to the masses and “designing by committee”. Robert Scoble backed this up with a misguided treatise about how Zuckerberg is on track to score billions from these changes and how they shouldn’t/wouldn’t start listening to their users. I call bullshit.

Scoble cites the fun designer quip: “if you asked a group of Porsche owners what they wanted they’d tell you things like “smoother ride, more trunk space, more leg room, etc.” He’d then say “well, they just designed a Volvo.””

This isn’t that. This is as if Facebook simply removed the steering wheel from the car and told you you’ll go farther now that you can’t steer.

What Facebook did here was not revolutionary. It was not bringing about hard change we needed. Instead, they stripped away piles of features their users had come to like and depend on. They replaced them with broken stand-ins, like the quiz/application-spammed “stream”, with no way to reasonably filter the nature of what was coming in. Sure, you’ve exposed me to “more” of the “social graph”, but at great cost to the signal/noise ratio that made Facebook so very useful to most people. When you make a product markedly and objectively worse to use and interact with on a daily basis, under the backwards-minded notion that the new way will help users connect “better”, you’re going to frustrate nearly EVERYone. And rightfully so.

This is not a question of design by committee. It’s interesting to note that, while excessive, there’s been a lot of chatter on how Google designs, if not by committee, then by cold, hard statistics. Douglas Bowman, Google’s former lead designer, recently left Google because of their engineering-centric approach to design: essentially to (arguably) overengineer the user experience and back every design decision with quantitative analysis, facts, and figures. He goes on to cite how Google tested 41 shades of blue in what must have been one hell of an A/B test—the point here is that the “committee” was essentially the aggregated experience of the user base, whether they knew it or not. This is fundamentally different than assigning 20 or 30 key “stakeholders” who can significantly alter the course and outcome of a project on their personal whims. Likewise, Facebook “listening” to their users is closer to the Google approach of implementing user feedback—saying it’s “design by committee” is a false dichotomy.

Further, telling me that Facebook is slimming things down and cutting features “for my own good” is like telling me that new keyboards will no longer come with an “E” key in order to simplify the user experience—I’ll just have to launch Character Map and manually copy and paste my vowel from now on, but look! Fewer keys! This is a perfect example of cutting off your nose to spite your face.

What’s stranger still to me is that the example Scoble cites is a complete non-sequitir: he basically suggests that Facebook is moving closer to copying FriendFeed than Twitter, and that we’ll be able to use it for recommendations and the “social” or “peer-based” marketing. Point of contention: the “old” Facebook design did absolutely nothing to stop exactly that. It was simply a different, more powerful interface that gave users more of what they wanted and better controls by which to express those preferences. Further, the *new* Facebook does nothing to better deliver that.

Even Mark Zuckerberg has trouble making a compelling case for the changes. Quoth Z:

We’re also going to make some changes to the home page. The new home page will let you see everything that’s shared by your friends and connections as it happens. [Previously possible with the Live Feed option on Old Facebook.] It will also provide you more control by letting you choose exactly who you see among the people and things you are connected to. [Previously possible with the Old Facebook sliders and "more" or "less" about this person option.] You can decide you no longer want to get updates from your old friend from high school who you rarely talk to, or you can filter the stream to only see updates about your family members. [Both previously possible.]

So what’s changed? They’ve consolidated four purpose-driven feeds into one amalgamated clusterfucky stream. They’ve *removed* the capability to specify the type of events you’d like to see the most, and thus, which things should remain visible for you the longest. The advantage to the old system was dynamic, intelligent exposure. Old Facebook would do its level best to show you what it thought was most important and make sure those things were persistent and visible. It used algorithms. It did NOT just spew an unadulterated, stream-of-consciousness of everyone around me with no means to filter it. Enter New Facebook. The world is better when you can’t turn down the volume, right?

Facebook has announced that they are, in fact, integrating some user feedback into the new design. Among these changes are things to mitigate application updates (something that Old Facebook already had, since you could mute a given application’s update), photo tags (sometnoshing that Old Facebook accomplished well enough with the Photos feed), more Highlights (something I’m not sure anyone really wants), and moving the Friend Request and Event Invites to the top right corner. You know, where they were on Old Facebook.

Subjective, design and interface-oriented changes that don’t significantly improve any user’s experience do not enable me to be better in touch with my “social graph”  or heart chakra, for that matter. Please, let’s not confuse good design with an overly simplistic, featureless future. And let’s not just full steam ahead, ignoring the pleas of millions, simply because Mark hath seen the glory of the coming of the Lord. Facebook’s future is still bright and buzzing with potential, but they haven’t gained any ground by seriously smudging the window to my social graph.

Responding to Your Feedback | Facebook Blog via TechCrunch
10 Things That Suck About the New Facebook | HTMList
Why Facebook has never listened and why it definitely won’t start now | Scobleizer

Design firm Squidspot has published a very cool and useful Periodic Table of Typefaces. They’re grouped roughly by “family” and “class” groupings, and ranked roughly based on their popularity from several different font ranks, though they’re loosely grouped in order to enforce the aesthetics of the table.

This will be very useful for anyone trying to play the mind-numbingly difficult Deep Font Challenge game. My personal favorite is Frutiger, followed very closely by Myriad. (Naturally, I also love and respect Helvetica and all its gifts to the world—I mean, it’s the only typeface to have a documentary produced about it, and is listed, quite fittingly, as the Hydrogen of the table.)

Periodic Table of Typefaces | Behance
Deep Font Challenge | via iLT

In trying to link my new account from the store with an online account, it prompts for a security question. I select “mother’s middle name” since things like “what’s your favorite restaurant?” are ridiculously inane as I’ll almost *certainly* forget what I entered, which will promptly be followed by feelings of wanting to stab someone. And then I enter ma’s middle name: marie. Nevermind that the security answer is CaSe SeNsItIvE, (because, clearly, I should also be forced to remember if I proper-cased my answer) it goes ahead and tells me:

Great. Now Barnes & Noble is calling me a liar AND insulting my mother. Swimming performance there, kids. [Really, the error message reads as follows: Your Security Answer is not formatted properly. A Security Answer must be 6–15 characters long, spaces allowed. Remember that Security Answers are case sensitive (i.e., "Dickens" is not the same as "dickens").]

The moral of the story? Don’t enforce ridiculous limitations on a security question if the user’s correct answer might violate those limitations. And don’t insult your customer’s mothers. (CrunchGear blogged about this too, some two weeks ago.)

I agree with almost all of them, like Clicking on the logo should take you to the home page—this has become a convention most people expect on a given site, along with highlighting your current location in the navigation bar. There are a few, however, that I might nitpick, such as always underline links, except some navigational cases (unless he means either on hover or the regular state; I note quietly that the links on his blog are text-decoration:none and only underline on hover).

Either way, it’s a great, quick read with some things to always keep in mind when building a website, so take a look and subscribe.

50 Tips to A User-Friendly Website | Designing Interactive

Related articles by Zemanta

• 50 Beautiful And User-Friendly Navigation Menus (web2list.com)
• FeedbackArmy.com – Test The Usability Of Your Site (killerstartups.com)

Josh’s latest post goes into some detail reviewing the usability of the Old Navy site. It’s a great article, but I liked his article on red as an error state even more. (In it, he notes a specific example where an expired coupon displayed in red when it should have instead been greyed out, since the user themselves did nothing wrong, and grey brings less attention to the no longer useful data, rather than more undue attention to it.)

Josh has a lot of great advice pertaining to both the nuanced and big picture issues that designers face when developing intelligent, innovative and clean user interfaces. Do yourself a favor and add him to your feed reader promptly.

Designing Interactive

The system being merit based really helps the community entirely moderate itself. Ask Metafilter (and MeFi in general) is a great community because it’s ruled by moderators who filter the signal-to-noise ratio to something entirely reasonable. But it’s simply a core group of four people, one of whom is the founder, and they were trusted to understand how things are done on MeFi. Making the community control of SO merit-based is similar in some ways to how Wikipedia is governed. The community members who clearly care the most get the most power, but in a way that should be self-policing and self-balancing.

Most importantly, the site’s purpose is to provide easy access to clear, concise answers to your programming-related questions, without having to subscribe or buy in or worry about the accuracy of the answers. Because the site is highly editable in that your posts can be edited by highly-enough ranked mods, we’ll hopefully see a holy grail of sorts for answers to all the very obnoxious problems we run into day in and day out.

Check it out:

Stack Overflow