We'll be talking about UX patterns in local firsts, which I know can definitely be a challenge
on here is what we will learn.
All right, so this talk to one of us here, please.
I've thus can't just talk to about really complex stuff, but what about the end of the
user?
And that's what we care about, right?
You want users to be able to access applications and have their data and have an ecosystem
way that they can understand what is going on.
So my is that brochure, I am a front-end developer, and I spend a lot of time volunteering
in Tanzania after that, and so that means that internet connections not usually very
stable.
We use cellular data for everything, and you pay five megabytes, and so I'm really careful
with data, but people there are even more careful with data than I am.
They generally keep the networks that is off on their phones, and if they need to make
a Google search, I've seen this many times, they will go into the settings, turn on
network data, make the Google search, find the result they want, and even before they actually
look at the page, they go and turn the data off, so all of the stuff in the background
doesn't suck up their data.
So they're really careful and cautious about how they use their data, and again, we use
cellular data for everything.
You've got a laptop, you use a hotspot, you buy home internet, and it's really just a
hotspot that you connect to the cellular network, and it works in your house.
There's a few other solutions, but generally, it's a cellular network, which used to be
really fast when I first started going, but more and more people are coming online.
I think that's a good thing, but it also means that the infrastructure of cellular networks
isn't quite ready for it, and it's gotten down, and over there, if there's a football
game going on, you know it, because you can't use the internet, because everyone's trying
to stream it, and you just give up and do something offline for the rest of the night,
because the whole network just goes way down.
And sometimes, unfortunately, the government can shut down the internet completely.
And so I've experienced a lot of apps that will say, please connect to the internet to access
this.
There's one of really big audio book provider who's app would just show this.
No matter what you're doing, if you just open up the app, it popped up the system-wide notification.
I wasn't connecting to the internet.
I didn't ask for anything on the internet.
I have stuff downloaded, but it just was asking for that now, since then, they fixed it.
But still, that's an annoying thing.
I wasn't trying to do anything online.
Why are you asking me to go online?
Now, a lot of apps, they don't handle LIFE, very well.
That's just a fun way to say.
You think you've got internet connection, but you really don't, and we've all experienced
this.
You're in the train, you're down in the basement.
Yesterday was in the age building in the basement.
You couldn't get any internet connection there.
And then, fortunately, the conference Wi-Fi sometimes is good, and sometimes isn't.
So you think you've got internet, but you don't, and there's one app I've used.
Again, you've got content downloaded offline.
But if it thinks you're going online, it stops everything, until it can refresh everything
from the server.
So they answer for that.
Trick it, go into offline mode, let it reload everything, you're in a good state.
And you can put it back into the internet mode.
It doesn't do well in transitioning.
Sometimes you don't know if content's available online or offline.
So these apps, they all have offline capabilities, but they are offline last and not offline
first.
It's an afterthought to them.
So we're going to look at some examples about what we can do to try to make this better.
These will be pretty quick, and they'll be pretty basic.
They're mostly just wire frames to make you think about what you could do better.
So we've got uncompleted tasks.
This is something you've started offline, but you can't finish offline.
We don't hate the internet.
We believe in going online, but there's this something that you absolutely have to do.
Sorry, I've been talked about messaging apps.
So we've got a messaging app, and we're offline, and I type a message, and I say send it.
Of course it can't send, because we're offline, but how do I know that?
What do I do in the future?
Even if I go in connect, I have this little icon here.
I can't do anything with an icon, but if I go down here, and this is based off some real messaging
apps that I've seen, I can click on it and it says, oh, it failed to send, and I can retry.
But if I have multiple messages, I have to go into all those conversations and retry them
again.
So what can we do better?
Well, we're offline, and now here, you can see, we've got an outbox.
So if I even go into different messages and send different conversations, they're all
available in one place, and so when I go online, and now I don't automatically send them.
Sometimes you might decide that, I decided with a messaging app, you might have changed
your minds as you first type that.
Or you might want to see if someone has sent you a message.
So it may not be the best to automatically do everything.
So we have the concept of an outbox in email.
What if we have an outbox in your messaging?
And now I can hit it button and say, retry all, and then they will send.
Loading new content, this is one that you can experience a lot.
You've got content offline, and but you have a new content coming in from the server.
What's that going to do?
So right here, we've got our different examples.
I'm going to try to connect to something, but I say, oh, I actually want to read this one,
but they jumped away.
Why?
New content loaded and it pushed everything down.
So what can we do better?
Well, very similar.
I decided I would connect online, and I'm looking at something, and it tells me new content
is loaded above.
This is a simple UI change, and now I just grow up and to see that, it doesn't automatically
push my content down, sinking to and from remote.
You've got some data offline, some data that's on the server, sometimes you always
going to keep that up to date, sometimes you're going to partially sync that, and some
data will only be available offline.
How do we communicate that?
So we've got a list here of articles.
I'm going to try reading this one.
Oh, document, not found.
There is no indication here in the list that this document wasn't available to me offline.
So what can we do better?
We did several things here.
First one, you actually can't see on the screen.
I want to notify that.
I made the ones that are not available offline in a light color of gray.
Now that's not usually a great way to do it, because we've got people with excessive
ability issues that can't notice and see, or not, a screen like this, and you can't tell
that some of these are gray or not.
So you can use that as a hint, but don't only rely on that.
So we also have made it one.
You can't click on these.
If they're not available offline, they're not available offline.
So you can't click on them.
Then we added status indicators, not just a symbol, because a symbol doesn't always mean anything
to someone else, but you have it over or click on it, and it will give you the state.
So we have one place here.
We can see everything loaded.
So if we connect, we can go online, then you're going to see everything starting to
sync, and then we can go in and see another one, multiplayer changes.
We've talked a lot about multiplayer today.
It's one of the tenets of local first, even if it's not multiplayer for other people.
Multiplayer is you when you have a laptop and a tablet, and you're trying to work on the same
application.
So here we got a forum.
And then I'll aside and utilize that someone else can be changing content on your form.
And if you're not watching close enough, you're not going to realize what has changed.
And I actually had someone bring up this example to me, because they had customers who thought
the database was corrupting their data, because they had data there and it was gone.
Well, no, someone else edited it.
So what can we do to make this better?
Well, we can give a little bit of a hint with a last edited by, and then you can also view
the history, and then you can revert changes if you want.
So take away number one, communication is key.
We love the idea of technology that's magic.
Technology that works in the background, you don't have to think about it.
Some big tech companies like to do this, but unfortunately when it goes wrong, there's
no way to debug.
There's no way to go further and find out.
So don't hide things away.
Now sometimes you can use symbols.
I know you can't put all the words out, but all the status about everything.
We talked about that video at it today.
And that's got me curious, because I don't know how it's solved those issues either.
There's a lot going on there.
But you need to communicate what is going on to the users.
Don't make them guess and don't only rely on visual cues.
I have tech somewhere.
I take away two.
This is about UX which means user experience, not just something pretty, so something
that is usable by users, and the only way you're going to know that works is if you
test with real users.
These examples are just rough ideas.
You can see they're made to look like wire frames.
So in your app, you're going to have to figure out what works best, and people have different
mental models, mental model for how messaging app works, a mental model for how a finance
app works, and you sort of have to move with that.
So test with real people, and you think it makes a lot sense, because you made it.
It doesn't need it made sense for someone else, so test with real people.
Thank you.
Great, thank you.
Any questions for Matt and I'll pause down the microphone.
Thank you.
So is it working?
I have a recording.
Okay, okay.
So in many applications, two people could change the same data, and then the approach chosen
by many applications is that the last right wins, and the idea is that it's too complex
to show to the user that the multiple versions and it's much, so what do you think how
should this situation be solved?
It's going to absolutely be up to the kind of data that you're editing, because it does
not going to be one solution for all of this.
Google Docs, they're live editing, and then I'll find first, but they do have a history that
you can go back through.
I bet most people don't use it, I bet most people will just go back and remake that change
again.
Yet the option is there for people to go back and see why things have changed.
Now it is a little hidden, but the power users do know, and that's, again, you can't
always have all the changes right there.
But it is hidden away for those people who know how to use it.
Sometimes, last right wins is going to be the best thing.
Sometimes, like GitHub, just stopping and saying, look, there's changes.
We can't figure them out automatically, you have to sort this out before you continue
on.
For some things, it might be that dramatic, if it's that important, that unintended changes
don't get merged in.
Thank you, Matt.
Great stuff.
I see you put a lot of effort in preparing this slide, really cool to see them in my
book, and I have the idea, could you think about collecting those patterns on some
website, and maintaining at least?
Yes, I would definitely like to do more of these were definitely made for this presentation.
If you look at them on mobile, they don't look very good.
I didn't work on that, it's just for this.
But I would like to go forward and do more of these patterns.
Hello, thank you for the presentation.
I have a question about a condom room, the rest in the presentation.
The strategy is to say we have to be careful on how much data we use, right?
We might have cellar error errors, might only be able to send a bit lower off you by this.
Yes.
But on the other hand, you want to show as much information as possible to get a user.
You need to keep track of a log, et cetera.
So it's here to see if you have a problem that you want to condense data as much as possible.
Yes.
But on the other hand, the most user friendly is the uncompressed log of data where we can have a rollback.
So do you think that we can find some middle ground at some point, maybe?
Yes.
Now, again, I don't work on CRDTs or sink engines, but a lot of them have a lot of the data.
It is there.
It's not always very meaningful to a human, but again, you could do lazy loading.
Like, if you needed to load that data from external source, it wouldn't load and
tell you hit the info panel.
You could even do some clever, they're hovering over the info panel, and thus you start
to load it in the background.
Again, this is going to vary by different circumstances.
I think one more.
First of all, thank you for the great talk and talk.
It is a slide of a very intriguing technology panel that you have to live demos.
I was wondering, how do you convey the expectations to the users?
As you know, the UX is really building on previous experience, and nowadays, many apps
don't have this local first approach.
How do we communicate to the user?
Our app has local first view of this, so that they can expect to be able to open the
app well-flying and get access to the content and it will just think, oh, I can get to that
content because it's Internet content requires access to that.
If you're not in that scenario where you have course training stuff, you may not have
this mental model of let's try to see if there's an offline first, you know?
That's really good.
I don't know if anyone else has ever done this.
I've been in Google Docs so many times, and I hit the command save button, just because
that's what we used to do.
Google Docs actually tells you, if you do it enough times, then do it every time.
It will pop up and say, hey, Google Docs are saved automatically.
You don't have to put the command save button.
So I think that's a way to do it.
You could obviously do onboarding things, people skip past those, but it just in time
thing like that where people are trying to hit a save button and you just tell them, hey,
you don't need to, I mean, if not button, if you have to keep working on it.
Yeah, you just remind people, this is safe, don't worry about it.
All right, one more rather thanks.
I'm looking forward to that directory.