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

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

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

搜索栏

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

搜索栏的展示很重要

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

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

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

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

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

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

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

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

使用“放大镜”图标

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

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

搜索输入

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

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

使用良好的默认值

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

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

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

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

自动建议

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

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

给用户的建议填充

历史纪录

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

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

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

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

小贴士:

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

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

语音搜索

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

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

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

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

Siri出错了

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

搜索进度

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

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

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

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

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

搜索结果

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

列表还是网格

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

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

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

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

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

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

延迟加载

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

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

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

空白的无结果页面

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

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

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

排序和过滤搜索结果

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

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

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

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

搜索的微交互

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

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

搜索的微交互:

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

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

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

谷歌商店的搜索栏动效

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

总结

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

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

来源:Cyy_Emma http://www.ui.cn/detail/100320.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,265评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • “搜索” 是许多移动端应用中的常见功能,尤其对于电商类、引擎类、信息流类的应用,搜索往往是其中最重要的功能之一,据...
    赵二柱子阅读 1,111评论 0 0
  • 图书馆里,一个女生正戴着耳机伏案在本子上画画。 一位男子路过突然敲敲她桌子:“你怎么在这里画画。” 女生赶紧摘下耳...
    灰不溜秋阅读 352评论 0 0
  • (一)因为遇见你 那是一个宁静的午后,阳光透过玻璃洒在我的桌面,窗台上的芦荟享受着这温暖的照射,空气中氤氲着淡淡的...
    阿芙洛蒂的幻象阅读 292评论 0 0