11

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:

enter image description here

enter image description here

enter image description here

A menu will show what texts/assignments are done: enter image description here

What do you think?

  • 4
    is the "done" connected to the page or to the document? – Lovis Jun 22 '15 at 12:19
  • 10
    Not an answer, but important nevertheless: "done" cannot be a checkbox. Checkboxes are used to turn options on and off. This is not the case when the label is just "done". Tip: try to rephrase the checkbox' label into something where the first word is an imperative. Example: "Mark this page as done". This will make the function of the checkbox MUCH clearer. – Bart Gijssens Jun 22 '15 at 13:23
  • 2
    "Mark as done". And you have to be able to tick it off again. – Mattias Bregnballe Jun 22 '15 at 13:25
  • 3
    Read / unread is the traditional language for this sort of feature. – Gusdor Jun 22 '15 at 14:07
  • 3
    And what does 'done' actually do? We need more information here. – DA01 Jun 22 '15 at 22:43

12 Answers 12

26

Back, Skip, and Done Buttons

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.

  • The idea here might be give the feeling of "Yes, I acknowledge that I have clicked here and I accepted the conditions or checked the warnings ". In this cases you do not want users to click "next", "next", "next", blindly in the Homer Simpson way. Of course the price to pay here is that the user will be forced to slow down and think. – borjab Jun 23 '15 at 15:45
  • I like the idea here, but it won't fly since users have to be able to undo the fact that they are done. This design doesn't take into account all the times a user will click "done" by mistake. – Mattias Bregnballe Jun 24 '15 at 11:46
  • Once the page has been marked done, why not change the "Skip" button to a button to undo the done action, and the done button to a next button? – battery.cord Jun 25 '15 at 20:31
16

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.

  • Thanks for answering. Users click done when they have read the text. Not for compliance reasons. They can go to the next or previous page regardless of being done with the page. Regarding the look of the checkbox, check this link : uxmovement.com/forms/…. – Mattias Bregnballe Jun 22 '15 at 13:52
  • Is there some other place in the application where users can see a list of things they marked as Done versus Not Done? I too would remove this checkbox unless it is there for the user because even the I agree checkboxes at the end of EULA doesn't mean anything was read. – DaveAlger Jun 22 '15 at 14:10
  • 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. – Mattias Bregnballe Jun 22 '15 at 14:31
  • @MattiasBregnballe, in this case, I agree with @theotherone : you shouldn't have a Done button. When you open an e-mail, for example, you don't have to "mark it as read", it is marked automatically as read and you can "mark it as unread" again, if you want. – Dinei Jun 22 '15 at 14:45
  • 1
    Yes, but it is not always just a text. It could be an assignment of sorts. Navigating to another step does not mean you have finished the assignment. – Mattias Bregnballe Jun 22 '15 at 14:49
10

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:

enter image description here

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.

  • 1
    I'd put the previous link at the top before the content. This way there is nothing that even asks for symmetry. Also, If I want to go back in a document with a lot of text, I naturally scroll up. – AlexR Jun 22 '15 at 23:14
  • 1
    The catch with this layout is that if a user needs to 'skip' a lot of pages, then they have to scroll through a lot of pages. I'd consider duplicating the buttons at the top of the page as well. – DA01 Jun 23 '15 at 17:21
  • Very nice answer. – JonH Jun 23 '15 at 18:56
10

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:

example footer

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

  • I like this solution. Make it easy for beginners and fast for everyday operations. – Paul Jun 24 '15 at 8:39
8

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.

example list

1

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.
enter image description here enter image description here

Extending a strong theory...

I wanted to show you this classy, simple UI solution (Kindle and tablet inspired.)
enter image description here
enter image description here
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.

0

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.

0

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.

  • Why not the first option then? – Mattias Bregnballe Jun 22 '15 at 12:29
  • @MattiasBregnballe, edited the answer to answer your comment. – Dinei Jun 22 '15 at 12:44
0

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.

0

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.

0

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.

0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.