移動(dòng)優(yōu)先還不夠好：滿足網(wǎng)頁(yè)設(shè)計(jì)旅程驅(qū)動(dòng)的設(shè)計(jì)

在最近的針對(duì)潛在醫(yī)療客戶的銷售會(huì)議中，我們Mad * Pow的團(tuán)隊(duì)發(fā)現(xiàn)自己正在回答一個(gè)非常熟悉的問(wèn)題。我們介紹了以用戶為中心的設(shè)計(jì)的基本方法，同意在研究和策略上進(jìn)行領(lǐng)導(dǎo)，并且一切進(jìn)展順利。正當(dāng)我們總結(jié)時(shí)，他們的團(tuán)隊(duì)負(fù)責(zé)人突然問(wèn)：“哦，你們?cè)O(shè)計(jì)的是移動(dòng)優(yōu)先，對(duì)嗎？”嗯，這是一個(gè)很難回答的問(wèn)題。盡管“移動(dòng)優(yōu)先”的概念最初是一種幫助優(yōu)先考慮內(nèi)容并確保積極的，與設(shè)備無(wú)關(guān)的體驗(yàn)的理念，但預(yù)算和調(diào)度約束通常導(dǎo)致“移動(dòng)優(yōu)先”僅意味著“移動(dòng)”。雖然“移動(dòng)優(yōu)先”的概念最初是一種幫助優(yōu)先考慮內(nèi)容并確保積極的，與設(shè)備無(wú)關(guān)的體驗(yàn)的哲學(xué)，但預(yù)算和調(diào)度約束通常導(dǎo)致“移動(dòng)優(yōu)先”僅適用于移動(dòng)設(shè)備。但是根據(jù)我們醫(yī)療客戶的分析數(shù)據(jù)，他們的大多數(shù)用戶仍在桌面上。我們希望為那些積極的用戶體驗(yàn)，并在手機(jī)和平板電腦的應(yīng)用程序，為用戶和那些使用移動(dòng)瀏覽器-甚至對(duì)于具有親身體驗(yàn)的用戶！認(rèn)為移動(dòng)是主要體驗(yàn)是不準(zhǔn)確的。

我們得出的結(jié)論是，移動(dòng)優(yōu)先不能滿足用戶的需求。真正以用戶為中心的設(shè)計(jì)需要從我們的用戶所經(jīng)歷的旅程以及為完成其目標(biāo)而遵循的流程開(kāi)始。換句話說(shuō)，旅程驅(qū)動(dòng)的設(shè)計(jì)。旅程驅(qū)動(dòng)的設(shè)計(jì)自然是從以用戶為中心的方法中產(chǎn)生的，該方法考慮了誰(shuí)，何時(shí)以及如何顯示真正復(fù)雜的用戶需求。良好的設(shè)計(jì)不會(huì)迫使用戶選擇我們?cè)O(shè)計(jì)人員希望他們使用的設(shè)備；好的設(shè)計(jì)可以為用戶提供公司在其旅途中想要使用的設(shè)備上所能提供的最好的服務(wù)。

移動(dòng)優(yōu)先有什么問(wèn)題？

在移動(dòng)世界的早期，我們（通常是設(shè)計(jì)人員）基本上是為臺(tái)式機(jī)……小屏幕臺(tái)式機(jī)設(shè)計(jì)的。用戶體驗(yàn)設(shè)計(jì)師習(xí)慣于思考諸如用戶如何訪問(wèn)網(wǎng)站以及完成任務(wù)所需的視覺(jué)，語(yǔ)言和上下文線索之類的事情，但是我們沒(méi)有考慮屏幕尺寸的變化。在1999年，我們僅使用800像素。然后，我們擴(kuò)展到1024，然后是1200。設(shè)計(jì)師感到欣喜！

隨著移動(dòng)設(shè)計(jì)的改進(jìn)，電池壽命的延長(zhǎng)以及Wi-Fi的普及，我們了解到用戶很可能會(huì)通過(guò)移動(dòng)屏幕訪問(wèn)網(wǎng)站。但是，臺(tái)式機(jī)的所有設(shè)計(jì)注意事項(xiàng)都無(wú)法很好地體現(xiàn)出來(lái)。

移動(dòng)優(yōu)先是用戶的勝利。2009年，Luke Wroblewski引入了此最佳實(shí)踐。Karen McGrane在2012年與她的“移動(dòng)內(nèi)容策略” 添加到對(duì)話中。他們發(fā)現(xiàn)，在小屏幕的約束下進(jìn)行設(shè)計(jì)有助于我們確定內(nèi)容的優(yōu)先級(jí)，從而為最終用戶帶來(lái)更好的體驗(yàn)。此外，移動(dòng)設(shè)備的功能為參與體驗(yàn)留下了更多的機(jī)會(huì)。

盡管如此，它只專注于一項(xiàng)出色的經(jīng)驗(yàn)。一種變體集中在優(yōu)雅降級(jí)的概念上，它建議我們?cè)O(shè)計(jì)一個(gè)完美的體驗(yàn)（通常用于臺(tái)式機(jī)），然后通過(guò)確保功能來(lái)考慮較舊的瀏覽器和較不常見(jiàn)的設(shè)備，即使設(shè)計(jì)遭受損失。同樣，我們嘗試了漸進(jìn)式增強(qiáng)，建議先從小型（移動(dòng)）開(kāi)始，然后在設(shè)備或?yàn)g覽器變大時(shí)增強(qiáng)設(shè)計(jì)。兩者都不占整個(gè)領(lǐng)域的出色設(shè)計(jì)。

而且，更重要的是，沒(méi)有人打算首先將移動(dòng)設(shè)備視為僅移動(dòng)設(shè)備。

現(xiàn)在是2017年，我們認(rèn)為每個(gè)項(xiàng)目都必須是適合移動(dòng)設(shè)備的；因此，當(dāng)預(yù)算減少時(shí)，移動(dòng)優(yōu)先會(huì)變成僅移動(dòng)。畢竟，有34％的人主要是通過(guò)手機(jī)使用互聯(lián)網(wǎng)，而自2015年4月起，Google對(duì)那些無(wú)法在手機(jī)上使用的網(wǎng)站進(jìn)行了處罰。但是選擇并不像移動(dòng)或臺(tái)式機(jī)那么簡(jiǎn)單。許多用戶將設(shè)備切換為任務(wù)中的設(shè)備，這使我們更加關(guān)注內(nèi)容并在各種體驗(yàn)之間建立一致性變得尤為重要。在醫(yī)療保健領(lǐng)域，有50％的智能手機(jī)用戶下載了健康應(yīng)用程序 -這也意味著50％的用戶尚未下載。

在有關(guān)移動(dòng)營(yíng)銷統(tǒng)計(jì)的最新報(bào)告中，Smart Insights的創(chuàng)始人Dave Chafey分析了這些報(bào)告并得出以下結(jié)論：

現(xiàn)實(shí)情況是，盡管智能手機(jī)在社交媒體，消息傳遞以及新聞和八卦等一些活動(dòng)中非常受歡迎，但西方市場(chǎng)的大多數(shù)消費(fèi)者還擁有臺(tái)式機(jī)（和平板電腦）設(shè)備，他們傾向于將其用于更詳細(xì)的信息。審查和購(gòu)買(mǎi)。

我們必須問(wèn)：患者是通過(guò)在家中的電話來(lái)診斷，然后轉(zhuǎn)到桌面還是在醫(yī)生辦公室用手機(jī)搜索？那個(gè)鞋店購(gòu)物者是不是在偷看他們的手機(jī)以進(jìn)行更便宜的在線交易，還是他們回家并在平板電腦上進(jìn)行購(gòu)買(mǎi)？

隨著物聯(lián)網(wǎng)的擴(kuò)展，在線和離線之間的鴻溝已經(jīng)消除，我們的體驗(yàn)很可能會(huì)跨越手機(jī)，筆記本電腦，平板電腦，電視，手表，冰箱，汽車甚至衛(wèi)生間！像素和尺寸意味著遠(yuǎn)遠(yuǎn)不及響應(yīng)式設(shè)計(jì)，自適應(yīng)內(nèi)容和旅程映射。有沒(méi)有明顯的出發(fā)點(diǎn)的旅程，并沒(méi)有明確的模板可循。為了優(yōu)先處理內(nèi)容并為移動(dòng)設(shè)備以外的屏幕設(shè)計(jì)，我們需要將旅程作為一個(gè)整體來(lái)關(guān)注。

探索旅程

使旅程優(yōu)先設(shè)計(jì)比移動(dòng)優(yōu)先設(shè)計(jì)更有效的原因是，我們正在整體上看待該過(guò)程。這意味著即使預(yù)算很小，也需要花費(fèi)時(shí)間和金錢(qián)來(lái)考慮設(shè)計(jì)更多屏幕尺寸的想法。此外，旅程優(yōu)先提供了上下文，這是當(dāng)今設(shè)計(jì)的必要元素，而移動(dòng)優(yōu)先設(shè)計(jì)開(kāi)始時(shí)并不是重點(diǎn)。

旅程驅(qū)動(dòng)設(shè)計(jì)的第一步是繪制旅程本身，重點(diǎn)關(guān)注某人如何實(shí)現(xiàn)目標(biāo)，而問(wèn)得最好的人是最終用戶。大多數(shù)以用戶為中心的設(shè)計(jì)項(xiàng)目已經(jīng)從研究階段開(kāi)始。這是一個(gè)機(jī)會(huì)，可以聽(tīng)取用戶或潛在用戶的意見(jiàn)，并了解他們的期望，他們的痛點(diǎn)以及在體驗(yàn)中使用的設(shè)備。

在研究的基礎(chǔ)上，我們創(chuàng)建角色，然后繪制每個(gè)角色的理想旅程，包括記錄實(shí)現(xiàn)最終目標(biāo)的每個(gè)接觸點(diǎn)。這是企業(yè)和角色之間通過(guò)電子郵件，網(wǎng)站，社交媒體，商店訪問(wèn)，電話，郵寄或其他方式進(jìn)行溝通的時(shí)期。這些接觸點(diǎn)將是我們可以實(shí)際設(shè)計(jì)的，以便塑造出完整的體驗(yàn)。換句話說(shuō)，我們不必控制用戶外出散步時(shí)手機(jī)靜音時(shí)的操作，但是我們可以控制用戶收到我們的電子郵件時(shí)看到的內(nèi)容，這將影響用戶他們沒(méi)有連接時(shí)的經(jīng)歷

對(duì)于我們的一位醫(yī)療保健客戶，當(dāng)我們考慮最終用戶如何與保險(xiǎn)公司進(jìn)行互動(dòng)時(shí)，這一點(diǎn)變得尤為明顯。盡管患者的目標(biāo)是獲得實(shí)驗(yàn)室檢查結(jié)果，但在前往醫(yī)生辦公室的途中，患者可能會(huì)想知道自己的共付額是多少。如果他們檢查了移動(dòng)網(wǎng)站以進(jìn)行登錄，那么這就是我們的接觸點(diǎn)。如果他們?cè)卺t(yī)生辦公室尋找列出典型自付額的跡象，那是另一個(gè)潛在的接觸點(diǎn)。預(yù)約后，在提出索賠后，我們將有機(jī)會(huì)通過(guò)電子郵件向患者發(fā)送更新-另一個(gè)接觸點(diǎn)。

所有這些接觸點(diǎn)都在一個(gè)生態(tài)系統(tǒng)網(wǎng)絡(luò)中融合在一起，這是我們從事旅程驅(qū)動(dòng)設(shè)計(jì)時(shí)的主要工具之一。生態(tài)系統(tǒng)網(wǎng)絡(luò)將幫助我們?cè)诰W(wǎng)站區(qū)域，物聯(lián)網(wǎng)所涉及的其他各種技術(shù)以及用戶所采取的行動(dòng)之間建立聯(lián)系。在生態(tài)系統(tǒng)網(wǎng)絡(luò)上，我們還可以識(shí)別角色在每個(gè)數(shù)字接觸點(diǎn)上使用的設(shè)備。我們可能從用戶研究中了解到了這些信息，或者我們可以從分析中收集到了這些信息，這些信息的粒度是如此之細(xì)，以至于告訴我們網(wǎng)站上哪些頁(yè)面最受哪些設(shè)備訪問(wèn)。

從旅程到設(shè)計(jì)

知道接觸點(diǎn)并設(shè)計(jì)生態(tài)系統(tǒng)圖是一件好事，但仍然存在設(shè)計(jì)適當(dāng)?shù)挠脩艚缑婧徒换ヒ詭椭罱K用戶實(shí)現(xiàn)其目標(biāo)的問(wèn)題。我們?nèi)匀恍枰獦?gòu)建最終可以開(kāi)發(fā)為應(yīng)用程序或網(wǎng)站的線框或模型。

對(duì)于某些設(shè)計(jì)師而言，創(chuàng)建生態(tài)系統(tǒng)圖或?qū)⑵滢D(zhuǎn)變?yōu)槁贸虉D（無(wú)論是當(dāng)前的還是理想的）都取決于旅程驅(qū)動(dòng)的設(shè)計(jì)，然后再回到移動(dòng)優(yōu)先。在移動(dòng)大小的模型中查看所有設(shè)計(jì)的一致性很有吸引力，并且涉眾喜歡這種凝聚力的感覺(jué)。但是我們作為設(shè)計(jì)師的工作是根據(jù)需要的各種屏幕來(lái)出售它們。我們需要獨(dú)立考慮每組交互。如果有一個(gè)理想的用戶旅程始于移動(dòng)設(shè)備，但是在四個(gè)屏幕切換到桌面之后，那么我們需要為移動(dòng)設(shè)備設(shè)計(jì)四個(gè)步驟，然后再切換到桌面。如果同一應(yīng)用中的另一個(gè)預(yù)期用戶旅程（也許是高級(jí)用戶的旅程）在平板電腦上開(kāi)始，那么我們應(yīng)該從平板電腦設(shè)計(jì)開(kāi)始。如果手表上還有其他表殼，那就是我們開(kāi)始的地方。

在設(shè)計(jì)每個(gè)交互之后，請(qǐng)問(wèn)以下關(guān)鍵問(wèn)題：

• 我是否已針對(duì)最關(guān)鍵的設(shè)備進(jìn)行了設(shè)計(jì)？
• 還有哪些其他設(shè)備可以發(fā)揮作用？
• 這種互動(dòng)的背景是什么？我的用戶實(shí)際在哪里？

盡管這些設(shè)計(jì)不會(huì)像一堆移動(dòng)屏幕那樣具有凝聚力，但是它將具有用戶場(chǎng)景的上下文及其特定動(dòng)作的原理。另外一個(gè)好處是，這種非線性思維方式將鼓勵(lì)采用新的設(shè)計(jì)方法。另外，前端開(kāi)發(fā)人員喜歡盡早為每種屏幕尺寸獲得幾個(gè)屏幕。它可以幫助他們安排開(kāi)發(fā)工作。

對(duì)于我們的醫(yī)療保健客戶，我們?cè)诒愫炆侠L制了一個(gè)理想的行程圖，每個(gè)接觸點(diǎn)使用一個(gè)便簽，每種可能的設(shè)備使用不同的顏色。一旦理解了旅程中的接觸點(diǎn)，我們就可以根據(jù)屏幕上的交互進(jìn)行思考。我們?cè)O(shè)計(jì)了用于平板電腦的每個(gè)屏幕，以及最可能在移動(dòng)設(shè)備上完成的六個(gè)屏幕和最可能在較大的臺(tái)式機(jī)顯示器上完成的四個(gè)屏幕的變體。我們使用了移動(dòng)優(yōu)先和響應(yīng)式設(shè)計(jì)的最佳實(shí)踐，從而使屏幕吸引了所有設(shè)備的用戶。

但最重要的是，我們通過(guò)將互動(dòng)與旅程聯(lián)系起來(lái)，改善了作為講故事者的工作。即使是最出色，最關(guān)注用戶的設(shè)計(jì)師，當(dāng)他們開(kāi)始專注于個(gè)人互動(dòng)時(shí)，也可能會(huì)忘記敘述。從一種設(shè)備轉(zhuǎn)移到另一種設(shè)備將幫助您更新自己，一次又一次提醒您用戶是誰(shuí)，他們?cè)谀睦?，他們?yōu)槭裁丛谧鲎约旱墓ぷ饕约八麄兊闹饕P(guān)注點(diǎn)是什么-特別是當(dāng)他們的關(guān)注點(diǎn)不在時(shí)在您的用戶界面上！

添加內(nèi)容

對(duì)于使用內(nèi)容的設(shè)計(jì)師，旅程驅(qū)動(dòng)設(shè)計(jì)還有另一個(gè)好處。內(nèi)容策略師傾向于通過(guò)確定屏幕的目標(biāo)是什么來(lái)計(jì)劃屏幕內(nèi)容，然后提供副本以實(shí)現(xiàn)該目標(biāo)并獲得所有相關(guān)消息。在傳統(tǒng)的UX設(shè)計(jì)中，不同的內(nèi)容策略師使用不同的方法確定任何給定屏幕的目標(biāo)。但是，通過(guò)旅程驅(qū)動(dòng)設(shè)計(jì)，設(shè)計(jì)師和策略師將盡早確定目標(biāo)或行動(dòng)發(fā)生的每一步。

設(shè)計(jì)師和內(nèi)容策略師應(yīng)共同努力，考慮整個(gè)旅程中每個(gè)接觸點(diǎn)的目標(biāo)。內(nèi)容策略師可以等到最終在線框圖中寫(xiě)副本時(shí)，才可以幫助確定生態(tài)系統(tǒng)映射過(guò)程中的目標(biāo)，這使設(shè)計(jì)師可以設(shè)計(jì)出與內(nèi)容緊密結(jié)合的東西。

此外，內(nèi)容策略師還需要考慮哪些內(nèi)容是靜態(tài)的，哪些內(nèi)容是自適應(yīng)的。當(dāng)設(shè)計(jì)師為旅程的不同步驟設(shè)計(jì)不同的屏幕時(shí)，他們可以洞悉內(nèi)容的感知方式，用戶是否會(huì)分心以及內(nèi)容策略師應(yīng)考慮哪些其他線索。

簡(jiǎn)而言之，以旅程為導(dǎo)向的設(shè)計(jì)為我們提供了一個(gè)廣闊的視野，可確保您越少進(jìn)入項(xiàng)目，驚喜越少，工作也就越容易。它使整個(gè)團(tuán)隊(duì)保持合作，所有人都參與生態(tài)系統(tǒng)的創(chuàng)建，以便在設(shè)計(jì)開(kāi)始之前盡早共享決策。

不斷發(fā)展壯大

從本質(zhì)上講，行程驅(qū)動(dòng)設(shè)計(jì)仍然只是以用戶為中心的設(shè)計(jì)的另一種形式。映射生態(tài)系統(tǒng)并確定旅程后，旅程驅(qū)動(dòng)的設(shè)計(jì)將像其他任何UX項(xiàng)目一樣進(jìn)行。需要為其他屏幕尺寸創(chuàng)建設(shè)計(jì)，然后檢查跨設(shè)備的一致性以解決邊緣情況。可用性測(cè)試，修改和迭代與其他任何過(guò)程一樣，都是旅程驅(qū)動(dòng)設(shè)計(jì)的一部分。

想要開(kāi)始使用自己的旅程圖？嘗試以下步驟：

1. 從用戶研究開(kāi)始。向當(dāng)前成員詢問(wèn)他們?nèi)绾螌?shí)現(xiàn)目標(biāo)-這是識(shí)別當(dāng)前用戶旅程的好方法！
2. 在研究過(guò)程中，尋求痛點(diǎn)。當(dāng)您了解痛點(diǎn)時(shí)，集體討論潛在的解決方案就容易多了。這些潛在的解決方案成為理想的用戶旅程。
3. 跟蹤旅程中的步驟。當(dāng)團(tuán)隊(duì)進(jìn)入線框和視覺(jué)設(shè)計(jì)時(shí)，請(qǐng)不要忽略在其指定設(shè)備上開(kāi)始每一步的基本原理。注釋或旅途的數(shù)字化版本可以幫助您時(shí)刻關(guān)注這些問(wèn)題。
4. 測(cè)試旅程。基于旅程進(jìn)行設(shè)計(jì)很棒，但是接下來(lái)我們需要確保它可行！跟蹤分析，找出人們?cè)谀睦锵萝囈约把赝臼褂玫脑O(shè)備。然后返回并改善理想的旅程。

我們生活在物聯(lián)網(wǎng)中。假裝手機(jī)，臺(tái)式機(jī)或平板電腦將成為未來(lái)之路是沒(méi)有用的。還有更多的設(shè)備可以使用，還有更多的技術(shù)可以注入我們的房屋，工作場(chǎng)所和通勤場(chǎng)所。旅程驅(qū)動(dòng)的設(shè)計(jì)允許設(shè)計(jì)隨著技術(shù)的發(fā)展而擴(kuò)展和發(fā)展。我們開(kāi)始越來(lái)越多地實(shí)踐這種做法，并希望在接下來(lái)的幾個(gè)月中分享一兩個(gè)案例研究。