Few posts ago I thought I saw the worst contact form. Now I know I was wrong.

The form I met since then requires a lot from you too, but this is only part of the problem:

When you had a bad luck and didn’t fill a required field the form highlight it with a merry red color. Not the border around the field but the whole item. Wait, I’ve not finished yet. If your luck was bad enough and you missed to chose something from drop-down list then you suddenly see a BIG RED BOOOOM:

(clickable, of course)

I’ve spared your senses and shrank & cropped the screenshot, but indeed it looked like the website barks at me! Okay, I do apologize that I haven’t filled in that form properly and I am really sorry …. that I’m on your website.

Also please note such aggressive background hinder you from see the text, the color palette here is definitely not the best one.

How it should be done: just a red mark near the required missed field. Better if you add more details especially if the item requires certain format of the data. Just a polite example:

Even better if the mark turns to green when the content of the mandatory field is OK. I spent some time trying to find the form having nothing to cavil at and eventually found it deep at hsbc.com:

When the field is partially correct:

and when the field is correct the form temporary turns both indicators green and add the green mark at the right side:

then hide the marks below the field and shows just the field highlighted with green:

That’s all for today, feed your website well (and don’t forget about the web designer/UI staff too, or whoever does this job for you) and may the visitors be glad to contact you!

Share the article if you like it, comment if you don’t like and offer new topics in any way!

(Thanks Dineshraj Goomany for the dog)

It’s hard to provide a demo to your client if you’re a dentist, but it’s obvious you must have demo if you are selling software or online service. Sometimes trial works better, but nowadays people are in a hurry too much even to trial without seeing at least screenshots of what they’re being persuaded to try.

Do you always need a demo/trial for your product? The only case when you really can say ‘no’ for sure is when it is just impossible.

Recently I met a few cases when the demo says ‘don’t buy it!’ even before I really opened the demo.

Case 1:

Those guys do not provide screenshots so there’s no other way to see what they what to sell. At this page I started to worry. Really, why someone cannot see a demo ‘right now’ and need to schedule a visit like a job interview? The only reason I can imagine is their product is so complex you should not be allowed to see it without proper guidance. Hmm, for certain products perhaps it really should be, but in this case I was not looking for a nuclear reactor maintenance manual or space shuttle engine tuning but just server performance monitoring. If you really think your product should be guided even at this stage… Well, google for elevator speech.

Case 2 (server monitoring too):

Hey guys, do you really think a buyer will wait a few months (or a year, note scrollbar) for your demo? I believe the buyer will rather pay to your competitors.

Bottom line: provide wherever possible

  • screenshots
  • demos
  • trials
  • videos explaining ‘how it works’

and clients will have more reasons to be with you.

Stay tuned!

Not only customers provides feedback to you but you provide feedback to the customers too. Website or a doorbell, it is always better if your device or website responses on user’s action in a friendly manner. If you don’t hear a sound or at least don’t see a light indication then your efforts to pressing the doorbell knob seems to be in vain. If shopping cart at your web-shop doesn’t show ‘thank you’ message it may kill your business. So why on Earth we still see contact forms which do not provide any feedback at all? Why buttons on some pages do not react immediately with any kind of ‘I’m working, please wait a sec’ message? Change color or ‘circling’ icon usually enough, no need in text messages.

Despite real life things engineers usually don’t do such mistakes, sometimes they do. Just for example:

This button should be pressed to let bus driver know someone in the bus would like to take off. We know that there’s nothing perfect in this World and sometimes such systems are broken. Without the confirmation you don’t know whether you’ll take off where you need or will have to go back. There’s a good example how it can be done:

If you are going to produce a device or software please remember to provide feedback. Ideally with all available senses. On physical device it can be sight, hearing and touch – you can feel with your fingers that the button is pressed (also, there may be a Braille text on the button), you always see in which state the wall switch is, a smartphone can change color of the element, produce sound and vibrate. Not to be annoying, add possibility to disable e.g. sound and vibration, but for people who can’t hear or see well this small and usually cheap in development option will be quite helpful.

Subscribe if you want to know more or let me know if you need a review of your device/website!

Just one but really terrific example in this post:

(clickable)

Check the screenshot at the left. So, do you really need all this info in order to say ‘hello’ to a client? And indeed you cannot make a first call or send email to a client if you don’t know where s/he works? Moreover, zip code is critical info you cannot stand without, isn’t it?

Please get me right: the company name is really important when you work with a customer, but not for the first call!

On the other hand, ‘what is your question’ field is a small one-line text box instead of ‘textarea’ large enough to fit a few sentences. It looks like the company is more interested in your details than in what you want(ed) to say!

IMHO the contact form should look like this one. Noting requested what is not really necessary, even the name is not required (however, very important therefore present!) The text area can be resized, you’ll see ‘message sent’ text after submitting. Captcha, when you need it.

You can consider combining email and phone field into one if it’s applicable for your business, a visitor will fill it according to his/her preferences. I do not offer unpaid phone support so phone number wasn’t mentioned.

And of course, don’t forget to make sure your contact form really works – now and then.

May many happy contacts be with you!

Why one projects become more and more popular whilst others are not?

Here I’d like to look at this question from non-technical point of view and compare two widely used CMS: WordPress and Drupal.

Checking many sites daily ‘from inner side’ my conclusion is clear: Drupal is outsider, and loses its position. Let’s see at gtrends:
wordpress vs drupal popularity

So, why?

TL;DR
WP is more user (noob) -friendly AND its community is more user-friendly too.

Details:
I admit that out-of-the-box Drupal can do more, it’s more flexible and offers more features, perhaps is faster but a project receives real driving force when it has fans not only in geek community but among average people in target audience. Housewives of that consumer area, if you like.

Perhaps Drupal was developed keeping web studios in mind as the TA, who knows. On the other side, WP was developed (or at least it looks like) for non tech-savvy people. Just see at ‘Thank you for creating with WordPress.’ Just compare update system from a user standpoint or look at admin page of a new setup like a noob. It is much easier to use WP. Its UI won.

Second but perhaps more important, from my experience WP community is much more user-friendly. Troubleshooting Drupal projects after cumbersome and tricky migration I googled errors and too often saw something like ‘RTFM‘. Well, this approach has its own place to live, and sometimes it’s very useful but this is not a way to make friends.

Of course, there are many other ways how you can kill your OpenSource Project with ease (as well as many other ways to win the race), nevertheless it definitely makes sense to keep in mind the community mood.

May OpenSource Force be with you, Luke!

p.s. At gtrends we see interest to WP decreases too, perhaps something new coming or it’s just because of blogspot and others like that? Share your thoughts!

In the previous post I mentioned generally useful messages which can be annoying to visitors just due to way they were presented.

Here I have two more messages. The first is something special:

The second one is much more useful but the problem is the message cannot be closed despite it is very big:

There’s just no way to say “OK, I got it, now let me see what I’ve come here for!”.

Don’t make your message unpolite, please. And remember to subscribe!

Is your pop-up polite? Assuming we’re not speaking about spam, how comfortable are your messages and pop-ups for visitors?

1. If we respect our visitors we should give them ability to close pop-ups and other messages and don’t turn this activity to something like puzzle-solving.

Here we have how NOT to do pop-ups:

close-button2

(click to enlarge)

Please note where the close button is. You need some time to find it then to point on it. The location is counter-intuitive. The irony is the screenshot was taken at design-related page. If you think it looks better on the bigger screen then here you are:

close-button1

(click to enlarge)

Sometimes it’s even worse: there’s no ‘close’ button at all – either as a cross symbol or as a text.

2. Avoid confusing icons and/or locations. At the first sight,  which corner you’d direct your mouse to close the message?

bad icon

The ‘X’ on the left is quite bold and obvious but… this is nothing more than just symbol of an error. The real ‘close it’ ‘X’ is as always – at the top right corner, but it is much harder to see it.

3. Paint dangerous button in red color. Not always applicable but definitely makes sense. If we’re to destroy something then it’d be wise to give one more warning – not with another message but with color. How NOT to do it:

kbd

Sometimes it’d be wise to add a checkbox as another level of safety and disable the ‘OK’ button until the checkbox is marked:

(click to enlarge)

(click to enlarge)

4. Avoid annoying repeated messages. Well, you’ve warned the visitor about something (s)he potentially wouldn’t like to have (“Hey, there’s a cat on your monitor!”, do you remember those monitors?) but it would be quite annoying to see the message every time if you’re OK with that fact (“the cat protect monitor from collecting dust on it, shut up!”). Very simple: just add a checkbox ‘don’t warn me about it anymore’ or, better, something like drop-down ‘for 5 mins/1 hour/1 week/never/etc’. Of course don’t forget to add somewhere in profile/settings an option like ‘reset all warnings’. what’s irritating me personally:

message

5. Make it simpler! If a visitor did something wrong then give him/her the fastest way to make it correct.

no links

Why, why on Earth they don’t just provided a visitor with the link to the proper page???

6. Well, it may looks obvious but… Test it!

exchange-error

7. Let me repeat: if a visitor did something wrong then make it easier to find the reason and fix the issue. Give him/her the fastest way to make it correct. This approach consists of two parts:

7.1. provide with the info what exactly went wrong or at least info where to find the details. If we have a website about kittens and mittens then ‘Something’s wrong’ or ‘internal error’ is probably better than ‘null-pointer exception at 0x1234567890 segment of LHC in CERN’ but  definitely will not help to report error if needed. Two ways to make the messages better:

  • link to all details, so the visitor can copy-n-paste them to a ticket
  • if we do not want to discover our internals to visitors then log all details you may need on your side and show the ID of the record:

varnish-error

7.2. let them know how to fix (‘reload page’) or what to correct (‘the name cannot contain numbers’).

Of course, there are more ways to improve messages, but that’s all for today, stay tuned (subscribe) if you find the article helpful.

Have a good luck and may nice, neat and useful messages be with you!