1
00:00:00,390 --> 00:00:11,200
[Music]

2
00:00:11,200 --> 00:00:12,880
excellent well thank you so much for

3
00:00:12,880 --> 00:00:14,000
presenting today I know you're going to

4
00:00:14,000 --> 00:00:15,040
be talking a little bit about

5
00:00:15,040 --> 00:00:17,240
autocomplete is that right that's right

6
00:00:17,240 --> 00:00:18,920
yeah correct thanks for having me

7
00:00:18,920 --> 00:00:21,119
excellent we'll let you get to it all

8
00:00:21,119 --> 00:00:24,119
right perfect so hey everyone um glad to

9
00:00:24,119 --> 00:00:27,439
be here so as Chuck said I'm Alex K I'm

10
00:00:27,439 --> 00:00:28,439
I'm part of the business and

11
00:00:28,439 --> 00:00:31,119
optimization team here at Al

12
00:00:31,119 --> 00:00:33,760
um among other things uh I'm in charge

13
00:00:33,760 --> 00:00:36,120
of our Center of expertise in terms of

14
00:00:36,120 --> 00:00:39,040
ux helping customer unlock maximum

15
00:00:39,040 --> 00:00:41,399
values through res search and Discovery

16
00:00:41,399 --> 00:00:44,360
experiences uh previously uh with my

17
00:00:44,360 --> 00:00:45,800
background in software engineering had

18
00:00:45,800 --> 00:00:48,520
the opportunity to wear on multiple hats

19
00:00:48,520 --> 00:00:51,039
here at algolia from solution engineer

20
00:00:51,039 --> 00:00:53,199
solution architect in my early days to

21
00:00:53,199 --> 00:00:55,320
more recently product manager for the

22
00:00:55,320 --> 00:00:57,680
frontend experience team uh in charge of

23
00:00:57,680 --> 00:00:59,039
products such as instant search and

24
00:00:59,039 --> 00:01:01,399
autocomplete on we touched on but here

25
00:01:01,399 --> 00:01:03,760
I'm here I'm glad to be here today to to

26
00:01:03,760 --> 00:01:07,240
share with you my learnings uh over the

27
00:01:07,240 --> 00:01:09,640
over the years on building great search

28
00:01:09,640 --> 00:01:11,159
and Discovery experiences and more

29
00:01:11,159 --> 00:01:14,360
especially autocomplete experiences so

30
00:01:14,360 --> 00:01:16,640
autocomplete often referred as Auto

31
00:01:16,640 --> 00:01:19,240
suggest search suggestions or type ahead

32
00:01:19,240 --> 00:01:21,240
you name it right here at Alia we like

33
00:01:21,240 --> 00:01:23,200
to call it as you have you heard

34
00:01:23,200 --> 00:01:25,000
autocomplete so if you go to the website

35
00:01:25,000 --> 00:01:28,439
just um use that name to find different

36
00:01:28,439 --> 00:01:30,680
resources um always comes down

37
00:01:30,680 --> 00:01:32,079
ultimately to the same pattern right you

38
00:01:32,079 --> 00:01:34,680
have a search box you tap into it and it

39
00:01:34,680 --> 00:01:37,159
pops up like uh suggestions uh

40
00:01:37,159 --> 00:01:39,079
suggestions from which you can learn and

41
00:01:39,079 --> 00:01:41,759
interact with either you on Google and

42
00:01:41,759 --> 00:01:43,240
like me you've been searching for the

43
00:01:43,240 --> 00:01:45,920
best place maybe to hit here in bordo

44
00:01:45,920 --> 00:01:48,000
where I'm base so if you just uh come

45
00:01:48,000 --> 00:01:49,640
around just drop me a line happy to grab

46
00:01:49,640 --> 00:01:52,880
a coffee or on your or just shopping

47
00:01:52,880 --> 00:01:56,520
right for winter um accessory or or

48
00:01:56,520 --> 00:01:58,840
dress right and just like here on Amazon

49
00:01:58,840 --> 00:02:01,159
or even like just to a s so different

50
00:02:01,159 --> 00:02:02,920
type of applications and as you can see

51
00:02:02,920 --> 00:02:05,240
we always come those always come with

52
00:02:05,240 --> 00:02:08,360
different suggestions um and and this is

53
00:02:08,360 --> 00:02:11,720
actually uh expected because um it has

54
00:02:11,720 --> 00:02:14,040
become a web convention it's very very

55
00:02:14,040 --> 00:02:17,239
convenient for users uh and uh numbers

56
00:02:17,239 --> 00:02:20,040
show that over 75% of users according to

57
00:02:20,040 --> 00:02:22,280
baymart Institute are actually looking

58
00:02:22,280 --> 00:02:24,840
for those suggestions on vent why are

59
00:02:24,840 --> 00:02:26,680
they looking for those because they

60
00:02:26,680 --> 00:02:28,519
ultimately help decrease the interaction

61
00:02:28,519 --> 00:02:30,879
cost and montal effort when interacting

62
00:02:30,879 --> 00:02:31,680
with

63
00:02:31,680 --> 00:02:34,720
search it's possible because it they

64
00:02:34,720 --> 00:02:36,920
help users to learn how to spell

65
00:02:36,920 --> 00:02:38,800
difficult terms for instance we're

66
00:02:38,800 --> 00:02:40,879
searching for an artist name right I'm

67
00:02:40,879 --> 00:02:43,480
not necessarily familiar how to spell it

68
00:02:43,480 --> 00:02:45,480
but also helps getting inspiration like

69
00:02:45,480 --> 00:02:47,760
in our example when I was searching for

70
00:02:47,760 --> 00:02:49,959
a best place in Bordeaux right I don't

71
00:02:49,959 --> 00:02:51,879
necessarily know exactly what exists but

72
00:02:51,879 --> 00:02:53,680
I can lean on what the crowd has

73
00:02:53,680 --> 00:02:55,879
searched before and ultimately with just

74
00:02:55,879 --> 00:02:57,640
a few keystroke it helps me submit

75
00:02:57,640 --> 00:02:59,680
complex search queries which really kind

76
00:02:59,680 --> 00:03:03,799
of formulate in more detailed way my

77
00:03:03,799 --> 00:03:06,560
search so as part of this talk today I'm

78
00:03:06,560 --> 00:03:08,959
going to touch on uh and bring to you my

79
00:03:08,959 --> 00:03:11,440
over my 10 years of experience in search

80
00:03:11,440 --> 00:03:14,840
uh when it comes to building uh great um

81
00:03:14,840 --> 00:03:17,360
search and Discovery experiences uh with

82
00:03:17,360 --> 00:03:20,159
ux primarily focus on ux but also some

83
00:03:20,159 --> 00:03:23,440
tips on how to build it uh at lower cost

84
00:03:23,440 --> 00:03:26,799
with the algolia API and ecosystem

85
00:03:26,799 --> 00:03:28,400
that's for the first part and on second

86
00:03:28,400 --> 00:03:30,200
part I'm going to unveil to you that

87
00:03:30,200 --> 00:03:32,720
actually auto complete can happen beyond

88
00:03:32,720 --> 00:03:35,879
the search uh box um in many ways but I

89
00:03:35,879 --> 00:03:37,760
don't want to spoil too much so let's

90
00:03:37,760 --> 00:03:39,879
get into it right before I jump into the

91
00:03:39,879 --> 00:03:42,280
best practices I just wanted to remind

92
00:03:42,280 --> 00:03:45,159
oursel about a few key numbers um when

93
00:03:45,159 --> 00:03:47,439
it comes to usage and more specifically

94
00:03:47,439 --> 00:03:49,519
about mobile usage as we can see on the

95
00:03:49,519 --> 00:03:51,760
top right here we observe that mobile

96
00:03:51,760 --> 00:03:54,400
usage is already over 50% and that's for

97
00:03:54,400 --> 00:03:57,200
many years it's a counter for over two

98
00:03:57,200 --> 00:03:59,799
third of web traffic those days and it

99
00:03:59,799 --> 00:04:02,720
goes ofen above this in certain cases

100
00:04:02,720 --> 00:04:04,319
like in retail where we observe

101
00:04:04,319 --> 00:04:07,439
frequently over 73% according to content

102
00:04:07,439 --> 00:04:10,760
Square last um report and this is also

103
00:04:10,760 --> 00:04:12,519
something we observe here at alola when

104
00:04:12,519 --> 00:04:14,799
I make reviews for a customer I observe

105
00:04:14,799 --> 00:04:17,959
some of them to actually get up to 90 85

106
00:04:17,959 --> 00:04:20,440
90% of search traffic on mobile web

107
00:04:20,440 --> 00:04:22,479
right and it matters because basically

108
00:04:22,479 --> 00:04:25,360
we know that 88% of customer are less

109
00:04:25,360 --> 00:04:27,320
likely to return to a site after a poor

110
00:04:27,320 --> 00:04:29,919
experience it's actually even more more

111
00:04:29,919 --> 00:04:31,800
the case for mobile users who are five

112
00:04:31,800 --> 00:04:34,039
times more likely to abandon a task if

113
00:04:34,039 --> 00:04:36,280
the website is not optimized for mobile

114
00:04:36,280 --> 00:04:39,199
and as we all know mob come with its own

115
00:04:39,199 --> 00:04:41,680
challenges right we have to deal with

116
00:04:41,680 --> 00:04:44,000
the UI on smaller screens interact with

117
00:04:44,000 --> 00:04:46,160
fingers where it's very proof to fat

118
00:04:46,160 --> 00:04:49,120
finger effect and we're often like uh

119
00:04:49,120 --> 00:04:51,320
facing connectivity issues distracting

120
00:04:51,320 --> 00:04:53,560
environment as being on the move so

121
00:04:53,560 --> 00:04:55,919
ultimately mobile users are likely to

122
00:04:55,919 --> 00:04:57,600
get frustrated and I'm hoping to share

123
00:04:57,600 --> 00:04:59,880
with you some good ux tips and best

124
00:04:59,880 --> 00:05:02,240
practices so you can apply to really

125
00:05:02,240 --> 00:05:05,320
deliver um a great experience including

126
00:05:05,320 --> 00:05:09,000
on mobile so let's not wait for longer

127
00:05:09,000 --> 00:05:11,560
and jump into pedfs and best practices

128
00:05:11,560 --> 00:05:14,520
for autocomplete so the first one even

129
00:05:14,520 --> 00:05:16,280
before you show autocomplete drop down

130
00:05:16,280 --> 00:05:17,680
what you want to make sure is to

131
00:05:17,680 --> 00:05:20,360
actually make the search predominant so

132
00:05:20,360 --> 00:05:22,400
we have three examples on the left side

133
00:05:22,400 --> 00:05:24,120
we see we have a small search icon on

134
00:05:24,120 --> 00:05:26,160
the very top right on the second one we

135
00:05:26,160 --> 00:05:28,280
have a big search box which takes a full

136
00:05:28,280 --> 00:05:29,919
space but it's not necessarily super

137
00:05:29,919 --> 00:05:32,400
visual uh it doesn't visually stand out

138
00:05:32,400 --> 00:05:33,919
and on the right side here is our good

139
00:05:33,919 --> 00:05:36,560
example where we have a full search box

140
00:05:36,560 --> 00:05:38,280
and it's really visual stands out and

141
00:05:38,280 --> 00:05:40,120
plus it gives us even hints about what I

142
00:05:40,120 --> 00:05:41,759
can search for it such as products

143
00:05:41,759 --> 00:05:44,520
Brands and even advices right this is

144
00:05:44,520 --> 00:05:47,120
important because for instance on Ecom

145
00:05:47,120 --> 00:05:49,400
Market insights gives us uh tells us

146
00:05:49,400 --> 00:05:52,039
that over 60% of users they actually

147
00:05:52,039 --> 00:05:53,440
start their session when being on the

148
00:05:53,440 --> 00:05:55,800
own page with a search right and so

149
00:05:55,800 --> 00:05:58,360
we've also uh observed at alola that

150
00:05:58,360 --> 00:06:00,840
when user when customer actually

151
00:06:00,840 --> 00:06:03,639
Implement a wide search box like this

152
00:06:03,639 --> 00:06:07,280
they get up to 50% more uh usage on

153
00:06:07,280 --> 00:06:09,840
desktop and 20% more on mobile when

154
00:06:09,840 --> 00:06:13,360
that's the case and that's actually um

155
00:06:13,360 --> 00:06:16,919
it it actually um

156
00:06:16,919 --> 00:06:21,560
um it's actually meant to to here's

157
00:06:21,560 --> 00:06:24,520
basically sorry I'm just so basically

158
00:06:24,520 --> 00:06:26,599
it's uh it's expected in a sense because

159
00:06:26,599 --> 00:06:28,479
like basically we have to when dealing

160
00:06:28,479 --> 00:06:30,800
with mobile we we C with with our with

161
00:06:30,800 --> 00:06:32,400
our FS right this is how we interact

162
00:06:32,400 --> 00:06:35,080
with mobile and so by making the we see

163
00:06:35,080 --> 00:06:38,160
that uh for right-handed people or like

164
00:06:38,160 --> 00:06:40,440
left-handed like the top left top right

165
00:06:40,440 --> 00:06:42,400
side are not the easiest to access with

166
00:06:42,400 --> 00:06:44,759
the F right so so by making the search

167
00:06:44,759 --> 00:06:46,680
predominant we actually lowering the

168
00:06:46,680 --> 00:06:49,080
search box and we're also making it more

169
00:06:49,080 --> 00:06:51,560
more space to tap so it's actually

170
00:06:51,560 --> 00:06:53,800
expected that it helps users to better

171
00:06:53,800 --> 00:06:56,199
engaged some Brands like unlo have

172
00:06:56,199 --> 00:06:57,759
understood that very well and so they

173
00:06:57,759 --> 00:07:00,080
actually iterated recently under design

174
00:07:00,080 --> 00:07:01,599
as we can see the search box is not

175
00:07:01,599 --> 00:07:04,000
anymore on the top right or anywhere in

176
00:07:04,000 --> 00:07:06,240
the Eder it's at the bottom in this

177
00:07:06,240 --> 00:07:08,840
green area right so that's great that

178
00:07:08,840 --> 00:07:10,800
being said myself I don't have

179
00:07:10,800 --> 00:07:12,440
performance Insight at the moment it's

180
00:07:12,440 --> 00:07:15,280
still something we're exploring and it's

181
00:07:15,280 --> 00:07:18,199
not yet a commonly used pattern um so I

182
00:07:18,199 --> 00:07:21,080
think it's it's great to to Echo this

183
00:07:21,080 --> 00:07:23,440
that being said it's also important to

184
00:07:23,440 --> 00:07:25,520
um to make sure that when you do build

185
00:07:25,520 --> 00:07:27,840
for a given platform even if you do

186
00:07:27,840 --> 00:07:29,919
Drive most of your traffic on about like

187
00:07:29,919 --> 00:07:32,560
un it's also important to optimize for

188
00:07:32,560 --> 00:07:34,599
all platforms and here they did follow

189
00:07:34,599 --> 00:07:36,280
the same pattern on desktop and they got

190
00:07:36,280 --> 00:07:39,520
a lots of uh people discussing this and

191
00:07:39,520 --> 00:07:41,479
detractors uh saying that it doesn't

192
00:07:41,479 --> 00:07:43,440
necessarily make sense on desktop and it

193
00:07:43,440 --> 00:07:45,199
would have better been better to keep it

194
00:07:45,199 --> 00:07:47,919
in the header which I don't disagree

195
00:07:47,919 --> 00:07:51,120
with so that was first thing the second

196
00:07:51,120 --> 00:07:52,840
thing is you want to maximal the screen

197
00:07:52,840 --> 00:07:54,080
real

198
00:07:54,080 --> 00:07:58,560
estate um why because once you actually

199
00:07:58,560 --> 00:08:01,319
get the keyboard up on mobile uh here

200
00:08:01,319 --> 00:08:03,479
are two screenshots I took on Amazon the

201
00:08:03,479 --> 00:08:06,120
left one is the website the right one is

202
00:08:06,120 --> 00:08:08,039
the app and I took it on a regular phone

203
00:08:08,039 --> 00:08:10,680
right not a Max or plus just a regular

204
00:08:10,680 --> 00:08:13,400
one as we can see here the green area

205
00:08:13,400 --> 00:08:16,120
represents the actually uh area that can

206
00:08:16,120 --> 00:08:18,520
be used to display results once keyboard

207
00:08:18,520 --> 00:08:22,000
is open and it's actually only 40%

208
00:08:22,000 --> 00:08:25,240
remaining so this is something important

209
00:08:25,240 --> 00:08:26,960
to keep in mind and this is one of my

210
00:08:26,960 --> 00:08:28,960
chip for you today and I've been

211
00:08:28,960 --> 00:08:31,440
applying and it saved my life many times

212
00:08:31,440 --> 00:08:34,120
is whenever you test a website is either

213
00:08:34,120 --> 00:08:36,120
it's yours or design in figma or

214
00:08:36,120 --> 00:08:38,679
elsewhere make sure the keyboard is open

215
00:08:38,679 --> 00:08:40,599
when it comes to the search autocomplete

216
00:08:40,599 --> 00:08:43,519
because you will see often time it

217
00:08:43,519 --> 00:08:45,560
actually happen but it the original

218
00:08:45,560 --> 00:08:48,120
design doesn't fit with the keyboard

219
00:08:48,120 --> 00:08:50,839
up so going back to the recommendation

220
00:08:50,839 --> 00:08:52,320
you want to maximize the screen real

221
00:08:52,320 --> 00:08:54,279
estate for instance here on the left we

222
00:08:54,279 --> 00:08:56,959
see that we're not really leveraging the

223
00:08:56,959 --> 00:08:58,640
full wave right so it happens we just

224
00:08:58,640 --> 00:09:00,399
see two products

225
00:09:00,399 --> 00:09:02,160
here on the second one we we do a

226
00:09:02,160 --> 00:09:04,200
slightly better job but here what we're

227
00:09:04,200 --> 00:09:07,200
missing is they miss on putting the

228
00:09:07,200 --> 00:09:09,279
search input at the very top so we're

229
00:09:09,279 --> 00:09:14,320
losing space and also we um the the

230
00:09:14,320 --> 00:09:17,200
different suggestion are not fat finger

231
00:09:17,200 --> 00:09:19,680
uh Pro they prone to fat finger issue

232
00:09:19,680 --> 00:09:22,200
right so basically the the line is too

233
00:09:22,200 --> 00:09:24,160
small so make sure that the line is at

234
00:09:24,160 --> 00:09:25,440
least

235
00:09:25,440 --> 00:09:28,920
40 pixel so as we can see on the right

236
00:09:28,920 --> 00:09:31,560
so this way users can easily interact

237
00:09:31,560 --> 00:09:34,160
and don't mistype on the wrong

238
00:09:34,160 --> 00:09:36,880
item once you've done that you actually

239
00:09:36,880 --> 00:09:38,240
want to make sure that your auto

240
00:09:38,240 --> 00:09:40,440
complete contains query suggestions

241
00:09:40,440 --> 00:09:44,360
right eally between six to eight uh if

242
00:09:44,360 --> 00:09:47,279
you can include recent searches this is

243
00:09:47,279 --> 00:09:48,839
something that comes as a plugin if you

244
00:09:48,839 --> 00:09:51,480
use our library called autocomplete GS

245
00:09:51,480 --> 00:09:53,120
you want to return result from the first

246
00:09:53,120 --> 00:09:55,560
key stroke so the the interface feels

247
00:09:55,560 --> 00:09:58,040
really responsive and reinforces the

248
00:09:58,040 --> 00:10:00,560
impression of control from the user and

249
00:10:00,560 --> 00:10:02,200
you want to provide contrasted

250
00:10:02,200 --> 00:10:05,120
highlighting um eally on the part which

251
00:10:05,120 --> 00:10:06,760
hasn't been matching so we call that

252
00:10:06,760 --> 00:10:09,120
inverted highlighting so the user

253
00:10:09,120 --> 00:10:12,000
attention is focused on what remains to

254
00:10:12,000 --> 00:10:14,880
be read and not the opposite right again

255
00:10:14,880 --> 00:10:19,959
keeping that um keeping the um modal

256
00:10:19,959 --> 00:10:22,760
effort as low as possible and if you can

257
00:10:22,760 --> 00:10:24,600
you want to optimize on the vertical

258
00:10:24,600 --> 00:10:27,240
alignment

259
00:10:27,240 --> 00:10:30,160
here so you see the quer is the quer

260
00:10:30,160 --> 00:10:32,120
suggestion right underneath and we still

261
00:10:32,120 --> 00:10:33,959
get to see products here so that's

262
00:10:33,959 --> 00:10:35,959
important as well this way users know

263
00:10:35,959 --> 00:10:37,560
that there is something beyond the

264
00:10:37,560 --> 00:10:39,079
keyboard and they can just close the

265
00:10:39,079 --> 00:10:40,560
keyboard and continue exploring the

266
00:10:40,560 --> 00:10:41,680
product

267
00:10:41,680 --> 00:10:44,279
results once you've done that you want

268
00:10:44,279 --> 00:10:46,440
to the best implementation what they do

269
00:10:46,440 --> 00:10:48,720
they unlock value not just during the

270
00:10:48,720 --> 00:10:51,000
search result state but also during what

271
00:10:51,000 --> 00:10:53,120
we call the empty query State what is

272
00:10:53,120 --> 00:10:54,839
this state it's the one when you

273
00:10:54,839 --> 00:10:57,519
actually click or you tap in the input

274
00:10:57,519 --> 00:11:00,480
and you already get recommendation

275
00:11:00,480 --> 00:11:02,519
both recommendation are great to either

276
00:11:02,519 --> 00:11:04,399
Inspire firsttime users with popular

277
00:11:04,399 --> 00:11:06,639
searches so it helps with the call start

278
00:11:06,639 --> 00:11:10,360
it's also a good opportunity to help um

279
00:11:10,360 --> 00:11:12,279
existing user to resume a search

280
00:11:12,279 --> 00:11:14,720
displaying recent searches very commonly

281
00:11:14,720 --> 00:11:16,800
users like they search for something

282
00:11:16,800 --> 00:11:18,880
they navigate they lost their search

283
00:11:18,880 --> 00:11:20,800
they want to get back to it and so on

284
00:11:20,800 --> 00:11:22,880
it's also a good place to provide quick

285
00:11:22,880 --> 00:11:24,600
access to additional functionalities

286
00:11:24,600 --> 00:11:26,519
like for instance on II remember they

287
00:11:26,519 --> 00:11:29,440
promote their image search or you want

288
00:11:29,440 --> 00:11:31,279
to promote tailored navigation path like

289
00:11:31,279 --> 00:11:33,519
here on that image I can quickly access

290
00:11:33,519 --> 00:11:36,440
like maybe um the new collection or

291
00:11:36,440 --> 00:11:38,320
quick access to the help

292
00:11:38,320 --> 00:11:41,279
center so that how it look on on desktop

293
00:11:41,279 --> 00:11:42,920
and on the right on mobile you can see

294
00:11:42,920 --> 00:11:45,399
everything fits

295
00:11:45,399 --> 00:11:47,720
um on

296
00:11:47,720 --> 00:11:50,360
screen The Next Step once you've done

297
00:11:50,360 --> 00:11:52,279
that uh again the best implementation

298
00:11:52,279 --> 00:11:54,360
what they do is they bring more results

299
00:11:54,360 --> 00:11:56,320
than just product results for instance

300
00:11:56,320 --> 00:11:58,760
on e-commerce so that's what we name

301
00:11:58,760 --> 00:12:01,399
feder search on that example on the left

302
00:12:01,399 --> 00:12:04,000
we see we get suggestions we get many

303
00:12:04,000 --> 00:12:06,200
ways of navigating the catalog such as

304
00:12:06,200 --> 00:12:09,120
category Brands and we go res we get

305
00:12:09,120 --> 00:12:11,320
results Beyond purely e-commerce like

306
00:12:11,320 --> 00:12:14,240
for example FAQ entries and Evan

307
00:12:14,240 --> 00:12:16,639
articles what I'd like to put emphasis

308
00:12:16,639 --> 00:12:20,079
here uh on here is to make sure that

309
00:12:20,079 --> 00:12:21,639
it's made in a way which is not

310
00:12:21,639 --> 00:12:23,560
overwhelming for users it's good to

311
00:12:23,560 --> 00:12:25,880
bring all results in a single place but

312
00:12:25,880 --> 00:12:28,120
it's important to make sure that this is

313
00:12:28,120 --> 00:12:30,399
that users can Digest that and so here's

314
00:12:30,399 --> 00:12:32,680
example on the right I'm typing and

315
00:12:32,680 --> 00:12:34,399
despite the type of results are changing

316
00:12:34,399 --> 00:12:38,079
dynamically I'm still keeping six of

317
00:12:38,079 --> 00:12:40,279
them or five of them here so these web

318
00:12:40,279 --> 00:12:42,480
products are always displayed above the

319
00:12:42,480 --> 00:12:44,160
keyboard right regardless of the mix of

320
00:12:44,160 --> 00:12:45,880
suggestion displayed

321
00:12:45,880 --> 00:12:48,000
above if you're interested in building

322
00:12:48,000 --> 00:12:49,880
such kind of experiences we have a a

323
00:12:49,880 --> 00:12:52,600
go-to guide in our documentation that

324
00:12:52,600 --> 00:12:54,839
explains you all details uh how to build

325
00:12:54,839 --> 00:12:57,240
it with a live demo and the source code

326
00:12:57,240 --> 00:12:59,360
so I can only encourage you to go check

327
00:12:59,360 --> 00:13:03,240
it out and this is for the ux

328
00:13:03,240 --> 00:13:05,880
recommendation for uh autocomplete

329
00:13:05,880 --> 00:13:09,240
there's many more um I hope uh you found

330
00:13:09,240 --> 00:13:10,519
those interesting but if you're

331
00:13:10,519 --> 00:13:12,920
interested in exploring those more we've

332
00:13:12,920 --> 00:13:15,440
put them all together into a figma file

333
00:13:15,440 --> 00:13:16,880
which is available on the figma

334
00:13:16,880 --> 00:13:19,199
community either you snap the The Cure

335
00:13:19,199 --> 00:13:20,959
code now or you will find the link in

336
00:13:20,959 --> 00:13:23,360
the comments afterwards it's been a

337
00:13:23,360 --> 00:13:25,240
great resource and so far the community

338
00:13:25,240 --> 00:13:27,000
have loved it we've we've got already

339
00:13:27,000 --> 00:13:29,920
over 8,000 people Don noting it so

340
00:13:29,920 --> 00:13:32,720
um we keep improving it over

341
00:13:32,720 --> 00:13:35,440
time so that's for the first part like

342
00:13:35,440 --> 00:13:38,120
really how do you make autocomplete

343
00:13:38,120 --> 00:13:39,600
stand out and the the main best

344
00:13:39,600 --> 00:13:41,720
practices but as promised during the

345
00:13:41,720 --> 00:13:44,880
introduction of this presentation um I

346
00:13:44,880 --> 00:13:47,279
mention that autocomplete is everywhere

347
00:13:47,279 --> 00:13:49,680
and potentially also beyond the search

348
00:13:49,680 --> 00:13:53,959
box so how come actually without

349
00:13:53,959 --> 00:13:56,920
realizing it we use it in many places

350
00:13:56,920 --> 00:13:59,600
like on social platform right here

351
00:13:59,600 --> 00:14:03,639
yesterday I was uh writing a tweet on X

352
00:14:03,639 --> 00:14:06,720
and and I was and I just ma triggered

353
00:14:06,720 --> 00:14:09,759
the suggestion by starting typing the

354
00:14:09,759 --> 00:14:12,160
Hat key right on my keyboard and that

355
00:14:12,160 --> 00:14:14,639
pops up a drop down very similar to the

356
00:14:14,639 --> 00:14:17,000
autocomplete experience again this time

357
00:14:17,000 --> 00:14:19,320
allowing me to search with just a few

358
00:14:19,320 --> 00:14:22,959
keyr to users I want to mention on the

359
00:14:22,959 --> 00:14:25,720
platform same on LinkedIn but LinkedIn

360
00:14:25,720 --> 00:14:28,480
they also operate for hashtags so this

361
00:14:28,480 --> 00:14:30,560
way you can e L refer to different

362
00:14:30,560 --> 00:14:33,399
themes and creating links between those

363
00:14:33,399 --> 00:14:37,199
different things um without like um

364
00:14:37,199 --> 00:14:39,120
getting to the issue of everyone is

365
00:14:39,120 --> 00:14:40,440
naming things

366
00:14:40,440 --> 00:14:44,279
differently so that's the first um um

367
00:14:44,279 --> 00:14:46,199
the first place where you can find

368
00:14:46,199 --> 00:14:48,560
autocomplete like experiences beyond the

369
00:14:48,560 --> 00:14:51,279
search box another one and that one has

370
00:14:51,279 --> 00:14:54,560
been inspired by social media assume is

371
00:14:54,560 --> 00:14:57,320
within SAS and productivity apps at the

372
00:14:57,320 --> 00:14:59,360
beginning the same pattern was used like

373
00:14:59,360 --> 00:15:01,440
on Atlas and Confluence to mention

374
00:15:01,440 --> 00:15:03,680
people but what we've seen that over the

375
00:15:03,680 --> 00:15:06,199
years and that has become more and more

376
00:15:06,199 --> 00:15:08,360
uh um kind of a common feature those

377
00:15:08,360 --> 00:15:11,240
days but on notion or Google doc we can

378
00:15:11,240 --> 00:15:12,920
see that and I'm sure you've experienced

379
00:15:12,920 --> 00:15:15,120
with that but not only we can reference

380
00:15:15,120 --> 00:15:17,440
people within a given document but also

381
00:15:17,440 --> 00:15:21,040
we can link Pages files calendar events

382
00:15:21,040 --> 00:15:24,680
and so on so as we can see again same

383
00:15:24,680 --> 00:15:27,560
pattern but we trigger it through a

384
00:15:27,560 --> 00:15:30,160
specific key uh that we type when typing

385
00:15:30,160 --> 00:15:32,440
the text and not engaging directly with

386
00:15:32,440 --> 00:15:35,560
a search box but behind the scene from a

387
00:15:35,560 --> 00:15:37,319
development standpoint it's exactly the

388
00:15:37,319 --> 00:15:41,160
same thing the last one which again I

389
00:15:41,160 --> 00:15:44,360
think has been also um inspired by this

390
00:15:44,360 --> 00:15:46,440
idea of being able to navigate with the

391
00:15:46,440 --> 00:15:49,639
keyboard like very efficiently and and

392
00:15:49,639 --> 00:15:52,160
um following the the idea of like the

393
00:15:52,160 --> 00:15:55,079
mention is the common pallet uh which

394
00:15:55,079 --> 00:15:58,360
has been around for a years on on Mac OS

395
00:15:58,360 --> 00:16:00,120
right with the Spotlight feature but

396
00:16:00,120 --> 00:16:03,680
I've expanded over lots of different uh

397
00:16:03,680 --> 00:16:05,519
tools

398
00:16:05,519 --> 00:16:09,120
GitHub sales tools figma and that most

399
00:16:09,120 --> 00:16:12,800
of the time you engage with uh doing a

400
00:16:12,800 --> 00:16:15,759
um tapping on search with keyboard like

401
00:16:15,759 --> 00:16:18,880
either common K or command slash uh on

402
00:16:18,880 --> 00:16:21,680
PC I assume it's control and so this way

403
00:16:21,680 --> 00:16:25,480
you can really navigate all search uh

404
00:16:25,480 --> 00:16:27,680
autocomplete um results with the

405
00:16:27,680 --> 00:16:29,120
keyboard and the promise is that that

406
00:16:29,120 --> 00:16:32,120
you can go access content but you can

407
00:16:32,120 --> 00:16:35,120
also go access different features uh

408
00:16:35,120 --> 00:16:37,680
directly from your keyboard uh with just

409
00:16:37,680 --> 00:16:39,519
a few

410
00:16:39,519 --> 00:16:41,680
key again if you're interested in

411
00:16:41,680 --> 00:16:43,639
exploring more of those patterns uh we

412
00:16:43,639 --> 00:16:46,040
do have a guide uh we we'll provide the

413
00:16:46,040 --> 00:16:49,160
link in description um I greatly

414
00:16:49,160 --> 00:16:51,199
encourage you to to go check it out we

415
00:16:51,199 --> 00:16:53,839
have live demos we have GES to help you

416
00:16:53,839 --> 00:16:56,600
get started and all of those uh

417
00:16:56,600 --> 00:16:59,639
implementation can be built with our um

418
00:16:59,639 --> 00:17:01,319
open source Library called autocomplete

419
00:17:01,319 --> 00:17:04,240
GS so can that be on an e-commerce

420
00:17:04,240 --> 00:17:06,679
website on your blog or because you are

421
00:17:06,679 --> 00:17:08,640
building a SASS and productivity app and

422
00:17:08,640 --> 00:17:09,959
you want to actually add a mention

423
00:17:09,959 --> 00:17:12,679
feature so so this one is is really

424
00:17:12,679 --> 00:17:14,640
easing the work because once you get to

425
00:17:14,640 --> 00:17:16,199
push your records to algolia then it's

426
00:17:16,199 --> 00:17:20,319
very easy to just get them uh um into

427
00:17:20,319 --> 00:17:22,880
your front end uh at with just minimal

428
00:17:22,880 --> 00:17:26,119
amount of work so in a nutshell today

429
00:17:26,119 --> 00:17:28,079
we've seen that it's important to build

430
00:17:28,079 --> 00:17:30,160
for mobile and optimize for desktop and

431
00:17:30,160 --> 00:17:32,840
not the other other way around anymore

432
00:17:32,840 --> 00:17:34,640
you always want to provide six to eight

433
00:17:34,640 --> 00:17:36,559
query suggestion in addition to the bank

434
00:17:36,559 --> 00:17:39,720
results that works for Ecom but not only

435
00:17:39,720 --> 00:17:43,520
you want to leverage Mt CR state power

436
00:17:43,520 --> 00:17:46,160
as maximum to educate to unlock

437
00:17:46,160 --> 00:17:47,720
additional feature to provide quick

438
00:17:47,720 --> 00:17:49,880
access to things and you want to support

439
00:17:49,880 --> 00:17:51,799
non-product searches uh when for

440
00:17:51,799 --> 00:17:53,200
instance you are in a traditional

441
00:17:53,200 --> 00:17:56,360
website which we commonly name Federated

442
00:17:56,360 --> 00:17:59,880
search last you you to There's an

443
00:17:59,880 --> 00:18:01,720
opportunity for you to enhance the user

444
00:18:01,720 --> 00:18:03,919
experience beyond the search box either

445
00:18:03,919 --> 00:18:06,840
it's a tag box a mention and a common

446
00:18:06,840 --> 00:18:09,799
pet so if you're interested in exploring

447
00:18:09,799 --> 00:18:11,600
more of those recommendation which just

448
00:18:11,600 --> 00:18:13,440
scratch the surface of around ux best

449
00:18:13,440 --> 00:18:15,520
practices and you happen to be an alola

450
00:18:15,520 --> 00:18:18,159
customer or you just signed up recently

451
00:18:18,159 --> 00:18:20,600
go check out the algolia academy pass

452
00:18:20,600 --> 00:18:22,799
which is dedicated to uh ux best

453
00:18:22,799 --> 00:18:25,159
practices it's made of 30 minutes of

454
00:18:25,159 --> 00:18:27,799
video and it will help you understand

455
00:18:27,799 --> 00:18:29,280
all the best practices

456
00:18:29,280 --> 00:18:31,440
that we've Consolidated over

457
00:18:31,440 --> 00:18:34,000
years that's it for me today I

458
00:18:34,000 --> 00:18:36,240
appreciate uh your time and don't

459
00:18:36,240 --> 00:18:38,679
hesitate to reach out on on bu if you do

460
00:18:38,679 --> 00:18:40,240
have any

461
00:18:40,240 --> 00:18:43,280
question awesome thank you so much Alex

462
00:18:43,280 --> 00:18:46,120
for all of these tips um I'm a huge fan

463
00:18:46,120 --> 00:18:48,240
of the command pallet or Omni bar or

464
00:18:48,240 --> 00:18:51,080
whatever you call it uh experience um

465
00:18:51,080 --> 00:18:53,360
most recent one I learned uh just

466
00:18:53,360 --> 00:18:56,919
yesterday was Slash slack font and slack

467
00:18:56,919 --> 00:19:00,159
let you update the font of the entire UI

468
00:19:00,159 --> 00:19:02,240
right there from the command line so I

469
00:19:02,240 --> 00:19:04,320
immediately went to a nice mono font

470
00:19:04,320 --> 00:19:05,200
from jet

471
00:19:05,200 --> 00:19:07,679
brains yeah I love it too and it's so

472
00:19:07,679 --> 00:19:09,919
easy to implement with Alia so

473
00:19:09,919 --> 00:19:11,159
absolutely it's it's almost like

474
00:19:11,159 --> 00:19:12,679
building a command line for your web

475
00:19:12,679 --> 00:19:15,919
application exactly um we did have one

476
00:19:15,919 --> 00:19:19,200
question around autocomplete um Gustavo

477
00:19:19,200 --> 00:19:21,480
was curious about how autocomplete

478
00:19:21,480 --> 00:19:23,320
handles performance for like low-end

479
00:19:23,320 --> 00:19:25,400
mobile phones and I guess low bandwidth

480
00:19:25,400 --> 00:19:28,000
situations are there sort of pre-baked

481
00:19:28,000 --> 00:19:29,760
uh capabilities within autocomplete for

482
00:19:29,760 --> 00:19:31,280
handling those

483
00:19:31,280 --> 00:19:34,480
situations um for the library itself um

484
00:19:34,480 --> 00:19:37,200
I think it's something that um gustava

485
00:19:37,200 --> 00:19:38,559
would need to check out I think I know

486
00:19:38,559 --> 00:19:40,919
that our team is optimizing uh as much

487
00:19:40,919 --> 00:19:43,159
as they can to really kind of get the

488
00:19:43,159 --> 00:19:45,559
maximum speed uh with the maximum of a

489
00:19:45,559 --> 00:19:47,600
feature it's breaking down into

490
00:19:47,600 --> 00:19:49,480
different packages so maybe uh there's

491
00:19:49,480 --> 00:19:52,280
no need for them to bring everything uh

492
00:19:52,280 --> 00:19:54,520
at once so I think it's it's important

493
00:19:54,520 --> 00:19:56,080
to test and But ultimately it's

494
00:19:56,080 --> 00:19:57,919
optimized for Speed and and we do have

495
00:19:57,919 --> 00:19:59,159
customer using

496
00:19:59,159 --> 00:20:01,600
with react native or some other

497
00:20:01,600 --> 00:20:04,440
Frameworks so so yeah right I would

498
00:20:04,440 --> 00:20:06,520
encourage him to go check it out and I

499
00:20:06,520 --> 00:20:08,240
think if you're using our clients it can

500
00:20:08,240 --> 00:20:11,080
take advantage of our uh search Network

501
00:20:11,080 --> 00:20:12,440
and all of that good stuff as well

502
00:20:12,440 --> 00:20:13,960
correct yeah in the in the in the

503
00:20:13,960 --> 00:20:16,080
clients itself like good point check

504
00:20:16,080 --> 00:20:18,400
like we have all the r logic how do you

505
00:20:18,400 --> 00:20:21,440
actually access algolia response at a

506
00:20:21,440 --> 00:20:24,080
minimum latency while not having to

507
00:20:24,080 --> 00:20:26,240
focus on the network connectivity

508
00:20:26,240 --> 00:20:28,240
everything is taken care of on your

509
00:20:28,240 --> 00:20:30,880
behalf through the API client and on top

510
00:20:30,880 --> 00:20:33,080
the autocomplete library or instant

511
00:20:33,080 --> 00:20:35,440
search depending on what your use ke is

512
00:20:35,440 --> 00:20:37,760
awesome thanks again Alex appreciate all

513
00:20:37,760 --> 00:20:42,120
of your tips take care