設計大量內容的頁面時,該注意哪些 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、科技、設計新知

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on twitter
Twitter