Advertise here with BSA

Designers aren’t just creating pleasing graphics for the Internet anymore. As a web designer you need to consider other properties of user interaction and coding. UX design is possibly the most important topic to cover, and this is especially true designing web forms. All webmasters should understand this message.

Your goal is to offer the simplest path for your users to move from filling out input forms to hitting the submit button. There isn’t a lot of special effects required, although jQuery form plugins have always been a popular topic. In this article I’d like to focus on the user interaction and how each visitor is experiencing your forms. There are techniques you can use to streamline the process which converts to less frustration in your audience.

Keep a Small Focus

I’ve heard dozens of users complaining about signup forms which require too much info. If you’re looking to increase user registrations then you want the form to be as simple to complete as possible. The same goes for newsletter signups and other similar types of input data.

The minimum number of fields will vary depending on your objectives. Registration forms may ask for a username, e-mail address, and 2 password fields. This is certainly reasonable and users looking to signup will be expecting about this length. But consider other signup forms such as the default WordPress style.

Here your visitors are only required a single username and e-mail address. The system then generates a password and sends an e-mail to the given address. This works to reduce original form size and keep spammers at bay. You don’t need to verify your e-mail through a link, but you do need access to your inbox to acquire your new login password!

Perform Actions as Expected

The one thing most users hate is unexpected page activity. You will absolutely want to keep your form behaving in a natural manner, and reduce any JavaScript extras to a minimum – popup guides and Ajax validation are key components. Usable forms shouldn’t be split into multiple columns and spanned across the page. This is just one example of poor technique.

Another mistake I run into often is misuse of the tabindex HTML property. This attribute is wonderful from a usability standpoint since your visitors can fill out forms even without a mouse. But if you have these numbered out of order, or only fill out a few input fields then the whole system is thrown off. This is certainly true with signup forms but even more-so with other types of input – especially online shopping carts.

Security is Priority #1

Whether you’re dealing with customer credit card numbers or simple e-mail addresses you should always put website security first. Visitors are trusting your website and backend code to process each form properly and store user data in a secure database.

If possible I recommend using an SSL certificate on your entire domain. This way users won’t just be protected during signup, but their entire viewing session will be protected via https. It can be a bit of work, but some web hosts like Fat Cow will actually aide you in the setup process. It’s certainly not a requirement for every site but it doesn’t hurt to go that extra mile for security. Your users will feel much safer, and it builds a level of trust going forward.

Additionally don’t fall for some of the more obvious ploys to detect data. Always use a POST data type in your forms unless the information isn’t exactly “private”. GET requests should only be used if the URL structure can benefit from the data(ex. search pages like search.php?q=my+search+terms).

Both of these methods will pass backend data in a similar fashion. But GET data is processed openly in the URL and is susceptible to hijacking. POST data is much more secure, especially behind an HTTPS connection. This fantastic guide by Think Vitamin explains the differences in an easy-to-digest format.

Large, Spacious Inputs

I have listened to a lot of arguments surrounding the sizes of web forms. Standard CMS brands including vBulletin, Joomla!, and Drupal use fairly smaller text sizes for input fields. These are generally default 10px-12px fonts with very little padding.

The signup form on Diigo has a very spacious layout! You need to alleviate room between the many different input elements. Also bold text lets you know which fields have been entered and which are still untouched. As you highlight each field the form responds with a faint blue tint – just a marker to let you know where your cursor stands.

The classic Digg registration form was designed and built in a very similar way. Twitter’s registration form is also oversized so you can’t miss a beat. They are not afraid to use extra white space which gives prominence to the input fields. Their system of labels is also very unique by setting placeholder text when the field is empty. By dropping the color to a light grey you can easily distinguish between user-added text and the field presets.

Conclusion

There are a whole library of new trends emerging in web design. The newer CSS3 specs are still growing in popularity and we can see these properties in various layouts. Web forms are no different and deserve just as much attention from designers.

I hope these guiding principles behind user experience can invigorate you towards building better web forms. The process of handling backend data can be tricky even with simpler languages like PHP. But with just 1-2 weeks of practice you can likely figure out a system that works for you. Web developers both frontend and backend would do well to learn and understand these paradigms. If you’d like to share ideas on building accessible web forms please let us know your thoughts in the post discussion area.

Advertise here with BSA

In the design field there is a deep understanding of intuition vs science. Often designers will stress when trying to perfect a layout. This could be within sizes, positioning, page structure, color theory, or a whole host of other categories. But as you mature your design senses grow with you, making it a lot easier to craft pixel-perfect interfaces.

Below I’ll be going into some great tips for UI designers. We’ll mostly be focusing on designing for the web (browser-based apps). But mobile designers may take to heart a lot of the same information. And since intuition can only carry you so far, it helps to take a step back and understand the more methodological processes of interface coordination. You don’t need to know anything about Adobe Photoshop or HTML to understand this article, but it certainly won’t hurt!

Question your Processes

We all get stuck into loops. Or as we prefer to call them, schedules. These are the daily routines we follow through to get our objectives completed. There’s nothing inherently wrong with this, but how often do you stop to question yourself? This is an important part of growing as an interface designer and as a person.

Since we use tons of interfaces every day it seems like we’d understand how they work best. And from a designer’s perspective, analyzing websites can give you some great ideas towards structuring your own projects. But when you take a step back you begin to notice that not all interfaces are created equal. Below is a small list of some questions you should ponder:

• What are my users’ goals on this page?
• How can I make it easier for the user to complete their goal?
• What are the most important aspects of this page? should I remove or add anything?
• Is there possibly a better/quicker way to do this current task?
• Who else has done something like this on their website? Should my functionality mimic theirs in any way?

If you can put aside 5-10 minutes to think about these questions you’ll surely come to a sound conclusion. You should take note that ultimately any website is being created for the user’s sake. It doesn’t really matter how perfect or spicy the page looks, only that it works in simplicity.

Lock Down your Objectives

It helps to come into the process masking yourself as an anonymous user. Pretend you are any standard user logging onto your website. What goals are you looking to accomplish right from the home page? Can you currently find where you need to go for these?

The answers may surprise you. And they will vary from each type of website or web application. Sometimes users are looking to update their profile, or maybe upload photos. Other times visitors may be looking for a specific page. There are a lot of websites which strictly offer information – how quickly can you find the page you’re looking for? And subsequently, how quickly can you spot the information in text?

If it would be easier, try listing out a flow chart for a mock set of user interactions. Create a few aliases and give them objectives to complete on your website. Then either write or type a flow chart for each of their clicks and actions to get where they need to go. In this process you may notice some glaring flaws in your design work. This is by far one of the most useful techniques for nailing down some of your poorer interface choices.

While going through your pages also consider each section of typography. Are the fonts large enough, maybe even too small? This one is a bit more tricky since you likely can’t mimic the conditions of your users. Everybody is on a different type of system running many varying monitor resolutions. But you can at least get an idea of how your fonts display in the average web browser. From there you can update with slick new font styles to match your template design.

Arranging Page Elements

This is a really big aspect to consider on each of your pages. Most likely you’ll be running a mock design template which mirrors itself on each page. This means many of the overhead details will stay the same from page-to-page: headers, navigation bar, any sidebars, etc.

Since you’re always looking at the same template you may personally gloss over awkward layout elements. Try bringing in a colleague or friend for suggestions. You don’t need to apply their changes, but getting a 3rd party to look over your design gives you some external perspective into the issue. Just keeping things simple will always work in your favor. Users like things simple and easy to access, which also gives you less work.

Try also to remove cluttered areas with buttons and links scrunched together. When you first land on the page what grabs your attention? This should be whatever your users are most likely looking for! If that’s content, make sure your headings stand out bold and proud. Maybe your users will be looking to register or log into your website. If that’s the case don’t throw a form down into your sidebar, make sure it’s easy to find and work with.

If possible try sketching a basic mockup of your website components. You don’t need to match any color settings or detailed graphics. Just boxes with labels and maybe some arrows to describe the page flow (drop-down menus or other jQuery effects). Synchronicity is key here. Whatever changes you decide to apply should be site-wide. This rule can be excluded if you’re working with many different types of pages.

For example, a portfolio gallery will look much different than a user profile page. This is because the people viewing these pages will have completely opposing goals. You should certainly try to match colors, buttons, and at least your heading area to reduce confusion. Toying around with a mockup in Photoshop can give you a lot of ideas for these different page layouts.

Gathering User Feedback

Every web designer should understand that user feedback is vitally important. It may be the most important part of your contacts on any website. Without visitors, your website is just a lonely part of the World Wide Web. So their opinions may not always be perfect, or even good, but you should always make it possible for users to offer their feedback. Particularly in the simplest fashion you can.

If you know how to develop small contact forms PHP is a versatile language. Although for WordPress users there are many alternatives. Even if you can’t use either, just adding an e-mail address somewhere onto your site makes it much simpler for user contact. If you’re a passionate UX designer you may even consider adding an entire page dedicated to user feedback and bug reports! It’s a great way for startups to pinpoint errors in their design with their userbase as a free market.

Conclusion

Arranging perfect and harmonious user interfaces is a very difficult task. By no means is anybody the perfect web designer. It does take years of practice to fully understand the mechanics behind digital graphics and design theory. But you don’t need a degree to understand how user experience works.

This article should have gotten you thinking into some new realms of creation. Approach each website you visit with a keen eye, and try to take away some perspective for your own designs. If you have suggestions or ideas for synchronizing web interfaces please offer them in the comments area below.

Advertise here with BSA

With so many web design blogs available on the Internet it can be hard to know which ones are worth checking out, so we have compiled a list of 20 web design/development blogs we think you should try and read. Some of the websites in this list you will have heard of but some are small blogs with fantastic content that we hope you will check out.

Design Instruct

Design Instruct is a regularly updated web magazine for designers and digital artists where you can find and learn design tips and tricks.

Twitter – RSS Feed

UX Booth

The UX Booth is a blog by and for the user experience community. Our readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome.

Twitter – RSS Feed

Vandelay Design Blog

Vandelay Design Blog is a blog which showcases the best in design and resources, it also runs regular giveaways.

Twitter – RSS Feed

The Web Design Blog

The Web Design Blog was setup in 2009 by freelance web designer Phil Matthews with the intention of providing web design news, articles, tutorials and interviews for everyone to enjoy!

Twitter – RSS Feed

Just Creative Design

Just Creative Design is the personal portfolio of Jacob Cass, the blog includes graphic design tips, articles and resources on most subjects of design.

Twitter – RSS Feed

Six Revisions

Six Revisions is a blog ran by Jacob Gube that publishes practical and useful articles for designers and web developers.

Twitter – RSS Feed

Line25

Line25 is a blog ran by Chris Spooner, the site is based around web design and includes a wide range of posts to help feed your creativity.

Twitter – RSS Feed

Tutorial9

Tutorial9 is a collection of teachers, experts, and caring folk from around the world, all gathered in one place to pass along our knowledge to absolutely anyone interested in learning.

Twitter – RSS Feed

Onextrapixel

Onextrapixel is a blog dedicated to delivering useful, comprehensive and innovative information for designers and web developers.

Twitter – RSS Feed

Webdesigner Depot

Webdesigner Depot is an exciting blog designed to explore different web and graphic design techniques, great examples and best practices.

Twitter – RSS Feed

Design Heaven

Design Heaven is a new design blog which posts inspirational articles showcasing the best in design from around the web to help inspire designers.

Twitter – RSS Feed

Speckyboy

Speckyboy Design Magazine was originally the personal portfolio for Paul Andrew but is soon grew into a blog. They cover a large variety of web design and development based topics.

Twitter – RSS Feed

Hongkiat

Hongkiat is a technology and design blog that constantly showcase some of the best materials, resources from the Internet to inspire their readers.

Twitter – RSS Feed

DesignM.ag

DesignM.ag is a community-based website for web designers and developers. The site includes a popular blog, a user-submitted news section, a design gallery, and a design job board.

Twitter – RSS Feed

Design Shack

Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way.

Twitter – RSS Feed

Colorburned

Colorburned is a design blog featuring some of the best design news, resources, and tutorials from around the web.

Twitter – RSS Feed

PelFusion

PelFusion is a design blog, which covers a large area of web design and development as well as running regular industry related giveaways.

Twitter – RSS Feed

[Re]Encoded

[Re]Encoded is a resource both for active web designers/developers and for people who simply enjoy good design and want to learn more, see more and do more than they already do.

Twitter – RSS Feed

Tutorialzine

Tutorialzine provides you with high-quality tutorials, freebies and resources that will help you with your day-to-day development needs.

Twitter – RSS Feed

Abduzeedo

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. They also include tutorials on Photoshop and Illustrator.

Twitter – RSS Feed

Advertise here with BSA

There’s a never ending supply of information out there for us web designers. If there’s something we need to learn, we can find it in one form or another. Sometimes it may be on a blog or it could be in a book. While you may have to shell our some money for a good web design book, there are a number of them out that have online versions that are totally free. Here are 10 you should find very useful.

A Practical Guide to Designing for the Web

A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout.

Getting Real

Getting Real is the business, design, programming, and marketing philosophies of 37signals — a developer of web-based software used by over 1 million people and businesses in 70 countries.

The Elements of Typographic Style Applied to the Web

In order to allay some of the myths surrounding typography on the web, is structured to step through the principles found in Robert Bringhurst’s The Elements of Typographic Style, explaining how to accomplish each using techniques available in HTML and CSS.

jQuery Fundamentals

jQuery Fundamentals was written to help you understand the fundamentals of this JavaScript library and teach you how to complete basic tasks with jQuery.

Web Style Guide, 3rd Edition

Consistently praised as the best volume on classic elements of web site design, Web Style Guide, now in its third edition, maintains an emphasis on fundamentals while bringing every chapter topic up-to-date.

Access by Design

Access by Design offers guidelines for universal usability, and the online version includes examples and links to related articles and tutorials.

Web Designer’s Success Guide

Web Designer’s Success Guide is the definitive guide to starting your own freelance Web design business. This book gives you step-by-step instructions on how to do things like transition from full-time to self-employment and how to price your services appropriately.

The Web Book

The Web Book contains all the information you need to create a Web site from scratch. It covers everything from registering a domain name and renting some hosting space, to creating your first HTML page, to building full online database applications with PHP and MySQL. It also tells you how to market and promote your site, and how to make money from it.

Dive Into HTML 5

This book seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.

http://www.uiaccess.com/accessucd/index.html

This book will help you understand and apply principles to make your products more accessible.

Advertise here with BSA

A web design is made of many different elements, each having varying levels of importance and some demanding prominence over others. Some elements share a relationship, while others are not related at all. The tricky part is being able to communicate this visually and effectively. This is where the principle of contrast comes into play.

Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.

In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.

Contrast in Color

When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.

It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.

Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.

Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.

Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.

Contrast in Size

Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.

Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.

Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.

Contrast in Alignment

Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.

LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.

Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.

Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.

A List Apart is another great example of using centered heading with left aligned paragraphs.

Now Go and Be Different

Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.

Advertise here with BSA

There are a number of elements that make up a great web design, but probably one of the most overlooked and underutilized is whitespace. Every design has whitespace, but the problem is that not every design has enough. This could be due to the fact that inexperienced designers and their clients see whitespace as empty space and therefore a waste of valuable screen real estate. The truth is, whitespace might be one of the most valuable parts of your design.

What is Whitespace?

Even though its name seems to suggest otherwise, whitespace doesn’t actually have to be white. It gets its name from the early days of graphic design where most printing was done on white paper. Whitespace is simply the empty space between and around the elements of a design or page layout. This can include: space around graphics and images, margins and gutters, space between columns, and even the space between lines of type. Whitespace is also referred to as “negative space”.

Whitespace is made of nothing, but shouldn’t be treated that way. There are several benefits that a generous dose of whitespace can bring to a design. Simply by increasing the space between elements in a layout, a design can take on a more elegant appearance, and by injecting more whitespace into a web design’s typography, content becomes more legible.

Elegance and Sophistication

In print design, paper is a valuable resource and clients will usually want you to use every square inch of it. After all, it costs them money and they want to get their money’s worth. Similar value is placed on screen real estate in web design. They both have set dimensions and represent limited space in which a message can be presented by displaying text and graphics. This is why being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on, and you can afford to sacrifice that space in order to better present your message.

Luxury brands use this concept to convey an image of sophistication and elegance. Let’s take these two furniture companies for example. Pottery Barn, being the more upscale of the two, uses lots of white space between the various elements. Notice even the logo uses large amounts of whitespace between each character.

Rooms To Go, on the other hand, is a lower end furniture store and it shows in their web design. There are several factors that contribute to this, and a lack of whitespace plays a major role. With so little space between elements, I won’t even attempt to insert the little red arrows.

Notice how the list of category links is crammed up against the left border. Things like this can make a design look sloppy and unprofessional.

Lets’s take a look at two other brands that you will probably recognize. Below is a comparison of the Apple home page and the Microsoft home page. You will notice that Apple, being the epitome of elegance and sophistication, uses plenty of whitespace. While the layout of the Microsoft home page is a bit more crowded, resulting in a not-so-elegant feel. This is right in line with each company’s general brand perceptions.

Better Legibility and Usability

On a micro level, whitespace plays a major role in typography and even usability. Text that is cramped with minimal line spacing can be very difficult to read. By adding more whitespace between lines of text, content becomes easier to scan and digest.

Information Highwayman is the portfolio of D Bnonn Tennant, and it’s an excellent example of great use of whitespace within text. The large amount of spacing between lines makes the content a joy to read.

Micro whitespace not only makes text easier to read, but also helps separate blocks of content from one another. This can help a user differentiate where content starts and stops.

Analog is a single page website. So it’s important to create enough separation between the various blocks of content so that they stand out from one another. Here, the Analog team uses varying amounts to create separation and flow within the content. A larger amount of whitespace is used to separate the content blocks, then a smaller amount is used between the paragraphs within each block.

Develop an Eye for Whitespace

Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace. All designs are different so the amount you use will vary from project to project. The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.

Advertise here with BSA

In today’s web design world, so much emphasis is put on SEO, which forces us to design for machines. Even though this is a necessity for web designers, the focus of a design should be on that of the user – the breathing, typing, mouse clicking kind of user. The user experience (UX) design portion of the website building process is often overlooked, usually due to a lack of knowledge in the area. Luckily, there are UX focused blogs out there that are loaded with info, tips, and insights that can help you in your journey to becoming a user experience expert. Here are 11 of the best.

UX Magazine

UX Magazine was created to deliver a central place to discuss the critical disciplines that all enhance user experience.

Signal vs. Noise

Signal vs. Noise is the blog of 37signals. Having built popular web apps like Basecamp, they know a thing or two about user experience.

UX Booth

The UX Booth is a blog by and for the User Experience Community. It’s full of useful articles and resources on usability, user experience, and interaction design.

Adaptive Path Blog

Adaptive Path creates user driven products that deliver great experiences. Their blog allows them to share what they’ve learned with others.

UsabilityPost

The Usability Post is a blog about design – not about what it looks like, but about how it works. The aim of The Usability Post is to provide relevant resources, tips and insights into good design in order to help you make great products.

inspireUX

inspireUX is a blog that posts quotes relating to user experience (UX). Every quote on inspireUX focuses on the impact that user experience has on people, business, or the world. You can even download and print them out on 4×6″ index cards.

456 Berea Street

456 Berea Street is the blog of Swedish web professional, Roger Johansson. He writes about web standards, accessibility, usability, and other UX related topics.

Functioning Form

Functioning Form is a blog about interface design. That is to say, it is where art and technology emerge as experience, where message and medium meld, and where interactions are useful, usable, and enjoyable.

A List Apart

A List Apart Magazine is loaded with insightful articles exploring the design, development, and meaning of web content, with a special focus on web standards and best practices.

Boxes and Arrows

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

EverydayUX

EverydayUX is a blog that focuses on the design that we encounter on a day-to-day basis, especially as it relates to interaction design.

Advertise here with BSA

The navigation might be the single most important aspect of a web design’s usability. Without a navigation, you would be stuck on the home page for a very long time. I believe a navigation or menu must be easy to use, but this doesn’t mean it has to be boring. In fact, it helps to add a little flair to your navigation. It entices visitors to click and hang around your site a little longer. Here are thirty examples of beautifully designed web design navigation for your inspiration.

Billy Tamplin

Burciaga

The Swish Life

Mission Bicycle Company

Typejockeys

Red Velvet Art

MetaLab

Authentic Jobs

Icon Dock

Morphix Design Studio

Sushi & Robots

Utah.travel

Robert Alan

Hull Digital Live 09

NOSOTROS

Artua Design Studios

Internet Dreams

Strutta

Pirata London

Tapbots

Weightshift

Guifx

Owltastic

inkd

Bohemian Coding

Think Orange

Culinary Culture

Light CMS

Toggle

atebits

Advertise here with BSA

You are the most important person in the world. Wow, I got you to read the second sentence. Your interest is now piqued and you want to read more. If you do read this article, you will learn exactly how important it is to create compelling web copy. Between you and me, most readers just scan, but if you find a way to hook them in the first sentence and reel them in on the second sentence, you have a good chance that they will read the third. They may even read the entire article.

Don’t listen to those naysayers who tell you that website visitors only scan headlines and look at cute pictures. It’s a fact that visitors are more interested in what you write than every other aspect on the page. The problem is that most web writing is dreadfully boring, and oddly self-gratifying. Under the premise of helping you, the visitor, the writing is geared more towards establishing the writer as some sort of authority. Most web writing is very didactic, or teacher-student. I’m the first to admit I’m guilty of it, but not anymore. Here are some useful tips in creating words that people will want to read:

1. Be Personal

Stodgy paragraphs written in third person are no longer in fashion. The internet is extremely personal, and getting more personal by the moment. People come to the internet to explore in a relaxed nature, not to feel like they are reading from an encyclopedia. I admit, sometimes Wikipedia is too difficult for me to understand, and that’s okay because I can always find another website that can explain it in simpler terms. You want to have that website where visitors can go to explore without pressure.

Being personal also means revealing your personal side to the visitor. Besides placing your photo on the “About Me” page, your web copy needs to convey your personality. I don’t want to go to your blog or your Twitter page to get a sense of who you are, I’d like to read it directly on your site. Reach users by speaking directly to them. Do you notice how much more invested you are in this article than if I had gone into a third-person point of view?

2. Use Language Yo Mama Would Understand.

Oh, I went there. There’s nothing worst than visiting an authority website as a newbie and not understanding all the different terminology. Accommodate all visitors to your site, and try not to get so academic that you lose potential subscribers.

3. Draw on Common Metaphors or Experiences.

One way that people relate to each other is through shared experiences. For example, when I said earlier that I felt inferior to Wikipedia, I’m sure some of you agree. The point is that by me sharing a painful realization, it creates bonding. Find a way to connect with your readers so that they understand that you are them. You are engaging in a dialogue between friends, and not a lecture.

4. Use Pictures That Compliment Your Composition.

Reiterating what I said earlier, your words are the most important part of your article or blog post, but that’s not to say that pictures are unnecessary. To the contrary, pictures make a big difference in how people will connect to what you write. Think of pictures as a way of conveying a tone to your words. Because words are flat, pictures add an emotional component that’s much needed, and helps move the story along.

5. Read It Out Loud.

This can’t be stressed enough. Reading your words out loud helps you become more personal in your writing. If your writing does not sound like your natural speech, it is way too stodgy for web writing. Even if you prefer a more professional type of writing, your words should always match the rhythm of speech.

6. Don’t Edit Until The End.

A common mistake many writers make is to edit as they go along. Editing before finishing is like cutting hair without looking at the entire head. Only until you see the whole picture should you start removing undesired elements from it. Cut from the whole. By stopping to edit, you potentially sever your tie to creativity.

7. Remember That Sarcasm is Hard to Pull Off.

I know you’re funny, but it’s hard to read sarcasm or humor into web copy. At best, people will think that you’re not funny (which is probably what you’re thinking about me). At worst, people will think that English is not your first language. Only infuse humor when it’s unmistakable. You can still be personal without it.

8. Tidy Up Your Speech.

I know that the internet is free of all sorts of traditional boundaries, and that tip #1 told you to be personal, but there is such a thing as “getting carried away.” Getting too colloquial, or using foul language, only hurts your brand. There is a portion of your visitors who will, without a doubt, be offended at your use of distasteful words.

9. SEO is King.

Keywords are a stupid little brother, but they are a necessary evil. If you want to draw a crowd, you need to enrich your writing with keywords that will draw the right web surfers to your site. Keywords are not difficult. It goes back to being personal. If you were trying to find your site or an article on your site, what words would you use to search online? Perfect, those are the words you need to cram into your article.

10. Be Scannable.

Humans love headings in bold black. We love short bursts of text and a balance of white space. Your web copy should be all of these things so that if a reader is in a pinch, they can scan your information easily. Hopefully, they will encounter a headline that makes them stop and read and maybe double back. To add to the scannability of your text, be sure to bold important points in your article. It is another “stop sign” and compels users to read it.

What do you think of this list? Do you have any other tips to include?

Advertise here with BSA

If you are designing web sites in the UK, you probably already know that the Disability Discrimination Act (DDA) mandates web sites be accessible by visually and physically disabled persons. But even if you work in a locale that doesn’t have any accessibility requirements yet, web designers have an obligation to make their clients’ web sites available and accessible to anyone who wishes to visit.

Why? According to a report by the Danish Center for Accessibility, as many as 25% of the world’s Internet users have some sort of visual, auditory or mobility disability.

Fail to take into the consideration the needs of these people and you are depriving your client the opportunity to connect with a huge audience. Not only doesn’t that make good business sense, but also you could end up breaking the law. For example, if you’re working for an organization that is hoping to do business with the U.S. government, you’re going to run up against the “508 Act”.

This regulation requires all Federal agencies that “develop, procure, maintain, or use electronic and information technology”, to provide access to disabled users that is comparable to access available to everyone else.

How To Meet Accessibility Requirements

In order to provide for the access needs of the disabled, it’s important to understand the technology challenges these users face everyday.

• Use of non-standard browsers, earlier versions of mainstream browsers, or specially designed text-to-speech and text-to-brail readers that do not function in the way we normally understand browsers to function.
• Lower screen resolutions, the need for larger fonts, and reduced screen size.
• Colorblind users who cannot easily “Click the red button to cancel your order.”
• Users with motor impairment may use non-standard pointing devices and keywords.

Fortunately, The Guesswork Has Been Eliminated

The World Wide Web Consortium (W3C) maintains accessibility standards and best practices on their All Standards and Drafts page; of particular interest are the Web Content Accessibility Guidelines (WCAG) 2.0.

That is the document that provides accessibility recommendations and guidelines designed to accommodate people with a wide range of disabilities.

You Can Take Advantage Of Web Accessibility Design Tools

Recognizing the need to provide support for the world’s disabled Internet users, a number of companies have developed free and low cost tools to help designers comply with accessibility guidelines. Here are a few of the available tools that will turn you into an accessibility expert.

WAVE

For those of you that hate reading reports, and believe a picture really is worth 1,000 words, WAVE is an excellent tool for you. Rather than produce reports, WAVE displays the actual web page with embedded icons and other visual indicators that point out where potential accessible issues exist.

WAVE provides an amazing number of ways you can use this tool. In addition to actually embedding WAVE validation code into your designs, you can use any of these options:

• Enter the URL of the page to be checked into a form on WAVE’s site.
• Copy and paste the code to be checked into a form on WAVE’s site.
• Install the Firefox Toolbar.

Color Oracle

Color Oracle is a colorblindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

Image Analyser

This service examines all images found on a web page to check for any accessibility issues. Simply enter the URL of any website, and it does the rest. The width, height, alt, and longdesc attributes are examined for appropriate values.

Colour Blindness Simulator

Colour Blindness Simulator is a web based tool that reveals how your images may appear to users with a variety of color blindness conditions.

Readability Testing

This online tool will perform tests on your text to determine it’s level of readability. Your text will be penalized for polysyllabic words and long, complex sentences. Your writing will score better when you use simpler diction and write short sentences.

Don’t Overlook Web Accessibility Evaluation Tools

In addition to the accessibility design tools, there area number of free and low-cost accessibility evaluation tools that perform in-depth evaluations of Web pages and generate extensive reports pertaining to accessibility issues.

Some of the tools are highly specialized and focus on specific disabilities, such as blindness, while others provide information on accessibility issues in general.

The W3C maintains a complete list of most commonly used accessibility evaluation tools.

Is Accessibility Design In Your Future?

It should be, if it isn’t already. In addition to the UK’s legal requirements, many other countries and local governments are becoming more involved in ensuring equal Internet access to everyone regardless of physical disabilities. The W3C maintains a regularly updated list of new legal requirements worldwide.

In addition to simply staying legal, discussing accessibility with your clients could be a great way to set you apart from your competitors who may not be as knowledgeable about the subject as you now are.

Here’s How To Really Understand How Important Your Job Is

If you really want to see firsthand how much a difference you can make in the lives of disabled people by designing Web sites that are accessible, spend a few hours sitting next to a blind or physically challenged user.

Once you witness for yourself how difficult the Internet can be when designers ignore 25% of the Internet user population, you’ll keep accessibility top-of-mind whenever you sit down to design.

About the Author

Sandy Butler is a research analyst at Accredited Supplier, where she researches website design companies and their practices and trends. Sandy’s research has been featured on top websites including TechCrunch, Brand Republic and SitePoint.