Category Archives: Web Design

Mail Bag Q&A: How do I make my website accessible for visually impaired individuals?

In this this mail bag Q&A, a person who runs a company focused on senior home care asked, “how do I make my website accessible for visually impaired individuals?”

People with visual impairments may use screen readers to listen to a website’s content instead of trying to read it. It is important to make sure text is presented within the code instead of images and special components as much as possible. Should text be saved in an image or video, one step to provide accessibility is to provide a transcript. Additionally, since a visually impaired user may not be able to see images, it is important to use ALT tag in the code so that a description of that image can be provided for a screen reader. Another major accessibility concern is making sure links are clearly labeled so that a user knows where the link leads. For example, clearly label a link as the name of the page it should link to instead of using words like “click here” or “click this”.

Generally, the majority of accessibility relies on the group or individuals responsible for creating content to create duplicate versions of content that are accessible. For example, if creating an image or video, there needs to be a text or audio version available as well. Here’s a checklist of general accessibility guidelines provided by the W3 Consortium, an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.

Mail Bag Q&A: How do you create an easy to use website?

In this Q&A, we have a question from a person wanting to know, “how do I create an easy to use website?

Creating simple and easy to use websites is built upon a concept called Hick’s Law. It states that the more choices you give a person, the longer and less likely that person is to make the choice you desire him to make. With that idea in hand, an easy to use website minimizes the number of choices you give a person at any given time in the navigation of the website. In order to achieve this, one must decide what messages and actions are the most important ones to them for display on the website. Sorting these messages and actions by level of priority in relation to one’s business objectives is the best way to figure out how to design a website. An easy way to think about this is with the concept of lead generation web pages with high conversion rates. The best ones historically have shown to use very limited navigation elements, if any at all, combined with a large bold message and minimal form elements to collect a prospect’s information. Another easy and recognizable example is Google.com. It’s core objective is to get people to search, so they present a very clean and minimal user interface with the search text field boldly placed in the center of the web page.

Ignore These 3 Tips To Expose Your Website to Malware

WordPress Malware Infections on the Rise

Photo by Ivan Arce

In a little over a month, over 100,000 WordPress websites have been hit by malware infections due to outdated versions of the Revolution Slider plugin according to SC Magazine.  With the rapid spread of this threat, it is more important than ever to make sure you website is hardened against these attacks.  If you fail to do so, you are at risk of having your website taken down by your web hosting company, being black listed by Google, and unwittingly spreading malware to your customers.

Unfortunately, over the past couple weeks we have spent a fair amount of time helping people who have been hit by attacks like this.    One particular case involved a company with 22 websites hosted on one web server that got hit by a malware infestation that moved through every single website and infected 705 files.  As a result, the hosting company immediately turned off all 22 websites!  While we were able to help fix the problem, the company would have had a much better couple of days if they had spent a few pennies on prevention instead of many dollars on the cure.

In today’s post, I’m providing 3 major tips that you can use right now to help you stay safe and prevent a potential catastrophe from happening to your online presence.

Continue reading

The Value of Good Design and Standing Out with Animated Emails

The value in good design is that it can separate your brand from the rest of the pack. Going above and beyond by just a little bit can provide the perception that you are leaps and bounds ahead of your competition, which can lead to disproportionate rewards in your favor. Disproportionate rewards are seen throughout the business world for top performers via the Pareto Principle and in actual studies like this one by the prestigious business consulting firm, McKinsey & Company, where the top 33% performers were found to be compensated 66% higher than the next group of performers under them.

Another great example is how Apple’s design concepts fetch a premium dollar in the tech marketplace. In the web design world, I came across a nice example of how a virtual meeting company called UberConference helps differentiate themselves by sending an animated “thank you” email after sign up instead of the typical boring static email.

Animated HTML Email

I think this email makes a great example of a small way you can make a difference with your designs that pack a large pop when it comes to creating a positive perception of your brand. While most companies go about their business sending basic transactional emails, UberConference takes advantage of this touch point with people to create an unexpected experience that is more likely to make people take notice and remember them. It is in the most basic sense, Seth Godin’s Purple Cow.

On a closing note, here’s another graphic featured in one of Asana’s announcement emails visually demonstrating one of their new features instead of simply just talking about it.

Asana Animated Email

Have you seen another example of an animated email that got you to stop and take notice? Share it below in the comments section.

Why You Needed to be Mobile-Ready Yesterday | Infographic

Some interesting numbers showing the meteoric rise of mobile devices and why your website needs to be mobile-ready.

why-you-needed-to-be-mobile-yesterday

Download the PDF Version

Great Aesthetics

How Great Aesthetics Make the Perfect Web Site

Photo courtesy of Paul Bica.

With the advent of do-it-yourself web site tools, there has been a rapid increase in the number of web sites live on the Internet today.  The trade off is that many of these web sites look hacked together and lack the level of quality a design professional would bring to the process.  Many companies justify this trade off due to the perceived lower cost of implementation.  Unfortunately, many businesses fail to realize that these hacked together web site solutions do great damage to themselves when it comes to a web visitor’s perception and willingness to trust the web site and the company as a whole.  By foregoing great aesthetics, these businesses miss out on an opportunity to build trust, convey ideas and emotions that connect with their audience, and make a bad first impression that has lasting impact.  Here’s how.

Great Aesthetics Build Trust

Lack of trust is one of the biggest barriers to eCommerce, online relationships, and interactions. Research has found many details about how aesthetics affect users.

“Singh and Dalaj (1999) found that the home page creates an initial impression not only of the company’s Web site but also the company itself [13]. First impressions are critical in establishing on-line relationships.”

“Karvoven (1999) found that design quality was among the features that enhanced the feeling of trust [13].”

Researchers have captured comments such as: “If a Web site strikes me as beautiful, I will gladly give away my credit card number”; and “If it looks pleasant, I just trust it.”  Karvoven’s international research (2000) with Swedish users found that users often made intuitive and on-the-spot decisions to trust a service provider when shopping online [12].

Karvonen and Parkkinen (2001) suggest that using high-quality, well-chosen photographs generate consumer confidence.

Lightner (2003) found that overuse of graphics damages perceptions of professionalism.

Wang & Emurian (2005) found that simplicity and consistency facilitate accessibility and navigation and these are characteristics of a trustworthy site.

Flanagin & Metzger (2007) found that offering information and news relevant to advertised products may enhance perceptions of credibility.

In today’s crowded market, it is more important than ever to establish that your web site is trustworthy and professional within the first few seconds someone sees your web site.  This important task is executed by making sure your site has great aesthetics.

Great Aesthetics Convey Ideas and Emotions

apple aesthetics

With trust as your foundation in great aesthetics, you can build emotions on top of it to sell your products and services more effectively.  Apple products are a great example of applying great aesthetics.  Their products are cool, young, and hip.  The Apple web site reflects this visually with its clean white layout with gray and black accents. St. Louis based videographer, Steve Behrends, has helped numerous corporations put on a more human friendly face by helping them create high quality videos. By incorporating great video into the website, you are better able to communicate complex emotional messages and build trust at a faster rate.

great aesthetics

Another interesting example is BP Oil who chooses green, white, and yellow which ties to pastoral, clean, sunny, and happy despite their “dirty” product.  Their use of aesthetics helps them portray that “clean” image they desire the public to see.

fortune 500 aesthetics

A common aeshtetic trend can be seen in Fortune 500 logos as well.  Most of them rely on a predominantly blue color scheme due to its calming and relaxing associations most Western audiences have with it.

Great Aesthetics Make a First Impression

A 2006 study conducted by Lindgaard, “found that Web site impressions were reliably formed within 50 seconds, were reliably consistent between people, and were held consistent over time.”

“…impressions were made in a short exposure time (less than a minute/page), it is likely that participants were making aesthetic judgments with minimal information and little conscious reflection or thought.”

Again, aesthetics can really make or break your site.  Make it a priority to have a great image so that you do not have problems with users trusting your web site and company when it comes to their decision to purchase from you.  At the same time, don’t be like a fancy restaurant that has no customer service.  You need to look great and follow through on your customer’s whole experience with your company.

 

Sources

Aesthetics, Shire.net, http://www.shire.net/learnwebdesign/aesthetics.htm 

Chen, Jennifer, “The Impact of Aeshtetics on Attitudes Towards Web Sites”, 2009 Jul, http://www.usability.gov/articles/062009news.html 

Furman, Susanne, Ph.D., “Building Trust”, Usability.gov http://www.usability.gov/articles/092009news.html 

Webcredible, Website aesthetics – what has it got to do with usability? http://www.webcredible.co.uk/user-friendly-resources/web-usability/aesthetics-usability.shtml

“What Works for Fortune 500: blue”, 2008 Aug 22, http://www.brandflakesforbreakfast.com/2008/08/what-works-for-fortune-500-blue.html

Make Use of Your Visitor’s Attention

Countless small business web sites make the mistake of wasting their web site visitor’s attention.  After spending ad dollars to get a quality visitor, these web sites will display informative content that helps the reader, but fails to get the reader to take any sort of action that helps the company’s marketing and sales effort.

The solution to this problem is “action points”. An action point is simply the point where you ask your reader to do something on your web site. Some examples might be:

  • Buy Now
  • Subscribe Now
  • Sign Up
  • Join Now
  • Make a Comment
  • Share This
  • Tell a Friend
  • Give Us Your Opinion
  • Ask the Expert
  • Like This
  • Tweet This
  • Pin This

It is in your best interested to always make use of your user’s hard won attention.  If you cannot get a reader to purchase right this moment, ask the reader to subscribe to your e-mail or text list so that you can continuously stay in contact with them and not lose that opportunity after his or her first visit to your web site.

Another often forgotten area to ask user’s to take action is after they have taken your main action.  For example, after someone has purchased a product from an eCommerce web site a “thank you” page is typically displayed and that is it.  An easy to implement tactic to receive more value from your visitors is to ask the user to take another action on the “thank you” page such as filling out a survey, entering a contest, share your web site, etc.

Simple, Clear, and Unified Navigation – The Perfect Web Site

Photo courtesy of Tim Green.

Solid navigation is one of the foundations to creating an engaging, “perfect” web site.

There needs to be a set of master navigation buttons that appear in the same spot on every single web page contained within the web site.

This concept is best explained with a picture of what NOT to do.  In this first screen shot, you see the home page.

bad navigation

BAD Example of Navigation

After clicking the home page, the navigation changes completely and adds in new buttons that didn’t exist in the first place!  This is a great way to confuse a visitor to your web site.

Bad Navigation

Confusing Navigation Structure

 

This is one of the worst things you can do on a web site.  Time is precious when a person visits your web site and you do not want to waste it by making the person have to figure out how to find content.  If given the choice between form or function, side with function to make sure people can use your web site.  In this next screen shot you can see an example of Apple’s web site and how its navigation stays consistent across the top of the site no matter where you go.

Good Navigation

Good navigation is consistent through the web site.

Once you have consistent navigation, the next fundamental choice you need to make is how many choices will you give the person to navigate through.  Again, people have limited time and energy, so the more choices you give them the more confusing your site will be and the likelihood of that person taking an action that benefits you becomes lower.  In design school, the textbook answer was to limit navigation choices to 3 – 5 items.  This is illustrated beautifully by an equation called Hick’s Law, which you can learn more about at Smashing Magazine and Wikipedia.

T = b * log2 (n+1)

When you translate the math into plain English, it means that the more navigation choices you give a person, the logarithmically longer it will take for your user to take an action.  Basically, not only does it take longer to make a choice, but the effect on time compounds and becomes drastically longer each time you add a choice.  The more you can limit choices for your web site visitor the more likely you are to see a positive result.  Hick’s Law is the reason why simple advertisements and web sites that focus on one things have been so effective over the last 150 years.

 

Web Design - Everything is Connected

Everything is Connected

Photo courtesy of seier+seier.

In order to build a great web site, two ideas must be examined:

  1. “If you build it, they will come”
  2.  “Throw enough money at a site and it will be successful”

“If you build it, they will come” is false.  Building a great web site alone does not guarantee you will see traffic by any means.  Many small business web sites are a complete waste of money because of this simple error.  Proper marketing channels must be used no matter the web site.

Conversely, spending large amounts of money on advertising will not guarantee your web site does anything with that traffic (i.e., turn that traffic into buyers of your products and services).  Your web site needs to promote your product or service as truly unique or special in order to see truly effective campaigns.  This is why web sites that offer “crap” content do not see success.  Additionally, sticking to me-too or copy cat marketing that mimics exactly what a competitor is doing is a sure a path to failure.

With that said, here is a simple formula to build the perfect web site.

Engaging Website + Proper Marketing Channels = Successful Web Presence

In the next post, the first part of the equation, an engaging web site, will be explored in greater detail.  Here’s a sneak peak of the different topics to be covered.

  • Simple, Clear, and Unified Navigation
  • Limited Navigation Choices
  • Action Points
  • Great Aesthetics
  • Sales Copy that Hits Specific Psychological Points
  • Security
  • Permission Marketing Systems
  • Web Site Tracking
  • Social Media Integration
  • Responsive Design for Mobile & Other Interfaces