为移动端用户设计友好的搜索方式

搜索是移动端的一项基本行为。回想一下——移动端除了拍照和写作很少创造什么,相反,移动端主要的服务是寻找什么。一个杰出的搜索方式可以帮助用户快速简便地找到他们想要的东西。

我们可以一起从以下这些非常棒的移动端搜索实例中获益。同时,我也希望这篇文章可以帮助大家为App创造一个真正对用户友好的搜索方式。

搜索栏

这里我们的目标是——设计一个清晰可见的,很容易被找到的搜索栏。

搜索栏的展示很重要

如果你有足够的地方放置搜索栏,那就显示它所有的部件。因为只显示搜索图标会增加交流的成本,还会带来一些负面效果——用户不得不等待搜索框出现,去探索从哪里键入文字,而且有时候还得花费好几次点击以聚焦到输入框。

不好的例子:只显示图标,隐藏上下文。从用户体验的角度来说,不应该让用户在行动之后才能知道他们可以做什么。

 只有一个搜索图表,来源于:AntonioJDN只有一个搜索图标,来源于:AntonioJDN

好的例子:不需要用户做额外的动作。

 Image title显示所有部件的搜索栏,来源于:link

如果在你的App中,搜索是核心功能,那就让它显眼起来,让用户一眼就能发现它。电子商务类的App有一个显著的特点——搜索栏总在它们的首页最上方。

    Image title安卓系统中,搜索在应用程序栏里,固定在屏幕的最上方

小贴士:屏幕的最上方应该放置一个可以一眼便认出的显示所有部件的搜索框。

使用“放大镜”图标

图标是表现客体、行为以及目的意义的可视化描述。有一些图标在用户的心里有既定的意义,“放大镜”图标就是其中之一。

放大镜总是和搜索框同时出现,所以用户不用文本标签就知道“放大镜”图标意味着“搜索”。用粗线条描绘的这个图标,是目前“放大镜”图标最简单的表示方法。它有最少的图形细节和最快的认知速度。

Image title

 

搜索输入

搜索强迫用户做更多事,因为用户不是仅仅想出问题就大功告成了,还得输入它。输入有很高的交互成本:它很容易出错,还很费时,即使你用键盘输入也是一样,更不用说触摸屏了。

所以这里我们的目标是——让搜索易用。

使用良好的默认值

良好的默认值可以降低用户出错的几率。尤其是当用户需要反复搜索,或者是需要得到精确结果的时候,先提供些可能会符合他们实际期望的合理的默认值。

(餐馆、旅店)预定表中的自动预填充建议数据在很多时候对用户来说是准确的,也让程序更加方便。

Image title预定表单中应该预填充建议数据

小贴士:良好的默认值和建议数据可以帮助用户降低犯错率,提高生产率。

自动建议

大概最有用的搜索模式就是从Web 2.0兴起的“自动建议”了。它被用来减少数据的输入,提供最相近的结果。

使用自动建议模式时,应该尽量快速,比如当第三个字符输入后,就提供最接近的值,以减少用户为了输入而作出的努力。

    Image title给用户的建议填充

历史纪录

即使用户很熟悉搜索空间,在搜索前也仍然需要从脑海里回忆信息。为了得到一个有意义的查询指令,用户需要回想查询目标的属性、标志,然后合并它们。

成功的移动端用户界面遵循一个基本的可用性格言:尊重用户的努力。在用户下一次搜索时提供数据给他们——这就是应用应当存储所有搜索记录的原因。这可以帮助用户节约时间,节省在搜索相同信息时花费的精力。

  Image title安卓和iOS都储存了最新的搜索记录

(上图)这个选择在用户重复搜索时非常有用。这种小设计可以提升用户体验。

小贴士:

· 近年来,App为用户提供最新的搜索记录以提升用户体验。

· 过去在储存要保留的搜索记录时需要额外命名,而最近的则是默认储存/展示所有记录。考虑一下哪种方法更能满足你的用户需要。

语音搜索

在手机上打字很困难也很容易出错。语音搜索背后的想法很简单:在输入框中用板载麦克风录入代替键盘关键字键入。

 Image title安卓搜索栏有一个麦克风的图标表示语音搜索。

几乎所有有搜索框的App都可以使用语音搜索模式。这种模式对那些经常处于“在路上”的应用程序特别好。另一个使用语音搜索模式的重要场景是“(用户)多任务活动”,比如开车。

但是语音搜索也有一个缺点:语音为基础的搜索方式是否好用大部分取决于语音识别程序的质量。我们都听说过很多关于Siri误会用户问题之后发生的滑稽故事。

 Image titleSiri出错了

小贴士:部分移动端搜索已经成型并在使用中,而语音输入很可惜并没有完全代替传统的以文字为基础的搜索方式,只成为了一个好的补充手段。

搜索进度

理想化的情景是搜索后马上出结果,如果这不可能,就应该有一个进度指示器作为系统给用户的反馈。

 Image title是的,正在加载的进度图标是一个很糟糕的解决方案,但是这也比什么都没有要好。

如果搜索需要很长时间,你可以用一个不错的小动画。小动画可以转移用户的注意力,让他们忽略长时间的等待。

Image title飞行类搜索App的进度条,来源于:Mark M

小贴士:不确定的等待格外漫长,你应该明确的告诉你的用户他们需要等多久。

搜索结果

我们的目标是——致力于让用户做最少的努力。用户普遍更青睐省时省力的系统。

列表还是网格

一旦搜索结果需要用同屏或新页面展示,往往就是使用列表或网格模式或者在地图或卫星图上显示,或者用缩略图模式。

这里有一点很重要你应该记住——移动端的屏幕大小是固定的,所以一屏能显示的搜索结果数量是有限的,你应该确保前几个(3或5个)搜索结果和问题是高度相关的。

下面的例子展示了列表和网格在展示搜索结果上的不同。在Sports Authority这个网站,冗长的网格的布局意味着用户必须付出8次滚动手势(向上和向下)才能找到想要的产品类型。

 Image title红色的线上部分为用户在一屏内所能看到的内容

小贴士:前几个搜索结果应该高度相关

让用户尽可能快的找到他们想要的。根据你提供的产品或服务选择最恰当的搜索结果展现方式。

延迟加载

延迟加载是一种常用的方法,当有剩余的结果加载时,仍有一些结果可以被看到。

 Image title许多App提供一个明确的“加载更多”按钮,或是当屏幕滚动到底时自动加载更多

小贴士:使用延迟加载代替翻页。避免翻页打断用户在移动设备上自然浏览信息的交互模型。

空白的无结果页面

当没有找到匹配用户搜索的产品时,不要让他们有进了死胡同的体验,而是提供更多的选择,比如电商可以给用户推荐一些类似产品。如果想进一步帮助用户,你可以提供智能搜索纠正用户的错别字。

 Image title惠普的无结果页面就是让用户进了死胡同。和它形成鲜明对比的是亚马逊的相似推荐无结果页面。

小贴士:避免死胡同,当没有匹配的结果时,给用户提供有价值的备选方案。

排序和过滤搜索结果

移动电子商务可用性研究所Baymard观察到:超过50%的用户试图在目前导航类目下“进一步搜索”,以达到“用搜索问题过滤我的屏幕上的产品清单”的目的。但是,94%移动电子商务的网站和应用不支持这种行为。

给用户提供与他们的搜索结果相关的过滤选项,并且让他们每次都可以多选来过滤搜索结果。不要隐藏过滤功能中的排序功能,它们是不同的任务。

 Image title搜索结果过滤,来源于Virgil Pana

小贴士:在很多情况下,用户应该有排序或者过滤搜索结果的选择权。

搜索的微交互

搜索是一个微交互和动效的理想场所。

微交互是给用户提供愉快反馈最好的方法之一。

搜索的微交互:

· 传达行为的结果和反馈。

· 加强(用户的)直接操控感。

· 帮助用户可视化他们的行为结果,防止出错。

  Image title谷歌商店的搜索栏动效

小贴士:微交互充当互动,反馈,通知,说明的协调人。

总结

Steve Krug在他的《Don’t make me think》一书中说,我们应该让用户看懂搜索控件的(英语或其他语言的)设置信息,然后再来布局搜索控件。

上述的所有都有一个主要目标——为最终用户设计尽可能简单的搜索。搜索是至关重要的,它可以为用户节省时间。

2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部