David Smith

I'm working on redesigning my  Watch app and was frustrated that there isn't a segmented control available for watchOS, so I did a little exploration imagining how a control could work on a tiny screen.

Still not sure if it is a good idea, but think this approach certainly has enough promise to continue exploration.

Jan 26, 2023 at 7:50pmWeb
Show threadDavid SmithJan 27, 2023
After sleeping on it I think I'm going to shelf the vertical segmented control for now. It just doesn't work on a 40mm, it would take up over half the screen at appropriate touch target sizes. Instead I'm going with horizontal segments with icons. With the "explanation label" as a subtitle for the relevant settings section to make it clear what the choice does.
Show threadPaul-Vincent Roll (he/him)Jan 27, 2023
@_Davidsmith looks great!
Show threadHolger KruppJan 27, 2023
@_Davidsmith is it an issue that you can’t really see the second list element on the small watch? How do users of that size know that they can scroll/choose more than one element?
Show threadHolger KruppJan 27, 2023
@_Davidsmith maybe removing the „Workout Display“ Text would solve it.
Show threadTom BurbidgeJan 27, 2023
@_Davidsmith really like how that UI looks . Great job 👍
Show threadZachJan 27, 2023
@_Davidsmith Nice! I think using less vertical space works best. I’m trying to do something similar at the moment and have come up with this. It’s not super compact - there’s a bit of wasted horizontal space once something is selected - but I like that it leaves plenty of space for the content below.
Show threadDavid SmithJan 27, 2023
@zachsimone Ahh. Very cool I like the direction you’re heading there
Show threadJeremy BurgeJan 27, 2023
@_Davidsmith love this, excellent outcome IMO
Show threadQuentin ZervaasJan 27, 2023
@_Davidsmith horizontal much nicer. I was playing with something similar recently and in a bid to use native controls I opted for TabView but didn’t love it. I’d much rather use what you’ve done here.
Show threadDavid SmithJan 27, 2023
@qzervaas I think my conclusion is that a horizontal, icon based segment has enough size to be usable. This is a watchOS 9+ feature so the smallest it will ever be is 40mm, which means the touch targets are 86pts wide which feels like plenty.
Show threadQuentin ZervaasJan 27, 2023
@_Davidsmith I’d still try to fit 5 across without scroll ;)
Show threadZoltán HosszúJan 27, 2023
@_Davidsmith good choice, much better looking :)
Show threadDirk BarchmannJan 27, 2023
@_Davidsmith Looks awesome 👏🏻
Show threadLuke RogersJan 27, 2023
@_Davidsmith This looks great.
Show threadBenRiceMJan 27, 2023
@_Davidsmith Good call, this looks great
Show threadJustinJan 27, 2023
@_Davidsmith Have you tried it without the horizontal animation on the view below it? Feels like the view change should be instant line this Safari view.
Show threadRyan Goodlett Jan 27, 2023
@_Davidsmith
Show threadMassaging the MediumJan 27, 2023
@_Davidsmith from an app fanatic who doesn’t code perspective let me just say… beautiful!! 😍
Show threadamosnpJan 27, 2023
@_Davidsmith I think this a superior control - move clear what it's doing (assuming good icons and helper text)
Show threadJosh WoldJan 27, 2023
@_Davidsmith love seeing small ui interaction tests!
Show threadNot Not JakeJan 28, 2023
@_Davidsmith looks great!
Show threadJohn...Jan 26, 2023
@_Davidsmith love it! Using the digital crown?
Show threadJustin BiancoJan 26, 2023
@_Davidsmith This looks great and far nicer than using a picker (especially when there are only a few options).
Show threadDavid SmithJan 26, 2023
@ambulephabus Exactly, the situation I'm expecting to use it for would always be with two options...where a picker feels heavy and a list of buttons with stateful choice feels disconnected.
Show threadCharlie WelshJan 26, 2023
@_Davidsmith
It seems like it could be the kind of thing that would be better with just icons horizontally, even with the design/intelligibility challenges that adds.
Show threadRyan Goodlett Jan 26, 2023
@_Davidsmith the question I would ask is what is the design goal of the control? It allows for faster toggling but takes up a lot of screen real-estate.
Show threadSebastian NiesenJan 26, 2023
@_Davidsmith I like it.
Show threadLin 🐈Jan 26, 2023
@_Davidsmith Looks promising, though visually, my first impression was that ‘Standard’ was a headline and ‘Map’ the content of the container.
Show threadJeremy BurgeJan 26, 2023
@_Davidsmith I wonder if a vertical split (instead of horizontal) would achieve similar, while increasing distinction from items below. Likely difficult to fit reasonable sized text that way tho. Interested to see where you take it
Show threadDavid AnsonJan 26, 2023
@jeremyburge Make it diagonal. Gives space for long text without requiring the swipe to be purely vertical and interfere with scrolling.
Show threadDavid SmithJan 26, 2023
@jeremyburge That is the direction I started with, but it felt a bit cramped and wouldn't localize well for languages like German where the strings get wide. I think I prefer horizontal visually, but kinda like this as a fallback.
Show threadBenRiceMJan 26, 2023
@_Davidsmith @jeremyburge unless you were to just use icons. “Standard” is a tricky thing to convey though
Show threadJeremy BurgeJan 26, 2023
@_Davidsmith I hear ya. Looks nice there in English with those strings, but I can see how it might not scale all that well
Show threadDavid AnsonJan 26, 2023
@_Davidsmith @jeremyburge Replied with the following idea, but it didn’t include David, oops: Make it diagonal. Gives space for long text without requiring the swipe to be purely vertical and interfere with scrolling.
Show threadRobin BaralJan 26, 2023
@_Davidsmith the animation looks great, but the vertical layout doesn’t seem like it’s tappable. It looks like a stats box filled with text. The horizontal seems way more intuitive.
Show threadElSteverinoJan 27, 2023
@_Davidsmith I think the horizontal layout is more natural, but my middle age eyes like the larger text of the vertical layout.
Show threadPedro VerezaJan 26, 2023

@_Davidsmith This is what I like/hate most about developing for the Watch: it's such a constrained space that requires a lot of creativity!

(My recent struggle with the nav bar: https://mastodon.social/@pedrovereza/109541818550449523)

Show threadIan BuschJan 26, 2023
@_Davidsmith love the subtle color change part of the animation!
Show threadOliver AmesJan 26, 2023
@_Davidsmith Damn, that looks great! You’re probably right as it is kinda like a button within a button, but I still think it looks awesome.
Show threadRoman LefebvreJan 26, 2023
@_Davidsmith i think this looks great! The only suggestion I’d make would be: try to make the segment not touch the border when transitioning. You could increase the padding a bit and reduce the bounciness of your spring animation. 👌
Show threadErfinJan 26, 2023
@_Davidsmith that looks sharp!
Show threadDuke.VimJan 26, 2023
@_Davidsmith looks great - I think a horizontal slide, with just one option at a time visible (maximum text room) but some sort of scroll direction indicator on the side (arrow graphic or something) would potentially be more flexible.
Show threadBrendan (he/him)Jan 26, 2023
@_Davidsmith lovely smooth transition.
Show threadNeil AllainJan 26, 2023
@_Davidsmith Not mine, but saw this a week ago or so (I think on reddit). Seemed well done. https://github.com/pratikg29/Custom-SegmentView
GitHub - pratikg29/Custom-SegmentView: created customised segment control in SwiftUI.

created customised segment control in SwiftUI. Contribute to pratikg29/Custom-SegmentView development by creating an account on GitHub.

GitHub
Show threadJoe HribarJan 26, 2023
@_Davidsmith Ooo, this is intriguing! Can you do a date picker next? 😆
Show threadDave EllisJan 28, 2023
@_Davidsmith hello! iOS dev, AW Ultra user and Scottish mountain hiker here. I’m super interested in this development of this app. Do you have an approx timeline or planned feature list for it? The UI is looking outstanding.
Show threadDavid SmithJan 28, 2023

@daveellis timeline for the update is hopefully end of February, I’m aiming to start beta testing next Friday. Features are iPhone based walk tracking with love activity, dynamic island support. Apple Watch will have a mapping mode and action button support.

Don’t expect offline maps to make it for this initial release, but will be coming thereafter

Show threadDave EllisJan 28, 2023
@_Davidsmith fantastic. Very much looking forward to this one. I currently use WorkOutDoors, which is fantastic. But do love playing with new apps.