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

相关推荐

  • 腾讯多个品牌LOGO重设之思路

    作者:飛兒     在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。…

    交互专题 2017-08-07
  • 走心!优秀的移动端UI应当如何用微交互打磨细节?

    UI设计的细节很重要,它不仅仅体现在静态的元素上,动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计,微交互和动效设计是绕不开的问题,今天的文章我们来聊聊这个。

    2017-05-19
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • 交互设计就业前景怎么样?

    交互设计师/用户体验师 5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了…

    交互专题 2016-10-25
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • APPLE WATCH 中文手册:通知--自定义通知界面

    自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的…

    2015-06-15
  • Apple Watch界面设计规范之UI设计基础(1/2)

    一、为Apple Watch而设计 Apple Watch体现着如下几个方面的主题思想: 个人。Apple Watch是面向穿戴而设计的,所以其UI需要与佩戴者自身相协调。抬起手腕的动作可以使Apple Watch显示当前时间及通知信息。通过Digit…

    2015-03-10
  • 盘点 Smartisan OS 历代亮点, 罗永浩凭借用户体验翻身?

    #交互学堂#今天为大家盘点一下锤粉骄傲的资本,那些#Smartisan OS# 中具有启发性的系统层优化,从远到近从大到小,从 Smartisan OS v1.3 到 最新的 Smartisan OS 3.1,这算是一份锤子给智能手机操作系统的独特贡献…

    2016-11-01
  • 交互设计师怎样理解信息架构

    设计文章 / 交互设计 | 发布者: GUImobile 这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了。今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。在文中讨论…

    2014-10-15