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

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


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

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

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

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

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

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

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

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

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

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

这些队伍配备了一架在尾部,可以使飞行流程更有效率的特殊技术波音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

相关推荐

  • 线上讲座 | 送你一份全新的交互设计指南ヾ(゚∀゚ゞ)

    ▲ 向左滑动查看更多导师作品摘要:上期Designer Talk 我们邀请到的UI设计师Coraline,以“对现代科技发起交互”为媒介,来传达她所创作的艺术呈现,不知道同学们有没有通过对非现场性艺术分享,使思想脱离理性范畴,继而进行创作性的探索与尝试。本期Designer Talk我们将借助符号性的语言,将碎片化的艺术凝结在一起,打破虚无与现实桎梏,为您呈现全新的交互设计。关键词:交互设计 / 当下全新的非完美呈现分享导师Jason本...

    2018-04-19
  • 在WEB/UI的交互设计中运用格式塔心理学理论

    UI或UX分析需求主要是以人机交互界面为主,而这个需求不仅仅是一些设计、视觉使用体验,在这里体验当中,我们可适当运用一些心理学,比如格式塔理论就是一个很好的分析法。[图片]格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。由马科斯·韦特墨(1880-194

    微信热点 2018-02-04
  • 窥探交互设计师成长之路指南!

    一部窥探交互设计师成长之路的实用指南!传授高效、靠谱的交互设计学习方法!IAMUE网站创始人倾力之作!

    2016-06-13
  • 帮助视觉设计师高效工作的三大招

    互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。

    2017-05-05
  • 在网页设计中,如何运用方框/方形元素?

    如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

    2017-05-07
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 做设计,为什么总是心里没底?

    相信有很多小伙伴和我一样,经历过“做设计,心里没底”的情况,说的直接点就是“找到好参考就能做好,找不到好参就做不好,即使做出了好作品,也觉得带有一定的偶然性!”为什么会这样呢?最近菜心对这个问题感触颇深,所以想和大家分享一下自己的经验。ps:今天的干货是sketch4.1安装包及中文教程,大家可以自行下载。下载地址:https://pan.baidu.com/s/1c2oZkQW(无需密码)

    2017-05-05
  • UX设计师们,扔掉那些UX设计工具吧!

    “你以你的方式做你的事,我们想让你以完全相同的方式做你的事,但是是用更少的时间并且和更多的远程的人一起做这件事。““如果产品设计是为在各自职务中被束缚的人们解决问题,那么很多自称产品设计师、UX设计师的人事实上是职业的数字艺术家。他们是艺术家、是装饰上的设计师、是美工,但是不是一个职业的产品设计师……”仅仅是目前服务于我们设计师的技术,是不再会领导我们走向成功的。“我们相信制造降低软件开发门槛的产品是非常有必要的。事实上,我们对这类新的程序非常感兴趣。这可能是人们编写程序的更好方式,一旦诞生就将带来巨大的冲击。构架更合理,语言更精简,但很可能我们会去做同样的事。思考这样一个事情:程序语言接下来会面临什么呢?”

    2017-05-26
  • 交互设计要点&配色趋势

    色彩在任何一种设计中都起着很重要的作用,相差不多的色彩却能渲染出截然不同的情感效果。因此,好好利用色彩与生俱来的魅力,就能让你的网页设计更特别。 1Metro和柔和鲜嫩的色彩 Odam Luiran的网站是Metro风格,…

    2015-12-08
  • 人鸡交互 VS 人机交互

    交互就是一名翻译官,一个机器和人类的翻译官。

    2017-05-06