Conventions for Current/Active state on a list item

Question

I have a list of items one of which will be in a current/active state. Let's for instance say its an outstanding list of jobs but I need to differentiate between the job I am currently working on and any that are left to do.

Here are 3 examples of the same mock-up:

1 (Left)

Utilises a different colour and a text label making it very clear this is your current job. I think this basically does the job, but without the text I wouldn't automatically assume it meant that was the job I was working on. I've also added an "elapsed time" so you can see how long this "job" has been active.

2 (Middle)

Indents the current item and adds an indicator to differentiate it from the others but it doesn't exactly tell me in an intuitive way that it is the current item.

3 (Right)

I've docked the active element to the bottom (it could be the top probably above the filters). Doing this keeps the current item on the screen at all times, but its then lost its context.

---

Using tabs as an analogy, the active tab is usually larger or further "forward" (certainly in skeuomorphic designs) and it more often than not bleeds into the content it represents.

Is there a standard or conventional way of highlighting a current/active state within a list? Or am I overthinking the whole thing and colour is enough on its own?

Answer 1

I think the first option will be the most intuitive to the users as they can immediately see the change because of the contrast.

The second in the middle would be a little less visible while the third option will be very hard for users to spot the active element because it has gone down the page and they expect it to be up.

I would suggest you to use the first option, as users will spent the least attentional resources (visual search) to spot the highlighted element.

Answer 2

I think you should try to merge option 1 and 3.

A docked item of the in progress task, will be useful to have quick access to if the in progress task item in the list has been scrolled out of view. Don't lose it from the main list like in option 3 though, except add it back in and differentiate with colour/icon/text. Couple with a docked item which states it is the active task (see example below), you maybe able to get away with just a colour change on the item in the main list. Otherwise you couldn't just rely on colour.

Also, if you just went with option 1, the item could seem like simply the active item in the UI, i.e. the last tapped item for example.

---

Think about how Spotify has a docked item when a song is playing so you have quick access to it. But the song doesn't disappear from the song list in the main scrollview. If you think quick access is useful in your situation then I would try that option.

Example