00:00:00 ◼ ► Welcome to Under the Radar, a show about independent iOS app development. I'm Marco Arment.
00:00:05 ◼ ► And I'm David Smith. Under the Radar is usually not longer than 30 minutes, so let's get started.
00:00:20 ◼ ► Sure, so this is one of those projects where I started with something kind of basic in mind that, and the project has kind of snowballed slightly.
00:00:29 ◼ ► Like, I'm still vaguely in the core of what I was trying to do. So I started off as, at the beginning of this year, I did a big update to Podometer++.
00:00:38 ◼ ► This was my, like, I completely rebuilt the app in SwiftUI, did a whole bunch of changes to it, added iPhone-based workout tracking, and sort of this big update to it.
00:00:49 ◼ ► But at the time, I could only devote so much time to that update, and then W2C happened, the summer happened, I, you know, essentially my ability to finish it to some degree never, just didn't quite happen.
00:01:01 ◼ ► And specifically, it was the, I was being frustrated that I would find myself using a couple of other hiking-related apps for very specific aspects of my hiking in a way that it's like, I shouldn't be using someone else's app, I should be using my app.
00:01:17 ◼ ► Like, my app is the best app. I should make my app do these couple of functions. And specifically, I wanted to be able to plan routes inside of the app so that you can, you know, sort of take a map and you tap on the waypoints you want to visit, and it comes up with a route and lets you plan that inside of the app and gives you, you know, stats about it, you know, what's your elevation going to be, how much, how long should you expect the hike to take, those kinds of things.
00:01:40 ◼ ► And then I was also, along with that, going to have a system to be able to better manage your offline maps so that you can, you know, download the maps for a particular area when you go off hiking.
00:01:51 ◼ ► And those are the two main things. And then since then, it has kind of exploded out into all of these little issues and little niggles in the back of my mind that I'm just like, have been annoying me about the app since I got that update down, you know, in the last spring.
00:02:06 ◼ ► And one of them was the, like the visual design of the app. And this was one of these things where I think so often it is hard to, at some point you just like completely lose the forest and all you see is trees when you're deep into an update.
00:02:21 ◼ ► And like this pedometer update in the last spring, I was so deep into it at some point, I think I've been working on it for like three or four months, which is a long time for me.
00:02:29 ◼ ► And I just lost perspective, I guess is the sort of like the simple way I was looking at the design. And I was like, what was I thinking, like so much of this stuff I had gotten into this path where I was like, rebuilding all kinds of these system controls completely from scratch.
00:02:44 ◼ ► I was doing this hope my whole like super dynamic type based system for font scaling and font metrics. And I was doing all the stuff because I was like, thought I was trying to make it better.
00:02:57 ◼ ► And it's one of those like six months later, I come back to him like, this was this was a bad idea. I should not have been doing this. That's so much of what I was doing was the sort of the third order effect of some small choice that I made that turned out was like it was not a bad choice.
00:03:15 ◼ ► But it's like the knock, I didn't fully anticipate all the knock on effects and all of the things that I would be missing out. And yeah, and so the like, the long story short of that is I've essentially redesigned the entire app visually, like structurally, it's all the same. And it's the kind of redesign where it's probably fair to say that it's a reskin of the app, like, in many ways, when you're designing something like there's two parts to it, there's the the sort of the structural like the, you know, like the rough carpet, if you're building a house, it's like you have the, you know, where are the walls?
00:03:44 ◼ ► Where are the you know, where the floors where the outlets like the big structural parts? And then there's the like, what color is your paint? And you know, what furnishings do you have? What artwork do you have on the wall? And it's like this was the latter part of I was able to dramatically I think improve the design and the appearance of the app by just pulling out all of these things that I've been doing in the app that turned out, like all my custom fancy clever, like me thinking I was being super cool.
00:04:13 ◼ ► Almost all of it in retrospect was like, no, this was this was not a good idea. And this was something that I was like, I need to, I need to take the moment now, while I'm in here while I have a little bit of time to just redo this and throw away a lot of that work and dive into some sort of move forward in a much more stable, better, reliable place.
00:04:33 ◼ ► Yeah, it's like I noticed that one of the themes that you've gone with, with pedometers design and with this redesign that you're talking about is leaning a lot more on the system components and leaning a lot more on system default stylings, default text sizes, default, you know, button layouts and, you know, various, you know, basically closer matching the system style.
00:04:59 ◼ ► And this is something that I've gone through over over the years in many different ways. And this is why I thought this could be an interesting topic because, you know, what you've done here is, you've taken an old app that, you know, at the time that you made a lot of this stuff, the the system design choices were either different, or in some areas were kind of unspecified.
00:05:22 ◼ ► And whereas now they have been changed or updated over time, or certain things now have standard ways to do them where there wasn't really a standard established before.
00:05:31 ◼ ► And so you have this interesting balance of having to bring along both, you know, a code base of this this app that, you know, obviously rewritten most of it by now, but but you know, you're bringing along the app itself into a new era of design choices.
00:05:48 ◼ ► But also you have to bring along the apps users into that era of design choices. And this is something that I always find terrifying whenever I have to do it, because I've learned over time that anything I ever change about the way my app looks will get a large amount of feedback from the audience.
00:06:05 ◼ ► And it's usually, it's not all good and not all bad. It's it's usually a nice healthy split. But if you if you change anything about an existing app that has any number of users, really, you're going to hear about it.
00:06:18 ◼ ► And you're going to hear a lot of complaints as well as a lot of praise. But if you don't ever change the way an app looks, then you'll start losing customers, both potential and current because your app will be will look old, or will look somehow wrong compared to what they expect from
00:06:34 ◼ ► system and kind of fashion norms of the day. So I think it's interesting that you've done this and, and, but how do you like, do you expect a lot of pushback from the audience? Like how has that worked for you in the past?
00:06:50 ◼ ► Yeah, and so I think what's been fascinating in some ways about this is like, in the spring, I probably fully experienced a lot of this where like my redesign from the old old version of pedometer plus plus like the version that I wrote, like I made probably was actually just had its like 10 year anniversary.
00:07:08 ◼ ► So like, it's an old old app, it's been around, you know, very, very early, in some ways early UI kit, not even just like modern UI kit, like old UI kit is where the app was coming from. And so, and I think what I found was, broadly, people liked the new design, because I was bringing it forward, to some degree, I think the my new design had a lot of problems that are what I've been addressing now.
00:07:34 ◼ ► But broadly, they it was nice for to feel modern, it was nice for it to feel, you know, that the app was not getting old and crufty. And like, I think there's a certain feeling that you get if something is you doing things in the way that was stylish five years ago, that eventually makes the app feel out of date, even if it still works fine, even like, you know, it's been, you know, I've been maintaining pedometer plus plus regularly ever since it's not like it hadn't been, it's still not like it's still not in the right place.
00:08:03 ◼ ► It's not like it hadn't been had been neglected. But there were certain things about the way that you structure things, just visually, the visual stud, like language and style of it, like the accent that the app carries with it, is something that can feel old and dated at some point.
00:08:19 ◼ ► And I think that was very much what I felt and I got, I would say, broadly, mostly good response to people being like, it's, you know, they like the fresh look. And that's a good thing. There were certainly people who like I like it better the old way.
00:08:31 ◼ ► And I think the more time I've had to look at that a lot of it was the, the people who were saying they liked it better the old way, like that is the simple way for them to express, I changed or moved something in a way that it made them feel foolish, because it confused them now.
00:08:49 ◼ ► And it's like they want to go back to the old way, not because the old way was better, because they knew how to use the old way, because the old way they had become sort of, they developed expertise in the old way of doing it.
00:09:01 ◼ ► And I was forcing them to relearn that expertise. And so, from my perspective, it was definitely an element of trying to do as many things as I can to help bridge the old and the new design, so that there is a path that they can still feel like they're, I mean, they can use the expertise they've built, that I'm not changing things for changes sake.
00:09:21 ◼ ► I'm not intentionally trying to make things hard, I'm still putting things in the same place, I think was a big, big element of that, that I tried very hard to not move things around in the app, which I think is the worst kind of change.
00:09:34 ◼ ► I mean, this is the sort of like you get a new microwave and it has the buttons on the wrong side or something like that, where it's like, you just have all these very subtle things that you're making an assumption you reach for something and it's just not there.
00:09:45 ◼ ► Like those kind of changes, I think were the things that I heard the biggest problems with and then the other side, and this is I think the thing that I've been dramatically the big driver for this redesign is, I was trying to, I was thinking I was being clever by building my own sort of like type sizing system on top of dynamic type.
00:10:06 ◼ ► And it was one of those things where in retrospect, so I got a lot of feedback saying like, wow, the app just feels big, that and it's like, you know, all the controls feel a bit too big.
00:10:17 ◼ ► And I had addressed this in a variety of different ways. And there was some things that I was doing that I just it. But in retrospect, like what people were saying is the app doesn't feel right for the way that it's set up.
00:10:29 ◼ ► And I think what I had been doing when this is just one of those funny things is I had taken the kind of like one of my main goals with this redesign is like, I want to make this app, the most accessible app, like possible.
00:10:43 ◼ ► I want to like maximize every aspect of that I want to make the app super accessible. And what I did, I think now that I can see in retrospect, is I made the app's base state sort of accessibilized rather than making the app accessible.
00:10:59 ◼ ► If that was just a weird way to say it, but it's like the main, the default state of the app should be neutral. And then users have the ability to apply their particular preferences and needs and affordances they want onto that neutral state.
00:11:18 ◼ ► And the thing that I was missing is that it's like I was saying, Oh, if I make the text bigger, it's more legible. That's more accessible was the like mindset I was coming at it with versus saying, I should use the default system text size.
00:11:32 ◼ ► And if someone wants to make it bigger, they have the means to make it bigger. I don't need to make it bigger and more legible for them. That's something that they can do.
00:11:41 ◼ ► Like accessibility in this case was about being responsive to the user's needs rather than trying to anticipate their needs and providing ultimately then an experience that was less optimal for the default case.
00:11:55 ◼ ► Because it was making, I was making everything really big and putting lots of thick borders around all my buttons and doing these kinds of operations that broadly like do make the app more accessible in the sense of,
00:12:08 ◼ ► I was almost like I was building an app that had the text size set to like plus two and had button shapes turned on and had all of these affordances which are fabulous and wonderful things that I was supports but it's like I was almost building them in seeing if I could shoehorn them into the default state which I shouldn't have been and the redesign in many ways has been to say, let's make the default state straightforward use all the system defaults using like I don't use any custom font sizing anymore.
00:12:36 ◼ ► I don't do anything like that. Everything is based on the just the like seven styles of text size that I was defines. So the app will scale accordingly if you change your dynamic type size and if you turn on button shapes.
00:12:50 ◼ ► I turn back on my big thick strokes around all my buttons. And if you turn on, you know, contra high contrast mode. Well then the colors in the Apple change and I'm doing all the things to be responsive, but I'm doing it at the users request rather than the issue I was having before of just building a design that was overly complicated and that I got a lot of feedback from people saying it's like this was not good.
00:13:12 ◼ ► They did not want the apps default state to be this this kind of like large print version. They wanted it to be the regular version, which in retrospect makes a lot of sense. But at the time I just couldn't see it.
00:13:23 ◼ ► This episode is brought to you by tail scale human scale teams built trusted networks by securely connecting devices with tail scale with tail scale. You can connect to home assistant to check your place while away. You can also stream movies, shows and music anywhere from your network attack storage box using plex or jelly fin. You could access a pie hole from anywhere. You can secure your connection when you're on a Wi Fi you don't totally trust.
00:13:46 ◼ ► And now you can sign into tail scale using your Apple ID. So if you prefer having your credentials managed by Apple and iCloud, that option is now available for you. Just sign into tail scale with your Apple ID on a Mac or iPhone using touch ID or face ID for a super fast sign in.
00:14:02 ◼ ► Plus, you can also use a pass key to authenticate to your tail scale account, a new feature you might remember seeing WBC. So once you're connected to tail scale, you can use tail drop to move files between things like a MacBook, iPhone, iPad, even Linux VMs, Docker containers, maybe even a steam deck or Windows boxes.
00:14:20 ◼ ► If you're looking to share your work more widely, tail scale funnel makes it easier than ever to share your local development over the internet for collaboration, testing and experimentation. Using tail scale funnel, you can do things like receive a webhook from GitHub, share local service with your co worker, or even host a personal blog or status page on your own computer.
00:14:40 ◼ ► Funnel is a secure way to expose your development environment at a stable URL over the internet, complete with auto provisioned TLS certificates as well. You can use it from the command line, or you can use it from the new VS code extension.
00:14:52 ◼ ► With a few keystrokes, you can securely expose a local port to the internet right from the ID. tail scale has so many great capabilities. Their clients are available for Mac OS, iOS, Windows, Linux and Android.
00:15:05 ◼ ► The free plan includes three users and 100 devices. Go to tailscale.com/radar to build your team's trusted network today. That's tailscale.com/radar.
00:15:17 ◼ ► And if you're interested in working at tail scale, they're currently hiring a Mac OS engineer. You can navigate to their careers page for more. Our thanks to tail scale for their support of this show.
00:15:29 ◼ ► So I think what's interesting about the redesign and the design choices, especially, I love the way you're putting it, about how you were trying to pre-build in certain accessibility features or preferences as opposed to following the system defaults in the default state and responding to accessibility options.
00:15:47 ◼ ► And I think that's interesting because, first of all, I think that kind of goes against common design sense. I think common design sense would say you should make things as accessible as possible in the default state.
00:16:00 ◼ ► But I think you're right that in practice, what people want is for things like text sizing, button shapes, boldness. They want your app to feel like whatever they have the rest of the system set to.
00:16:13 ◼ ► And that, like conforming to system norms and the user's expressed system preferences, seems more important than having a strong opinion in certain ways, like kind of going above and beyond in certain ways.
00:16:28 ◼ ► I think that kind of goes to a theme that I've been thinking more and more about design choices and custom design work in apps as being kind of like breaking grammar rules or breaking style guides for punctuation.
00:16:46 ◼ ► There are entire art forms, like poetry, that are devoted to creatively breaking standard text layout and grammar rules and punctuation rules and everything.
00:16:58 ◼ ► And when done well, they can be really amazing. But most people, most of the time, in most contexts, should probably follow standard grammar, spelling, and punctuation rules.
00:17:09 ◼ ► But if you know what you're doing and you're in a context where it makes sense, in many cases it's not only okay but can be very fun and very creative to break those rules.
00:17:21 ◼ ► And I think we really can be thinking about design standards on the platform, standard text sizes, standard behavior, standard looks of controls.
00:17:29 ◼ ► I think we should look at those the same way, where most people, most of the time, should use the standard controls, the standard font sizing, the standard styles of things, the standard colors of things.
00:17:41 ◼ ► Most people, most of the time, should do that. And then if you really know what you're doing and you're doing something that's creatively intentionally different from that, then you can look into customizing it and doing different things, using a custom font, custom sizing, whatever else.
00:18:02 ◼ ► And if you look around the App Store, I mean, you look at nicely designed apps, the kind of apps that win design awards and that people regard as well-designed apps, nicely designed apps usually follow a lot more of the system conventions.
00:18:17 ◼ ► Now, not like games and immersive experience kind of things, those are always going to be different, but I'm talking just apps that use UIKit and SwiftUI and stuff.
00:18:26 ◼ ► For that, the standards are usually followed most by the apps that are considered well-designed.
00:18:34 ◼ ► But if you look around the App Store, I mean, almost every app that you would download to do anything that is not from a design nerd or somebody from the old Mac community, almost all the other ones out there are very different from the standards.
00:18:52 ◼ ► Oftentimes they're using web-based stuff to kind of just write the same app once, run it everywhere, and have it be terrible on all the platforms.
00:19:00 ◼ ► Oftentimes there are apps that were designed by people who think they could design well, who really can't.
00:19:09 ◼ ► Oftentimes there's a lot of just design by programmer happening out there, and I say this with love, I am a programmer and my design skills are not amazing and they used to be even worse.
00:19:26 ◼ ► What most people see most of the time in most apps on the iPhone that were not made by Apple are usually pretty bad apps.
00:19:40 ◼ ► Everything is, I would say, it feels more like the weird Java cross-platform windowing toolkits of the early 2000s.
00:19:49 ◼ ► Everything just feels so weirdly, needlessly custom and nothing works right and nothing feels right and nothing looks right.
00:19:56 ◼ ► So first of all, I think this gives indies like us a huge opportunity that we can look better than 90% of what's out there by actually doing less work.
00:20:09 ◼ ► It's actually easier to use the system default stylings of things, especially with SwiftUI.
00:20:16 ◼ ► That makes it even easier, because in many cases SwiftUI is doing a lot of the standard styling stuff for you behind the scenes even more than UIKit did.
00:20:23 ◼ ► But if we just do less custom styling work and follow Apple's either default behaviors or standard styles much more often,
00:20:35 ◼ ► our apps will look better and they will work better and they will have better accessibility support and they will respond better to different preferences.
00:20:44 ◼ ► Way better than most of what's out there on the App Store, which is all these weird webview garbage apps.
00:20:51 ◼ ► Yeah, and I think what's interesting about that is the sense of, I think one of the reticences that I felt was that I wanted my app to have, I guess I'd call it personality.
00:21:04 ◼ ► I wanted it to look distinctive and to be interesting, and that when I was thinking of what a default app looks like, it feels boring.
00:21:15 ◼ ► That's the thing that I didn't want. I didn't want my app to be boring in the way that in the old UIKit days there was a certain look that if you just set all of your things to be,
00:21:26 ◼ ► it's all a default UI table view cells and it's all UI buttons in their default state. There was a sameness to it that is not necessarily what you want.
00:21:37 ◼ ► I want the app to look good and to feel good and to feel distinctive in a way that has a personality that is hopefully attractive.
00:21:46 ◼ ► The trick though is I think understanding that taking the system defaults and the system structure and all of the things that if you watch the design videos at W3DC they talk about,
00:22:00 ◼ ► that clearly some very talented designers have spent a tremendous amount of effort and energy into getting it just right and coming up with these rules.
00:22:09 ◼ ► If you look at the typography page of the human interface guidelines, it is full of some super, like they're changing the tracking, they're changing the kerning.
00:22:17 ◼ ► They're doing all of these very fine-tuned adjustments to all these different aspects in a way that I never will, no one else ever will.
00:22:23 ◼ ► They've done that work. And I think what I needed to understand was that me making my app distinctive can be taking all of these system components,
00:22:33 ◼ ► all of these system things, these system conventions that have been put out by Apple, that if you read the human interface guidelines, watch the design videos,
00:22:42 ◼ ► you'll have a pretty good sense of. And you can change just the top 2% of that control to make it distinctive, to give it a bit of a flavor.
00:22:50 ◼ ► The design that I'm doing, my segmented controls don't look necessarily like an Apple segmented control.
00:22:56 ◼ ► They have a slightly different look to them, but their metrics are the same, the accessibility of it is the same.
00:23:02 ◼ ► Like many of those things, I'm copying that. And I also think of how, as part of this design, I went and looked at a bunch of Apple's own apps.
00:23:10 ◼ ► And each of the apps, if you look at music and you look at fitness, say, they are visually very different in terms of they have a different personality to them.
00:23:19 ◼ ► They have a personality that's consistent to themselves, but they also are consistent to each other.
00:23:25 ◼ ► Their buttons, the way they style them, the way they color them, is different. The fitness app is always dark, so it has a very different kind of look to it.
00:23:33 ◼ ► Whereas the music app takes a lot of its coloring and things based on the content that's being displayed, and it can have this very different flavor.
00:23:40 ◼ ► But if you actually look at the buttons, and I did this a bunch where I'd take all these screenshots and overlay them at 25% opacity,
00:23:47 ◼ ► all the button shapes are the same. The way that they're doing it, the text metrics, all these things are common between them, and they're just changing in just enough to give it a flavor,
00:23:58 ◼ ► to give it a distinctive personality, rather than feeling like they need to come at something and say, "If I want to make it distinctive, I need to build this whole system myself.
00:24:08 ◼ ► I need to make my own button class. I need to do these whole things that are going to definitely make it distinctive, but perhaps not in the way that you're hoping it will be distinctive.
00:24:23 ◼ ► I think as someone who, I came at design from being a programmer first. Starting out in that career, I was a highly trained programmer.
00:24:34 ◼ ► I went to university for that. I went to graduate school for that. I was very well educated in how to be a good programmer.
00:24:42 ◼ ► I had very little training in terms of how to be a good designer. I think the thing that I need to always have in the back of my mind there is,
00:24:49 ◼ ► I need to make sure that my reach and my grasp are in the same place, that I'm not in a place where my reach is way beyond what I'm actually able to grasp onto.
00:25:00 ◼ ► If I'm trying a design that is more ambitious, I need to have more skill proportionately to be able to keep up with that.
00:25:07 ◼ ► I think in this particular case, my reach was beyond my grasp because I was trying to do something that was, in theory, not a bad idea.
00:25:17 ◼ ► Potentially, if I could come up with the system where I could make an app that's default state is even more accessible and legible for everyone,
00:25:26 ◼ ► like, "Cool, that sounds great." Accomplishing that is super difficult. In many ways, the approach that Apple has taken is likely the result of hundreds of really talented designers coming at that problem and saying,
00:25:37 ◼ ► "Let's take the approach of a nice neutral starting point that users can adapt to rather than trying to have some design that is mythically going to be able to adapt to all users in all ways just because of what it is,"
00:25:49 ◼ ► which was never going to really be the case. And so I think there's that element of being humble enough to say, "Let's use the defaults. Let's start there, and let's just change that little bit on top.
00:26:00 ◼ ► Let's put that little bit of color, a little bit of flourishes," and that is a much stronger place to be than trying to reinvent the whole thing yourself.
00:26:08 ◼ ► Yeah, I like the distinction you made between trying to avoid your app looking too boring by being too default versus building everything from scratch in a way that breaks assumptions.
00:26:20 ◼ ► I think one way that I always think about building codes, maybe because I just do a lot of house renovation, I guess, but I think of building codes of like, there are ways to make houses look individual and look awesome,
00:26:33 ◼ ► but there are certain minimum standards that people expect how things work, how things function, how things feel, the shape of things.
00:26:40 ◼ ► So for instance, if you're building a staircase in your house, you might think stairs might be more accessible if each one is only half as tall as a typical stair.
00:26:51 ◼ ► That way you don't have to lift your foot up as much, and you might think that's great, and the first time someone comes to your house and tries to use their stairs, they're going to trip on them,
00:26:59 ◼ ► because the ratios and proportions of stairs are set by codes everywhere to be within a very small margin, and that's why all stairs kind of feel the same if they've been built any time in the last few decades, and people expect that.
00:27:13 ◼ ► And so if you make different stair heights or different stair angles, it's going to actually be worse because it's going to feel different from what people expect.
00:27:21 ◼ ► Whereas if you use standard height stairs, no one is looking at that and saying, "You know, these stairs are so boring." There's different ways to make stairs interesting besides changing how they work and changing their basic metrics.
00:27:33 ◼ ► And I think I like what you've done in the pedometer redesign with things like your segmented controls, you were saying, where it looks custom, but it's not so far from the system one in any particular way except basically a skin.
00:27:48 ◼ ► So you can skin something to be like, you know, yeah, how Apple designs their apps, they use standard controls mostly, but each app has its own accent color now.
00:27:57 ◼ ► And so, you know, the podcast app is purple, the music app is that pink, you know, notes is yellow, like, each app has like a main key accent color, and for the most part, they're using mostly standard controls under that color.
00:28:11 ◼ ► And, you know, you see, yes, a button is a button is a button in all the different Apple apps. In this app, the button is yellow, in this app, the button is pink, but they're still standard buttons.
00:28:20 ◼ ► That level of customization is great to give some kind of personality, and even then, you are following the system convention.
00:28:28 ◼ ► You know, you're still having, you know, a little bit of color in your app here and there, you can have like a certain personality, but let it be mostly a surface thing on standard controls and behaviors, and you'll get such better results going that way.
00:28:44 ◼ ► Yeah, and I think what's been striking about this work is it's like now that I've done this, it is so like it is so liberating in a way to not have to think about some of these choices that I realized I was setting myself up for frustration and difficulty.
00:29:00 ◼ ► By every time I was designing a little screen, I had to make all these choices that, "Oh, well, how should I change the padding here? What should I do for the font size here? How should I scale or adjust things?" It's like, no, I just, if it's body text, like I had all I had to do to come up with is like, I have like a cheat sheet now of like, is it a section header? Well, then it's title three.
00:29:20 ◼ ► If it's regular body text, it's just using body. If it's a main title, it's just, it's title. If it's a, you know, like, like I have these little like cheat sheets for how I, how I can adapt the system things, and now I just use that.