如何提高UI設計的可用性?無論是網頁設計還是APP設計,要確保產品的可訪問性是一件知易行難的事情。很多UX設計師的工作都是由一系列的小決定堆疊起來,最終積累構建成一個龐大的產品。但同樣這些小決策所帶來的小問題也會影響每一個用戶,尤其是對身體、認知有障礙的用戶,造成巨大的障礙。因此,我們需要善於提升產品的可訪問性,繼而影響整個產品的可用性。
如何提高UI設計的可用性?
UI設計技巧一:給用戶提供較大的目標區域
每個人面對光標和交互目標時,或多或少都高估或低估自己的交互操作效率。如果給用戶設置的目標區域或交互元素太小,也沒有提示出發的懸停效果,雖然絕大多數健全用戶會在操作過程快速通過微調和校正來儘快達到交互目標,但對有行動或認知障礙的用戶而言,會造成非常大的麻煩,甚至是巨大的挑戰。
通過給用戶提供更大的目標交互區域以及懸停效果,可以讓用戶更方便地同頁面元素交互,從而減少更多不確定性。
UI設計技巧二:使用高對比色彩
視力障礙用戶在閱讀低色彩對比度內容時,會明顯感覺到困難,提高UI對比度不僅對這類用戶友好,而且對於降低視覺疲勞也有顯著效果。
另外,根據W3C規定,高於4.5:1的色彩對比度,能給界面帶來更清晰的輪廓,也更利於用戶分辨不同元素和控件邊界。
UI設計技巧三:不單純使用色彩表達
同樣對於視力有障礙的用戶而言,單純使用色彩向他們傳遞「禁止」、「完成」等含義,在大多情況下會顯得不夠清晰,甚至他們可能無法直接識別。再者,顏色本身的含義是後天被賦予,部分是被約定俗成,但並不是每個人對此都有足夠清晰的認知,甚至同一種色彩在不同文化和場景會表達出截然相反的含義,例如:白色在西方國家代表純潔,但對於東亞國家而言是死亡、葬禮之意。
因此,通過清晰的文本和符號協助色彩完成信息的傳達,會讓UI信息更加清晰直觀,甚至當你去掉色彩是,UI界面中的內容和文本同樣能被用戶正確識別。
UI設計技巧四:為連結和按鈕添加指引性文本標籤
按鈕和連結上對應的文本不應該是簡單的「是否」、「確定」、「取消」,在很多語境中,這些詞彙會有多種理解方式,容易給用戶帶來誤解。
為連結和按鈕添加指引性更強的文本標籤,能幫助用戶了解按鈕實際的功能和指向性,也便於有視力障礙用戶無需過多猜測。
除此之外,按鈕和連結文本要控制好色彩對比度,吸引用戶快速關注,從而提高UI的可訪問性。
UI設計技巧五:使用有意義的標題和結構
對用戶而言,閱讀長篇大論的文本是有門檻的,相反結構化文本在這方面會強很多。
就算文本內容不多,也要確保分段清晰,帶有明確主題總結的小標題,能讓用戶立刻抓住段落的核心信息,保證他們在瀏覽過程不會因為走神而找不到內容。此外,標題除了具有總結性,最好使用表述性語句,方便用戶理解內容功能,保證標題和內容的相關度足夠高。
UI設計技巧六:用佔位符演示表單內容
表單是界面中極為重要的組件之一,為了保持界面乾淨整潔,使用佔位符描述表單內容是一種常見的手段。如果用戶輸入時佔位符消失,他們可能會忘記應該輸入什麼內容或採用什麼樣的樣式。
為了降低認知負荷,直接使用對應字段格式的佔位符來展示給用戶,通過字段輸入框外確定文本告知用戶具體輸入的字段。這樣不管什麼時候,用戶都不會存在不清楚填寫什麼問題的情況。
UI設計技巧七:用清晰報錯指引幫助用戶
在填寫表單字段時,即使有明確的指引,用戶依然有相當大的概率填寫錯誤,這個時候報錯提示就顯得十分重要。
用戶在填寫表單過程中難免會出現,這時要確保錯誤提示的色彩對比度足夠強,方便用戶能夠定位。同時兼顧有視力障礙的用戶,儘可能簡單用詞,告訴用戶如何解決這些錯過,避免用戶去猜。
UI設計技巧八:使用高對比度的焦點指示器
雖然絕大多數用戶都會使用鼠標和觸控板操控,但依然有部分用戶習慣使用鍵盤,再者再進行多字段表單輸入時,使用鍵盤Tab按鍵快速切換也的確比鼠標交互要快。
當用戶使用鍵盤進行快速切換,選中按鍵和輸入框的焦點指示器,儘可能使用對比度高的色彩,方便用戶清楚知道當前選中的控件,以便產生疑惑或模糊不清的感覺。
提高控制界面可訪問性,能兼顧更大範圍用戶,有效延長產品本身的價值,從而提高產品所帶來的轉換。