I have written this post more towards the design community, those who do what we do; however there are some very important points made here that will apply even if you are only a website owner. So I encourage you to read on and enjoy!

Picture yourself walking down the street in a busy city full of shops and boutiques, all of which are vying for your business. Unless you are a regular customer, you are basing your opinion of a store almost exclusively on its outward appearance. Questions run through your mind: what does this store sell? What can this store offer me? Does it seem reputable? Are they a chain or local seller? Should I go in? The storefront window is the only chance you have to make an educated guess as to whether the store is worth your time.

The world may be new to the Internet, but it isn’t new to business. The Internet acts as a virtual street, with millions of companies and organizations all vying for your business. Like that window, a home page is a website’s only chance to show visitors what there is to offer. A website visitor, like a shopper looking in a window, makes a decision within a very short amount of time whether a website will be any benefit to them.

So if you wouldn’t fill your storefront window with huge advertisements, erroneous announcements, irrelevant news, and anything else not pertaining to your store’s purpose, then why would you do do that to your website?

Stand On One Foot, Touch Your Nose, and Rub Your Belly

That isn’t required to build a website, but it is similiar to the difficult balancing act you must accomplish on the home page of a website. You have everybody to please and no room to do it.

In general, there are a handful of tasks all home pages must accomplish and that designers must be mindful of:

1. Establish an identity – logo and slogan
2. Make a good first impression – this is the key to keeping visitors
3. Provide visual and verbal clues to reveal the site’s underlying content and encourage deeper browsing – teases, recent articles, featured items, etc.
4. Provide a clear navigation
5. A place for site-wide search
6. Fresh content to attract return visitors
7. Supply both new and return visitors with desired content – each visitor is looking for different types of information
8. Provide multiple entry points – aside from the navigation, give users different ways of accessing the site’s content

Always Welcome New Guests

Priority should always be given to new visitors. Quite simply put, without new visitors, you will never have any return visitors.

Give them an obvious starting point that will answer these questions:

• What is this?
• Who are you?
• What do you do, sell or make?
• Why are you better than the rest?

Give Return Users Everything They Need and Nothing They Don’t

Return users know who the company/organization is, what they do, and they are obviously pleased with the organization. This is where the balancing act becomes complicated. Return users do not want to be confronted with any pop-ups or large blocks of information they already know. And they want a quick and easy way to get to the tools or information they need most.

An effective way to accomplish this is, if the website requires any sort of login, to give account holders a different layout, with different options than new users.

Logged Out

Logged In

It is unnecessary for certain types of websites to require a login; therefore that option will not work in all cases. If no login is required, try giving a majority of priority real estate (areas “above the fold” or above the 600px mark) to new users and then give the remainder to return visitors. This is based on the idea that return users will have a higher tolerance for scrolling and more familiarity with where items are. However, never place high frequency items “below the fold.” Below are two examples of an ideal balance for return and new visitors.

Answer These Questions Before It Goes On The Home Page

Only certain content should appear on the home page, so use these questions to help assess the importance and need of an element. The answers to these questions should help put a potential element in perspective:

• Will this element be frequently used?
• Who will this element help – new visitors, return visitors, or both?
• Will this element confuse or frustrate new visitors? return visitors? or both?
• Is this element consistent with the website’s purpose?
• Could this element be placed on a secondary page will equal success?

Control Your Visitors

Internet users are certainly unpredictable; however with an effective visual hierarchy and calls-to-action, you can control the actions of most visitors.

Calls-to-Action

Subscribe to Our Newsletter today to stay up to date with us! That is an example of an effective call-to-action. You were given a task to complete, that if in the right context, would have enticed you to take an action and made you aware of a feature or service.

A good call-to-action compels people to act with an appealing offer. “Click here” or “Learn more” are the most common calls-to-actions. However they aren’t very effective in encouraging a user to actually click as they provide no insight into what benefit the user will receive. A major goal of any home page is to encourage users to explore what the site has to offer. There is no better way to accomplish this goal than to simply state the task you would like the user to perform, calling them to make an action.

Graphics can also be used as calls-to-action when combined with the verbal message. Users respond more actively to graphic calls-to-action, even if it as simple as an arrow or other symbol pointing to the action.

Setting The Visual Hierarchy

Design 101 will tell you that giving everything equal weight on a web page will lead to clutter and confusion. Using contrast of size, color and shape will establish a visual hierarchy, or the order in which a user will encounter each element on a website. The goal is to allow the user’s eye to travel throughout the design without getting stuck on any one part.

On paper, determine the hierarchy of elements based on relevancy before you begin designing. Then place the elements within your design, giving the most emphasis to the most important element and so on. Below is an example showing the order in which the content is read by the user. Notice how there is a nice flow to elements 1-3 and that they are in order of importance.

Above All, Make Your Purpose Absolutely Clear

If the intention of a website is not made clear within seconds of viewing, you have set up your visitors for failure. They may not leave right away because they may misinterpret the intention of the website, which will ultimately lead them to search for information that does not exist.

It is easy to lose sight of your website’s purpose without even realizing it. Refer to the principals laid out here, and you should be well on your way to attracting and keeping your user’s attention.

Mike Shelton
Web Designer at Key Web Concepts

1. Create a Mood

The most effective designs have the ability to make us react a certain way, to feel happy or sad or comfortable or on edge or whatever the situation calls for.  With innate emotional connotations, the right colors can be the single most important factor in creating the right feeling for a particular project.

The McDonalds website makes great use of its iconic red color.  Red, besides being one of the colors most effective at stimulating the appetite, can also create a feeling of energy and happiness if used in the right palette.

The logo of the The Gay & Lesbian Alliance Against Defamation uses a warm palette of orange, gold and pink to create a real feeling of positivity and energy, which combine with the lively icon to create a real message of forward movement.

2. Make an Association

In addition to making us a feel a certain way, the right colors can also make us think of and make associations with certain things, an important consideration if you really want to create the right look.

With its deep brown and dark rustic red, the Sky’s Guide Service website immediately makes you think of rough and tough outdoorsmen.  The rich textures enhance the site to create a great visual for the visitor.

Designed by Jacob Cass, one of our favorite reads on the web, the logo for UKE utilizes a strong, deep purple to make a visual connection with royalty.  Selling chocolate gift baskets to an upscale market, the logo effectively communicates a refined, sophisticated image.

3. Create Emphasis

Through brightness and contrast, color can also be valuable tool to create visual interest in strategic areas and direct the viewer’s focus.

The Taami Berry website utilizes a simple layout and soft, earthy, off-white background augmented with punches of red to direct the visitor’s eye to key elements such as the logo, slider and shopping cart.

The colors of the British flag are used cleverly in the UK Space Agency logo.  Juxtaposed with blue, a calmer, more static color, the powerful red directs your eye to the UK and the focal point of the upward-pointing arrow.

4. Unify a Design

One of the most important functions of a strong and consistent color palette is to unify a design, to give it the appearance of being a single, purposeful, cohesive unit.  Furthermore, across a variety of different materials, a consistent use of color can really strengthen a brand.

The Product Superior logo, website and business card all make use of a bright, distinctive blue and green to create a strong brand for the business.  Perhaps more importantly, these colors are used consistently across all of their materials to create a unified message.

5. Define Structure

Color can be used for organizational purposes as well, to define certain elements of a design and distinguish them from others.  Especially in web design, this can be a useful strategy for creating a clear site structure and hierarchy and for clearly communicating to the visitor where they are within your site.

Cubicle Ninjas has a collection of six different one-page websites, each devoted to a different type of print material. The sites make use of a common navigation across the top of the page, but each site is assigned a prominent background color to clearly separate it from the others.  We also see a good selection of color in terms of connotation and emotional reaction; the brown of the white paper site immediately communicates a more restrained, professional tone than the intense red or punchy blue of the poster and business card sites.

]]> http://keywebconcepts.com/blog/2010/07/10/5-ways-to-use-color-to-enhance-a-design/feed/ 2 http://keywebconcepts.com/blog/2010/06/21/usability-basics-its-not-rocket-science/ http://keywebconcepts.com/blog/2010/06/21/usability-basics-its-not-rocket-science/#comments Mon, 21 Jun 2010 12:34:33 +0000 Mike http://keywebconcepts.com/blog/?p=336 Usability is the technical term for how we use things and with what effort. It is a vital element of a website that affects the success of your website.  It takes careful planning and research to make a website usable.

This post will be the first of a series of posts on usability and user experience. Today we will focus on the basics to get a solid foundation for building more usable websites.

Usability vs. User Experience

Be sure not to confuse usability with user-experience which, while related, encompasses a whole different set of considerations. Usability is about the ability to use something. Can the user find what they need without trouble or errors? Can they use the object for its intended purpose without question or confusion? Is the purpose clear? These are all questions raised when evaluating usability.

On the other hand, user experience is all about emotions. How does the user feel while using the item? Does the object give the user a sense of happiness? Does the user feel more important or superior by using the item?

User experience is an exciting topic that I will touch on in the future, but we will focus on usability first because without a high level of usability, a great user experience is not possible. A product which is hard to use will always yield a poor user experience.

So to get things started on our mission to make people happy, we will focus on mastering usability.

The Importance of Usability

Whether you knew it or not, you are quite familiar with usability. In fact, we are all usability experts in our own right because we know what we like and do not like. Quite simply, if a product is not straightforward in its purpose and if we can’t figure out how to use it within 2-5 seconds, there is a high percentage chance that we will not purchase the product.

Websites are no different.  In fact, our usability gauges are set even lower when it comes to viewing and using websites. If a website user cannot figure out their way around your website in less than 3 seconds, they will likely become confused, disoriented and ultimately leave your website.

So if usability is such an important part of your website, how do you ensure that your site is user friendly? I thought you’d never ask! Let’s take a look at the basics to ensure that you make your website users happy and keep them happy.

The Essentials to Usability

1. Always remember: “Make it easy”
   Above all, you must always keep in mind the goal of usability: Make it easy. Frustration and confusion are the worst things for a website user to experience while using your website. These traits will almost always result in the user leaving your website and you missing out on a potential opportunity for new business. Make it easy. People like to feel like they know what they are doing; it makes them happy (yes, that’s an user-experience benefit of usability).
2. Get to know your user
   If you are trying to please someone, it makes sense to learn everything you can about them. Knowing your user’s demographic will allow you to set goals and priorities for your website. For example, if your demographic is primarily 45-70 years old, you shouldn’t assume your users will be internet savvy. That information could help you decide the types of features to include or to avoid.
3. Don’t abandon the expected
   Do not get me wrong on this one, you should always reach for new and better way of doing things; however, you can alienate users by doing too much. There are certain nuances that are expected when browsing a website that you are best off sticking to unless you truly think your users will appreciate it (in most cases that is doubtful). For example, most internet users expect a logo or some form of recognizable branding to be prominently placed at the very top of the page and a navigation to be very near to that. Also, many users know that the logo should have a link to the home page on it. These are all things your user expects (but there are many more). If you do not abide by the unwritten laws of the web, users will be annoyed. Certainly shoot for the moon to wow your users but always evaluate the costs of abandoning the expected.
4. Don’t make people think
   This one is borrowed from Steve Krug, one of the foremost experts on website usability. His number one rule for website usability is “don’t make me think.” In fact, he has a book entitled “Don’t Make Me Think.” He means just that:  do not make your users think by giving them too many options or by not defining a clear hierarchy of importance. Krug points out that website users do not read. They scan at best. Everyone is in a hurry on the internet and any extra step you give a user slows them down and gives them one more reason to leave your website. If you are fascinated or even just mildly interested in usability, be sure to read Krug’s book.
5. Remember content is king
   Flashy graphics and illustrations are like energy drinks: they work great first at first, but without natural energy, you will crash later. Great graphics are good, but they should always be secondary to your content and should only aid in guiding the user’s understanding of your content. Well written content is essential, and to be well written it must be written for the web only because the web is unlike any other media. As I mentioned earlier, website users are in a hurry and want to absorb as much information in as little time as possible. Short paragraphs, descriptive headlines and sub-headlines, and highlighted key points are all great ways to give the user every they need to know very quickly. So keep the graphics subdued and the content to the point.

Effective web usability is a detailed and sometimes complex issue which some large corporations pay hundreds of thousands of dollars to get right. Unless you are a multi-million dollar company, you can’t afford to spend that kind of money for detailed usability analysis. However, there are some ways to get it right without breaking the bank. Start with the basics listed in this article to get started.  When I revisit this subject in the coming months, I will talk about user testing on the cheap and other cost-effective methods for ensuring usability.

Mike Shelton
Web Designer at Key Web Concepts

From the team at KWC

you won’t get anything for nothing. We have built smaller sites, and much larger sites, though we typically focus on the small business owner who doesn’t have a huge budget for their website, so most of the sites we build are between $1500 and $3000. All of the sites we build are done on a T&M basis.
T&M stands for Time and Materials. Whether it is simply site maintenance, or site redesign, we offer the client the ability to save themselves money by staying involved in the design process and providing much of the content and images for the site. This saves us time and the client money. Our take on it is, “you know your business better than we know your business.” We can make it look professional and aesthetically pleasing… but don’t necessarily know as much about your industry as you do without doing a bit of research. A well-organized client can save as much as 40% on the overall web development process. Therefore, we simply bill our clients based on the materials we use… (usually stock images if needed), and the time it takes us to design the site.
The way this differs from other website design companies is they quote you a price for the overall design of the site and make sure to pad the numbers enough so that if they are faced with any potential “issues: (like having to write content that the client may or may not give them), they are well covered. While Lump sum proposals give the client a better feel for the end price, they are almost ALWAYS paying more than they would have if it was done T&M.
How do you know how much the site will cost in the end? We meet with you and give you an estimate for the website design. That estimate is usually pretty accurate… if anything, we usually come in under that estimate.
How do you know that we are reputable? Ask ANY one of our clients. We get most our business from referrals from existing customers. Therefore, it pays for us to EXCEED our clients expectations.

Jim

Jim

What initially started as excitement… soon became pure embarrassment… to the point that they removed the web address from their advertising. But please note this.. Design is NOT EVERYTHING! I have seen some beautiful websites built by some very talented graphic designers. These websites usually open up with rich colors, flash animation, music, ALL the bells and whistles. They make you say WOW…… but… how did you find them? If you found them on the first page of a search engine, Congratulations… you have found a REAL Website Designer who KNOWS what he/she is doing. But this is a rare occurrence. Often times the nicest looking websites can’t be found anywhere on the search engines. The client usually paid a hefty price for a nice looking site.. but where did it get them? Not much further than they were before. Building a beautiful website that nobody can find unless you tell them where to go is like paying thousands of dollars for a Beautiful Billboard, and then sticking it in the middle of a field on a farm in the country. What good is it for your business if nobody sees it without you telling them where to look. Let’s look at the main goals of owning a website:

1. Company Validation: A company that has a well designed website looks credible. People are more likely to use a company that has established a web presence.
2. Information: You can say more about you and your Products/Services through a website than you could EVER say in an advertisement or sales pitch. And it conveys this info in a non threatening way! People can read about your services on their time schedule.
3. Introduction: Thousands of people everyday go to search engines like Google, MSN and YAHOO every day to search for products and services… and they are immediately introduced to companies that have the products and services they are looking for through the company websites. Who wouldn’t want to be introduced to people LOOKING for products/services that they provide!
4. Make Money: E commerce has revolutionized the world economy. Look how many companies are now able to market and actually sell their products online, limiting the need for a sales staff and accounting department. Everything but the shipping is automated… (and they may be soon too).
5. Save Money: A website can drastically limit the number of phone calls your company receives by simply answering the client’s questions through a website. Think of the money that would be saved each day if your company were to reduce your incoming customer questions simply by 50%.

Key Web Concepts does not claim to be the BEST website design company out there… but we can promise you that we are better than most, and can build a website that will “WORK for your business!”.. and can do it for a lot less then you might think! Please feel free to check out my website and some of my client’s sites and contact me for a FREE consultation at your convenience!

Jim

Short for search engine optimization, the process of increasing the amount of visitors to a Web site by ranking high in the search results of a search engine. The higher a Web site ranks in the results of a search, the greater the chance that that site will be visited by a user. It is common practice for Internet users to not click through pages and pages of search results, so where a site ranks in a search is essential for directing more traffic toward the site.

SEO helps to ensure that a site is accessible to a search engine and improves the chances that the site will be found by the search engine.

How do Search Engines Rank Sites?

A search engine sends a “spider” (AKA “bot”) to crawl… the servers on the world wide web to find documents to bring back to its index or database. In the index, it filters documents according to the search engine’s rules (such as, to weed out duplicates) and stores those which meet its quality criteria.

When a searcher makes a request, the search engine evaluates the sites in its storehouse of indexed sites, assessing which are the most relevant to the requested information, based on area of expertise as evidenced by keywords in content, and references in the form of links from authoritative sites. Note that the links that count with search engines are the ones pointing to your site. Each search engine has it’s own set of rules that govern which sites rank higher (their “algorithm”). Some, like Google, change from time to time to continually improve the process and to make sure sites are keeping their sites “Fresh” with their Search engine optimization.

How Does SEO Help?

Search Engine Optimization clears and maintains a path for search engines in four ways:

1. Addressing the limitations of the “bots” with crawler-friendly site design, as well as addressing indexing filter issues. Proper site design and critical code elements are ESSENTIAL for a site to perform well.
2. Making the site accessible to searchers by identifying keywords most used by the target audience and writing the keywords — sensibly — into the text of the website.
3. Attracting inbound links from authoritative sites and targeting those links to searchers’ interests.
4. Analyzing visitor activity on the site — human and “bot” – to look for ways to improve the search experience for both.

When you do this right, you help the search engines do a better job providing their visitors the information they seek, and they display your site to the visitors you seek. Everybody wins.

“Google really does want to encourage appropriate SEO; we want to help you rank better if you follow our guidelines,” said Matt Cutts, Google’s senior software engineer on a radio interview last month. You’ll find those guidelines at http://www.google.com/webmasters/guidelines.html .

Why Is SEO Important to Your Site?

In the “everybody-knows-that” department, studies reveal that 70% of searchers click on natural or organic listings. But with Google, that jumps to 87%. Nearly 50% of all searches are done on Google — more than half, if you add in AOL, which displays Google search results. So, do the math. Of 1000 searchers, 555 (55.5%) will use Google or AOL, and 483 (87%) of these will click on links that are not “sponsored”. Of the remaining 445 non-Google searchers, 311 (70%) will choose organic listings over paid. Altogether that’s 794 out of 1000 searchers! Who wants to pass up that many visitors? What’s more, research last year showed that 60% of searchers click on one of the top three organic listings if it interests them. (Just how to capture their interest, well that’s a topic for another time.)

There you have it. Search engine optimization to get some of those top rankings is vital to website success. Fortunately, successful SEO rests on following through on some basic principles for your site. If you haven’t begun SEO already, now’s the time to begin.

Feel free to give me a call if you have any more questions or if you want to improve your SEO for your site.

~ Jim

Please feel free to comment on this blog or contact us by phone.

Jim Thomas
President
Key Web Concepts, Inc.
804-778-7600