那些重要卻容易忽視的用戶體驗

隨著2007年喬布斯從兜里掏出第一代iPhone,智能手機確實被重新定義了。用戶體驗從未如此重要過,也從未如此被理解的如此泛濫。

如同產品經理一樣,用戶體驗也幾乎沒有什么門檻,人人可以認為自己能夠勝任提升用戶體驗的工作??蛇@并不是一項輕易的工作。其中有很多細節容易被人們所忽視。當你專心致志的投入在產品的開發上,很難從客觀的角度去看待各種問題。

我接觸過很多網站和App,手機里也大約裝了150個App。出于職業的關系,只要看到界面還不錯的就會下載下來體驗一下。根據我的使用經驗來整理一些我體會到的容易被忽視的用戶體驗的方面。

容錯性

用戶體驗不僅僅是界面上的事,還有背后使用邏輯上給用戶帶來愉悅的體驗。容錯性即是其中之一。

在Pinterest網頁上,用戶沒有登陸或者第一次打開首頁,網站會在頁面中央放置一個很顯眼的注冊表單。在首頁未登陸狀態僅提供注冊表單的目的自然是為了增加用戶數量。因為想要瀏覽Pinterest中無窮的高質量圖片就需要注冊,當然注冊是免費的。

那么,對于已經注冊的用戶想要在新的電腦上登陸,必然需要在進入首頁之后再點擊右上角并不是很顯眼的登陸按鈕,然后在登陸的頁面路輸入用戶名和密碼登錄。

因此,Pinterest在首頁的注冊表單上做了些優化。已注冊用戶可以直接在注冊表單里輸入用戶名和密碼登錄。在容錯性上多花了點功夫,但是卻帶來了更愉悅的用戶體驗。

不要問我怎么發現的。因為哪天你不在意把注冊框當作登陸框輸入之后發現竟然登陸進去了,我想你一定也會感到很驚奇。

在這個Pinterest的注冊框可以直接登陸

視覺可預見性

可預見性有很多,先來說說視覺上的可預見性。

因為網速的關系,以圖片展示為主的網站頁面自然會加載的比較慢。因此為了緩解用戶等待時的無聊,預先向用戶透露他們將看到什么樣的內容會是較為有效的。

同樣還是Pinterest,因為這個網站就是為了圖片而生,所以對網速的要求也較高。因此在頁面上圖片還沒有加載出來之前,Pinterest會預先分析圖片的主色調,然后先在圖片的位置顯示純色的背景。當圖片加載完成后,再將純色背景替換為相應的圖片背景。

這么做出了可以讓用戶預先知道將要看到的圖片大致是什么樣的色調,更主要的是避免了圖片加載出來之前,頁面上顯示白花花的一片,從而可以達到提升視覺美感的作用。

Pinterest圖片尚未加載出來會預先顯示圖片主色

另一個例子則是Medium,他們做的就更進了一步。相比Pinterest顯示一塊圖片主色調的純色背景,Medium顯示一塊非常模糊的圖片,如同加了半徑很高的高斯模糊效果一般。相比純色,這種方式能夠對圖片有更多的預先了解。目的仍然是同樣的:為了更好的提升視覺美感。

Medium在圖片尚未加載出來會預先顯示模糊化的圖片輪廓

快速使用

讓用戶可以快速的使用一項功能,不要讓用戶等待。將可以省略的步驟省略,將不重要的步驟放在后面操作。避免給用戶初次使用的時間成本過長,而造成用戶的不耐煩。

舉個例子,在知乎中,當你點擊收藏按鈕之后,會彈出一個收藏的分類,必須要勾選至少一個分類之后才能完成收藏的操作,而不能僅僅是添加在收藏的根目錄清單中。這樣的操作會拉長用戶使用的時間,而多了一步操作也讓整個流程變得繁瑣起來。而有強迫癥的人群,比如處女座,也許會在分類之間糾結許久,更不利于結果轉化。

在知乎的這個界面中,要完成收藏必須選擇一個分類

在iOS中,從任何一個App中返回到主界面都使用Home鍵。而在Android中,除了Home鍵可以直接返回主界面,系統還提供了返回鍵,這也能通過一步步返回,回到主界面。而當最后一步從App中返回到系統主界面時,幾乎所有的國產App都會提示“再按一遍退出”。這與系統推薦的操作模式是相悖的,Android中不論是Google原生的應用,還是眾多國外的App,最后一步都是直接返回到主界面,減少了一步操作。雖然避免了用戶誤操作退出應用,但是這樣的場景還是太少。

我認為,這背后的邏輯還是因為國內的App大多還是按照PC上的開發思維來開發移動應用。認為從App返回到系統主界面就是退出,如同Windows上點擊右上角的關閉按鈕。而在移動應用時代,App作為軟件的身份不是那么明顯,而是更類似于系統中的一項服務而存在。這樣對用戶來說,這種體驗使用更順暢。

連貫性

一個App中,菜單按鈕要么都位于左邊或者右邊,返回按鈕都同樣位于左上角,不僅是為了整體的風格統一,還能使操作更連貫。當用戶對一個App很熟悉,就可以保持手指不劃動長距離連續點擊返回按鈕,回到需要的頁面。

舉一個反例。在Evernote中,對現有的筆記進行編輯的按鈕浮動在屏幕的右下角,而當編輯完成后,確認按鈕又在屏幕的左上角。從編輯到完成的流程是線性的,將按鈕的位置保持相對固定是更加有效的方法,不用再讓用戶去尋找下一步操作的按鈕在哪里。尤其是大屏手機,這樣的操作很累人。

更好的方式是即時保存,當用戶從編輯界面返回到了筆記列表,就在后臺自動保存,省去手動保存的步驟更為方便。也避免用戶因誤觸到返回按鈕而丟失正在編輯的內容。這方面,Evernote最大的競爭對手,微軟的OneNote,做的更好。

Evernote中,新建筆記在右下角,完成卻在左上角

慎用全屏

不論是在PC上還是手機上,全屏的功能都應當慎用。進入全屏意味著用戶對全局的掌控力縮小了。而退出全屏要么是把鼠標移動到屏幕的邊緣,或者是在手機屏幕上輕觸一下,才能有退出全屏的按鈕。更好的方法是在App內全屏,保留系統頂部的信號欄,讓用戶對手機當前情況隨時都能了解,Android系統也保留虛擬按鍵,方便用戶快捷操作。

舉個反例,500PX,這個現在與Flickr齊名的,非常受歡迎的攝影社區的安卓版App瀏覽圖片的時候是默認全屏的,安卓的虛擬按鈕都被隱藏了起來。觸摸屏幕并不會退出全屏,而是把UI界面都隱藏,只剩一張圖片。只有從屏幕底部滑動才會呼出信號欄和底部虛擬按鍵。

盡管是這個圖片為核心的App,也很少有圖片能夠完全覆蓋手機的顯示區域。通常我們都習慣于豎著握手機,當看到感興趣的好看的圖片的時候才會橫屏仔細欣賞,但是這樣也很少會利用全部屏幕的區域,而隱藏了虛擬按鍵返回的時候相當的麻煩。

左,默認進入一張圖片以全屏的方式顯示并且不顯示圖片意外任何UI。中,觸摸屏幕任何區域呼出UI,但整個App仍然處于全屏狀態。右,從屏幕上下邊緣滑動才能呼出信號欄和虛擬按鍵

提供緩存

對于需要使用聯網的功能,盡量在本地提供緩存方便用戶快速使用。而在稍后進行數據同步操作,避免用戶使用過程中的等待。

一個典型的例子,500px。幾個月前500px做了一次比較大的改版,原先的收藏功能改為了影集的功能,而且你可以創建多個影集。于是問題也就來了,點擊添加至影集的按鈕會彈出影集的列表,可是500px并沒有做本地的緩存,必須等待從服務器加載好了之后才能選擇。即使你剛剛將一幅圖片添加至影集,App已經獲取過影集的列表,你再次添加另一幅圖片進影集的時候,還是會再一次聯網獲取列表。這個過程可能很快,也可能很慢,尤其是在網絡信號不好,或者快速行駛的地鐵里。以至于有時列表加載出來,我已經忘了原圖是什么樣,應該添加到哪個影集里了。

最好的方式就是在本地提供緩存,等待網絡條件合適的時候再進行數據同步。我思考過背后處理的邏輯,有可能會造成數據沖突,不過這個應該是App開發商解決的問題了。這里我只是拋出問題。

500px中,將圖片添加到影集需要等待列表加載,每張都需要重新加載一次

后臺處理

使用過Instagram的用戶應該會發現,圖片上傳的速度很快,哪怕是上傳一段視頻,都有可能非常快。因為Instagram背后的邏輯是當你開始選中照片開始就在后臺開始上傳,等你完成一系列濾鏡的添加,標題的編輯之后,圖片基本已經上傳好了。

當然這種方式可能會帶來額外的流量消耗,比如用戶中途放棄了,或者選擇了另一張圖。邏輯稍加改進,僅在WiFi網絡下啟用這種預上傳的方式即可輕松解決。

操作的可預見性

操作的可預見性是指用戶在進行了一項動作之前能夠預先知道會發生什么。尤其是當某些重要操作而且無法返回的時候,提前了解后面發生什么很重要,能夠使用戶不會覺得那么迷茫。

操作上的可預見性通常由視覺和使用邏輯組成。一個典型反例就是VSCO,這個牛逼到不行的修圖軟件,卻是我認為最難用的修圖軟件。最大的原因就是VSCO的界面大量使用了純圖標,有些圖標的含義并不好理解,因此導致很多功能只好靠猜。到現在都有一些圖標的功能我沒有猜透。

VSCO中,大量使用了沒有文字標簽的圖標

相反,微軟在Windows8系統中引入了開始屏幕,在開始屏幕的右鍵菜單中,有很多新的操作,微軟在使用了新的圖標之余,還配上了文字,這樣用戶不需要靠猜去理解這個圖標的含義。

Windows 8中,微軟給圖標都搭配了文字標簽

需要注意的是,圖標是很好,但是也要慎用,尤其是超出用戶任職范圍的東西。通常只有垃圾桶,刷新的箭頭,十字叉號,這些常見的圖標不論在哪里用戶都能理解,而剩下的特殊的圖標并不是所有人都能讀懂的,搭配文字是必不可少的。

提供試用

盡可能的給用戶提供試用,而不是一進來就必須注冊。如果你是新的網站或者App更應該如此。用戶從AppStore或者Play市場下載了你的app之后,只是出于興趣,覺得可以嘗試一下。不要一上來就必須注冊,這樣會破壞用戶繼續嘗試的動力。除非你是Facebook或者Twitter,已經足夠有名了,否則大家都不愿意對一款產品有深入了解之前就去注冊。要知道,網絡時代,我們每個人在各種不同網站不同app上注冊的賬號已經夠多了。如果核心功能真的需要注冊才能使用,提供使用Facebook之類的賬號第三方登陸的方式是個不錯的選擇。

不要擬物

不要在界面上模擬實物的感覺。

最典型的就是閱讀工具的模擬翻頁的功能。實物就是實物,app就是app,沒必要在app中模擬實物的感受。實物的感受是模擬不來的,而且更顯得不倫不類。既然載體和紙張根本就是天壤之別的東西,就應該利用好特性會創造出不同的體驗。液晶屏的優勢在于可以隨意調整文字大小,修改自己喜歡的字體,調整眼睛看起來舒服的背景色,而這些是紙無法比擬的,發揮好這些優勢才是關鍵。不要試圖在用戶使用數碼設備閱讀的時候讓他以為正在閱讀一本書,這是不可能的。

Book Bazaar Reader中翻頁效果模擬了真實的翻書效果

總結

這10條用戶體驗并不全是關于用戶界面設計的,有些是關于產品背后的邏輯。當然,用戶體驗從來都不僅僅是用戶體驗上的事,用戶體驗一直存在于各方各面。盡量把自己想象成初次使用的用戶,并從用戶的角度去感受一款產品。不要讓用戶思考,但也不要把用戶當傻逼。

當然這些只是我這么久以來的試用體會,你可能會同意我的看法,也可能不同意。這很正常,這取決于你是如何體會一樣產品的。

其實我不喜歡時不時就搬出用戶體驗這樣的概念。用戶體驗這四個字已經被說濫了,以至于不管做什么產品,都能搬出一大堆關心用戶體驗的論調。但事實是,真正關心用戶體驗的還是少數,更多的是一邊高喊我們關心用戶,一邊強奸用戶的意志。說到底,還是為了賺錢。企業為了賺錢沒錯,但是吃相也別太難看,節操還是要有的。

希望別都像百度看齊,而應該向Google,微軟,亞馬遜,蘋果這些行業代表看齊,學習他們是怎么對待用戶的。請學習星巴克的理念,當你真正關心你的客戶,錢是不怕賺不到的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,845評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 第二步掃描具體局域網所有主機 1、點擊第一個,然后選擇網卡,我的是eth0 2、然后掃描主機,限制性1,后執行2列...
    up_shang閱讀 1,063評論 0 1
  • 任何有人物或擬人的文學作品都會涉及到情感的表達。能夠生動的表達情感,不僅能讓文章更豐滿,讓細節更具體,也能打動人心...
    fengtasy閱讀 1,906評論 0 1
  • LM09:早安,我是耐心,昨天看了《因為有愛,所有話要好好說》的小視頻,對于在乎我們的人,我們的一句話,就可能讓她...
    心羽暖姐姐閱讀 282評論 0 0