Design*Sponge » Blog Archive » biz ladies 09: website design & user experience

today’s biz ladies post is dedicated to a topic that’s near and dear to my heart- website design and user experience. as someone who looks at least 200-300 websites a day via submission emails, i can tell you that there are some definite do’s and don’ts when it comes to creating a site that entices people to visit, learn, and shop. today lawyer (and craft lover) diana van helvoort will be sharing her expert tips for creating a website that gives your users an ideal experience. no matter what sort of business you run, it is always good to know the tricks of the trade to create a site that provides both what you and your customers need.

CLICK HERE for the full post after the jump!

WEB SITE USEABILITY AND USER FRIENDLINESS

Hello DS readers! Before I jump to today’s Biz Ladies topic concerning web site usability and user experience, I’ll tell you a bit about myself.

My name is Diana van Helvoort, and although I’m a lawyer by profession, I spent most of my working years as a project manager in the IT world, managing projects in the area of web content management as well as web shop and portal set up. Two years ago, I was ready for something else, and decided to take the plunge by leaving the corporate world and becoming an independent small business owner in the crafting and design area. Old love revived.

My knowledge and experience in the field of internet and the setup and managing of web sites, certainly helped me a lot to get my own business started, and today I’m very happy to share some of this experience with you. Hopefully I can give you some good tips to help make your site a successful one. One that sticks to people’s minds, not only because of the products presented, but also because it enables them to find what they look for in a quick and pleasant way.

To get started, I’d like to tell you about three core elements that influence web site usability. For each of these key topics I’ll try to give you some tips on how to get started as a small business owner (knowing about limited time and budget resources from my own experience!), and I’ll close off with a check list that will hopefully help you assessing your current web site, or getting started on a brand new site.

Core Elements of Usability

All of these three elements are equally important.

1. Structure
2. Look and feel
3. Stability and functionality

1. Structure

When it comes to designing a web site, many site owners put a lot of thought and energy in the way a site looks (The so-called “look-and-feel” of a web site). Something just as important however, is the site’s structure. It is key to the user-friendliness of your site that people know at a glance what they can expect, and, as a next step, where they can find the details. They are not going to dig through a labyrinth of links, as surfing time is short. Even if they decide they don’t need it now: A site that clearly conveys its content is quicker to grasp, more easily added to a “favorites” list, and more likely to get recommended to a friend.

Site structure is about how the single pages within your web site are grouped and how they link together. To get a user-friendly structure in place, it is vital to bring two things together: Your target group and the key message of your site.

For instance: Is selling hand-made products directly to end-users your primary goal? Do you want to provide an inspirational platform for local/international readers on a specific topic, or is your web presence a virtual business card that functions as a service portal to a brick-and-mortar distribution system?

Your core content is where you need to built your site around.

Tips:

1. Making a mind map is a good tool to translate all the above to your own situation. Start by putting the core goal for your site in the middle of a blank page and add pieces of related content around it as you think of them (keywords will do). After an initial brainstorm, you’ll need to start grouping all these pieces in logical segments. Also check competitor’s or your own favorite web sites for important content bits you might have forgotten.
2. Leave the results for a few days, then come back and rigorously shift through all the categories you put together. It’s very important to keep it simple. Don’t overload your site right from the start. Once you’ll have a picture of your content groups it will be relatively easy to pull your site navigation together. This will show you how many pages need to be created, and how they should be linked. In case you decide to involve a web designer for the actual site creation – this is an excellent preparation for your first meeting.

To summarize the steps:

* Establish your core content: What is the goal of your site?
* Check other/competitors sites for content
* Group all the found content pieces logically
* Rigorously select keeping your target customers in mind.
* Use these findings as a basis for your navigation structure.

3. Draw out your complete site. Only this way you will catch most of the required navigation links from the start.

4. Keep it simple: Don’t create too many pages. This will make your navigation list too long or too cumbersome for your users. As a rule of thumb for small businesses: Four to five levels deep, and 3 to 4 levels broad is enough
5. Remember: Core content (e.g. the landing (=entry) page of a web shop) should never be more than two to three clicks away from within any point of your site.

2. Look and feel

This part is about the way your site actually looks and the lay-out of its pages. It encompasses things like color schemes, font types, pictures and page size. If the structure discussed under point one (Structure) forms the bricks, this is the wall finish. There are many subjective choices that can be made here, but there are some objective facts that help making the site attractive as well.

In most cases help of a web designer (or friend) is most welcomed here. Color schemes, and web fonts are relatively easy to manage, but resizing pictures, creating and managing style sheets and setting up a page lay-out in a web page programming tool are not always easy.

Fortunately many web hosting providers also offer free web building tools. These will give you a gliding scale of freedom on how to create your web site, depending on your skills or willingness to dive into this subject matter. If you have no budget for a web designer and have no experience yourself: Stick to the given templates of these tools for starters and tweak them to your liking. They might not lead to the most original web pages, but you won’t go wrong with them either if you keep your list from point one (Structure) at hand.

Tips:

* The design should be fit your navigation and core content as established under 1 (Structure).
* Again: Keep it simple. Flash intros are great for Prada, B&B Italia and the new Harry Potter but don’t do a lot for most other websites. Same for music, and overly creative fonts.
* Text should be short and simple. Have your spelling checked.
* Use any colour scheme you like, as long as it fits your product/style, and ALL text remains visible.
* Use good pictures. Invest in (product) pictures!!
* Be consequent throughout your site when it comes to lay-out, font, color schemes etc.
* Use a statistic tool. Not only to keep track of the amount of visits, single visitors and their location, but you can also have the tool track how often specific areas of your site are being visited and for how long (e.g. via Google Analytics, which is for free).
* Once you have your web site ready (or your web designer has) make sure to get a couple of friends/family members/trusted colleagues to look at it. It easier for them when you prepare a little questionnaire with some concrete questions like:
o “Which browser do you use?”
o “Does the site show properly on your screen?”
o “Do you find all text easy to read (font, font size, font color, line breaks)?”
o “Do the pictures load quickly?”
o “Are the product descriptions clear and do they convey enough information on the product?”
o “Can you find information on payment and shipping easily?” or “Is it easy to locate a reseller in your neighborhood?”
o “Do you miss specific content or information on the site?”
o Etc.etc.

3. Stability and Functionality

Stability: Worst thing that can happen to a site is when it is down too often. Therefore: Choose a stable provider, with a clear service level package, clear communications on down-time, and good accessibility when there are issues (email, telephone). 100% site availability does not exist, but 98% is close enough.

You can change the “look and feel” of your site sometimes to give it an upgrade or a fresh impression, but don’t dabble too much with the navigation unless it’s a clear improvement. Returning visitors and customers will thank you for it.

Functionality: Product specifications, language choice, store locators, newsletter registration, payment options, product views, downloadable files, polls. The list is endless, and it’s good to keep yourself informed about the possibilities and what your competitors offer, but in the end let your core content and targeted visitors give you your direction on what to add and what not. For example: Picture galleries are excellent for art work presentation, but only form an overhead to manage for a web shop. Adding a “print this page” icon is great for a list of events or products with technical specifications, but not required for a simple product picture with pricing information.

Tips:

1. Use a link checker tool! Here’s a list that compares some of the tools: http://www.cryer.co.uk/resources/link_checkers.htm but there is many more on the web. Just google on “link checker”.
2. Add only functionality that makes sense in relation to your core content and target visitors. E.g. Payment options, available languages, “print this page”, newsletters, polls etc.
3. Be careful in choosing your provider and always opt for a system that makes it easy to add or reduce functionality. You don’t want to run to your web designer for every little sentence change, copy and paste of standard code or picture upload!

CHECKLIST

* Is the focus of your web site clear enough? All “roads should lead to Rome” in this aspect!
* Have you put all your content and functionality up with your target group in mind? Look critically at your existing or planned site? Are you really using the newsletter feature regularly? Do you need another language maybe?
* What is the “depth” and “width” of your site? Does it exceed the “4 to 5 levels deep and 3 to 4 levels broad”-rule of thumb for a small business site? Remember: the deeper/broader you go the more complex your navigation gets and the more content you have to maintain!
* Do you have a link checker?
* Have you checked your site with different browsers?
* Do you have a site statistics tool activated that can track the amount/duration of visits to different areas of your site?
* Are you entirely dependent on a web designer for adding content/pictures/bits of standard code functionality? If yes: think about ways how you can make yourself more independent, otherwise the cost of maintenance could become a burden.

Good Luck to you all with your web pages!

I’m a professional web designer and was just looking at some handmade product websites this morning wishing I could just go in there quickly and fix everything. I know that the average person doesn’t have this sort of insight into what makes a good website and this is a great tool. Thanks for providing clear insight and making the web more beautiful! :)

I am also a pro-web designer and this is right on the mark.. Simplicity, though, should also be more of a pointer than “is your website clear enough” —website design has seen crazy days – from simple to bells and whistles galore and now back to simple… people don’t want to spend the time to “click too much”.

Wow! This is awesome. I am currently teaching myself HTML so I can build the website for not only my jewelry website but also for my day job’s business of jeweler’s tools and equipment. This is now bookmarked as reference tool!

Great article! Thanks so much for sharing your experiences and insight.

I have been in a bit of a stalemate creating a website for my new stationary/invitation design business. I design mainly for paper goods & have zero experience with websites. I could create my ideal look for the website in Illustrator but don’t know how to translate that into a website. Anyone have suggestions on what to do on a budget? Can a website designer take my design and turn it into a website? Or has anyone used a GREAT website template site?

I would also be interested in learning more about the “depth and width” terms.

Also, is there a place you could refer us to that compares the services, prices, and reliability of certain hosting sites (like GoDaddy, Moonfruit, etc)?

Thanks!

thanks for all the tips! Very useful, especially as I’ve just created my own site (nothing to do with design or other fields of the sorts, so I wont even add the link, esp. as it’s in Slovene, so not much use to any of you here.) but anyone wishing to create their own website – I did it through MrSite! dead easy to use, and lots of options! I loved it.

Hi this is Diana – its great to read that my article is helpful for many of you. I think the Biz ladies series is a fabulous idea of Grace, and I’m glad I could contribute something to it!

Concerning Lydia’s/Juliette’s questions on the terms “depth” ad “width”. Lydia goes into the right direction by assuming it has to do with “horizontal and vertical tabs”.
Just imagine your web site to be a pyramid. The home page is level 1, this page contains links to other pages (for instance “shop”, “news”, “About us”). All these pages are level 2 pages. Level 2 pages can contain links to yet another set of pages. Those would be level 3 (For instance from the level 2 “Shop” links go to a category “Bags” and a category “Belts”).
If you’d draw this out on a piece of paperfor your own site, you can see exactly how “deep” it is by counting the levels, and how “wide” it is by counting the amount of pages that do not contain links to ne pags (Note: There is no need to count every single product page – just the main categories that play a role in the navigation).

An exampple is for instance the site map of the UN: http://www.un.org/ga/sitemap.shtml. You can see that their web site is quite “wide” but only three levels deep.

I hope this helps a bit!

Juliette: To your question about host comparison – I just came across this site http://www.findmyhosting.com/

Their list of criteria doesn’t go into details on shop functionality but they seem to cover most key requirements for general hosting.

Having been doing web stuff for pay for a long time, I’d add one thing, but possibly put it at the top of the list :)…

KEEP A BACKUP OF YOUR SITE

things happen. eventually you *will* need a clean working copy of your files.

minor advice – if you’re designing a big clean site and have control over the layout, it’s not a bad idea to keep a design grid in mind. (google ‘design grid’, you’ll see what i mean)

to Megan – yes a designer should be able to take your illustrator file and create a site. that’s not really any different than how things are in many larger companies where the designer hands off a photoshop image to a dev team.

Thanks for this article, a web site remodel is my current business chore.

In researching design I found mention of SEO (search engine optimization) and was told that would affect my front page design, as it should have more wording than I find attractive.
Is this true? Do you have any suggestions for this important technicality?

I’ve bookmarked this post to share with the many people I encounter who need a web site but are going about it the wrong way by thinking only in terms of graphics and design. Thanks for recognising that the pretty pictures are only 10% of what we do!

Excellent information! Many of the tips included here also apply to blogs, which in some ways can be a substitute for a Web site (if “linked” content-wise) for those who are more comfortable in that posting venue. In any event, thanks for the advice.

It is important to have a professional website as it is the building blocks for establishing your online presence. It is also the image of your business that will be broadcasted to the whole world. A professional architect doesn’t build a wall that only lasts for a year. The professional architect with proper research plans and builds a structure to last. The same applies for your website.

Wonderful help! As I am struggling with four different sites (to showcase four fairly disparate arts) I find I’m considering every point you mention. My greatest tool has been to have savvy friends (and an editor husband) check behind me!

You definitely covered the whole package! When I started mine, because I am a designer all I knew was how I wanted it to look. Making a stable and functional e-commerce website was definitely a new challenge!

I LOVE that you just posted on this because I just redesigned my web site (I’m a photographer) and I feel like everything you said were the thoughts in my head as I worked on my site!

I went one step beyond the ‘mind map’ and actually made an outline/map of how the site was to look! I think user-friendly-ness is something so many folks overlook but it’s SO important!

I’m a Usability Analyst and I appreciated your post. I wanted to suggest that people pick up a copy of “Don’t Make me Think” – by Steve Krug. It’s a great book for helping people create simple, effective and usable web sites. The guiding thought you need to remember is that you are not your users. Test your site often with people and have specific goals that you want to achieve with your website. The key is matching your goals with what users will typically do. For example, if your goal is to guide users directly to the commerce on your site, but you bury that link in a hard to reach place (too many clicks to get there, or the link is placed in a spot users never look at such as places where ads typically appear), then users will never get to that part. Or they will get so frustrated looking for it that they’ll never come back. Users have goals when they enter your site. A successful site minimizes the gap between how you’ve designed your site to help users reach their goals and how the user WANTS to use the site to reach their goal. In an ideal world, those two things should be the same.

I agree that a clear and easy-to-navigate site is the key to initially drawing people in to explore it further. Focus is so important. It’s too easy to put too much verbiage on a site…. thanks for the valuable insights!

@Jen O
I do SEO at my day job, and sometimes an SEO specialist will request more words than you may want on your front page. A good SEO specialist can help you optimize what you already have and work with other elements to get the results you need. If you are considering doing SEO on your own I would highly recommend a pro membership to seomoz.org, it’s worth the money while you are getting started.

Thank you for another very insightful article. I visit Biz ladies first when looking for business information, and more often than not the best articles on business subjects are found here! Thank you!!

Write a Comment:

Design*Sponge reserves the right to restrict comments that do not contribute constructively to the conversation at hand, contain profanity, personal attacks or seek to promote a personal or unrelated business.