5 Must Have Books for Web Developers

This is list of books that will help you become a better developer.

10 Characteristics of Good Program Design

This is a list of goals that a developer should try and have in their software design. Some goals contradict other ones, but that is where you have to decide what is best for your program.

10 HTML Tags that are Overlooked but Should be Used.

With the popularity of CSS, the Div tag has been painfully overused. Here is a list of HTML tags that will help you use HTML the way it was intended.

10 HTML Mistakes that Should be Avoided

Here is a list of common mistakes in HTML that should be avoided.

Better Web Usability Through Visual Relationships

Web Usability is more important than ever. People have little to no time to read through all of your information to find what they are looking for. Creating visual relationships can help users find what they are looking for quicker and more efficiently.

How To Create A Twitter jQuery Plugin

Have you ever wanted to create a jQuery plugin? Or put your Twitter feed on your website?  If so this is the tutorial for you.

Things that Can Help or Hurt Your Web Usability

Trying to keep your users happy is the name of the game. A usable website can help your users, and in turn help you with your ultimate goal of your website. The following is a list of dos and do nots of web usability.

10 Must Have Cheat Sheets for Developers

There are far too many languages out there for web developers to remember everything for every language. Here is a list of cheat sheets that will help speed up research time for the lingo that you forget.

How To Compress CSS/JavaScript Files With PHP

A quick way to speed up your site is to simply limit how much the user has to download. This tutorial will show you how to automatically gzip (compress) your files with PHP.

How To Create an Advanced Search Box

Tired of boring boxy search inputs. This tutorial will help you create a functional and visually pleasing search box.

http://alifelski.com/

http://www.mikeprecious.com/

http://www.nineliondesign.com/

http://www.lebloe.com/

http://www.weberica.net/

http://www.minning.de/

Things that Hurt Your Web Usability

This is a list of usability no-nos that can frustrate your users. Try and avoid the following.

Hiding Information from the User

Nothing is more frustrating than going on a site and you can’t find what you’re looking for. If your user is looking for something simple like contact info, rates or prices and can’t find them, its more than likely they’re going to go somewhere else. Make it easy to find information they’ll use.

Forcing Users to Do Things Your Way

When filling out forms the user should have to worry if there are dashes in their phone number or credit card. Take care of this on the coding side, and give your users a care free time while using your website.

Ask for Info You Don’t Need

There is nothing worse than having to fill out a huge form just try a demo. People don’t like to give out unnecessary information. If you’re getting information from your forms like ‘asdf’ it might be a good indicator to shorten it up.

Faking Sincerity

People aren’t stupid, they can tell when you are being sincere and when you just want something from them. Have content that can actually help people and not try and sell them something.

Wasting Users Time

Long flash intros and wading through feel-good marketing photos fall under this category. People are in a hurry. If you waste their time, don’t expect them to hang around.

Your Site Looks Amateurish

You could have the best content in the world but, if your website is sloppy, disorganized or generally unprofessional, users will loose all confidence in the content on your site.

Things that Help Your Web Usability

This is a list of things that can instill confidence in your user. With good reason, some of these are direct opposites of what can hurt your web usability.

Know What People Want and Make it Obvious

This could double as the definition of web usability. You just need to take the time and figure out how people are going to use your site, then make it really simple for them to do so.

Tell User What They Want to Know

It’s a good idea to be upfront with your users. A good example is shipping costs. People want to know this. They probably already know there is going to be a charge, so why not be upfront with them and gain there trust.

Save Users Steps Wherever you Can

Take the time in coding to make the users life easier. Try and make any processes as short as possible. Amazon.com does a good job of this with their one-click checkout for members.

Take the Time

You want to make sure you take the time to make sure your content is well organized, easy to find, presented nicely, and is accurate. Without these the users confidence in your content goes out the window.

Good FAQs

Having a good FAQs section can really help out users. Make sure that your FAQs are up to date, there is nothing worse than searching through irrelevant FAQs. Also don’t use FAQs as a marketing pitch. (e.g. “I’m glad you asked that…we have sooo many features that handle this exact problem…yada yada yada.”)

Make it Easy to Recover From Errors

People make mistakes. If you give them a way to recover from them, they’ll love you for it. iGoogle does a good job of this when you remove a widget from your home page. They give you the option to undo incase you mistakenly press the remove button.

Appologize if Neccessary

If there is a case that you just can’t get around, applogize for your shortcommings. A common case is if your site is down for maintenace.

Hopefully these will help guide you to improve your web usability on your site. When in doubt just try and figure out what will make things faster and easier for your user.

How Patterns Come About

Web design standards usually come about when one website first uses it, and people find the element so useful that they copy it for their own website. A good example of this might be tabs navigation. They’re common place in web design now-a-days, but there was a time when these didn’t exist in web form. Someone thought it might be a good idea to create a navigation that replicated the real world filing system. Sure enough it was a hit, and spread like wild fire.

Patterns are Useful

Why would you use web design patterns? The beauty of design patterns is that you already know people know how to use them. If you feel like being creative and create a cool navigation, you’re taking the chance that someone might not figure it out. Why not use a design standard that has been tried and true, and put your own twist on it. Users quickly scan websites looking for what they need. If design patterns are in place it gives the user a sense of familiarity, and in turn helping them navigate without frustration.

Designer Troubles

Designers often avoid using these standards with good reason. Often times the designer feels that they have been paid to create something new and exciting, and there is nothing new and exciting about commonly used elements. By all means try and create new and exciting elements, but make sure they are painfully easy to use. If it requires an explanation, there are going to be people out there that don’t get it. Instead use a design standard and dress it up a bit with your own flair.

Examples

Here is a list of a couple of patterns. If you wish to see a complete list please visit Yahoo’s design pattern library or Welie’s design pattern library.

Accordion

Breadcrumbs

Tag Cloud

Footer Sitemap

Autocomplete

Paging

Tabs

Shopping Cart

Rating

Vote to Promote

Prominent = Important

Humans naturally look for similarities and differences in everything. That’s how we can tell people apart. Naturally things that stand out get more attention that ones that don’t. Like noticing the person with the crazy hair in the subway…what were they thinking? Fortunately with design we get to choose what is more prominent. How do you do this you ask? There are several ways.

Here is a list of a few:

• Put near the top of the page
• Make the info Larger
• Make the info Bolder
• Give text a different color
• Separate with white space
• All of the above

The more of these you use, the prominent it will be. Having a more prominent element will be a separater letting the user know that anything around it more than likely relates to it.

Items Related Logically are Related Visually

Grouping Under Header – Placing information underneath a header logically suggests that it belongs to that header.  This is common in newspapers, and pretty well any text you read.  This creates a visual hierarchy.

Same Visual Styles – Much like brothers or sisters, you can usually tell when people are related because they look similar.  Same thing applies to text, if you want something to relate to one another, use the same styling. e.g. All links are blue and underlined.

Clearly Defined Area – Like putting your socks in a sock drawer, putting text into defined areas help organize information. By doing so also helps suggest that all the information is related.

Nest Information Visually

Visually placing information nested within one another is an easy way to create a relationship with information. On the out most you have a general description, as you work your way inwards it becomes more specific.

Be Careful About Creating Unwanted Relationships

Unfortunately it is easy to create unwanted relationships. All it takes is a misplaced emphasis on some text, that leaves the wrong impression. So be careful how you lay things out.

Transport Magic

Envira Media

Search Inside Video

Skylar Anderson

Sharify

Nclud

Vox Design

Future Tap

Fourth Floor Interactive

Wake Interactive

1 Strive for consistency.

Try to make it so the user intuitively knows what to do because they’ve seen the same situation before throughout your interface. This means making terminology the same throughout and making sequences of actions be the same in similar situations. A good example of this is Mac’s operating system OSX. Everything ties into one another. Their progress bar has the same look and feel as a program window. Any confirmation windows always have an ‘ok’ and a ‘cancel’ button. This holds true for pretty well every operating system out there.

2 Enable frequent users to use shortcuts.

Make it so the user doesn’t have to work so hard to get from point A to B. This is especially valid for users that use the interface on a regular basis. Somethings to consider might be, abbreviations, function keys, hidden commands and automated actions. Yahoo mail does a good job of this. You can press a letter like ‘n’ to start a new message, or ‘f’ to forward a message.

3 Offer informative feedback.

For every action that the user does, there should be some sort of feedback, either good or bad. For more frequent and minor actions the response can be minimal. For infrequent and major actions the feed back should be more substantial. I’ll use Yahoo mail as an example again. If you try and enter a bogus username or password, it gives you feedback letting you know why you couldn’t log in.

4 Walk user through more complicated tasks.

When you have an action that requires several steps, be sure to separate it into a logical beginning, middle and end. After each step be sure to give feedback that will clarify that the step was done correctly and they can move on to the next step. At the end of all the steps be sure to let the user know that they are completed and that they have finished all the requirements. An example of this might be an installation wizard on your operating system, or any checkout shopping cart on the web.

5 Offer simple error handling.

As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible solution for handling the error.

6 Permit easy reversal of actions.

Give a way for the user to undo an error. This will help keep the user at ease if they know that not everything has to be perfect. This will encourage further exploration of your interface. You might want to place an undo feature when dealing with a single actions, a data entry or a complete group of actions. Any word processor is a good example of this. Ctrl + z is probably one of the most popular key commands out there.

7 Make the user feel in control.

Experienced users always want to feel like they are in control of the system. Make sure the design makes the user feel in control and not just responding to a situation. iGoogle does a good job of this. They allow users to customize their workspace, and put only what they want up front.

8 Keep it simple

People have a limited short-term memory. Having to keep track of several things at once can leave a user frustrated or incapable of using your interface. Try and consolidate multiple pages, reduce unneeded motion, and generally just keep things simple. This will go a long way to help your user’s frustration level. Again Google nailed this. What’s simpler than a text box and a button?

Granted all these seem like common sense. You’d be surprised though at how often some of these are missed. So keep an eye out on your interfaces.

Toyota Prius

Nissan Good Decision

Umbro

Labuat

Diesel Fragrances

Nissan

Ark +

Paint With Ben

Puma Lift

GE – Ecomagination