被誤用的移動體驗設計模式

0 評論 2889 瀏覽 205 收藏 16 分鐘

序言

伴隨著移動端的迅速發(fā)展,移動端的設計也越來越多樣,為了做出差異化,設計師們與產品經(jīng)理絞盡腦汁想帶給用戶不同的體驗。然而,在使用者習慣與創(chuàng)新設計上,兩者的確很難權衡與拿捏。當我在翻譯這篇文章時,并不知道它已經(jīng)被很多人翻譯過,但我還是決定將再次翻譯后的文章發(fā)布出來,我想無論是對我自己,還是對設計師們,這篇文章都將一直提醒著我們。

正文

在經(jīng)驗豐富的設計師眼里,界面設計過程中受到其他作品的啟發(fā),并不能算是抄襲。學習研究其他優(yōu)秀案例、它們的設計模式、界面設計中遵循的準則,能幫助設計師確保用戶在使用自己的設計時,更加容易上手,并創(chuàng)建出更有效的交互界面。

也許有人會說遵循相同的指導準則并沿用他人的思路會扼殺設計師自己的創(chuàng)造力,他們還認為,到最后所有的App看起來都會是類似的。作為一名用戶體驗設計師,我看到的問題卻恰恰不同。如果用戶習慣了去適應那些優(yōu)秀案例,就會讓你覺得,谷歌/ Facebook/ Instagram/[以及你最喜歡的其他App]的設計永遠是對的,你會認為你的設計目標要跟他們一樣,這樣的后果就是,你會失去質疑的能力。下面有一些設計模式,它們常常被認為或者曾經(jīng)被認為是優(yōu)秀案例,但其實并沒有你一開始以為的那么優(yōu)秀。

  1. 隱藏導航欄

一個漢堡式的菜單大概至少能隱含五十萬個圖標,盡管它們大都是設計師自己設計的,但他們自己也反感這種菜單??偟膩碚f,問題并不是出在圖標本身,而是圖標背后隱藏的導航欄。

這種解決方案對設計師來說是非常誘人和便利的:你不必擔心有限的屏幕空間,你可以把整個導航欄設計成一個可滾動的層級結構,然后將其隱藏到默認的圖標后面。

然而實驗表明,如果將隱藏菜單上的選項顯化,可以有效增加用戶的參與度、滿意度,甚至可增加應用的收入?,F(xiàn)在所有的大用戶都拋棄漢堡式菜單而轉用更加清晰的菜單模式,將常用導航選項始終對用戶可見,原因大概也在于此。

1*HxvIr5FvQREUlRPOW6DjZA

 

YouTube導航欄的變化(盧克·萊夫斯基)

 

  1. 無處不在的圖標

盡管屏幕空間有限,但全部用圖標來代替所有的文本標簽,以求盡可能節(jié)省空間也是十分愚蠢的。通常設計師會認為圖像占用空間更少,也不需要進行本地化翻譯,況且人們也很熟悉這些圖標,對吧?何況其他的App也都這么做。

基于這一假設,App設計師有時會在圖標后隱含一些功能,而實際上這些功能用戶通常很難察覺。比如你會猜測,點擊Instagram上的這個圖標后,是否可以直接發(fā)送消息。

1*WJul2IqwxPjJSZjV410Kew

 

或者,假設你從來沒用過谷歌翻譯,你希望下面這個圖標隱藏著什么功能呢?

 

1*EN1VhczvRDU-_ZgSxGDDrA

設計師們通常會犯這樣一個錯誤,那就是認為自己的用戶熟悉這些圖標,或者他們愿意花費額外的時間來探索和學習這些圖標。

1*WfFfK2vgkJZpAt_X3mtqag

Bloom.fm上的神秘標簽

如果你設計了一個圖標,但是需要一個彈出標簽來配合它使用,即使你執(zhí)意這么使用或者你的用戶也愿意學習這個圖標,這個設計也是失敗的。

1*S2F9LXkCwzwhh49Kx4S1oA

Swarm的圖標提示

這并不意味著你不能使用任何圖標。有很多圖標你的用戶是很熟悉的,它們主要指代的是搜索、視頻播放、電子郵件、設置等一些常用功能。不過用戶也可能不完全熟悉這些常用圖標,有時他們仍然不確定點擊這些圖標之后究竟會發(fā)生什么,比如點擊一個心形的圖標。

1*qpegFY61TA5vLYax2oJQVA

有些圖標受到了廣大用戶的認可,可被視為通用

 

而一些復雜和抽象的圖標,需要配有相應的文本標簽以作提示。在這種情況下,圖標仍然有效,因為它們可以增強菜單欄的探索功能,這些圖標也會使你的App更加人性、界面更加友好。

1*mcAzk4G4KedsK4zkmccJHw

Pixelmator的導航欄

 

基本功能可以通過圖標來有效表示,但對于一些隱含復雜功能的圖標,需要添加文本標簽來配合使用。如果你需要使用這些圖標,那么一定要對它們的易用性進行測試。

  1. 手勢導航

當蘋果公司在2007年推出iPhone的時候,多點觸控技術受到了主流關注,用戶也認識到他們不僅可以在界面上進行圖標點控,還可以縮放和滑動界面。

手勢變得廣受設計師歡迎,現(xiàn)在很多App都被設計成以手勢控制為主。

1*er9FQTn-xNlB67IBUr_sWg

Clear 應用中的手勢導航

 

就像隱藏導航欄和使用圖標代替文本標簽一樣,設計師使用手勢控制也是為了節(jié)省屏幕空間,這也是手勢控制最吸引設計師們的一點?!高@樣的話就沒必要設計刪除按鈕了,人們只需要左滑或者右滑屏幕就好了。不過向左還是向右是由我們決定的?!?/p>

關于手勢控制,首先要注意的是,他們總是隱藏的,用戶必須記住這些手勢。但后果就是,這些手勢跟漢堡式菜單一樣:如果選項隱藏起來,那么用戶使用就會減少。

此外,手勢控制和圖標存在相同的問題,盡管大多數(shù)用戶已經(jīng)熟悉了一些手勢,比如點擊、縮放和滾動等,但不同應用還有其獨特的手勢需要用戶來發(fā)掘和學習。

不幸的是,大多數(shù)的手勢并不符合規(guī)范,并且不同應用間還會出現(xiàn)手勢交叉??偟膩碚f,手勢控制在觸摸界面設計中還是一個較新的領域。即使是一個簡單的手勢,比如滑動一封郵件,不同的應用中呈現(xiàn)的方式也大不相同。

1*py1ZWbnmx2OOZbbwOqwcqA

在Apple Mail中向右滑動,可將已讀郵件標記為未讀
1*hOLUXfOAN0xi1_peJVKXag

 

在Mailbox中同樣的手勢則表示郵件歸檔

 

還有,晃動設備在iOS系統(tǒng)中可能意味著撤消操作,而在谷歌地圖中則意味著發(fā)送反饋。

千萬記住一點,手勢控制是一種隱藏的控制方式,用戶需要記住這些手勢,這就意味著要加大在用戶端的投入。如果你是Tinder,那么你也許能讓全世界記住向右滑動意味著什么——但使用它的前提是它是你App概念的一個重要組成部分。

4.覆蓋式引導界面

用戶引導是一個新近興起的用戶體驗設計熱門話題,它指的是對初次使用某一App的用戶進行引導。在許多情況下,這一過程通常表現(xiàn)為將引導以覆蓋頁面的形式呈現(xiàn)給用戶,講解如何使用界面:

1*liRpLFXuCR_tJfkVasnuog

dcovery中的引導標記

 

為什么有人說這是一個不好的解決方案呢?因為很多用戶會跳過介紹這一部分;他們只想盡快開始使用應用。即使他們注意到了你的教程,在教程結束的那一刻他們也都會忘得一干二凈,尤其當教程信息填滿整個屏幕的時候,他們更不可能記住了。最后一點,也是很關鍵的一點就是:在交互界面加入引導標記會影響產品的可用性。記住這一點:

1*_0nvWssK2-ecxC5tUusfxg

用戶界面跟笑話一樣,如果用戶需要你的解釋才能懂,那么這就不是個好的設計。資料來源:Startup Vitamins

 

用戶引導可以通過其他的模式來實現(xiàn),對用戶來說也會更加有效。比如說,Slack通過第一張載入界面來創(chuàng)建一些內容,在這張界面上,該應用只是對其功能進行了簡單介紹,注重效益,而不是界面設計和功能。

漸進式的用戶引導可以通過更具交互性的方式來吸引初次使用的用戶。在初次載入界面中,多鄰國并沒有解釋該應用是如何運作的,它甚至鼓勵用戶跳過這些步驟,直接做快速測試選擇語言,這些不需要登陸就可以完成,因為學習一個App的最好方式就是通過直接操作。此外,這也能更直接地向用戶顯示其價值。

1*h9HKihyqW3vm-A5tVi1IBQ

還記得滑動手勢在Mailbox和Apple Mail中的不同之處嗎?這就是它們漸進式用戶引導的工作原理:用戶通過操作來快速演練所有的手勢,在這一過程中他們將熟悉這些手勢的使用:

1*xjSw-UyHLwnOs-QKRCMtsQ

在設計一個半透明的覆蓋式引導標記之前,停下來想一想,用戶的初次體驗應該是怎樣的。設計師要專注于界面環(huán)境的上下文。在大多數(shù)情況下,總會有更好的方式來歡迎你的用戶。

5.富有創(chuàng)意卻不直觀的空狀態(tài)

空狀態(tài)很容易被缺乏經(jīng)驗的設計師忽略,而涉及到一個App的整體用戶體驗時,空狀態(tài)是十分重要的衡量因素。

有時候,設計師會將錯誤消息和空狀態(tài)視為空白畫布,在這些畫布上,他們可以做一些創(chuàng)造性的設計。

以谷歌圖片的空狀態(tài)界面為例:

1*gC7yEp1Z9u3KBrRplwdbmQ

谷歌照片的空狀態(tài)畫面

 

乍一看,這個畫面似乎很大,對不對?布局完好,并且遵循了設計準則,上面還有一個漂亮的圖形。

再看一眼就會發(fā)現(xiàn)畫面中有一些奇怪的地方:

  • 1)如果用戶沒有收藏任何位置的話,那么界面上為什么會有一個顯眼的搜索按鈕?拿它來搜索什么呢?
  • 2)其次突出的一點就是,盡管大家會去嘗試點按界面上的圖標,但它顯然是不可點的。
  • 3)提示說我應該尋找頂部的「+」號按鈕,這對用戶來說是十分尷尬的。為什么提示本身不包含添加按鈕?這就像提示繼續(xù)按鈕的時候說「點擊繼續(xù)按鈕來繼續(xù)」一樣。

以上這個空狀態(tài)界面并不能幫助用戶了解上下文情境:

  • 1)什么是收藏?它們有什么用嗎?
  • 2)為什么我沒有收藏的內容?
  • 3)如果我能操作的話,要怎么操作呢?

當談到創(chuàng)意時,少即是多。在有效性方面,下面這個空狀態(tài)界面就做得十分出色。讓我們先忽略那個「現(xiàn)在點擊下面的按鈕」的指令。

1*QilGqIJL--Po_UzywRu1nA

Lootsy的空狀態(tài)界面

 

不要忘了,空狀態(tài)(也就是類似經(jīng)常出現(xiàn)的404網(wǎng)頁的界面)不僅需要有視覺美感和品牌個性,它們更需要有可用性。設計師應該讓它們更加直觀。

質疑一切

不要誤會我的意思:設計模式和優(yōu)秀案例仍然是你的朋友。但請記住,App和用戶是不同的:一個解決方案可能適用于某一個App,但并不適用于你的。每個解決方案都不是萬能的。另外,你永遠也不會知道為什么一個App要設計成某個特定的樣子。

自己動腦思考,做你自己的設計,自己去調研。

測量,測試,驗證——如果你的想法更有效的話,那就不要在意它是否違背某些設計準則。

原文出處: medium???譯文出處:37點2度體驗 – 師尹

更多精彩內容,請關注人人都是產品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!