Archive for the ‘css’ Category

About forms: messing up the interface

Thursday, December 13th, 2007

When creating interfaces you often come to a point where you need to decide what your priorities are. The most obvious choice is to cater to the needs of the user. Unfortunately when doing online business sometimes this is not easy to achieve due to certain restrictions. It then becomes an economic choice.

To simplify the problem let’s say you’re designing an interface for a contact form. There are a lot of people involved in the problem and they all have their own issues they want resolved.

UX expert

Obviously the users want the form to be simple and can be filled without thinking[1]. Their ideal contact form would only consist of two or three fields. Usually this is also what you would get from the UX guys…

The simple contact form
HTML example – the simple form

Sales agent

On the other side of the form you should and most probably will have somebody that will process the form, let’s say it’s a sales agent. He’s not going to like what your UX expert mocked up because it doesn’t give him enough information about the lead[2] that is asking the question. So you’d get something like this:

The sales agent wants more data
HTML example – sales agent “enhanced”

Programmer

When a programmer sees this she won’t like it at all. She would say that this contact form really gives her no way to enter the data into the customer database. There is no way she can figure out what the name and surname are, what the postal code might be if it’s there at all and she also needs more contact information since the new database requires all customers to have an email address and a mobile phone number. You’d now have a huge contact form like this:

The programmer needs to put this into the database
HTML example – programmer “enhanced”

Marketing

Since everybody has a stake in the website and they know better you would also get the marketing crew to add some checkboxes at the bottom of the form. They might also want some other “relevant” information about the user – at least the date of birth and the gender.

The marketing and the legal kick in
HTML example – marketing “enhanced”

Legal

At the end the legal department insists that you add one more checkbox at the end of the form that “blames” the person that submits the form for everything and anything that can possibly go wrong[3]. If you’re lucky the same checkbox will be used to convey that the data will be held for at least seven years and that it can only be uses inside “the group”.

The marketing and the legal kick in
HTML example final version

Oh my!

So now you have a contact form with 15 fields (technically you have 18) instead of 3 which is a surplus of 400% (500%). It’s obvious that each step adds more information that is valuable to the company if it actually uses it. A really good company will know exactly how much the data is worth (lead conversion rates, programming fees, marketing material CTR + conversion, legal issues) and would probably stop at the first form. Others seem to think that this data is more valuable than the drop in the users submitting such forms due to the vast amount of information that needs to be given away.

They want it all

If you can, try to convince the client to use a simpler form. The legal department might help you there if you have any laws in your country that deal with retrieving customer information that is not directly needed to the action taken by the customer. You might be able to create two forms, display each to half of the users and test the responses.

Field length

If you really have to do it, there’s stuff you can do to help people. If you check the example forms you’ll see that the input fields have variable length – they try to match the amount of data that is needed to complete the form successfully. The reason for this is that the form seems easier to fill and doesn’t look like one of those insurance forms you need to fill when you had a car crash.

Simple input

Use various types of fields in a way that helps people fill them correctly. Don’t use a text field if there are only two options and don’t use a free form field for the input of a date. Use checkboxes, radios, drop-downs – they’re each good for something. You can also use advanced JavaScript controls like sliders, calendars or autocomplete but use them wisely.

Validate on the fly

You could also add JavaScript to validate the forms on the fly. By that I mean that while a user is writing in a field some visual cue (like a green tick and a red x) would tell the user the field has been correctly filled. A lot of discouragement with long forms comes from the fear of having to refill the form if a single piece of information is input invalidly.

If you want to know more about forms check out the article Web Application Form Design by Luke Wroblewski or wait for his book Web Form Design Best Practices

  1. Check Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug. back
  2. Sales people don’t interact with people, users or any other lifeform – they deal with leads. Read more about leads in Managing Sales Leads: Turning Cold Prospects into Hot Customers by James Obermayer back
  3. If it can go wrong, it will – Murphy’s Law back

The semantics of <small> and a POSH pattern for footnotes

Sunday, May 20th, 2007

It was probably more than a month ago that markos asked me about the semantics of less important items. We had a short discussion about it and found no relevant tags to mark up a part of text that was less important than the rest of it. An easy example would be a footnote, legal text or any other stuff you would usually make smaller in the world of looks over semantics.

A few days ago I was reminded that I forgot to write about it back then when I saw this issue resurface on the WSG mailing list.

When the semantics of HTML were on question a lot of the tags were ‘deprecated’. Not all marked deprecated in the standard itself, but rather marked as bad practice in the web standards community [1]. When trying to tell the client something is important you really should not be telling it to show it in bold typeface – you have CSS to do that [2].

The problem is that when all these presentational elements were ‘killed’ somebody wasn’t thinking. Let’s see:

  1. <b> ‘deprecated’ in favor of <strong>
  2. <big> ‘deprecated’ in favor of ?
  3. <br> discouraged in favor of <p>
  4. <i> ‘deprecated’ in favor of <em>
  5. <s> and <strike> deprecated in favor of <del>
  6. <small> ‘deprecated’ in favor of ?
  7. <tt> ‘deprecated’ in favor of <code>
  8. <u> deprecated in favor of <ins> and because of confusion with <a>

You might have noticed the question marks in the list. The first one, the tag that is supposed to be a semantic for <big> isn’t really all that important. We have many ways to point out that something is important (if there was a semantic meaning – <h1>…<h6>, <strong>, <em>) or just use CSS to change it to big. The problem lies in the latter question mark. How do you mark something that used the small as some sort of semantic and not just a way of presenting the data visually?

In the standard these are actually specified in the Graphics part of it. The meaning of <small> is Renders text in a “small” font. That’s great, but what if I want to tell the world that what I put in there is a legal text? Footnote? Something deemphasized? POSH patterns to the rescue.

As you might have noticed this post uses footnotes. I’ve marked them so that the text in the article links to the footnote bellow and the footnote links back. To show that this is a footnote relation I’ve added a forward relation rel=”footnote” to the link in the text and a reverse relation rev=”footnote” in the footnote itself. I’m also using these to set the styles (which makes them break in IE6 and other stinky browsers). The footnotes are marked up as an ordered list (<ol>) with a class name “footnotes” and each footnote is a list item (<li>) which has an id “footnote-footnoteid-postid” that enables me to link to it.

When marking up legal notices you might want to use rel=”license” and link it to the part of the content you’re specifying the legal text for with a rev=”license” if you don’t have a link to it; if you’re specifying it for the document just link to the page.

  1. Some are deprecated in HTML 4.01, removed in XHTML 1.0 Strict and some just marked as bad practice. For more details check the specification or other sources. back
  2. If you want more information why this is the way to go please read the POSH page and the articles and presentations linked on that page. back

Semantic CSS

Monday, May 8th, 2006

Today as I was driving home from work I was thinking about ways to accomplish margins in CSS. This was probably due to a code inspection of a certain CSS file I was doing a few days ago that was ugly as hell. It made me think that maybe the number of WYSIWYG/clickety-click editors of CSS/HTML that produce DIV layouts is reaching the point where this needs discussing.

In my opinion a good HTML developer is one with at least a few years of experience doing various web sites on various platforms. This is due to all the things that can screw up a layout when things go off the chart either via user-generated content or by the constant redevelopment. You just can’t learn all the quirks and good practices through reading.

Up untill now it was really simple to figure out if somebody was proficient in CSS – they were using DIV layouts. Now you just can’t. And there are so many ways to create a layout that are just plain wrong and some people don’t know why. I’m not saying I always do but I think all the years of experience help.

So back to the beginning – let’s take a list item element. There is a bunch of ways you can change it’s margins. Let’s first look at the left margin.

  • text-indent:10px;
  • margin-left:10px;
  • padding-left:10px;
  • position:relative;left:10px;

Now let’s look at the top margin.

  • margin-top:10px;
  • padding-top:10px;
  • position:relative;top:10px;

If you add more elements to the mix you get even more options and usually more confusion.

If you’re proficient in CSS you should be thinking of other ways to do this. If you’re not you should know that ‘margin’ property is the way to go and that ‘padding’ property is the only way to add the padding. It’s really the same discussion as why an unordered list with items should be ul-li and not a p-br. And I hope you do know that one…

Changing the way we change websites…

Friday, May 5th, 2006

A while ago Marko wrote about reusability of css based designs. I didn’t agree with him fully but had no idea how to explain/prove it.

In the times of table layouts the process od redesigning a site was actually (at least) three things. First the content was restructured and some of it written again (the sitemap). Then the layout was changed to reflect the new structure and to better fit the content (the wireframes). At the end a façade was made for reflecting the latest trends in ‘webdesign’ (the design – or is there a better word for it?). Even if it was a three way process it was rarely done by three different people – ‘webdesigners’ did almost everything themselves. Since this was quite a lengthy process it was also expensive and some corporate websites changed once every three (or more) years.

Now it seems things are changing for the better. With a DIV layout, CSS based designs and a strict separation of layout and content we can actually split these three into separate stages. The strict division of these stages gives us the posibility to focus our work on what it really has to achieve. It’s true that you cannot use the whole 100% of the other parts but being able to keep 80% is good enough.

About a week ago I found out about two ‘design’ contents and the one Slashdot is holding was interesting because it was about proving a point – you can change the façade without changing the layout or the content. I did the whole thing without changing a bit of HTML (with a bit ugly CSS, would be nicer if a few lines of the code were changed).

I think this way of thinking will settle in and more and more changes will include only one of the three stages. Hopefully they will be based on user testing and/or usage data…