Behind the Scenes: Improving the Tag Experience for Evernote on Mobile

Behind the Scenes: Improving the Tag Experience for Evernote on Mobile


– Hi, I’m Ian Small, CEO of Evernote. And I’m here today with Sahand who’s
a senior member of our design team. Sahand’s been working on making the
tag experience better on mobile. Sahand, what kinds of problems
have you been working with? – The biggest problem is a lot
of differences in our iOS and Android experiences. There’s also a lot of stuff you can do
on desktop that you can’t do on mobile. – Clearly we should be able to do
everything that Evernote lets you do on all devices. – That’s what users expect, yeah. – Makes sense. So let’s start by taking a look
at what iOS and Android do today. – Okay. So on iOS, on any note list,
you can tap on the Tags icon. And you’ll see a list of all your tags. – [Ian] That looks pretty good. But what I don’t see here is
anything that’s a nested tag. What if I’d made a nested tag on my PC? – [Sahand] Unfortunately, this is just a
giant flat list and we don’t maintain your structure. – [Ian] Hmm. What happens if I click on one of these? – [Sahand] If you tap on one of these you’ll
view all the notes associated with that tag. The downside is that we don’t show you any
other tags that would be associated with this note. – [Ian] So I have no idea what
else that note might have on it. – [Sahand] Right. – Well, that doesn’t
sound very satisfactory. What about on Android, is it any better? – A little bit. You can tap on the hamburger menu, and
then Tags, and you’ll see a giant flat structure, and then you can actually
see the tags associated with that note. – So things are better because I can
see the tags in the note, but I still can’t see my hierarchy. So we’re making some progress on Android
but still not really where we want to be. – Right. – Okay, room for
improvement across the board. So let’s start over here. What’s the ‘tag kingdom’? – The kingdom is an internal term we
use for the place where you go to see all of your tags. – All right. What can I do in this? – [Sahand] Here you can find tags. You can create from here and from here. Through the Overflow [menu] you’ll be able
to sort and manage and you can also pop any of these open to view
your nested structure. – So at this point, we’re already well
beyond anything we have today on iOS and Android. – [Sahand] We are. – That’s a good start. This seems to me like a really good
foundation for an improvement to the tags design on mobile. – Right, exactly. – [Ian] Big step forward. So let’s take a look
at what else we’ve got? – Okay. So we’ve got four key areas I want to
highlight: on the Note list, on the Note itself, navigation, and managing. – All right, let’s
start on the note list. – So on any note list, you’ll see
by default we want to display the tags in this pill form, which we think is more
clear than it is on Android today. – [Ian] That’s pretty good. So no matter what note list I have,
whether it’s in All Notes or whether it’s from a notebook or a search result, I’m
always going to see these tags displayed. – [Sahand] Right. And for any users that don’t use tags,
you’ll see that we just simply don’t display them. – [Ian] Well, that’s great. What if I use a lot of tags, but for some
reason I don’t want to see them on this list? – [Sahand] Sure. On any note list, you can
tap on this overflow menu. It’ll bring up this bottom sheet. You can tap on ‘View options’. This section will expand, and you
can actually toggle ‘Show tags’ off. – [Ian] That seems to me like I’m
getting the best of both worlds. I’m getting the right default,
but I’m also giving users control. – That’s the idea. – All right, what about
down here in the note itself? – [Sahand] So here, looking at a note I
can clearly see that there are two tags associated with it. I can tap on it and here I’ll
be able to view these tags. – [Ian] That’s already a huge advantage
because in iOS today, I can’t see actually what tags are associated with my note. – [Sahand] Yep, we’ve heard that
feedback from a lot of users. On iOS, it’s buried
underneath ‘Note info’. – [Ian] Hm. So once I’m in this view, what can I do? – [Sahand] So I can toggle these on and off. I can add new ones. I can also tap on the X on
these pills to remove them. – [Ian] So I have a lot of control. What if I want to make a new tag? What if I actually think, ‘there’s
sprinkles here on these cupcakes; I’d like to add a sprinkles tag’. All sprinkles cupcakes are better. – [Sahand] If you wanted to create a
new tag, you could simply tap here. Or if you thought that the tag
existed, you could search for it. And while you’re searching, when you see
that there’s no result, you could go ahead and create what you’ve typed in. – Okay, so I’ve got
the best of both worlds. I can either just make it directly here,
or I can start searching for it, get halfway through, and click on
it if I’ve already found it. – Yep. – That sounds pretty good. What about up here in the nav drawer? – So with navigation
is similar to Android. This drawer slides open, you can tap on
‘Tags’ to go to the tags kingdom, but you can also tap on this to expand and
view your nested tag structure. – [Ian] So this is very cool because
I still have the context in behind. I haven’t lost that at all. And if I just close the drawer I get
my context immediately back again. – [Sahand] Right. – [Ian] It’s very powerful and I
see I have the hierarchy as well. – [Sahand] Yes, and if you tap on something
like Cocktails, you go to a search results page and I’m viewing all the
notes associated with that tag. I can continue to search from here and
filter and I can actually remove this or go back to where I came from. – [Ian] So I basically get to see all
the tags that are on each note. I notice the Lumiere has both a
‘cocktail’ tag and a ‘plants’ tag. Do you suppose it’s a bit chewy? – It is. But it’s also really good. – Well, we should have one
afterwards, this is taking quite a while. – Sounds good. – Alright, so down here at the
bottom, back to the tags kingdom. – Sure. So here we just want to highlight how easy
it is to manage and edit these tags. You can edit them through the overflow
menu or you can swipe left to bring up this bottom sheet. – [Ian] And that’s very cool. What can I do? – [Sahand] You could move the tag within your
nested tag structure, rename it, remove the tag from all notes,
and of course delete it. – [Ian] So I basically have full management
control over my tags in the mobile experience. – Right. Exactly what our users
have been asking for. – [Ian] That’s fantastic. So when I look across all of this, this
is a pretty sweeping improvement in the design of what tags are like
in the mobile experience. I know we user-test everything that we do,
even when it’s at the mock-up stage like this. What has the initial response
from users been like? – Testing tags has
been really exciting. Feedback has been really positive. We’re finally bringing the
desktop functionality to mobile. We’re making the two platforms consistent. The flows are really intuitive,
and they just kind of look nice. – That seems like a
really good step forward. I’m looking forward to seeing what this
looks like and what it feels like as we get it into development and be able to get
actually working versions in the hands of the users. Thanks very much for all this work. – Of course. – I hope you’ve enjoyed this look at
what we’re trying to do to make tags a first-class citizen on the mobile
experience, and also make a more consistent and coherent experience across
all of the devices that Evernote runs on today. Thanks very much for
sharing the work with us. And I hope you join us next time
behind the scenes at Evernote.

Author:

Leave a Reply

Your email address will not be published. Required fields are marked *