Not so much for design or creativity itself, but more the business and organisational aspects of it.

Her you go: 44 online (and offline) items to help designers plan and create better.

If anything, these are our benchmarks that any web form design must meet.

Extracted and condensed are the survey results below.  Actual links (with nice graphical charts) to both parts of the survey follows right after.

Here it goes. Web Form Design Pattern Best Practices Part 1…

- “Sign Up” is most popular link title to form (40%)
- The header is the most popular place to put the link (59%)
- Placed at top right hand corner (76%)
- Simplified design when compared to page layouts (61%)
- Benefits of registration are presented next to form (41%)
- One-page forms (91%)
- Using bold to highlight title of input fields (62%)
- Right aligned labels closer to input fields (41%)
- Only 3 to 5 mandatory fields (50%)
- 6 to 8 mandatory fields (30%)
- Zero optional fields, only collected after sign-up is complete (62%)
- Less than 5 optional fields (98%)
- Vertically arranged forms (86%)
- Do not have asterisks* to indicate mandatory fields (78%)
- Progress indicator (9%)
- Simple web form with as little fields as possible (86%)
- Grouped and divided by white space (69%)
- Divided by borders (22%)

Web Form Design Pattern Best Practices Part 2…

- No hover, active, focus effects in use (84%)
- Static help support placed obviously next to input field (57%)
- No hints (33%)
- Error messages at the top – no fields highlighted (30%)
- Error messages highlighted at form fields – no top message (29%)
- Both top error message and error fields highlighted (25%)
- Real-time AJAX validation warning or error (22%)
- Colour Green used to indicate success, and Red to show failure (97%)
- Not necessary to ‘confirm email address’ by second input field (82%)
- Necessary to confirm password (72%)
- Captcha not in use (59%)
- Cancel button not used (92%)
- Left-aligned submit button (56%)
- After successful sign-up, load non-mandatory fields or tell friends (45%)
- After successful sign-up, recommend places to go or link to click (33%)
- After successful sign-up, basic thank you page with no extra links (4%)
- After successful sign-up, redirect to homepage (2%)
- Using tab indexes (99%)
- ‘System Talk’ tone and manner – Login, Password, Location (38%)
- ‘Business Talk’ tone and manner – Your name, Confirm Password (38%)
- ‘Conversational talk’ tone and manner – Tell us who you are, etc (22%)

Too much text! IToo much to read. Don’t understand. I know.

So here’s the link to both parts – Part 1, Part 2.

UI Design Pattern is a strong marriage of Information Architecture (IA) and User Interface (UI) turning a set of User Experience (UX) goal into simple intuitive interfaces.

Here is a collection of design pattern library from UI-Patterns.com. Great help for when designing intuitive next gen user interfaces.

“UI-Patterns.com are not the first to create a UI design library.
While other pattern collections are useful, they are far from coherent
and complete. The purpose of this site is over time to fill some of the
gaps – especially by providing code examples as to how how the
different patterns can be implemented: to join theory with practice.”

Input Feedback
The user have entered input into the system expects to receive feedback on the result of the submission.

Account Registration
You wish to know who the active user is in order to provide personalized content or opportunities to conduct a purchase.

Vote To Promote
The user wants to promote a specific piece of content in order to democratically help decide what content is more popular.

Lazy Registration
The user wants to immediately use you and try your website without conducting a formal registration beforehand.

Password Strength Meter
You want to make sure your user’s passwords a sufficiently strong in order to prevent malicious attacks.

Inline Help Box
The user needs an assistive introduction aside the interaction he is about to perform.

Tag Cloud
The user wants to browse content by popularity or most elaborate topic.

Tag
The user wants to find more data in the same category and/or contribute data in the same category.

Live Preview
The user wants to check how changes in form fields effect and end result as quickly as possible.

WYSIWYG
The user wants to add formatted text content, but does not have the know-how to write HTML.

Wiki
You want to provide the user the option of adding to- or editing information on a website.

Live Filter
The user wishes to specify a search by different categories to narrow down results.

Archive
The user wants to search for an article of interest by chronological order.

Pagination
The user needs to view a subset of sorted data that is not easily displayed on one page.

Continuous Scrolling
The user needs to view a subset of data that is not easily displayed on a single page.

Blank Slate
The user needs to get started and get a feel of how the application will feel when fully in function and filled with data.

Tip A Friend
The user wants to share something of interest with a peer.

Steps Left
The user is about to go through the process of filling in data over several steps and is in need of guidance.

Coupon
You want to attract your users to conduct a purchase of one of your products.

Subscription
The user wants to start a subscription of a service.

I started work on the project. He agreed over the phone to pay, so because I charged low at the time, I had about 1 day of work ahead of me. After presenting the designs by email, and a few rounds of revisions, he was just lost from my sight. After some months passed by and several emails were sent, I finally heard back from him. His email read as “Your designs are not acceptable and I am not paying you anything”.

After some days I was shocked to see their Product Catalogue. They used one my designs.

From this incident I actually learned the following things:

Get a contract

Many have a negative view of contracts, thinking they are meant to fool people with fine print, or that its a reflection of the trust you have in them.

Even if I’m working for a family member or friend, I make them sign a contract. It’s just the thing to do. No one ever balks at signing a contract when setting up a bank account or buying cell phone service – why should they when contracting a designer to produce marketing materials? In fact, a contract is protection for both you and your clients, plus it adds respect to the work you’re doing.

There is a great   free contract template for designers from AIGA. You can customize it to your liking, and be sure to change the American information to suit whatever country you live in.

Charge enough to be competitive

Along the lines of adding perceived respect to the work, charge enough money. Even if its a small client that doesn’t have a lot of money, or a non-profit client, remember that they don’t realize the level of effort that goes into this stuff. If you’re charging low just so that you’ll get the project, the client usually won’t appreciate it, and therefore won’t think twice about making unnecessary revisions, or requesting additional items.

If the work is a gift from you to them, in the case of non-profits or friends, make it clear that you are doing them a favor and charging less than the work is worth – this way they’ll appreciate it and be happy to pay you promptly with a minimum number of revisions. If you don’t appear to value your work, your client surely wont.

Require an initial deposit

A great way to sift through the people who are looking for free work, charge 30-50% up front. If they weren’t planning on paying, or wanted to wait and see if they liked the work before paying, they’ll drop out quickly. At least this way, they drop out before you’ve spent the hours designing.

I’ve never had any reputable clients express concern about up-front payment. They assume that the work will be done well, and on time.

Communicate in writing

This I didn’t do from the beginning – communicating by email can be a life saver. Make sure the client fully understands what they’re getting, how much it costs, and that they are paying for a service, not a product. Your getting paid is not determined upon whether they like what you design – they need to be sure you’re right for them (by looking at your work and checking your references) before they commission you to do the work.

Emails keep track of these types of interactions so that, in the event you get screwed out, there is a record for legal purposes.

Make sure the client is the right fit for you

Everyone can learn from this lesson, because it’s something that even many large design companies struggle with, not just freelancers:

If the work isn’t interesting, the client isn’t reputable or the person you are talking to gives you a bad feeling, don’t work for them.

There is enough work out there that we don’t need to say yes to everybody that asks for a quote. There are many low-lives who own companies, and who you can tell from an initial meeting or phone call that they are going to be trouble. Trust me, no matter how tempting the money may be, you actually save more money by turning these prospects down!

Accept work only from a client who is the right fit for you, and who you feel will be pleasant to work for.

Bottom line

I had a request for a logo from a person who was starting an IT company. He said he already tried 2 designers earlier and they were not up to his mark. He asked me to start the work immediately.

Instead, I sent a formal email stating that the work would be started upon sign-off on the budget and 30% payment up front. I quoted the price for the project. My email was short and concise, and more importantly, didn’t waste too much of my time – I never got a reply back from him.

Design, while fun, is still a business—and as such, safety nets need to be in place so that you’re protected and can make a fair profit from your skills.

To me, being creative is not about good design. Not about good typography. Not about good colour schemes.

It’s about good purpose. Does the work you do serve a purpose? Does the design you create help someone, some client or some owner achieve something? A goal?

Taken into context. Everything is beautiful. Yet not every beautiful thing is well designed. Can your work stand up from the rest of the other beautiful things? Can it be called well-designed?

It should. If ther ever was a designer’s goal, this should be it.