0

Im trying to find some documentation on when to use a disclosure arrow and when to use a button in a list view on a mobile app.

We have a scenario where the user has a list of items to complete on their profile. All of the items behave the same, where they link off into another page in the app, EXCEPT "Start my first livestream" which opens a new view. Note the back arrows on all of them except for livestream which will be a "x"

Do you think it'd be important to style the "livestream" portion in the checklist differently from everything else? or am i overthinking it

enter image description here

enter image description here

  • 2
    why do you have a checkbox and additional controls on teh same list item? – Devin Dec 8 '17 at 20:26
  • @Devin, I think he is using the check boxes as status feedback. So if the user has completed the task, the box will be checked. But you're right, from a usability pov this isn't the best way to go about it. – RobbyReindeer Dec 15 '17 at 13:30
  • Are you wanting to encourage starting a livestream as the next step? – maxathousand Dec 15 '17 at 14:05
  • @RobEarle i was just making a question, not saying anything , but now I understand, thank you:) and I agree with you, it's not the best approach to use in this case – Devin Dec 15 '17 at 14:25
2

Firstly, why are there a check boxes? That's the main problem I see in these screen dumps. Check boxes are selection controls which seem to be useless here; it will just confuse the user who might want to click on it due to its visual affordance for clicking. To give the user the state of his/her progress, I suggest you to just use a green check mark icon. Secondly, I suggest you to keep the same format for the entire list here. It will keep consistency and the user won't be confused.

0

Have a look at the Detail Disclosure Buttons in the iOS Human Interface Guidelines.

Considering the above guidelines, I recommend the below points in your interface.

  • Treat all lists as same including "Start my First Lifestream". May be you can highlight only the "start lifestream" icon based on the need.
  • All lists will have checkbox for status and a button like tappable icon which links to the relevant page.
  • The problem I have with that is they use the same icon for Information as Detail Disclosure. This is poor UX. – RobbyReindeer Dec 15 '17 at 13:35
  • @RobEarle Detail Disclosure: "[contains] additional information or functionality". Information: "reveals configuration details". Sounds pretty similar to me. – maxathousand Dec 15 '17 at 14:03
0

While I agree with all of what Vincent has stated, I will attempt to resolve your specific problem, if I understand it correctly.

The answer depends on what event happens after the user clicks either the action button or the disclosure arrow. The floating action button is best used when there is a popup screen where an action should be performed https://material.io/guidelines/components/buttons-floating-action-button.html . The disclosure arrow is best used for going into a new screen and viewing data or fulfilling a form.

In this case the disclosure arrow is more suitable.

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.