Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

"Save" Buttons on the Web and Desktop

11 Aug 2003 by Ryan Singer

Traditional web-based interfaces for editing documents (like blogging tools, database front ends, and Secret Projects) have a “Save” or “Update” button at the bottom of the page below the form elements. What happened to the toolbar from our desktop apps? Is it strange that we don’t see a group of options like “New”, “Save”, “Delete”, etc. in a group above our forms?

Maybe the current trend stems from the fact that toolbars in desktop apps don’t scroll with the document and buttons on web apps do. This makes sense, but is it also sensible to assume that the editing process is linear, and the editor will be at the bottom of the page when s/he’s through?

What do you think?

12 comments so far (Post a Comment)

11 Aug 2003 | Steven Garrity said...

Kinda off topic, but I remember reading somewhere recently that someone was wondering how long the floppy disc icon would survive as the "Save" icon (in Microsoft Office for example) as floppy disks are quite rare.

11 Aug 2003 | Darrel said...

Well, I think it's simply a difference between a document-centric interface (MS Word) and a forms-based interface (a web form).

11 Aug 2003 | pb said...

I don't understand. Are you talking about Save/Update buttons that Save/Update the form being displayed/edited or Save/Update buttons that initiate a new function? If the former, then they should of course go at the bottom where they have historically been located. I'm not familiar with the latter. May be a screen shot would help.

11 Aug 2003 | Michael Spina said...

I'm a fan of keeping things linear when it comes to editing data. The less exits a user has the better. Usually I'll give two choices: Save and Cancel. If they want to create a new document, they cancel first then use the New button/link on the view screen.

11 Aug 2003 | Dinah said...

This question was much on my mind this weekend as I converted my weblog over to TypePad (which I love to tiny little pieces).

For some tasks, e.g. composing a new post, I'll want the save button down there at the bottom because I will likely have written enough have scrolled a top one off screen. For other tasks, e.g. flipping through a bunch of imported posts to be sure they all have titles & categories assigned, I like it at the top. My solution so far has been to switch my preference based on my current round of tasks, but I'd love to have it in both spots.

Another example is Netflix's Rental Queue. My queue is well over 250 titles by now, so when I want to scoot something to the top, I need to switch numbers around. Inevitably, I end up at the top of the list and have to scroll scroll scroll to find that "Update My Queue" button which isn't at the dead bottom of the page but a bit up because I've got that other list of "stuff what isn't realized yet but which I want when it is". I would really like an update button at the top in that case.

11 Aug 2003 | Dinah said...

Say, didn't Pyra (the application, not the company) add a menu bar to your browser? Was that separate from scrolling? Am I misremembering this?

11 Aug 2003 | Paul said...

I suspect that, from a designer's perspective, that if the "fixed" positioning attribute in CSS ever gets implemented correctly in IE, without workarounds, we will see stationary form buttons take off.

Till then, it's lots of scrolling.

11 Aug 2003 | megnut said...

It didn't add anything to the browser, but it looked like it did. Using (gasp!) frames, we created a toolbar across the top of the browser (like what Blogger had until recently). It looked very much like a Windows app, if I recall. But I don't recall very well because it's been a while and I don't even have a screenshot of Pyra the app. :(

11 Aug 2003 | click46 said...

wait for Panther before purchasing equipment or migrating over. As much as I love Jaguar, the FreeBSD userland it currently relies on just doesn't compare to the upgraded version that's found in the upcoming Panther.

Best of luck on the migration.

11 Aug 2003 | Stewart Butterfield said...

Two things: menu bars along the top don't generally make sense if you have a form, unless you want to build something app-style, either with forms or using remote scripting.** If I am filling out a form to change my password on a site, what would "New" do? Give me another blank form? Why?

As a general question though, there is absoutely no reason not to have submit buttons on both the top and bottom of a long-ish form (as in this example screenshot from Yahoo!, which is otherwise kind of poorly designed). The web interface for the mail server I use has submit buttons at each logical chunk of some of it's very long forms (on the assumption that I generally want to edit one small part of the whole set of configuration parameters, but if I want to edit a few sprinkled all over the place, it is handy to have them all on one big form, nicely broken up).


** As an aside, I'm kind of stunned that remote scripting hasn't taken off more -- you can make it work in any *4*+ browser and it gives you a whole new axis of flexibility in web application design ...)

11 Aug 2003 | Joshua Kaufman said...

What Darrel said.

12 Aug 2003 | pb said...

I think the duplicate "Finished" buttons on Yahoo are quite confusing. Even after seeing them for years, I still always wonder if the top one will actually save my changes or not. I guess I perceive the top button to be outside the form. And it's completely inconsistent with what you'd find in Windows or MacOS.

Comments on this post are closed

 
Back to Top ^