Thursday, April 25, 2013

Technology Trend: Adobe Creative Cloud

For web designers and developers, using cloud-based software has become the norm. Our days are spent creating Google Docs, sifting through DropBox, screen-sharing for collaboration and Skyping on client calls. One of the design community’s longtime tools, Adobe Creative Suite, has ascended into the cloud with their new software, Adobe Creative Cloud. This is a trend among computer software companies, which allows them to reach their users in an entirely new way. Cloud-computing changes the way we interact with one another, collaborate, share documents, and communicate.

Photo courtesy of

What is cloud-computing?

Cloud-computing is Internet-based software that allows users, from any place or device, access information, store documents and collaborate as if they were working on their local computer. Wikipedia, defines it as "Internet-based computing, whereby shared resources, software, and information are provided to computers and other devices on demand, like the electricity grid."

What are the advantages of cloud-based software?

Accessibility and Collaboration
Cloud-based software allows users to access software from anywhere on any computer and lends its hand more easily to collaboration between clients and coworkers. Employees are able work together in a collaborative environment no matter what their location. A recent survey by Frost & Sullivan found that companies which invested in collaboration technology had a 400% return on investment.

Ease of upgrading
Floppy disks and the need to purchase an entirely new version of software to reap the benefits of the latest upgrade is a thing of the past. With cloud computing, software developers are able to release new software behind the scenes and perform server maintenance without users being hassled.

Photo courtesy of
Document Control
Cloud storage companies, such as Dropbox and CrashPlan, increase accessibility across interoffice file storage and allow users from all locations to easily gain access to documents.

Less commitment with subscriptions
Investing in software that costs an upward of $1,000 can be risky, especially for new users, temporary users and hobbyist. Having subscriptions allows all types of users to access top-of-the-line software without the pricey investment.

Below is a list of the top five application categories that are migrating to the cloud. Additionally, check out this infographic for predictions on how cloud-based software is shaping the future of technology.
  • Conferencing and collaboration
  • Storage
  • Messaging
  • Office/ productivity suites
  • Business process applications
As our favorite tools start migrating to the cloud, we are seeing drastic changes in how we work as a team to collaborate. As web professionals, it is our responsibility to keep up on these trends and take advantage of the emerging tools and software that advance how we communicate and produce meaningful web and user experiences.

Thursday, April 18, 2013

What's the tone of your website?

What sort of personality does your website have? No, this is not a trick question. Think about it. When you read your website are you "hearing" the voice of a professional wearing a suit? Maybe a woman leaning back in her chair wearing jeans? Maybe that guy down the hall that can always make you laugh? Or maybe you don't sense a consistent voice at all. Maybe you get one tone from the home page but a completely different tone from the interior pages. Hmmm... this question is sounding more valid by the second isn't it?

Before you start writing your website you should give some serious thought to the tone of your writing. That tone should be based on three key factors:

1. Your established brand: If you have a brand statement you probably have the tone well-defined already. Do not vary from that tone. Consistency is the key to brand marketing.

2. Your mission: Even if you don't have a brand statement or established identity, your organization has a purpose. Your tone should reflect that purpose. If you are a fitness company, your tone should be energetic and even motivating. If you are a funeral home, you should have a soothing, comforting tone. Yes, those are obvious examples but every company has a mission that can be supported by the right voice. 

3. Your audience: Market research is a great tool when establishing a voice for your organization. The more you know about your audience, the better able you are to communicate to them. To hit their hot buttons. To talk in a way that hits home with them. Don't have the time or budget for full-blown market research? Build Audience Personas and let them guide you. Learn more about Audience Personas.

Let's step back for just a second. What exactly is voice and tone in writing?  

I think Grammar Girl (one of my favorite resources for writing dilemmas) says it best:

Voice is the distinct personality, style, or point of view of a piece of writing or any other creative work. Voice is what Simon Cowell is talking about when he tells "American Idol" contestants to make a song their own and not just do a note-for-note karaoke version. Many musicians have played "The Star-Spangled Banner," for instance, but there's a world of difference between the Boston Pops' performance and Jimi Hendrix's, even though the basic melody is the same.

In writing, the New York Times and the New York Post may cover the same story, but their headlines are likely to be quite different. For example, when Ike Turner died, the New York Times had a straightforward headline: "Ike Turner, Musician and Songwriter in Duo With Tina Turner, Dies at 76"; whereas the New York Post went for a bad pun: "Ike 'Beats' Tina to Death."

Let's continue with that example and examine a common website headline: About Us. Nearly every website has an About Us page and if any page communicates your organization's style - it's this one. 
  • A company with a no-nonsense, conservative tone might say:
    Learn more about us.

  • A company with a professional but casual tone might say:
    Check out the people behind the scene.

  • A company with a sarcastic, humorous tone might say:
    Pull these facts out next time you want to bore your friends and family.
Three titles for a page with the same type of information, but three very different voices. Each of those examples is equally valid because they are targeted to a different market.

How do you find your voice? 

You start with those three key factors I mentioned earlier. You might also need to do some brainstorming - anything from listing adjectives that describe your organization to reading your competitor's materials (so you can make sure you stand out). You should read things that appeal to your market to get a sense for the tone and voice that attracts them. There are lots of methods to finding a voice and what works for one group, may not work for another. Here's a good article with some exercises to help you find your voice in writing.

Now that we've got you thinking, we encourage you to step back and do some reading - of your own website. Need help finding that voice? Ready for a rewrite? Let us know, we'd be happy to help.

Thursday, April 11, 2013

Spend time on content at the beginning for a stronger website at the end

When people are ready to update or create a website, they often want to jump straight to the design. Colors, logos, pictures, layout - those are the fun parts of website design. (We think so too!) Here at TBH Creative we recommend a different approach. One that pushes the design further back into the process but ultimately makes that design stronger. When we start a website design project we start with content - specifically Site Architecture and Wireframes.


Site Architecture is the map of your website. Literally.

Content planning. Information Architecture. Site Map. No matter what you call it - the site architecture is the backbone of a good website. At this stage you are not thinking about design or copy. Instead, you are carefully considering your goals for the website and what type of content you'll need to meet those goals. There is software out there to help you create a site map, but you don't need any technology for this stage. In fact, a lot of people like to use index cards or large flow charts for brainstorming.

Here are some great tips for site organization from Smashing Magazine:
  • Organize content according to user needs, not an organizational chart or company structure.
  • Give pages clear and succinct names.
  • Be sympathetic. Think of your typical users, your audience personas, and imagine them navigating the website. What would they be looking for?
  • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
  • If you can’t succinctly explain why a page would be useful to someone, omit it.
  • Plan the architecture around the content. Don’t write content to fit the architecture.
  • Keep everyone on point with constant reminders of the true goals of the website.
  • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.
Read the rest of this article on site architecture.

Now lay out the content in a wireframe.

A wireframe is not a design layout. A wireframe does however let you take all that carefully considered site architecture and put it into the basic framework of a website. It helps you start to consider the flow for your user. It helps you assign appropriate prominence to content. A well-designed wireframe will become the guide for the design and content phases to follow. And while it may seem counter intuitive, taking the time to create wireframes will save you time in the development process.

You and your design team might create wireframes with pen and paper:

More likely, you'll use software to come up with something that meets your needs:

Creating wireframes are a bit of an art and a bit of a scientific process. Each designer does them differently but the goal is to create a site that meets your objectives and provides a structure for your architecture. Read one web designer's process on The Fine Art of Wireframing for a more in-depth perspective on the design process.

Want to learn more about Wireframes? Check out this article: Ten Simple Ways to Make Wireframes More Useful.

Thursday, April 4, 2013

Form Validation: A Quick Win for Website User Experience

When the simple task of completing an online form is difficult, users are likely to become frustrated; however, effective form validation will guide the user step-by-step when encountering errors and minimize their frustration. Form validation is the process of notifying a user of any errors when entering data to submit the form. This is a crucial part of the user experience when filling out a web form and allows a user to be immediately notified when a mistake is made.

Successful form validation typically does the following:
  • Keeps the user notified on the status of form
  • Alerts the user of errors immediately
  • Uses help hints to indicate the format of the required information

Validation Techniques

There are two primary approaches a web developer can take to implement form validation.

Error-only validation
The error-only approach allows the user to fill out the form entirely before being notified of any mistakes. After the form is submitted, the error page indicates which fields were missing or incorrect type of data. In the case of a long form, this can be a frustrating process for a user. This article from Smashing Magazine explains in detail why error-only validation is not the best approach.

Inline Validation
The other method is inline form validation. This is popular among sign-up forms and simple web forms. Inline form validation notifies the user of mistakes as they are entering data. This method keeps the user informed and engaged, while reducing the amount of errors and creating a better user experience. In addition, the primary goal is for users to complete the form and a less frustrating experience can lead to higher conversions. Check out this article about the benefits of inline form validation from the blog A List Apart.

Statistics reported in the article for inline validation are telling:
  • Errors: Decrease by 22%  /  Success Rates: Increase by 22%
  • Satisfaction rating: Increase by 31%
  • Form completion times: Decrease by 42%

Examples of good solutions for form validation:

Wufoo Account Creation Web Form

Wufoo Account Creation Form
This form has plenty of great things going on. The required information is noted with a red asterisks, there is help text that informs the user the purpose behind the required data and the format requirements, and the form tells you what section you are on by highlighting the input box.

Harvest Free Trial Sign-up Form

Harvest Free Trial Sign-up Form
This form requires a valid email address and URL to complete the free trial process. As a user is entering data, the form indicates required information in red and notifies the user of any errors along they way.

Mint Web Sign-up Form

Mint Web Sign-up Form sign-up form indicates which fields are experiencing errors. In the example above, the user must enter a valid email address, password, and zip code to complete the form and the form validation does a great job of notifying the user of errors.


  • Show what is optional vs required. (asterisks for required)
  • When error is received, use helpful hints to give the user additional tips on how to correct the error
  • Left align your labels for easier reading
  • Add placeholder text in the input fields. This gives the user additional examples of the format requirements

Helpful Resources:

Smashing Magazine Web Form Validation Best Practices
Web Form Design: Showcases And Solutions


Subscribe to this blog