 How do you think we could get to a place where we can design with performance in mind rather than it being an after-fall? Shipping a user experience that is performant on Mogul is sort of this symphony between designers and developers where I think we both have to understand the limitations of What's possible like if you're shipping down an experience on 3G or 4G? You're probably trying to get something that is useful to the user as quickly as possible like Giving someone a shopping page where you know they can see an item But if they keep hitting you know that button to to buy and they can't really do anything That's probably not what you want because it's gonna cost you a sale, right? Yeah, and we're trying to ship these experiences in mind I think we need to think about what is the minimal set of things that I want to you know get down the wire What does that mean for the design of that experience? Does it mean that I ship something that's a little bit more lightweight a little bit? You know less splashy but is minimal enough for the user to get you know Maximum benefit from and if I do want to integrate other design elements into there How can I do that in a way where you know? We can keep loading performance in minds like it's completely possible you look at a lot of the Mobile web experiences the progressives web apps that large companies have been shipping lately Yeah, Twitter lights the housing comms the flipkarts and many of those experiences have thought about performance kind of holistically like when you when you land on a landing page for any of those Sites they load up relatively quickly. They look really beautiful. Yeah, but then as you need to transition from one view to another Showing in some cases very different experiences You need to think about well How can I do that in a way where I can make it look pretty? I can optimize for perceived performance and I can give the use or something useful at the same time now from a Designers perspective you might want to make that look as as great as you possibly can yeah Because if you you know, maybe you're used to building a native app Maybe you're used to being able to just shove you know as much data in there as you want For a mobile site there are a few additional considerations there because you're basically trying to just ship In real time all of these bytes down the wire and you want them to load up really quickly So I think you need to think about well What is what is the limitation? What is the budget that the developer probably has in order to ship this down to the user? I'll let them figure out. Okay. Well, how much JavaScript how much CSS needs to be shipped down But what can I do in order to? Minimize the amount of work that needs to be done to get that page loaded up and get that page useful And so I think that from both sides it it benefits a lot from us talking to each other Yeah, I think in recent years. I've seen you know patterns like Skeleton loading screens become quite popular for helping us do that sort of transition from one view to another with an experience like that I think that that requires both sides like understanding What what it is they're trying to accomplish they're trying to accomplish a really good user experience and You know we're thinking well if we don't show them a loading spinner and we show them a skeleton screen instead The user is going to feel like something's happening as soon as they tap on a button They're gonna see oh, so I'm probably gonna see a little bit of text here A little you know, maybe I'll see some images here and they're probably gonna stay with that page a little bit longer Rather than seeing oh man that that spinner is just you know, it's still spinning I've been waiting a few minutes. Nothing's really happening And they're probably gonna end up leaving the experience if they see something like that absolutely I know there's like a as you get to the three seconds the more Longer something takes and this the whole concept of perceived performance performance, which is quite new for designers It's like something that's not necessarily really fast But it feels fast because you're loading the skeleton layout first so you can feel something's happening Even though technically side by side a blank screen loading and the skeleton is basically the same But once you get to the three second mark, you've basically lost people's attention You're basically trying to hack human perception as much as you can yeah But what's interesting is when we design it we always design the final loaded thing We don't really think about all right as this thing is being downloaded or What what what happens if X fails to load what happens if this image is like in a poor network environment Yeah, how do we get to a point where we can design? Before the final thing all because you know, you'll get there eventually But what is the you know like understanding what a budget means from a design point of view because we don't really have a Tool to actually say all right if I will say like you were in sketch and you were to highlight something So this is going to cost you 10 seconds or the equivalent I feel like we're both in the same bucket where as we've been getting closer and closer to thinking about Mobile experiences and how to build them in an efficient way We're having to think about loading A little bit differently to how we have in the past now as a developer I think about loading these days in sort of three stages You've got the is it happening so is there anything actually on the screen even if it's just like a toolbar or a header Then you've got the um, is it useful? So maybe you're showing me some text at that point If I'm you know if I'm on the times or something and you're showing me an article And then the there's the uh, is it useful moment? So if I start tapping around the experience can actually go to other pages can I have something happen? um And from a developer side of you, uh, that requires you to think a little bit differently about how you're shipping things down A developer probably has to think about you know, maybe Breaking up their java script breaking up their css anything else that they're going to ship down the wire So that you're just shipping the minimal set of things a designer has to think about well What are all of these loading states that a developer is going to try showing to the user? And how can I make sure that that looks um as pleasing as possible? But is also improving perceived performance. Yeah providing a performance experience is something that requires You know close collaboration between two sides Like I don't think I'd ever seen skeleton screens as a concept until I started reading like blogs that designers are working on Yeah, is there like a to z of sort of states? Because I know like I've worked on sort of like coming up with sort of visual concepts for offline stuff but is there like um You have like a component or a widget or a thing like is there different states? Or is it almost like I'm asking for something that doesn't exist because it depends on the context It just depends. It's almost as if you're asking for is there a holistic piece of guidance for anything on the web and the answer is no Just no write it yourself. Yeah I think the answer to that is it is nuanced and it depends on what components you're displaying in your experience I certainly know that like if you've got a card ui You probably want to show like the card is maybe you're a skeleton Um, and then maybe you show a placeholder for the images and the text that are going to be in that card I've certainly seen some people that have taken it to extremes where you know They'll even show like a blurred out version of the image or you know Just use css to approximate what that that piece of square is going to look like and then Transition in the actual content when it's there Um, but it's going to vary it really depends on what your application is trying to do and What your latencies look like like if you know if if you think that you're going to be able to deliver an experience in two Or three seconds then maybe you only need you know two states two or three states If you are something super complex you might need more than that. Um, but I think that we're As as we're thinking a little bit more holistically about loading From a developer side, we are considering ideas like progressive bootstrapping or progressive rendering where You know we go through these different loading states and try to show more and more things on the screen as they come in rather than just like Holding off, you know waiting until you know going from a page being completely blank and white And then waiting until the very end and then just showing everything at once because as a user you're going to enjoy I think seeing at least something on the screen sooner. Yeah I mean, I also wanted to bring up um flash Because I know good old flash. Yeah flash seemed to be like the middle person that could Really bridge the gap between a developer and the designers like conceptually I under I learned about code Just through action script and the concept of the stage. It always seems to me feels like the tool But I don't know maybe I'm reminiscing about something that was great for designers, but terrible for the users You know, I would I would actually say at that time You know, we were we were developing very heavily for the desktop web I used to be a flash developer and an action script developer And so if it weren't for the flash id like I know exactly what you mean about you know the stage and everything I would never have been able to do like complex animations or anything like that were it not for flash And it was just such a great tool But also sort of you know It let you take all of your creativity and then export it into this sort of black box that you just threw at the browser And I think we all got used to this idea of you know what I'm just going to Be okay with waiting three minutes for this custom loading progress bar to show up and do something at the very end of it um on the web today like you could you could build tools to do these things but Having them do that in an efficient way Without you know requiring a bunch of manual work on your part is not we're not quite there just yet I would love if there was a tool that allowed you to like work as Productively as flash allowed you to do Um and export it decent stuff But it's been one of those historically hard problems with web content like yeah generating code And also I think users are not as patient as they once were I know this kind was like well back in the old days Which wasn't that I'm like in my day. Yeah, but Like I remember watching like like things the MTV Website like back in like 10 15 years ago or like dazed and confused five minute loading time And you would wait and then you couldn't read the article properly because it was Something that was made for them for the maker not for the viewer And I don't think people not willing to wait for that sort of and it's almost definitely on mobile I mean we know today that you know, we say that you know, Three seconds is the ideal loading time try to get interactive in five seconds We also know that for a lot of the long tail web, you know, it's it's not uncommon for pages to take 19 seconds to load And maybe 19 seconds is okay if you've got a giant flash movie, but people are just going to leave the experience On mobile So I think that we need to find that balance where you can come up with a tool like a flash id or something um, but have it either generate better code or Just work better with the rest of the tools that we have available in the ecosystem I'm personally a big fan of things like framework j s where like designers can use code to come up with like really Really beautiful experiences that can be complex and then hand it off to developers to try to figure out Okay, well, how do I actually implement this in a way that can be loaded efficiently or can be done efficiently on the web? And that's not a bad place to be right now I know that those tools are also evolving constantly like maybe maybe a good eventual place could be you know where a designer can design an experience and all the views and everything and tackle You know motion and everything in a great way and the same tool can give the developer You know enough of the code as an output so they can go and start hacking on it Without it being so divorced from whatever the designer was working on this they feel like something's missing And it's almost like whatever that tool is will be the next evolutionary step for our industry um And I guess I'm what I'm saying is when are you going to build it adi? When are you going to build this any day now this entire thing is a commercial for my next my next set of projects In order to be good at something you need to practice that skill But in order to judge whether you are good at something you just kind of need experience