|
and definitely have the expertise to answer any questions that you have for us. So, to kick things off, in some of the design sessions, and keynote, and so, too, we were talking a little bit about the way in which liquid glass can really help with navigation, focus, in the UI, and there's some questions, just kind of, you know, can we expand on that? Can we elaborate a little bit on that notion? And I think maybe, Chabam, that might be a good one for you to take. Yeah, yeah, absolutely. So with liquid glass, you know, we really tried to clarify the navigation layer in our apps. So liquid glass introduces a single floating plane that acts as an navigation layer for your app. buttons in that floating pane sort of seamlessly morph in mitosis as you move between different sections of the app, and when you look at things like controls, controls can also temporarily lift into that glass steam. If you watch some of the design sessions, you know, we go into not overusing glass or not using glass on top of glass, but it can act as really great way to simplify an navigation. This is also true for things like buttons, morphing out into menus, so it helps to create a really strong connection between menus and alerts, and what invokes them. Yeah. Uh, thank you. I think, actually, there's another question here that's coming up next, which I think is very related. Um, I'd say, like, going back to the beginning of iOS, you know, there's lots of, uh, tool bars and navigation bars and tap bars that had some customization applied to them. Oftentimes, it's sort of, you know, a brand color, um, and there's just a question about, you know, what should I do with customized bars that I might have in my app? I think, Maria, this might be a good one for you to take. I'm sure lots of other folks have thoughts, but what about you? I think so. First, to acknowledge, I think this is gonna be something that a lot of people are gonna be dealing with. I think it's been historically a place where, you know, you want to make a button bigger, you want to make a button more colorful, you might have, like, too many buttons, right? Like, you kind of lost the fight, you now have, like, six buttons, so I think the introduction of the new design is a really good kind of driver to, like, reconsider a lot of those different types of bars, and, like, how they're currently behaving, what's currently in them. So I would just, like, look at them, figure out, do you need six buttons? Can you employ a more menu, if you've introduced kind of additional visual styling for hierarchy or emphasis or any of that, is there a way you can express that through layout and grouping, and not by introducing additional backgrounds or overriding things, So, yeah, I think it's a great place to start also adopting venue design, if you're curious where to begin. Yeah. Yeah, I was having some chats with folks who attended Tuesday's mixture, and we were, you know, also talking a lot about just how the background, the content area, behind the tool bar, or the tab bar, if there's color back there, it's really gonna come through, and the way that interplays with the liquid glass is just, I think, really delightful. So, you know, and it just is effective for branding, and color's not the only way to brand an app, as well. Okay, so, I think, let's see, the next question here, actually, this is pretty related. some questions about scroll edge effects, as this new, new concept for us, and the kind of options available with the scroll effects we have. I think maybe, you know, Caroline, I haven't heard from you yet, if you wanted to jump in on this one, but I'm sure other folks can add, as well. How would you explain scroll edge effects? Yeah, so the scroll edge effects is a part of helping to ensure legibility in our controls, and it's a dynamic layer that will make sure that the interactive elements are really lifting up into the surface, providing enough separation. We do have two types of scroll edge effects that come into play, and most of the time, you'll see the soft edge effect, which is a subtle blur, but sometimes there is an active, I mean, interactive content that's in these areas that you really want to make sure it has high legibility, and so there's a hard, I mean, a scroll edge effect that will create a better boundary for the legibility of, like, labels, or, like, sorting on, um, columns of information, like, in files or a finder. Shabam, do you want to add anything else? Uh, yeah, I mean that was perfect. I mean, you know, we really designed scroll edge effect and liquid glass to work hand in hand together, so, you'll see a lot of the adaptivity that you see in the liquid glass also being reflected in scroll edge effects, and they really allow for the, you know, content to feel expansive and to fill the screen of the app or the window of the app. while still allowing glass controls, as well as titles to be legible. Yeah. I think that, in some ways, some of the comments here are answers to the next question that seems to have, you know, be really common one. We've seen this also certainly online, so I just want to actually stick with this for a minute. You know, there is certainly questions about things that are see through, liquid glasses, a lot of transparency. And then the symbols and text placed within those controls, and then how that composites against the background, sort of just talked about scroll edge effects is a really great way, we believe, I think, of mitigating some of the, you know, that tension, that may exist. But, um, we talk I'm just gonna read this one verbatim, it's really great. It's actually a multi part question, but how can we ensure and or improve accessibility using liquid glass? mainly talking about legibilities, I feel like it could be hard to read some of the content and certain conditions, giving, as example, the tab bar and safari. So, I think, you know, a good question, a fair question, and maybe if, you know, Caroline, if you want to, you know, elaborate, maybe about some of the accessibility features we have, but also, I think, some of the ongoing work to make sure that we have the right thing. Yeah, absolutely. Yeah, so we're definitely continuing to refine all the glass to ensure legibility throughout the betas. Bludgibility is very important to us. But also, with our accessibility settings, class actually lends itself really well to be further adaptive with the settings that we have. And we have a few main ones called, around, like, reduce transparency, increased contrast, and reduce motion, that really takes some of these layers of the glass and makes them either more opaque or better defined edges with borders, as you would expect with these settings. But also, there's very specific use cases for clear glass, for example. And so, I don't know, Shabam, would you want to say something about when is the right and time to use clear glass? Yeah, so, so we have two variants of less that developers can use. There is, um, the regular class. So, regular glass is the adaptive glass that you'll see in most places, in the UI, You see it in tap bars, and navigation bars, tool bars, and, again, I want to echo the statement of, you know, how important legibility is to us, and regular adaptive class is designed to be legible by default, without you having to do anything over any piece of content. But there are times when you really want glass to be as clear as possible, and for that, we have the clearer variant, which you can see in places like ABKit, and so if you're watching a movie, and you have playback controls that come up on top of it, it's great when those controls are very, very clear. But there are some considerations when using beer glass, and it's important to do the work yourself, to ensure, you know, legibility and readability when using clear glass. So we've talked about some examples of using things like dimming layers, you know, to ensure that sort of legibility against content behind it. when using clear glass. Yeah. Do you also want to talk about maybe how the adaptive, uh, glass with regular glass is now using, uh, monochromatic, uh, ellips and texts? Yeah, that's a really, uh, key component to, you know, ensuring that sort of legibility, on top of the assets, so clear, and, uh, really lets so much of the content behind through, uh, you can, you know, it needs to show up over any color, and so, for most of the controls in our system, um, tool bars and that bars, you know, we were using monochromatic controls now, which switched between, um, white and black, basically. They're monochromatic. At the same time, though, we've, you know, we've updated the way that we use color in these controls, to be more reactive to the content behind it. Again, you'll see great examples of this in the session that we did, but instead of just being a solid color that might clash with the content behind it, the color is also reactive when it sits on top of class. Maria, do you want to go on any examples on when? When to use color and when to stick with the monochromatic controls? Yeah, totally. I think, again, going back even to the previous question about, like, customizing your bars, like, you might have a lot of controls, where you have either, like, existing tinted glyphs, or symbols, you might have a lot of buttons with different background colors. I think one thing to kind of keep in mind is, like, use that treatment sparingly, as we just kind of mentioned, avoid, I would say, it almost any use case, tinting, just a symbol, or text, and then if we're talking about providing emphasis, think about if it's a hero action, right? Like, if it's something that your app cannot function without, that might be something good to kind of employ that more emphasis tent. Think about any type of, like, system action, so, I know there was also a question down there about, um, done and all of these, like, those you want to call out, Like, it's a preferred action, you want someone to make sure that we're recommending an action to them, Those can also continue being a little bit more colorful. And then also, I need status colors, any kind of, like, key signifiers, any also UI that continues across your app. So a really good example is, if you look at our mail app, VIP is a yellow star on a sidebar, right? Like, that kind of star, plus the color treatment, continues, and you can see it in other elements of the UI, that is a great candidate, to remain a little bit more tinted. And this is the moment where I ask all the panelists, if I'm a VIP in their contacts list, sorry, Caroline, you were gonna say. I was gonna say, additionally, if you pick a tent color, using that color contrast, tools to ensure con trust ratios is extremely important, too. On top of, like, orange, you know, a color, we need to make sure that these colors are still legible over the, where you're gonna use them. Yeah. Um, I'm gonna move on a little bit. Um, there's a couple quick things in here that, like I said, it was a two part question. I'm actually just gonna go ahead and answer it. myself. So there was a question about, you know, are there going to be strict new HIG requirements for liquid glass? Just to clarify, the human interface guidelines is something that we invest a huge amount of energy into, and we want to share best practices, and sort of guidelines of things that we think should be avoided. There's always exceptions, so we don't look at it really as a rule book internally. We look at it as just the best advice that we can provide to make the most usable, intuitive software one can, given what we know, at the current point in time. And it's a living document, We continue to refine it. So, um, I think, you know, I just wanted to say, we have added a lot of documentation with the Gui change, something on the order of 30 pages for the Hague. And the colors page, the materials page, those are key ones to look at and start with when thinking about liquid glass. But we keep coming back, 'cause I think we're gonna continue as we see new, you know, questions, or misconceptions, or whatever, coming up, that we would want to address. We'll do our best to continue you to evolve that document. The second thing that I'll just take, as well, There was a question about figma design templates. The answer is absolutely yes. We will be shipping them We published some kits for Sketch on Monday, and so those are out there, and could be referenced. If you have a look at them, there's quite a lot of things inside there, and as fast and productive as some folks here are, it is a very human process, and when we publish these things, we want to make sure that they are well organized, well named, easy to use, don't have too many overrides, you know, all this kind of stuff, so it's on its way. We just want to make sure that the product that we provide to folks is really going to be something that we're proud of. And so, it's coming soon. can't give anyone a time frame, but we, it's a huge priority for some of us here, right now. so we'll get it out to you soon. Um, I think I'm going to, uh, I want to make sure that, uh, Marie has been sort of quiet here, because we haven't actually taken on any questions about icons. Um, and I'm really curious, actually, uh, and I think maybe some folks are here, too. You know, we've sort of evolved the whole design system, concurrently with evolving the look of app icons. And obviously, those things are very related, but they're sort of independent, in a sense. So I'm curious, you know, within the studio and amongst the designers working on this, how did you keep those things aligned with each other? The expression of glass, for icons, versus for UI, and where there were the differences there, or, you know, do we try to make them really, really the same? So, I mean, generally, I think the design studio is all about collaborations, so, obviously, all of our teams were super closely together, In fact, I sit next to some of the people that have been working on the liquid glass material. So, you know, just naturally we talk a lot about the work that's going on, We look at each other's work, And also when it comes to icons, there was definitely, you know, a lot of conversation around, how can we bring this together? how we can really make it feel like it's coming, You know, out of the same universe somehow. And but then, obviously, also, icons have their own things that, you know, that matter, that you really have to consider. One of them being, I think, the first thing that comes to mind is their size. icons are very small, So there are some parallels to, like, buttons and things like that. But at the same time, we don't have, you know, a huge amount of space to really, like, make the materials come across very well. So I think that was one of the things that we, like, really worked on, is, like, how can we have the same personality of the liquid glass in the icons, but then also keeping them legible, and then, obviously, also offering our personalization options, you know, with the tinting and everything that makes icons so special already. Thank you. Yeah. I'm curious, like, from the UI perspective, does that story check out, not skating? I'm curious if there's any other color, like, how are you looking at icons as they were evolving and maybe taking inspiration from that? I can, I can go. Yeah, I think, like Marie said, you know, like, there's very close collaboration between liquid glass in the UI of the apps, you know, as that was being evolved, as well as liquid glass in the icons, but there's, we were sort of pulling on the same thread from different directions, and, you know, we came to something that we're all super happy with, and there are a lot of properties that you'll see sort of shared between, you know, icons as well as, like, glass that's being used. And developers can use as the regular glass variant, right, as well as clear glass with the clear icons. There's some things, like the highlights, or the shape of glass that is unique for icons, That makes sense for icons, but at the same time, we want to make sure that, you know, everything sort of families together in the system, and it feels like a single liquid glass. I think one thing that also, just to that, that also really draws, like, a very nice connection is the home screen, and then the lock screen. So when you have the liquid glass on your lock screen, and, for example, also you're able to tint it, and then you can do the same thing for your icons, I feel like there's so much more of a connection than we, you know, what we currently have, so that's really exciting. Yeah. Excellent. All right, next one, is a question from Boris. There's gonna be a lot of that maybe jumping back and forth between different topics. This is a little bit like free jazz here, for the audience. Like, we're gonna keep you on your toes. So this one is, the question is essentially about the choice of text versus symbols, for representing actions within an interface. And as Boris sort of keenly observed, we've transitioned a lot of things that were maybe text labels to symbols, but not always. And so, I would love to hear, this is maybe anyone who wants to jump in first, because I think everyone was kind of involved in a lot of these choices. You know, how did y'all think about that to make sure that, you know, which one was the most clear, which one was the most universally understood? Anyway, like, sorry, I don't mean to answer this one. Maybe let's start with Caroline. actually. I don't know. I think Maria would be better. Marie better? Okay, let's just Marie. That's what I meant to say. Sure, um, I think for this one, like, the observation is correct, that we've kind of made a conscious decision to move away from some of our text kind of labels into more, um, iconography only. This can be observed in a lot of our tool bars, It can also actually be observed in a different way on menus, actually, but I'll start with the tool bars a little bit more. So I think the general way to think about it is, yes, there are gonna be a lot more symbols, and when do you use a symbol over text can kind of be tied back to what platform and how much, like, real estate you're dealing with? So if you think about our smaller devices, something like a watch, something like a phone, we do lean in a little bit heavier on symbols, especially for actions that are really, really common. So something like a clothes, something like a back, something like a dun, these are things that are, like, second nature to the people that use our products. So these are pretty, like, safe, I would say, in universally understood. As we kind of go into the more ambiguous ones, you might think of like a select or an edit, We tried, I will be very honest. We tried to make a symbol for those. It didn't work, so I think there's just things that are a little bit harder. You might end up in, like, conflict of meeting, just leave those, I would say, as text. And then as we move into our larger devices, where we have a little bit more space to play with, so if you go all the way up to the Mac, that would continue using a lot more of our text labels. Mm hmm. That's great. I also think, you know, this is one of those things where, if you have a button, and you're thinking about using a symbol to represent its actions, and you're not seeing a lot of other apps that are doing it, and so you're unsure of whether it's gonna read well or not. This is where it's handy to have some friends or strangers who you just stop on the street and show them your phone. said, Do you know what this means? asking friends, asking colleagues, and all seriousness, I think, just kind of doing a bit of a user test, may reveal quite a bit of what you need to know of whether it reads or not. Um... And I also remember... We do have a new page on the human interface guidelines, which actually gives you a lot of this, like, standardized content, which, again, you can use on bars. You can also use it on menus, because a lot of our menus are also getting icons in addition to text, so if you're kind of wondering, do we have a point of view of, like, whether cut should be scissors? Yes, we do. It's on the human I would even recommend checking it. I can't wait to find out whether it's scissors. I know it's gonna keep you up at night. Yeah, I just... Um, so, no, that thank you for mentioning that. And I also think this is one of those things, too, where it can be really, genuinely, very difficult, because a symbol that might register, and have meaning to you, may not to someone who's coming from a different sort of cultural background, or, you know, there's lots of differences. So understanding sort of how well a symbol reads, or it has other meanings in different cultures, is genuinely very tricky thing. So I think The Hague is this is one where, you know, I think we'll only mention ones where we feel really strongly about, because we've done a little bit of homework on this, to make sure that they'll work for our worldwide audience. Um, okay, another switching gears here, a little bit, we're gonna switch. There's a question from Marco. is asking, what core design philosophy guided the direction of iOS 16 beyond the goal of unification? I think almost anyone could take this one, so who wants to jump in? Caroline, maybe... How about we all take, you know, part of it? Sounds good. I think, you know, a thing that we like to do a lot is trying to blur the line between hardware and software. Like you saw, with the dynamic island, And so we really wanted to look at how can we define the UI, the navigational elements, for example, to be further separated from the content? And so that way, we can also put more emphasis on the content, really let the content shine. Um, so, and then also, um, you know, trying to make our, our apps adaptable. I know it's part of unification, but being able to establish a more universal language that's flexible across different window sizes also helps us be prepared to design across the platform apps, making it easier for us to design and implement. Yeah, I think the hardware software thing is a really important point to make, right? Like, we, the last time we did a big redesign like this, I was seven, we had, you know, rectangular screens on our phones and iPads, and we were using the home button to go back to the home screen, and when we started thinking about liquid glass, and the redesign this year, it was really about how do we make our UI, our core sort of navigation, little elements and controls, feel at home, on these rounded screens that we all use every day, right? And, you know, it feels like this large step change that we made overnight, but it's actually been sort of, we've been moving in this direction for years, right? with the fluidity of, you know, iPhone 10 and the gestural interface there, the bubbly, you know, really fun feeling and concentric shapes of the dynamic island. the glassiness of vision pro, So that's sort of all the things that have led us to liquid glasses here. Yeah, but we also wanted to keep everything familiar, like, the familiar structures, the navigational patterns. We're not changing them. because we didn't want this to feel like a thing you have to relearn. We wanted to instantly be familiar, and you feel comfortable being able to use the devices like you have been. I feel like it's so much about, like, the sweet spot between, like, playfulness and sophistication, you know, when it comes to the design, and the way you interact with the product, I also feel like Apple is obviously so famous for its industrial design and the product, and the way how they, like, you know, how they feel, what they look like, the materials. So, I think, yeah, again, like, that software hardware connection was something that inspired, I think, all of us, and just from, like, also the icon perspective, just, like, as a little fun fact, we actually worked with the ID team, with the industrial design team, in the studio for some of the icons. So when it comes to, like, the new camera icon or also the new settings icon, they actually helped us to, like, really, you know, look at that in depth from like an actual, you know, material and, like, you know, perspective that really feels like, okay, this could be an actual object. So I think that's a really nice, you know, nice little thing to know. I love that. I mean, this may have been mentioned elsewhere, or maybe just now, and I missed it. But, like, the HI, the design team that makes software sits with the design team that makes hardware in the same physical space, so that those sorts of connections can just naturally occur around the coffee maker or going to the bathroom or whatever. You know, people can connect to talk about, And I think, see each other's work, and draw inspiration from it, to get that kind of really tight integration, which I think, you know, it's subtle, and it's not, don't typically call attention to it, actually. So I'm sort of doing that now, I think it's worth understanding that, you know, we try really hard to make it feel like one cohesive product when people, you know, hold their iPhone in their hand or use their Apple Watch. At the time we have continuous corners. Exactly. It's all about the continuous corners. Uh, so, this is, I think, actually, very germane, uh, to this sort of idea, but, uh, there's a question from John, um, which, uh, I'm gonna read some, I think we could read some subtext, maybe, into the way the question is for his, uh, but, uh, do you have any recommendations for convincing designers to use at least some liquid glass elements? They want to maintain the company's design system fully and keep things consistent between Android and iOS. In my opinion, native controls, like tap bars, segmented controls, and switches should be used. Um, I agree with that. But I'd love to, maybe, Maria, this is a good one for you to take on. Yeah, totally. I also agree. I think that our entire group will probably agree, but we're also a little biased, and I think this is actually another one where I feel like we're gonna have a lot of our developers and designers, like, in the same situations, like, having these hard conversations. Um, I would also probably foresee this, uh, happening with Appi Gons as well, so, Marie, well, once I go through this, I would also love to hear what you think about that. But I think for a design system specifically, I think this is very common because design system people kind of see, or, like, system minded people, you want consistency because it's also easier to maintain some of the times, right? And, like, we see it in a very isolated, like, figma library, where we're, like, Hey, we want, like, iOS and android and, like, Web and all of that to be, like, a single library, so, like, we can maintain it. It's easier to build, easier to respect, all that. Truth is, it might be a little hard to hear. I even repeat that to myself. Probably very, very few apps out there are experiences out there. You are gonna have a person holding an android and an iOS phone together, right? So, they are controls that are super high utility that really don't matter as much to your brand experience and, like, what defines it. Like, probably no one is expecting, like, a super branded toggle, right, or a super branded slider, unless it's, like, very, very specific to your apps, intent and context. So I would say, like, handle that conversation also with grace. I think those things take time, migrations take time, engineering time, and design time, start small, figure out, like, what makes sense, you can always kind of build on top of that. And just really think about not necessarily platform complexity, right? that you have to maintain as a developer, a designer, and think about, like, what your actual users would like to see family with the operational system versus family with your apps content. Like, if you have a lot of, like, for example, like, let's take a music app, right? Like, if you have a home screen, which is very exploratory with, like, serving you playlists on iOS, you would want that same thing to go on Android. You would not expect to open the Android app and open your profile, what your settings, right? So just think about what really matters, and keep fighting the good fight for native controls. The benefit really comes in for the customer, if you're using making sure your app feels at home on the device that they're using, 'cause it's kind of like, if they know how to use one app, they have a head start of being able to use any other app. you're really putting customers first by really using the behaviors that they already know. And if we, the benefit of as many apps as possible, having the same interaction patterns that are predictable, it also re, like, what is it, like, establishes those patterns, like, really solidifies them, and makes them even stronger. Yeah. That was so well expressed. From, like, personal experience, I remember being at, like, a design agency, you know, and, like, Aqua was just shipping, and there was, it was the first time I had learned about The Hague, and I started to read, like, Oh, my God, there's all these rules, like, the okay button and the cancel button need to be in the bottom right corner, and the okay button needs to be the one that's most in the corner, right? And the clothes button should be in the top left, right? And it sort of dawned on me at that point earlier in my career. It's like, Oh, yeah, like, that's what makes this all intuitive. That's what allows me to apply the things I learned using other software to this new piece of software. And that is the right thing. And so, you know, the goal of, I think the goal of branding, like, you can look at it from a lot of different perspectives, but, you know, the end goal isn't to sort of have the same font necessarily. I mean, you can express an emotional, you know, element to it and infuse it, but, you know, ultimately, we're making software here, and people are performing tasks, and they want to get things done quickly, and they really don't want to have to learn anything. And if you can provide that by doing the things, you know, which Patricia described here, then they're gonna have a positive experience with your app. They've also launched it from the home screen, from tapping an app icon. So, you know, we think they'll pretty much know where they are, and if they're having a good experience, I think those good vibes are going to, you know, flow to your company, to your app, to your brand. So I think it's really is in best interest of providing some degree of a consistent software experience across the platform. I also need to plug in accessibility here, though. Oh, yes, please. Thank you. There's a huge benefit to using our frameworks with accessibility, 'cause accessibility is built into them. They respond to dynamic type, reduce transparency, increase contrast, All of that comes for free. So there's a huge benefit for having the accessibility of your app being at the same level as the rest of the system. Yeah, yeah, thank you. Like, Siobhan, yeah. I just want to add, too, like, you know, there's a lot of consistency and expectation that comes around the layout and the symbols that we use and things like that. But one of the other big advantages of using our standard controls is that they come with a ton of behavior built in, right? as you get used to using your phone, you sort of expect buttons to work a certain way. You expect switches and sliders and tap bars to work a certain way. And with liquid glass, the way control is sort of more inflects into these different states, or they have these very tactile, sort of satisfying tap states, it'll feel very foreign to come into an app, you know, after using a bunch of apps that use liquid glass, to come into an experience that doesn't have that. It sort of feels very foreign, and so I think that's, like, another huge advantage to adopting these controls, especially as we move forward. One of my favorite things that we were able to do this year is the fluid navigation controller, sort of push and pop transition, right? Like, you can tap into views and start scrolling before, you know, waiting for the animation to end, or you can pop back a few layers of the stack without having to wait for animations. And all of those kind of improvements you sort of get for free. So that's another wonderful advantage. Yeah, oftentimes, when I meet with developers, and, you know, I'm kind of first looking at the app, and I start swiping around, all, like, dive into a child view, and then I see, Can I swipe to go back? And so many times, like, if I can't do it, that's really, it's a telltale sign that probably, some sort of third party framework has been used, and, like, it's so much of a lift to build that sort of functionality, and that, of course, it often is deprioritized, or you just can't get to it. So, there's a lot of benefit in using native components. We're a little biased, of course, but I think, you know, I can testify to the fact that a huge amount of effort goes into really fine tuning those interactions. That also means, like, with custom UI, you need to make sure we're setting time aside to really do all of that same level of polish and behaviors, so that way, it does feel, uh, part of the platform. Yeah. And, I mean, you know, one sort of, now, I have glasses, and when I take these off, like, I put up my dynamic type size, and, you know, I'm very appreciative of when apps are responding to that, and when some apps don't, I'm pretty disappointed. So, I mean, this is one, like, little thing, but speaking from my personal experience, like, it's something that I think I, and I know many, many, many, many people around the world, utilize that feature and others. So, um, okay, let's move on to another question. We got some more questions about liquid glass and scroll views, so, Romaine, I hope I'm saying it incorrectly, Can scroll views include liquid glass? As liquid glass UI floats above content, does that mean we should never have liquid glass elements inside a scroll view? That sits under liquid glass navigation UI. I think I know what Siobham is gonna say, but let's hear Shobham say it. Great question. It's a good question. That is a great question. We sort of go into this in our session a little bit, and it's more a matter of sort of guideline, and the way we think about liquid class, than a technical implementation detail. Like, there are places where you can certainly put a glass layer inside of a scroll view, but what you'll find is, very quickly, things start to feel heavy, or it doesn't serve the purpose that the rest of the system is sort of reinforcing this idea, that liquid class serves as a core navigational layer of the app, and it stays fixed as you move between different states of the app. So that applies, to bars, but it also applies to things like sheets, right? You see sheets that sort of float above the content, use dimming layers to provide modality, or, you know, don't have a dimming layer in cases like maps where you can use both at the same time, so, those are really where we think, like, glass works best. Maria, do you want to expand on this? Yeah, I think another, like, what you said, I think is pretty spot on. I think one thing that I would add to that, 'cause, again, this is kind of, like, a guideline, like, we have a pretty strong opinion of, like, don't do that. I will say, I like to think about the types of UIs, like a sliding scale of, like, really high utility kind of screens and experiences versus, like, really, really branded screens. If I were to give advice of, like, Hey, like, you want to put a little bit more, like, sparkle into your app, like, you really want to put in some liquid glass, I think, think of that end of the spectrum where you have the really branded experience. I can give an example of, like, I like to think of when you're sending Apple cash, actually. I think that's, like, really, really, like, custom and beautiful, and, like, highly complex, like, but that's something, like, you see once, right? It's one screen, you can kind of afford to do it. So, yeah, think of if your app has, like, those moments, and definitely think of that after you've done all of your, like, kind of utilitarian screens, and once you're done with that, when you're happy with that, I think that's a great little exploration, and I think we might also find that people are designing and using it in ways that then we can elevate into our guidelines and expand how we think about it. Yeah, controls are actually a great example of that, right? That we thought about, where you want the sort of steady state of controls as they're sitting in, you know, tables and scroll views to be quiet, but to provide that delight, you know, and lifting into that glass layer when you're interacting with them, And then it has a functional component as well, right? Like, if you're using a slider, the slider lifts into clear glass, and you can see exactly, um, where, you know, where the value the slider is. I also have been talking about it, trying to describe it around, like, it's a content layer, is the one that scrolls, and if there's lifted glass on that layer, it's gonna collide into the navigational layer that's using liquid glass, and we don't want to break any glass. So if it's a scrolling thing, that's probably not where you'd want to put your glass. But it's liquid. How do you break liquid glass? No, uh, but, yeah. Imagination is a great way to think about it. Those clashes. Yeah. Okay, cool. Should we move on to the next question? Definitely got a few more here. We should try to get to. So, this is a tough question. We're not engineers here in the room, but I think maybe we can take this one. The real time rendering and, well, actually, we are, there's a couple of people who are sort of engineers here in the room, more than sort of. The real time rendering and specular highlights in liquid glass must be computationally intensive. This is from Alex, by the way. How did his Apple ensure this design language remains accessible in older devices, and what trade offs were made between visual fidelity and performance? Uh, maybe, I don't know, uh, who wants to take the schwam? Do you care to take this one on, or...? I mean, again, like, this, we're lucky, you know, here at Apple that we have, like, some phenomenal engineers working on, on allowing us to be able to sort of not really having to make that trade off, right? To be able to push the limits of our incredible silicon and use it to create the kind of, you know, effects that we have with liquid class, with the real time rendering of, you know, lensing and refraction, and the specular highlights, while ensuring that your phone feels snappy and responsive, which are also the goals of the redesign. So, it's certainly a huge priority for us that, you know, none of this makes it feel like, oh, we're sacrificing performance or power. you know, just to be able to show off some cool effects. It's really important that we can do both. And that's why we're doing it now? It's also really good to see that we're hitting these limitations, 'cause that means we're really pushing what software can really do. Yeah. 'Cause if it was too easy, then we could have done more. or something different. We like to keep the power and battery team on their toes. On toes. Just kidding. Um, okay, so, uh, I'm gonna move on, 'cause I want to, like, there's some questions about icons, I want to make sure that we're getting back to some of those things, too. Um, Maria's looking a little, um, you know, a little bored over there, so... All right, so, but still staying on the topical liquid glass for a bit, This is from Lucas, who's asking, Can we layer liquid glass elements on top of each other? I think we've kind of talked about this a little bit. Or does the recommended approach for a container and inner elements? I guess, liquid glass container and inner elements. I think we kind of touched on this, um, one, but did we, did we forget to say anything that would have, would have been relevant here, or, or maybe we could move on? Well, I think we should talk about, like, navigational elements, like, nab bars and tool bars, like, on top of sheets and sidebars, for example, aren't using blast controls. It's not another layer of glass, 'cause that really brings or complicates the depth of the app. And so when you have a glass view or a glass background, we are using, like, vibrant fills to show button shapes, or controls. I don't know, Shabam or Maria, do you want to say anything more about that? I think a lot of this is done for free, for the developer, right? So if you have glass elements inside of glass containers, they will sort of automatically turn into the vibrant fill appearance that you're talking about. I think one thing to consider, is if you're building UIs that sort of look like sheets, or, you know, you have a glass container with buttons inside of it, for those kind of things, using vibrant fills, and things like that, to ensure sort of legibility and separation with the glass layer, without making it feel like you have layers, pond layers of glass on top of each other. Yeah. Maybe also, like, if folks are joining us who are saying, like, vibrant what nouns? So, and across all of our platforms, we provide, we've had these materials for a while, thick and regular, thin, ultra thin, And then, when you're presenting views on top of it that you want to have sort of lightened or dark end and respond to light motor dark mode, there's these colors that we have for fills, which are then composited over the background context, in a way that sort of accentuates the color and sort of saturates it, and gives it more richness. And then for text, it's even more pronounced. And so the way to access that is to choose sort of a text, a vibrant text, or secondary text, tertiary, quaternary, quinary, Like, there's, like, a whole list of different options, you know, depending on the hierarchy, the information hierarchy, and how important something is, or how prominent you want to make it, you can sort of choose between those options. And if you're interested in seeing that again, the human interface guidelines has some details and pictures of this, but also in the design kits that we provide for sketch and figma, you can also see in the color palette and preview it, and it's maybe not exactly a one to one relationship, because of the way we draw things in the system. But it's, you know, it should be close enough that you can make a choice about whether, you know, what style, you'd like to use, whether you want something to be primary, secondary, tertiary, et cetera. So anyway, I hope that's helpful in case the concept of vibrancy is new. And Caroline. Yes, this is really important for legibility. Like, if you don't use a vibrant feel or a vibrant label color, and it would be an opaque gray, and an opaque gray is not gonna be legible across the backgrounds that could happen behind glass. That is a very big legibility concern. And so, definitely, please use the vibrant label colors and fill colors, so that way, we can make sure that it's multiplying with the backgrounds, instead of clashing. Yeah. Yeah. Thank you for saying that. Um, okay, uh, moving on. We have a question from David, which is for complex apps that use native iOS components, tap bars, sheets, et cetera. How would you suggest we roll out the visual changes to ensure customer adoption, avoiding change fatigue or a half baked adoption of these changes? That's a great, great question. Um, maybe, Maria, do you want to take that one? I feel like I keep putting everyone on the spot when I'm kind of, like, calling people out, but, anyway. All righty, let's see. Big question. Very important question, so I'm glad people are thinking about that. So I'll maybe rattle off just, like, a couple of things that are just gonna happen for free, just to, like, ease the anxiety, but I still think there's kind of, like, a way to approach this. Um, so I think if you're, again, using Al Brookstone like a broken machine, the more native components you use, the more things happen for free, right? So all of these standard components will be upgraded for free. I will look out for, again, any of those customizations that you might have done before, make sure that, like, if something's kind of clashing, you probably need to remove it. That's usually like a very quick way to fix it. Across some of our more common components, so tab bars and tool bars will have probably, like, the most visual impacts, like, I would definitely pay attention to what's happening there. And then I would also look at your sheets and make sure that, like, maybe you might, like, want to change the material, you might want to, like, add a dimming layer, remove a dimming layer, depending on what they're doing. So those are kind of, like, some of the bigger controls, but I think in terms of specifically rollout, I think thinking about not shipping it half bake is really, really important, and I think I would think about what is kind of the minimum viable change, where, like, your app still feels and looks very, very similar to what it did, right? Because I think there's good adoption of the new design, and then there's, like, great adoption that's gonna also push what we've kind of designed. Start with the good, where you have like minimal visual aggressions, You are not kind of overloading your customers with both, you know, visual change, material change, all of those things, and new kind of, like, information architecture, like you add any new feature as part of that, like, focus on, I would say, just kind of parity and making things feel familiar, and then once you have a good, clean base with as little customizations as possible, start kind of going in, chunk by chunk, wherever you think you have, like, the most visual impact, like you're using some of these controls, and then try how you can evolve them even further. Yeah, big question, Caroline, anything to ask? I was gonna add, too, like, I think you can also look at, what are your core workflows in the app? Where are people gonna be spending their time the most? And we can prioritize your changes with a liquid glass in those areas. And those are probably gonna be your core navigational areas, so, like, the bigger things first. And then as time, uh, goes on, you can go into deeper flows that people might not, uh, use all as much. Yeah. Wanted to add, um, in terms of, um, icons. So, we talk about this in our sessions as well, but, um, something that I think is important to know, uh, is that we have this actually really helpful process that is able to apply a material treatment to your icon if you haven't updated it yet. That means if you have a pretty complex looking icon, you know, for example, you're using like raster images, something like this, you would definitely get the specular treatment. So you do get a little bit of the material, and then if you have an icon that we're able to auto segment, what we are currently already doing when you look at, like, you know, the tint mode, for example, the Corinthin mode, you can see how some of the icons would get that auto treatment, and we're able to use the same process for icons now with the material. So you might actually have an icon that, you know, you haven't, like, fully updated, you haven't gone into, like, icon composer, and done all of the things, and you still get a bit of that material, which is awesome. But then, obviously, we do want to encourage you to actually, like, use the tool, and, like, get really into it, because it's an amazing tour, and you can do so much more, if you actually, yeah, go through that process. Yeah. Thank you for doing that. And actually, um, that gives me a great segue back into icons, because it looks like we have another question about icons, um, which is from Florian, who's asking, Is there a way now using X code 16.4 on macOS, Sequoia, to ship an app with an icon built using icon composer, so the icon looks less ugly on macOS, Tahoe. Um, that's so sad sounding. Um, I... Let's set a higher bar, Florian. We can make an icon great. So, but, Marie, maybe you can take this one, um, and speak to, sort of, yeah, speak to this one. Yeah, so, um, one of the great things about, um, about icon composer is that you actually get an artwork out of icon composer that works across all of the devices, which is different from, you know, the previous years, where you would have to design different artworks, and then depending on the platform, there might be differences in the design, or, like, the resolution, or the size. And now we have this process in place where you can go through icon composer, and you get, you know, that one artwork that works across iOS, same way as it works on Mac. So that's great, but then, yeah, I really just, again, want to encourage you to, like, try out the tool. It's very accessible. I think it's something that is not hard to understand. And also, you can still, you know, do the, like, create the base layers, no pun intended, and your favorite design tool, so you would be an, you know, illustrator, Photoshop, whatever it is. And you can then bring those layers into, I can composer, and then really start playing around with the material, so you can add, you know, all sorts of effects, like blend modes, blurriness, frostiness, and, yeah, and you basically get all of that for free, so I do want to encourage you if you want to create a beautiful icon, that's definitely the way to go. Yeah. I'm just got a plus one, the icon composer simplicity, It really is, it's very user friendly, very straightforward, and it's really fun, just to kind of, like, move the light source around the icon, and you can, like... Kind of a different background, XY transform, and, like, really, I don't know, I think it's really just delightful and great, and I think, you know, having already talked to some folks, literally, on Monday, after his nouns and downloaded it, and we're playing with it already, and Tuesday, at the Developer Center, people were showing me some of their early explorations, and I think what was nice for me to hear was how people were sort of saying, like, I think this is really a nice opportunity to rethink what we've done. Like, we've had this icon for a long time, and have gotten kind of used to it. And so, I think, we love to hear that. I mean, I think that's one of the most delightful things about making platforms and software that tools, the developers, designers out there are using is, like, people are so creative, and we put these tools out there, and then people come back with things that are just amazing, and I think that's, like, this is a magical moment, really. This time of year, because we get to see some of that. So, anyway, sorry, I'm waxing poetic here. Uh, I... No, I think... I just wanted to add, I think that's such a good point, and I think that's something that we've also always talked about as a team with, like, all of the updates that are coming now. I think this redesign is so much about not, you know, creating constraints but really creating opportunities. And again, speaking from the icon site, but I think this goes for, you know, everything in this design is that you can really get more creative than before. Like, you can really, like, once you kind of, like, get the, you know, the ins and outs, I think it's really exciting for designers. Yeah. And just a log roll for all of our WWDC sessions, if you haven't watched them already, Marie, Maria, Shabam, were making very, very long hours to make really good videos that I'm so proud of, and I hope they are, too, But I think they just, they answer so many questions, and I think, I encourage everyone to go check them out. So, we have time, it looks like for maybe one more question, and I think, this question, I like this one. So this is about, if you could pick one thing, like, what would your favorite UI element be from the new OS's? The icons, liquid, tap our animation, et cetera. And so, like, maybe to make it extra challenging, don't pick your own thing. Uh... So, maybe we can go around the room on this one, start with Shabam. Do you want to go for it? Oh, this one's tough. You can also say when you're on things, sorry.. There, there's just so much, I mean, I think, for me personally, I'm really excited about the sort of fluidity and interaction that we've added with liquid glass, right? Liquid glass, you know, we're talking a lot about the material, and it's super important, and, you know, it's key to creating that, like, full screen, expansive feel, and elevating content. But part of the redesign is also just making everything feel joyful, and, you know, the tap states are satisfying, as buttons morph into menus, as buttons morph into other menus, like all of that stuff just feels fun to use, and I think that's, like, been my favorite part of just, um, just letting on the new, the redesign. Awesome. You stole my answer, Shabam. I was gonna say tap states, like, I love them so much more than I thought I would. It just feels so good and responsive, and it really, like, lights up, like, for what you're focusing, your touch. But beyond that, I really love the sliders, and the on offs, which is, like, this little knob that lifts up into glass, and it really just, like, elevates a control that's very utilitarian, into something that's really fun. Okay, lightning round, really quick. Maria, Maria. Go for it. Which one first? I don't know. Go. Okay, maybe we can round off the, with the white part. Sorry, I do have to jump in. I'm realizing, like, we do not have enough time. Sorry, folks, this is all the time we have. Um, but, uh, sorry, no, I do, I do need to wrap things up, and everyone's gonna... Okay. Okay. There you go. I like the stretchy clock. Uh... Okay, so that's basically all the time we have, but thank you, everyone, for joining us today. It's been fun for us. And hopefully, it's been useful for you. Like I said earlier, you know, you can go to the forums, if you have questions, of course, feedback assistant is, we really do look at those, the feedback that we get, and value it tremendously, and then, hopefully, you're able to join us for developer center events that we host around the globe. We'd love to meet y'all in person. to see we just, we love the fact that we get this opportunity to do this at scale. It's just so, it's so much fun. So, anyway, really appreciate you all making the time to join with us today, and thanks for all the thoughtful questions that you asked. And this is a cliché, but we're excited to see what you built. And so thank you, and that's it? All right. |
Typo: iOS 16