介面的易操作性與反饋機制

發表於2015-12-20

現代圖形使用者介面建立在直接操作螢幕上圖形物件的概念上,既實現看見——操作——反饋的過程,本文主要圍繞兩個部分,一個為介面的易操作性,另一個為反饋機制的設計。前一個部分從三個遞進的部分說起,單個元素到多個元素最後至任務的整體性。反饋機制的設計是為了讓操作更符合使用者的心理,好比一個貼心的管家,讓使用者的每一步的操作都能有所預知。

1.介面的易操作性

單個元素

把一個介面進行劃分,單個元素比如一個按鈕、一行文字、一個icon,一個滑塊等等,這些單個元素是組成這個介面最基礎的東西,它們如果單靠本身是無法承擔起一個任務的,但每個元素的設計妥當,對整體將產生很大的影響。

舉一個例子谷歌翻譯的手寫圖示

 

谷歌翻譯中第三個按鈕的含義是開啟手寫功能,但在我第一次使用它的時候,我並不能很好的預知這代表了一個怎樣的功能,因為在以往的APP使用過程中,並沒有遇見過這樣的icon。相比谷歌,我倒覺得印象筆記的這個icon更能說明含義當然這也只是我一家之言。

 

而對比這個手寫icon,左邊的照相機和話筒,我能很快的反應過來,代表的是拍攝和語音錄入,究其原因,我覺得一方面是因為這兩個圖形的可識別性非常強,可以讓使用者很快的聯想到相關的事情,而一根彎彎曲曲的曲線並不能讓使用者有一個很強的聯想;另一方面是因為在以往的其他的APP的使用過程中,已經多次的見過這兩個icon,這兩個功能比較常見,這也是為什麼當一個icon已被賦予了一個通用的含義以後,改變它所對應的功能,將冒著非常大的風險,就比如紙飛機代表發資訊,而設計師把它對應為了撤銷功能;圖片代表了開啟相簿或則加入圖片,而設計師把它設計為了開啟攝像頭。

再舉一個例子,VSCO的幾個控制元件

 

VSCO的icon的設計雖然很有特點,但沒有文字說明,也沒有任何的隱喻,這對於新手使用者而言簡直就是災難,即使一個已經使用過VSCO的使用者,他也沒有辦法記住每一個icon背後的含義。而且強迫使用者去記憶一個icon的功能,肯定不是我們所希望的。假如在藝術性和易用性之間做取捨,一個面向使用者的產品應該毫不猶豫的選擇易用性。

多個元素

多個元素相比單個元素需要更強的邏輯性和層次性。因為它不再是單獨的一個元素,而是一個組合,組合依賴的是它們彼此間的聯絡。比如一個樂隊,有主唱、吉他手、貝斯手以及鼓手等等,每個人負責不一樣的部分,但都代表著一種音樂的演奏方式,即它們之間的共性,所以它們可以組合在一起。比如前文提到的印象筆記中的這一組,它們代表的是不同的輸入方式,所以被放在了一起。

 

而不同元素的組合除了他們的共性以外,有的還因為組成了一個流程或者一個步驟,比如常見的註冊框,需要使用者先輸入手機號,再填寫驗證碼,驗證碼的填寫框旁邊一般會有一個傳送驗證碼的按鍵,收到了驗證碼,便可以將它填入填寫框內。驗證碼的填寫框和獲取驗證碼的按鈕就代表一個子流程,因此組合在了一起。

 

整體

多個元素組成了一個又一個的組織以後,就形成了一個器官,器官的作用是非常強大的,它可以完成一系列的任務,當然首先它需要具有一個整體性。不相符合的組織是無法構成一個整體的,就好比胃酸對於肺而言是沒有什麼價值的。良好的整體可以幫助使用者高效率的完成一個任務,再借用註冊登陸這個例子,有的產品註冊僅需要填寫手機號然後輸入驗證碼就可以完成註冊,

 

而有的除了這些以外,還需要填寫密碼,上傳使用者頭像,甚至還要填寫完整的出生年月等等。有時使用者會抱怨”我僅僅是為了看一個新聞而已!”

所以在設計一個流程的時候,需要充分考慮到某一個子流程是否有必要,因為使用者往往希望自己做的越少越好,他需要的是一個貼心的助手,能比他自己還要了解他需要什麼,他是誰,他是一個怎樣的人。

當然在設計一個整體的時候需要考慮流程的邏輯性以及視覺上的可操作性,整體的邏輯性就是要讓流程符合使用者的預期,使用者可以大致的理解每一步需要幹什麼,以及為什麼要進行這一步,比如訂外賣就是先選商家——選食物——填寫地址——選擇支付方式——支付完成。假如把填寫地址提前到了選商家之前,使用者只是想進來看看有啥好吃的,都還沒有決定是否要訂餐,就被強制要求填寫地址,這顯然是不太合理的。

視覺上的可操作性這裡主要針對於移動端,在移動端上由於介面以及單雙手操作的限制,需要注意整個流程的呈現在視覺上應該如何排布。

 

比如一個表單的填寫順序原本是從上至下,如果最後將提交按鈕放在了右上角,使用者需要將手指從原本的下方區域挪到上面去點選提交,是一個不太方便的操作。假如在這樣設計時,並不是為了讓使用者增加一點提交的成本,為了讓表單的提交率更加高一些,放在下面應該會好一些。

2.反饋機制的建立

反饋機制作為直接操作中非常重要的一個環節,可以輔助性的幫助使用者達成目標。雖然它可能對使用者需要進行的任務本身沒有太強的關聯性。沒有反饋,也可以完成這個任務。但使用者需要一種掌控感,他希望是他自己在操控這個裝置,這個軟體。舉個反面的例子,蘋果手機上的應用平臺app store,

 

當在一個網路並不太好的情況下開啟它,進入以後可能呈現的只有一片空白。由於這個頁面並沒有重新整理的功能(後來我偶然發現連續點選10次以上底部的bar是可以進行重新整理操作的,這也是讓我挺醉的),只能看著空白頁面等待著,而且並不知道app store有沒有在進行載入。所以沒有良好的反饋機制將直接導致使用者使用時的焦慮,使用者並不希望從一個智慧應用中,感受到一種高冷或則傲慢的感覺。

反饋機制如何建立,之前看過一篇文章講設計時需要注意的9種狀態,分別為:初始狀態、載入中、空狀態、單一專案、有一些資料、資料過多、錯誤狀態、正確狀態以及完成狀態。借這幾種狀態,我們可以來思考這個問題:

1、載入中也就是loading狀態,但凡需要使用者等待的,都需要加入這個狀態,好讓使用者知道此時正在通往成功的道路上,這方面的設計也有很多文章進行了分析,使使用者在等待的過程中,不至於太過焦慮,通過有趣的設計分散使用者的注意力。

2、空狀態,像郵箱沒有郵件、購物車是空的。為的是告訴使用者一個確切的答案,同時又可以通過一些小的技巧達成一些其他的目的,比如引導使用者到其他頁面,比如愉悅使用者。

3、錯誤狀態,這是反饋機制中需要特別重要的一點,對於一個按鈕而言,如果操作是不正常的,可能以一個置灰的形式來傳達,告訴使用者這個按鈕並不能點選。而對於一個任務流程而言,錯誤的狀態需要非常明確的告知使用者,並且需要附上相關的解釋,好讓使用者知道該如何解決這個問題以及發生了什麼,當然要注意的就是使用者是沒有錯的,這也是about face中提到的一個設計原則。所以引導使用者解決問題,完成當前的任務才是反饋的關鍵。

4、正確狀態,這是設計者以及使用者都最希望看見的結果,可以適時給予使用者一些讚揚。而在某些場景下,需要快速的繼續接下去的任務,那麼及時的進入下一個環節就是反饋的關鍵。當然注意不要讓使用者迷失,比如使用者本來在瀏覽一個商品,在這時選擇了登陸,成功登陸以後卻跳向了首頁,這會讓使用者感到不滿,因為他本身可能只是想登陸而已,並不希望影響到當前的商品瀏覽。

這裡提到的反饋機制的建立,也僅僅是從九種狀態的角度來說的,還有沒有涉及到的地方,以後再談。

相關文章