Fog Creek Software
Discussion Board

Underline Edit Boxes?

If you're using a modern browser, you'll notice that we're using underlines instead of boxes for our edit fields. What do you think?

Joel Spolsky
Sunday, October 14, 2001

I love it, I think it looks great. I've seen a lot of weird garbage done with CSS that is just there for the sake of doing something noone else does. One particularily annoying page I saw actually underlines AND overlines all links, which is so terrible and obviously only there for a "Oh look what he figured out!" effect. Underlining the fields though I think is awesome, and does indeed make the form much more paper-like. If people don't clue in, you could just add a "type your name here" thing over the fields maybe?

Sunday, October 14, 2001

I noticed them immediately and thought they were very cool-looking, but it also took me a moment to figure it out and I could imagine others feeling the same.  I would use them for a site with a limited, technical audience, but not on a general-audience site (unless they become widely used by other means).  So, sure, for this site I think it's fine.

M. Hedlund
Sunday, October 14, 2001

When I saw the lines, I believed that you used a non-macintosh compatible code !! I thought that text boxes simply  didn't display correctly.

And I thought :

"Joel hasn't performed enough multiple platform testing. Do what I say, Don't do what I do".

I didn't figure you really wanted to display lines instead of boxes. I'm a Stupid guy.

It didn't prevent me from filling the form, however. So it was not a real usability problem to me.

Vincent Benard
Sunday, October 14, 2001

I really like the look of the underline edit "boxes", but I agree that they are hard to figure out, at first, because they break a web standard.

To help the user know that the underlines are active, I suggest you do what my bank does at They use some JavaScript when the page loads to set cursor focus to the logon edit box: document.Signon.userid.focus(). If the user saw a blinking cursor sitting at an underline, they would get the hint that they should type here to fill out the form.

The only problem with this JavaScript approach is that you (probably) cannot do it in CSS alone and that every page would need custom JavaScript depening on what the first underline edit box was called.  <:-\

Sunday, October 14, 2001

Now that I know what they are, they do look cool... but I too thought it was some Macintosh browser incompatibility.

Sunday, October 14, 2001

You could change the underline to a box when the focus is on the field, and then force focus on the first field with the onLoad event. That would likely increase usability, without having to abandon the underlines alltogether.

Dan Budiac
Sunday, October 14, 2001

Without doubt they look nice, and perhaps they SHOULD be the web standard.  However, they aren't.

I had to pause for a second before continuing my post.  Sure I figured it out right away, but I bet that my dad, who is struggling to become a novice web user, would have been stuck.

So, on a site like this they work, and they would probably work on kids sites and on sites that are used repeatedly.  Casual users are going to struggle until/if they are used more frequently.

Javascript and other tricks might make the difference though.  Depending on the forms on your site, you could probably do something along the lines of:
to get around the custom script per page problem.

Scot Martin
Sunday, October 14, 2001

Lynx users should recognize them easily. (I also think they look really cool, if I didn't say that enough already.)

Mark Paschal
Sunday, October 14, 2001

You should probably lose the style-sheet effects entirely, for two reasons:

1. The underlines are confusing. Text-edit fields in every UI widget-set I've seen (Windows, Mac OS, Motif, GTK, even X11 Athena widgets) are outlined on four sides, and users expect this.

If you were creating a completely new GUI--or one for people who'd been using text-terminals where underlining was the field marker--I'd say, yes, go with underlines.  But you're not.  So be dull, and do what everyone else does.

If I have to take time to figure out your site's UI, I start to wonder if I'll have to waste similar time learning your product's UI.  I'll probably just visit the web site of one of your competitors.

2. The non-standard font settings have the unfortunate side-effect of causing my browser (Mozilla on X11) to render text using scalable fonts drawn at unusual sizes instead of the hand-tuned (and thus better-looking) bitmap fonts that exist for standard sizes (10 point, 12 point, 14 point, etc.).  This happens on the Macintosh, too.

Just use my default fonts and sizes, please, since only I know if I'm using a 1400x1050 display or if I'm showing the page to a meeting hall on a fuzzy projector or that 9-point Geneva on my Macintosh looks so much nicer than 8-point Arial.  If I want Verdana, I know where the preferences dialog lives.

--- Also, it'd be nice to know (1) whether I should type my comment as plain text or HTML and (2) if I'll have any chance to preview what I've typed.

Sunday, October 14, 2001

I too thought; "you're kidding, he wants me to *print* the bloody form??" and then I realised my mistake (or is it actually my mistake -  a la don norman) by clicking and then I viewed the source and then I filled it in and now I realise that I have never bothered to comment on a basic form before!
so well done, it captured my attention and my details - a success, I reckon.
and should everything be kept the same, just because there is "memory"? Maybe, I'm not sure - but every metaphor, standard and so on had to be new once, so why not risk it and push design a bit?
And don't get me started on the actual audience for this form - beta testers - not a typical mass audience??

guy dickinson
Sunday, October 14, 2001

I'm running IE5.5 sp2 and it still looks like edit boxes to me!
When you said underlines, I expected a different effect. However going along with the current M$ UI's of making everthing flattish I like the basic idea of underlines. My interpretation of the flat looking UI is that do not want to attract unwanted attention to those things that are not important right now, so if a box is then highlighted/color changes when the mouse flys over it, then it makes sense.

So yes I agree with underlines (being a special class of a flat (non-attention seeking) type UI), however it should change to a standard looking edit box when a user types into the field or selects the field. This is all fine for a windows application, however it is beyond the scope of simple CSS.

Myles Penlington
Sunday, October 14, 2001

Sorry, but dump the underlines.  Use regular boxes.  (Though I am happy to find out about underline boxes so I can use them for my personal, internal stuff!)  They certainly look cleaner, but they are much too confusing for a site like this -- if you were a flash designer and this was your "Look at How Cooooolll I am!!!" site, then your audience would be more accepting of strange UI widgets.  I'm sure a large portion of your audience is savvy enough to figure out that they are text boxes eventually, but it shouldn't take that much thought just to fill in a web form.  Standards. (unless you have a REALLY REALLY REALLY good reason to stray from them!)

Sunday, October 14, 2001

Why risk giving anyone a hard time? I'd much rather see battles fought with the conformity on more important issues.

BTW: Why is the software called CityDesk? I would never have guessed that it had anything to do with content management. Is there a funny story you'd like to share :)?

David Heinemeier Hansson
Sunday, October 14, 2001

I love it!  But my girlfriend was not as impressed and was concerned for "the dumb users" who would be confused.

Although the norm for edit boxes is the clunky box, the underline edit "boxes" mimic much more closely what appears on paper forms and are easier for the eye to digest.


Sunday, October 14, 2001

Using Opera 5.12 on Win2K, the edit boxes still show up as edit boxes--no underlines.  So I went and had a look at them with IE5.5.  I can definitely understand why people would think the form had to be printed and completed by hand--that's what sprung to immediately to my mind, too.  (Although I had read that comment first--I didn't arrive at the form without prior warning.)

I'd be inclined to keep underlines for paper, and stick to edit boxes for web pages.

With the underlines instead of edit boxes, I also found it harder to recognize which edit line went with which field name.  My eyes seemed to "drop" each underline so they looked like they were between fields...

Martin Sutherland
Sunday, October 14, 2001

Well, i loved it because i read your message first. Stumbling across the page without warning would have got me wondering. As previous posters mentioned, maybe this will make users wonder. Well, an usability test shall answer that, right ? :)

A little suggestion : you should reduce the size for the zipcode. Also, i prefer selecting my country from a big drop-down box than typing it.

I was gonna ask 'what about textareas' ? i got my answer when writing this. I prefer the 3d look.

Sunday, October 14, 2001

Have you ever spent 20 minutes or more discussing how something was implemented, and then ended up saying "oh well - I guess it really doesn't matter. Let's just leave it and get on with our real work." That's how I feel about the underlines.

On one hand, they look neat (although the neatability factor would soon wear off), and something tells me that's the way edit boxes should have been done in the first place. Third, he's already implemented it that way! But at the same time, there's inevitably a slight impact on usability. Given the number of replies, it probably isn't a big issue. They still behave exactly like they used to. So that's 3 small pluses and 1 small minus.

Just leave it and see what happens. Maybe you've started a revolution.

Johannes Bjerregaard
Monday, October 15, 2001

Something has to be done to accommodate the audience because (almost) everyone’s first thoughts are that the page will need to be printed.  So I would say, as it is right now, it is inadequate.  The previous suggestions of “Type your name here” AND the cursor focus is good.  Also, having the “Country” entry a drop down box, as previously suggested, will clue me in that this is a form to filled out and not to be printed.  In addition, it forces me to pick an entry, speeds up my time filling out the sheet and there will be no misspellings.  In my opinion though, make it easy for your users, use the edit boxes.

Unfortunately, my response is tainted because I knew they were edit boxes that were going to be underlines before I got to the page.

Side Comment:
I completely missed the first two sentences at the top of the page, “Thank you for…” and “Please check this …”.  People don’t read.  When they get to the page, all they will see is the form to be filled out.  (If you don’t know what I’m talking about see Chapter 6 of Joel’s UI book) Perhaps having the Beta Agreement checkbox at the top and bottom of the form with the checkboxes linked together so there are both on or both off would be a good idea.  I know, I know, it’s overkill for this size of page but I still feel it will help users by having it.

Michael Hawkins
Monday, October 15, 2001

Underlined edit boxes are indeed look better and nicer then HTML edit boxes. The only problem, as other people mentioned, is that they're unusual for the people. So, it's up to the author to decide what does he prefer.
I was using those pretty underlined boxes and explainuing in BIG what they are.

Evgeny Goldin
Monday, October 15, 2001

I think the look and feel of the 'flat' UI is much better.
As for underline edit boxes ... hmmmm....its a shift ...
but i kinda like it. I have used such variations in my web
design work ...but it has always been difficult on the
"business" users to adapt to new look and feel....
and most of the "business" users take time to adapt themselves to the new UI's we dish out. Its after some
reluctance that they do get into the groove ...

But hey ... although having underline boxes is cool ...
having the font in them as "bold" doesnt really look that cool....

Sadashiv Kshirsagar
Monday, October 15, 2001

From an esthetic standpoint they look neat. From a usability view they do not confirm the current standard for input fields and are less intuitive than the boring 3D boxes.

So I go with the majority and say drop them, at least until the world is used to underline input fields. The latter probably will never happen as boxes with a different background color are much more intuitive than a simple underline.

Being revolutionary in GUI's more than often decreases usability.

But I read your book, so who am I to tell you?

Jan Derk
Monday, October 15, 2001

A neat idea, but as others have said, it leads to the wrong conclusion about the form (printing vs. on-line). To maintain the feeling of "flat" UI and paper-likeness, I would suggest using a single line border for all four sides, as I regularly do on our internal sites. EG, style="border: black 1px solid". These look nice but still suggest a text box to be filled in.

PS, using a bold, mono-space font in textboxes is a good thing.

Ian Lowe
Monday, October 15, 2001

I like the look of the underline edit boxes even though I had to change my color scheme to view them properly.  Using IE, if your window background is not white, the edit boxes still look like boxes.

Chap Lovejoy
Monday, October 15, 2001

I read your weblog first, so I knew what to expect.  I'm in the process of getting my friends to visit the form "blind", and tell me what they think.

For me, the lines are visually encumbering.  At first glance, it's just a webpage with tons of cluttery little horizontal pinstripes. Not only are the standard text boxes, well, standard, but through habit and affordance they instantly tell me what to do, and where to do it.

And I never thought that I'd have to come here of all places for my first time hearing a programmer say "I know it's not the standard, and I haven't done any usability testing, but I think it looks cool, so I'm going with it anyway".

No offense.  I'm just surprised, is all.

Unless this is supposed to be the usability testing.

Monday, October 15, 2001

Simple solution follows...
I am one of those people who has set the default background windows color in Windows(tm) to something non-white.  As a result, Joel's Special Edit Boxes look awesome on my system.  Basically they look like regular edit boxes, but with much softer 3D shading..    So, all Joel needs to do is set the parameter for background color of these boxes to something off-white.  (This assumes that such a parameter exists.  Perhaps that is not the case.)  If I am feeling a bit more frisky (if not randy baby) later on, I will post a screen shot of what I am talking about somewhere on the web that is world-wide. 

Anon Lover
Monday, October 15, 2001


It sure looks good. No doubt about that. One problem still however. With a normal "boxed" edit field, every user knows where to click to active it. Somewhere in the box that is.

With the underline only, where do you have to click? On the line, just above, ... It is less straight forward and therefore some people will have to reposition their mouse and click again until the correct edit field is selected.

But then again, they look so nice :)

Now I have to choose between consistency or good looking.

Perhaps I should stick with normal boxed edit fields, piggy backing on a decade of education, telling people that such a box is an edit field and that you can click in it. Otherwise I have to do that education on my site, scaring some visitors away.

Bavo De Ridder
Monday, October 15, 2001

For a form that each user is expected to encounter once in his lifetime, I would definitely emphasize useability over beauty. Once someone has filled it out, they'll never see it again. In cases like this, you won't get any extra points even if your form rivals the Mona Lisa.
On the other hand, each person that gets slowed down filling it in <i>will</i> swear at you. Some of them will figure that if you're doing anything as non-standard as this, then your design tastes are such that they don't want to use your software. Others just won't be able to figure it out and will depart.
The bottom line is that there is no up-side, but plenty of down-side. Just say no.

Jim Lyon
Monday, October 15, 2001

A good looking alternative on the same theme is to create a full box using CSS, it is much better looking that a traditional text box.  Users will understand its meaning

Monday, October 15, 2001

I'm not going to add anything regarding Boxes vs. Lines, but I do like the error conditions.  Go to the form and fill it out improperly and there is NO doubt which fields the system expects you to fill out.  I really like hiliting the box in red instead of the field label.  The only suggestion I'd make is to drop the "(Required)" text and just go with the box as it makes things look crowded. 

Hugh Jass
Monday, October 15, 2001

What about using no underline at all but a different color bg in the table to define the area that is editable. You get away from the ugliness while still keeping some of the convention  by defining the area as a separate box. The typwriter style lines are cool though.

Jesse Holmes
Monday, October 15, 2001

We seem to agree that the old box-style forms are boring, but that the underlines are not the answer -- at least in the example shown.  The sneaky test below DOES work well however.  I'll bet that few of the folks noticed!

Crusty Oldman
Monday, October 15, 2001

I think there are reasonable alternatives to redefining the box.  I've seen a few forms with lots of fields that didn't bother me.

I think one secret is to use columns, as well as rows, of boxes.  Line after line with one box is an eye sore.

Another choice would be to use color.  If you can, try dimmer edges or a cream color for the box to see if it looks better.

Finally, it may need CSS, but you may want to check in with a graphics pro before you re-define standards.

Charles Patterson
Monday, October 15, 2001

It seems to me that the underlined edit boxes are more likely to be intuitive for "regular" users.  Everybody understands "fill in the blanks".

The confusion the experienced users here are having probably comes from having to unlearn the ugly forms they are already used to.  But experienced users can handle this, and it's worth it, because:
The underlined edit boxes look clena and sharp!  Keep them!

(I do think positioning the cursor into the first field would be a good thing where practical).

Shawn Yarbrough
Monday, October 15, 2001

What about something in the middle of the two extremes?

Namely: Underline the box darkly, but give the other three sides (much) lighter borders.
Or, maybe just the left and the right sides get borders, leaving the form field with an 'open' feel.

I agree with the folks who say that a pure underline will make most people think it has to be printed out.

Steve Bogart
Monday, October 15, 2001

The underline edit boxes are awsome. I suspect they will become an industry standard in short order. Thank you Joel, for fixing something that so badly needed fixing.

Mike Sensney
Monday, October 15, 2001

I like the underline boxes but it looses my typeface and replaces it with something butt ugly on my system (Win2k SP2 IE6.0.6.2600.0000). 

Be a rebel, keep the underlines.  After all many accounting systems use this format too, and you want to attract the ones with their hands on (or in) the corporate purse ;o)

Michael Chester
Monday, October 15, 2001

Many of the responses have focused on whether users would recognize the lines as text boxes.  But what about the reverse, i.e. people confusing regular lines as text boxes, once they learned to use "text lines". 

For example, immediately after the following paragraph...

"It probably does reduce learnability, marginally, to use underlines for edit boxes instead of boxes. But then again, they're really cool looking :) and I can't bear to switch them back to boxes. What's your opinion?"

...there is one of those new, cool "text lines".  How come I can't enter my opinion there?  ;-)

Mark Smith
Monday, October 15, 2001

I have to say that I think text boxes are supposed to boxes, not lines; the lines just look weird on anything other than a character-mode terminal running Lynx.

But I like the 'flat' look, so why not just show all four edges of the box?

Dave Rothgery
Monday, October 15, 2001

Man, I can't believe Joel is playing around with UI standards because they look cool... this seems like a little thing maybe but it shows that Joel is just a prone to the "coolness factor" as any other programmer that he has mocked so mercilessly.

Mozilla redefines all the standard controls, for two reasons: one to be cross platform consistent, and two to allow skinning (specifically allowing the *user* to change the look). But their controls still look pretty familiar on the whole, just with more colour or effects.

By comparison, yours look completely different and have only the tiny benefit that people who have never filled in a web form before will find it slightly more familiar.

Finally, remember that even though your web site has this look, everyone still has dozens of Windows applications and other web sites that all look like the original controls. It's *far* better to have the look changed consistently across the system (e.g. by WindowsBlinds or upgrading to XP) than each thing independently picking it's own look. Which just makes a mess.

Aaron Lawrence
Monday, October 15, 2001


Tuesday, October 16, 2001

It's not big and its's not clever. Stop it.

Tuesday, October 16, 2001

Please don't do that.
One of the advantages of standardisation is the people recognise things. If everyone thinks up their own UI, it gets harder to use.
(And IMO, you shouldn't specify fonts or sizes, either. As someone else said, if I want Verdana -- or any other font, or any particular size --, I know where my browser's preference settings are. People tend to know what they like better than some random web developer does.)
And setting colours might not be such a good idea, either. (Especially if you don't set all of them -- for example, you appear not to set the link colour, so if someone likes white text on black background, with white links, then your forced white background will make the white links disappear.)

Philip Newton
Tuesday, October 16, 2001

It's very cool, and i'll steal it :)
But you might want to have some text in the box already such as "(edit this)" and use javascript to clear the box upon clicking in the textbox. Might help letting user know its a textbox

Mike Lee
Tuesday, October 16, 2001

It doesn't seem to work at all on Netscape for Linux - I'm seeing regular edit boxes... ah, the joy of cross platform standards. I suppose at least it's reverted to the original-and-therefore-still-usable.

Katie Lucas
Tuesday, October 16, 2001

"Unhappily, there is a dark force out there that fights consistency. That force is the natral tendency of designers and programmers to be creative."


Mike Gunderloy
Tuesday, October 16, 2001

I have to say, the underlines are beautiful.  Really, they are.  But they are also confusing.

Perhaps something in between?  I was thinking that if you put a short vertical bar at the beginning of each underline, it would look that much more like an edit box, and less like a printable form.  It would be just enough visually to convey that I might type something there.

Two other hints would be to move the cursor there when you hit the screen, and to have text already in there begging to be overwritten: "Enter name here" or something to that effect.

But, damn, they sure are pretty.

Peter Risser
Tuesday, October 16, 2001

I had the same "palm on the forehead" effect as another reader here. I, too, user a non-white windows background (some sort of very light peach) and I didn't see anthing bad with the edit-boxes. They were there, only with a little flatter 3D look.

Then I changed to white, and indeed, they don't look good at all.

This should bring us to the famous <a href="$71">affordance</a> discussion, where flat buttons were rejected for not looking "clickable" enough.

These lines don't look "fillable" enough, unless you change your windows background color. try it out...

Guy Hoffman
Tuesday, October 16, 2001

I agree with the "looks cool but it's non-standard" assessments. And I don't think the pros outweigh the cons on the beta sign-up page. But I can imagine a situation where an approach like this would solve more problems than it creates.

Picture a page where the function isn't to enter new data, but to browse and update existing data. And picture it with lots of fields to look at. Traditional text boxes really clutter the screen and make it a bit harder to rapidly scan for information (they do for me, anyway), but I can't get rid of them b/c (let's assume) I need to edit the data in place. So maybe in a case like this the underlined edit box extends past cool all the way to practical. But only in a full-time user kind of way. In other words:

Power user && Browse/Edit -> Good
Casual user || Add only -> Bad

Ian Waggoner
Tuesday, October 16, 2001

I've been designing database UI's for years, majority on the Mac (yes, going back to the little "poodle tombstone" Classic). A lot of these systems have been used by relatively unskilled users, sometimes with little time for training.

I've used the standard "3D" grey in recent years when clients request, but onscreen forms with dotted underlines have ALWAYS been highly popular with the end users.

I think it's not only the similarity to printed forms but also the removal of extra noise. Managers who approve UI's don't spend hours a day filling in the forms they approve.

I suspect that slightly stronger, dotted underlines, would be an even more recognisable idiom than the grey ones I see on my Mac screen before me and would avoid any confusion with links.

Andy Dent
Wednesday, October 17, 2001

Of course, it is a little bit hard to understand these underlined entry-fields at the first time, but once you figured this out, you can use it without a problem.

"All idioms must be learned. Good idioms must be learned once" (C) Alan Cooper

I would also recommend to make some white space between fields - then they will be easilier recognizable as fields.

Sedelnikov Andrei
Wednesday, October 17, 2001

Personally, I was confused, and I thought I had to print the page out (before I clicked on the field to figure out wether it was an HTML field or otherwise.)

Kinda strange :-)

Thursday, October 18, 2001

I have to say that it is not immediately apparent what they are. From a usability point of view (based on my reading some of your own articles, and books by Neilsen and Cooper), I don't think it's a good idea.

I think you can get just as good an effect by leaving the box aspect, but flattening it out by removing the 3D border.

Friday, October 19, 2001

From a design viewpoint, I think they are great!  From a usability standpoint, not so great.

I think it's okay for advanced users, who feel confident clicking around on things because they know they can't "break" it, but novice users will be intimidated.  If it were me, I wouldn't use them.

That said, I probably will use it for some online forms that I am designing.  They have the bafflingly annoying requirement of being able to be filled out by the user but only showing an underline when printed.  This sounds perfect for the task.

Friday, October 19, 2001

I'm using Opera 5.12 (on Win2000) and they look like regular input boxes to me (I had to fire up IE just to see what they look like).

I'm not sure if this means that you've used an IE non-standard part of CSS or if Opera hasn't implemented that part of the standard.

Of course, all us freaks who don't use IE can safely be ignored.

Monday, October 22, 2001

I vote for consistency - keep the boxes.  On another point, I find it harder to associate the label with the editfield when both are left-justified (the labels get too far away from the editfield).  While I don't necessarily like the way it looks (from a purely visual point of view), I find this (where the labels are right justified to the edit boxes) easier to use:

a very, very, very long label: [edit box1]
                          short label: [edit box2]

to be clearer.

All that said, I enjoy your site a lot, Joel.

best regards,
Chris Keith

Christopher Keith
Tuesday, October 23, 2001

Sorry, I didn't realize that my leading spaces (in the previous reply) would be deleted.  The labels should look right justified, the "edit boxes" left justified.

Christopher Keith
Tuesday, October 23, 2001

This is the first time I've ever seen this done, and I really like it. I agree that it might be difficult for new users to grasp, but then again, how are they going to learn to adapt if they are never challenged? This could easily become a standard if more people started using it! I think it should be the standard - it looks MUCH nicer!

Kenny Ray
Tuesday, October 23, 2001

We use dotted underlines in our Win32 product (an easy-to-use CRM system) because users spend 80% of their time reading information off the screen. The standard 3d edit fields introduce too much visual noise, so we have been using the "flat look" for the past seven years, with great success (over 200 000 users).

We do change the background of the field when it has focus. That makes the edit field seem more editable. We also make sure the edit focus goes into the first field. The color change draws the eye towards it. The dotted underline does not disturb the eye, but gives an indication of where you can fill in more information.

Christian Mogensen
Wednesday, October 24, 2001

I have my "Window" color set to a yellowish tone instead of white.  End result is they look like boxes to me because the yellow is very offset from the pure white of the web page.

Ryan Phelps
Tuesday, October 30, 2001

I can hear Jakob Nielson's last few remaining hairs falling to the ground....

David Whitlark
Thursday, November 1, 2001

*  Recent Topics

*  Fog Creek Home