[Music]
excellent well thank you so much for
presenting today I know you're going to
be talking a little bit about
autocomplete is that right that's right
yeah correct thanks for having me
excellent we'll let you get to it all
right perfect so hey everyone um glad to
be here so as Chuck said I'm Alex K I'm
I'm part of the business and
optimization team here at Al
um among other things uh I'm in charge
of our Center of expertise in terms of
ux helping customer unlock maximum
values through res search and Discovery
experiences uh previously uh with my
background in software engineering had
the opportunity to wear on multiple hats
here at algolia from solution engineer
solution architect in my early days to
more recently product manager for the
frontend experience team uh in charge of
products such as instant search and
autocomplete on we touched on but here
I'm here I'm glad to be here today to to
share with you my learnings uh over the
over the years on building great search
and Discovery experiences and more
especially autocomplete experiences so
autocomplete often referred as Auto
suggest search suggestions or type ahead
you name it right here at Alia we like
to call it as you have you heard
autocomplete so if you go to the website
just um use that name to find different
resources um always comes down
ultimately to the same pattern right you
have a search box you tap into it and it
pops up like uh suggestions uh
suggestions from which you can learn and
interact with either you on Google and
like me you've been searching for the
best place maybe to hit here in bordo
where I'm base so if you just uh come
around just drop me a line happy to grab
a coffee or on your or just shopping
right for winter um accessory or or
dress right and just like here on Amazon
or even like just to a s so different
type of applications and as you can see
we always come those always come with
different suggestions um and and this is
actually uh expected because um it has
become a web convention it's very very
convenient for users uh and uh numbers
show that over 75% of users according to
baymart Institute are actually looking
for those suggestions on vent why are
they looking for those because they
ultimately help decrease the interaction
cost and montal effort when interacting
with
search it's possible because it they
help users to learn how to spell
difficult terms for instance we're
searching for an artist name right I'm
not necessarily familiar how to spell it
but also helps getting inspiration like
in our example when I was searching for
a best place in Bordeaux right I don't
necessarily know exactly what exists but
I can lean on what the crowd has
searched before and ultimately with just
a few keystroke it helps me submit
complex search queries which really kind
of formulate in more detailed way my
search so as part of this talk today I'm
going to touch on uh and bring to you my
over my 10 years of experience in search
uh when it comes to building uh great um
search and Discovery experiences uh with
ux primarily focus on ux but also some
tips on how to build it uh at lower cost
with the algolia API and ecosystem
that's for the first part and on second
part I'm going to unveil to you that
actually auto complete can happen beyond
the search uh box um in many ways but I
don't want to spoil too much so let's
get into it right before I jump into the
best practices I just wanted to remind
oursel about a few key numbers um when
it comes to usage and more specifically
about mobile usage as we can see on the
top right here we observe that mobile
usage is already over 50% and that's for
many years it's a counter for over two
third of web traffic those days and it
goes ofen above this in certain cases
like in retail where we observe
frequently over 73% according to content
Square last um report and this is also
something we observe here at alola when
I make reviews for a customer I observe
some of them to actually get up to 90 85
90% of search traffic on mobile web
right and it matters because basically
we know that 88% of customer are less
likely to return to a site after a poor
experience it's actually even more more
the case for mobile users who are five
times more likely to abandon a task if
the website is not optimized for mobile
and as we all know mob come with its own
challenges right we have to deal with
the UI on smaller screens interact with
fingers where it's very proof to fat
finger effect and we're often like uh
facing connectivity issues distracting
environment as being on the move so
ultimately mobile users are likely to
get frustrated and I'm hoping to share
with you some good ux tips and best
practices so you can apply to really
deliver um a great experience including
on mobile so let's not wait for longer
and jump into pedfs and best practices
for autocomplete so the first one even
before you show autocomplete drop down
what you want to make sure is to
actually make the search predominant so
we have three examples on the left side
we see we have a small search icon on
the very top right on the second one we
have a big search box which takes a full
space but it's not necessarily super
visual uh it doesn't visually stand out
and on the right side here is our good
example where we have a full search box
and it's really visual stands out and
plus it gives us even hints about what I
can search for it such as products
Brands and even advices right this is
important because for instance on Ecom
Market insights gives us uh tells us
that over 60% of users they actually
start their session when being on the
own page with a search right and so
we've also uh observed at alola that
when user when customer actually
Implement a wide search box like this
they get up to 50% more uh usage on
desktop and 20% more on mobile when
that's the case and that's actually um
it it actually um
um it's actually meant to to here's
basically sorry I'm just so basically
it's uh it's expected in a sense because
like basically we have to when dealing
with mobile we we C with with our with
our FS right this is how we interact
with mobile and so by making the we see
that uh for right-handed people or like
left-handed like the top left top right
side are not the easiest to access with
the F right so so by making the search
predominant we actually lowering the
search box and we're also making it more
more space to tap so it's actually
expected that it helps users to better
engaged some Brands like unlo have
understood that very well and so they
actually iterated recently under design
as we can see the search box is not
anymore on the top right or anywhere in
the Eder it's at the bottom in this
green area right so that's great that
being said myself I don't have
performance Insight at the moment it's
still something we're exploring and it's
not yet a commonly used pattern um so I
think it's it's great to to Echo this
that being said it's also important to
um to make sure that when you do build
for a given platform even if you do
Drive most of your traffic on about like
un it's also important to optimize for
all platforms and here they did follow
the same pattern on desktop and they got
a lots of uh people discussing this and
detractors uh saying that it doesn't
necessarily make sense on desktop and it
would have better been better to keep it
in the header which I don't disagree
with so that was first thing the second
thing is you want to maximal the screen
real
estate um why because once you actually
get the keyboard up on mobile uh here
are two screenshots I took on Amazon the
left one is the website the right one is
the app and I took it on a regular phone
right not a Max or plus just a regular
one as we can see here the green area
represents the actually uh area that can
be used to display results once keyboard
is open and it's actually only 40%
remaining so this is something important
to keep in mind and this is one of my
chip for you today and I've been
applying and it saved my life many times
is whenever you test a website is either
it's yours or design in figma or
elsewhere make sure the keyboard is open
when it comes to the search autocomplete
because you will see often time it
actually happen but it the original
design doesn't fit with the keyboard
up so going back to the recommendation
you want to maximize the screen real
estate for instance here on the left we
see that we're not really leveraging the
full wave right so it happens we just
see two products
here on the second one we we do a
slightly better job but here what we're
missing is they miss on putting the
search input at the very top so we're
losing space and also we um the the
different suggestion are not fat finger
uh Pro they prone to fat finger issue
right so basically the the line is too
small so make sure that the line is at
least
40 pixel so as we can see on the right
so this way users can easily interact
and don't mistype on the wrong
item once you've done that you actually
want to make sure that your auto
complete contains query suggestions
right eally between six to eight uh if
you can include recent searches this is
something that comes as a plugin if you
use our library called autocomplete GS
you want to return result from the first
key stroke so the the interface feels
really responsive and reinforces the
impression of control from the user and
you want to provide contrasted
highlighting um eally on the part which
hasn't been matching so we call that
inverted highlighting so the user
attention is focused on what remains to
be read and not the opposite right again
keeping that um keeping the um modal
effort as low as possible and if you can
you want to optimize on the vertical
alignment
here so you see the quer is the quer
suggestion right underneath and we still
get to see products here so that's
important as well this way users know
that there is something beyond the
keyboard and they can just close the
keyboard and continue exploring the
product
results once you've done that you want
to the best implementation what they do
they unlock value not just during the
search result state but also during what
we call the empty query State what is
this state it's the one when you
actually click or you tap in the input
and you already get recommendation
both recommendation are great to either
Inspire firsttime users with popular
searches so it helps with the call start
it's also a good opportunity to help um
existing user to resume a search
displaying recent searches very commonly
users like they search for something
they navigate they lost their search
they want to get back to it and so on
it's also a good place to provide quick
access to additional functionalities
like for instance on II remember they
promote their image search or you want
to promote tailored navigation path like
here on that image I can quickly access
like maybe um the new collection or
quick access to the help
center so that how it look on on desktop
and on the right on mobile you can see
everything fits
um on
screen The Next Step once you've done
that uh again the best implementation
what they do is they bring more results
than just product results for instance
on e-commerce so that's what we name
feder search on that example on the left
we see we get suggestions we get many
ways of navigating the catalog such as
category Brands and we go res we get
results Beyond purely e-commerce like
for example FAQ entries and Evan
articles what I'd like to put emphasis
here uh on here is to make sure that
it's made in a way which is not
overwhelming for users it's good to
bring all results in a single place but
it's important to make sure that this is
that users can Digest that and so here's
example on the right I'm typing and
despite the type of results are changing
dynamically I'm still keeping six of
them or five of them here so these web
products are always displayed above the
keyboard right regardless of the mix of
suggestion displayed
above if you're interested in building
such kind of experiences we have a a
go-to guide in our documentation that
explains you all details uh how to build
it with a live demo and the source code
so I can only encourage you to go check
it out and this is for the ux
recommendation for uh autocomplete
there's many more um I hope uh you found
those interesting but if you're
interested in exploring those more we've
put them all together into a figma file
which is available on the figma
community either you snap the The Cure
code now or you will find the link in
the comments afterwards it's been a
great resource and so far the community
have loved it we've we've got already
over 8,000 people Don noting it so
um we keep improving it over
time so that's for the first part like
really how do you make autocomplete
stand out and the the main best
practices but as promised during the
introduction of this presentation um I
mention that autocomplete is everywhere
and potentially also beyond the search
box so how come actually without
realizing it we use it in many places
like on social platform right here
yesterday I was uh writing a tweet on X
and and I was and I just ma triggered
the suggestion by starting typing the
Hat key right on my keyboard and that
pops up a drop down very similar to the
autocomplete experience again this time
allowing me to search with just a few
keyr to users I want to mention on the
platform same on LinkedIn but LinkedIn
they also operate for hashtags so this
way you can e L refer to different
themes and creating links between those
different things um without like um
getting to the issue of everyone is
naming things
differently so that's the first um um
the first place where you can find
autocomplete like experiences beyond the
search box another one and that one has
been inspired by social media assume is
within SAS and productivity apps at the
beginning the same pattern was used like
on Atlas and Confluence to mention
people but what we've seen that over the
years and that has become more and more
uh um kind of a common feature those
days but on notion or Google doc we can
see that and I'm sure you've experienced
with that but not only we can reference
people within a given document but also
we can link Pages files calendar events
and so on so as we can see again same
pattern but we trigger it through a
specific key uh that we type when typing
the text and not engaging directly with
a search box but behind the scene from a
development standpoint it's exactly the
same thing the last one which again I
think has been also um inspired by this
idea of being able to navigate with the
keyboard like very efficiently and and
um following the the idea of like the
mention is the common pallet uh which
has been around for a years on on Mac OS
right with the Spotlight feature but
I've expanded over lots of different uh
tools
GitHub sales tools figma and that most
of the time you engage with uh doing a
um tapping on search with keyboard like
either common K or command slash uh on
PC I assume it's control and so this way
you can really navigate all search uh
autocomplete um results with the
keyboard and the promise is that that
you can go access content but you can
also go access different features uh
directly from your keyboard uh with just
a few
key again if you're interested in
exploring more of those patterns uh we
do have a guide uh we we'll provide the
link in description um I greatly
encourage you to to go check it out we
have live demos we have GES to help you
get started and all of those uh
implementation can be built with our um
open source Library called autocomplete
GS so can that be on an e-commerce
website on your blog or because you are
building a SASS and productivity app and
you want to actually add a mention
feature so so this one is is really
easing the work because once you get to
push your records to algolia then it's
very easy to just get them uh um into
your front end uh at with just minimal
amount of work so in a nutshell today
we've seen that it's important to build
for mobile and optimize for desktop and
not the other other way around anymore
you always want to provide six to eight
query suggestion in addition to the bank
results that works for Ecom but not only
you want to leverage Mt CR state power
as maximum to educate to unlock
additional feature to provide quick
access to things and you want to support
non-product searches uh when for
instance you are in a traditional
website which we commonly name Federated
search last you you to There's an
opportunity for you to enhance the user
experience beyond the search box either
it's a tag box a mention and a common
pet so if you're interested in exploring
more of those recommendation which just
scratch the surface of around ux best
practices and you happen to be an alola
customer or you just signed up recently
go check out the algolia academy pass
which is dedicated to uh ux best
practices it's made of 30 minutes of
video and it will help you understand
all the best practices
that we've Consolidated over
years that's it for me today I
appreciate uh your time and don't
hesitate to reach out on on bu if you do
have any
question awesome thank you so much Alex
for all of these tips um I'm a huge fan
of the command pallet or Omni bar or
whatever you call it uh experience um
most recent one I learned uh just
yesterday was Slash slack font and slack
let you update the font of the entire UI
right there from the command line so I
immediately went to a nice mono font
from jet
brains yeah I love it too and it's so
easy to implement with Alia so
absolutely it's it's almost like
building a command line for your web
application exactly um we did have one
question around autocomplete um Gustavo
was curious about how autocomplete
handles performance for like low-end
mobile phones and I guess low bandwidth
situations are there sort of pre-baked
uh capabilities within autocomplete for
handling those
situations um for the library itself um
I think it's something that um gustava
would need to check out I think I know
that our team is optimizing uh as much
as they can to really kind of get the
maximum speed uh with the maximum of a
feature it's breaking down into
different packages so maybe uh there's
no need for them to bring everything uh
at once so I think it's it's important
to test and But ultimately it's
optimized for Speed and and we do have
customer using
with react native or some other
Frameworks so so yeah right I would
encourage him to go check it out and I
think if you're using our clients it can
take advantage of our uh search Network
and all of that good stuff as well
correct yeah in the in the in the
clients itself like good point check
like we have all the r logic how do you
actually access algolia response at a
minimum latency while not having to
focus on the network connectivity
everything is taken care of on your
behalf through the API client and on top
the autocomplete library or instant
search depending on what your use ke is
awesome thanks again Alex appreciate all
of your tips take care