Placement of "done" checkbox button

Question

My team is having trouble deciding where to place a done checkbox.

We have a website containing a collection of pages in a row from first page to last page. Each page can be a text or assignment. The checkbox is used by users to mark a page as "done." Users also have the option of navigating to the next or previous page by clicking the Next and Previous buttons. Users can click Next or Previous regardless of marking the page as done.

Typical workflow: User reads page, clicks Done and then clicks Next. Sometimes the user will click Done without clicking Next or Previous, if he/she does not want to continue at this time. We do not expect users to click Previous very often.

Here are a couple of our suggestions regarding the placement:

A menu will show what texts/assignments are done:

What do you think?

Answer 1

Why not merge the done and next buttons? This layout still allows a user to continue without being finished with the page, but requires less clicks.

Answer 2

Ideally from a pure UX perspective there shouldn't be such a checkbox at all. It is an unnecessary extra click. Users should be able to just click next and it is naturally assumed they are done.

However, I assume that this is a box that exists for some sort of compliance reason? Its one of those "Yes I have read everything here and fully agree with it thus sign this document" boxes.

In that case...

1: No. Not good. It puts the checkbox with the controls. It is confusing.

Done also looks a little too similar to the next and previous buttons. It isn't a button right? It's just a label.

2: Optimal place for quick user flow from the document they are reading. They get to the last line and then go to the next line- oh look it is the done button.

3: Groups done with the controls which isn't ideal however if you move the border line between the controls and content to below the done button then that is the optimal place for a quick user flow to the next button. - They see and click done and it takes a microseconds glance and movement to click next.

I would say go with 2. It is the text that is the important part, not the next button. You want to make sure they have read the text. It could even be seen as desirable to impede the user's cilcking on the next button a little- hence such agreements often greying out the next/accept buttons until an action coherant with having read everything (or claiming to have done so) is performed.

However the most important point is to change the done label. Done sounds like an action. That it is in this box doubly makes it so. More standard text about having read everything and agreeing to it should be used. Done should also look a lot more like a label and less like a button.

Answer 3

For business software, design for workflow first, beauty second

Design observations:

• Users tend to process text pages using the F-pattern, where the eye tends to use the left margin to anchor the visual flow down the page.

• Your workflow is, roughly:

  1. Read text
  2. Hit Done
  3. Hit Next

• Occasionally, the user may hit Previous instead. Also occasionally, the user may want to hit Done without hitting Next or Previous.

• Fitt's Law suggests that it's better not to place buttons too far apart if they are used often. That is, don't make it hard for the user to hit Done and then have to travel far to hit Next

• Button placement should communicate workflow. That is, if you want the user to hit Done then Next, then place buttons exactly in that order inside the primary visual flow.

---

Now, design around the workflow:

• Given the F-pattern, Fitt's Law, and the sequence of your workflow, the best placement for the buttons is at the bottom of the page after the text, since it follows the workflow sequentially.

• Place a visual separator (like a horizontal line) above the buttons to indicate to the user that she is entering the next stage of the workflow after reviewing the text.

• Place the most commonly used buttons in the same sequence as the workflow (i.e. Done then Next).

• De-emphasize the Previous button because it's used less often. By de-emphasizing it, you are making the normal workflow clearer.

  • Although you may be tempted to make the Previous button symmetrical with the Next button, remember that for business apps an efficient workflow comes first. This is not a beauty contest, effectiveness is usually far more important than beauty for business apps.

---

One resulting design:

This layout respects the left-aligned F-pattern, presents the workflow in the correct top-to-bottom and left-to-right order, replaces the checkbox with a button (larger and simpler target area = easier to use), presents the Done and Next buttons in the correct and intuitive workflow order, and de-emphasizes the Previous button so that it's still there when the user needs it, but is correctly placed outside of the primary workflow.

BTW, I think Accept or Approve is more typical for 1-page documents than Done (which implies you're done with the entire workflow), but that choice of words is not part of your question so I've used the terms you've given.

Answer 4

If a significant majority of users click Next after selecting Done you could design primarily for that workflow. Github does this with a combined button for commenting on a software bug with/without marking the bug as fixed:

Without knowing your requirements, just marking a page could still be possible using Archive and next, followed by Previous or navigating away.

Answer 5

This answer is based on these two comments from the original poster...

They can see it in a menu to the left where they also can navigate between the pages. It is definately there to help the user remember what he has finished/hasn't finished.

It could be an assignment of sorts. Navigating to another step does not mean you have finished the assignment.

Allowing the users to mark what is Done or Not Done in the list of assignments on the left will help provide context without disrupting flow. It's not a very good user experience if I have to first select an assignment from the list and then find where to mark it as Done somewhere else.

Consider an interaction similar to this instead...

Automatically track the user's progress through an assignment

If there are 4 questions in the assignment and the user answers one of them then automatically mark the section as 25% complete. Similarly if there are 4 pages of text and the user scrolls through 3 of the pages but never sees the 4th page then automatically mark it as 75% complete.

Allow the user to manually mark / unmark sections

In the list of sections on the left you could show the percent completed along with a way to mark things as Done or Undone.

Answer 6

Noting that the checkmark is an important but merely visual element, I can suggest that it only appears when the Done trigger button is clicked.

Extending a strong theory...

I wanted to show you this classy, simple UI solution (Kindle and tablet inspired.)


Clicking on the ghost checkmark toggles the solid checkmark!
In either case the state of things is instantly visualized by the user.

I think this is dead on. Otherwise, I agree that the Done button should be closer to the Next button. This seems logically oriented. And the space that the elements used should be compressed, as in your example 1, Mattias.

Answer 7

I think this action button should be placed in its own row, so as to not confuse the user with navigation elements and to further avoid confusion make it stand out as the secondary activity confirmation (primary being reading the text, tertiary being going to the Next page).

To do this perhaps offer a positive colour (green) with a big tick on confirm acceptance, not just a generic check box that almost suggests toggling an option on or off.

Answer 8

I would go for the third option, as the Done button stays near to the Next button and, as far as I can see, seems logical that the normal flow for the user will be check the Done and then click the Next button.

Why not the first option then?

IMHO, when you have a row for navigation buttons, you shouldn't put buttons with other functionalities in the same row.

The users are used to seeing the number of the pages and other pagination actions between the Back and Next buttons, and you will confound them by putting the Done button there.

Also, you could have another action in the future (as mark as favorite, etc), and you will need some place to put the button for it. If you have all your buttons in the navigation row, the new one will not fit together with the other buttons and you will have to change the flow that the user already know, what is bad.

Answer 9

By adding the check box your building in a constraint before they select the next button. You want to go with option 2 because it chunks the checkmark box with the content. Ideally you should "deactivate" the "Next" button until the user selects the checkmark. Also change your label from "Done" to "Agree" if this is a compliance business rule and move away from making look like a button. The action should be directed at the checkmark.

Answer 10

Given that this seems to be more for e-Learning than simply checking boxes in a sequential web form, it is important to give learners an appropriate degree of control over their pace of completion. Learners need to be free to move back & forth within the content (at least within content they're immediately working on or have previously completed). It therefore makes sense to separate "I've completed this task" from simple navigation between related tasks.

As others have suggested, your 2nd option handles this best by placing the "completion" control directly with the related content. This leaves the intra-step navigation separate and unencumbered. I'd also opt for this solution, and also support the suggestions to use a verb & make it reversible (which a checkbox generally is by its nature). "Mark Complete" or something to that effect.

Finally, the sidebar "table-of-contents" approach w/an option to mark individual items (or even "Mark All Complete") is good, but might be better if done in conjunction w/the page-by-page approach so people can see exactly what content they're marking. Use that as a secondary convenience option for speedy marking, but don't make them try to remember which lesson title was which.

Answer 11

I think option 3 is the best because the user's mouse is more likely to be on the right hand side of the screen moving downwards due to the positioning of the horizontal scroll bar.

Additionally, the Guttenberg pattern and Z-pattern theories of eye movement suggest that the bottom right side of the page is the last point your user reaches on the page (last indicating the user is finished and is ready to move on to the next), and thus the done/next buttons should logically appear here.

Lastly, if they are moving towards pressing next, then it stands to reason that the done button should be found nearby. You could position this to the left of next as in option 1, but that would require the user to move their mouse to the left and back again, which is an unnecessary action as demonstrated by option 3.

Answer 12

Unless there is a regulatory reason to have a done button, don't have one at all, next should set your finished state. You can supplement this with skip ahead and/or mark place where skip functions like next without setting finished and mark place may or may not mark finished but lets your users pickup later (like after lunch)