《當(dāng)你離開的時(shí)候》，一首來自Tanya的歌，將離別時(shí)的不舍與無奈娓娓道來。然而本篇并不是一片音樂介紹，并不會(huì)細(xì)說那些戀人分手時(shí)的傷感情懷。在這里我想聊的是交互設(shè)計(jì)中當(dāng)用戶完成編輯任務(wù)，離開當(dāng)前頁面或浮層時(shí)候的一些事兒。

我從實(shí)習(xí)開始，最初接觸到的功能模塊就是“設(shè)置”。在產(chǎn)品的設(shè)置模塊中，當(dāng)用戶完成設(shè)置編輯任務(wù)便會(huì)離開當(dāng)前頁面或浮層，跳轉(zhuǎn)到另一個(gè)頁面。編輯完成之后離開，這種行為看起來自然平常，可是經(jīng)常也會(huì)發(fā)生一些意外，比如：電商商戶王尼瑪興致勃勃地花了一個(gè)小時(shí)，在某電商后臺(tái)中編輯了一長溜店鋪資料，然后看到右上角“新消息”的入口上突然出現(xiàn)一個(gè)小紅點(diǎn)。“有戲！”王尼瑪手賤地點(diǎn)擊了一下“新消息”，然后什么都沒有保存頁面就這么跳轉(zhuǎn)過去了……

圖片發(fā)自簡書App

生命中的一小段又被喂了狗的感覺。

當(dāng)然，沒有保存的錯(cuò)誤跳出放在當(dāng)下有交互設(shè)計(jì)的電商公司應(yīng)該都不會(huì)出現(xiàn)了，畢竟編輯后離開場景的安全性應(yīng)該也算是常識(shí)了。編輯功能不僅僅在設(shè)置頁面存在，內(nèi)容編輯、篩選項(xiàng)編輯、預(yù)訂商品內(nèi)容編輯等等都牽涉到編輯功能。編輯完成之后離開頁面或浮層，會(huì)牽涉到用戶已編輯內(nèi)容的保存問題。再擴(kuò)展一些，編輯后離開還牽涉到用戶什么時(shí)候可以退出，以及退回位置和退回后狀態(tài)變化的問題。雖然都是小問題，但是如果不仔細(xì)考慮，很容易在產(chǎn)品框架階段就埋下低級(jí)錯(cuò)誤隱患，后來改起來就很費(fèi)時(shí)費(fèi)力了。

這里就用戶編輯后離開這個(gè)場景，梳理一下基本的設(shè)計(jì)原則。

1. 防錯(cuò)性與可見性：避免錯(cuò)誤跳出

防錯(cuò)性是編輯后離開場景下交互設(shè)計(jì)的首要問題。“永遠(yuǎn)不要讓用戶覺得自己是傻子”，作為交互設(shè)計(jì)師，我們應(yīng)當(dāng)理解用戶很多時(shí)候就會(huì)是不動(dòng)腦地去操作，然而這不等于我們要用交互去讓他們認(rèn)識(shí)到自己的傻。“我剛剛好傻啊，怎么沒有保存”、“我怎么那么傻，手賤點(diǎn)了那個(gè)按鈕”，如果用戶總是在我們的界面上覺得自己被愚弄了，不能做任何報(bào)復(fù)的他們只能放棄使用來和平地表達(dá)抗議。

避免用戶出錯(cuò)，就要避免用戶莫名其妙地離開了編輯狀態(tài)。比如一個(gè)編輯頁面上不要有編輯無關(guān)功能的入口，因?yàn)槲覀儫o法阻止用戶的好奇心。

同時(shí)，保存按鈕的高可見性也會(huì)防止用戶莫名其妙地點(diǎn)擊別處。

如果一定會(huì)有別的入口，那么我們可以考慮邊編輯邊保存。這看起來固然是一個(gè)安全的好方法，但是這樣做帶來的緩存負(fù)擔(dān)以及用戶希望撤銷編輯時(shí)候的尷尬我們也不能不考慮。

2. 安全性：離開保存，彈窗提示

當(dāng)我們確實(shí)無法采用減少入口或邊編輯邊保存的方式防止用戶犯錯(cuò)的時(shí)候，我們應(yīng)該至少給他們一個(gè)提醒：“Hey buddy， 你這么做是在搞事情。”

提醒浮層突兀且尷尬，但是并不失為一種有效的安全措施。特別是當(dāng)我們希望顯得自己對(duì)用戶很友好的時(shí)候，這里是交互設(shè)計(jì)師們盡情發(fā)揮情感化文案設(shè)計(jì)的場所。當(dāng)我們希望挽留用戶，或者鼓勵(lì)用戶多寫點(diǎn)啥的時(shí)候，這也是一塊好的交流地。

當(dāng)然，首先用戶要愿意理你。

3. 可預(yù)見性與反饋

確保用戶編輯行為的安全無虞之后，交互還需要確保的一點(diǎn)是不要讓用戶迷失。如果離開后來到一片和之前完全沒有聯(lián)系的新頁面，難保用戶不會(huì)問出人生三大問題。因此編輯之后離開到達(dá)的頁面應(yīng)當(dāng)是可預(yù)見的，而不是讓用戶去理解滄海桑田。

當(dāng)然，很可能的，用戶在編輯完成離開后，之前的頁面因?yàn)榫庉嫯a(chǎn)生的結(jié)果已經(jīng)完全不一樣了（如編輯店鋪頁面），或者因?yàn)榫庉嬏峤坏慕Y(jié)果而到了下一步頁面（比如編輯支付內(nèi)容然后提交）。這個(gè)時(shí)侯，反饋的重要作用就體現(xiàn)出來了。在頁面內(nèi)給用戶清晰地反饋，讓他們知道經(jīng)歷了蛻變或旅途后他們已經(jīng)到達(dá)一個(gè)新的地點(diǎn)。有時(shí)候這樣的反饋還可以加點(diǎn)小驚喜。

4. 流暢性：用戶想看結(jié)果，而不是等待

編輯完成離開后，一般用戶最關(guān)心的就是編輯得到的結(jié)果。在這個(gè)時(shí)候，任何炫酷卻拖拉的動(dòng)效都可能是糟糕的。用戶體驗(yàn)應(yīng)當(dāng)是流暢的，動(dòng)效的存在應(yīng)當(dāng)給用戶建立適當(dāng)?shù)恼J(rèn)知模型。但是編輯過程的特殊性在于，編輯本身是產(chǎn)生結(jié)果的，編輯后離開有既定的認(rèn)知預(yù)期，就是看到結(jié)果。此時(shí)的動(dòng)效就像魔術(shù)師的戲法，干凈利落的可以讓用戶得到投入后收獲的喜悅，而冗長的動(dòng)效只會(huì)讓用戶想去揍那個(gè)魔術(shù)師。指示可以有，但更重要的是流暢。

其實(shí)編輯后離開是一個(gè)很小的交互設(shè)計(jì)點(diǎn)。但在我遇見過的設(shè)計(jì)中，從小公司的初創(chuàng)產(chǎn)品到大廠的成熟產(chǎn)品，都出現(xiàn)過這樣的問題。也許有的頁面編輯重量確實(shí)不大，但是一點(diǎn)點(diǎn)細(xì)節(jié)上的不安全或者不爽慢慢就會(huì)演變?yōu)閷?duì)于整個(gè)用戶體驗(yàn)的不認(rèn)可。而且交互設(shè)計(jì)師的追求就應(yīng)當(dāng)是把握每個(gè)細(xì)節(jié)的用戶體驗(yàn)，難道不是嗎？

1922

20170528 @ Home

圖片發(fā)自簡書App