You Rarely Just “Do”

The genius of people is that they often react to what they experience. It takes a boring person to simply “Go to the beach”. The average person “Goes to the beach, and has a great time” or something similar. Notice the difference?

When you make something no one hates, no one loves it. – Tibor Kalman

Complacency should scare you. Reactions are part of how we communicate. Embrace this when adding a share option for your site. Facebook dabbles a bit in this idea by the binary option of “Liking” Facebook content. The problem with this on most person sites is that it leaves out a whole range of middle ground. The act of liking (or abstaining from) is not definitive. Does someone chose not to like a post because they had issue with it? Or just because they didn’t understand it? The absence of feedback in this case is ambiguous.

One of the features that our team was particularly proud of integrating a ways back was the Twitter feedback bar. You can see an example in use at the bottom of this post. Since including it on our theme, we almost instantly noticed a significant boost in tweets for posts. In contrast, options like “ShareThis” have reached a point on par with banner ads. At this rate, will we develop blindness to plug-n-play social media links too?

In the time since launching the original tutorial, a number of other sites have started to integrate options for meaningful reaction. This means that instead of just reading an article, you can now vote for tone and reaction. You can also see what other people think. Buzzfeed does more of the same.

But is it any good?

Don’t force people to become your billboards. Give them a platform to construct their own way of sharing your content, complete with a full range of reactions. We include negative options in the Twitter feedback bar available on post pages. Saving face is stupid if the result is publishing crap. Negative feedback is just as useful as the positive. Better to have someone tell you via tweet than by wondering where all the traffic went.

Traffic is a Byproduct

Don’t let your site fall into the trap of limited billboard response. It betrays the type of interaction dedicated fans will use. I don’t stop reading a blog if one of the articles sucks. Readership is rarely that fragile. Use the reactions to your advantage. These are the types of share actions that benefit in more than one way. First, the link is shown to more audience. Second, you receive meaningful feedback as to the quality of what was shared. Winning all around.

For your next project, give it a thought. You’ll see realistic responses, and get one step closer to substantial engagement rather than just unfeeling evangelism.

The Internet is made up of many common and similar experiences. We use the same social networks, blog templates, and tools to connect with each other. We embrace trends and find ways to start using new technology right away. However, there is something special about a letter that someone wrote, there is the human touch. This human touch can also be created and experienced online. It’s the authentic experiences that truly succeed.

The key is to tell stories that are true to the brand and its message. The design and feel of the site should be unique to what the site is about.

Making This Happen

It’s much easier to tell the story of your own brand online, than someone else’s. But when working with clients, it becomes more of a challenge. The most important thing is to understand who they are and what they represent. Immerse yourself in their product or service and be sure to ask lots of questions. The best thing is to do a careful study of their existing design system. Ask them for copies of their business cards and brochures, see how their signage is displayed on the storefront, and anything else. Typekit has opened doors by allowing brands to continue to use their typography systems on their websites and thus the last year we have seen lots of interesting results produced.

Remember, social media isn’t always the best answer and its not necessary for everyone. In order to create an authentic social media platform, there has got to be a solid understanding of the system along with lots of hard work and dedication to sustain the conversation.

Creating an authentic web experience, also doesn’t mean that you have to use textures, ribbons, and hand drawn type. It simply means to stay on brand or further develop the brand in the same direction. It isn’t at all about the trends, but if those trends fit the brand then they can work well.

Some Quick Case Studies

Gene’s Sausage Shop and Delicatessen
This site just feels right. When viewing the photos of their actual shop and reading about their story, the design of the site and the language used match their brand. The typefaces used are mixed and similar to the actual signage in their shop. Furthermore, the paper bag texture and jagged lines in the sidebar and the footer replicate the way you would expect to be taking your sausage and goods home with you.

The Whale Hunt
Jonathan Harris has developed a website completely unique to one story. He incorporates every detail of his own real life experience into the navigation and overall interface. There are different ways to navigate through the story, metadata that provide context, and unique typography that allow you to navigate through the thousands of photos. Read more about the interface design of the site right here.

Another example in terms of portfolio websites is Gage Salzano. He takes the opportunity to just not show the finished project but to bring you along with him through his process.

Closing Thoughts

Websites can’t be just about page views and advertisement conversion rates, it’s got to be about creating interactions that are honest and beautiful. These authentic experiences simply work the best. They allow people to connect and get excited.

They leave people wanting more and engaged which leads to an audience and following being formed. It’s also important to remember that by simply having an amazing website doesn’t mean everything. The authentic experience must be continued through the printed design work, the physical spaces, and the business model itself.

Have examples of your own to share? Post a comment below and share with the rest of us.

This is an interesting point that came up in a recent project I’m working on at One Mighty Roar. The site’s original design had a top navigation area that held all of the standard Twitter, RSS, and Facebook links. The last link’s image was an envelope.

The envelope has become a universal way of visualizing email. Just like shopping carts translated over from the real world, symbolizing electronic mail with an envelope just makes sense. Over the past few years however, email has come to be a delivery platform for more than simple Person A reaches Person B.

What’s in the Envelope?

As it turns out, the context of an email icon is determined by the surrounding icons. I’ve put together three examples without any text clues below to illustrate the point.

Subscribe

When grouped with RSS and subscription options, the email icon becomes another way to reach a feed. This could be via newsletter or email updates.

Social

When grouped with Facebook and Twitter, the email icon often becomes a “Share this via email” button.

Contact

When grouped alone, the email icon stands as a “Here’s how to reach us” standard. Most people would expect this link to bring up either a contact form or mailto link.

Check your Indicators

Realistically, icons won’t always be grouped so logically. With everything above in mind, take a look at this next combo. What might this image’s email icon do?

This brings up an interesting point to UI design. Icons aren’t always straightforward. The same issues that the email icon deals with can translate over to Twitter or Facebook links. Are you linking to your Twitter profile? Or offering a way to share the page via Twitter? There’s a difference between action and reference links.

In the example above of Twitter and Facebook, the reference variation would be links to the Twitter and Facebook accounts instead of the action variation where the icons are links to share.

I think it’s become important to include visual cues that show the exact nature of icons. This could come in form of a “Share This via…” section header for social icons, or even breaking free of the typical icon-based presentation for common site tasks.

I’m interested to hear if anyone else has run into a similar UX issue with their designs. How did you solve it? Drop us a comment below.

Banner icons are from the always-fantastic Social Network Icon Pack via Komodo Media.

A recent round of client work at One Mighty Roar has got me thinking a lot more about successful interface design. Specifically, how can we build pages that send a clear message without losing aesthetic or professional edge? The question turns out not to be “How does it look?” but, “What is it saying?”

Dazzling graphics can lose the thrill over time, but a clearly worded page has lasting power.

I came to a realization. There are very few group interactions with the internet. It’s rare for more than one person to use the same computer and browse a website together. There are obviously times when everyone in your office gathers to watch a cute cat video on YouTube, but you get the idea. This one-to-one relationship has a few important implications:

1. The site can typically speak directly to a single person rather than an entire organization. Instead treating the visitor like a faceless representative, they are now an individual.
2. You can start by addressing individual needs, then (if needed) the needs of the visitor’s group. This means that a site could have “You and your team will benefit” as opposed to “Your Company”. This is a subtle change, but as we’ll discuss later, it can pay to appeal to individual ego.

You only have to care about one person at a time. That’s a powerful direction.

Interaction is Personal

A one-to-one interaction with a visitor is low risk. With nobody is watching over your shoulder and rating your interactions, there is no pressure to fake understanding. It’s like asking your best friend to explain something to you — they’ll be direct and conversational. With this type of relationship, a visitor’s ego and reputation can stay untouched. This is why blogs are such a great way to learn new skills, the process is judgement-free and failing doesn’t hurt.

In recent years, the trend has been to replace the standard “Welcome” to a more personalized “Hello”. This is a step in the right direction. As Darren Hoyt recently wrote about in “Designing with Social Skills“, interfaces should be designed for humans.

A large company probably won’t want to greet visitors in the same way that a designer does on his portfolio. There’s a level of professionalism that needs to be maintained, and the larger the entity represented, the more important the tone. I firmly believe that it is possible to show professionalism without sacrificing a personalized conversation with the user. Not every visitor is going to be a potential investor with an MBA. But if they were, would it even matter? Business professionals are people at the end of the day too, after all.

Readability Matters

Jason Fried said it best with “Copywriting is Interface Design“. A button’s label has just as much (if not more) impact as the design of the button itself. In the one-to-one relationship that visitors have with a site, phrasing and reading level can be considered convienences of an interface. This is why tools like After The Deadline are so important with web copy. These kinds of services consider the implications of grammar on comprehension, and not just technical mistakes.

It’s always suprised me how more service-oriented sites don’t include a “reading level” button right next to the font size options. Isn’t it just as important to understand the content as it is to see the letters clearly? The message of “If you don’t understand this, you shouldn’t be here” is a barrier to interface design. It’s a free excuse to ignore real problems.

The “About Us” page is not a collegiate thesis paper nor is it a first-grade picture book. The problem is that of those two extremes, sites are more likely to fall into the “professionalism” trap of overdesigned sentences. On the other hand, when’s the last time you wished a site used bigger words?

How to Chart Readability

Readability of the English language can be measured using a number of tests. For example, the Flesch-Kincaid rates readability by grade level and is calculated using a combination of words, syllables, and sentence structures. The Automated Readability Index is another popular method.

Try This: Google Docs has a few of these measures built in by default, but for a quick test try using this online tool. Put some of your own work to the test. Are you overdesigning sentences?

Wording Can Be Selfish

When I’m on a website, I don’t care about “The Site Policy”, but I do care how it affects me. Headings and copy can afford to be selfish, because that’s probably what they care most about. Be self-centered on behalf of the visitor, and you’ll be surprised at how well the results come out.

Lessons from FAQ

The average Frequently Asked Questions page is a great reference for this. One of the reasons that FAQ pages work so well is because they phrase problems in terms of the user. Rather than “Billing Policy”, the FAQ becomes “How will I be billed?” Wording is concrete and in relation to the user instead of some abstract idea. It’s all about you.

Let’s use Beanstalk’s service documentation as an example. They make heavy use of personalized language to present common questions. Would their documentation be as effective without it? Most likely, but the real added value is much more subtle. The Beanstalk folks have shown that they realize people (not robots) use the service. These are people that would rather get things done instead of feel a false sense of professionalism from decoding overdesigned sentences.

If an idea can be done in a single sentence, why not?

What About You?

What’s your take on successful interfaces? Assuming a page layout is successful, how do you keep communication clear? If you have feedback or suggestions that you’d like to share on this, please let us know in the comments below.

Resource & Further Reading

For those interested in a little more.

1. After The Deadline
2. Understandable Interface Principles from the W3C
3. 30 Ways to Improve Readability
4. Focus on Goals, Not Actions
5. Writing User Friendly Content

The gradient has become a universal crutch. Hypocrisy, we know, considering parts of this blog’s current design. Gradients have a habit of decorating since the design trends introduced by Web 2.0 gloss. The starburst badges and text reflections may have faded into obscurity, but the brash gradient stuck it out.

Please don’t read this as a “you’re doing it wrong” post, because there have been far too many of those in the design community lately. Consider this a demonstration of alternatives with a low risk invitation to try it out.

You don’t need to quit gradients completely. This is just a call to reconsider if they are necessary in each design. Rather than taking a bland design and making it more “exciting” with gradients, why not play with the typography? Adjust the page hierarchy! Bring in some rich photography!

Learn to Leave Out

Many web design blogs periodically give tutorials guiding through the Photoshop process of page design. It’s given a weird impression that gradient-based designs are a universal way to making brilliant web pages. I’ll be the first to admit, we’re guilty of writing posts that ended up being read in the wrong way too.

The majority of bloggers are not trying to force conformity, but the posts leave often leave out the discussion of judgement. In one of our “Five Minute Upgrade” series posts, one of the biggest misunderstandings was from an assumption that all of the techniques presented should be used together. Web design is not a cookie cutter checklist of design trends to include, it’s also about learning what to leave out and arrange whatever remains. WeFunction had a great article about these marks of quality in their post “How to Spot Quality in Web Design“.

You’re not doing it wrong, but you can do it differently.

Fundamentals Stay in Style

You don’t have to be an elite art school graduate in order to design well, but it does take some breaks from the typical “How to Design an Awesome Site in Photoshop” in order to learn the technical stuff. The technical aspects of design don’t go out of style. Font kerning and color theory are not trends that will look dated a year from now, but the average Photoshop tutorial will. Many of the trendy design techniques from a couple years ago look laughable by today’s standards.

Meaningful Design Elements

What do designs without gradients focus on? These are the types of design that would shine in black and white. But even that’s vague, so what specifically can you focus on designing the hell out of? I’ve included a few points below that I think are important in distinguishing between decorating and design progress.

Typography

There are a limited number of web-safe fonts available, but typography is more than just which typeface – it’s about how that typeface is used. You could play with italics, uppercase, and bold versions of web fonts and get interesting mixes. If a design calls for more font diversity, you can always replace some headings with text as images or use JavaScript replacement options like TypeKit.

Visual Hierarchy

If a certain element is important, how do you let people know about it? Hierarchy can come in form of color, size, weight, or location. If text is large and at the top of the page, it’s likely an important piece. Decorators like gradients have a hard time expressing hierarchy without the help of other concrete design elements.

The Economy of Line

This is an interesting concept I first learned about in Jason Beaird’s “The Principles of Beautiful Web Design” a few years back*. The concept is simple: If your design keeps its primary shape with only line tracing, it’s good to go. It’s a simple test for your design, and it helps identify layouts that rely on subtle changes in order to designate visual areas.

You can see a simple example of the test in action below on Art In My Coffee, a Tumblr run by Jina Bolton and Meagan Fisher. Incidentally, both of them have site designs with typography to die for.

Gradients alone are not a good way to differentiate between sections in a web layout. Because gradients do not have any rigid boundaries, they can reinforce existing design elements, but they shouldn’t be the primary indicator.

*If you haven’t read Jason’s book already and are interested in the type of formal design that most blog design tutorials gloss over, I highly recommend you get moving! It’s the type of gem that gives tangible concepts that carry across everything you design.

Subtle is Powerful

What if a gradient makes sense to include? Is there a more effective way to use them? Try practicing subtlety.

I believe that the best designs are those that take some time to figure out. This doesn’t mean in a “I’m confused” usability issue way, but rather a “This looks smooth, but I can’t quite figure out why” sense. The atebits product page for Tweetie (soon to be Twitter) is a good example of subtle gradients in action. The menu goes from a solid white of #FFFFFF and ends up at a slightly grayer tone of #E7E7E7. The transition is simple, subtle, and doesn’t demand extra attention.

We’ve reached a point with CSS3 where basic gradients can even be simulated without images. The button style Google uses in a number of its web applications is actually built using three different bands of solid colors. Doug Bowman did an extensive writeup explaining the button design process that’s well worth a read.

Your Challenge from Here

Your challenge (optional, of course) is to make a small sample of design without the use of gradients. Dribbble has demonstrated how a small piece of design can speak volumes for the big picture. Even though we haven’t managed to land an invite yet (subtle hint), we can still take some inspiration for this exercise. Post a link to what you come up with in the comments below! We’d love to see what you can create.

Some of you probably clicked that link ready to defend the good name of social media, and you deserve commendation for your efforts. You can put the pitchforks down for a moment, because this article is not what you think. I love Twitter as much as the next person, but it’s the buzzwords around these types of sites that we can do without.

You’ve probably seen tweets testifying to the “money-making” or “brand-building” power of social media marketing. As sites like Twitter, Flickr, and Facebook grow in popularity, it seems like the term “social media” is tossed around a lot as an instant solution to any internet problem. What does it really mean?

Social media is just a buzzword until you come up with a plan. Using a word is easy — coming up with a plan past “register for this site” is not.

Get to the Meat

One Mighty Roar will never hire a social media consultant, because the title describes nothing tangible. “Social Media Consultant” is an easy resume byline that can be based on as little as a few years of uploading photos to Facebook. We believe that a person who genuinely understands social media presence looks good on more than just paper, and won’t need a title to prove it.

Social Media is to online marketing what “Strong Leadership Skills” is to the resume. Neither really describes the value, and both deserve a series of follow up questions to get a real answer. When used alone, it’s often a very eloquent way to say nothing.

Say Something Concrete

This isn’t to say that you should avoid using the term social media. On the contrary, you should feel free to use it as much as necessary to explain a plan. The term only becomes a problem when used as an abstract answer to a concrete problem.

Let’s see an example of this. Suppose a client says they need to find a new way to survey customers. How could you respond?

• The Vague Answer: We’ll use social media.
• The Concrete Answer: We can set up a polling contest across Facebook and Twitter. Fans and followers can respond to the survey. Once a week three people will be randomly selected and given the featured prize.

Even though the concrete solution isn’t the most innovative, you hopefully get the point. Instead of offering a psuedo-answer by way of buzzword, a tangible example is given. Notice how the term “social media” doesn’t even need to appear.

If someone told you that they were using the internet to help their business, wouldn’t you ask them how?

Coca Cola and Social World Travel

What does good social media look like? Coke recently launched the Expedition 206 campaign. The expedition is a year-long promotion based around the world travels of three “Happiness Ambassadors”. Along the way, the ambassadors actively update Twitter, upload videos, and engage with the community following them.

This is innovative. The campaign takes everything social media has to offer, combines in one place, and does so with a purpose. Even though Coke might not get direct income out of it, the promotion and hype around running such a cutting edge campaign is sure to build brand value. Is this the type of campaign that was pitched with buzzwords? Probably not.

Communicating vs. Impressing

I would much rather have a client understand the proposed ideas than be dazzled with concepts that sound fancy at first, but require more explanation later. At One Mighty Roar, we feel that a basic explanation is at least worth the effort. We’ve found it damaging to assume that the client would rather see us work “internet magic” without explanation.

I also know from experience that there are plenty of clients who would love to hear the first answer from the above example. New and cutting edge words have a way of exciting people, but hype is not a sustainable relationship. In the long run, especially as people get more aware of these services, the term will become as useless as “using the internet”. People will know it’s not that simple, and demand something real. It’s better to lead the charge of tangibility now than wait until the first real “What do you mean by that?” question that leaves you stumped for an answer.

Use with Purpose

Unfortunately this over-generalization has made the rest of us well-intentioned folks feel guilty about using the term. Some even avoid it at all costs for fear of feeling amateur. The pond isn’t ruined just yet. All it will take is some thoughtful project planning instead of buzzword dropping.

What do you think?

Further Reading

If you’re interested in reading more about social media vocabulary and effectiveness, try any of the links compiled below.

1. Social Media Buzzwords Explained (Part two is linked in article)
2. Social Media Consultant or Snake Oil Salesman?
3. Social Media Explained in Plain English
4. Seven Social Media Consultants That Deliver Tangible Value

This post is supported by Webdesigner Depot, a popular web design blog covering tutorials, design trends, blogging and inspirational posts. You can visit WDD at webdesignerdepot.com and follow WDD on Twitter @designerdepot.

Getting a user to visit your site is only step one. If you’re interested in maintaining a long-lasting relationship, it’s going to take some commitment.

By now you’ve probably seen showcases of well designed registration forms, but that’s really only half the story. Effective forms are actually the result of a tag team effort. This will be a look at the big picture relationship between the pitch and registration form.

For any potential new user, a site will need to do two things:

1. Pitch: Show how an account would be useful to the user
2. Register: Show how to get started

Simple on paper, harder in execution. Fortunately for us, there are plenty of good examples out on the internet. Let’s start by answering the question on any new user’s mind:

What Am I Getting Into?

Users will generally sign up for useful services, especially when there is a free account. Helping them realize a site’s usefulness is your job. They are less likely to sign up for an account simply to see what a site is. Even though these kinds of internet explorers do exist, they do not represent the majority of the web population. Before a user commits, they must see a tangible example of what the site is about.

The recently redesigned MailChimp overview is a prime example of how a service can effectively show its usefulness. In the MailChimp pitch above, new features are shown as groundbreaking advances even for existing users. Functionality is broken down using catchy titles and links for further explanation. This page is a buzz machine for a whole slew of features that make the service worthwhile. Once a visitor reaches the bottom, registered users are invited to log in while new users are given a chance to join the bandwagon.

Another common practice is the “Take a Tour” option before registering. This is a simple way of breaking down key features, and answering any questions the visitor may have.

Make the Pitch Relevant to Me

Tumblr is a great example of an important piece to pitching user registration. They provide one of the best testimonial and features page on the internet. What makes their pitch so great? It can be tailored to specific types of people.

They start by asking a good question: Why will I love Tumblr? Not everyone will have the same answer, and because of this, they’ve added a filter. A dropdown box at the top allows potential users to flip from “Why everyone loves Tumblr” to “Why a specific group loves Tumblr”. Doing so will bring up features and statistics relevant to the selected user type.

This is an awesome approach to users. It embraces that selling points for photographers will not be the same for musicians. One pitch does not have to fit all. Putting everyone into the same general category may actually do more harm than good.

Fix Last Minute Doubts

An overly-complex registration form can be scary. Even if it would only take a minute to complete, some users won’t even give that time if it seems too long.

With MailChimp’s account registration, the decision to register is made easier by a positive review in the left column. The words “Completely Free Account” and “No Credit Card Required” are made bold to send the point across.

Take notice of what this screen doesn’t do. This screen doesn’t sell the features; it only communicates the zero-risk to get started. MailChimp makes the assumption that if you’ve reach this screen, you’re already interested and just need the final push to commitment.

Only Include What You Need To Start

Simplicity in form design is beautiful. If the only information a user needs to get started is an email and password, the registration form should only include an email and password. Let’s take a moment to admire the minimalism of Tumblr’s sign up page:

Once a user registers, there’s plenty of time to come back and fill in the rest. Assume everyone is busy. Making these fields part of the initial process does not value the user’s time. Something like a Twitter username is (in most cases) not critical to the registration process.

Gowalla’s user registration follows the same trends. Oversized text boxes make the form seem simpler. New users have to fill out a minimal amount of information to get started, and none of it involves thinking. Personally, I don’t consider adding name fields to a registration form as an extra step. It’s usually the first setting I update after registering, and having it up initially saves searching later.

Remember the Context

Required fields should be determined by the type of account being created. Sweet is a Twitter application that has been in private beta for what seems like a very long time. Even so, they have a well designed form for interested visitors. Since this is a Twitter application, it makes sense to include a field for the visitor’s handle.

Integrated Accounts

Another registration option that has surfaced in the past couple years is creating accounts through existing social media accounts. API’s like Facebook Connect and Twitter enable websites to create new users with the credentials of existing accounts.

One of the main benefits to this method is that a user only has to link the account to a site in order to have full user priviledges. Registration is cut down to a two or three click operation. Your user’s time is valuable, and those extra seconds count.

What Comes Next?

Web designers and internet enthusiasts have a hard time remembering the “average user”. Contrary to expectation, the average user does not enjoy exploring options and intricacies of new websites. In fact, often times a “regular user” will need some sort of direction in order to get involved.

Assuming the registration process goes well, what happens next? Provide a path for users to follow once they have completed the form. Don’t stop once they have activated an email account. Suggest something new! A simple “Thanks for registering, now you should try one of the following actions…” will make sure that users get engaged quickly, rather than leaving their new account to gather dust.

When Email is All You Need

Account registration is not the only way visitors sign up for something. Newsletter notifications are a great example of low committment registration. In the case of newsletter registration, the pitch incentive has a different focus. The user has to be interested in what you’re doing, rather than what you are selling.

An iPhone user, for example, may subscribe to the newsletter of their favorite developer to keep up to date with recent releases and news. Companies like TapBots have made signing up for their mailing list as simple as providing a valid email address.

Coming Soon

“Coming Soon” pages have some of the most direct email sign ups, mainly because it is the only action available. The pitch for these types of pages is often in the mystery, and not actually functionality. For more examples, read through Smashing Magazine’s coming soon showcase from a few months back.

Private Betas

For email sign ups that pitch functionality, the best examples come from private beta sign ups. Postmark is an upcoming email delivery system made by the folks at Wildbit. Recently the site launched a private beta and is in the process of accepting applicants. The splash page offers visitors a chance to put their name on the list and read more about the service.

Thanks for Registering

That just about covers the fundamentals of effective pitch and registration design. Don’t count on users signing up without proper incentive. Try to anticipate selling points and display them as part of the registration process. Until the user presses submit, they haven’t committed. Improving completion rates is essential to creating a selling product.

We’ve mentioned Tumblr a lot because they understand simplicity better than most user-driven sites, but they certainly aren’t the only ones. Do you know of any other sites that do a good job of keeping the registration process simple? How about sites that present the product well? Share your links and thoughts in the comments below.

Further Reading

Interested in continuing your reading on effective form design? The articles and showcases below have plenty more resources and designs to browse through.

1. Web Form Design Patterns: Sign-Up Forms
2. Superb Examples of Form Design
3. 40 Eye-Catching Registration Pages
4. Sign Up Forms Must Die
5. CSS-Based Forms: Modern Solutions

Post Supported by Web Designer Depot

Webdesigner Depot is one of the most popular web design blogs in the world. It covers tutorials, design trends, blogging as well as inspirational posts. It’s run by Walter Apai, a web designer from Vancouver, Canada. The blog is a great resource for both beginners and advanced designers looking to expand and improve their knowledge. The site is visited by Fortune 500 companies and is used as a reference by many design schools. Visited by almost 2 million readers per month, WDD is a prime resource for both graphic and web designers. Visit WDD at webdesignerdepot.com. Follow on Twitter: twitter.com/designerdepot. Subscribe to RSS feed: webdesignerdepot.com/rss.htm.

Conversion, return on investment, loyalty, referrals; all of these site metrics are incredibly important to any successful website, and a site that sells product(s) is no exception. In a world (wide web) that’s muddled and overrun with sub-par, poorly designed shopping websites, it’s hard to break away from the mold.

The key is to be informed — not only about designing a better shopping experience, but making that shopping experience more informative and enjoyable for the most important person, a potential customer! In my experience, I’ve noticed five main types of online shoppers. They’re much like normal brick & mortar shoppers, too. So, how do you make the best experience possible for these five types of people?

Bargain Hunter

The bargain hunter is just like shoppers you’d see in a supermarket. The one’s who hold up all the lines with their unorganized coupon binder, sets of buy five, get one free items and their rebate stuffed receipts. The same goes for web buyers. They regularly search sites like Retailmenot and Cheap Stingy Bargains looking for free swag or coupon codes to use.

How to help a Bargain Hunter

The simplest way to accommodate the bargain hunter is to enable coupon/promo codes during checkout. Most recent shopping cart software will ship with this functionality (or at the very least, have plug-ins developed that will allow it). You can promote these codes by submitting them to sites, sending out emails with the code and giving a code in an email after a purchase has been made — this will also encourage them to come back.

Window Shopper

Have you ever been walking down the street and saw something you just couldn’t live without (then you saw the price)? That, in a nutshell, is the window shopper. Whether they are shopping for a new LCD TV, dress, car or jewelry, this shopper can sometimes get talked into buying something over the course of a few visits.

How to help a Window Shopper

A great way to sell to the window shopper is to describe your products as detailed and precise as you can. List any benefits, positive uses and other things that might be useful to know. That way, the consumer can’t turn down a product that can help them in so many different ways.

Review-Centric Shopper

Popular sites like Amazon and Newegg use a star rating system that allows customers to rate a product after purchasing. Some people say to take these reviews with a grain of salt, because they might not have any experience outside of the product they are reviewing. Personally, I like reading these reviews because it gives me a wide range of previous buyers that have used the product I might buy.

How to help a Review-Centric Shopper

Obviously, the best way to make your site usable to the review centric shopper is to add a rating and/or commenting system on your products. Along with the coupon codes, many shopping carts will come with the functionality or at least have some plugins that can achieve this addition.

The Big Spender

Ah, the big spender. They buy the biggest, most expensive products every time they go out. They will walk by an area of a store and just throw things in their cart without ever thinking twice. They shop at the most expensive department stores and buy only name brands.

How to sell to a Big Spender

My opinion on the big spender? They are great for your site stats and revenue! On every product detail page, try adding a block of “Related Products” or “Add on Accessories” with a link to add it to their cart right then. The temptation to buy more products is there and the big spender just might take the bait.

The Comparison Shopper

In my shopping experiences (online and off), there are usually always two types of products; the name brand & the off brand, with the off brand typically cheaper. When looking at these, the price is usually the deciding factor in which one someone purchases. But what if you are selling the name brand? Can you rely on the name alone to sell, if the off-brand is the same product, just repackaged? In the world’s current economic state, I’m beginning to think a name might not be enough anymore.

How does all this relate to online sales, you might ask? Well, online shoppers are just like offline — they want a solid product at the cheapest price without sacrificing quality. So, you need to prove to them that your product is worth their investment and is a better choice than your competitor’s product.

How to sell to a Comparison Shopper

Firstly, add a rating and review section on each product detail page. Seeing past customer feedback can change someone’s opinion rather quickly. Secondly, try adding an area for testimonials that you can administer. This way, if you get some astounding review from some well known sources, your credibility will be raised instantaneously. You can always style the testimonials to make them stand out as to catch user’s attention, too.

Go Forth and Sell

There you have it. The five main types of online shoppers and some tips to sell to each of them. With a bit of research, creating a user-based shopping experience isn’t very far out of your reach. As a result of your work, you will notice more customer interaction (ratings & reviews), more sales (due to trust from testimonials), and return customers (promo codes and referral leads). Why not take some time and spruce up your shopping experience? Your customers, and your wallet, will thank you!

Do you have any other personalities to add to this list? Be sure to share them in the comments below!

I’m going to be bold for just a moment and assume that you spend a fair amount of time at the computer.

If you pile on hour after hour in front of a screen, maybe you should take the time to make sure you’re as comfortable as you could possibly be – which is where ergonomics comes in.

Ergonomics is the science of designing the job, equipment, and workplace to fit the worker. There are two reasons to have an ergonomic setup – health and productivity.

With that said, why not see what you can do to tweak your work environment and consequently live a longer and more productive life?

The Checklist

There are plenty of articles floating around that can point you in the ergonomically correct direction, but in order to make things easier, here is a quick checklist based off some of those readings. The sources are linked to at the end of the post, for those of you that feel so inclined.

Chair

• Feet should be flat on the floor, ankles at 90 degrees.
• Thighs parallel with floor and knees bent 90 degrees.
• A few inches of space between the back of your knees and the edge of the chair.
• Elbows at 90 degrees when using keyboard.
• Sit back as far as possible within the chair, it will force upright posture.

Desk

• Your armrests should act as an extension of your desk (elbow height = desk height).
• Keep the most used items within reach on your desk, minimizing reaching up or down.

Monitor

• Give your monitor some personal space, put it 20″ to 30″ away from your face (an arm’s length).
• If your monitor allows tilting, aim for a 10 to 20 degree angle, which will help minimize neck movement.
• Center your monitor in front of you, to avoid unnatural neck/body twisting.
• Keep your head in a neutral position, so only your eyes have to move to see the screen, not your neck.
• Your direct line of sight should be closer to the top of the monitor, to avoid bending your neck upwards.

Keyboard and Mouse

• Relax your hand(s) and fingers.
• Arm holding mouse should be at a 90 degree angle, allowing for full arm movement.
• Wrists should be as flat as possible when using the keyboard. (Get rid of the keyboard stands)
• There have been mixed reviews about soft wrist rests (like those gel pads), although studies from University of Berkeley, California noted that they can cause unnatural angling of the wrist and can sometimes even pinch blood vessels.

Odds and Ends

• Eye Strain - According to Cornell’s Ergonomic guide, “Every 15 minutes you should briefly look away from the screen for a minute or two to a more distant scene, preferably something more that 20 feet away. This lets the muscles inside the eye relax. Also, blink your eyes rapidly for a few seconds. This refreshes the tear film and clears dust from the eye surface.”
• Stretching - If you have four minutes and a desire for your coworkers to look at you funny, you might want to consider stretching before beginning your work day.

Sources

• Workspace Planner – Punch in your height and get exact measurements to help you set up your workspace.
• Cornell Ergo Guide – A comprehensive look at everything ergonomic from Cornell University.
• CUergo: 10 Tips for Mouse Use – Another gem from Cornell, rethink how you use your mouse.’
• Workstation Assessment Checklist – A very thorough checklist to run your workstation through.
• Comfortable Computing – A whole wealth of ergonomic information.

“What should my hourly rate be?”

One of the hardest parts of start out into full or part time web design is setting fair prices. It’s a topic that we’ve tackled before in our week-long Pricing Bootcamp series. Since then, we’ve received a lot of email asking the same question. We decided to revisit the pricing discussion with a survey on hourly rates.

This survey kept things simple by only including two fields: one for the hourly rate, and another for additional comments. In the interest of a global economy, I did not ask for location or nationality. In today’s web industry, a firm miles away in Germany can be just as competitive as the one next door.

The Results

Thanks to the 107 readers who took time to respond (original survey live on Google Docs). All respondents were asked to submit their rates in $USD for consistency. The charts below break down the responses into seven price brackets.

Please keep in mind that this was an informal survey, and the results shouldn’t be considered definitive.

What Can I Learn From This?

The most valuable information to take from this survey? An idea of what not to charge. Assuming you have the skills required, charging less than $20/hour for your services is not as competitive as it may appear. In order to compete with the professionals, a rate starting at $50 would be better. For the largest price bracket ($25 to $50), the average rate was $35.

Influencing Factors

Many of the designers priced below $25 also commented that they were either students or in a country where dollar value was strong. It’s also important to keep in mind that while this survey has trends, it only asked for a price: not specialized skills or quality. I suspect that many designers have not yet settled on a solid hourly rate, and charge lower than they reasonably should in order to be safe.

Additional Considerations

Many of you left additional comments that brought up some great points to consider. I’ve selected a few of the best for discussion below:

Underestimating Time

Estimating a project price using your hourly rate is good for estimates, but be careful not to underestimate the work involved. The longer you spend on a project, the lower your hourly value becomes. It’s concerning when a client asks for hourly rates but not estimated time. As we’ve said before, efficiency shouldn’t be punished by a low hourly rate.

“Often a project gets bid by a total with my estimate on hours. If I estimate badly, my hourly rate drops. [It] can go as low as $50 but this happens very rarely. $80 is more common, once I calculate ALL hours, incl. email exchange with client, my own learning curve on the project etc.”

Your Service is Valuable

Clients can be treated well without a bargain price. Low prices prevent growth and invite lower grades of clients. Price like you’re worth it.

“If you always undercharge, clients will continue to expect low-ball prices. Price what you truly think you’re worth from the beginning.”

Clearly Define Project Scope

Scope creep is a terrible thing. Communicate project goals before agreeing to lock in a price.

“Scheduled payments or lump sum totals for projects. Clients must clearly communicate and sign off on all major decisions. Line items must be defined.”

Take the Follow-up Survey

I’ve created a second survey (including location) on Google Docs to continue this conversation. Results are public (see spreadsheet) and hopefully as more people read this post, the responses will give a solid second opinion. Interested to see responses? Take the follow up survey now.

Now it’s time to hear from you. What points do you consider when determining hourly rates? Do certain situations affect your rate, or is it constant? What’s a reasonable rate for your location? Leave your response below.