UX for encouraging naming of an auto-saved item

Question

I’m working on a web application where users can generate results after answers questions in a workflow. Over time, they will use this workflow to generate additional, different results. Our goals for this workflow were to lower the barriers for entry (e.g. engage them right off the bat with what’s in their mental model of questions they need to answer) and don’t hold them up with unnecessary questions.

To this end, we auto-generate a name and auto-save their progress in the workflow via that name. We explored the web to find the best model for this and settled on mimicking Google Drive: new documents get auto-named, it allows you to work right away, and auto-saves along the way. The name is clickable and allows you to rename it at will.

However, our users are having trouble finding their results when returning later to the software because (1) while they understand that it was autosaved, they cannot find their result by name (they don’t recognize the “Untitled” name) and (2) they didn’t know they could click on the title to rename it. The mental model of Google Drive and our SaaS may not be as similar as we though.

Below is an example of our UI, where “Untitled Workflow” is seen at the top of every page and is editable inline (after clicking). We have some ideas to improve this (including any combination of these items):

• Option 1: Add a “pencil” icon to the right of the name
• Option 2: Add another “question” to the page where we ask for a name
• Option 3: Ask for a name before continuing, but perhaps in a different format from the questions to differentiate that it’s not a question that will affect your end result
• Option 4: Show a tooltip pointing to the name upon first load of the page to tell users about it (and give them a way to dismiss the reminder once they’ve learned)
• Option 5: When the user clicks “next” but hasn’t renamed their workflow, prompt them (via a pop up) to name it before continuing on).

I found this discussion of the autosave UI pattern useful, but slightly different than our need (ensuring things get named is more important than showing an item has been saved, but less important than getting a user through the flow painlessly).

Answer 1

I think option 2 will generally work best. People generally fill out forms sequentially so you'll run into fewer errors and you'll have an obvious field to flag with any errors.

If you just don't like having redundant fields on the page, I recommend the pencil from 1 and a non-modal version of 5 (modals interrupt the workflow, take you out of the context where the error was made, and are therefore annoying). If the user clicks "Next" and a title hasn't been entered, disable the "Next" button, show an error message to the right of it, and flag the title field with an error. After a title is entered, enable the next button again.

Take a look at the 4 rules for displaying error messages from a user experience perspective and Web Application Form Design articles for ideas about validation and general form design.

Answer 2

You said:

"However, our users are having trouble finding their results when returning later to the software because (1) while they understand that it was autosaved, they cannot find their result by name (they don’t recognize the “Untitled” name) and (2) they didn’t know they could click on the title to rename it..."

Can you show us the screen precedes the above wizard screen? It sounds like part of the problem lies on that screen. When users return, they should be given clear hint that there is a work-in-progress item that they can resume editing.

Something along the line of...

Items You Worked on...

"Untitled Workflow" - saved on 05/21/2013 13:45   [Edit | Delete]

...but in a pretty explicit manner.

If that is not enough, then you can prompt user to provide a better name when they try to leave the wizard. This way, you still get to keep the goal of minimizing barrier.