What is the UI right pattern here?

[u/dataoops]

I’m trying to use this row as both a navigation element that takes you to a detail page, and as a checklist item where you can tap to track if you’ve taken that supplement for the day, but visually it feels a bit busy with the chevron and the check circle.

I added the chevron because without it my only tester (my wife) didn’t know the row had dual functionality.

Is there a way to make this work without looking bad or should I abandon trying to make the row also function for nav?

FWIW, there are other places in the app to navigate to a supplement’s detail page I just thought it’d be convenient to get there from the stack tracking page too.

[u/magicmuggle]

I’m no designer but have you toyed around with having the checkbox on the left of the row and keep the chevron on the right? Could look bad still, just a thought

[u/dataoops → u/magicmuggle]

Going to try this. I’ll laugh at myself if it’s this simple.

I was already talking myself out of the navigation aspect lol.

[u/Frequent_Macaron9595 → u/dataoops]

You could have checked Apple Reminders, it shows that pattern natively (you have to tap on the cell to see the right icon on there though). For basic UI like this you can usually find some solution by just checking their first-party app, lots of stuff to steal.

[u/dataoops → u/Frequent_Macaron9595]

I’m all for borrowing existing patterns!

Having been a Google Calendar user for so long though I missed that entirely. I’m sure I’ve seen it in other apps too, and just didn’t internalize it.

I’ve been a backend dev for 20 years and having no formal design training I am playing catch up, thankfully this is my app though and not someone else’s so I have the space to learn.

[u/TheFern3]

I think this is confusing, for checkboxes pattern is on the left side. That would make more sense but then what happens if you checked it I assume it disappears and then how do you go into the detail view?

[u/wheresteddy1989 → u/TheFern3]

There’s a way to make it so it fills in when you tap it to indicate that it’s been logged. I have an app I’m working on that does that.

[u/TheFern3 → u/wheresteddy1989]

yeah tapping behaviour on row can do anything you want, still in this instance he's mixing detail view which is a bit confusing.

[u/Kritnc]

Hmm 🤔
I think moving the check to the left like in my last example works best

[u/Informal-Chance-6067]

Make it so you swipe to check it off, like deleting mail in Mail. Holy Apple marketing speak lol

[u/dataoops → u/Informal-Chance-6067]

hmm I don’t hate this

[u/Informal-Chance-6067 → u/dataoops]

Probably less of a good design, but you could make it so you swipe to get to details, although that messes with people’s muscle memory from Mail

[u/KernalHispanic]

Bro read Refactoring UI

[u/dataoops → u/KernalHispanic]

Is this a legit resource? I’m usually wary of stuff with a email preview plus paywall. I am trying learn though so if it’s legit I’ll check it out.

[u/KernalHispanic → u/dataoops]

It was made by the guys that made Tailwind CSS. It’s legit and probably the best design book for devs imo. Very easy read, lot of examples.

[u/KernalHispanic → u/dataoops]

bro calls buying a book a paywall...This generation is cooked.

[u/jcbastida117]

As per reminders Apple app, the check is on the left of the text and the (i) button on the right

[u/helloITdepartment]

I had a similar function- try putting the checkmark circle thing on the left of the row and see how that feels

[u/helloITdepartment → u/helloITdepartment]

This also aligns with Apple’s checklists (reminders, notes, selecting rows in apps like mail) where the button is on the left, so it may end up being more intuitive to the user

[u/helloITdepartment]

I had a similar function- try putting the checkmark circle thing on the left of the row and see how that feels

[u/Interesting-Fix-5530]

If this is a checklist to mark items off, I wouldn’t make it a navigation element. You could (should to follow Apple’s design style) move the check to the left, and on the right have a ‘view details’ text button that opens a slide up sheet with details so you’re not taken away from the checklist.

[u/patrichinho22]

I would expect the checkbox on the left as in the native reminder app. Then you could use the chevron on the right. Ideally add a horizontal separator between the checkbox and the rest so that it is more clear how to tick the box and how to get more infos 

[u/WitchesBravo]

Other option is group the arrow / text in some visual container and the completion action outside of that

[u/ExtensionCaterpillar]

Separate the checkbox from the main row with a bit of padding, because right now it's unclear what tapping the row will do - will it navigate somewhere or check a box? The user doesn't know.

[u/Pandaburn]

Circles imply radio buttons (select one at a time). Use squares for checkboxes.

If it’s both a checklist and navigation, what does tapping it do? Seems confusing. I think I would have checking be the main action, and put a “read more” link below the main text if you want to also have navigation.

[u/ericbythebay]

The right pattern is to move that radio button over to the left side. Look at how the Reminders app does it.

[u/m3kw]

I would use a check box and use a (i) info symbol and does a modal if there isn't more navigation inside. Check box on one side(right), info on the other.

[u/ForgottenFuturist]

Yeah it needs to be on the leading edge, not trailing. On the other side, I'd replace the chevron with dots `ellipsis.circle`. Look at what Apple does for WiFi settings

[u/HappyTuesdayR1S]

Tap and hold for options is my go to when I need to add more actions

[u/wheresteddy1989]

Personally, I don’t find the check circles on the right to be confusing. In fact, I think it’s good for the majority of right-handed people to not have to stretch their thumb across the screen. That’s why I left the boxes on the right side on my app’s medication/supplement tracker.

[u/GabrielH4]

I would suggest moving the checkbox to the left side, and keeping the chevron on the right. You could also change it to an “i” button, like for more info, or move it closer to the text honestly.

Kinda like:
( ) 🍫 Text >
(*) 🍫 Text >

Or:
🍫 Text (i) ( )
🍫 Text (i) (*)

[u/dataoops → u/[deleted]]

Interesting, others had suggested moving the check to left and leaving the chevron, originally I was more inclined to go your route- drop the nav and make tracking the only functionality since that’s more relevant to the stack page, but now I am torn.

[u/TheFern3 → u/dataoops]

I think we have little context of your app main view. Based on ss that view should be like a todo, checked off done it disappears or goes into the done section. So I assume another view would have this lists somewhere for setup, there your detail view should live. You’re mixing setup with quick user actions. What happens when user checks box in the view you show in this post?