Of late, I've been doing a lot of blogging and webmail and have come to realize that HTML forms are some of the least friendly UI in our App. What can we do to make it better.
Some suggestions that come immediately to mind would be a save/submit prompt when closing a tab or window that has user form data, an inline spellchecker, a text area resizer (allowing users to resize text areas by dragging a resize widget in the corner of the text area, akin to window resizing,) search and replace within text areas and maybe a wrap/nowrap view.
This might be a bit over the top for most users. What do you all think? How can we make text areas better for bloggers and webmail users without going overboard with clunky UI or unnecessary features?
Posted by asa at January 17, 2005 09:01 PMI agree. There's no reason why more logic can't exist in the forms editing code. I can't count the number of times I've lost blog posts or comments by killing the browser or a window.
I suppose it's something like saving a draft in Thunderbird. Auto-saving might be nice too, just in case you lose your work.
Posted by: Matt Mastracci on January 17, 2005 09:59 PMI guess one way to do this would be that Firefox gives a warning to the user if it knows that said user has changed some form on the current page before closing it. We'd need to test its intrusion factor, though, but the only way to do this is to do a test implementation then let testers well... test it.
This would be a bad idea it it's somehow possible to dynamically edit a form value through JavaScript, though... Then, it'd just be an annoyance. If this isn't feasible, then I'm all for it ;-). If it is, then I guess we need to put some trigger that tells Firefox that the user has used the keyboard/input to change a form, and that the page itself didn't do it.
Posted by: Markus Lindström on January 17, 2005 10:21 PM> a save/submit prompt when closing a tab or window that has user form data
Yes. With a "don't ask me this again" checkbox. Defaults to always ask.
> an inline spellchecker
> search and replace within text areas
> a wrap/nowrap view
All from a right-click within the textarea. Possibly on a bar attached to the top of a textarea (which can be turned off); the bar could contain the search and replace function and wrapping functions too.
> a text area resizer
Extension. Text-areas should be intelligently sized by the page author just like every other element on the page. I can't resize any other poorly-designed page elements.
Posted by: Greg on January 17, 2005 11:05 PMIt would be great if the editor component supported xhtml, with an optional toolbar at the top. It would make big headway into getting xhtml adoption soaring, and would allow for rich-content blogs.
Also, it's easier to convert from xhtml to html (for more browser support) than the other way around. It's also easier to validate etc.
Posted by: Anko on January 17, 2005 11:15 PMTake a look at the way OmniWeb handles textareas. It has a button that opens a fully resizable form editor with undo/redo, the ability to import text, spell checking, and printing. Very slick.
Posted by: Roger Johansson on January 17, 2005 11:35 PMWI made some sort of extension for search and replace in textarea's, but it really sucks:
http://martijn.heelveel.info/test/mozilla/findtextarea.xpi
I think it is very important that find works again in textarea's for Firefox.
Posted by: Martijn on January 17, 2005 11:37 PMIt would also be great if text areas worked reliably, I know there is a bug about this in bugzilla, but I can't seem to find it currently (maybe I haven't had enough coffee yet...).
Anyway, I frequent this forum board: http://episteme.arstechnica.com/eve/ubb.x
The problem: Choose a thread, go to the bottom right and hit "Reply" and you'll get a popup window with a textarea. Now, insert at smiley by using the smiley button over the textarea and vupti, the cursor is gone. It's one of the very few things that annoys me about Firefox. I've just tested it in Mozilla 1.8a6 and the bug is there too.
Yes, I know this is not the place to post bug reports, I'll go search bugzilla again now :)
Posted by: Joergen Ramskov on January 17, 2005 11:50 PMImplementation Of WebForms 2 Should Help Also.
Posted by: Maniac on January 18, 2005 02:26 AMFor reference, some bug numbers for things that have been mentioned, or things that would be useful (and Midas, which needs work to be even usable really).
Spell Checker for Firebird (WONTFIX)
Ask for confirmation of window close if form has been edited
incremental find/search in page does not find/highlight text in textarea/form/text entry boxes
Find Toolbar appears when pressing ' or / in HTML textarea
Find toolbar appears when using Midas, preventing the use...
midas html editing mode persists after leaving the page that enabled it
The find toolbar broke some stuff in this area, but the regressions were apparently considered acceptable because bloggers aren't a big part of Firefox's target audience (that may be a misreprentation of what blake said, but that was my impression).
Posted by: michaell on January 18, 2005 03:45 AM...you'll get a popup window with a textarea. Now, insert a smiley by using the smiley button over the textarea and vupti, the cursor is gone.
yes, i have a similar problem with my custom backend, amongst other places. whenever u use JS to edit textarea contents, the cursor goes to the end but the area scrolls to the top!
i remember seeing someone describe forms as the ugly duckling of web design and they're not wrong. forms are hard to style (especially without using the table hack), hard to make (eg. all the verification - digits, email format - must be done manually) and hard to use. i guess this was ok back in the day but these days the web is an enormously interactive place. innovations in these textareas - such as autosaving, resizing and xhtml formatting toolbar/shortcuts - would make a big difference, this could be the new find-as-u-type where firefox brings usability forward. forms lag behind other components in many ways - please bring them forward!
Posted by: db on January 18, 2005 04:38 AMI say - do whatever it takes so that people don't lose whatever text they entered. First and foremost.
I think by now megabytes of text and thousands of posts were lost to various web annoyances, both net-induced and user-induced (closing pages/tabs, etc). This should stop.
Posted by: forum poster on January 18, 2005 05:03 AMWhile there are any number of extensions to forms that could be done, I'm reluctant to recommend any that go beyond "standard" browser behavior, so that folks who have written to the current assumptions of web forms don't find Firefox conflicting with what they've done. Doing non-standard stuff is what the Other Guys do.
On the other hand, not having a search/replace inside of forms is a real PitA ...
Posted by: *** Dave on January 18, 2005 05:41 AMi want VI bindings for text areas :)
Posted by: chris on January 18, 2005 06:09 AMBack in the Mozilla 1.0 days there was a great extension called Composite that was the best solution I've seen yet for this sort of thing. After it was installed, if you hit CTRL-e when the caret was in a textbox, up would pop a modified version of Composer, which you could use to do your editing; and this modified Composer window had a "Save" button that, if you clicked it, would save your work as valid HTML back into the textbox where the caret was.
It was bloody brilliant, but the maintainers let it go to seed when the APIs changed around Moz 1.3, and of course FF doesn't include Composer so you don't get the editor "for free". Maybe it could be done as an extension, though -- package Nvu with the code reqd. to interface with FF?
Finally found the URL for the old Composite project:
Posted by: Jason Lefkowitz on January 18, 2005 06:23 AMI see that the Thunderbird developers recently tested an inline spell checker: Tunderbird spellcheck forum discussion
Sounds like it came from some Nvu work, it seems like in-line spell checking technology is getting a pretty good workout at Mozilla -- hopefully we will see it in Firefox soon!
Just wanted to second the comment about looking at what Omniweb has done in this area, very nice indeed.
Posted by: dave on January 18, 2005 07:23 AMHey Asa you are right on the ball here. You wouldn't believe how many times I've posted on a forum and lost my post due to an internal server error etc. I agree with all of your suggestions. I built javascript widgets on my own forms to resize textareas. Would be nice if firefox did it for me, but I also believe web devs would need some way of turning this off (like you can turn off the ie6 image toolbar thingy).
Posted by: John Serris on January 18, 2005 07:26 AMJust use Thunderbird for posting and sending comments to the blogs :-)
It has spell checker, offline mode, it supports reading the blogs. Why not use mailto: URLs for comments ( in addition to the normal form ) ? It is also easy to do the real posting from tbird.
It would also be nice to be able to fire up the composer from mozila/thunderbird to edit a text field. Maybe an extension that adds a small icon/key in a corner of text forms that would launch composer ?
Posted by: Costin Manolache on January 18, 2005 09:07 AMOptions to save, load, etc. from profile data things such as saved blog entries would be great. My blogging program doesn't let me save entries for example, Firefox can solve this. Would be nice to have the option to restore data I've lost. I often type a huge message taking an hour or so, the form submission doesn't work and when I go Back I've lost it all.
Posted by: Cow on January 18, 2005 09:19 AMhow about the work loss when you submit something, there is an error or something, so you hit Back, but now the contents of the form are gone so you have to retype them... that one has been frustrating for a *long* time, and not just in Moz.
Posted by: Jeff Wilkinson on January 18, 2005 09:29 AMAsking to save form info when closing a tab/window would be SO useful because it's easy to accidently do it. The same think should apply to hitting the back/forward button, especially on Gmail because once you've hit back you can't hit forward and therefore lose what you were typing. Firefox doesn't even have to offer to save the information. If it just popped up a dialogue box asking you to confirm closing/pressing back (like the one that appears when you try to close a window with 2+ tabs open) that would be fine. All Firefox would have to do is scan the page for tags and check that there was some content in one of them and then pop up the box. I'm sure something simple like that could be knocked up in minutes.
Posted by: Anon on January 18, 2005 09:55 AMMozilla supports onbeforeunload, right?
Web application developer can easily add some JavaScript logics to prevent window from being closing without saving the data... :-P
I totally agree. I work for a company that develops a content management system and we have to do a lot of dirty javascript hacks (works in firefox too!) to fake a somewhat usable interface and yet one of our bestselling features is a import from ms word button (triggers a macro that exports your ms word buffer to html and uploads it to the cms where it is parsed and fed to the db).
What users want is ms word, what the browser offers them is a fixed size textarea that doesn't do any formatting whatsoever. Basically there is no good technical other than that it is not supported by the html/css specs that we do not have full blown word processor capability when working with text areas.
Posted by: Jilles on January 18, 2005 11:04 AM1. Copy Opera's automatic session resumption with saved tabs in the default config.
2. Improve on it by autosaving and restoring form data.
3. For phlerk's sake, don't add prompts. Always do it, unless disabled in preferences.
Posted by: Leons Petrazickis on January 18, 2005 11:27 AMThis isn't really blog related, but I was recently disgusted to discover that FireFox's find feature wouldn't search text in a text box. Search and replace would be nice, but just letting the normal search find things would be really useful.
Posted by: Barry Stellrecht on January 18, 2005 12:00 PMI didn't read all the comments--but I think a spell checker would be great. I know that, from a lot of people on forums I use, the first extension/feature they ask about is spell checking. Also, does Camino have a spell checker? Apparently Mac OSX has a built in spell checker--would it be possible to hook into that (for Firefox or Camino)?
Posted by: Neil Paris on January 18, 2005 12:37 PMInline spell check would be great - F7, right click, or tools > spell check
Offering a prompt like "You appear to have typed information into a form, do you wish to [Save] [Stay on this Page] [Close/Navigate Away Anyway]" would be very helpful.
Firefox is already better than IE at keeping form information when you navigate back to a page, although that is no reason not to innovate further!
Searching form information would be helpful - especially if this included items in [select] items etc.
As has been mentioned already, form objects _should_ be sized by the page designer, but they are often wrong. It would be great on many pages if you could select an item to allow users to resize items on pages (like divs textareas...) perhaps this should be an extension, as it's not really a general user item
I don't really think adding toolbar is the best option (unless this is offering a rich text editor), especially it the textarea is NOT resizable, as it could take up a significant proportion of the textbox
I agree that form UI needs improving, but do you think that you may be slowly starting down the slippery slope towards creating your own text editor? While improvements are always cool, I think a better approach would be this:
external processes/filters for textareas
http://bugzilla.mozilla.org/show_bug.cgi?id=13474
My reasoning: everyone has their own favourite text editor, compared to which an inline widget will never compare favourably. I would add a spellchecker and a mouseover-visible toggle icon to make the textarea auto-fit/expand to display up to 1 page worth of text. For the rest, inline rich text editors are readily available, and for heavy-duty plain text editing (which is almost exclusively coding-related) external editors would fit the bill better.
My 2 cents,
Ian
Posted by: Ian on January 18, 2005 01:02 PMWhat about feature that remembers form input like Name, email address, address and things like that. A lot of people ask about it and AFAIK no work has been done to remember form inputs and have a button on toolbar to auto-input your information ie..Opera's wand thing, Netscape Prototype's passcard.
Posted by: Kurt on January 18, 2005 01:12 PMmozex http://mozex.mozdev.org/ allows launching of an external editor for textboxes, but it hasn't been updated in more than a year.
Posted by: James A on January 18, 2005 02:09 PMGreat points, Asa. It's amazing how much of the great content and business on the web goes through these crappy little text boxes.
In-line spell checking would be fantastic. I'm used to having it in my instant messenger thanks to Gaim and GtkSpell.
Also, some way of automatically saving form text even if it is never submitted. I'm almost ashamed when I have to tell clients to write long peices of text in a word processor so they can save them in case they have a problem before they submit the text into a web-based system.
I should feel confident that *anything* I enter into a text box, no matter what I do next (accidentally close the browser, navigate to another page, etc.), will still be retrievable, somehow.
Again, great points - I look forward to seeing some of these ideas in practice.
Posted by: Steven Garrity on January 18, 2005 03:47 PMTo improve textareas, the first thing to do is to back out Bug 137253. Due to the "fix" for this bug, Mozilla now puts a horizontal scrollbar on textareas whenever URLs (or other long words) are typed. It's *extremely* annoying, and has been a major usability problem ever since Mozilla 1.1 was released.
Other than that, I think a textarea resizer would be a very nice improvement. Also, having textarea data auto-saved in the background can be very useful when recovering from a crash, it would save me from using notepad.exe when when writing anything longer than two paragraphs.
Prog.
Posted by: Prognathous on January 18, 2005 05:18 PMFirst off, please nothing that gets in my way, ever. (This means no dialogs!) If form data is saved, it should be saved automatically (pref to turn it off if privacy's an issue), and when I go back to the page, I should see one of those little yellow status bars at the top saying "You had unsaved form data when you left this page last. [Continue] [Clear] ............. [x]" where continue and x both leave the data as-is and get rid of the bar and clear clears the data and gets rid of the bar. Typing in the forms should be equivelant to continue, *but should not make the page jump*.
Second, as others have said, get the find toolbar working in textareas, and fix the back button so that it doesn't ever lose what you were doing (perhaps the back button should be the same as closing the browser, with that little yellow toolbar I talked about)
Third, for spellchecking: let people right click to spellcheck an individual field, or (perhaps) use some key combo to check all fields on the page. Also (pref for this!) have all fields automatically spellchecked on submission. If errors are found pop up a dialog (A dialog is okay here!) that clearly lists the errors and allows cancel sumission or continue.
Don't spellcheck inside password fields. Pref to spellcheck inside name fields. Either include or make it easy for someone to write an extension to leave out certain things (ie, for me, I don't want anything inside an HTML tag spellchecked, since obviously most of my URIs are going to be "wrong"). (Pref here) Don't spellcheck inside email fields EXCEPT to check if it's a close misspelling of a known email. Ditto for URL/URI fields. Etc. for other fields.
(I'm not sure about automatic spellchecking with the little red line under bad words (is that what's meant by inline spellchecking?). That may or may not make some of my spellchecking ideas unnecessary.)
Finally, support Web Forms 2, so client-side validation is easier.
As for textarea resizing, you might need to be careful. This could mess up pages that use the WF2 wrap='hard'. Just a warning.
Posted by: dolphinling on January 18, 2005 05:41 PMSaving/loading: That sounds like it's almost achievable in an extension - hook onbeforeunload as minghong mentioned, ask the DOM for all form elements; first step can even just be save all to a file on a button click, add the automatic stuff later (autosave?). Needs somebody to really think everything through first though. I would think this would be for an extension though.
Spellchecking: Sounds like SpellBound. Never tried it myself.
Posted by: Mook on January 18, 2005 06:38 PMRegarding textarea resizing, Daniel Glazman once implemented the -moz-user-resize CSS property in Composer++. In Composer++ this means that the user can resize any element; in Firefox this could mean resizing the textbox. So we could have a simple bookmarklet change the style on the focused textbox, to allow this.
Posted by: Minh Nguyễn on January 18, 2005 07:16 PMMaking textareas user-resizable would be useful if done with a properly sized (i.e., small) widget Prompting when a page with user-edited data is being closed would also be a nice touch, although I think there might be a better way to do it than via a prompt (tho what that way is I couldn't say).
However, that's as far as I might consider going in the default browser. Adding a spellchecker would be too wasteful in download size, I think, but making it an extension would be extremely useful. Search and replace isn't all that useful for most people, and I'd consider it UI bloat. Wrap/nowrap is also very much an edge case.
Posted by: Jeff Walden on January 19, 2005 12:27 AMAll of the features you're suggesting sound like extensions to me. In fact, the save/submit prompt should in my opinion be up to the designer, with a body onunload. Perhaps a search and replace for text areas would be a nice feature though; I often find myself copying over field contents to a text editor for that. But let's indeed avoid the kitchen sink cliché.
Posted by: ct^ on January 19, 2005 02:54 AMSearch in textareas. This is not possible, but I would have often need it.
Posted by: Joe on January 19, 2005 05:54 AMRich user friendly textareas are perhaps the single biggest advance Firefox could make beyond tabbed browsing, IMHO. The concept of web application development is severely hampered by the lack of quality rich text editing tools in any browser.
The people who saw this need and attempted to fill it with Midas and more recently Mozile were visionaries that lacked the support to build a credible solution.
Microsoft arguably saw how important the need for rich editing tools in a browser was by incorporating some rich edit controls in it's first serious attempt at a browser - IE4. Arguably their efforts with designMode and with contentEditable were half hearted though. Why? As Joel Spolksy ">http://www.joelonsoftware.com/articles/APIWar.html so eloquently suggested, Microsoft popped the parachutes on their land-speed record attempt to blast the web into prominence (leaving web standards and security in their wake) when they realised they could not leverage it like they can leverage their Windows API.
Unfortunately, though MoFo has at last now hit paydirt with Firefox, alternative browser providers have sat back for years leaving rich text editing - a key element of the web as a platform - completely in the dark ages.
However all is not lost. Thanks to Microsoft's bizarre tactics, alternative browser providers have an extremely rare opportunity to harness perhaps the last great movement in the birth of the online age. We talk about killer features. How about allowing mum and dad public to open Firefox and click File, New Presentation. At which point they are run through a UI as rich as Powerpoint or Word
yet streamlined MoFo style. After completing their presentation, they would simple Ctrl+S to publish immediately to the web! Now that is interactive. Think a combination of the evil Frontpage "Publish" option with Composer/Nvu quality that simply works and runs within Firefox.
Let's face it, text editing on the web in it's current form is about as user-friendly as a DOS text editor circa last century.
Having needed the three year head-start given by Microsoft to establish a competitor to IE, now is the time for the MoFo to strike whilst the opportunity is still open. Time to forget building browsers for 120x120 pixel mobile devices. Time to de-prioritize time wasting Mac support. If Firefox can be the basis for the final blow to Microsoft's Windows API cash cow, it will have achieved what so many competitors failed to do - the noble task of opening up the online age to the masses.
With XMLhttpRequest now allowing for 'background' communication with servers, the biggest thing left that prevents the web from exploding into an application environment and challenging everything from Windows to Java, is the browser's inexplicable lack of simple 1980's level text editing support.
It's time we stopped seeing the web as the sum of it's parts. Protocols, markup languages, styling, a server -> client non-interactive push type environment.
Alas this focus still continues with snails pace development of standards that lack vision such as Web Forms 2 and/or XForms or whatever.
It is perhaps ironic that the inspired but slightly misguided vision of the developers of the Communicator suite - to combine all the elements of the internet into one package - may finally be realised by ripping apart that suite and building all it's functionality into one program - Firefox. News (RSS via Sage + Google Groups), Email (web mail is more than enough for most people) and the web are merged into one now, yet publishing/editing remains elusive despite the mirages of blogware and forums.
It is time for the net to become a rich user experience as much as a rich developer experience. Jo Q Public doesn't care about HTTP/CSS/XML/W3C/HTML/NNTP/POP3/ JavaScipt/CGI/Flash/PHP/WML/FTP any more than they care what sort of paper their print media is published on or any more than they care for now almost unheard of internet foundation pieces like gopher, BBSs and finger.
The *Web Browser* is passe. From the ashes of Communicator, via the fresh renewable fuel and oxygen of thousands of zealots, arises Firefox, the first *Net Integrator*.
Posted by: squegole on January 21, 2005 06:31 AM"It is perhaps ironic that the inspired but slightly misguided vision of the developers of the Communicator suite - to combine all the elements of the internet into one package - may finally be realised by ripping apart that suite and building all it's functionality into one program - Firefox. News (RSS via Sage + Google Groups), Email (web mail is more than enough for most people) and the web are merged into one now, yet publishing/editing remains elusive despite the mirages of blogware and forums."
Mozilla Suite AKA Seamonkey. it has everything INCLUDING the kitchen sink (about:kitchensink was something I remember seeing somewhere.. try searching bugzilla)
Correct me if I'm wrong, but isn't Firefox supposed to be the lightweight, extensible *browser* that SM wasn't, because it had gotten too bloated with everything and anything.
I think we need to expand, but not become as bloated as SM or Opera.
Posted by: M2Ys4U on January 22, 2005 08:33 AMI suggested some similar ideas for making the things we type into web forms more persistent in bug 265233:
https://bugzilla.mozilla.org/show_bug.cgi?id=265233