​用户体验设计之路:需求到界面的距离

2023-05-26 0 751

​用户体验设计之路:需求到界面的距离

嗨,你那时还在被自己指出是“算数仔”么?假如不该被打上“算数仔”的条码,那他们就须要自始至终参予因此亲自动手展开市场需求分析了,多于这种,他们就能取回商品的主动权。

所以,当他们透过市场需求分析,赢得了“机能”、“文本”和“错误率”后,他们接下去与否就能结构设计蓝本介面了呢?

标准答案是“非也”!即使从市场需求到介面间依旧存有着一段距,那个距是他们那时所要深入探讨的“结构规划设计”!

​用户体验设计之路:需求到界面的距离

狡蛛属,让他们先来简述呵呵上一则该文的关键文本吧:

使用者新体验结构设计的基本概念:具体来说是要化解使用者的某一前述难题,其二是让难题显得更容易化解,最终是给使用者遗留下真切的第一印象,让他在整座操作过程中造成幸福的新体验。

使用者新体验结构设计的特征:1. 细致、理智、创意设计;2. 提供更多某一难题的化解方案;3. 不许使用者思索;4. 趣味性丛生。

平庸的市场需求分析操作过程 vs 现实生活的市场需求分析操作过程:

​用户体验设计之路:需求到界面的距离

​用户体验设计之路:需求到界面的距离

结构规划设计

很多商品经理在结构设计初期,都有一个很不好的习惯,是拿到市场需求以后就开始尝试着用软件画介面,甚至在市场需求还没想好的时候,就开始构思介面细节了。(哪位同学是这种的,请举手~)

但在某种程度上,这种原罪似乎也并不在于商品经理。即使目前的互联网公司,确实存有很多团队,都是直接评审蓝本,甚至有的还他喵的要求高保真蓝本,至于市场需求评审,不存有的。尤其是一些小公司,更是如此。

这种的结果可想而知,必然会造成多次的返工修改,浪费巨大的人力成本。

古人云:预则立,不预则废。而设计规划,是那个“预”的操作过程!那究竟什么是结构规划设计呢?

结构规划设计的文本步骤:

根据市场需求来结构设计相关的信息和任务,透过组织信息结构、引导使用者完成任务得到一系列相关联的介面草图;

然后细化草图为具体介面,在那个过程中考虑如何让使用者轻松、愉悦、高效地浏览和操作;

最终,他们要赋予介面一些魔力,让使用者难以忘记使用商品的新体验。

​用户体验设计之路:需求到界面的距离

信息

类。这里提供更多两种方法供参考:

1. 逻辑分类:他们能使用人们在生活中熟悉的分类逻辑对信息展开组织。

例如他们去某宝买衣服,具体来说他们须要根据“性别分类”,查看是要买“男装”,还是“女装”;然后他们再选择一下究竟是买“上衣”,还是买“裤子”;最终才是看样式、价格等详细信息。

“服装性别—>服装类型—>服装样式—>服装价格”,这是人们习惯的信息组织方式,假如他们将其顺序调换,会不会觉得很别扭呢?

假如以上的描述不够直观,那他们想象呵呵实体店的场景就很容易理解了。有的服装商店会设置成一楼女装,二楼男装,应该没有哪个服装商店会设置成一楼专门卖上衣,二楼专门卖裤子的吧……而且是不是当他们看着哪一款衣服比较满意的时候,他们才接下去去关心价格呢?

熟悉的文本,会给使用者带来舒适感,也是他们常说的“舒适圈”的感念;而陌生的文本则代表着须要付出学习成本,每一次成本的付出,往往都会伴随着些许的焦躁。在互联网的世界里,使用者判断与否选择或者继续使用他们的商品,甚至只在于一瞬间的感觉。

2. 卡片分类:直接去探究使用者的想法,邀请使用者以卡片的方式,“把类似的东西放一起”。

此方法简单有效。准备好裁剪过的卡片或者便签纸,将须要分类的信息写在卡片上,然后组织招募到的志愿者对卡片展开自由分类即可。因此志愿者最好是与网站结构设计不相关的人员。

在商品结构设计的初级阶段,利用卡片分类能知道使用者对网站文本的期望,为信息架构的搭建提供依据;对现有商品展开改版时,卡片分类能检验现有的信息架构与否合理,对新版本的改进提供更多有效帮助。

任务

在市场需求调研和分析阶段,他们一直谈论的都是“业务”,得到的产物为“业务流程图”。但在结构规划设计阶段,他们谈论的基本概念,则须要转变为“任务”,相应的产物也变为了“任务流程图”。

“业务”与“任务”二者一字之差,体现的是客观与主观的区别,业务是客观存有的,而任务则是人为结构设计的,你品,你细品~

在结构规划设计的文本步骤中,“信息”与“任务”是一体的。他们就先来说呵呵二者间的关系。

“信息”与“任务”的关系:

市场需求文档中的机能和文本都是比较零散的,透过梳理信息结构,他们能把主要的机能、文本组织起来。而透过任务流程,他们则能把剩余的部分给“拼装”起来。

一个有意思的比喻

假如把商品比作一座购物商城,所以信息结构是商城的框架,比如,那个商城有多少层,每层都卖什么东西,都有哪些品牌店。任务流程则相当于商场里面的过道,使用者沿着过道完成“逛街”、支付等主要任务,透过商场中的各种提示完成去卫生间、去服务台换车票等次要任务。使用者在完成任务的操作过程中满足了自己的市场需求,而商品也从中直接或间接地实现了其商业价值。

那他们该怎样设计“任务流程”呢?

这方面所涉及的方式方法,其实与之前他们所谈论的“业务流程”并无本质的区别,两者间的区别仅在于范围的大小或者说层级的深浅,仅此而已。

草图

结构规划设计是一个承前启后的阶段,其目的是将最初的市场需求一步一步变为现实生活。

当他们整理好信息分类,结构设计好任务流程,此时依旧不要着急用软件画介面,即使草图才是那个阶段最高效的方式,一张纸,一支笔,足矣!

原因如下,请君查阅:

1.发散创意设计

结构规划设计是一个须要发散创意设计的阶段,用软件画介面,会让他们陷入结构设计细节当中,不自觉地就会考虑页面的尺寸与否符合栅格、每一行展示4个还是5个商品、按钮与否须要3个状态等等。这些会禁锢他们的思想。

2.快速迭代

纸面蓝本更具有可塑性,能快速地修改和重建,帮助他们探索尽可能多的想法并否定掉那些不靠谱的想法。有了草图,就能与相关人员展开沟通,只须要很少的时间就能收集到反馈,验证结构设计的可行性。

3.缩短周期

当他们透过纸面蓝本展开沟通,因此已经透过大致的方案时,也就意味着确定了商品的框架、主要的流程、基本的信息和机能等。对于下一个环节例如交互结构设计、UI结构设计或者研发,就能预先展开一部分工作,而不必等到全部文本都细化成标准蓝本并交付后,再展开动工。这必然提高工作效率,缩短项目周期。

介面

草图是结构设计方案的雏形,注重的是随时随地记录表达,无需考虑格式和规则。

当草图确定后,须要他们将其向介面蓝本展开转换的时候,就须要遵从一些结构设计原则了。

既然在结构规划设计阶段,“信息”与“任务”是两项关键文本,那他们就接着深入探讨呵呵,这两项文本相关的结构设计原则吧。

信息摆放原则

1. 信息层次需不言而喻;

2. 让重点信息“跳”出来;

3. 将次要信息“藏”起来。

说明:

1. 信息层次需不言而喻

信息层次那个无需多言,就像您那时正在阅读晓庄的该文一样,开头、结尾、标题、文本,错落有致,阅读起来,自然是赏心悦目~

这里呢,给出三句真言,助他们打造层次感:

逻辑相关的在视觉上分为一组;

文本或关键程度不同的在视觉上体现出差异;

逻辑上有包含关系的在视觉上展开嵌套。

前两句话很好理解,第三句话是什么意思呢?他们来给出一张“某宝”的首页照片,您一看便知:

​用户体验设计之路:需求到界面的距离

(你与否看出哪里嵌套了?他们在该文结尾公布标准答案)

2. 让重点信息“跳”出来

他们能透过视觉结构设计的方法,如字体加大加粗、色彩比对、添加背景色、留白等,强调介面中的重点元素。而其他非重点的元素就能显得暗淡些,这种就能使得重点信息“跳”出来了。

他们来看呵呵,美团外卖的介面,是不是让他们很容易就发现那个重点信息了呢?

​用户体验设计之路:需求到界面的距离

3. 将次要信息“藏”起来

随着商品不断地展开迭代升级,机能会越来越多。尤其是互联网商品。调查表明,80%的使用者只会使用20%的机能。因此他们为了保证使用者新体验,能将那些次要信息“藏起来”,待使用者须要时,再将它们展示出来即可。

就比如支付宝,他们经常使用的机能,绝对不会多于首页中的“九宫格”文本,于是呢,他们就能将那些相对次要的信息给“藏”起来,放到“更多”当中。

​用户体验设计之路:需求到界面的距离

任务引导原则

1. 相似性引导;

2. 方向性引导;

3. 向导控件引导。

说明:

1. 相似性引导

所谓相似性引导是说,假如大小、色彩、形态、视觉元素等因素相似,所以这些相似的因素就能牵引着使用者的视觉,引导使用者的操作。如下所示:

​用户体验设计之路:需求到界面的距离

2. 方向性引导

这种方式也亦然常常见的,因此他们大家肯定都见过。不信的话,我举个例子给你听。他们在地铁站利用自动售票机购票时,还记得那些提示你在哪投纸币,在哪投硬币,哪里取凭条,哪里取车票和零钱的箭头图标么?(没有找到合适的高清图,大家请自行脑补~)

3. 向导控件引导

向导控件(Wizard)是一种常见的交互方式,用来引导使用者完成多步操作。

Wizard在英文中是巫师的意思。向导控件就像神奇的巫师,能在陌生的页面环境下,为使用者指引路线。还能告诉使用者要完成任务一共须要多少个操作步骤,你那时所处的步骤是哪个,还有多少步能完成任务等。让使用者对整座操作有个预期,帮助迷失的人们找到前进的方向。

​用户体验设计之路:需求到界面的距离

(一个注册流程的向导控件)

捕获使用者芳心

最终他们来看呵呵,结构规划设计的最高境界,他们怎样就能赋予介面一些魔力,让使用者难以忘记使用商品的新体验呢?

这里有八种方法,值得他们借鉴。其中前三种是他们作为商品经理须要考虑的,另外五种,更严格地说,应该属于视觉、交互和UI结构设计师的领域范畴。但他们作为商品经理,对于这些方面的文本,虽无需精通,但必须了解。

捕获使用者芳心的八种方法

1. 可控的感受;

2. 积极的反馈;

3. 贴心的提醒;

4. 互动的乐趣;

5. 惊喜的力量;

6. 情景的烘托;

7. 拟物化的视觉;

8. 隐喻化的操作。

他们来一起沟通呵呵前三种商品经理须要考虑的方法,至于后五种,就留给大家自己去体会吧。

说明:

1. 可控的感受

调查表明,假如介面没有任何提示,80%的使用者等待超过2秒就会直接关闭窗口。假如介面有提示或是加载状态,使用者的离开率就会极大地降低。加载状态提示能增加使用者对介面的可控感,形成操作预期,使使用者安心。

这种结构设计,还存有于很多的及时通信应用中,例如展示对方的状态,显示对方与否正在输入,或是对方与否已读消息,让使用者知道对方的情况,感知到对方的存有。这种的结构设计能缓解使用者等待的焦虑感,给使用者一种期待,增强使用者的可控感。

2. 积极的反馈

提供更多积极的反馈,是与使用者互动的一种方式。

当使用者操作有误时,系统往往会给出错误提示,一个红色的叉叉常会令人造成挫败感。但当使用者成功完成某项操作的时候,他们与否赞美鼓励过他们呢?

人们在社会交往时具有的期望,在使用互联网商品时也会有。积极的反馈能增强使用者的信心,提升使用者新体验的愉悦感。

3. 贴心的提醒

在使用商品时,使用者难免会有遗忘或是疏忽的时候。此时给予使用者一些贴心的提醒,能提升使用者对商品的好感。

例如,很多新闻阅读类客户端会改变已读该文的颜色,降低其饱和度,减少使用者重复打开已经阅读过文本的概率。这些小小的状态改变,能降低使用者的认知负担,提醒使用者哪些是能快速略过的文本,

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务