Web International Awards

Forms. Can’t live with them. Can’t live without them.

admin — Sat, 07 Nov 2009 15:25:38 +0000

What language does your local store clerk speak? Your own language you say. What language do the web forms you build speak? Do they speak the same language as your site's visitors? Your clerk greets you with a smile. Do your forms smile to your clients?

It is fascinating how bad web forms look and work on most sites that are out there. The problem is that they are usually on the last place on the to-do or check-up list, which is totally wrong. Let me explain why this approach is wrong. A web form is practically the clerk of a site, whether it is a simple site or a huge e-commerce website. As you have the clerk in the supermarket to handle check out, you have web forms on the web to handle all sorts of things, from contacts, to payment processing, to newsletters signups and so on. All these features inside your site are powerful tools for your business.

Not caring for your web forms is not caring for your clients! Not caring for your clients is not caring for your business!

Put yourself into your customer's shoes. From now on, you will have to build web forms accordingly, because better web forms will attract more prospects, which will end up in more sales, and better business. This sounds great given the financial crysis that has got many businesses bankrupt.

This article will cover all you will need in order to create useful, beautiful forms. The first part will handle the theoretical part, describing different scenarios and structures web forms could have. The second part will cover the XHTML / CSS implementation of all forms, and the last part will cover the validation and processing of the forms.

PART I

If you got here, you know that web forms suck. I don't like them, you don't like them, our customers don't like them. Nobody likes web forms. That usually happens because we don't design them the right way. Most of us make forms to get information about everything, then do something with it when our goal should be getting everybody through the form as quickly and easily as possible. We want a lot of information from our customers, but they are facing a stranger. They are facing a stranger who wants their information. Why should they give it to us.

When someone comes to a form, they want to get passed it and do whatever they were promised to be able to do before completing the form. That's why the number one priority when building a form should be keeping it simple. And now comes the hard part. Forms can be designed in many ways, but which one is the simplest? Well, to tell you the truth, I haven't found the answer yet. But hey, at least I tested some options.

First thing's first. Make sure you strip out content that you don't really need! Don't think about sending an email to your client? Don't ask them their email. Don't want to fax them? Don't ask for fax numbers. Once you have the few questions you really need to ask, you can outline them in different ways inside an online form.

The 4-ways of forms

If you look around all forms on the internet, they all share something. A bunch of them have right-aligned labels, some other have left-aligned labels, some have top-aligned labels, and lately, there's some forms out there that have labels inside the input fields. But which one is best? That depends on the purpose of each form. So lets check out each and every one of them.

Inline labels

Inline labels are great, because they can reduce the amount of space your form spans across. However, these forms are usually handled with a relatively big amount of coding. We have two scenarios for these kind of forms.

Static text within input fields

What happens here when a user clicks inside a label is, well, nothing. Given the "username" field, clicking it means that the user has to first delete the text, and then input his actual username. This is ok for small forms, but doing this on a huge form will definitely scare you off.

Dynamic text within input fields

These input fields work like magic, because when the user clicks the input field, the "username" label text just disappears, and they can input their username quickly. Great.

The downside of both solutions is that we practically cannot use this kind of design on long forms. Short forms like searching or logging could really use this design technique, but long forms no. That is simply because when you're finished and want to check the form before submitting, there's a big chance you don't remember what the questions were.

Pros for inline labels

Reduce the space required by the form

Cons for inline labels

Not knowing what you answered for
Label text doesn't go away, and distracts the user while typing
Label text goes away on click, and doesn't come back if the user didn't type anything

Left-aligned labels

These forms are best if you request god knows what information, and the users need to check out personal documents in order to know how to answer your questions. Left aligned labels help because all questions are one below each other, and input fields do not interfere. This way, users can scan to see what they are asked for, and get prepared before setting on the quest of completing your form.

The next thing these forms are good at is reducing vertical space. However, if you have long questions, this may be an issue as the width of the form will extend, and sometimes the overall layout of a form could be completely messed up. Nowadays however, browser screen resolution is pretty big, so this issue probably isn't a big problem. But make sure that the percent of mobile visitors is low if you're willing to adopt such a form.

Pros for left-aligned labels

Reduce vertical span of the form
Easy scan the questions before doing anything else

Cons for left-aligned labels

Harder to connect the labels with their adjacent input field
Increased horizontal space the forms spans on

Right-aligned labels

Right-aligned labels have the same disadvantage as left-forms do, so if the horizontal space is not generous, they are not an option. On the other side, if the left-aligned forms are bad in terms of connecting each label with its corresponding input field, right aligned labels don't suffer from that, as they are inches away from the input fields. However, these forms cannot be easily scanned. Basically, these one are the exact opposite of left-aligned labels. Well, not exactly, but you'll see why further along.

Pros for right-aligned labels

Reduce vertical span of the form
Easy to connect the labels with their adjacent input field

Cons for right-aligned labels

Hard to scan the questions before doing anything else
Increased horizontal space the forms spans on

Left/Right or Right/Left

Now, in the western world, we read text from left to right. Therefore, we can scan left-aligned labels very fast. However, have in mind that Arabic and Hebrew are read from right to left, so right-aligned labels are scanned easier in such a case. Make sure you make the right choice based on what language your visitors speak.

Top-aligned labels

Top aligned labels are great. They are somewhat easy to scan through. They can have long questions, without worries of destroying the overall layout. Some questions, like city and zip code or phone and ext. could be grouped together on the same line. Having the labels on top of input fields means faster and easier processing. So, you should probably use these kind of forms whenever you want to get the thing done fast, and vertical space is not an issue, because yes, they do take up quite some vertical space.

Pros for top-aligned labels

Can have long questions.
Can group together similar information
Fast processing

They need a lot of vertical space
They can't be long just for the above reason

Completion times of all 4 types

Left aligned labels could have quite some span between them and their adjacent input field, so users are forced to take more time when interacting with the form. The right aligned labels reduce the eye fixations imposed by the left aligned labels to almost a half, and reduce the cognitive load users need to complete the form. Top aligned labels allow users to capture the label and input field at once, with only one eye movement. Inline fields are a better than top aligned labels, but remember when you must not use them. For further info on completion times, you can check out Matteo Penzo's article Label Placement in Forms.

Must read

I totally recommend you read Luke Wrobleski's book Web Form Design: Filling in the Blanks. The amount of valuable information it contains is priceless.

Conclusion

We are now done with the theoretical part of web forms design. Well, we know the basics of web forms design. In the next part of this tutorial we will discuss how to implement using XHTML and CSS all the 4 types of forms described above. Stay toned.

PART II and PART III

Part two and part three of this series will contain the XHTML & CSS for the forms and form validation. If you liked this article you can stay updated and get new content via our RSS feed.

Comments

Now if you reached this far, I really recommend reading forward the comments section two, because there's plenty of useful information shared there as well.

Showcase of beautiful horizontal scrolling websites

admin — Thu, 05 Nov 2009 15:20:28 +0000

We just published a great interview about horizontal websites in which Tyler Finck has shared his knowledge and thoughts with us. Keeping that topic, today we are showcasing 25 26 27 gorgeous websites that don't make you scroll down, but aside.

Blue Vertigo

CSS Zen Garden - ex 1

CSS Zen Garden - ex 2

CSS Zen Garden - ex 3

ctrl+N

Ciber Voluntarios[added on 6th NOV 09]

Dean Oakley

Eolo Perfido

Faub

Alex Flueras[added on 6th NOV 09]

Graphic Evidence

Graphic Therapy

Les Hautes Mynes

Inside Nile

Japi Honoo

Kirsanov

Jason Kottke

Beca

Miguel Perez

Modular People

Neu E

Stéphane Bucco

Suie Paparude

The Horizontal Way

Visuall

Work at Play

Bluesfear Worm

Resources

Interview about horizontal websites with Tyler Finck published a few weeks back
How to create a horizontal scrolling website@CSS-Tricks

Similar posts will follow. I could use a helping hand in finding really unique and original pieces of material so please let me know about any websites you may have similar to these ones. If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

Awesome interview with Tyler Finck, horizontal websites enthousiast and developer

admin — Wed, 28 Oct 2009 09:29:55 +0000

Webia: Hello Tyler. Tell us something about yourself and your background?

Tyler: I grew up outside Portland, Maine (USA) in an environment that promoted creativity: arts, crafts, music, space to explore. I left Maine to pursue a film degree which I received from Ithaca College, New York (USA). However, I ended up enjoying the fine arts - such as drawing, designing or music - more than cinema. I did pick up a basic web development class along the way which started with notepad HTML building and concluded with Dreamweaver rollover buttons. From that point forward, everything I learned technically I picked up on my own or by watching someone better do it. Creatively I've been continually inspired by music and analog design though I still appreciate a wonderful website.

Webia: You grew up in a creative environment. Does thinking back to those days help your inspiration or were those days just the kick you needed to pursue a creative career?

Tyler: Those days were pretty special but at the same time I was learning so much in the process, whether it was structured or not. While I'm still learning now I think less about "how" to get something to look or feel the way I want. I definitely think back to those times for inspiration, for "why" my work looks or feels the way it does.

Webia: You're inspired by analog design. Are there any galleries you go trough in search of inspiration? Offline or online.

Tyler: There aren't any places I turn to but rather two completely different offline sources: my son and music. With a four year-old I'm constantly reminded to look at things from a younger, simpler perspective. That has allowed me to relax a bit as a designer and artist. Music has a huge impact on my visual world, both listening to it and creating it. I'm still really inspired by what design accompanies musicians, whether it is album art, hard copy or electronic, concert posters or videos from YouTube, Facebook, Vimeo or wherever bands are posting them.

Webia: Your site Sursly and Gavin's are quite unique. Their navigation systems are unique. Tell us about how you came up with the idea of such a navigation system.

Tyler: I had seen a lot of vertical smooth scrolling websites and while I loved them, I just wanted to move sideways. I stumbled upon The Horizontal Way and realized that I could have a little fun during that transition between "frames". I developed my site about 6 months before Gavin's site, so I learned a lot in the process. His site uses a different script that actually allows for diagonal scrolling, vertical and horizontal. It was developed by the folks at ScripterLative and works differently than similar scripts. I actually tried to get in touch with those site developers, with no results unfortunately, because a friend and I modified the script to center the target destination horizontally in the browser.

Webia: The two sites have navigation in common, but sursly.com has some nice smooth lines and transitions and lots of whitespace while Gavin's site impresses with loads of visual elements and fast movements. If this is no secret, could you describe the difficulties that appeared while developing these two sites?

Tyler: Constant challenges with both sites were and still are bandwidth and load times. Keeping the graphics as small as possible on both sites is something I wrestled with and somewhat ignored in the end. My site has changed code-wise over the past year since I built it somewhat rushed, so it has always been a work in progress and was never meant to see the amount of attention and criticism that it has received, but that is okay. Gavin's site had to be a lot closer to "finished" on launch, even though I don't think a site is or should ever be finished. But because of that, I had a lot of content to work with which is always wonderful and challenging.

Webia: So you think a website should always be in progress as opposed to finished and forgotten. Why is that? Simply because there are always new technologies? Are you a perfectionist?

Tyler: I can be a bit of a perfectionist but I'm more concerned with keeping content updated and visuals fresh. Easier said than done, I know and I urge clients, friends and anyone else with a web presence to not think their site or blog are set in stone. At the same time it is self-serving as you're hurting yourself by having a copyright in the footer that is two years old. Laziness shows, every time.

Webia: Why jQuery to power such sites? Flash can do basically the same things, and you get to play visually in order to build it, while jQuery needs programming, math and so on.

Tyler: Even though I'm comfortable in Flash and could have accomplished something similar with both sites in half the time, it just wasn't new to me, or interesting. I think a lot of people probably followed me on Twitter or sent emails because it wasn't Flash, which is kind of what I was going for. I didn't focus on iphones or mobile, flash-less platforms as a delivery method, but I'm happy that the site at least shows up, broken or not, on a lot of devices. A big "sorry" out there to you folks with slow internet though.

Webia: What are your favorite blogs you're subscribed to and would warmly recommend?

Tyler: Smashing Magazine is always a decent resource, even if they're not necessarily the first ones to find something. The amount of useful information over there is overwhelming. I've been lurking around Khoi Vinh, Veerle Pieters, and Elliot Jay Stocks blogs for years now, never disappointed… And there is a wonderful cactus blogging at Wendy the Cactus that I can't get enough of.

Webia: What are your favorite horizontal scrolling websites?

Tyler: The only horizontal one I can think of off the top of my head and really enjoy is Carrot Creative. Very well done.

Webia: To round things up, any tips and tricks, things to look out when developing a horizontal scrolling website?

Tyler:Less is WAY more, leave Flash behind, and try something different.

Improve your forgot password forms

admin — Mon, 26 Oct 2009 11:01:32 +0000

Sooner or later, you will forget your password for that one site you haven't used in ages. When that happens, you'll have trouble even recalling what email address you used to register. Happily, you know your username, hit forgot password, and then you get that crazy message that says that the new password was sent to the email address on file. But which email address is it? You have no clues whatsoever.

There are a number of solutions for such an issue. One would be adding a forgot email form that asks you some personal information available in your account, so that you can prove you are indeed... yourself. This won't really work as it would require the user to input more unnecessary information upon registration. This results in bigger forms and lower conversion rates.

A second option would be using the email address to identify the user that requests a new password. Yet again, this isn't perfect as one may have multiple addresses and bad memory. I wouldn't want to go trough my 20 (just a number) email addresses only to figure out the last one I try was the one used with this site.

The perfect solution

I think the best way to fix these problems would be by using either one of the username and email address fields, or perhaps both of them. If one doesn't remember the email address, but knows the username, the form would respond to something like: your new password has been sent to partly**********@********visible.mail. Now when you see part of your email address over there, you know where to look for a new password.

I hope you enjoyed this article. If you have any other solutions, please share them using the comments. You can also stay updated to upcoming articles via the rss feed.

How to build a navigation menu with jQuery, with progressive enhancements

admin — Fri, 23 Oct 2009 06:59:22 +0000

I just published a new tutorial over Freelancer Magazine. The tutorial covers building a menu with lists, styling them and applying some jQuery goodness to make it shine. Here's how you can build an awesome navigation menu with jQuery. Please note that this is the first part of a two part tutorial which will help you build a complex menu.

Javascript DOs and DONTs. Complete with 17 examples from real web

admin — Mon, 19 Oct 2009 12:17:34 +0000

I've talked about accessibility a couple of times, especially when the main technology used to build a site was flash. You can check the first and the second flash degradation articles before reading this one. In this article I will cover some DOs and DONTs with regard to javascript enhanced websites.

There's only around 5% of internet users which do not have javascript turned on, but that doesn't mean you should disregard them and create a beautifully working site with javascript which fails completely if javascript is not available.

In order to fully understand what I am talking about, you should visit the sites showcased in this article, view them with javascript on, then turn off javascript and refresh to see the difference. Some sites, as you'll see, do a better job then others when it comes to working properly without javascript. All these sites are impressive if javascript is on, but may be completely useless if javascript is off.

Really good examples of javascript enhanced sites

Helloewy

Helloewy is the blog of Loewy, a NY web development company. They created an accordion for the entire posts structure of the blog which works quite well. I've seen many accordions across the web, but this one's the first one that also automatically scrolls your page and adjusts its position accordingly to the tab you just clicked. The best thing is that with javascript off, there's no accordion, but all the content is there in the exact layout. It's just that it is all expanded, which doesn't bother me - the what is javascript user? - at all.

Youlove

Youlove's older version of the site was bundled with awesome transparencies, animations, sliders and scrollers which resulted in a visual aesthetic that took your breath away. The new version is similar, but for me, its not that bright as the previous one. With javascript off, that first version gave nothing up in terms of usability and available content. It just got rid of animations, sliders and scrollers. Transparency was preserved as it was built using CSS not javascript. Awesome website!

Alexandru Cohaniuc

Alex's website is similar to the first one presented just before. It also uses an accordion to group his portfolio on categories, all tabs beeing expanded if javascript is off. It is a one page website, and the little javascript tricks add some spices to its design and make it beautiful.

TEDx Bucharest

TEDx Bucharest has and interesting and original concept in terms of layout, structure and navigation. Funny thing is it uses javascript for a small amount of the website, which is flying in a few thumbnails on the homepage / guests page, and to create some sort of a tooltip while hovering those thumbnails. Besides the flying in effect, the strange tooltip could have been easily created with some tricky css. The important point here is that with javascript off all functionalities are preserved. Nothing too extraordinary, but the concept and progressive enhancement cannot be disregarded.

The full article will contain more example of website that do a bad job when using javascript, and some who are right on the edge of falling in the same category, but are not quite there yet.

Really bad examples of javascript enhanced sites

U No Why

U No Why is simply Amazing! It has a totally original navigation concept. It moves so smoothly and responds fast to user's mouse, is bundled with lots of visual effects and subtle transparencies but unfortunately turns into a screenshot if javascript is off. In fact, if javascript is off, you can either look at one photo, click the logo or close the browser. Which one would you choose?

Engage Interactive

Engage interactive is entirely constructed on sliding doors, panels and slideshows. All are powered by jQuery. There's quite some JS work behind this site. Very well thought off, javascript tags are located at the end of the source files. On the other hand with javascript off parts of their site are inaccessible the menu being nowhere to be found. You could still check out a part of their portfolio though, if that's any good because they fail the ultimate goal, which is allowing visitors to contact them. Twitter link doesn't count here!

Djafar Inal

I gave two examples of websites that successfully use accordions to enhance user experience. Here's one that fails almost completely. Inal's website fails because if javascript is off, there's only one tab of the accordion fully expanded. This may be due to the fact that Inal's website uses a horizontal accordion as opposed to Alex's and Helloewy's websites above which have vertical accordions. However, a few css tricks and if javascript were off, those tabs on Inal's website could have all been expanded and placed vertically.

Made by Elephant

Another website that uses jQuery a lot. Sliding doors, tabs, forms. It looks and feels great if you have javascript available. The moment it's gone, the whole site gets scrambled. No thank you!

Nerve Music Store

Nerve is a music store that has its entire UI developed using javascript. That's great because the interactivity provided is awesome and could rival easily with Beatport. Just turn your javascript off and then you get a spinning gear that spins and spins and spins...Forever.

Eyedraw

Eyedraw is yet another site that uses plenty of sliders and sliding doors. These features make it look chic. Unfortunately, with javascript off you're left to viewing a few thumbnails and no ability to contact the designer. Auch!

Webalon

Webalon uses javascript to create a huge dynamic slider on their homepage and some nifty fading effects. Apart from that, it appears that they should have some sort of lightbox in their portfolio section, which unfortunately doesn't work even with javascript available. Needless to say, with javascript unavailable there's no fading and the content slider completely vanishes into a dark mist.

Bonadies Architect

What was the first thing that crossed your mind when you saw the above screenshot? Hmm, let me check this minimal website? Well, please do check it with javascript off, because there's nothing more to see than what you just saw in the screenshot. Useless website if you do not have a decent modern browser with javascript on. I must say that it is really interesting if you are lucky enough to use a modern browser. Transitions, animations, elements moving around.

Best Before

Best Before has a really, really interesting website. Smooth animations, fading elements, movement of elements around the page make sliders look dull. Too bad the site turns into a blank page if javascript's off.

Those who remained neutral: neither good, nor bad

Jaboh

It was a little bit hard to put this site into a category. I was going first for failure to use progressive enhancements, but then I said. Ok, it does have progressive enhancement in certain areas. Now, it depends if the homepage is considered a vital part or not. So is it? I am asking because this minimal site that "abuses" of sliders, slideUps and slideDowns throughout its content areas and navigation has one major problem when javascript is off. The content on the homepage suddenly disappears. Call for Sherlock Holmes guys!

Loewy design

Does Loewy sound familiar? yes it does. And it does because they did a great job with their blog, which is showcased up in this article. Anyhow, the agency seems to lack consistency as their main website has some issues. While javascript is on the site is bundled with smooth animations, a nice navigation and sorting menu in their portfolio section and more. If javascript's not available some features like the aforementioned sorting menu stop working. The most important fact here is that the site remains accessible. One can navigate wherever would like, use the contact form, but those little details that made the site interesting are gone.

Adam Rix

Adamrix is a full page slideshow that showcases the portfolio of a talented designer from Manchester. The site lacks navigation and means for making contact if javascript is off.

Position Relative

Position Relative uses javascript to animate navigation - it is a one page website - and to create a nice lightbox, which I think is custom made. With javascript off, there's no animations and the lightbox turns into links to new pages. The navigation also meets some issues because without javascript, jumping to the exact location of the correct section is not pixel perfect. Scrolling with the mouse fixes this issue.

Better home link buttons (4)

admin — Thu, 15 Oct 2009 09:13:47 +0000

This is the fourth article in a series that showcases some very well thought out buttons to link the home page from within the site. You may check the first, second and the third articles on the subject or you can simply check out the following home button of Pro Blog Design.

I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

How to waste 1.000.000 Euros on TV spots!

admin — Wed, 14 Oct 2009 12:11:31 +0000

I waited quite some time to publish this post just because I wanted to see if some SEO will be done for this huge ad campaign on Eurosport. I am talking about a recent publicity campaign the Romanian Government contracted on Eurosport. It all started at the end of May this year, during Roland Garros. The Government has contracted some company to create a few TV ads, and then signed a contract with Eurosport to run them more than 1000 times. I don't know the costs of the actual ads, but I do know the costs of running them in prime time on Eurosport accross the entire European Union. 1 Million Euros. That is quite a lot compared to Croatia running almost as much ads as Romania on the same TV channel for half the money.

Spent 1.000.000 on TV ads to raise awareness on your country and slogan!

The most important aspect, totally neglected by the Government, was what to do next when the ads are finished. Seeing over and over again a TV ad with one distinct phrase: "Land of choice", tying that up to beautiful landscapes, architecture and events makes you want to know where is the so called "Land of choice" and how can you get there!

This is where the Government had a huge flaw in their thinking. Their campaign site for Land of choice is not optimized for search engines. In fact, "Land of choice" key phrase doesn't show up on the site once. I am not sure about this, but I think the first backlink with the text "Land of choice" is the one I just posted above in this post.

Conclusion

Basically, Romania spent 1 million Euros for a TV campaign that brought no tourists because they had a hard time identifying where "Land of choice" is, and the main fault for that is the fact that if you search for this key phrase on Google you end up in Croatia! Such a complete waste of money, but hands down for entrepreneurs in Croatia who picked up on the slogan ran on TV and incorporated it into their sites, their offers, their business!

Improve iPhone’s UX with custom TLD

admin — Mon, 12 Oct 2009 15:48:52 +0000

I think the iPhone's user experience is the best I've ever come across. Everything seems polished, and with each new OS update they refine it even more. I do love how the keyboard changes from landscape mode to portrait mode. I do love how the keyboard changes its contents based on the application you're currently using.

However, I do not like the hot TLD key in Safari. While typing in the address bar the bottom row of the keyboard contains the hotlink for symbol keys, point (.) key, forward slash (/) key, .com hotlink key for TLDs and the Go button. Clicking the .com key will input in the address bar the full tld, while clicking and holding will reveal additional TLDs to select from. This is the part I don't really like and the one that can be improved. The additional TLDs provided are .net, .edu, .org and the traditional .com that is easily accessible. I don't remember ever going to a .edu site on my iPhone. I do visit quite a lot of Romanian sites, ending in .ro TLD.

What I'd love for the iPhone to do is to take note of the sites I visit and their TLDs and display instead of the current .com the TLD most frequently used, and the other three ones revealed after clicking and holding the primary TLD button to be the next ones in frequency of usage. Did you hear that Steve? The next image is self explanatory.

Let me know what you think about the idea in the comments section just below. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Follow us on Twitter

admin — Mon, 28 Sep 2009 11:49:31 +0000

We have added a new way for you to track our articles, via Twitter. Unfortunately webia was taken, so we had to go webia_info for our account. There's a huge icon in the sidebar of the site with a direct link to our Twitter account. Stay tooned!