[自译]移动优先还不够:迎接旅程驱动设计

原文链接:Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design

原文作者:Marli Mesibov & Jason Levin

在读这篇文章的时候,会在想通过experience map寻找设计机会和journey-driven design有什么不同,前者可能更多是在一个应用,一款设备上完成目标的系列过程,后者考虑在了跨设备的场景,面向未来的更多类型屏幕,针对这一点,很多工具性产品会显得十分贴合,例如sketch和sketch mirror,会在mobile和desktop之间切换完成制作;频繁地切换设备固然是不好的,就像你要去一个地方,坐几站地铁,上几班公交,骑一小段路,这太麻烦了,所以寻找接触点,找出最理想的旅程非常重要。有一些遗憾的就是文章没有给出一些辨析的参考案例,何时选择何种设备,如何去做切换间的设计,期待在几个月后作者带来的实践案例吧。

在最近的一次,针对未来医疗客户的销售会上,我们的团队在Mad*Pow上听了一个再熟悉不过的问题的答案。我们在会上听完了,以用户为中心的设计基本方法,通过调研和策略引导下一步,一切进展都很顺利。就在要结束的时候,他们团队的老大颓突然问了一句:“你们的设计是移动优先,对吗?”

嗯,这是一个很难回答的问题。

当移动优先的概念,开始作为一种哲学来帮助组织积极内容,设备无差别体验,经费预算,日程安排表,移动优先的结果就是只有移动端。

但是根据我们医疗客户的分析数据,他们大多是的用户仍然在桌面端。我们希望为这些用户提供积极的体验,当然也还有移动端,平板端,手机浏览器上-甚至是提供用户的定制体验!移动端是主要体验的假设并不准确。

我们如今有这么多的设备,不可能假设有人只用移动端

我们得出了结论,移动优先并不能够完全的满足用户需求。真正的以用户为中心的设计,需要从用户正在开始的旅程着手,并跟随他们去完成他们的目标。换句话说,旅程驱动设计。旅程驱动设计很自然地体现了用户为中心的方法-何人,何时,如何做,真正地揭示了复杂的用户需求。好的设计并不会强迫用户去拿起设计师想要用户拿起的设备;好的设计会给用户提供最好的体验,在用户自己选择作为旅程起点的设备上。

移动优先有什么问题吗?

在移动端发展的早期,我们(就设计师而言)本质上还是在为桌面端设计,不过是一个小屏的桌面。UX设计师过去常常思考的事情是用户如何接入网站,视觉如何呈现,怎样的语言和语境帮助用户完成任务,但是我们没有想到屏幕的尺寸改变了。在1999年,我们在800px的画布上工作,然后,扩展到了1024px,1200px。设计师们非常高兴!

随着移动设计的发展,电池寿命的延长和WiFi变得无处不在,我们了解到用户可能接入网站通过他们的移动屏幕。但是对桌面端的设计思维却没有转变。

不同屏幕方案的比较,包括MacBook Pro,iPhone 4,Traditional/XGA/iPad,BlackBerry 8520/HTC Wildfire,Nokia 5228,和Kindle(FlySource)

移动优先的想法是对用户的胜利。2009年,Luke Wroblewski介绍了这个最佳实践。Karen McGrane把她的移动内容策略加入了大讨论,在2012年。他们发现在小屏设计的约束下,会帮助我们优化内容,给终端用户带来更好的体验。此外,移动设备的功能还带来了更多参与体验的机会。

到现在,它仍然只专注一个伟大的体验。一个变化就是功能弱化的概念,如果我们设计完美的体验(通常为桌面端),那些旧版本的浏览器和设备可能不足以确保功能,即使我们设计的很棒。所以,我们尝试着逐步增加,从小的屏幕(移动端)开始,然后随着设备和浏览器的更新而逐渐优化。而不是从一开始就构建伟大的设计。

更重要的是,没人打算将移动优先做成只有移动。

现在是2017年,我们假设每个项目都需要对移动端友好;那么当预算减杀,移动优先就会变成只有移动。毕竟,34%的用户通过他们的智能手机连接网络。在2015年的4月,Google惩罚了那些移动端不适配的网站。但这不是简单的选择移动端或桌面端。许多用户在设备间切换去完成任务,所以重视内容,创造一致性的体验就变得更重要。在医疗领域,有50%的智能手机用户下载健康app。这也意味着有50%的用户不去下载。

在最近的一份移动市场统计报告中,Smart Insights的创始人Dave Chafey分析了报告并做出总结:

尽管智能手机在一些领域势不可挡,像社交媒体,信息,抓住热点新闻和八卦。大多数的西方市场用户都有桌面端和平板端设备,他们会倾向于用来更详细的查阅和购买。

我们有了疑问:患者是会在家打电话诊断然后转向桌面端,还是会在医生的办公室里通过智能手机搜索?买鞋子的用户是会在手机上看几眼完成低额的交易,还是他们会回到家里在平板端完成购买?

联网设备会连接其他设备和我们,就像Apple Watch app帮助人们找到他们的汽车

随着物联网的发展,在线与离线的区别已经逐渐消失。我们的体验更可能是穿梭在手机,笔记本,平板,TV,手表,冰箱,汽车,甚至是厕所之间。像素和尺寸会逐渐被弱化,取代的是响应式设计,自适应内容和用户旅程地图。一个旅程之间没有一个明显的起点,也没有模板可以去参照。为了能够优化移动端之外的屏幕内容,我们需要将旅程视作一个整体。

发现旅程

旅程优先的设计比移动优先更高效,是因为我们关注整个过程。这意味着即使是很少的时间和资金预算,也会用来思考更多的屏幕尺寸。此外,旅程优先提供内容,和时下设计的必要元素,当移动优先设计开始的时候这并不是一个焦点。

在旅程驱动设计的第一步就是绘制旅程,焦点集中在某人如何完成他们的目标,最佳采访对象就是终端用户。大多数的以用户为中心设计项目都有调研这个阶段。这是一个契机去听听用户和潜在用户的心声,了解他们期待的是什么,他们的痛点在哪。他们会使用什么设备,他们体验的过程中需要哪些设备帮助导航。

在调研的基础上,我们创建用户画像,然后绘制出每个画像的理想旅程。包括标记出在完成目标上的接触点。这会多次的业务和画像交流,无论是通过电子邮件,网站,社交媒体,店内访问,电话,邮件或其他方法,这些接触点就是我们实际可以设计的,去构建完整的体验。换句话说,当手机被静默的时候,我们不能去控制用户在户外散步的时候做什么,但是我们可以控制用户所见的内容党他们受到一封来自我们的邮件,当我们不能连接的时候这也会影响到他们的体验。

对于我们医疗客户的一员而言,在我们考虑终端用户如何与保险公司交互的时候尤其明显。尽管病人的目标是得到体检结果,在去医生办公室的路上,他可能会想知道自己需要支付的费用是多少。如果他们在移动网站上去查看,那这就是一个接触点。如果他们在寻找付费窗口,这就是病人的另一个接触点。接触之后,当申请被接受,我们有一个机会去通知用户更新健康内容-这是另一个机会点。

根据接触点显示的关系,一个生态网络可以是宽松或者紧密(Amy Cueva,Mad*Pow)

所有的这些接触点组成了生态网络,这也是我们着手旅程驱动设计的主要工具之一。这个生态网络会帮助我们在网络各个区域建立联系,各种参与物联网的技术,和用户进行的动作。在生态网络中,我们也可以辨识用户在每个数字接触点使用哪种设备。我们可以从用户调研中获取这类信息,或者我们可以通过分析得到,颗粒度可以细化到告诉我们用户会使用何种设备最可能访问哪个页面。

从旅程到设计

了解到接触点和生态网络地图对工作是有帮助的,还需要去设计适合的用户界面和交互方式,去帮助终端用户完成她们的目标。我们需要建立框架或原型,最后可以被开发实现为app或web。

对一些设计师而言,创建生态网络地图或迁移到旅程地图(无论是现状或是理想化的)就像旅程驱动设计本身一样远,在移动到移动优先之前。在所有移动原型中一致性设计是吸引人的,用户会喜欢这种整体感。我们设计师的工作间局势在多样屏幕下去满足用户的需求。我们需要考虑整套交互的独立性。如果我们有位用户的旅程是从移动端开始,但是经过四屏后切换到了桌面,那么我们需要在移动端上设计四屏然后切换到桌面。如果另一个潜在用户(可能是高级用户)的旅程在同样的app却是从平板端开始的,那么我们就该为平板端设计。我们仍然优先考虑内容,也会考虑一些视觉框架。

在设计每个交互之后,问问下面这些问题:

我有为最关键的设备设计吗?

其他设备可能会发挥作用吗?

交互的场景是什么?用户的生理状况如何?

虽然设计不会在一堆移动屏幕上有凝聚力,但是它会符合特定的场景和用户执行行为的理由。另一个好处就是,非线性的思考会鼓励新的设计方法。前端开发者也欢迎在早期的时候能够得到多个屏幕的尺寸框架。这会帮助他们结构化开发工作。

对我们的医疗客户来说,我们草拟了一份理想旅程地图,在每一个接触点上使用便签,用不同的颜色表示不同的设备。当我们了解了旅程中的接触点后,我们开始思考屏幕上的交互方式。我们为六种屏幕设计,更多的可能是在移动端和第四步更大的显示器。我们使用移动优先和响应式设计最佳实践,帮助用户能够更好的在所有设备的屏幕上切换。

一个为关节炎患者设计的项目,我们画出了整个故事版去理解病人,医生,应用和网站之间的接触点。手机上的信息代表了我们要去设计的想法,而不是具体的内容和UI

当时更为重要的是,在连接交互和旅程时,我们作为故事讲述者来提升工作。即使是最好的,最关注用户的设计师也可能会专注具体交互方式时忘记故事。从一个设备迁移到另一个会帮助你重新定位,提醒你用户是谁,他们在哪,他们为什么这么做,他们在做什么,他们最关心的是什么-他们的重点不是在UI上!!

添加内容

设计师与内容工作,这是旅程驱动设计的另一个好处。内容策略者更倾向于辨别屏幕的目标来确定屏幕内容,然后复制这种实现目标的方式到其他关联用户上。在传统的UX设计中,不同内容策略者有不同的方法来确定不同屏幕的目标。但是旅程驱动设计,设计师和决策者会更早的辨别目标或每一步动作。

设计师和内容策略者应该一同工作,通过旅程来考虑每一个接触点。而不是等待在线框图上复制,内容策略可以在生态地图上帮助我们明确目标,这给设计师带来了很大的帮助,特别是在那些和内容紧密联系的工作上。

此外,内容策略需要去考虑内容是静态的还是适应性的。当设计师在旅程中的不同步骤设计不同屏幕时,他们可以提供洞察-内容是如何被感知的。用户是否会分心,哪种情景提示都是内容策略者需要考虑的。

简而言之,旅程驱动设计提供了我们一个更大的视野去减少意外,不会让你脱离项目设计。它保持整个团队一同工作,所有人都参与生态的创建,在设计开始之前,决策是被共享的。

发展和展望

旅程驱动设计的核心,仍然是一种用户为中心的设计。当生态地图绘制完成,理想旅程被规划后,旅程设计的过程和其他的UX项目一样,设计需要为其他的屏幕尺寸设计,根据设备的边界场景检验一致性。可用性测试,改进迭代,这些都是旅程驱动设计的一部分。

想要展开你记得旅程地图?尝试做下面这些工作:

从你的用户调研开始。

询问正确的用户,他们如何完成目标-这是很重要的一步,去辨别当前用户的旅程!

在调研中,留意痛点。

当你了解了痛点之后,很容易通过头脑风暴寻找可能的解决方案。这些可能的方法会成为理想的旅程地图。

当团队开始进行线框图和视觉实际时,在制定设备上开始时不要忽略基本的远离,注视或数字化版本的旅程可以帮助将这些记在心上。

测试旅程。

基于一个旅程设计是很棒的,但是我们需要去确保它能工作!跟进分析去找到用户在哪里减少,用户在旅程上使用哪种设备。然后返回去优化理想的旅程。

我们生活在物联网的时代。不要去假设手机,电脑,平板会是未来的设备。会有更多的设备到来,更多的科技注入我们的房屋,工作地点和通勤。旅程驱动设计允许设计去和科技一同发展。我们开始越来越多的实践,我们希望会在接下来的几个月分享一个案例。

资源

New BBC News Website: Your Reaction,” Niko Vijayaratnam

See why the BBC News website changed to responsive in 2015.

5 UX Demons That Need Exorcising,” Robert Hoekman Jr

The problem with “the fold” and other UX myths.

Designing Digital Strategies, Part 1: Cartography,” Sofia Hussain

An overview of ecosystem maps.

Mobile First,” Luke Wroblewski

Luke’s 2009 explanation of mobile-first.

Adapting Ourselves to Adaptive Content,” Karen McGrane

A presentation that showcases how the web affects our static views of content.

Desktop-First vs. Mobile-First Web Design: What’s Best for Your Business?,” Splash Omnimedia

The pros and cons of desktop- and mobile-first design.

Mobile First Design: Why It’s Great and Why It Sucks,” Code My Views

Graceful degradation, progressive enhancement and how mobile-first design works.

Consumers Take a Multi-Device Path to Purchase,” Steve Olenski

67% of people start shopping on one device and continue on another. See the stats.

The Data Digest: Our Multi-Device Journey Through the Digital World,” Anjali Lai

A look at popular activities that encourage changing devices midstream.

Is Mobile Healthcare the Future? [Infographic],” GreatCall Inc.

An infographic of the ways in which mobile devices are used for healthcare.

30 Amazing Mobile Health Technology Statistics for Today’s Physician,” Jonathan Govette

An article about the ways people interact with healthcare professionals.

How Successful Companies Design for Users’ Multi-Device Lives,” Marc Abraham

A look at the digital ecosystem and designing across devices.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容