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!

Nowadays we have two main types of taps: with first you should turn around the handle to get some water: turn

.. or lift a lever if you have the second type: lever-tapMost widely used turning valves are: those you can turn 90 degrees angle, 180 degrees and multi-turn ones.

Regardless of manufacturer, it’s impossible or quite difficult to get thin water flow having a levered tap. Reasons:

1. You operate turning handle with wrist or fingers whilst you lift up the lever with the whole arm. Arm is less precise tool.

2. If we compare either linear or angular path the handle goes between 0% and 100% flow, we can see that the path for the lever is shorter than turning tap, whilst it’s always easier to, let’s say, mark 1/10 of kilometer than 1/10 of millimeter with necessary precision.twist lever-handle2

If we compare levered and multi-turn taps the difference will be even more significant.

So, why levered taps are so widely used? It is easier to turn levered tap on or off if you don’t care about how much water you’ll use. Also, multi-turn taps rubber pads term of life is  shorter than half/quarter turning valves, however honest manufacturer is able to make ones which will work for years.

So next time when you’ll choose a new tap you have to decide what is more important for you: to save water and reduce utility bill or something else.

Clicks, unlike a page content, are visitors’ contribution. So don’t build obstacles but make clicking as easy as possible.

radiobutton

Bad: clickable is radiobutton only, the circle.

Better: the text label is clickable too.

Best: the whole block with the radiobutton and the text is clickable.

 

Below is a list of two courses, it is assumed a visitor should select one to continue:

noclick

For some reason clickable is the text only.

Better: the image is clickable as well. It is much faster and easier to click there than on the text.

Best: rectangle with the image and the text is highlighted onMouseOver and clickable.noclick2

The same we can say about check-boxes, icons, buttons. form5 Don’t force your visitor to be a sniper, make it easy to click!

User Interface, User Experience – those two areas are so close, and of course it’s easy to lose the idea that UI is not the same as UX. More about both of them in this article.

We have a plenty of switches around us, and of course on web pages too. Those in real life are usually more or less comfortable to use, but some web designers do their best to make you sorry you’re on that page.

on-off-switch2The first example. In which state the day/month  switch is? There’s no obvious answer. It is unclear because such control element can originate from two types of model / prototype:

sliding switch

the sliding switch (image at the right) and the radio-button (in the old sense, when you could choose only one band on your radio).

on-off-switchThe second example of “don’t do it” from another website: week/month switch. It is even worse then the first one because readability is worse.

Well, it’s time for examples ‘how to do it better’.

on-off-switch4on-off-switch3With either of them you will see their state from the first sight. They are easy to read, and that with blue “on” have perfect readability ‘out of the box’.

What if you need to have long labels instead of just ‘on/off’? Take a look at radiobuttons!

radiobutton

That’s all for today, and may power of great usability be with you!

switch-symbol-2-64x64P.S.: do you know where the commonly used ‘power on/off’ symbol came from? It is exactly the toggle switch when you’re looking on it directly: the nut and the lever in the ‘up’ position.

The toggle switch image: thanks Wiki!

Winged Victory

My father was not just engineer but also inventor. He inculcated habits of looking for a way to improve what I see around.

Well,  I saw hundreds of thousands  websites (20+years in IT), businesses, objects – and unlike majority I found perhaps millions of ways to improve. For many years I saw a lot possibilities to make things around better – and this blog will be about my findings: review of something what ‘mart’ offers and ideas to improve, also good examples ‘how it should be’.

Nobody’s perfect, so feel free to comment if you see an error or a way to improve the blog.

Nobody’s perfect, but we can try our best! :)