Posted by vitaly on Nov 27, 2009 in
Design & Graphics |
View Original Article 
By Cameron Chapman
Discovering what your clients really want is one of the most fundamental steps in creating a good working relationship. If you can figure out exactly what your clients want for their website up front, it will save both of you time and frustration later.
Creating a client questionnaire isn’t complicated, though it can be a bit time-consuming if you don’t know where to start. You have to think about who your clients are and what information you need from them, and then go from there. Below is a complete guide to creating a custom questionnaire for your design business. And be sure to check out 45 Incredibly Useful Web Design Checklists and Questionnaires for some examples.
Why You Need A Questionnaire
A client questionnaire serves two purposes. The first is to figure out what the new website should achieve. The second is to figure out what the client wants the website to look like.
Both of these things are very important to find out up front. By figuring out what your client wants and needs, you can avoid delivering something to them that doesn’t fit the direction in which they want to take their website.
Without a good client questionnaire, you could end up having to repeatedly go back to your client throughout the project to get more information or clarification on what they really want. You could also waste a lot time designing and coding things that aren’t quite what the client is looking for. A good questionnaire removes a lot of the guesswork in designing and makes it a better experience for both parties.
Formulating Your Questions
Your questions should get to the root of your client’s needs. They should also help you assess your client’s likes and dislikes.
Take the time to customize your questionnaire with the information that you most often need from clients. The types of websites you usually design, the industries you work with most and the level of technical knowledge your clients tend to have can all determine the kinds of questions you will include and how they are phrased.
See the “Further Resources” at the end of this post for lists of sample questions that you could use to create your own questionnaire.
Background and General Questions
Before you dive into the questions that will suss out how your client wants their website to look and what they want it to do, you need to get an idea of what the client is all about and why they’re looking for a new website. This section of your questionnaire can be very revealing, especially if they’re unhappy with their current website.
You’ll also want to get some general information in this section. Ask about the budget for the project, who you’ll be working with directly, who the decision-makers are and what staff are going to be involved in the design process and what their roles will be. Find out who their target visitor is, who their customers are, how they’re currently interacting with those customers online and how they’d like to improve that interaction. And make sure to find out whether they already have a domain name and hosting package that they’re happy with.
Here are some sample questions to gather background and general information:
Why are you looking for a new website design or redesign?
What do you like most about your current website?
What do you dislike most about your current website?
Do you already have a domain name and hosting plan?
Function-Focused Questions
Figuring out what exactly your client wants their website to do is key to making sure you give them what they want. You need to ask them questions that strike to the heart of exactly what they want from their website. Sounds easy enough, right? Except in many cases, clients don’t really know what they want their website to do. Your questionnaire can actually help them clarify their needs and wants.
Some example questions for figuring out how the website should function:
Do you want to sell products on your website?
Do you want a contact form or any other forms on your website?
Do you need an image gallery, video or other multimedia content?
Do you want a blog or other regularly updated content?
Design-Focused Questions
Finally, you’ll want some information about the aesthetics of your client. Now, in an ideal world, your client will have perused your portfolio and seen the kinds of websites you design and will have decided to work with you because they like your aesthetic. But that’s not always the case. Figuring out their design preferences up front helps you avoid designing something they will hate later on.
You have a few different ways to learn their tastes. Ask your client what colors they’d like to use. They may have a set color scheme or have colors associated with their brand. Or they may be open to your input. The same could be done for qualities that they want their website to be associated with (e.g. “bold,” “soft,” “professional,” “informal,” etc.).
One of the best ways to get a sense of your client’s design preferences is to ask them to provide you with examples of a few websites that have designs they like and a few websites whose designs they don’t like. Also ask them what they like or dislike about each of these designs, because this sheds light on their overall tastes.
Another, sometimes more telling, method of doing this is to show them five to ten websites and ask them what they like and dislike about each. This is often more effective, because you can choose websites that have a wide range of styles and get a fuller picture of what they like and don’t like.
Here are some sample questions to figure out the client’s design tastes:
Do you have a color scheme you’d like to use?
What words would you like people to associate with your website?
Do you have a specific style of design in mind?
What Not to Ask
I don’t know how many times I’ve seen questionnaires ask things that are either completely irrelevant or too technical for the average client to understand. Remember that your clients likely don’t know much about the technical aspects of design. They probably know they want something like an image gallery or a map, but they won’t know whether the things they want will require a custom database or JavaScript. In many cases, they might not even know basics, like whether their website should have an RSS feed or Flash.
Here are some examples of unhelpful questions to ask:
Will you need a custom database?
Will you need JavaScript (jQuery, MooTools, etc.)?
Will you need an e-commerce solution?
Will you need to handle uploading and downloading?
Will you need a searchable database?
While getting an idea of what the technical specifications of the website might be is important, structure your questions around the features and benefits of the website, not the specifications. So instead of the questions above, ask things like:
Would you like a search engine on your website?
Should visitors be able to download files from your website or post their own files?
Would you like visitors to be able to sign up for accounts, or would you like a secure area just for visitors who have signed up for accounts?
Would you like to sell products on your website?
Planning for the Future
Make sure to ask clients about their future needs, too. If you know they might want an e-commerce solution six months down the road, make provisions for that in the initial website design. The goal is to build a long-term relationship with the client, so the more involved you are in their goals and plans, the easier your job will be now and in the future.
You’ll also want to ask clients about regular updates and maintenance for the website. And you’ll want an idea of how much updating and maintaining they will want to handle in-house and how much they might want you to do. Some sample questions:
How often do you want or will you need to make updates to your website?
Do you have someone in your company who will be responsible for ongoing website updates? Does that person have any experience with website maintenance?
What features do you anticipate adding to your website in the future?
Tips To Refine Your Questionnaire
Once you have a basic questionnaire mapped out, it’s time to make some refinements so that you get the best results from it. The goal of the questionnaire is to improve your workflow and communication, so you want the process to be as efficient and effective as possible.
First of all, keep the questionnaire short. You want as much information from your clients as possible, but if your questionnaire is too long, your clients will get bored and may not give it the attention it deserves.
There are two ways to keep the questionnaire short: limit the number of questions and/or limit the length of questions. Refine your questions until they are as short as possible (five to ten words is plenty).
Don’t be afraid to be creative with some questions to get your clients thinking outside the box. Ask a few unorthodox questions. Ask them to compare their website to something unrelated (such as a building or a food). You could provide sample answers to guide your clients to giving you the information you’re looking for.
Continue to refine your questionnaire over time and as you get client feedback. Consider adapting the questionnaire to individual clients to get information that is more relevant to particular projects. It’s your questionnaire: use it the way that works best for you and your clients.
Further Resources
How to Extract the Facts with a Web Design Client Questionnaire
An excellent annotated client questionnaire from Freelance Switch.
How to Create an Effective Web Design Questionnaire
A fantastic post from Six Revisions to help you design your own questionnaire.
Increase Productivity: Create a Client Questionnaire
A very basic questionnaire guide.
101 Invaluable Questions to Build Your Web Design Questionnaire
A great resource for finding questions to include in your own questionnaire.
46 Questions for a Web Design Project
An excellent list of potential questions to ask your clients.
Simple & Effective Web Design Client Questionnaire
A sample questionnaire, with resources for creating your own.
(al)
Tags: How To's, questionnaire
Posted by Louis Lazaris on Nov 27, 2009 in
Design & Graphics |
View Original Article 
How would you like to design a beautiful, colorful, stimulating website that is captivating, memorable, and allows you to let your creative juices flow without the need to worry too much about usability and best practices? In today’s web design market, it’s rare that such a project would present itself — unless you were asked to design a website for children!
Websites designed for children have been largely overlooked in web design articles and design roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to web design for children’s sites — practices that should usually not be attempted on a typical website.
This article will showcase a number of popular commercial websites targeted towards children, with an analysis of trends, elements, and techniques used to help keep children interested and stimulated.
Design That Stimulates the Senses
Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.
Bright, Vivid Colors
Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.
How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.
PBS KIDS
Herman’s Homepage
Funbrain Playground
A Happy Mood
Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.
Mickey Mouse Clubhouse creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.
The Play-Doh website creates a happy mood using a beaming child as the focal point.
The Fifi and the Flowertots website has a large smiling Flowertot character in visual focus, creating a happy mood.
Elements From Nature
Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.
The Disney website alters its theme depending on what product is being promoted. In this screenshot, they use a Grand Canyon-like landscape to create a memorable visual experience.
Discovery Kids uses an underwater theme.
Club Penguin presents an arctic theme.
CBC Kids uses a seasonal theme based on simplistic, eye-catching graphics.
PopCap Games uses a grassy landscape in front of large rays of sun.
Larger-Than-Life Design
Large design elements have proved to be effective in all types of web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.
Animated Characters
Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.
Barbie
Mr. Rogers’ Neighborhood
Disney Princess
Thomas the Tank Engine
Barney & Friends
Depth in Design
Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.
The Webkinz® “Adoption Center” uses shadows, a life-like character, and other 3-dimensional elements to create a design that has depth.
Poisson Rouge creates a deep, realistic atmosphere using a window that looks outside at the sun, along with a number of other 3-dimensional elements.
Rainbow Magic creates depth in their design through a Flash-animated landscape scene that moves as the user hovers over different elements.
Navigation and Call-to-Action Areas That Stand Out
In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.
Peppa Pig has a horizontal navigation bar that includes large icons and easy-to-read descriptions for each item.
The Winnie The Pooh website incorporates their navigation bar into their “forest” theme, using large wooden graphical elements that won’t be overlooked by the user.
Sesame Street has an easy-to-locate horizontal navigation bar, along with large call-to-action areas.
My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.
User Interaction
Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.
On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.
Interaction Through Animation and Sound
Effects and experiences created with Adobe Flash are discouraged in typical modern web design, but on children’s sites there is almost no other option. It’s true that JavaScript animation and effects have come a long way because of the many JavaScript libraries available, but the ease with which complex animations can be created with Flash makes this method the first choice for many commercial websites designed for kids.
The Pauly’s Playhouse site, like most of the websites featured in this article, is built entirely in Flash.
The Hot Wheels website includes an animated “car of the day” that zooms onto the screen when the page loads, creating visual interaction.
Roary the Racing Car has a brief “flash intro” with a “skip” button. This is an old-school trend in typical web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.
The Yahoo! Kids navigation bar is created with Flash and makes sound effects and animates when its items are hovered over. This trend is very common on many of the sites featured in this article.
Interaction Through Video
Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.
Kids’ CBC – Video
Yahoo! Kids Movie Guides
National Geographic Kids – Videos
Interaction Through Games
What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.
CBeebies – Gordon the Garden Gnome
Toy Story – Woody’s Big Escape
Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.
Printable Elements
Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.
Pingu Coloring Pages
Crayola Digi-Color
Peppa Pig Colouring Pages
Thomas and Friends Online Colouring
Teletubbies – Print To Color
Unconventional Methods
We’ve already discussed a number of elements that, in modern typical web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.
Changing the Cursor
This is absolutely viewed as a bad practice in standard web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.
The cursor on the Discovery Kids website turns into a snapping bear trap graphic.
The cursor on the Sesame Street website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.
Talking Navigation
Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.
The PBS KIDS navigation bar speaks using children’s voices, when the user hovers over it.
The CBeebies navigation bar uses a voice to sound out the destination of each navigation item.
The Bob the Builder navigation bar speaks to the user on mouseover.
The Fifi and the Flowertots features a speaking navigation bar.
Breaking the Grid
While traditional modern web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.
This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.
The navigation bar on the Spongebob Squarepants website is slanted, going against convention in typical grid-based web design.
The Hannah Montana website features navigation bar graphics that break the grid.
The In the Night Garden website features a very unusual navigation bar design that bears little resemblance to that found in a conventionally-structured design.
Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.
Kids WB is rigid, and not as memorable.
The Crayola website is somewhat old-school with its grid format and vertical navigation.
Neopets is also designed on a more structured grid.
Granted, in some cases a stronger grid-based design would be necessary if the audience was an older child audience, as is the case with SI Kids, shown below.
Taking Responsibility
If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.
Promoting Education
Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.
Online Learning Games from Fisher Price include games that vary according to age group.
Funbrain promotes itself as “The Internet’s #1 Education Site for K-8 Kids and Teachers.”
Information for Parents
Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.
Sesame Street Games includes a “Parent Tip” box.
BEN 10 has a “Parent Stuff” link in their primary navigation bar.
Thomas the Tank Engine includes a “parents” link.
Usability Testing
Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.
Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.
Conclusion
Here is a summary of both conventional and unconventional best practices for designing a website for kids.
Conventional Best Practices
- Create elements that are large and visually memorable
- Use bright, vivid colors that stimulate the senses
- Incorporate elements from nature
- Create depth in the design
- Add navigational elements that are large and easy to find
- Use video
- Include printable elements
- Break the grid
- Make modifications based on usability testing
Unconventional Best Practices
- Create a happy, playful mood
- Use animated characters
- Use graphic-heavy navigation bars
- Use Flash animation abundantly
- Embed motions and sounds that trigger on page load
- Include a “games” section
- Change the cursor to contribute to the theme
- Add voices to navigation rollovers
- Be accountable to both children and parents
A web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be big hit with children.
© Louis Lazaris for Smashing Magazine, 2009. | Permalink | 3 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: kids, showcases
Tags: Inspiration, kids, showcases
