設計大量內容的頁面時,該注意哪些 UI 設計準則?

依專案的不同,在設計上需要考量的項目也有所不同。當我們接到需要呈現大量內容的產品設計任務時(如新聞、入口網站),該思考哪些要點呢?另外,使用者會不會因為大量內容而造成使用上的困擾?作者提出 6大 設計準則 ,讓設計師在進行這類相關設計時有參考的方向。

為何要談 設計準則 ?

如果網頁上有太多區塊或細節,使用者相當容易迷失方向。以下提供幾項 設計準則 ,可讓繁雜的資訊更容易理解並與讀者(使用者)互動。

設計準則

 

清晰的資訊階層(Hierarchy of Information)

當使用者初訪網站,設計者必須要讓他們清楚知道 “應該要先看哪邊”?另外,研究結果指出:平均一個頁面的瀏覽時間 低於一分鐘。所以你必須讓使用者輕易地找到他們所想找的(所想看的內容)。

首先,他們需要知道眼前這頁面是他所要的,這部分可以靠 header 或導航列來提示。接著,他們也需要知道這些頁面間的組織與這些頁面可如何被操作。基本上,最好能讓使用者藉由掃視(scan)就能大致了解這些資訊,而不需要仔細閱讀內容。

當設計完你的頁面架構後,還必須知道一件事情:就是閱讀的 F模式。意指使用者會由左至右、由上而下的掃視,而呈現出F型的視覺動線圖。因此,最重要的資訊應該要安排於最上方與左側。

contentheavyui_02

 

什麼是使用者在那當下想要看到的?

透過研究、調查網頁上的使用者們,當下最急迫想執行的動作是什麼?而這些調查後的資訊也能幫助你組織其頁面的內容,並優先提供與使用者最有關的內容。這個簡單的方法可讓使用者更輕易、快速地完成任務。譬如說,在 email 系統中,讓 “撰寫” 這個使用者最需要的核心功能總是出現且明顯被看到,儘管使用者處於閱讀其他的信件頁面。

 

隱藏更多細節

在靜態頁面上展示所有的細節將會顯得擁擠雜亂,所以先提供使用者足夠的資訊就好,再設計讓使用者進一步了解資訊的機制。

contentheavyui_03

有幾個方法:

  • 使用 “小提示” 來顯示更多細節或說明。
  • 隱蔽過長的文字內容,可判斷內容的重要程度,以 ‘…’ 取代。
  • 提供檢索或篩選機制,若還有提供檢索建議和自動推薦的功能,就更具效率了。

 

明顯的導航(Navigation)

一個網站應該要讓使用者 “總是” 知道他們在網站中的位置、某頁面怎麼連過去、怎麼回到首頁 … 等。我們可以透過一些簡單的視覺手法,讓導航這件事變得更具體。例如:使用者點選了一個新頁面,而這個頁面由左側滑入,就知道這個頁面取代了原本的,成為你現在正在瀏覽的頁面。此外,Google 推出的 Material Design 利用了 “紙” 的特性(實體及空間感),讓導航與階層變得更具體且具邏輯性。

只要一展開導航列,其呈現的項目能讓使用者有足夠的資訊來判斷所對應的內容,且讓網站的導航列清楚易見,使用者便能更快且輕鬆的理解你的網站。

contentheavyui_04

 

讓可操作的元件顯而易見

若某個元件(文字、icon、圖片)可被點擊或編輯,應該不需再解釋它,只需透過 “視覺上” 的差異來提供線索即可。如按鈕要讓它看起來可被點擊,並做出狀態上的差異(如游標覆蓋)。

在編輯內容時,使用者也應該獲得這些內容狀態的視覺回饋。例如:當他們在填寫表格時,可讓他們注意到輸入的內容是否符合規範?是否有錯誤?或是已被修改過?(清楚的狀態回饋)

 

預防錯誤發生

contentheavyui_05

 

身為設計師,我們要避免使用者犯下一些錯誤。例如:雖然 icon 能表示一些功能或資訊,但如果 icon 不能直覺地被辨識,使用它就是弊大於利。此時,若在游標覆蓋 icon 時出現小提示,將可避免使用者錯誤點擊。再者,相較於只使用 icon,”描述性” 的文字更能傳遞動作訊息,所以更應該被使用。例如,跳出視窗上的按鈕文字表示 “存檔” 或 “好”,哪個較能讓使用者知道系統 “將” 進行何項行為? 當然是前者。

假使我們知道使用者可能會犯錯,就可以在流程中打斷他們,透過預防錯誤的彈出視窗再次確認他們的行為及告知後果,這個方式同樣適用於可能會因為不可逆而造成傷害的行為上。例如,假如使用者想要刪除一份與其他人分享的檔案,系統應該要提醒他,刪除檔案可能會影響其他人。

 

本文章已獲得作者授權,翻譯自:Design Guidelines For Content Heavy UI by Anneka Bjorkeson,原文出處 UXBLOG

 

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter