WEBVTT 00:00.000 --> 00:12.320 We'll be talking about UX patterns in local firsts, which I know can definitely be a challenge 00:12.320 --> 00:14.760 on here is what we will learn. 00:14.760 --> 00:18.160 All right, so this talk to one of us here, please. 00:18.160 --> 00:23.540 I've thus can't just talk to about really complex stuff, but what about the end of the 00:23.540 --> 00:24.540 user? 00:24.540 --> 00:26.980 And that's what we care about, right? 00:26.980 --> 00:35.580 You want users to be able to access applications and have their data and have an ecosystem 00:35.580 --> 00:39.140 way that they can understand what is going on. 00:39.140 --> 00:45.420 So my is that brochure, I am a front-end developer, and I spend a lot of time volunteering 00:45.420 --> 00:51.900 in Tanzania after that, and so that means that internet connections not usually very 00:51.900 --> 00:52.900 stable. 00:52.900 --> 00:59.980 We use cellular data for everything, and you pay five megabytes, and so I'm really careful 00:59.980 --> 01:04.340 with data, but people there are even more careful with data than I am. 01:04.340 --> 01:11.020 They generally keep the networks that is off on their phones, and if they need to make 01:11.020 --> 01:15.460 a Google search, I've seen this many times, they will go into the settings, turn on 01:15.460 --> 01:19.740 network data, make the Google search, find the result they want, and even before they actually 01:19.740 --> 01:23.740 look at the page, they go and turn the data off, so all of the stuff in the background 01:23.740 --> 01:25.740 doesn't suck up their data. 01:25.740 --> 01:31.380 So they're really careful and cautious about how they use their data, and again, we use 01:31.380 --> 01:33.340 cellular data for everything. 01:33.340 --> 01:38.420 You've got a laptop, you use a hotspot, you buy home internet, and it's really just a 01:38.420 --> 01:42.420 hotspot that you connect to the cellular network, and it works in your house. 01:42.420 --> 01:47.660 There's a few other solutions, but generally, it's a cellular network, which used to be 01:47.660 --> 01:52.060 really fast when I first started going, but more and more people are coming online. 01:52.060 --> 01:56.900 I think that's a good thing, but it also means that the infrastructure of cellular networks 01:56.900 --> 02:02.340 isn't quite ready for it, and it's gotten down, and over there, if there's a football 02:02.340 --> 02:07.380 game going on, you know it, because you can't use the internet, because everyone's trying 02:07.380 --> 02:13.100 to stream it, and you just give up and do something offline for the rest of the night, 02:13.100 --> 02:16.540 because the whole network just goes way down. 02:16.540 --> 02:21.940 And sometimes, unfortunately, the government can shut down the internet completely. 02:21.940 --> 02:28.140 And so I've experienced a lot of apps that will say, please connect to the internet to access 02:28.140 --> 02:29.140 this. 02:29.140 --> 02:34.340 There's one of really big audio book provider who's app would just show this. 02:34.340 --> 02:39.380 No matter what you're doing, if you just open up the app, it popped up the system-wide notification. 02:39.380 --> 02:40.740 I wasn't connecting to the internet. 02:40.740 --> 02:42.060 I didn't ask for anything on the internet. 02:42.060 --> 02:48.660 I have stuff downloaded, but it just was asking for that now, since then, they fixed it. 02:48.660 --> 02:50.020 But still, that's an annoying thing. 02:50.020 --> 02:52.020 I wasn't trying to do anything online. 02:52.020 --> 02:53.780 Why are you asking me to go online? 02:53.780 --> 02:57.780 Now, a lot of apps, they don't handle LIFE, very well. 02:57.780 --> 02:59.580 That's just a fun way to say. 02:59.580 --> 03:03.980 You think you've got internet connection, but you really don't, and we've all experienced 03:03.980 --> 03:04.980 this. 03:04.980 --> 03:06.980 You're in the train, you're down in the basement. 03:06.980 --> 03:09.740 Yesterday was in the age building in the basement. 03:09.740 --> 03:11.660 You couldn't get any internet connection there. 03:11.660 --> 03:16.980 And then, fortunately, the conference Wi-Fi sometimes is good, and sometimes isn't. 03:16.980 --> 03:22.260 So you think you've got internet, but you don't, and there's one app I've used. 03:22.260 --> 03:24.980 Again, you've got content downloaded offline. 03:24.980 --> 03:30.420 But if it thinks you're going online, it stops everything, until it can refresh everything 03:30.420 --> 03:31.780 from the server. 03:31.780 --> 03:33.020 So they answer for that. 03:33.020 --> 03:36.780 Trick it, go into offline mode, let it reload everything, you're in a good state. 03:36.780 --> 03:39.820 And you can put it back into the internet mode. 03:39.820 --> 03:43.100 It doesn't do well in transitioning. 03:43.100 --> 03:47.580 Sometimes you don't know if content's available online or offline. 03:47.580 --> 03:56.100 So these apps, they all have offline capabilities, but they are offline last and not offline 03:56.100 --> 03:57.100 first. 03:57.100 --> 03:59.020 It's an afterthought to them. 03:59.020 --> 04:04.020 So we're going to look at some examples about what we can do to try to make this better. 04:04.020 --> 04:06.980 These will be pretty quick, and they'll be pretty basic. 04:06.980 --> 04:12.540 They're mostly just wire frames to make you think about what you could do better. 04:12.540 --> 04:13.860 So we've got uncompleted tasks. 04:13.860 --> 04:17.780 This is something you've started offline, but you can't finish offline. 04:17.780 --> 04:19.540 We don't hate the internet. 04:19.540 --> 04:23.860 We believe in going online, but there's this something that you absolutely have to do. 04:23.860 --> 04:26.140 Sorry, I've been talked about messaging apps. 04:26.140 --> 04:30.860 So we've got a messaging app, and we're offline, and I type a message, and I say send it. 04:30.860 --> 04:36.340 Of course it can't send, because we're offline, but how do I know that? 04:36.340 --> 04:38.100 What do I do in the future? 04:38.100 --> 04:43.300 Even if I go in connect, I have this little icon here. 04:43.300 --> 04:48.380 I can't do anything with an icon, but if I go down here, and this is based off some real messaging 04:48.380 --> 04:53.860 apps that I've seen, I can click on it and it says, oh, it failed to send, and I can retry. 04:53.860 --> 04:58.460 But if I have multiple messages, I have to go into all those conversations and retry them 04:58.460 --> 04:59.460 again. 04:59.460 --> 05:01.460 So what can we do better? 05:01.460 --> 05:07.340 Well, we're offline, and now here, you can see, we've got an outbox. 05:07.340 --> 05:13.300 So if I even go into different messages and send different conversations, they're all 05:13.300 --> 05:21.460 available in one place, and so when I go online, and now I don't automatically send them. 05:21.460 --> 05:25.540 Sometimes you might decide that, I decided with a messaging app, you might have changed 05:25.540 --> 05:27.700 your minds as you first type that. 05:27.700 --> 05:30.860 Or you might want to see if someone has sent you a message. 05:30.860 --> 05:34.500 So it may not be the best to automatically do everything. 05:34.500 --> 05:38.020 So we have the concept of an outbox in email. 05:38.020 --> 05:40.460 What if we have an outbox in your messaging? 05:40.460 --> 05:46.060 And now I can hit it button and say, retry all, and then they will send. 05:46.060 --> 05:51.300 Loading new content, this is one that you can experience a lot. 05:51.300 --> 05:56.500 You've got content offline, and but you have a new content coming in from the server. 05:56.500 --> 05:58.220 What's that going to do? 05:58.220 --> 06:01.460 So right here, we've got our different examples. 06:01.460 --> 06:06.460 I'm going to try to connect to something, but I say, oh, I actually want to read this one, 06:06.460 --> 06:08.100 but they jumped away. 06:08.100 --> 06:09.100 Why? 06:09.100 --> 06:12.380 New content loaded and it pushed everything down. 06:12.380 --> 06:13.900 So what can we do better? 06:13.900 --> 06:16.460 Well, very similar. 06:16.460 --> 06:21.580 I decided I would connect online, and I'm looking at something, and it tells me new content 06:21.580 --> 06:22.900 is loaded above. 06:22.900 --> 06:28.700 This is a simple UI change, and now I just grow up and to see that, it doesn't automatically 06:28.700 --> 06:34.340 push my content down, sinking to and from remote. 06:34.340 --> 06:40.220 You've got some data offline, some data that's on the server, sometimes you always 06:40.220 --> 06:44.140 going to keep that up to date, sometimes you're going to partially sync that, and some 06:44.140 --> 06:47.060 data will only be available offline. 06:47.060 --> 06:48.780 How do we communicate that? 06:48.780 --> 06:51.620 So we've got a list here of articles. 06:51.700 --> 06:53.340 I'm going to try reading this one. 06:53.340 --> 06:56.420 Oh, document, not found. 06:56.420 --> 07:04.380 There is no indication here in the list that this document wasn't available to me offline. 07:04.380 --> 07:05.940 So what can we do better? 07:05.940 --> 07:08.020 We did several things here. 07:08.020 --> 07:10.380 First one, you actually can't see on the screen. 07:10.380 --> 07:12.140 I want to notify that. 07:12.140 --> 07:16.860 I made the ones that are not available offline in a light color of gray. 07:16.860 --> 07:21.580 Now that's not usually a great way to do it, because we've got people with excessive 07:21.620 --> 07:25.460 ability issues that can't notice and see, or not, a screen like this, and you can't tell 07:25.460 --> 07:27.500 that some of these are gray or not. 07:27.500 --> 07:32.820 So you can use that as a hint, but don't only rely on that. 07:32.820 --> 07:34.660 So we also have made it one. 07:34.660 --> 07:35.660 You can't click on these. 07:35.660 --> 07:38.500 If they're not available offline, they're not available offline. 07:38.500 --> 07:39.660 So you can't click on them. 07:39.660 --> 07:45.740 Then we added status indicators, not just a symbol, because a symbol doesn't always mean anything 07:45.740 --> 07:50.540 to someone else, but you have it over or click on it, and it will give you the state. 07:50.540 --> 07:52.100 So we have one place here. 07:52.100 --> 07:53.420 We can see everything loaded. 07:53.420 --> 07:57.140 So if we connect, we can go online, then you're going to see everything starting to 07:57.140 --> 08:03.700 sync, and then we can go in and see another one, multiplayer changes. 08:03.700 --> 08:05.260 We've talked a lot about multiplayer today. 08:05.260 --> 08:10.300 It's one of the tenets of local first, even if it's not multiplayer for other people. 08:10.300 --> 08:14.740 Multiplayer is you when you have a laptop and a tablet, and you're trying to work on the same 08:14.740 --> 08:15.740 application. 08:15.740 --> 08:19.540 So here we got a forum. 08:19.540 --> 08:26.500 And then I'll aside and utilize that someone else can be changing content on your form. 08:26.500 --> 08:31.220 And if you're not watching close enough, you're not going to realize what has changed. 08:31.220 --> 08:37.060 And I actually had someone bring up this example to me, because they had customers who thought 08:37.060 --> 08:41.620 the database was corrupting their data, because they had data there and it was gone. 08:41.620 --> 08:43.460 Well, no, someone else edited it. 08:43.460 --> 08:45.860 So what can we do to make this better? 08:45.860 --> 08:53.780 Well, we can give a little bit of a hint with a last edited by, and then you can also view 08:53.780 --> 08:59.900 the history, and then you can revert changes if you want. 08:59.900 --> 09:04.300 So take away number one, communication is key. 09:04.300 --> 09:07.300 We love the idea of technology that's magic. 09:07.300 --> 09:10.420 Technology that works in the background, you don't have to think about it. 09:10.420 --> 09:15.820 Some big tech companies like to do this, but unfortunately when it goes wrong, there's 09:15.940 --> 09:17.260 no way to debug. 09:17.260 --> 09:19.860 There's no way to go further and find out. 09:19.860 --> 09:22.060 So don't hide things away. 09:22.060 --> 09:24.860 Now sometimes you can use symbols. 09:24.860 --> 09:28.460 I know you can't put all the words out, but all the status about everything. 09:28.460 --> 09:30.060 We talked about that video at it today. 09:30.060 --> 09:33.700 And that's got me curious, because I don't know how it's solved those issues either. 09:33.700 --> 09:35.140 There's a lot going on there. 09:35.140 --> 09:38.700 But you need to communicate what is going on to the users. 09:38.700 --> 09:44.660 Don't make them guess and don't only rely on visual cues. 09:44.660 --> 09:45.660 I have tech somewhere. 09:45.660 --> 09:46.980 I take away two. 09:46.980 --> 09:52.700 This is about UX which means user experience, not just something pretty, so something 09:52.700 --> 09:57.820 that is usable by users, and the only way you're going to know that works is if you 09:57.820 --> 10:00.620 test with real users. 10:00.620 --> 10:02.820 These examples are just rough ideas. 10:02.820 --> 10:05.420 You can see they're made to look like wire frames. 10:05.420 --> 10:10.700 So in your app, you're going to have to figure out what works best, and people have different 10:10.700 --> 10:15.300 mental models, mental model for how messaging app works, a mental model for how a finance 10:15.300 --> 10:19.060 app works, and you sort of have to move with that. 10:19.060 --> 10:23.420 So test with real people, and you think it makes a lot sense, because you made it. 10:23.420 --> 10:27.500 It doesn't need it made sense for someone else, so test with real people. 10:27.500 --> 10:28.500 Thank you. 10:28.500 --> 10:37.500 Great, thank you. 10:37.500 --> 10:47.100 Any questions for Matt and I'll pause down the microphone. 10:47.100 --> 10:49.820 Thank you. 10:49.820 --> 10:50.820 So is it working? 10:50.820 --> 10:51.820 I have a recording. 10:51.820 --> 10:53.620 Okay, okay. 10:53.620 --> 11:01.100 So in many applications, two people could change the same data, and then the approach chosen 11:01.100 --> 11:08.140 by many applications is that the last right wins, and the idea is that it's too complex 11:08.140 --> 11:15.700 to show to the user that the multiple versions and it's much, so what do you think how 11:15.700 --> 11:17.780 should this situation be solved? 11:17.780 --> 11:22.660 It's going to absolutely be up to the kind of data that you're editing, because it does 11:22.660 --> 11:27.900 not going to be one solution for all of this. 11:27.900 --> 11:32.180 Google Docs, they're live editing, and then I'll find first, but they do have a history that 11:32.180 --> 11:33.180 you can go back through. 11:33.180 --> 11:38.460 I bet most people don't use it, I bet most people will just go back and remake that change 11:38.460 --> 11:39.460 again. 11:39.460 --> 11:44.580 Yet the option is there for people to go back and see why things have changed. 11:44.580 --> 11:49.100 Now it is a little hidden, but the power users do know, and that's, again, you can't 11:49.100 --> 11:52.060 always have all the changes right there. 11:52.060 --> 11:58.220 But it is hidden away for those people who know how to use it. 11:58.220 --> 12:01.260 Sometimes, last right wins is going to be the best thing. 12:01.260 --> 12:05.620 Sometimes, like GitHub, just stopping and saying, look, there's changes. 12:05.620 --> 12:09.020 We can't figure them out automatically, you have to sort this out before you continue 12:09.020 --> 12:10.020 on. 12:10.020 --> 12:15.620 For some things, it might be that dramatic, if it's that important, that unintended changes 12:15.620 --> 12:29.940 don't get merged in. 12:29.940 --> 12:30.940 Thank you, Matt. 12:30.940 --> 12:31.940 Great stuff. 12:31.940 --> 12:36.780 I see you put a lot of effort in preparing this slide, really cool to see them in my 12:36.780 --> 12:45.780 book, and I have the idea, could you think about collecting those patterns on some 12:45.780 --> 12:50.300 website, and maintaining at least? 12:50.300 --> 12:55.100 Yes, I would definitely like to do more of these were definitely made for this presentation. 12:55.100 --> 12:57.340 If you look at them on mobile, they don't look very good. 12:57.340 --> 12:58.820 I didn't work on that, it's just for this. 12:58.820 --> 13:02.820 But I would like to go forward and do more of these patterns. 13:03.820 --> 13:05.140 Hello, thank you for the presentation. 13:05.140 --> 13:09.140 I have a question about a condom room, the rest in the presentation. 13:09.140 --> 13:12.220 The strategy is to say we have to be careful on how much data we use, right? 13:12.220 --> 13:16.140 We might have cellar error errors, might only be able to send a bit lower off you by this. 13:16.140 --> 13:17.140 Yes. 13:17.140 --> 13:20.220 But on the other hand, you want to show as much information as possible to get a user. 13:20.220 --> 13:22.420 You need to keep track of a log, et cetera. 13:22.420 --> 13:27.060 So it's here to see if you have a problem that you want to condense data as much as possible. 13:27.060 --> 13:28.060 Yes. 13:28.380 --> 13:35.180 But on the other hand, the most user friendly is the uncompressed log of data where we can have a rollback. 13:35.180 --> 13:39.100 So do you think that we can find some middle ground at some point, maybe? 13:39.100 --> 13:40.100 Yes. 13:40.100 --> 13:45.300 Now, again, I don't work on CRDTs or sink engines, but a lot of them have a lot of the data. 13:45.300 --> 13:47.180 It is there. 13:47.180 --> 13:52.700 It's not always very meaningful to a human, but again, you could do lazy loading. 13:52.700 --> 13:57.220 Like, if you needed to load that data from external source, it wouldn't load and 13:57.220 --> 13:58.700 tell you hit the info panel. 13:58.700 --> 14:03.180 You could even do some clever, they're hovering over the info panel, and thus you start 14:03.180 --> 14:05.140 to load it in the background. 14:05.140 --> 14:10.380 Again, this is going to vary by different circumstances. 14:10.380 --> 14:13.380 I think one more. 14:13.380 --> 14:16.380 First of all, thank you for the great talk and talk. 14:16.380 --> 14:21.140 It is a slide of a very intriguing technology panel that you have to live demos. 14:21.140 --> 14:25.700 I was wondering, how do you convey the expectations to the users? 14:25.700 --> 14:30.580 As you know, the UX is really building on previous experience, and nowadays, many apps 14:30.580 --> 14:32.740 don't have this local first approach. 14:32.740 --> 14:34.460 How do we communicate to the user? 14:34.460 --> 14:39.060 Our app has local first view of this, so that they can expect to be able to open the 14:39.060 --> 14:44.460 app well-flying and get access to the content and it will just think, oh, I can get to that 14:44.460 --> 14:47.500 content because it's Internet content requires access to that. 14:47.500 --> 14:51.860 If you're not in that scenario where you have course training stuff, you may not have 14:51.860 --> 14:57.860 this mental model of let's try to see if there's an offline first, you know? 14:57.860 --> 14:59.540 That's really good. 14:59.540 --> 15:01.340 I don't know if anyone else has ever done this. 15:01.340 --> 15:06.420 I've been in Google Docs so many times, and I hit the command save button, just because 15:06.420 --> 15:09.060 that's what we used to do. 15:09.060 --> 15:12.540 Google Docs actually tells you, if you do it enough times, then do it every time. 15:12.540 --> 15:15.780 It will pop up and say, hey, Google Docs are saved automatically. 15:15.780 --> 15:19.060 You don't have to put the command save button. 15:19.060 --> 15:21.820 So I think that's a way to do it. 15:21.820 --> 15:25.860 You could obviously do onboarding things, people skip past those, but it just in time 15:25.860 --> 15:30.740 thing like that where people are trying to hit a save button and you just tell them, hey, 15:30.740 --> 15:34.580 you don't need to, I mean, if not button, if you have to keep working on it. 15:34.580 --> 15:42.780 Yeah, you just remind people, this is safe, don't worry about it. 15:43.780 --> 15:46.780 All right, one more rather thanks. 15:52.780 --> 15:55.780 I'm looking forward to that directory.