交互設計技巧:創(chuàng)造好的用戶體驗(1)(翻譯)

3 評論 13640 瀏覽 192 收藏 16 分鐘

一個好的用戶界面具有較高的轉(zhuǎn)化率和易用性。換句話說,它既能滿足商業(yè)用途也便于使用。以下是我們發(fā)現(xiàn)的一些想法清單。

? 1. 嘗試使用一列布局代替多列

一列布局會讓你對全局有更好的掌控。它也能讓你的用戶預先對整體的內(nèi)容從上到下有一個大致的了解。然而多列布局則會讓用戶從頁面的核心內(nèi)容上分散注意力從而增加額外的風險。最好的方法是用一個有邏輯的敘述然后在文末加上一個行動的口號來引導用戶。?

? 2. 嘗試用禮物代替直接銷售

為客戶提供一份禮物是一種友好的方式。然而,更深層次來說,禮物也是基于互惠原則的一種有效的說服策略。這聽起來顯而易見,給別人提供優(yōu)惠,你在將來的活動中也能從中受益。

?3. 嘗試合并相似的功能,而不是支離破碎的UI

在產(chǎn)品開發(fā)期間,我們很容易在無意中創(chuàng)建多個功能一樣的模塊,元素及專題。隨著時間的推移,界面變得支離破碎。留意相同的功能以多種方式展示,因為它容易給你的客戶帶來壓力。通常,UI碎片越多,你的客戶的學習成本就越高。偶爾考慮通過合并相似的功能來重構(gòu)你的UI。

4. 嘗試用客戶評價來代替自吹自擂

客戶評價是直接提高轉(zhuǎn)化率的另一個強有力的說服策略。別人對你產(chǎn)品的支持和好評,是一種很好地號召客戶行動的方式。所以試著提供一些證據(jù)來證明這些好評是真實可信的。

5. 嘗試多次重復您的主旨,而不是只展示一次

重復你的行動口號是一種更適用于長頁面的策略,或者是在多個頁面進行重復。當然你也不想讓同樣的信息在同一屏幕里重復上10次,這會讓客戶很沮喪。然而,長頁面越來越普遍,將所有東西都展現(xiàn)“在一屏”上的想法也過時了。所以將一個不太顯眼的行動列表放在頂部,另一個突出的行動口號放在底部并沒有什么不妥。當用戶到達頁面底部,停頓并思考接下來改做什么的時候——一個潛在的區(qū)域或許就能完成一次報價或成交一筆交易。

?? 6. 嘗試將可點擊/可選擇的樣式區(qū)分開來,而不是將其模糊

視覺上的樣式,例如顏色、層次和對比,可以用來幫助用戶理解你最基礎的界面導航語言:我在哪里,我可以到哪里去。為了與你的用戶清楚地溝通,你的可點擊行為(鏈接,按鈕)、可選元素(可選項),以及單純的文本應該清楚地區(qū)分開來,然后在這一套界面中保持一致性。在下面的例子中,我選擇藍色標識能被點擊的元素,黑色標識已被選中的元素或表明當前所在的位置。正確運用這些標記,更便于用戶學習和使用這些線索來導航界面。不要模糊這三種功能樣式使產(chǎn)品使用困難。

7. 嘗試用推薦來代替羅列相同的選項

當展示多種服務時,一個強力的推薦或許是個好主意,因為用戶有時候需要一點推動。一些心理學的研究表明,選擇性越多,用戶將想法付諸實踐并行動起來的概率就越低。為了消除這種選擇障礙,試著強調(diào)和突出顯示某些選項。

8. 嘗試用撤銷操作來代替提示確認

想象一下,你只是按下了一個操作按鈕或者鏈接,撤銷能讓操作更流暢自然。另一方面,提示操作則在暗示用戶不清楚用戶在干什么,并一直質(zhì)疑用戶的意圖。大部分情況下我會假設用戶是明白自己的意圖的,誤操作只是偶然發(fā)生的。當提示窗口彈出時,用戶必須重復地進行確認操作,一次又一次的提示其實是一種非常不人性化的設計。所以考慮讓用戶執(zhí)行撤銷操作來提高產(chǎn)品的友好度而不是一直提醒用戶確認。

?9. 嘗試寫明產(chǎn)品使用人群而不是所有人

你的產(chǎn)品是面向所有人還是有精確地指明受眾群體?明確指明你的產(chǎn)品或者服務的受眾群是明智的。通過不斷了解目標客戶的需求及標準,你能獲得更多與客戶交流的機會,并且讓客戶覺得享受了產(chǎn)品的專屬服務。這種策略的風險是你可能精簡了自身,并縮小了潛在客戶的范圍。然而,透明建立信任,你可能因此獲得客戶更多的信任。

? 10. 嘗試直截了當而不是猶豫不決

你可以用不確定的帶著顫抖的聲音傳達你的信息,也可以滿懷自信地說出來。如果你經(jīng)常用類似“也許”、“可能”、“感興趣?”、“想要嗎?”這樣的疑問語氣來結(jié)束信息的傳達,或許你可以嘗試用更權(quán)威的語氣來表達。誰知道呢,或許更為舒緩的措辭來告訴用戶接下來該怎么做也可以給用戶留下更多思考的余地。

?11. 嘗試用鮮明的對比代替相似性

將你的行動口號與周圍的元素區(qū)分開來,使其更顯眼一點,能讓你的UI表達更強烈。你能輕易地通過多種方式讓你的主旨口號更醒目。你能采用明暗色調(diào)的對比來凸顯。你還能采用投影和漸變來實現(xiàn)層次上的對比。最后,你還可以從色輪上選取互補色(例如:黃色和紫色)來進一步提高對比度。綜上所述,你應該考慮將你的行動口號與頁面上其它元素明顯區(qū)分開來。

12. 嘗試指明原產(chǎn)地

指明你的原產(chǎn)地,你的產(chǎn)品或者服務從哪里來的,可以將你與客戶的關系拉得更近。具體提到產(chǎn)品的原產(chǎn)地的國家、州或者城市,就像人與人溝通時自我介紹一樣。如果你在產(chǎn)品介紹時做到這點,你的界面顯得更友好。通常,說明你的產(chǎn)品的產(chǎn)地也能讓客戶感覺產(chǎn)品的質(zhì)量更有保證。這是一種雙贏的方法。

?13. 嘗試精簡表單

人類天生就抗拒密集型勞動,并且這也體現(xiàn)在表單填寫上。你要求用戶填寫的每一個字段都有讓用戶轉(zhuǎn)身放棄的風險。每個人打字的速度都是不一樣的,況且在移動設備端輸入更是一件苦差事。確定是否每一個字段都是必需的,盡量刪掉不必要的字段。如果你確實有大量的信息需要用戶填寫,考慮將它們分開到不同的頁面填寫,或者在提交之后還能繼續(xù)補充。過多的字段會讓你的表單臃腫,要想精簡也很容易,減少字段就行了。

? 14. 嘗試暴露選項而不是隱藏它們

你使用的每一個下拉菜單隱藏的信息,都需要用戶用額外的操作才能顯示。假如那些隱藏選項對用戶來說是貫穿整個操作的,你可能會希望它們展示得更明顯一些。保留那些約定俗成的下拉菜單,比如說日期和時間(例如:日歷)或者地理位置的選擇。有時候下拉菜單在用戶重復使用的地方也是可以使用的(例如:操作菜單)。在你需要進行頁面跳轉(zhuǎn)的地方,盡量避免為主要功能使用下拉菜單。

? 15. 嘗試分模塊有條理地敘述而不是長篇大論的平鋪直敘

? 長篇大論的平鋪直敘是很容易失去客戶的。是的,很長的滾動頁面是很帥,但是要小心給客戶這樣一種感覺——在頁面還沒有結(jié)束的時候誤以為內(nèi)容已經(jīng)結(jié)束。假如你的頁面需要滾動,嘗試設置一個可見的標識,讓用戶遵循這個規(guī)律看下去。其次,內(nèi)容間的間隙也不能過大(當然我指的是一個區(qū)間范圍,況且有這么多的設備尺寸)。

16. 嘗試保持焦點而不是濫用鏈接

為了盡可能滿足更多客戶的需求,很容易在一個頁面上創(chuàng)建得到處都是鏈接。如果我們的重點是長文本底部那個行動口號的話,那就得三思了。其它任何鏈接都有可能使用戶離開頁面。注意你頁面上鏈接的數(shù)量,盡可能平衡導航頁面上的風格(更少的鏈接以及更高的轉(zhuǎn)化率)。刪除無關的鏈接更有可能讓用戶點擊那個最重要按鈕。

17. 嘗試顯示進度狀態(tài)

在用戶界面上我們經(jīng)常顯示有不同狀態(tài)的元素。郵件有已讀、未讀狀態(tài),發(fā)票有已付、未付的狀態(tài),等等。通知用戶每一條記錄的特殊狀態(tài),是提供信息反饋的好方法。界面狀態(tài)能幫助用戶很好地理解他們之前的操作是否成功執(zhí)行,以及接下來的操作怎么處理。

18. 顯示對用戶有利的按鈕信息,而不是讓用戶覺得自己只是在完成任務

? 試想一下界面上有兩個簡單的按鈕。一個按鈕告訴你它將會“為你省錢”,而另一個要求你“立即注冊”。我敢打賭,第一個按鈕被點擊的幾率更大,因為注冊沒有自己內(nèi)在的價值。而且,注冊讓人想到填不完的表單,過程特別費勁。假設表明,讓用戶感到有利可圖的按鈕更有可能被點擊。另外,將好處寫在操作按鈕附近可以提醒用戶這樣操作的原因。當然,現(xiàn)在仍有為基于任務的操作按鈕保留的空間,不過,這是預留給那些轉(zhuǎn)化率不高但使用率很高的操作元素。

19. 嘗試直接操作而不是無上下文的菜單

有時候,直接在元素上進行操作比無相關的菜單羅列要更有用。舉個例子來說,當展示數(shù)據(jù)列表的時候,我們通常允許用戶在列表的項上進行相關的操作。在列表項上點擊,或者是鼠標滑過都能被用來表達一種特定的操作(刪除,重命名,等等)。直接操作的另一個例子是點擊一個數(shù)據(jù)項(例如說一串文本地址)后,然后文本框變成可編輯的狀態(tài)。使用這樣的交互,減少了一些不必要的步驟。不過對于一些一般性的操作(比如說前進、后退),使用無上下文的菜單是沒有錯的。

20. 盡量顯示全部內(nèi)容而不是創(chuàng)建額外的頁面

當創(chuàng)建登錄頁面時,在轉(zhuǎn)換頁面上顯示全部表單字段會更好。與單獨創(chuàng)建額外的注冊頁相比,將注冊表單與登錄頁合并有更多的好處。首先,我們減少了流程操作中的額外步驟,這樣操作將花費更少的時間。其次,通過顯示表單字段的數(shù)量,我們也向客戶展示了注冊表單的實際長度。當然,前提是我們的表單比較短(當然表單也應該盡量簡短)。

本文為@謝爾魚 翻譯并授權(quán)人人都是產(chǎn)品經(jīng)理社區(qū)發(fā)布,轉(zhuǎn)載請注明來自人人都是產(chǎn)品經(jīng)理社區(qū)并保留作者信息。

原文地址:http://goodui.org/

未完待續(xù)…原文比較長,共65條,分三次翻譯完,這是1-20條。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 什么時候根據(jù)16條建議 改進下自己網(wǎng)站的瀏覽機制呢?

    來自北京 回復
  2. 文章中的圖是用什么做的咧?

    來自廣東 回復
  3. 真實夠了,是有多健忘。這篇文字我已經(jīng)在人人上見了刊登不下2次了,又來?還分三次?
    你們小編到底看不看自己網(wǎng)站的文章啊

    來自廣東 回復