829008 - [Settings] Don't use a divider under the last item in a list

Status: RESOLVED INVALID

(Firefox OS Graveyard :: Gaia::Settings, defect)

Description

[Sergi]

Attachment: Using dividers in lists :: Screenshot

Comment 1

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Attachment: patch for Gaia repo

NOTE: If blocking-basecamp+ is set, just land it for now.

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 
User impact if declined: 
Testing completed: 
Risk to taking this patch (and alternatives if risky):

Comment 2

[Fabien Cazenave [:kaze]]

Larissa, is this a valid bug for you?

Comment 3

[Ben Francis [:benfrancis]]

Comment on attachment 700627 [details]
patch for Gaia repo

Cancelling approval & review requests as pull request was closed.

Comment 4

[Larissa Co [:lco]]

(In reply to Fabien Cazenave [:kaze] from comment #2)
> Larissa, is this a valid bug for you?

I think it depends... honestly, in this case, it is not, in my opinion. Since all three options are tappable, I think the last option should have a line to indicate you can tap on the entire bounding box, not just the checkbox. 

But I can see other cases with a related bug. For example, when there is an element and then some descriptive text right below it. What I've seen is that we have a divider between the element and the descriptive text even though the text refers to the element. 

For example: Settings > Cellular & Data > Data Roaming

So the meta-rule for me would be "If the elements are one setting, they should be inside the same bounding box"

However, the current bug is a visual design decision. I'm giving my opinion as an interaction designer (I can imagine this takes some time to fix), but I want the visual design team to make a call based on consistency.

Comment 5

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Patryk,
what we need to do with this one?

Comment 6

[Patryk Adamczyk [:patryk] UX]

Either way would be fine. Sergi, we need to define rules. With list items I perfer the line but if the last item was a button then I'd opt for no line. I am going to close this bug as this won't make v.1.1.

Sergi can you attach a consistency spec to a new bug, and we'll sweep settings for v.1.2.

Comment 7

[Patryk Adamczyk [:patryk] UX]

Eric can you have a look at this? Read comment 6.

Comment 8

[Eric Pang [:epang] UX]

Sergi/Vicky, do we have rules around this?  I agree with what Patryk said in comment 6.  In my opinion, buttons, drop downs, and subtext (description text) don't require the bottom line. (those are the ones I can think of at the moment).  But when a list item such as toggles, check boxes, other setting items are at the bottom of the list it makes sense to have a line since this makes them feel like an equal item on the list.  What do you both think?

Comment 9

[Sergi]

Sounds reasonable to me. I'm not sure if this is reflected as a rule in the web guidelines you're working on, but it may be helpful to differentiate there the cases you describe.

Thanks!

(In reply to Eric Pang [:epang] from comment #8)
> Sergi/Vicky, do we have rules around this?  I agree with what Patryk said in
> comment 6.  In my opinion, buttons, drop downs, and subtext (description
> text) don't require the bottom line. (those are the ones I can think of at
> the moment).  But when a list item such as toggles, check boxes, other
> setting items are at the bottom of the list it makes sense to have a line
> since this makes them feel like an equal item on the list.  What do you both
> think?

Comment 10

[Victoria Gerchinhoren [:vicky]]

Hi Eric,
We don't have a rule here, but we can make it, as sometimes it feels like it needs a bottom line and sometimes looks like an error. Your proposed rule sounds fine to me, maybe we can stage it and see ir it really looks good.

Thanks!
V

(In reply to Eric Pang [:epang] from comment #8)
> Sergi/Vicky, do we have rules around this?  I agree with what Patryk said in
> comment 6.  In my opinion, buttons, drop downs, and subtext (description
> text) don't require the bottom line. (those are the ones I can think of at
> the moment).  But when a list item such as toggles, check boxes, other
> setting items are at the bottom of the list it makes sense to have a line
> since this makes them feel like an equal item on the list.  What do you both
> think?

Comment 11

[Eric Pang [:epang] UX]

Hey Pavel, can you help implement this?  I've added a list below of when the bottom line should appear. Thanks! 

No Bottom Line, if the last item is:
- Buttons
- Subtext (description text) 

Include a bottom line if the last item is:
- Toggles
- Check boxes
- Drop Down (value selector button)
- Input field

Comment 12

[Eric Pang [:epang] UX]

Hey Pavel, have you had a chance to look into this bug?

Comment 13

[Pavel Ivanov [:ivanovpavel][:pivanov] UX]

Hey Eric,

I'm working on it ... just have a quick question about the `Buttons` they look almost like `Drop Down` elements can we put them to elements who need to have border too ?

Comment 14

[Eric Pang [:epang] UX]

Hey Pavel, let's move drop downs to be like buttons have have no bottom line.  Thanks! 

No Bottom Line, if the last item is:
- Buttons
- Subtext (description text) 
- Drop Down (value selector button)

Include a bottom line if the last item is:
- Toggles
- Check boxes
- Input field

Comment 15

[Patryk Adamczyk [:patryk] UX]

Spoke to Przemek, it should be done case-by-case, we shouldn't make it a rule, since at times it allows the user to have clear touch target.