为流畅的交互体验,创建完美的用户流程

如果有人问你:你怎样定义“流程”这个词,或者说举一个案例来进行描述,你会怎么说?这篇译文,作者给出了详细的解答。一是外文文章一般与当地的文化有关,所以翻译成中文很多时候都失去了它原来的味道,让中国读者感到有点不顺畅,这个是很正常的,很多小说翻译成中文阁主也不爱看。所以为减少这个情况的影响,阁主会在文章后加上阁主自己对文章的总结和建议~以下是原文~


如果有人问你:你怎样定义“流程”这个词,或者说举一个案例来进行描述,你会怎么说?这篇译文,作者给出了详细的解答。

为流畅的交互体验,创建完美的用户流程

在看原文之前,阁主有几句话说:

一是外文文章一般与当地的文化有关,所以翻译成中文很多时候都失去了它原来的味道,让中国读者感到有点不顺畅,这个是很正常的,很多小说翻译成中文阁主也不爱看。所以为减少这个情况的影响,阁主会在文章后加上阁主自己对文章的总结和建议~以下是原文~

如果有人问你怎样定义“流程”这个词或者说举一个案例来进行描述,你会怎么说?你会马上想到关于用户体验或者交互设计吗?也许会…但是,更多的应该是不会吧。

在这篇文章里面,我将依据作为一个交互设计师的经验,来描述怎样创建顺畅的用户流程。你可能想到水的流动。比方说,雪水流进水流和小溪,然后汇聚到一起,融汇到水库,湖泊和海洋。

为流畅的交互体验,创建完美的用户流程

你可能也会想到空气的流动。你知道高尔夫球表面的凹槽是让空气呈旋涡状围绕在身边(用来减少阻力),比光滑的球飞得更远一些。

为流畅的交互体验,创建完美的用户流程

您还可以在效率方面,去衡量流程的成功率。 来看看美国宇航局和波音公司,今年四月在风洞合作解决的一个流程问题。

这些队伍配备了一架在尾部,可以使飞行流程更有效率的特殊技术波音757。 这有什么影响? 它可以降低燃料燃烧的使用数量,可能会节省数百万美元的航空费用,反过来可以节省机票费用的数百甚至数千美元。

听起来对我们普通大众也是极好的!

交互设计怎样涉及到流程的

所以,这些“流程”的概念有哪些共性呢?

  • 流程描绘运动:运动通过水,通过空气,通过网站,通过APP等进行体现。
  • 流程是多种多样的:流程的多样性可以导致一个高尔夫球飞得更远(或者落得更短);一个飞机飞得更快(或者有更多的阻力);并且使一个在线购物者更容易付账(或者说导致更不愿意付账)

长话短说,流程的概念很重要。您网站或者APP的成功往往取决于您模型流如何满足您的目标用户(或者用户画像)的需求,同样以及您商业的需求。

因为低保真原型缺少视觉细节,用户流程是原型的核心。低保真原型帮助你聚焦在创造对用户来说完成他们目标的最顺利流程。

在脑海中建立用户流程

当你建立了一个用户流程,你应该想的第一件事是什么?

这很显然…当然是你的用户!

比方说,如果你在设计一个商业智力工具,它可以让用户创建报告并且分享他们,将至少有两个流程:一个是为用户数据(比方说用户接收/反复查看报告)设计的流程,和整个数据分析(比方说用户建立/分享报告)的流程。

为流畅的交互体验,创建完美的用户流程

编者建议:如果你想建立你自己的用户画像,你可以在UXPin进行免费试用。在你开始创建原型流程之前,你应该清楚地知道你目标用户的动机和需要。问问你自己,是什么在驱动我的用户以及他们正在试着完成什么?

一旦你创建了你的用户画像,你可以更好地捕捉到用户的目标。指出目标的两面需求,这样就知道你的原型需要做哪些进行完成。

仔细思考目标和来源

如果你在设计一个网站的用户体验,在创建流程之前另一个好的建议是:查明并且画出您的用户从哪里而来。基于Morgan Brown在《停止设计页面开始设计流程》一文中的建议,我们建议您开始思考如下您的网站或者手机原型的各种用户来源:

  • 直接流量
  • 有机搜索
  • 付费广告
  • 社会媒体
  • 推荐网站
  • 电子邮箱

为流畅的交互体验,创建完美的用户流程

不同的入口决定不同的用户行为。查看如下如果某人准备在亚马逊买一部智能手机的假想场景的不同之处。

进行搜索功能的用户:

  • 搜索iPhone的相关介绍
  • 进入亚马逊网站
  • 使用搜索框找到iPhone
  • 浏览更多关于iPhone的介绍
  • 使用搜索框去找三星Galaxy
  • 浏览Galaxy的介绍
  • 回到原来的亚马逊iPhone的店铺
  • 购买iPhone

直接购买者:

  • 进入亚马逊网站
  • 使用搜索框找到iPhone
  • 购买iPhone

现在,我们不是在说购买经验的简单比较(直接购买和进行搜索行为的用户,它们之间总是来来回回穿插着进行的)。我们在说,可是,你必须画出这些不同的流程,为了去做出一个更让人理解的流畅体验。

为查看一些基于这些入口的样例流程,请查看文章《将用户放在心里去建设:怎样设计用户流程》。作者,Peep Laja,建立了三种不同的用户流程,每个流程起源于不同的入口,并且符合具体用户和商业目标。

创建一个概念流程

在这一点,你应该知道:

  • 您将为哪些用户或者用户画像进行设计你的流程
  • 哪些用户和商业目标需要去完成
  • 你的用户来自于哪里(等等观点)

现在你可以想想一个用户在来自一个页面前与后会发生什么。就像在《交互设计最佳联系》所描述的,你可以将你的页面连接起来并且创建尽可能多的你所需要的流程。

一个快速的方法你可以体验不同的页面流程就是创建一个简单的概念流程。在搭建原型之前进行打草稿,用笔画一个草稿可以帮助你体验你APP或者网站最重要的部分 ——即内容。围绕着内容搭建流程将给你一个用户体验所需页面总数更准确的估算。

笔述优先的方法来概述一个流程:

你可以使用笔述优先的方法,Jessica Downey在她的文章《Jumpstarting Your App Conception Without Sketching UI.》中写到过。 这个概述方法可以帮助您了解应用程序或站点每个页面的想法并构建一个“共识”。

让我们创建一个,例如,一个银行APP。场景:有人想打开自动存款功能。注意在下面的大纲中,[括号]里面的内容代表着行动按钮或者链接。

第一步:您想建立自动存款?

[建立自动存款]

第二步:选择存款频率

[每月一次][每月两次][每隔一个星期][每个星期]

第三步:每月一次存款

[选择日期]

第四步:选择数量

确定数目

[建立自动存款]

概述流程的速记方法

你也可以使用Ryan Singer在Basecamp上使用的一种速记方法。Ryan的方法将流程作为持续性的对话。

对于上面的银行APP的例子,我们可以在第二步和第三步的时候创建一个案例,就像这样:

为流畅的交互体验,创建完美的用户流程

为了知道Singer是怎样展示为Basecamp速记的方式以及他是怎样用这个概述过程说明复杂的流程的,查看这篇文章《 A Shorthand for Designing UI Flows》

画出草稿并且做出一个流程原型

现在我们已经准备好为我们框架流程或者速记流程中的每一个页面,创建一个低保真草稿。这些草稿将是你的想法,用更多页面的细节和结构活生生地展现在你的面前。只要你创建了草稿,一个简单的低保真原型可以帮助你使用这些想法去与用户进行沟通。

为流畅的交互体验,创建完美的用户流程

你可以使用很多种方法草稿出用户流程,就像这些文章所示,比方说《these examples of user flows》和在Wireframes Magazine发表的《wire flows》。然而,在承诺任何特定流程之前,请创建一个简单的原型来验证其与用户和商业目标的一致性。 它不需要任何想象力 – 你的原型可以在纸上完成,所以你可以开始了解用户如何在内容和动作之间流动。

为流畅的交互体验,创建完美的用户流程

从那里,您可以继续对纸上的草图进行迭代,并将其剪切出来用于纸张原型,或者转到像UXPin这样的数字原型设计工具。

为流畅的交互体验,创建完美的用户流程

流程的真实案例和他们的拆卸

现在,我们向您展示了创建自己的用户流程并将其转换为草图和低保真原型的过程,我们将为您展示一些用户登录的真实交互流程有趣案例。

为流畅的交互体验,创建完美的用户流程

用户登录是一个很好的场景,它需要特殊的技能来平衡用户需求和商业需求。 用户希望直接进入应用程序,越简单越好。 商业显然也希望用户登入,但他们也希望轻轻推动用户升级他们的计划。为查看我们正在讨论的解构示例,我们强烈建议您使用查看这篇文章《User Onboarding》。

您当然需要掌握有说服力的设计艺术,以创造流动,教育用户,同时帮助他们发现升级的优势。

下一步

掌握用户体验方面,绝对不能代替实践。

我建议您从基本流程开始,如思维导图(使每个框代表用户操作中的一个步骤)。 一旦您感到满意,请随时为每个页面构建线框,然后添加交互,使你的流程用原型进行生动起来。

阁主的总结:

文章交代了流程的概念和共性,以及在建立流程前先要想到用户。考虑用户的不同来源,以及这些来源可能会产生的不同使用场景用户的不同目的与行为。然后再介绍了,创建流程的时候最好先用笔去打草稿,然后再用文字进行过程描述,最后用登录流程来进行了举例,以及建议大家要开始动手开始实践。

 

原文地址:https://www.uxpin.com/studio/blog/creating-perfect-user-flows-for-smooth-ux/

作者:Marek Bowers

专栏作家

Sophiallg,微信公众号:Sophia的玲珑阁,人人都是产品经理专栏作家。一枚爱折腾,爱健身的交互设计妹纸。

本文翻译发布于人人都是产品经理,未经许可,禁止转载

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

(0)
CatherineCatherine
上一篇 2017-04-27 23:23
下一篇 2017-04-28 01:24

相关推荐

  • UI设计师最该考虑微交互的设计

    前言什么是微交互?微交互是用户在完成某个小任务时产生的交互体验。例如,解锁手机就是一个微交互,手机调成震动模式时会震一下也是一个微交互。为什么称为“微交互”呢?所谓的“微”其实就是指的产品的细节设计。微交互正在成为产品设计中越来越重要的部分。正如同Charles Eames曾经所说,“细节并不只是细节,它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘...

    2018-04-20
  • 论数字媒体交互设计的未来

    “交互设计”这一概念如今风靡全球,对于它的研究 与实践受到企业、院校等机构越来越多的关注。现如今交互设计正在呈现出一种放射状成长态势,这使得交互设计没有绝对的定理,都是在共同交流,探索中前进。国内交互设计优秀案例分析在信息全球化的时代,无论是国际还是国内市场,大多数设计机构都在言必称交互,“交互设计师”、“用户体验设计师”已经成为炙手可热的职位。我国也涌现出一批优秀的交互设计师们,其设计出的作品均获得了国内外的一致好评。例如,中央美术学...

    2018-03-03
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19
  • 如何避免交互设计中的「刻板印象 」

    之所以有“刻板印象”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象”。那到底该如何避免它的消极作…

    2017-08-01
  • 【交互基础】系列之解析移动端导航设计模式

    鉴于目前交互设计的知识体系较为混乱,我写了这个[交互基础]系列专题,旨在整理移动端交互设计基础知识。巩固自己的知识体系,也与大家共勉,打好基础,才能飞得更高!

    2017-04-30
  • 基于数据的可用性研究

    小编语:这是一篇关于交互设计与可用性研究的古老的文章,今天小编翻出来给新交互师们看一下~ Thomas Baekdal在The Battle Between Usability and User-Experience中提到,可用性较高的产品并不一定带来好的用户体…

    2015-01-24
  • IxD案例作品分享:我来也”APP概念设计及动效设计

    本作品作者是来自站酷的设计师羊羊羊8571,本文经过作者本人许可。 转载请与作者联系!取得授权。 “我来也”是一款基于手机LBS属性的移动点名签到应用,利用手机应用解决了老师课堂点名,活动签到,会议签到!在工作…

    2015-07-29
  • 交互设计师的60日计划第十八天

    今天一直在以龟速写下周要分享的用研总结。写的过程中总是想这么讲老大会不会pk我,这么讲老大会有什么想法…果然是最近看他们做晋级ppt留下阴影了么…但不论怎么说,做一下这个分享还是挺好的,不然一个星期的时间,…

    交互专题 2015-08-20
  • 最浓缩的概念:一句话明确UI本质,区别真伪UI

    我同意一种观点,成人的知识学习体系最好的其实是慨念性的。因为,我们面对的社会不再是以前学校里老师给方向,让我们去找方法。而是方向我们自己思考自己找,然后针对自己的思考出的方向再去找寻相应的方法。所以,在现实工作生活中,别人的一个方法看似有效,其实未必可行。这也是很多人的成功其实并不可复制是一样的道理。

    2017-05-25
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06