1

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:

enter image description here

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?

2

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.

0

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

enter image description here

  • This way you occupy space where more list items could be viewed. Why we should make the users look at the top of the interface and at the bottom for the same information. This is taking extra space which in mobile design as you know is scarce. – Kristiyan Lukanov Feb 24 '16 at 14:49
  • 1
    I completely understand what you mean about preserving the current item and I think it is important to do so but I also agree with @KristiyanLukanov that the space needs to be prioritised. Not sure your answer deserved a downvote though. – Chris Spittles Feb 24 '16 at 15:05
  • Sorry, my bad, I'll remove the downvote if Dave edits its post. – Kristiyan Lukanov Feb 24 '16 at 15:17
  • 1
    @KristiyanLukanov completely agree that space is scarce. However. Why is viewing more list items better than having the most pertinent item in view? The docked item could have additional/different info within it so acts as a more useful version of the main list item. The docked item could shy away and animate off screen when scrolling down / scroll up slightly and it reappears so you have quick access to it. Many ways limited space can be worked around but still provide what's required. to reiterate "how useful is quick access/visibility of it in this situation" ? – Dave Haigh Feb 24 '16 at 15:25
  • 1
    "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." Part of the reason I posted this was for that very reason. The first item could be seen as being the last selected or focused element. – Chris Spittles Feb 24 '16 at 15:51

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.