UI設計師的最佳神隊友,A/B測試例子大公開(三)

身為UI設計師,為何都說"A/B測試"超好用?看完我都忍不住跪了!(三)

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 3 篇,第 2 篇請點此連結

範例17:顯示出項目的即時動態

ui-design-idea-17.png

UI 設計中,常常會以不同方式表現出項目的不同狀態,例如:E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。

即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作

範例18:把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」

ui-design-idea-18.png

想像一下若是眼前的網頁上有兩個按鈕,其中一個標示「能替你省下一大筆錢!」,另一個寫著 「點這裡註冊」,肯定大部分使用者都會被前者吸引。

前者就是所謂「能帶來好處的按鈕」,能替使用者產生價值;而後者則是「任務導向的按鈕」,代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然就會有較高的轉換率。

範例19:直接操作比多階層下拉式選單更直覺

ui-design-idea-19.png

直接處理畫面上的資訊,有時會比使用整合工具列還直覺,像是多階層下拉式選單(context of button)雖然十分常見,但過多的階層可能會增加操作的步驟,所以下次設計時不妨考慮減少階層或直接操作的方法。

範例20:若當下就可以操作,就不要再多開分頁!

ui-design-idea-20.png

當我們希望使用者做有價值的動作,例如:留下聯絡方式、基本資料等,最好把填寫用的欄位或表單放置本頁上。如果能與頁面整合在同一層,會比讓使用者連結到別頁輸入資料來的好。

精簡流程、而且能讓使用者花最少的時間就能了解頁面資訊,並將簡單易懂的表單放置於該頁面上。除了方便性,也可藉此讓使用者預估填寫所需的時間,會更加增加使用者填寫的意願。

範例21:以過渡形式表現操作導致的 UI 介面改動

ui-design-idea-21.png

當使用者在與 UI 介面互動時,UI 設計成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為,也能協助使用者理解介面的使用方式

其實在變化過程中增加一些動態變化,也能達到尊重使用者的效果:故意延遲、以過渡形式表現尺寸或位置的變化,能讓使用者有更多時間、更有餘裕地去理解網頁的變動。

但需要注意的是,動態效果的時間最好在0.5秒以下,過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。

範例22:讓先使用者漸進式參與,而不是先要求註冊

ui-design-idea-22.png

比起劈頭就要訪客馬上註冊,不如先讓訪客們有機會體驗產品,或至少讓訪客先觀看使用案例、過往客戶回饋或是介紹影片!在訪客還在建立第一印象時彰顯出產品的功效,亦可以表現出與他牌的不同。

一旦使用者如果能夠看到您產品的價值、並體會到能帶來的價值,他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程,但依方面卻能增添使用者主動註冊動機的方法。

範例23:嘗試減少線框,不要浪費精力在分割框架

ui-design-idea-23.png

使用者的耐心與時間都有十分有限,所以網頁如何爭分奪秒地抓住他們的注意力就十分重要。常見的設計會利用線框(border)來強調劃分不同內容,但也正是因為線條的明顯具體,反而導致使用者耗費更多專注力,因為線框區分出的區塊(box)若過多或安排不當,會讓人感覺雜亂不齊。

解決方法如:在設計之前就定義好內容與視覺之間的關係(例如色彩設計)、減少不必要的區塊、對齊不同的背景色,才能有效地減輕使用者的閱讀難度。

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 3 篇,第 4 篇請點此連結

 

 

 

推薦閱讀:
Google Analytics「工作階段」定義與範例一次解析!


亞馬遜人工智慧出包 搞混國會議員與罪犯


人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼


特效不夠AI 來湊!迪士尼換臉技術達百萬畫素


為何UI設計用"圓角"人人愛?哆啦A夢有答案!!(上)


人工智慧MOTOBOT,竟讓重機賽車手冠軍都讚嘆不已!?


最夯程式語言Python,你夠了解它嗎?!

arrow
arrow

    jimchen19901212 發表在 痞客邦 留言(0) 人氣()