David East is a developer advocate on the Firebase Team at Google. Previously he worked at Firebase the startup. If you couldn't tell, he really likes Firebase.View the profile
About the talk
Delight is a key principle of Firebase product development. From automatically creating user audiences with Predictions, to receiving emails on bugs that re-appear in the latest build of your app, you'll see how Firebase makes app development fun and easy, while helping you increase user engagement.
This is ux and API that developers and users. Love you. My name is David East. I'm a developer advocate here at Firebase and it's kind of funny that I'm giving this talk. Because it wasn't all that long ago that my idea of user experience was just completely wrong. A Google we have lots of talented and motivating people who work on user. We have you gots researchers. We have ux designers ux engineers and I get to work with these people on a lot of different occasion. And
usually at the beginning of a project will have a ux designer will come and they'll make a mod and I'll look at them off and I'll save. pretty music look at me and without fail every time they say I don't make things look pretty I make them work. Well. And this is when my idea of user experience started to change. I wonder to myself what if user experience isn't just about thin fonts for the different shades of blue. Cuz I'm a developer and when I build applications I think of things
like this. I see my app as a series of user Network request your threats. and my friends you working, ux they tell me this is fine for your own mental model, but Your user they see things differently. They don't care about the code that happens behind the screen. Because everything for your user is a moment, whether they're creating an account for the first time making a payment or writing their first post each one of these things is a moment. An important thing to understand about moment
is that every single moment comes with an expectation we expect to be able to create an account without saying a dozen red boxing the information. We need to fill out we expect to make a payment without it being painful. We want to write her first post with consulate. And if we don't get this right we can give the user a 1-star moment. But if we understand their expectation and we can give them what they need and give them a five-star. In order to understand what our user need we have to not just look at our
applications as a bunch of code, but we need to think about her ass as a series of moments. Now I'm not here today to teach you how to turn every single part of your app into a five-star moment. Mostly because I don't know how to do that, but I can help you. Look at critical part of common application and see how we can increase the increase. Southern working on Firebase for over four years now and I'm giving lots of socks that use Firebase hosting to build blazing-fast websites how to structure your data and cloud
firestore and these are all very developer Focus talk. What do you think why we want fast site? So why we structure are dating a certain way. We don't do it just so we can feel good about itself maybe a little bit, but we do it for the Youth. The mini Firebase is it just a development tool? Because we can use it to make a user Make moments for the user better. So it also means we can look at Firebase as aux tool. The first moment I want to talk about in I'm boarding. The me I'm boarding is really
interesting because it's the first impression your users going to have a beer at and this is a chance so we can show them that they are going to have a great experience. But that's not always what happened. We don't really think about the user's perspective of onboarding we can get it wrong. because of this point you have your users interest they are very very excited that downloaded your app and opened it the ready to see the content or use it but we show them is a So in order to keep this excitement, we need to I'm bored them as quickly
as possible to reduce friction. Is there an order to do this we're going to have to have a lot of different features. We're going to have to allow them to login with multiple different types of provided. They were going to show them that they can easily reset their passwords. And we also want them to be able to link different accounts because we don't want them logging in with one provider and then coming back in and logging with another and wondering why they have two different account. This is something that Firebase authentication. There is multiple types of authentication with
Google Facebook Twitter GitHub. You can log users in the email and password. You can log them in even in almonds. Having a UI that looks like this will we just give the user one option? Am I still backed into a corner and they might look at this and they think that this is a 1-star moments and they just bounce. So instead we can give them multiple option login with Google sign in with email or even your phone number or just browse as a guest. What's the problem here is that one of most friction
Phil parts of creating an app is having to think of a password and user wants to login with email and password not only is a lot of friction having to open up the keyboard and turn in email and entering a password for the user has to create this password in their head know that they're basically going to forget it and then have to reset it sometime in the future. Sony greatest we can login to user without a password. What are we get to take their email and have them create an account? Well recently was Barbie's authentication. We release a new feature called passwordless
authentication. Don't see this gift to see how it works user enters the email. Do you think interest in their email send link? And then they go and they check their email. Email from your app and it comes with a sign in them when I tap it. And then it redirects them to the app and it just automatically signs women. And this is a great moment for the user because it's one less that's one left password. They have to remember and we can get them into our app much
faster. List of features available on Android iOS in the web in this is a code sample how we did it on the website grabbing at Firebase off instant and we call and we named method send sign in leads to email mistakes in the user's email and then and then we need to set the user's email to local storage cuz we really need a later. And at this point we can prompt the user. Hey go check your email. These are all go out check your e-mail and click on a link which brings them back to our page. And at this point we need to check to see if they're coming in with this
sign in link and weed with a little helper method from Firebase authentication. We can call in sign in with email link with a current URL and if it is a sign in the link, we're going to get that email that we saved the local storage. I want to make sure that this link is here because if it's not here, we're going to prompt him again to make sure that we have it because something could have erased it from local storage or some error could happen. So I just brought them one more time to make sure we have it. Who wants to have it will call sign in with email Lee and will pass it in the
email in the current email link and at that point was his clean up after ourselves because the user is logged in. Provide better moments for users with onboarding. We need to give them multiple options. So they feel more trusting they login and we need to reduce the friction. So you're not trying to pull too much from them upfront. Now another moment I want to talk about is what happens when you're at crashing so users logged into I'm bored of them quickly, but the next thing you know the app crashes
you might think that this is a 1 * 9. But he actually doesn't have to be. This is a point in our app or we can show the user that were human and that we do make mistakes, but we work to fix them. But order to fix me we have to know where app is breaking you have to be able to have properly monitor it. And this is something that crashed with its does very well. So once you have pressed look that up in your app, you get a dashboard full of useful information you get to CV crash wreath to fix which hopefully makes you
feel good down in the bottom we can see in which file the issue occurred on what line of code we can see how many times has happened and for how many users So we can see what's going on and respond and fix it quickly. But you might not be refreshing the page every second of the day. So you want a way to get notified of this or a way to handle this data outside of his dashboard. And Chrysler deposit integration with Cloud functions. So every time a new issue occurs, you can have a cloud function trigger and
we can do something with this information. Didn't create this club function will give it a name. And in this case. I'll call it post on issue create and then I'll set up a non you issue trigger inside of the Callback. We get the issue information and from here. I can really do whatever I want. I can send this information to FLAC. So I get a notification that we're having their I could maybe send it out to a Twitter status to let her use. No. Hay we have a problem but we're working on it or we send it out to our own status page or even an internal dashboard.
Because it's okay when we fail a lot of times when you do fail, it's a way to show the user that we're all human and we're trying to fix things and it's a way to earn trust in your users, even though we had a crash. Trestle Inn Express, let it gives you a lot of insight into the obvious one star moment where they have crashes and it's very clear that this isn't a great moment for the user. But what about moments that aren't obvious what are the moments that lurk in our app and we just don't know about And usually these
moments are performance-based. We might work on Fast computers and we might always be fast connections are at but our users that's not always the case with them. They might be on slow or not at work and we're not seeing the same results as they are. I think so in this game. This is loading and it's loading in floating and floating floating man. And there you have it. And for your user these types of clothes are really stressful. They're sitting there. Just waiting for the data to come back. In the problem
is we don't see this as active offers better users do the how do we know these things are happening? They're not happening to us. This is the case for your Firebase performance monitoring that allows us to set up tracing in our app and see real world data from our users. But once you have it set up you get it all this information in your dashboard. I can see Traces by frequency and I can see the network response latency from different countries and something that I noticed in. This is that I have this one trays and taking almost 7 seconds in Spanish.
So I don't I inspect all the network request that are happening in my app. I noticed that I have this one that takes about 2.15 seconds to complete so I drill in and I see that this is actually a cloud function. And in this response time box IC takes anywhere between two second to almost 5 Seconds to complete. So why is this happening? Well, this was my fault. I was really excited and I was using a new feature from cloud function called callable function. You ain't call the function to work is that we get a function name and then we can create
a new call the function. Nicole the function takes into argument data, which is the date of the function is called with by the user of clients and contacts and contact this very useful because if the user is authenticated, we automatically get their ID and other information about this user. So now that I have this ID I can just go out and get some data based on. Call the function. Just don't stop on the server side. There's actually a client SDK for Android iOS and web and it in this iOS example, I'll call
and call the function by function name. I can call it with any data. I need and then inside a call back. I can just buying that result in my view. Why was the flow? Well this was a mistake. I was making I had to get all this data to the view. I was making three sequential Network calls and this one can take anywhere between a half stuck in a few seconds. And then I would make this one another half-second to two seconds and then yet again, so it's why I can see sometimes this could take almost seven seconds. So I decided to trace this and fix it,
so I create a custom tray and start it and then I aggregated these three calls into one on the server side. So now instead of waiting for three calls and just waiting for one and this might be a little faster, but it's still about a half second second switch. I wouldn't really call that restore moment. And the reason why the reason why it takes me so long is because your user might need somewhere else on the other side of the world. Then where your servers located and is that users on his flow Network. It's going to incur a lot
of latency. Just getting to your server and back. This is something that you can solve with Firebase hosting and traditionally you might think of Firebase hosting as just a way to serve website. But when you think outside of the box, you can use cloud functions and Firebase hosting together to create really fast rest apis. Because he's hosting it's backed by a Content delivery Network, which means that we have an entire network of servers all around the world. So when your user needs a piece of data, they're not traveling
all the way across the world. They're just going right up the street. So the server code for this is like switch from using a cobble function to a non request function so I can control the response. Go back and so I sent a cache-control header and it tells the server how long we're going to cash this on the network and then I can decode the off token using the Firebase. Admin SDK. And now I just need to tell Firebase I was saying how to talk to Cloud function. So I set up a fireplace. Json configuration file or I just set up a
server rewrite and I say whenever you see this. Call This Cloud function. And already Firebase deploy from the command line and my rest API is available to the world for you. Tyrese actor my eye and I now just call this make a network request out to my domain and I wondered just how fast is this now? So I waited a day and I went back to the Dashboard Light filtered within the last 24 hours. I saw that my network request went from almost seven seconds down to 68.
And that's how fast it load from a cold start the app data load feels almost instant. And this is what the user expect they expect to you to load their ass and see their data immediately. In order to give a user Great Moments we need to be able to monitor Real Performance not just worried about the note just look at the performance. We see when we develop but the performance that happened in the wild. And my favorites moments is handling offline situation. Because when your user loves your app, they're not they're going to bring it everywhere with them. They're going to bring camping.
They're going to take it on the plane. They're going to bring it to their friend's house. I had bad cellular service in really flaky Wi-Fi and despite the circumstances. We still want to give the user a great moment even when we don't have a connection. And that's not really what happens in a lot of the afscme bill or Otis. We download we want to use it, but we don't have a connection. We just get some UI that's is a sorry. Please find a connection in that later. And this isn't what the user is looking for the user downloaded this app, so they could use it so they can view the content
and we're not able to provide them with an offline experience and it's a disappointing moments. We don't want to just build read-only apps offline. You want them to be functional you want to provide as much experience without a connection as we can with a connection? The problem with doing this is that we Builder apps. We have to split everything up when it comes to data retrieval. So we'll have an offline cache and data for when the user is offline. And then when they go back online, we make Network request that we have to synchronize this data with an offline
task. Not only is this a difficult to architect in your app is difficult to Arctic Cat architect architect in your break because you thinking about the album is offline stay in its online State and easy to create bugs and easy just to get confused. This is actually my favorite part of using cloud firestore. Cloud firestore is a document database that's really scalable as simple as a simple collection of data and allow you to do powerful queer for my favorite part is how easy it is to build offline ready application. This is an app. I made
is a pwa and I can use this app to camera app online just as I can offline. I save data and it goes to my weird selfie feed. And all I have to do to enable offline is on the web. I just call an able persistence and on Android and iOS. It's just enabled by default. But now once were offline, we have a new responsibility to the user because the hate your offline to be different than Behavior online. So we have to build a UI that guide the user to make a correct decision. Show me case of this screen. I have all these pictures
but I don't know if any of these pictures are synced with the server. So I don't know if I can delete them or what anyone else can see them. So I can use cloud firestore to help me out here looking to create a document reference. And so I'll go into the city's collection and grab the documents of San Francisco. And I'm going to add a snapshot listener and every single time this document updates is snapshot with fire with this on event listener. And using this data snapshot I can actually go in and get the metadata of this object and see if it
has any pending right because of a has pending right? Then. I know that this is local only data. I can change my UI and I can add some opacity to my images to the user can see that they aren't synced yet. And then when they know they know that their data is not backed up. And this is great because we're giving the user proper guidance for giving them an offline experience, but we're letting them know what's happening while we're offline. So a lot of the topics I've covered are about
bringing expectations or understanding the users expectation and we want to meet these was expectations, but every now and then we get to go beyond the expectations when we get to surprise muser. Not that long ago. I bought a house and the really interesting thing about buying a houses that once you buy it everything breaks. Inside my hot water heater hot water heater broke pretty much the first week. I moved into my house and I had someone to come out and take a look at it. And I noticed when they're inspecting my hot
water heater that they were taking a picture of it with a custom after company built. So I asked him. Hey is this useful for you? And it was surprising because he looked at me and said no, it's not in the past before I this app. I just wrote down this manufacturer and serial number of the hot water heater and I was done now I have to open this app take a picture and I still have to write down the same information as before. And I kind of thought like this is a moment. We're not meeting. The user's excitation were actually making things a little more difficult. So when you left
I went upstairs and I got to work and so I built a little app using ml kids. So we launched ml kids the beginning and MLK. It is a tool to bring machine learning to mobile devices. And so I created a visiontek detector and then I grabbed a UI UI image from The View. And then I converted it to a vision image and using that I was able to detect any text that was in this photo. In case you thought that this wasn't a real story. This is me. Go back here. We're all the video. This is me in my
basement. Denny's Estero phone number of my hot water heater and you can see that in real time. I'm picking up the text. And then once I see their code is right, I take the picture and then I didn't have to write this information down. I didn't get the picture in this area code number all at once. three row Ford and this is what the user wanted. They didn't want to steps. They wanted to have the picture in this area code number. And this is something that's going
to happen for the user multiple times a day. So while it's small and has them in as a larger impact and just make their lives just a little bit easier and it's unexpected way. Is there throughout all this process? I thought to myself. You asked isn't about your phone not about your layout not about what color blue in pic. User experience is all about the moments that a user goes through and in order to really give the user a five-star moment. We have to think about their moment and think about our developer tools as a way
to create better mom for users. So your feedback for the talk is really important. So I know you probably heard this in every single session. But if you have any feedback visit the IOS app and leave that to be amazing and I'm going to be at the Firebase tent after this. So if you want to stop by and ask any questions or taken offline selfie, I'll be available. So thank you all so much for coming out.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.