用户体验设计实例:阿里搜索框优化建议

·设计目的:

1) 在不影响现有用户使用习惯的前提下,提升搜索输入流程的便利性;

2) 在有限的空间内,增强首页搜索操作的历史回溯能力,减少老用户的搜索操作成本,提高他们的搜索效率;

3) 对新用户的搜索引导更丰富,增加搜索的趣味性;

·设计方案草稿:

·主要流程

1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作。同时,光标后跟随当前搜索维度下的输入提示信息;(如图1.1)

图1.1

2) 在图1.1页面状态下,当用户输入任意关键词后,在输入框内部,清空系统默认的输入提示信息,显示当前输入内容。同时,自动向下弹出联想词推荐,并给出可能的搜索结果数信息(如图1.2);

图1.2

3) 在图1.2状态下,在输入框的最后方显示“一键清空”图标,当用户点击此图标后,将清空所有输入信息,并收回下拉框,输入框内仅保留光标;(如图1.3)

图1.3

4) 在没有任何输入的情况下,点击搜索框下方箭头按钮将有两种可能情况:①如果是全新用户,即没有任何搜索相关的行为记录,我们将弹出下拉框,给出我们的推荐热词列表(10条),并提示每条热词的搜索次数;(如图1.4)

图1.4

②如果用户有过任何的搜索行为记录,我们将弹出下拉框,给用户最近的10条搜索历史记录,不满10条的话显示全部,超过10条显示最近的10条,根据搜索时间顺序排列,显示最近一次搜索时间;(如图1.5)

图1.5

5) 在弹出任何的下拉列表中,只要鼠标点选了其中的任何一条内容(也可以通过键盘光标移动+回车确认)后,就实现即时的搜索行为,引入搜索结果页面;

·分支流程1

1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作。同时,光标后跟随当前搜索维度下的输入提示信息;(如图2.1)

图2.1

2) 在图2.1页面状态下,如果鼠标点击输入框内部区域,则清空系统的输入提示信息,仍保留输入光标,处于待输入状态;(如图2.2)

图2.2

3) 如果用户点击搜索框上方的Tab键,将实现切换搜索维度操作,光标维持在输入框内,同时系统显示当前维度下的输入提示信息;(如图2.3)

图2.3

4) 在输入框内已有输入信息的状态下,(如图2.4),点击Tab,实现切换搜索维度操作后,保留输入信息;(如图2.5)

图2.4

图2.5

·分支流程2

1) 当用户输入任意关键词后,在输入框内部,清空系统默认的输入提示信息,显示当前输入内容。同时,自动向下弹出联想词推荐,并给出可能的搜索结果数量;(如图3.1)

图3.1

2) 如果用户点击页面其他无操作空白区,取消关键词联想推荐的下拉框,但保留搜索框内的输入信息和一键清空图标;(如图3.2)

图3.2

3) 在图3.2页面状态下,如果用户点击搜索框下方的箭头按钮,将根据用户属性对应弹出热词推荐或搜索历史记录下拉框(如图3.3);此时点击下拉框内的任意条目,被选中词条将取代输入框内的词,引发搜索并进入搜索结果页面;

图3.3

4) 在图3.3状态下,如果点击一键清空键,将清空输入框内信息,收回下拉框,仅光标在输入框内显示;(如图3.4)

图3.4

5) 在图3.1的页面状态下,如果发生任何的输入性操作,包括删除部分现有信息(除输入框内信息为空的情况外)、追加输入等行为,均弹出联想推荐下拉框;(如图3.4)

图3.4

·启发式评估意见整理——主要争议点:

1) 默认焦点:默认光标在输入框内,同时输入框内光标后有说明性文本,从用户习惯上讲没有先例,开发的可行性也需要评估;

设计师评估:光标默认在输入框内的设计,符合目前主流搜索引擎的规范,说明性文本是用来指导新用户输入操作,其本身不存在歧义和误导,唯一需要考虑的是前端实现方面的可能及成本。所以我们暂定,在技术支持的前提下,保留设计。

2) 一键删除:新增此功能的必要性存在争议,图标语义也不是很明晰,容易让用户产生“关闭联想词下拉框”的误解,进而发生误删输入内容的可能;

设计师评估:综合评估了该功能的使用场景,确实觉得在首页上的相关场景不多,同时图标还存在误导用户、引发争议的可能,所以决定先在搜索list等页面的搜索框测试功能,等确认效果后才同步到首页;

3) 下拉推荐:下拉触发区块物理尺寸偏小,用户不容易发现,同时点击式的触发的条件也增加了用户的发现、使用成本;

设计师评估:从视觉上将确实有点小,但我们前期的设计出发点就是在不打扰现有正常流程的前提下,尝试给老用户和高端用户一些新的交互体验,所以我们仍然决定支持现有的图标尺寸和触发条件,等上线测试后再决定下阶段的优化方向。

4) 共用区块:针对不同属性的用户,提供不同的推荐内容。同时从视觉上看,联想词下拉框也共用了此区块,只是在形式上略有差别。正是由于在公共区块存在不同反馈结果的可能,所以预计会对用户造成较高的理解、学习、使用成本;

设计师评估:根据共用区块提供的三类参考信息的目的(匹配并提供最符合用户想法的输入词,帮助用户高效完成输入操作)来看,我们认为应该不会对用户的理解、使用造成太大的困惑,更不会造成用户的操作失败。但考虑到评估期间内的争议比较突出,我们决定先期采用历史记录和热词推荐合并显示的方案,上线测试后再决定下阶段的优化方向。

·优化设计方案:

·主要流程

1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作。同时,光标后跟随当前搜索维度下的输入提示信息;(如图1-1)

图1-1

2) 在图1-1页面状态下,当用户输入任意关键词后,在输入框内部,清空系统默认的输入提示信息,显示当前输入内容。同时,自动向下弹出联想词推荐,并给出可能的搜索结果数信息(如图1-2);

图1-2

3) 在图1-1页面状态下,在没有任何输入的情况下,点击搜索框下方箭头按钮将有两种可能情况:

①如果是全新用户,即没有任何搜索相关的行为记录,我们将弹出下拉框,给出推荐热词搜索(10条),提示每条热词的搜索次数,并说明搜索历史为“暂无”;(如图1-3)

图1-3

②如果用户有过搜索行为,我们将弹出下拉框,给出用户最近的搜索历史记录,不满7条的话显示全部,超过7条显示最近的7条,根据搜索时间顺序排列,同时根据实际显示搜索历史的条数,对应显示热词搜索的条数(历史+热词=10条)(如图1-4)

图1-4

4) 在图1-3、1-4页面状态下,在弹出的下拉框中,用户点选了其中的任何一条内容(可以是通过鼠标或者键盘光标移动+回车进行选择)后,就实现即时的关键词搜索操作,引入搜索结果页面;

·分支流程1

1) 进入页面,光标默认放置在输入框内,支持用户直接输入操作。同时,光标后跟随当前搜索维度下的输入提示信息;(如图2-1)

图2-1

2) 在图2-1页面状态下,如果鼠标点击输入框内部区域,则清空系统的输入提示信息,仍保留输入光标,处于待输入状态;(如图2-2)

图2-2

3) 如果用户点击搜索框上方的Tab键,将实现切换搜索维度操作,光标维持在输入框内,同时系统显示当前维度下的输入提示信息;(如图2-3)

图2-3

4) 如果用户点击Tab项“更多”,将弹出下拉式选择框;(如图2-4)

图2-4

5) 在页面2-4状态下,如果用户点击非触发的空白区域,即未选择下拉框中任意一个选项,将回复到最近的搜索维度;(如图2-5)

图2-5

6) 在页面2-4状态下,如果用户选择下拉框中任意一个选项,将切换Tab到该搜索维度,光标维持在输入框内,同时系统显示当前维度下的输入提示信息;(如图2-6)

图2-6

7) 在页面2-6状态下,点击最后那个Tab项“博客”,将弹出下拉框,后续交互逻辑同页面2-4;(如图2-7)

图 2-7

·分支流程2

1) 当用户输入任意关键词后,在输入框内部,清空系统默认的输入提示信息,显示当前输入内容。同时,自动向下弹出联想词推荐,并给出可能的搜索结果数量;(如图3-1)

图3-1

2) 如果用户点击页面其他无操作空白区,取消关键词联想推荐的下拉框,但保留搜索框内的输入信息;(如图3-2)

图3-2

3) 在图3-2页面状态下,如果用户点击搜索框下方的箭头按钮,将弹出下拉框,显示搜索历史和热词搜索(如图3-3);此时点选下拉框内的任意条目,被选中词条将取代输入框内的词,直接引发搜索行为并进入搜索结果页面;

图3-3

4) 在图3-3页面状态下,如果点击弹出框下方箭头按钮,将收回下拉框,输入框内保留现有的输入信息;(如图3-4)

图3-4

5) 在图3-4页面状态下,如果发生任何的输入性操作,包括删除部分现有信息(除输入框内信息为空的情况外)、追加输入等行为,均弹出联想推荐下拉框;(如图3-5)

图3-5

·分支流程3

1) 当输入框中没有任何输入信息时候,点击Tab,仅切换到对应的搜索维度;(如图4-1)

图4-1

2) 当输入框中有任何信息时(如图4-2),点击非当前维度的Tab(比如点击“公司”项),直接引发对应维度下的搜索行为并进入搜索结果页面;

图4-2

3) 在图4-1的各状态下,点击“搜索”按钮,将进入各模块对应的引导页面;(如图4-3、图4-4)

图4-3

图4-4

时间: 2024-08-05 01:02:05

用户体验设计实例:阿里搜索框优化建议的相关文章

用户体验设计实例:B2C搜索LIST页面设计

改版背景 创建专业的电子商务垂直搜索,以及把原有的信息聚合平台转型为在线采购批发交易平台.根据行业特点及交易需要,对原有的零批(小额批发)搜索进行改版,改造为适合行业搜索交易频道,便是这次改版的设计目标.我们搜索产品线的产品经理与用户体验设计师们进行了长达半年的准备工作. 项目组成员将对现有的功能需求,信息架构,视觉色彩,用户体验等,做多视角.多纬度的分析.力求在1688.com上线后,推出另一个电子商务垂直搜索用户体验盛宴. 功能需求取舍   在项目中,我们从市场运营那里采集了大量需求,那怎么

用户体验设计实例:网站搜索的设计

文章描述:交互设计细节--搜索. 一 推荐字 关于推荐关键词放置位置的问题: 推荐字在框下:普遍认为放在下面好一些,从版面美观度考虑,从给用户的冲击力和干扰程度考虑: 推荐字在框上:有时搜索框上面会放分类等tab,推荐关键字易被认为作分类:但具体放在上面给用户带来的干扰程度,是否会让很多用户很讨厌,笔者认为来搜索的用户普遍目的性较强,会下意识自动过滤掉自己不需要的内容,此时的用户是很难被干扰到的,可放心放到搜索框之上:但可能喜欢清爽一些或有洁癖的用户比较希望什么都不要放. (图为 迅雷看看官网,

网站用户体验设计实例:亚马逊购物用户体验

购物网站的用户体验讨论无时无刻不在发生,为了提高用户的转化率,各大购物网站都希望能够给用户提供更完善的用户体验,当然这其中一些像亚马逊的大型购物网站经常会作为研究的案例.本文主要为您分析亚马逊是如何来提高自己网站的用户体验的. 现在电子商务网站的设计,正面临着一系列的挑战,其中最主要的挑战是:我们尝试建立一种用户体验,来提高用户在线购物的可能性. 为了对抗网上激烈的竞争,消除网上多疑购物者的顾虑,设计人员可以采取一些措施来改善他们网上商城的可用性. 自1995年以来, 亚马逊已经成为在电子商务B

用户体验设计实例:优化策略

这段时间工作,我最重要的部分就是对厦门电信目前的首页进行解构和分析,然后给出优化方案,制作原型和给出设计稿,另一部分是对于现有的厦门电信的注册登录流程进行优化和降低用户门槛.本来预计一周做完的工作到今天才算是正式告一个段落.期间遇到不少的问题,受益良多. 1.深刻的对于产品的现有状态的分析和深入解构,是和客户进行交流的一个最基本的前提,至少你在对用户进行阐述理念的时候有一个很好的基础和理论支持,你可以明白的告诉用户,原有的问题在哪里,我们的考虑是哪些,我们提供的解决方案是什么,并且需要客户提供的

用户体验设计实例分析:网页表单设计

原文:http://visitmix.com/Articles/Web-Forms-for-People 作者:Luke Wroblewski 译者:江力   随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤.不管是在线交易验证.评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中. 为什

用户体验设计实例:豆瓣UI设计改进

Web 2.0的重要特征之一,就是更加类似于生物界的自组织现象.用户如同单细胞生物一样,在充斥营养质(内容)的液体中飘荡,直到偶然落在某处营养足够支撑其产生连续.规律的生长(用户习惯)的结构体(网站)上.同时,当汇聚的简单细胞足够多的时候,也会产生质变,影响这部分结构组织营养的比例和方式.所以Web 2.0的技术重点,比如Ruby On Rails,Ajax往往都放在能够快速完全重构,框架部分更新等领域,其实就是推翻不成功的进化模型,重新开始进化试验,保留已知有效的功能模块:最终找到可以生存的范

用户体验设计实例:找回用户帐号功能设计

文章描述:陈皓:如何设计"找回用户帐号"功能. 因为<腾讯帐号申诉的用户体验>一文中好多人觉得腾讯申诉是世界级先进的,并让我拿出一个找回用户的帐号的功能来.本来不想写的,因为大家看看其它系统的就行的,但是,很明显有些人就是很懒,也不会思考,而且不会观察,所以,我就只好写下这篇科普性常识性的文章. 在行文之前,我得先感谢腾讯公司的至少30名员工在<腾讯帐号申诉的用户体验>一文后的回帖(我STFG(Search The Fucking Google)看到了你们使用的

用户体验设计实例:触发式邮件高效应用

文章描述:高效触发式邮件及其应用. 大家好!最近一直在新工作的事情,更新很少,望见谅! 今天分享的是,触发式邮件. IT技术发现到现在,各种机器的发明应该为使用者服务,更省时省力才对.如果邮件营销人员总是疲于为"程序"奔命,是多么不幸的一件事. 触发式邮件,一般英文里使用Trigger email这个单词来指触发式邮件.Trigger叫做触发,本意为手枪的扳机,极少有人随意会扣动扳机的,这既不安全也不经济,损人不利己.在远处一定会有一个所谓的"靶子". 触发式邮件是

用户体验设计实例:网站建设整体框架

离开前一家公司已经大半年了,翻阅一下当初06年上半年写的一份互动新媒体部门的规划,觉得当初的想法还是比较稚嫩,规划超出了实际情况很大一截,部分项目方向即便拿到今时今日单独做,也是非常了得的.不过,所幸文中的一些内容对于其他项目还是有一定借鉴作用的,故而摘选一部分与大家分享.不当之处,请斧正. 全文从内容结构,页面结构,开发技术,商业智能,商业应用,使用管理等六个方面分别论述: 一.内容结构 如同一本好的杂志或一份好的报纸,一个好的网站,吸引人浏览并会长期驻留的一定是它的内容.内容的存在,以及更新