Better design produces love at first site

A user-friendly interface can keep people on your page for longer, writes Greg Muller.

Website design is more than animated spinning logos, embarrassing soundtracks and an inappropriate use of scrolling marquees and blinking text.

The speed at which technology has evolved has been extraordinary and it's vital for small businesses to understand the key elements of modern design.

A website with a great design can provide a key competitive advantage. This can lead to new business and even provide an opening to tap into new markets that might not have been possible otherwise. A great website design never comes in a "one size fits all" solution.

But what makes a design successful? The answer comes in two parts.

Fit for purpose

Even the most visually impressive, innovative and over-the-top websites usually fail for one main reason: they rarely meet the needs of their users. Ultimately, if the user doesn't see the value in a website, finds it hard to navigate, becomes confused with content or just generally dislikes the colour palette, they'll switch off and, chances are, go somewhere else. On average, users take less than a third of a second to judge a website.

If you were to build a small grocery store on one of the busiest main streets in the city, you wouldn't think twice about investing a small fortune to get the layout of the shop floor just right, ensuring all the products on sale were strategically placed to maximise their sales potential. You can do the same with websites – and it's called fit-for-purpose design.

Accessibility

Ask any Apple Mac user why they love their Mac and I guarantee the majority of the answers will be about the experience of using it. Very few companies can get this right but, when they do, the pay-off can be enormous.

There is a social and sometimes legal responsibility to make websites accessible. This refers to websites that can be navigated and read by everyone, regardless of disability, location, experience or technology.

The key ingredient to getting that experience right is to make sure the product connects to its users. Many people tend to think modifications to design should be based on feedback you gather once a website has gone live. Making modifications and tweaks to the designs based on testing feedback is much easier and more cost-effective to do before the website has launched.

This should not, however, deter the owners of existing websites from factoring in user testing. Demographics are constantly changing, so the benefits of maintaining user-centred design cannot be overstated. For example, the Office of State Revenue in Queensland had a website that some users dubbed "unappealing".

Through the use of focus groups, a new website was developed that offered unparalleled usability by breaking the visitors into three groups and providing them with navigation features that suited their specific purposes. Since its launch, this user-centric approach has received extremely positive feedback of up to 99 per cent.

It's important for small businesses to make sure their website is designed with the user and user experience in mind. It's equally important to note that every user is different and, as much as we strive to get this magic formula just right, validation tells us so.

Small business owners need to engage their users and provide an environment that not only identifies the business but sets it apart from its competition.

[smh]

Five Web Design No-Nos to Avoid

Every Web designer starts out with plans to make an effective and enjoyable browsing experience for their site visitors. Unfortunately, the gap between intention and outcome often ends up a lot wider than intended. Simple mistakes can make your Web site an annoying experience for visitors when it should be anything but. Here are the five worst Web design no-nos to avoid at all costs.

1. Slow Loading

Despite the fact that more people have faster Web connections than ever, the problem of slow Web sites hasn't gone away. Many sites are so slow that people who aren't highly motivated to see your site simply give up and go elsewhere.

Typically the culprit is a slow-loading Flash movie or introduction where the designer offers no alternative to waiting for the movie to load. Showing a progress bar isn't enough, because most people simply aren't interested in waiting around for the site to appear. If you use a Flash introduction, make sure to offer an obvious way for visitors to bypass it and go straight to the site.

Test your Web site to see how long it takes before something useful appears on the screen. If it takes more than three to five seconds you run the risk of your visitor losing interest and leaving. This might seem like a short time but people are so accustomed to things happening quickly that even a few seconds waiting for a Web site to load feels like an eternity.

2. Too Much Information

Many people are cautious when it comes to providing personal information over the Internet. If you collect information from visitors, only ask for what you actually need, and don't collect it just for the sake of it.

Also be careful in areas where people may be reluctant to provide their financial or marital status and age. For example, if you need proof that a person is over 18 consider asking to confirm the age by checking a box rather than by asking for a birth date. If you don't have a very good reason to know your customer's marital or financial status, then don't ask.

Be aware that most visitors won’t want to provide a lot of information before they know something about the site. If they are asked to register for a site before they can enter it, many people won't bother. If you think it’s a valid requirement, make sure you explain why, and be sure to provide at least basic information about the site before sign up. If registering is not essential, give them a visible and easy way to bypass the signup form.

The less information you require from people, the more likely they’ll be to sign up for things like e-mail newsletters and to buy from you. On the flip side, the more information you require and the more intrusive the information requests are, the less a visitor will be inclined to provide it.

This site doesn't have a search page, but the site map helps and it's simple to find a way to contact the owners.

Ask for information once, and if they make a mistake and have to go back and fix it, make sure the information is still there. That way, they won’t have to fill out the entire form all over again.

3. Nasty Navigation

Many sites are poorly designed and require people to click through a number of different pages before they get see any product. Worse still, when you finally get to the product pages some sites tell you that there are no products in that category!

If you have only a few products in a particular area of your site, consider aggregating similar products into one category to reduce the number of clicks that people have to make to find them. You should do everything you can to get your products in front of your potential buyers as quickly as possible even if this means showing them a wider range of products in fewer and more widely defined categories.

Check your site hierarchy. If it is deep rather than wide, then your visitors will have to click many times to navigate to the actual content. Consider flattening the structure so you get visitors to where they are going more quickly.

In addition to determining how quickly you get your visitors to your products, check how many times they have to click to finalize the sale. Your site should make it easy to add an item to the shopping cart, you should provide a Continue Shopping button so people can return to the product list easily after selecting an item, and your visitor should be able to go to the shopping cart from anywhere on the site at any time.

Check the steps to finalize the sale and do everything you can do to ensure your visitor's shopping cart converts to a sale. Don't risk losing them by making the process overly complex.

4. Disorganized Information

When you don't put information where people expect it or worse, when you omit it entirely, you annoy and frustrate your users. People expect to see a privacy notice that describes what you do with the information you have collected from them. They expect you to have a contact page where they can ask questions or make complaints. This page should include phone number, a form or an e-mail address. If you don't make the process for contacting you obvious, people will lose faith in your business.

Most people want a visible search tool on every page of a site. Search is a key way many people find information and forcing them to navigate using only menus will frustrate them.

Provide each of these features as links on every page of your site - either as an option in your main navigation system or as a text link at the foot of the page.

5. All Flash and No Substance

This annoying Flash introduction has singing that you can't turn off easily. The browser close button is easier to find than the Skip Intro option.

Some Web sites showcase leading edge Web technologies at the expense of usable content. While there is a place for Flash animations and 3D product renderings don’t provide them at the expense of information that answers basic questions about products.

In addition, these features should not require visitors to download large applications or movies to do something as simple as see the product and its specifications.

Always make sure that your site focuses primarily on providing easy access to the kind of information that visitors need most. Only when you have nailed the basics should you consider adding bells and whistles.

It's easy to think that interactive displays make a site more attractive and that this will attract customers. However, the opposite is true - people return to sites where information is easy to obtain and products easy to purchase. They will bypass difficult-to-use sites that lack basic product information, which is the key to making a buying decision.

None of these peeves are hard to fix or to avoid creating in the first place. However, both you and I know from our online browsing experiences that too many sites make these mistakes every day. The key is to make sure that your site isn’t one of them and that you focus on what your visitors most need when they visit your site. If you focus on this you give yourself the best chance of selling to your visitors and to have them return in future.

[ecommerce-guide]

Building a Web Site? Did you ask the right questions?

I've been doing this Web thing for a long time; in fact, I built my first Web site in 1994, back in the days when the average American thought the Internet was an international criminal conspiracy. These days I do ecommerce consulting, which has provided me with the privilege of working with hundreds of companies over the last few years. I've worked for large companies such as Amazon and Zillow... and small companies such as the one-woman firm that arranges "fairy" tours of Ireland. I've seen it all!

One thing I've learned is that the vast majority of businesses start the Web-design process in completely the wrong place. They jump into the graphic-design part of the process, without asking a critical question.

What do you want the visitor to see and do when he arrives on the site?

I know most businesses think they've already answered the question, but "we want the visitor to buy our product" is not a good answer. It's way too vague in most cases, much to general.

Specifically, what do you want the visitor to see and do when he arrives on the site?

If you don't answer the question, you end up with a "throw it onto the site somewhere" process that really won't work well.

Here's an example. A firm I worked with wanted to sell a piece of software. Not having answered The Question, the site was a jumble of information and no real flow ...no sales pitch or marketing message, no flow through which a visitor could be converted into a client.

It turned out that they had a great video showing the features of the product; in fact at one point the business owner said to me, "well, I guess it would really help if the visitor saw the video." Why, then, I asked, was the video hidden?

The video was reached by a small link near the bottom of the page on the right side. This was probably the most important sales element we had identified ... and yet it was hidden from the visitor. Sure, the visitor might stumble across it, but in most cases wouldn't. (As, in fact, was proven by their traffic logs; very few visitors ever reached the video.)

Now, had the company asked The Question right from the start, and fully discussed and explored it, before they built the site, they wouldn't be rebuilding the site! They would have realized that they had to push the video, that they had to make sure that every single visitor to the site know about it, and was encouraged to view it.

This, by the way, is why Web design is not about graphic design. A Web site is a piece of software--in many cases, a piece of marketing software. It is supposed to do something; interact with a visitor, and move that visitor along a path toward "conversion." That's a process, not color design, not graphic design. Graphic design is what you apply to a site once you've figured out the process.

[examiner]

Web Design with a CSS make excellent mobile shopping for your site

With a second style sheet and minor changes to a page's HTML, many online stores can offer an excellent mobile shopping experience without creating a second web page or registering a mobile specific domain.

Mobile Internet use is on the rise. And online merchants presumably want to provide customers with the best possible shopping experience. It is for these reasons that many leading ecommerce sites have begun to offer either mobile specific pages (typically a subdomain) or mobile specific styles.

In this "Web Design Tips," I am going to make some suggestions about whether you should build a separate, mobile specific website, and provide a quick example of how you might transform your CSS to create a more mobile-friendly version of your current page.
Should You Build a Separate Mobile Site?

The answer can be either yes or no. Personally, I believe that mobile Internet devices and mobile handsets will soon be as capable of rendering web pages as well as laptops and desktops do now, so that registering a .mobi domain or even building a separate site could be a waste of time.

A better solution might be to redesign your current site so that it is easy to render on multiple platforms. In fact, developing websites that easily migrate among platforms (mobile, desktop, RSS, or more) was the one of the main reasons that CSS was created. Good website design will largely separate content from layout and appearance.

If you do decide that the best way to serve mobile customers is with a mobile-specific site, I will encourage you to use a subdomain rather than a .mobi domain. For example the URL might be http://m.yoursite.com rather than http://yoursite.mobi.

An Example Conversion

Just as each ecommerce website is unique, creating a mobile friendly version of that site will also be somewhat unique. So I thought that, perhaps, the best way to describe a site conversions was to do one.

For this "Web Design Tips," I created a home page for an ecommerce comic book store. This page was created for this demonstration.

First, here is the complete page code from before the conversion.

Here is the style sheet for on-screen display

body {background: url(images/main-background.png) repeat-x; margin-top:0px; font-size:62.5%;}
#wrapper {margin:0 auto; width:800px;}
#access {position: absolute; top:-500px; margin:0; padding:0;}
#header {background: url(images/head-background.png) no-repeat; width:100%; height:256px; overflow:hidden;}
#header img {border: none; position: relative; top:162px; left: 235px;}
#top-nav {position: relative; top: 73px; left: 210px;}
#top-nav li {display: inline; list-style: none; font-size: 1.4em; font-family:Denmark; letter-spacing:1px; font-variant: small-caps; padding-left: 3px;}
#top-nav a {color: #676666; text-decoration:none;}
#top-nav a:hover {color:#e2232b; text-decoration:overline;}
#searchbox {position:relative; top:170px; left: 530px;}
#content p {font-size:1.6em;}
#content li {float: left; display:inline; list-style:none; width: 45%; text-align:center; margin:5px; padding: 10px; border: #ffffff solid 3px;}
#content li:hover {background:#676666; border: #000000 solid 3px;}
#content li:hover h3 {color:#f8a043;}
#content h3 {font-family:Denmark; font-size: 2.6em;}
#price {font-family:Denmark; font-size:2.0em;}
button {margin: 5px; padding: 10px 100px; font-family:Denmark; font-size:1.8em;}
#footer {clear:both; background: url(images/footer-background.png) no-repeat #000000; margin-top:50px; padding: 120px 10px 200px 220px; text-align:center; font-size:1.4em; font-weight:500;}
#footer a {color:#000000; text-decoration: none;}
#footer a:hover {text-decoration:overline; font-weight:900;}
#footer ul {margin:0px; padding:0px;}
#footer li {display:inline; margin: 0px 2px;}

Adding a Mobile-specific CSS

The first step in our conversion process is to add a mobile CSS, linking to it in our HTML and adding a file, which is still blank, to our site hierarchy. In this demonstration, I named the file "handheld.css."

Using the Page Layout As a Guide to Begin Creating Your Mobile Styles

Our goal is to meet the World Wide Web Consortium's standards for mobile browsers, so we'll use that organization's CSS Mobile Profile 2.0 as our guide when determining which selectors or attributes to use. We will also try to keep our page width to 205 pixels, and take steps to limit the total file size of our mobile site.

While our goal is to make most of the changes in the CSS, we will also have to create a couple of mobile-friendly background images. You can watch me do this step-by-step in the video above. Below is the completed "handheld" CSS file.

body {background:#ffffff; margin-top:0px; font-size:62.5%;}

#wrapper {margin:0 auto; width:205px;}

#access {display:none;}

#header {background: url(images/m-head-background.png) no-repeat #60605F; width:100%;  border-bottom: #f8a043 solid 3px;}

#header img {display:none;}

#top-nav {text-align:center;}

#top-nav ul {margin:0px; padding: 2px 0px;}

#top-nav li {display:inline; list-style: none; font-size: 1.2em; font-family:Denmark; font-variant: small-caps; padding-left: 1px;}

#top-nav a {color: #000000; text-decoration:none;}

#top-nav a:hover {color: #f8a043; text-decoration:overline;}

#search {width:120px;}

#searchbox {padding:72px 0px 2px 4px;}

#content {margin:0px; padding:0px;}

#content img {width:100%; padding: 0px;}

#content p {font-size:1.2em;}

#content ul {margin:0px; padding:0px;}

#content li {float:left; display:inline; list-style:none; width:181px; text-align:center; margin:0px; padding: 10px; border: #FFFFFF solid 2px;}

#content li:hover {background:#676666; border: #000000 solid 2px;}

#content li:hover h3 {color:#f8a053;}

#content h3 {font-size:1.6em; font-family:Denmark; margin: 1px 0px;}

#price {font-family:Denmark; font-size:1.4em;}

button {margin:5px; font-family:Denmark; font-size:1.4em;}

#footer {clear:both; color:#FFFFFF; background: #000000; margin-top: 50px; padding: 5px 0px 100px 0px; text-align:center; font-size: 1.2em; font-weight: 500;}

#footer a {color:#FFFFFF; text-decoration:none;}

#footer a:hover {text-decoration:overline; font-weight:900;}

#footer ul {margin:0px; padding:0px;}

#footer li {display:inline; margin:0px 2px;}

#product2 img {display:none;}

#product3 img {display:none;}

#product4 img {display:none;}



An Example of What Can Be Done

This demonstration gave an example of how you might convert your existing ecommerce website to a mobile-friendly store using basic CSS. Every store will have different challenges and tradeoffs to make, but optimizing your site for mobile customers can be done.

[practicalecommerce]

Norman plan to begin Web design classes

Residents can get tips on how to design a Web site during the next session of "Ask the Geek" at 6:30 p.m. July 27 at Norman Public Library, 225 N Webster Ave.

Traci Stallings, who teaches college computer classes and works in online marketing, will teach the two-hour session.

The beginning Web design class will cover accessibility standards, navigation techniques, audience needs, browser/platform concerns, and connection speeds.

Registration is required, and participants must have basic keyboarding and computer mouse skills to attend. To register, call 701-2620.

[newsok.com]