Helping a User Fill Out a Form

A while back I ran across an article about giving a user feedback as they are filling out a form. I can’t remember where I saw the article (I wish I could), but I really liked the idea.

The article wasn’t talking about validating a form and sending the user a message in an alert box, but something more ajaxy, a form assistant of sorts… something that helps them as they go along. This might seem like overkill for the simple form to follow, but it could be really helpful for a long, complicated form.

The idea has been on the back burner of my mind for a while and last night while driving home I started to think about it again and wanted to throw together a demo.

-
The Demo

First off, we have a simple form for some sort of registration. Style sheets are used to define the look of the forms. As usual, required fields are noted, in this case with a red outline.

-

Now, if a field is tabbed to, or the user places the mouse over it, I wanted to give them a little feedback about the field they are about to, or are, using.

-

Tabbing through the fields will allow the focused form element to display its “notes”.

-

Now, we do have some required fields, so let’s look at entering in some data. Once the form loses focus, JavaScript checks to see if the user left anything in the field. If so, we want to turn the border to green, representing that the required information has been supplied.

-

Originally, I had a submit button, but I thought that might be a bit boring for this example. Instead, if the form field has something in it, we want to save it. So now that the user has tabbed out of the field, notice the “progress” icon appearing in the field.

-

In this demo, I’m not really saving the data, but if I was, once the readyState returned 4, I would change the “progress” icon to a “saved” icon. And, after a second of two, we fade that away.

That’s basically what I was thinking for this demo. And I think it turned out kind of cool. With that, let’s take a quick look at how it’s done. You can download the prototype if you want. The link is near the bottom of this article.

-
How it’s done

First off, we create a basic form using a table. Each row needs its own ID, such as:

<tr id="fnameRow" style="height:32;width:370;" height="32">

Notice that I’m also setting the height and width of the TR via STYLE, this is important for the placement of the feedback DIV, which I’ll get to later. Another thing that is important, for my coding method, is the name of the ID. fname is the name of my form field, and when JavaScript looks at what field I’m editing, It will know at the same time which row needs to change.

In that row, I need my form fields, and they look something like this:

<input class="textboxR" type="text" name="fname" size="40" maxlength="255" onfocus="inputFocus(this)" onmouseover="inputFocus(this)" onmouseout="inputBlur(this)" onblur="inputBlur(this)" >

Notice the class; I have a textbox style for fields that are not required, and a textboxR for fields that are, the only difference being the border color. Now that I think about it, I probably should set this via JavaScript (with the fR_xxxx vars that follow).

Now that we have our form set up, I need to set some JavaScript variables. They are, for the most part:

• borderReq – The color of a required border
• borderReg – The color of the regular field border
• borderYellow – What color yellow to use for the border.
• borderGreen – What color green to use for the border.
• bgRowOver – What color to use for the row background when it’s highlighted.
• bgRowNorm – What color to use for the row background when it’s not highlighted
• fI_fname – (fI = fieldInput) The text I want to appear in the note for form field fname. There is one of these for each field.
• fR_fname – (fR = fieldRequired) Whether or not the field is required. There is one of these for each field.
• lastRowTop – The top of the last row (of placing saving div)
• lastRowWidth – The width of the last row (of placing saving div)

First, the field “notes” are displayed by aligning 4 DIVs, and changing the background color of the row. I couldn’t just place a div over it, because then it would cover (and disable) the interaction with the form field behind it; the onmouseover and onmouseout would stop working.

-

Here, let me turn on borders (in orange) on the four DIVs to illustrate. Notice the top left and right, and bottom left of the highlighted row has DIVs containing PNGs to create the round corners… I couldn’t stand the squarish look of just changing the row background color. Right below the bottom left rounded corner DIV is the DIV for the feedback, which contains it’s own round corners and DIV for content.

Back to the form fields… You can see that onFocus and onMouseOver call inputFocus (and pass it that form element) an onBlur and onMouseOut call inputBlur.

Now, let’s look at onFocus. Here’s the pseudocode:

1. Get the name of the form (form.name)
2. Get the content of the form (form.value)
3. Set the background color of that row
4. Set the border color of the form field to yellow
5. Align my DIVs
   1. I need to get the location of the row in relation to the upper left of the browser. I don’t want to manually figure out each X/Y position of each row, and I might decide to move the form, so we have to do it with code. Two great functions (getAbsoluteLeft and getAbsoluteTop) to do this can be found here.
   2. I need to get the row width and height so I know how big to make note window (and how far down to push it). This is why the ROW had a STYLE with its width and height set. If you try to get its dimensions without specifying them, JavaScript will return nothing.
   3. Now that I have these, align my 4 DIVs in relation to that row.
6. Put the note message you want to display into message area.
   1. I have a variable for each form element with the message I want to display.
7. Turn on the visibility of all DIVs

Now, when we leave that field, let’s hide the note (inputBlur):

1. Get the name of the form (form.name)
2. Get the content of the form (form.value)
3. Reset the background color of the row.
4. If the field content contains nothing
   1. If it is required, set the border to red
   2. If it is not required, set the border color to gray
5. Otherwise, they did type in something so
   1. Change to border color to green
   2. Compare what they typed to the original content we collected when they focused on it.
   3. If the contents differ (they added content to a blank field or edited a field they previously typed something in) save the data.
      1. Position the saving DIV
      2. Save the data

If you would like to download the working prototype, click here. If you do anything really cool with it, let me know.

-
Wrap up:

Some things I would like to do with this next:

• Use an image for the checkbox… it just doesn’t match the other fields visually
• Improve the graphic design of the form. I tried to keep this simple and didn’t spend too much time with it.
• Figure out why I need those adjustors when lining up my DIVs.
• Add form checking, so for instance, we can make sure the email address is an email address and if not, put an additional comment in the form note.
• Optimize some of the HTML

Using AJAX to navigate previous/next pages?

I was on Digg the other day, scrolling, clicking next, scrolling some more, clicking next again, and then it hit me; with all the really great stuff we can do now with AJAX, why haven’t I seen anything to change this saw tooth process going through lists? This had me thinking and so I decided I wanted to try some things. I created a Digg-like mock site with a bunch of fake data. My only gotcha is that I want to assume the site knew how many items have been added since my last visit, say 150.

Our main area is a scrollable DIV filled with news (ok, it’s randomly generated letters and numbers just so I could quickly populate a database). There is a slim, timeline-like DIV below it that show us: How much is loaded (the green area), how much we can see (the red area), and what we have yet to see/load (the white area).

As we scroll down, notice the red area moving to show us where we are in the list of news items.

As we close in to the end of the list, our request is called to deliver more content. A yellow area now appears in the timeline to show us that something is loading.

The new request is complete and the new news items are added to our scrollable area. The timeline updates to reflect what’s load and where we are in them.

After developing that, I felt like the only thing I accomplished was duplicating what the scrollbar already does, so that’s not really any help. The only unique thing it does, is gives us a timeline-like measurement of how far we are into the unseen results. However, that information can easily be conveyed with a line of text much like: 30 of 150 items shown. It was overkill.

So, I thought maybe I should simplify it a bit, and only alert the user that something is loading, as such:

Here we have a regular looking page with a regular looking scrollbar.

As your scrolling nears the bottom of the DIV, a loading DIV appears to give the user visual feedback that additional content is loading.

Now that the additional content is loaded, it is placed in the scrolling DIV after the existing content (notice the scroll bar change) and the loading DIV hides.

Each new delivered segment is wrapped in a DIV as well, so if I wanted to keep the list from getting too long, I could just remove the older DIVs and re-fetch them if the user scrolls up.

I want to think about this some more, I’ve a few other ideas. I hope putting this out there will spark some really good ideas. What’s yours?

Edit

Here’s some ideas from Ajaxian.

LinkPut – Wiki’d Search Results

A little over a year ago I was really getting frustrated with search results. I consider myself a pretty good searcher, it’s not often that I have to go beyond a page or two to find what I’m looking for, but the “blurbs” that describe the link are sometimes so cryptic they border on pointless. Also at the time, I was really fascinated with wikis and loved the way their community comes together to develop something very understanding about any topic. One afternoon, will searching around on Google, I had the idea of combining a search engine with a wiki… what would happen if the result blurbs could be publicly modified to better reflect the content of the site? With that in mind, I began experimenting with a project I called LinkPut – Input for Links.

Project Technicals

• This project was originally written in ASP/SQL Server, and then rewritten in PHP/MySQL. Because it was my first PHP project, once I began learning more and more, I decided to rewrite it once again, taking into account all the new stuff I learned from my first round.
• The search results use the Yahoo API. Yahoo allowed for more requests per day than Google; at least at the time, I don’t know if that is still true.
• Originally it was called WikiSearch, but that sounded too much like a search engine that crawled wikis, which is misleading. The database is still named after this original title.

LinkPut Homepage

This is the LinkPut homepage. Not a typical search engine homepage interface, but I wanted to display recent activity of the site. With that in mind, I display:

	The last URL that has been wiki’d
	The last comment made to a URL
	Various site stats such as number of sites wiki’d, request made to Yahoo, click throughs, tags, etc.

LinkPut Search Results

After you perform a search, the Yahoo results come through. They are parsed and displayed. However, if we find that our database has an edited blurb, it is displayed instead of the normal one returned from Yahoo, as indicated by displaying the LinkPut logo versus the Yahoo logo.

	Logo displaying where blurb is coming from
	The wiki’d blurb
	Other information about the site that has been collected, such as your last visit, tags, who edited the blurb last… this information is customizable so that you can show whatever you wish, including both Yahoo and LinkPut’s blurbs.
	User controls for this URL: Link to comments about this URL Link to the wiki editor for this URL Link to bookmark this site with Delicious Link to an RSS feed so that you can monitor edits to this URL
	Other results

Visited Site Questionnaire

If you visit a site via LinkPut, on your next visit, you are asked to rate various aspects of the site. This data is collected to help better define sites. Of course, answering these questions is completely optional.

	The site questionnaire. Questions include: Did this page contain the information you were looking for? Would you recommend this site to other users? Did the description accurately reflect the contents of the page? How were the ads/pop-ups on this page? What type of site was this? (Arts/Humanities, Business, Computers, Health, etc. Add your own tags.

More Information

Clicking on more information about a site brings you to this page. Here, you can read a more detailed description of the site, tag it, or leave a comment.

	Site title and URL
	LinkPut also performs a URL shortening service to give you shorter links for long, complex URLs.
	Wiki’d entry for URL
	Common tags and input area for you to tag the URL
	Link to wiki editor or submit URL to Delicious
	Commenting area

Wiki Editor

This is the Wiki Editor page. Here the user finds a very simplified wiki type editor for making changes to the entry.

	Description/Blurb area
	Pointer Area: If this page shares many characteristics of another page, a pointer could be set up so that this page uses the Wiki entry of another. The pointer must point to a URL from the same domain.
	Notes about the last edit
	Notes about the edit you are currently doing
	Change History with links to roll back to previous versions

Search History

This is the history of sites you’ve visited via LinkPut.

	Delete option
	Date visited
	Site information
	Query you used at the time
	Links to: Add to Delicious Monitor via RSS Edit wiki entry

Tag Search

You can search LinkPuts tagged sites from this page. Since this site is a search engine, I wanted to do a little something different with the tag search rather than duplicating the normal search functionality of the site.

	Tags you are currently filtering with. Tags are weighed from left to right, so controls under each tag allow you to rearrange (or remove) them.
	Add a new tag to the filter and specify if you want to look at just your tagged sites, or the communities tagged sites.
	The results of the search that displays all LinkPut gathered information for a URL.

Tag Marks – Collapsed

TagMarks, a name I came up with because this page sorts your tagged URLs much like you would manage your bookmarks in your browser. You create a hierarchy of tags like you would a folder structure. Say for instance you create a tag folder called Politics and one called Tech. Any URL you tagged with Politics will appear in that folder, and all URLs tagged Tech appear when you expand that folder. Inside the Tech folder, you can create sub folders, say Web and OS, so anything you tagged Tech, Web appears in the appropriate folder. I found it to be a great way to browse through your tagged items.

	Root level tag folders
	Input to add another tag folder
	Controls for this folder: Number of sites in this folder RSS feed of links in this folder Edit tag(s) used for this folder Ability to delete a folder

Tag Marks – Exapnded

This is the tagged folder expanded to show its contents. Users could have up to 5 levels of folders to really focus their tagged content.

Finally

I’ve had some ideas lately on how to improve LinkPut and wanted to have this post available to reference you to when I start going into some of them. In any case, I hope you found some of these ideas interesting.