2

I have a mobile app with a tasks list that should indicate the current status (is the task completed, new, etc...)

Here is my current implementation:

enter image description here

I was wondering if it is self explanatory (especially what the "<<" ">>" buttons do?, or should I label them instead of providing a legend at the top. Something like this:

enter image description here

EDIT:

I followed some of the suggestions and now have it like this: enter image description here

I think it is clearer now what's going on, but the visual appearance of the status button still seems odd to me. Should I remove the colors or use a link instead of the button class?

EDIT (FINAL DESIGN):

ok I think I found a good solution using cards. The interaction is no a little more straightforward. I am just uncertain if option1 (fully colored cards) or option2 (colored title header only) is better. My concern with the header color only is, that the header and footer become visually disconnected when there is a long description section:

enter image description here

EDIT:

Final design:

enter image description here

  • in what scenario you would the user choose to go back to "pending" from "accepted"? and what's the arrow on the right for? – Alejandro Veltri Jan 4 '16 at 13:37
  • The back Option is in case the user accidentally forwarded to the next status. The arrow in the right indicates that there is a Detail page for this item when clicking it (this is common practice in Android). – Chris Jan 4 '16 at 13:50
  • Ok, and what about the "x minutes ago" thing? I can't imagine how many times it could be really usable. – Alejandro Veltri Jan 4 '16 at 14:09
  • 4
    Looking at your design, it appears that the only way to know whether a task is pending, accepted, or completed is by its background colour. W3C accessibility guideline 1.4.1 tells you not to do this. w3.org/TR/UNDERSTANDING-WCAG20/… – Yvonne Aburrow Jan 4 '16 at 14:11
  • I don't think you need colours on the buttons. That's sort of redundant and creates too many types of colour contrasts. I would go for simply "Accept" "Mark completed" and "Reopen" / "Give up" if relevant. A single style for actions will be enough to tell your users what they can interact with and will simplify the processing of the status colours. Likewise careful with the top-right arrows, are they expanding widgets or links? It was confusing with your first design. – Steve Dodier-Lazaro Jan 6 '16 at 14:48
3

The << and >> buttons generally mean "go to first record" and "go to last record" respectively (though sometimes those meanings are represented by |< and >| ), rather than "roll back to previous state" or "roll forward to next state".

I would label the buttons "Accept task", "Reject task", and "Mark complete", and lose the arrows, which are confusing.

Note that in Trello, another to-do list app, you can set up columns for different phases of a project (e.g. TO DO, In Progress, Done) and drag items from one column to the next. The columns provide an excellent visual indicator of task status, and to roll an item back to a previous status, you just move it to the previous column.

See also: the W3C recommendations on link text.

  • I followed your suggestions and now changed it (have a look at the edit) – Chris Jan 4 '16 at 15:49
  • @Chris and what if you want to change the state to the previous? wasn't it a concern? – Alejandro Veltri Jan 4 '16 at 15:50
  • @rewobs Oh, I forgot to mention this... I moved this concern to the task details page and added a dropdown to the edit form that allows the user to revert to a previous state. Thanks for reminding me. – Chris Jan 4 '16 at 15:52
  • The new version is better... Maybe add a big tick to "Mark completed" and an intray icon to "Accept task". ? I think I would be inclined to have 3 tabs at the top: pending, accepted, completed, and when the user performs an action on a task, it moves to the list under that tab. – Yvonne Aburrow Jan 4 '16 at 16:11
1

Some points:

  • These symbols << >> don't say too much about the specific state of the tasks, so they don't add much value. More closely related icons could be a clock for pending and a checkMark for Completed, but I think they're not necessary.
  • The space used to change the task seems too much for me, I would give more presence to the task and its description.
  • I know that color matching is good sometimes, but here it gets quite redundant. The aesthetics and the clutching get quite affected, I would keep it simpler. Unless you want your like to look like this.
  • Maybe because I just get a glance of your app, but I don't see a real utility on the "x minutes ago" for the users.
  • There's a lack of visual consistency between the UI of different states.

A simpler option will be to use an Android Spinner, with benefits as consistency between states, current state explicitly showed, visual simplicity (less components, avoiding clutch), letting users go back to the previous state and reducing the chances of a slip. The only disadvantage is that you need two taps instead of one, but IMHO advantages are bigger since users won't need to tap too frequently to be an issue.
If your requiment changes and you only need to "change the state forward", a simple button with the name of the action will work for sure.

enter image description here

  • I added the x minutes ago because the app is used for a manager to assign tasks to different employees and they should know how long ago the manager assigned them to a task, and a manager should know when the employee interacted with the task – Chris Jan 4 '16 at 19:06

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.