This first article isn’t just about pretty things but also about how to use them to improve user experience.
These listed below are top notch websites of course, but I’d like to dwell on some small touches that make the difference.
In these examples the form and the function come together beautifully.
Not just a link…
The finesse here is that the colour of the link speaks about the nature of the content: red for Youtube videos, pink for Flickr images, cyan for Twitter statuses and so on.
Not just a mega drop-down menu, but an immediate preview of every section complete with images, weather forecast, news titles and so on. The visitor has high chances to reach what she’s looking for with just one click.
To say nothing how this mega drop-down menu is beautifully crafted in visual terms.
The contact form is apparently just on one row. What we’d expect is a scrollbar appears while we are writing . Well this doesn’t happen, the textarea grows while we are writing the text.
We saw this behavior so many times on Facebook, but it’s really pleasant to see it on a website.
Here we have another contact form beautifully crafted.
The cue is a conversational and informal approach supported by a great copywriting. The result is truly engaging and to fill the form is a funny task
The newsletter text field uses the rgba color property to obtain a transparent background that fits better with the website until you don’t focus on it. In that moment the text field gets a solid background to help the visitor to fill the form properly.
There are 2 fixed blue bubbles on both sides of the text.
While you scroll the page, the background of the bubbles scrolls highlighting the date on the left and an icon indicating the kind of content on the right.
While scrolling down the page you’ll see the sand in the hourglass flows through the narrow tube into the bottom bulb. This gives you an idea of how much content remains to read in the page.
The hourglass here has a double purpose: enhance the concept and drive the visitor.