不能不说的设计秘密:4个步骤提升交互思维

良好的用户体验包含很多内容:服务、产品、参与者的感受等等,显然产品功能的强大、界面的美观并不能完全概括体验。体验还包含在产品与用户之间的互动、产品与场景的交互、产品对用户的情绪上的影响等等的细枝末节中。第一阶段回顾:分析商业目标,描述了典型的用户模型、通过故事细化了用户的心理模型和行为模型。第二阶段回顾:交互设计师通过综合分析、发散收敛思维、提炼精化的过程,理清了流程中各个组件的关系,形成完整的产品图景。第三阶段回顾:主界面的打磨,细节体验的关注都是塑造良好体验的方法,好的产品应该让用户感知丰富、情感投入。第四阶段回顾:全面审视设计流程,通过专家评审等方式改进方案,规范总结设计方法。


良好的用户体验包含很多内容:服务、产品、参与者的感受等等,显然产品功能的强大、界面的美观并不能完全概括体验。体验还包含在产品与用户之间的互动、产品与场景的交互、产品对用户的情绪上的影响等等的细枝末节中。

不能不说的设计秘密:4个步骤提升交互思维

交互设计是设计人与产品接触的动态时间轴上的每一次接触,从一开始的靠近、到产生共鸣、赞美,在每一个接触行为的背后都有需要关注的用户情绪、需要理解的用户认知。卡耐基 · 梅隆大学设计学院的John Zimmerman等提出了一个设计过程发现和汲取知识的流程框架:define(定义)、discover(发现)、synthesize(综合)、construct(建构)、refine(精炼)和reflect(反思)六个过程,这个流程的每一步骤都确立在前一个步骤的基础上。

认知用户、定义设计的过程总是千头万绪的,各个流程之间也是交叉进行的,商业设计的具体实践中很难真的遵循如此明确的流程。源于对具体设计问题的理解,大致可以将交互设计的过程分成四个步骤:

  1. 识别需求,模拟场景(define、discover)
  2. 理清设计机会、定义功能(synthesize、construct)
  3. 交互流程与原型图(construct、refine)
  4. 反思评估、规范化(refine、reflect)

明晰的设计模式帮助产品从概念构想到完成品的整套过程。正如绘画作品希望传达给观者情感内涵一样,交互设计也是借由产品与用户进行持续性的对话来创造产品的使用体验。

一. 识别需求,模拟场景

1.1 判别问题和机遇

设计师接触到需求任务的时候,先与产品经理进行沟通,搞清以下问题:

  1. 产品想做什么?
  2. 用户是谁?
  3. 用户的使用目标是什么?
  4. 产品商业目标和用户使用目标一致吗?

设计师应该抱持着怀疑批判的态度来审视产品的“愿景”,对于产品经理提供的商业目标与用户目标是否一致,是不确定的。为了具体量化这种不确定性,可以通过一些具体的问题:产品想要给谁做?功能对用户有用吗?有过类似的产品吗?有没有用户反馈?

通过询问潜在用户、产品经理、为产品提供服务的第三方、了解现有数据等等途径,设计尝试了解用户诉求和商业目标,综合多种信息渠道后,如果觉得产品的商业目标和用户来到产品的目标是不一致的,那么产品是否值得做就需要再讨论。

如果判断产品商业目标和用户目标一致,那么设计师需要做的就是在用户需求和商业利益之间取得平衡。为了能够更加深入的了解目标用户的行为,做出人本设计的产品,就需要构建典型的“用户行为模型”,也可以说是讲个典型的用户故事。

1.2 模拟典型场景故事

为了再现真实的用户需求,需要模拟出真实的用户场景。场景包含了用户可能会施行的动作,也包含用户随着时间的进行所产生的情绪体验等。

优秀的场景故事必须富含丰富的细节,帮助设计师更加准确的预期用户的行为。在故事的构建过程中,有两点可以帮助设计师丰富、细化故事情境:

  1. 故事中包含哪些元素;
  2. 故事有哪几个节点。

1.2.1 故事元素

故事元素指的是典型场景的什么用户、什么心情、什么行为之类,帮助故事实际情境描述的更详尽。下面列举了故事中的元素。

不能不说的设计秘密:4个步骤提升交互思维

1.2.2 故事的节点

故事的情节按照时间轴的推进,一系列行为的演化着,有一些关键情节可以被挑出,拆分关键情节就可以组成故事脉络。在产品的故事中,这些关键情节就是用户与产品的每个触点,将故事划分为一个一个的节点,可以清晰的了解用户的行为步骤。

典型的故事场景的描述有两大好处:一是对场景的叙述,可以让设计师一开始就将注意集中在创造新想法、解决问题和实现用户目标上面,也就是“以人为本”,而不是技术如何实现;二是故事本身的时间、情节特性,非常符合交互设计的流程演化,可以对应时间节点上的过程描述。

1.3 数据验证

用户(Person)在具体场景(Case)下的行为(behavior)清楚了。如果想更清晰更全面的完善典型“用户画像”,或者解释一些举棋不定的地方,可以寻找收集项目相关的现有平台、其他类似平台的历史数据。分析数据背后的原因,对决定设计方向的非常有用。

第一阶段回顾:分析商业目标,描述了典型的用户模型、通过故事细化了用户的心理模型和行为模型。

二. 理清设计机会、定义功能

2.1 产品触达用户入口

在讲述典型故事的时候,设计师已经了解到用户实际场景中困难、痛点。然后开始设计之后,进行角色转换。

  • 是不是应该在用户觉得最有痛点的地方提供产品的入口呢?
  • 这样用户对于产品的接受度和尝试欲望是不是最高的呢?
  • 如果用户错过了这个推送入口,那还有没有其他方式作为“触类旁通”的办法?

预先设想产品最好的使用场景,可以帮助产品最大程度的触达用户。

2.2 收敛和发散功能思维

调研也好,无限接近用户使用场景也好,都是为了建立“同理心”。“同理心”的体验帮助设计师搞清楚产品对于用户来说:

  • 有什么用?
  • 那些功能最有用?

产品初期的脑暴中,可能会有很多很多关于产品的功能想法。这个阶段可以通过一些方法来帮助设计师密集的探索新的想法:

  • 广泛的绘制草图、记录想法
  • 顺延故事脉络发散额外的线索
  • 思维导图

这个阶段是创造性的阶段,一开始可能是杂乱五章的,通过不同的反思、归类、验证,可以逐渐归类出特定的方案。在筛选的过程中,典型的收敛方法是将诸多想法逐个剔除直到剩下最佳想法为止。往往这些筛选条件是由人性、技术、美感三个条件混合组成。

不能不说的设计秘密:4个步骤提升交互思维

保证产品的简洁性、最重要功能的好体验是非常重要的。根据重要的设计节点筛选痛点功能,确定功能优先级。

2.3 主要功能任务

对于新设计的产品来说,用户执行任务是具象而零散的,设计师将任务分解和重组之后将用户行为归纳为主要任务,可以较为清楚而全面的囊括用户的需求、情绪、动机、目标和行为。

在整个主任务中,任务步骤被清晰的划分,不同的决策指向不同的任务流程。任务分析是衔接分析和设计阶段的关键步骤。

2.4 业务流程图

流程图综合表达主任务的过程和决策分析的情况。交互设计师使用业务流程图梳理清楚主任务的所有环节,展示产品入口、用户动作之间的关联,根据不同决策而产生的页面跳转。业务流程图的合理性对于产品的整个环节包括后期开发都是非常重要的。创建流程图的过程中可以更清晰的了解系统所涉及的范畴,形成心智图景(mental representation)。

不能不说的设计秘密:4个步骤提升交互思维

图1 流程图示意

第二阶段回顾:交互设计师通过综合分析、发散收敛思维、提炼精化的过程,理清了流程中各个组件的关系,形成完整的产品图景。

三. 交互流程与原型图

业务流程图已经分类任务场景,下一步就是基于主要任务进行界面原型设计,原型设计要求需要准确的展示用户所需的信息,表达清楚各个页面的跳转关系。

3.1 主页面的方案

从用户任务出发,聚焦用户注意。对于一个产品来说,有一到两个不等的页面是产品最为重要的页面,这个页面展示了产品的主要功能,用户在这个页面执行主要任务。同时主要页面的用户体验也承担了产品主要体验的塑造。主页面作为设计的重点是应该被反复打磨的。

如何设计主页面:

  1. 主页面的内容是哪些?
  2. 内容的主次排序是怎样的?
  3. 根据不同的思路将内容按照主次顺序设计
  4. 多种方案的对比、演绎、进化
  5. 设计方案的过程中和后期都可以跟不同的人进行沟通、讨论,不同的人看待问题的角度不同,这样会启发新的灵感
  6. 是否带给用户产品的归属感和关怀体验。

上述几个步骤可以将界面零散的信息逐渐演化清楚为方案,在演化的最初不一定是标准的交互方案,可以是草稿的方式,快速的进行方案的推进演化。等待方案完善之后再用axure等界面软件清晰的表达构思。

不能不说的设计秘密:4个步骤提升交互思维

3.2 支线流程的完善

主要流程中的主界面摆到清晰之后,辅助功能就会在方案形成过程中逐渐清楚。子流程的设计要注意在产品层级不要太深,在用户需要使用的情境适当出现。信息的表达上应该清晰完整,还是应该注意主次关系。

3.3 对细节的关注

对细节的关注和理解,才是获得更高级体验的方法。用户愿意使用尊重和理解他们的产品,也就是与产品产生积极的情感体验。想要满足这种共鸣性更高的体验也有一些方式可以遵循:

  • 具有代入感,也就是产品符合用户角色;
  • 沉浸感,执行某一任务的过程中用户可以进入一种专注的状态;
  • 高度的可感知,操作、反馈、提示都是明确而清晰的。

第三阶段回顾:主界面的打磨,细节体验的关注都是塑造良好体验的方法,好的产品应该让用户感知丰富、情感投入。

四. 反思评估、规范化

反思和规范是设计的最后一步,这个过程可以从全局来审视自己的设计过程,找出需要改进的方法。规范化的案例可以更好的帮助后续别的产品的设计,节约时间和资源。

4.1 可用性原则的检查

文案的表达,错误的反馈,一致性原则,除去冗余的信息等等,这些都是在反复审视稿件中能够不断改进的地方。

下面是一些可用的信息架构原则和页面表达原则,可以作为流程图和页面检查的标准。

信息构架的原则:

  1. 一个页面一个主要内容;
  2. 个人信息&公共信息;
  3. 更少的信息更好;
  4. 同等级的内容应表现成并列的样子;
  5. 信息树应该尽量窄而浅,并且尽量保持平衡;
  6. 与现实生活经验相符。

页面表达原则:

  1. 更少的信息量更好。
  2. 结构化更易于理解。
  3. 信息的表达应该清楚、明确、直接。
  4. 操作可识别。
  5. 操作前,结果可预知。
  6. 操作时,操作有反馈。
  7. 操作后,操作可撤销。
  8. 让用户知道身处何地。
  9. 避免内容看上去象广告。
  10. 不提供多余的功能。
  11. 相同的功能,在不同的页面中应保持一致性。
  12. 措辞统一。

4.2 专家评审

在自己审视交互方案流程也基本顺畅合理的时候,可以将方案发给专家评审,这里的专家既可以指有更丰富工作经验的设计师,也可以是更加熟悉这款产品使用背景的产品经理,让他们了解设计方案,指出存在的问题,修改细节,更好的呈现。

不能不说的设计秘密:4个步骤提升交互思维

图3 评审讨论

4.3 开发跟进

在原型设计完成之后的视觉、重构、前端开发中,时时跟进,把控产品方向跟最初交互设计方案一致也是帮助用户体验的重要一环。

第四阶段回顾:全面审视设计流程,通过专家评审等方式改进方案,规范总结设计方法。

总结

我们平时所谈到的“用户中心”的设计流程大致包含了:策略和用户分析阶段(UCA, User-Centered Analysis,即策略和用户分析阶段)和设计实施阶段(UCD, User-Centered Design, 即整合了设计、评估和实施、评估两个阶段)。交互设计其实恰好是贯穿了分析和实施阶段的桥梁,交互设计师无限的接近真实用户场景,寻找更加合理设计的答案,可以为产品的更好体验提供实实在在的帮助。

 

作者:乔莎莎,腾讯FIT金融市场部交互一枚,对探究人的认知、合理规划人机逻辑抱有极大的热忱,目前持续研究中,欢迎探讨,邮箱:1016415863@qq.com

来源:腾讯大讲堂

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/26442/

(0)
CatherineCatherine
上一篇 2017-05-14 13:07
下一篇 2017-05-14 14:52

相关推荐

  • 译文 | 交互设计的5大支柱

    文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

    2017-05-27
  • SKETCH教学视频

    则灵君分享的是“静电的sketch设计教室”教学视频,对于新手自学来讲非常的合适,感谢静电,讲解的非常的清晰明了,视频就在这儿,剩下的就需要你付出时间去学习咯,祝大家学有所成!链接: https://pan.baidu.com/s/1iIbE-DI_yHLayj7wue49yQ 密码: mw25·—END—·

    2018-04-20
  • 微信竟然有这么多渣到爆的细节,再不知道你就OUT了

    1997年,“码农”张小龙靠一己之力写了Foxmail,但电邮软件是免费的,当时连《人民日报》都在为码农张小龙的生计感到担忧。时隔20年后,张小龙的名字在互联网领域几乎已经无人不知,无人不晓,更多的是因为一款足以彪炳互联网史册的产品——微信。

    2017-05-23
  • VUI语音交互设计:三步打造任务导向型对话场景

    语音交互的主要能力在于开放式domain的聊天型功能与任务导向的技能型功能。如果说快捷高效、轻松自然是语音交互的独特优势,那么任务导向型功能就是这些优势的完美落点,一个量好的语音交互产品,自然是技多不压身,能够cover的domain多越好,能够get的技能越强大越好。那么,作为语音产品设计人员,如何以短平快的方式设计一个任务导向型对话场景呢?当然,和传统交互设计工作一样,前期调研是很有必要的。你想设计的这个功能是否能满足产品目标、是否...

    2018-02-15
  • 课程论文 | 基于用户体验的购物车再设计

    引言PAGE1随着我国经济水平的增长,人民生活水平的不断提高,越来越多的消费者选择去大型超市购物消费,大多数城市居民都养成了定期光顾超市的习惯,把购物同休闲结合起来。体验经济的到来,越来越多的消费者开始关注购物本身是否能带来愉快的体验,这样的体验超出了纯粹的购物,而成为光顾超市目的的一部分。因此,购物不仅仅是出于购物的需求而且还为了获得愉快的体验。而购物车与消费者的购物体验紧密相连。购物车的使用体验对消费者的购物体验影响很大。现有购物车...

    2018-02-13
  • 【分享】最全界面设计模式、APP和Web交互流程图

    这次设计夹的主编-晓黑同学为大家整理了史上最全面的APP和Web交互流程图的标准画法,内容非常的全面。通过结合自己的项目经验,把交互流程图做的更加清晰。在后面,还为大家整理一般的web设计模式及APP设计模式,以…

    2016-07-13
  • 如何做好新领域下的产品交互设计

    我所在的大数据部,是百度技术体系中一个极具技术与产品创新的部门。因此,作为交互设计师会设计各种行业的产品,已经接触过的行业有网站统计分析、旅游、金融、广告营销、医疗、房地产、零售O2O、彩票、体育、汽车…

    2016-05-10
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24
  • 扛住100亿次请求 如何做一个“有把握”的春晚红包系统?(腾讯官方内部技术PPT下载)

    羊年春晚摇一摇活动已经落下帷幕,现在回过头来看看这一全民参与的有趣的活动背后,有着怎样的后台系统?这个系统又是如何被设计与实现出来的?   作者:张文瑞 iotazhang  腾讯 WXG 技术架构部,本文提供PPT…

    2015-11-10
  • 默认头像设计(1) —— 统一与丰富间的平衡

    头像设计,“统一”与“丰富”间的平衡。

    2017-08-04