不能不说的设计秘密: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

相关推荐

  • 深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

    来源:H5广告资讯站 作者:小呆 原创文章,转载请联系本人! 记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起…

    2016-10-25
  • 用通俗的方式告诉你什么是交互设计。

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-03
  • 关于外卖产品的交互设计与用户体验分析

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2017-05-23
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 提高移动端表单可用性的7个设计原则

    用户在填写表格的时候可能会犹豫不决,所以你应该让这个过程变得尽可能容易,这篇文章中的7个设计原则可以显著提高表格的可用性。

    2017-05-18
  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • 交互设计之架构真经

    建立信息架构是交互设计师主要工作之一,是需求转向交互稿中非常重要的过程。一个架构的好坏决定这这个产品未来的命运,只有具有一个好的信息架构,才会具有一个好的产品体验。以下将从认识——前期工作——如何产出——如何判断,四个步骤来介绍信息架构。一、何为信息架构信息架构设计是对信息进行结构、组织方式以及归类的设计、好让使用者容易使用和理解的一项艺术与科学。这是比较官方的说法,简单通俗的说法就是对信息进行组织和层级分层。当我们一看到购物车这个信息...

    2018-05-01
  • 从交互设计的角度,看iOS11的5点不足

    提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。

    2017-08-04
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09