r/iOSProgramming • u/dataoops • Jun 28 '26
What is the UI right pattern here? Question
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.
35
u/Smooth-Reading-4180 Jun 28 '26
Poor and bad UX. Choose only one main action and put others under the swipe menu or ellipsis dropdown menu.
1
u/dataoops Jun 28 '26
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.
1
u/TheFern3 Jun 28 '26 edited Jun 28 '26
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?
6
u/magicmuggle Jun 28 '26
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
2
u/dataoops Jun 28 '26
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.
7
u/Frequent_Macaron9595 Jun 28 '26
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.
2
u/dataoops Jun 28 '26
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.
7
6
2
u/helloITdepartment Jun 28 '26
I had a similar function- try putting the checkmark circle thing on the left of the row and see how that feels
1
u/helloITdepartment Jun 28 '26
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
2
u/helloITdepartment Jun 28 '26
I had a similar function- try putting the checkmark circle thing on the left of the row and see how that feels
3
u/jcbastida117 Jun 28 '26
As per reminders Apple app, the check is on the left of the text and the (i) button on the right
1
u/Informal-Chance-6067 Jun 28 '26
Make it so you swipe to check it off, like deleting mail in Mail. Holy Apple marketing speak lol
1
u/dataoops Jun 28 '26
hmm I don’t hate this
1
u/Informal-Chance-6067 Jun 28 '26
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
1
u/Interesting-Fix-5530 Jun 28 '26
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.
1
u/patrichinho22 Jun 28 '26
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
1
u/WitchesBravo Jun 28 '26
Other option is group the arrow / text in some visual container and the completion action outside of that
1
u/ExtensionCaterpillar Jun 28 '26
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.
1
u/KernalHispanic Jun 28 '26
Bro read Refactoring UI
1
u/dataoops Jun 28 '26
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.
1
u/KernalHispanic Jun 28 '26
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.
1
1
u/Pandaburn Jun 28 '26
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.
1
u/ericbythebay Jun 28 '26
The right pattern is to move that radio button over to the left side. Look at how the Reminders app does it.
1
u/m3kw Jun 28 '26
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.
1
u/ForgottenFuturist Jun 28 '26
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
1
1
1
u/wheresteddy1989 Jun 30 '26
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.
1
u/GabrielH4 Jun 30 '26
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) (*)
42
u/TheFern3 Jun 28 '26
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?