網(wǎng)頁設計中的邊緣設計
當我們設計我們的產(chǎn)品時,我們經(jīng)常為快樂的路徑場景設計,理想的用戶流沒有任何障礙。但是在現(xiàn)實生活中,有些情況是不需要計劃的。這種情況被稱為"邊緣案例"。
邊緣案例可能非常少見,但它們對用戶體驗有顯著影響。用戶很少記得正面的互動,但他們經(jīng)常記得負面的經(jīng)歷;如果你沒有為這種情況做準備,整個過程可能很快就會失敗。
在本文中,我將介紹一些您可能需要處理的邊緣案例場景,以及如何在設計中為它們進行規(guī)劃。處理邊界情況有兩種基本方法:
防止邊緣情況發(fā)生
支持優(yōu)勢情況下
如果有選擇的話,最好是防止出現(xiàn)這種情況。在某些情況下,這可以通過降低系統(tǒng)的復雜性來實現(xiàn);較低的復雜性降低了出現(xiàn)邊界情況的可能性。然而,有時不可能防止邊界情況發(fā)生,所以您經(jīng)常會發(fā)現(xiàn)支持邊界情況是您的用戶最好的選擇:
1、戰(zhàn)斗延遲加載
隨著技術的快速發(fā)展,用戶的等待意愿也降低了。根據(jù)谷歌的最新調(diào)查,2/3的移動網(wǎng)絡用戶說,加載頁面的速度對他們的整體體驗影響最大。為了滿足用戶的期望,你應該盡你所能讓你的應用程序/網(wǎng)站加載速度盡可能快。但是不管你怎么努力,總有一些情況下你不能遵守速度指南。緩慢的加載時間可能是由有限的網(wǎng)絡連接造成的。如果你能改善實際的表現(xiàn),至少試著創(chuàng)造一種速度的感覺,種感覺的快慢往往比它實際的速度更重要。
一種可以幫助你的技術叫做骨架屏幕。骨架布局是頁面的一個版本,在加載內(nèi)容時顯示。骨架屏幕給用戶以速度的印象(大多數(shù)用戶會認為加載速度比實際快得多)。
linkedIn使用框架屏幕給人以速度的印象
在純CSS中檢查這個Codepen例子的骨架效果。脈沖的效果讓用戶感覺網(wǎng)站是活的,內(nèi)容是加載的。
2、設計空的狀態(tài)
在你的應用程序或網(wǎng)站中,應該有數(shù)據(jù)填充的單獨的屏幕在某些情況下是不可能顯示的。例如,在一個健身應用程序中,用戶挑戰(zhàn)的屏幕會在第一次體驗中被清空(僅僅是因為用戶還沒有遇到任何挑戰(zhàn))。作為設計人員,我們需要考慮頁面在這種情況下的樣子。顯示空白頁不是正確的做法。相反,我們可以提供如何用數(shù)據(jù)填充頁面的說明。在iOS中,Khaylo的練習是一個很好的例子,說明了如何使用空白空間來創(chuàng)建上下文。
頁面上的空白可以用來清楚地說明如何開始
3、處理用戶或系統(tǒng)錯誤
每個用戶與系統(tǒng)的交互都可能是錯誤的潛在來源。當用戶需要提供數(shù)據(jù)輸入時,錯誤狀態(tài)尤其常見。我已經(jīng)提到,最好是防止錯誤發(fā)生在第一個地方,這個規(guī)則應該應用于用戶輸入。但是當涉及到用戶輸入時,我們應該著重處理以下潛在的問題:
用戶輸入的數(shù)據(jù)無效。例如,用戶在簽出期間可能會將信用卡號錯誤輸入。在這種情況下,應用程序應該提供詳細的錯誤消息,幫助用戶檢測問題的根源。
由于技術問題,系統(tǒng)無法進行。在這種情況下,錯誤消息應該聲明它的系統(tǒng)問題,而不是用戶的。這將防止用戶重新提交數(shù)據(jù)。
在這兩種情況下,都應該確保應用程序能夠優(yōu)雅地處理錯誤。錯誤信息應該以一種清晰的、用戶友好的語言(不允許使用行話)來寫,系統(tǒng)應該提供一個精確的解決方案(這可能是一條指令或其他可能有用的方法)。
4、零結果
大多數(shù)電子商務網(wǎng)站和應用程序都提供搜索功能。在搜索功能中最常見的可用性問題之一是當用戶看到空白頁面時,會發(fā)現(xiàn)"0結果"。"在沒有結果的情況下把某人丟到一個頁面上是很令人沮喪的。"特別是如果他們已經(jīng)嘗試了幾次。
如果你設計你的搜索功能考慮使用以下技術:
拼寫檢查和建議。有時,用戶沒有得到任何結果,僅僅是因為他們錯誤地輸入了一個搜索查詢。當系統(tǒng)檢測到一個錯誤的項目并根據(jù)最可能的查詢提供搜索結果時,它非常有用。另一個對用戶非常有用的技術是自動完成建議。這減少了用戶輸入的工作量,并防止他們在一開始就輸入錯誤的查詢。
Amazon理解這個查詢中用戶的意思是"Amazon Alexa"。
提供有價值的選擇。當沒有匹配的搜索結果時,您可以提供特色內(nèi)容或任何其他有價值的選擇。例如,在電子商務網(wǎng)站的上下文中,這可能是同類產(chǎn)品。
簡單地比較HP和Amazon的零搜索結果頁面?;萜盏牧憬Y果頁面對用戶來說是一個死胡同。相反,亞馬遜提供了進一步搜索和推廣相關產(chǎn)品的建議。
如何找到邊緣案例?
一些設計師認為,設計邊緣案例類似于預期的意外。但事實上,絕大多數(shù)的邊緣案例都可以在產(chǎn)品發(fā)布之前預測。有兩種方法可以幫助你:
設計回顧:為了創(chuàng)造偉大的設計,你應該積極地尋找邊緣案例。設計評審是一個非常有用的技術,可以幫助產(chǎn)品團隊發(fā)現(xiàn)許多潛在的邊緣案例。在產(chǎn)品設計過程的早期進行設計評審。為了獲得更好的結果,邀請開發(fā)人員和其他團隊成員參與這樣的會話是很好的。
與真正的用戶進行測試:在其他團隊成員的幫助下,盡早尋找邊緣案例是一個很好的方法,但它不能保證你會發(fā)現(xiàn)所有潛在的摩擦源。只有與真正的用戶進行測試,才能幫助你了解人們是如何使用你的產(chǎn)品的,以及他們面臨的問題。與此同時,值得說的是,嚴格的適度的可用性測試不會僅僅因為用戶經(jīng)常被告知要做什么和按什么順序,就會暴露出大量的邊界情況。所以最好給用戶一個機會去嘗試一個系統(tǒng),給他們更多的時間和更靈活的任務。
結論
當我們設計產(chǎn)品時,我們經(jīng)常將帕累托原則應用于我們的設計;我們關注的是大多數(shù)用戶的需求,應用80/20規(guī)則,并開發(fā)用戶體驗,以實現(xiàn)最可能的交互場景。在大多數(shù)情況下,這允許我們?yōu)橛脩魟?chuàng)造良好的用戶體驗。但是注重細節(jié)是區(qū)分優(yōu)秀設計和優(yōu)秀設計的真正原因。邊緣案例的設計是關注細節(jié)的一個很好的例子。
想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術