用戶至上的設(shè)計(jì)細(xì)節(jié)@設(shè)計(jì)譯言

今天翻譯的這篇文章是 Medium 上的熱門(mén)文章 User is the king
(part 1)价卤,作者站在用戶的視角捷绒,總結(jié)了一系列當(dāng)下產(chǎn)品設(shè)計(jì)的問(wèn)題京郑,并給出了自己的見(jiàn)解和解決方案电禀。下面進(jìn)入譯文幢码。


『下載 app → 打開(kāi) → 啟動(dòng)畫(huà)面 → 閱讀教程 → 注冊(cè) → 等候 → 授權(quán) app 發(fā)送通知 → 授權(quán) app 使用地理位置 → 邀請(qǐng)朋友 → …』

作為一個(gè)熱愛(ài)研究移動(dòng) app 的產(chǎn)品設(shè)計(jì)者,我每周都要下載大量不同的 app ——以此來(lái)尋找新奇的交互與視覺(jué)設(shè)計(jì)靈感尖飞。偶爾能見(jiàn)到一些酷炫有趣的設(shè)計(jì)症副,但大多數(shù)時(shí)候都會(huì)感到沮喪,因?yàn)樵S多 app 并不懂得尊重它們的用戶政基。

這兒有一些基本的設(shè)計(jì)原則贞铣,把它們引入你的 app 中,可以優(yōu)化你的 app 并讓用戶用得更爽沮明。

在這個(gè)系列的第一部分中辕坝,我將提到以下幾點(diǎn):

  • 如何獲得(用戶的)授權(quán)許可
  • 「注冊(cè)」這個(gè)難題
  • 優(yōu)秀的加載界面

請(qǐng)求授權(quán)

第一次打開(kāi)一個(gè) app,就立馬被要求允許它給你發(fā)送通知——沒(méi)有什么比這更讓人惱怒的了荐健。當(dāng)你連任何相關(guān)的介紹都沒(méi)有看到酱畅,就有一個(gè)彈窗直接砸在你的臉上——『我想每天都給你發(fā)垃圾信息喲』琳袄。基本上這種情形一旦發(fā)生纺酸,我就會(huì)立馬刪除這個(gè) app窖逗,因?yàn)槲艺J(rèn)為『它完全不懂什么是用戶體驗(yàn),所以我也不可能會(huì)在其中看到什么有意思的東西餐蔬』海』

試想你剛邁入一家餐廳,服務(wù)員就突然出現(xiàn)在你面前用含,說(shuō)『給我您的郵件地址好嗎矮慕,我們會(huì)每天都給您發(fā)送會(huì)員通訊的』。這是多么無(wú)禮的行為啄骇?如果你是餐廳的主人痴鳄,你會(huì)這么干嗎?

我都還沒(méi)來(lái)得及了解這家餐廳缸夹,也沒(méi)吃過(guò)它的食物痪寻,憑什么會(huì)想要訂閱他的會(huì)員通訊啊虽惭?

在 app 里和真實(shí)世界里是一樣的橡类,我們需要借助一些手段和時(shí)機(jī)向用戶請(qǐng)求授權(quán)。不管這是為了給他們發(fā)送通知芽唇,還是訂閱服務(wù)顾画,或是要求提供信用卡信息等等。

我通常是這樣做的匆笤,你也應(yīng)該這樣做——首先研侣,使用一個(gè)與 app 設(shè)計(jì)風(fēng)格一致的界面,「禮貌地」向用戶請(qǐng)求授權(quán)并且「解釋」為什么你需要這個(gè)授權(quán)炮捧。

有些 app 的工作原理完全依賴于用戶的地理位置庶诡,比如 Uber。它是這樣做的:

第一次打開(kāi) Uber 后的提示界面

譯:允許『Uber』在您使用該應(yīng)用程序時(shí)訪問(wèn)您的位置嗎咆课?
Uber 會(huì)抵達(dá)您目前所在的位置并接您上車(chē)末誓。如果開(kāi)始搭乘,請(qǐng)選擇『允許』书蚪,這樣應(yīng)用程序才能查找到您的位置喇澡。

這是最基本的 iOS 模態(tài)窗口。如今每個(gè)人都知道什么是 Uber 了善炫,但假設(shè)我不知道呢撩幽?當(dāng)我不允許它使用我的地理位置時(shí),會(huì)發(fā)生什么箩艺?

不允許 Uber 使用地理位置后的提示

譯:地點(diǎn)服務(wù)被禁用
請(qǐng)?jiān)谠O(shè)置 → 隱私 → 地點(diǎn)服務(wù)中打開(kāi)地點(diǎn)服務(wù)窜醉。

我不得不在搜索框里手動(dòng)輸入我的地理位置,或是去設(shè)置里打開(kāi)地點(diǎn)服務(wù)才能繼續(xù)使用艺谆。不管選擇哪個(gè)榨惰,都不是好的用戶體驗(yàn)。

實(shí)際這個(gè)問(wèn)題只需要簡(jiǎn)單的一步就能避免:

原作者的優(yōu)化方案

譯:Uber
每個(gè)人的私人司機(jī)
為了輕松地接到您并送您到想去的地方静汤,請(qǐng)?jiān)试S我們使用您的地理位置琅催。
(您的信息不會(huì)被共享給任何人,它在我們這兒是安全的)

增加這個(gè)彈窗并不會(huì)花費(fèi)多大功夫虫给,而且就算這是使用 app 之前額外的一個(gè)步驟藤抡,它也不會(huì)有什么壞影響。因?yàn)樗宫F(xiàn)出你對(duì)用戶的關(guān)心抹估。它告訴用戶缠黍,他們隱私是安全的,并且你希望把盡可能好的體驗(yàn)帶給他們药蜻。

「注冊(cè)」這個(gè)難題

在我的上一個(gè)創(chuàng)業(yè)產(chǎn)品 WhoWanna 中瓷式,我曾深陷在如何更好地吸引新用戶,以及如何讓新用戶擁有最棒的初體驗(yàn)這件事上语泽。因?yàn)樵?WhoWanna 中贸典,用戶如果不先注冊(cè)并邀請(qǐng)幾個(gè)朋友來(lái)用的話,就根本沒(méi)法繼續(xù)使用踱卵。
譯注:WhoWanna 是一個(gè)社交 app廊驼,用戶可以提出一個(gè)活動(dòng)提案,以此吸引有興趣的朋友來(lái)參加惋砂。故必須先注冊(cè)并邀請(qǐng)朋友來(lái)用才有意義蔬充。

如果你認(rèn)為只需增加一個(gè) 『Facebook 登錄』按鈕在 app 上,就能輕易解決所有的注冊(cè)難題的話班利,那你絕逼就只是個(gè)鍵盤(pán)俠而已饥漫。

誠(chéng)然,F(xiàn)acebook / twitter / google 賬號(hào)登錄的確很棒并且很有用罗标。但問(wèn)題是庸队,不是每一個(gè)用戶都會(huì)去使用它們。所以究竟該如何確保用戶會(huì)在你的 app 里新建一個(gè)賬戶呢闯割?

首先要證明 app 的價(jià)值

我們常見(jiàn)的注冊(cè)流程有一點(diǎn)兒傻彻消。雖然它大多數(shù)時(shí)候能解決問(wèn)題,但仔細(xì)想想宙拉,就會(huì)發(fā)現(xiàn)它的用戶體驗(yàn)并不好宾尚。

常見(jiàn)的注冊(cè)流程 啟動(dòng)界面 → app 介紹(登錄& Facebook 登錄)→ 邀請(qǐng)朋友 → app 主界面

在大多數(shù) app 中,都會(huì)有一個(gè)實(shí)際上并沒(méi)有什么人會(huì)認(rèn)真看的簡(jiǎn)介或者小教程。接著煌贴,你就需要注冊(cè)才能繼續(xù)使用了御板。

在這樣一個(gè)虛擬的世界里,你會(huì)在還沒(méi)有體驗(yàn)過(guò) app 的情況下牛郑,就先把自己的個(gè)人信息都交給它嗎怠肋?

讓「注冊(cè)」這個(gè)流程變得難搞的原因,是許多 app (如 WhoWanna)工作原理是基于用戶的個(gè)人信息的淹朋。

如果可以的話笙各,請(qǐng)?jiān)谀愕?app 里增加一個(gè)「免注冊(cè)瀏覽」的功能。你會(huì)發(fā)現(xiàn)用戶一旦體驗(yàn)過(guò) app 之后础芍,就會(huì)了解這個(gè) app 對(duì)他們是有價(jià)值的杈抢,接著就會(huì)自發(fā)地注冊(cè)一個(gè)賬號(hào)了。而且經(jīng)歷過(guò)這個(gè)流程的用戶仑性,將會(huì)成為你 app 的擁躉惶楼,因?yàn)樗麄兪峭耆l(fā)自內(nèi)心的想要注冊(cè)的。

一次只問(wèn)用戶要一項(xiàng)信息

有時(shí)候虏缸,為了讓用戶獲得盡可能好的體驗(yàn)鲫懒,你會(huì)需要一大堆的他的個(gè)人信息。但填表這種事最讓人煩躁了刽辙。而且更糟糕的事窥岩,是你發(fā)現(xiàn)填完之后并沒(méi)什么卵用。

舉個(gè)例子宰缤,我打開(kāi)一個(gè)購(gòu)物網(wǎng)站颂翼,它并不會(huì)馬上問(wèn)我要信用卡和個(gè)人信息。它會(huì)一直等啊等慨灭,直到我真正「買(mǎi)東西」時(shí)才會(huì)出現(xiàn)朦乏,以此來(lái)避免過(guò)早的干擾。另外氧骤,直到我付完錢(qián)之后呻疹,網(wǎng)站才終于讓我去創(chuàng)建一個(gè)賬戶了。(如果這個(gè)網(wǎng)站做的足夠好的話筹陵,還會(huì)再給我一個(gè)下次購(gòu)物時(shí)可以使用的折扣碼)

這對(duì)于所有的產(chǎn)品都是一樣的刽锤。當(dāng)我下載好了一個(gè)看起來(lái)很棒的 app,我就會(huì)迫不及待的想趕緊試一試朦佩。如果真的有必要的話并思,我會(huì)提供我的用戶名和郵箱地址。但是千萬(wàn)不要在一開(kāi)始就問(wèn)我的性別和生日语稠。請(qǐng)多等一會(huì)宋彼,并告訴我為什么你需要這些信息。

優(yōu)秀的加載界面

當(dāng)你在和他人交談時(shí),對(duì)方會(huì)回應(yīng)你输涕。不一定是使用言語(yǔ)音婶,也可以是肢體動(dòng)作或者眼神。對(duì)方總會(huì)用一些動(dòng)作來(lái)響應(yīng)你的動(dòng)作占贫。同理桃熄,當(dāng)人與機(jī)器交互時(shí)也是這樣先口。一旦用戶發(fā)起一個(gè)動(dòng)作型奥,軟件就必須做點(diǎn)什么來(lái)響應(yīng)他。

如今碉京,大多數(shù)應(yīng)用在處理加載過(guò)程時(shí)都使用了「菊花」旋轉(zhuǎn)的動(dòng)畫(huà)厢汹,它無(wú)處不在并且永不停歇。

「菊花」加載動(dòng)畫(huà)

你是否曾在餐廳里經(jīng)歷過(guò)上菜之前長(zhǎng)時(shí)間的冷落谐宙?也根本不知道廚師有沒(méi)有在做你點(diǎn)的菜烫葬?更糟糕的是,也沒(méi)有服務(wù)員來(lái)告訴你大概需要等待多久凡蜻。這是多么痛苦的經(jīng)歷啊搭综。你絕逼不會(huì)再去這家餐廳或者推薦給朋友了。

沒(méi)錯(cuò)划栓,使用「菊花」加載界面就是這樣一種糟糕的體驗(yàn)兑巾。我,作為用戶忠荞,是在等待你的 app 給我提供服務(wù)蒋歌,并且說(shuō)服我繼續(xù)使用你。我并不欠你任何東西委煤,也不是非用你的 app 不可堂油。可見(jiàn) app 的使用體驗(yàn)必須盡可能的流暢和令人愉悅碧绞。那么為此我們能做些什么呢府框?

進(jìn)度條

第一步,向用戶展示你 app 當(dāng)前的進(jìn)度讥邻。進(jìn)度的展現(xiàn)形式不局限于百分比迫靖,圓圈,或者直線——任何你能想到的形式都可以计维。這個(gè)進(jìn)度條將給予用戶及時(shí)反饋和指引——『你需要等「這么」久袜香,并且你現(xiàn)在在「這個(gè)位置」』。

Dribbble 上的各種進(jìn)度條

我不推薦一種進(jìn)度條形式鲫惶,即不論發(fā)生什么蜈首,都把用戶的整個(gè)屏幕完全遮住,并迫使用戶等待。

根據(jù)所加載內(nèi)容的類(lèi)型欢策,可以使用一些小技巧來(lái)讓某些使用場(chǎng)景變得高效吆寨。

2013年時(shí),Youtube 開(kāi)始使用一種新的進(jìn)度條——它鎖定在視窗頂部踩寇,5 像素高啄清,顏色為 Youtube 紅。這是目前最棒的進(jìn)度條之一俺孙,并且許多人都因?yàn)槠渚傻脑O(shè)計(jì)而借鑒了它辣卒。

Youtube 進(jìn)度條

這個(gè)進(jìn)度條不僅告訴用戶,在加載完成之前還需要等待多久睛榄。與此同時(shí)荣茫,這個(gè)加載方式,還使得用戶在等待的同時(shí)场靴,可以繼續(xù)進(jìn)行操作啡莉。

一旦你的 app 使用了 『逐步加載』策略之后,使用的體驗(yàn)就會(huì)得到很大的提升旨剥。

比如你要加載一個(gè)網(wǎng)頁(yè)咧欣,它包含了大量的圖片、文字轨帜、鏈接魄咕、視頻和精美的圖形等等。這個(gè)頁(yè)面加載完畢后也許會(huì)很好看阵谚,但是如果我想要看的東西在剛開(kāi)始就已經(jīng)加載好了呢蚕礼?我為什么還要等待整個(gè)頁(yè)面都加載完畢?假設(shè)我想要的搜索結(jié)果梢什,就是搜索時(shí)第一個(gè)加載出來(lái)的東西奠蹬,我為什么還要等待其他的結(jié)果?

永遠(yuǎn)不要在加載頁(yè)面時(shí)禁止用戶做其他事情嗡午,因?yàn)槟阌肋h(yuǎn)猜不到用戶打算在頁(yè)面上干嘛囤躁。

取悅你的用戶

無(wú)論如何,總有一些情況是需要用戶等待的荔睹,比方說(shuō)登錄和注冊(cè)的過(guò)程狸演。

你還記得當(dāng)你還是一個(gè)小鬼時(shí),在餐廳里等吃飯的場(chǎng)景嗎僻他?那是多么的漫長(zhǎng)和無(wú)聊啊宵距。幸運(yùn)的是,我的母親有一個(gè)時(shí)刻裝著鉛筆和白紙的包包吨拗。我把這些等待的時(shí)間用來(lái)畫(huà)畫(huà)和玩游戲满哪,于是整個(gè)過(guò)程都很快樂(lè)婿斥。

當(dāng)用戶在你的 app 里等待時(shí),他手里是拿著一個(gè)功能強(qiáng)大且連著網(wǎng)的觸摸式設(shè)備的哨鸭。我相信民宿,你已經(jīng)想到了一些不錯(cuò)的點(diǎn)子。讓我們學(xué)習(xí)一下視頻游戲吧像鸡。為了加載一些屌炸天的動(dòng)畫(huà)場(chǎng)景(特別是在過(guò)去)活鹰,你必須等待很長(zhǎng)一段時(shí)間。于是游戲設(shè)計(jì)者們?cè)O(shè)計(jì)了一些很棒的小游戲讓你在等待的時(shí)候可以玩只估。

龍珠天下第一武道會(huì)的加載界面

與用戶交談

兩個(gè)人之間最好的溝通方式是對(duì)話并且交流想法志群。在某些時(shí)候,言語(yǔ)就是最好且最簡(jiǎn)單的溝通方式仅乓。而人機(jī)之間的交互設(shè)計(jì)赖舟,溝通也是關(guān)鍵蓬戚。這并不復(fù)雜夸楣,只需要你在進(jìn)度條下面增加一段描述,用來(lái)告知用戶目前在發(fā)生什么就好了子漩。通過(guò)這個(gè)描述豫喧,你可以給予用戶更準(zhǔn)確的信息,并且讓你的 app 顯得更有人情味幢泼。

記住紧显,千萬(wàn)不要只寫(xiě)『正在加載一些超棒的東西』,因?yàn)檫@句話完全沒(méi)卵用缕棵。最好是給出真實(shí)的信息孵班。

技巧與教學(xué)

運(yùn)動(dòng)游戲你應(yīng)該玩過(guò)吧?雖然游戲手柄上有一大堆按鈕招驴,但正確的組合技能卻通常很難被按出來(lái)篙程。于是乎,游戲加載界面上就常常被設(shè)計(jì)用來(lái)展示『技巧與教學(xué)』的內(nèi)容别厘。試想一下虱饿,當(dāng)你在游戲剛開(kāi)始的時(shí)候,就已經(jīng)學(xué)會(huì)了『X + L1 + Left』是施放曲線射門(mén)触趴,是不是超屌的氮发?

某觸屏足球游戲的技巧與教學(xué)界面

以上譯文僅代表原作者觀點(diǎn)。原作者 Benjamin Berger冗懦,原文 User is the king (part 1)爽冕。設(shè)計(jì)譯言原創(chuàng)翻譯,如需轉(zhuǎn)載請(qǐng)先聯(lián)系我披蕉,并注明出處『設(shè)計(jì)譯言』及本文地址颈畸。
如對(duì)文章翻譯版權(quán)有異議前塔,請(qǐng)聯(lián)系我。If you have any problem about the translation rights, please contact me.


歡迎關(guān)注 @設(shè)計(jì)譯言 的微信公眾號(hào):shejiyiyan

設(shè)計(jì)譯言微信公眾號(hào)二維碼
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末承冰,一起剝皮案震驚了整個(gè)濱河市华弓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌困乒,老刑警劉巖寂屏,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異娜搂,居然都是意外死亡迁霎,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)百宇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)考廉,“玉大人,你說(shuō)我怎么就攤上這事携御〔粒” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵啄刹,是天一觀的道長(zhǎng)涮坐。 經(jīng)常有香客問(wèn)我,道長(zhǎng)誓军,這世上最難降的妖魔是什么袱讹? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮昵时,結(jié)果婚禮上捷雕,老公的妹妹穿的比我還像新娘。我一直安慰自己壹甥,他們只是感情好救巷,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著盹廷,像睡著了一般征绸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俄占,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天管怠,我揣著相機(jī)與錄音,去河邊找鬼缸榄。 笑死渤弛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的甚带。 我是一名探鬼主播她肯,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼佳头,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了晴氨?” 一聲冷哼從身側(cè)響起康嘉,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎籽前,沒(méi)想到半個(gè)月后亭珍,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡枝哄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年肄梨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挠锥。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡众羡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蓖租,到底是詐尸還是另有隱情粱侣,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布菜秦,位于F島的核電站甜害,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏球昨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一眨攘、第九天 我趴在偏房一處隱蔽的房頂上張望主慰。 院中可真熱鬧,春花似錦鲫售、人聲如沸共螺。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)藐不。三九已至,卻和暖如春秦效,著一層夾襖步出監(jiān)牢的瞬間雏蛮,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工阱州, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挑秉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓苔货,卻偏偏與公主長(zhǎng)得像犀概,于是被迫代替她去往敵國(guó)和親立哑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容