在日常使用移動端或PC端產品時,不知你有沒有這樣的體會?
推薦一個比較實用的設計法則,這個法則已經有很多的文章說明了,可以說現在的任何互聯網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。
要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,可以指導我們更具價值的思考界面設計。
設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。
雅各布·尼爾森(Jakob Nielsen)是畢業于哥本哈根的丹麥技術大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。
尼爾森于1995年1月1日發表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現今的產品體驗設計仍然具有很大的參考意義。
人機交互的基本原則是,讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什么,預期是什么,如果系統不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。
界面狀態分為兩種:靜態和動態。
靜態即用戶通過界面查閱,明確知道自己的位置、處于何種狀態,或者知道界面數據的狀態。動態即用戶在進行界面操作時,系統應當立刻提供反饋,告訴用戶該項操作被系統接受,讓用戶對操作感知及判斷。
告訴用戶處在系統的什么位置,特別是對于新用戶,需要提供必要的信息,否則容易迷惑。比如:導航菜單、面包屑、標簽頁、步驟條、分頁器等等。
相比于C端產品,B端產品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。
告知用戶系統運行的狀態信息,比如進度、內容加載時,增加用戶掌控感。
最經典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結束,播放音樂時顯示進度條,并提示預估剩余時間。
系統適當反饋是用戶界面設計的最基本準則。當用戶在與系統進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶??梢允褂玫男问桨ǖ痪窒抻冢?/span>
操作反饋:點擊頁面跳轉、按鈕點擊狀態、警告提示、輸入反饋等等;
結果反饋:非模態彈窗,輕量化感知系統內容反饋。(反饋內容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結果后及時消失。)
情感反饋:搜索沒有結果時,沒有數據等等空狀態。
還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。
注意,越是消極的反饋,比如網絡連接失敗、系統錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。比如:1、提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因;2、程序未響應時,系統會讓用戶選擇是關閉程序還是等待程序響應;
系統應該在合理的時間內,給予用戶適當的反饋,讓用戶了解正在發生的事情。
當系統反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。
例如:下載提示、刷新提示、支付提示、新頁面加載提示等。
系統盡可能貼切用戶所在的真實環境。把復雜的系統語言換成用戶看得懂的語言;環境貼切原則的根本目標是讓用戶可以快速上手產品,降低學習成本。
《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。
這里說的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。
從設計心理學角度來講,用戶在使用產品的過程中,其大腦會“優待”較常用的記憶內容和操作形式,有意抑制那些相似但不常用的內容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。
比如細分市場的產品,針對中老年、青年、兒童的產品或商務、娛樂的產品,都要分別使用符合自己的定位的語言。
反面案例就是windows系統出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。
為了照顧不同國家的用戶的使用習慣對頁面結構布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。
模仿現實世界的產品或者使用映射,能夠利用人們現有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。
比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現實世界的產品。
從現實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。
使用的操作手勢,應該是用戶自然就能聯想到的,不要創造、更改操作手勢的意義。
動效的加載樣式應符合自然規律,需要平緩過渡,而不是生硬的加載效果。比如:網易云音樂播放時唱片轉動、停止播放時唱片自動移開,有趣且有效。
用戶在使用產品的過程中,誤操作是經常發生的事情,系統應提供撤銷和重做功能,讓用戶具有對產品的控制性與自由度。
用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。
清晰便捷的導航方式,使用戶可自由控制返回和跳轉的頁面。
由于B端系統的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關系,同樣需要考慮「返回」的功能以及清晰的層級關系。
用戶在使用系統的過程也是一個試錯的過程,系統要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。用戶在使用產品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。
比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后,支持在短期內找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。
回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。
系統在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產品設計上,防止用戶常見的誤操作。比如很多產品在涉及到內容的刪除操作時,經常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。
比如iPhone ios系統:
1、常見的二次確認主要可以通過以下方式實現:通過文字提示,用戶閱讀后點擊是與否來進行下一步;
2、通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;
3、通過身份校驗,用戶需要提交個人身份信息以完成校驗;
整個系統要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業標準。我們在設計中常見的制作平臺規范,其實就是為了保證平臺設計的一致性。
一致性原則的根本目的是保證產品的專業性,給用戶帶去統一的體驗感受。
遵循產品內部的慣例,可幫助用戶快速學習使用產品功能。產品內部的一致性包含:產品功能框架、文字、設計風格、布局、反饋等等。
比如:小熊藝術app,一款針對孩子學習美術的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現,banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性,也形成了統一的品牌傳達。
但是,有時候為了達到產品目標,偶爾也會故意采用不一致的設計。
比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產生條件反射,順手點擊右邊按鈕,然后才突然發現自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。
交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。我們在前期已經培養好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。
例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。
當產品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產品體驗上會造成很大的干擾。
比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現了迭代產品的一致性。
Office軟件中包含的各個產品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。
遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規則。
比如,產品內相同顏色的反復出現,為產品打造視覺錘符號,強化產品在用戶心中的記憶點。符合平臺設計規范,
蘋果系統參照人機交互設計指南設計規范,安卓系統參照Material Design設計規范,或者直接參照自己團隊的的設計規范,應該遵循慣例,并且保持系統的一致感,不要盲目地標新立異。
不知道你發現了沒,現在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。
與業內產品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。
如,在App底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖:
如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。
防錯原則的根本目標是阻止錯誤行為,避免進一步犯錯,指引用戶正確的完成操作行為。
「防止錯誤」主要分為三個階段:錯誤行動發生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發生之后,提供撤回的入口。
比一個優秀的錯誤提醒彈窗更好的設計方式,是在這個錯誤發生之前就避免它。它可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。
通常情況下,按鈕置灰表示對應功能或操作無法使用,這也是防止錯誤的一條有效途徑,因為用戶通過按鈕樣式就可獲知其狀態,提前規避無效的提交操作。當然,不是只要功能或操作無法使用時,就應該將對應的按鈕置灰。其實更好的做法是填寫完標題后按鈕不置灰,點擊完成按鈕后定位或高亮必填項,讓用戶更容易識別錯誤點。
比如在登錄時,只有輸出信息后才可以點擊登錄按鈕,未輸入信息時,按鈕是不可以點擊的狀態。通過系統主動對用戶進行操作限制,幫助用戶避免發生錯誤。
限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗證碼頁面,為了防止用戶多輸入或者少輸入驗證碼,只給到四個輸入框,讓用戶只能輸入四位數字,減少輸入錯誤的幾率。
提供清晰的提示,防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態等。利用顏色,動效提供警示信息,比如常見的微信退出的按鈕是紅色的,狀態未完成的標簽是紅色的等等。
如:表單填寫過程中讓用戶及時知道輸入格式,出錯原因,避免填寫完成后再提醒,浪費用戶時間。
范圍限制:限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。比如:電影購票時,已購買的位子不會再提供選擇,很好的避免了買重的問題
特別要注意在用戶操作具有毀滅性結果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。
這條原則很重要也很常見。在刪除信息時,系統會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規則下取消訂單等等。
易取原則的根本目標是提升用戶在界面上的操作效率,系統應直觀地協助用戶完成任務。
系統應協助用戶進行記憶,通過使元素、操作和選項可見,減少用戶的記憶負荷,在適合的時機給用戶需要獲取的信息。
識別比回憶要好,對于路徑較長的操作,我們更應該協助用戶記憶。比如在淘寶下單的操作路徑,每一個頁面頂部導航欄會盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見、易獲取的,減少用戶對操作目標的記憶負擔。
用戶心理學研究發現,互聯網用戶瀏覽網頁的動作不是讀,不是看,而是“掃”。這是互聯網用戶瀏覽的主要方式。所以我們在設計的時候,需要清晰的視覺層次結構,突出重點,弱化和剔除無關信息,降低頁面干擾,來減輕用戶閱讀成本。
比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。如果,有很多的信息或者選項是用戶高頻率會選擇的,設計師不妨給用戶提前做好選擇,提供默認選項,如下圖:
通過智能讀取用戶之前填寫過的信息,或者智能識別等形式,減少用戶記憶負擔與操作負擔。
常見的是寄快遞-新增地址,將用戶復制的文本字符類型進行識別并匹配,將有用的信息內容提取出來,對體驗而言顯得高效又智能。
或者淘寶購物確認訂單時,系統會自動為你帶入之前的商品信息,包括選擇的商品規則、數量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過,但是需要用戶在購買前二次確認,由于信息比較多,用戶很難記憶,所以確認訂單再展示出來更加合理。
比如:用手機登錄時,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入,直接點選即可登錄;
美團APP中,當用戶選擇商品時,系統會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數,不需要用戶自己花時間去計算還差多少才能滿減等,減少用戶記憶負擔,同時節省用戶點外賣的時間,這也用到了易取原則。
訂單頁面若某信息需要用戶從一個頁面復制到另一個頁面完成查詢或編輯輸入,那就有必要為該信息提供快捷復制功能,如訂單號緊跟著一個復制按鈕。
我們在搜索一個歌名的時候,記不住完整的歌曲名,我們只要輸入關鍵的幾個詞,系統就是幫助我們記憶,出現相關的搜索。
作為用戶,你不記得的操作,系統可以幫你記錄。為用戶提供歷史記錄,文本創作的過程中自動保存草稿,讓用戶方便查詢自己的進程,這就是信息易取原則的設計。
保留歷史,最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄,當用戶沒有看完某部電影時,下次進入直接從斷點續播上次播放的位置,無需用戶記憶上次看到哪里了;
不只是觀看記錄,視頻軟件還會幫你記錄同一賬號在不同設備上的登錄記錄,觀看記錄也會在不同設備之間進行同步。
將選擇的對象,動作,選項可視化,讓用戶一看就懂。注意圖標符號化能讓人理解,避免引起誤解。
抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導航欄都是以這種icon和文字相結合的形式,這就是很符合易取原則的例子。
在用戶使用產品的過程中,會有一些需要用戶記憶的內容、或者操作路徑,在設計的時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。同時每個頁面傳遞的信息量盡量少,減少用戶的閱讀壓力。
常見的例子是各類優惠券,設計的時候會有明確的位置說明限制時間,類別等等,同時還會有清晰的入口引導去使用或者規則的入口。
這一點其實也非常好理解,一個簡單的動作,比打字要輕松得多,常見的就是在設備解鎖的時候,用手勢解鎖替代密碼解鎖。
隨著技術發展,有了更多的行為代替輸入的方式,比如指紋識別和面部識別,用簡單的操作,就可以達到進入系統的目的,這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個交互設計原則,也代表了一種軟件產品設計理念:系統既要做得簡單、易用,讓所有用戶用起來得心應手;
靈活易用原則的根本目標是保持系統的靈活性,以滿足不同用戶的不同需求。既要提供必要的幫助,讓剛入門的初級用戶順利上手,還需要支持靈活的個性化定制,讓高級用戶能夠快捷高效使用高頻功能,充分發揮其價值。
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設置,到頁面布局,再到自定義參數,軟件系統會盡量提供全面的個性化設置功能,來滿足不同用戶的使用訴求和習慣,提升用戶的使用效率和體驗。
例如支付寶首頁,用戶可以自定義首頁的應用。對于使用頻率比較高的老用戶來說,這是一個非常方便的功能。
還有一種是系統更具用戶常用自動整理歸納,以提升使用效率,減少用戶多余操作。
比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習慣往往是循環使用其中的某幾個,所以把最近使用的表情展現出來,會極大的提升用戶的尋找效率。
除了從新老用戶的角度對用戶做區分,還可以從其他維度區分用戶,針對不同用戶做不同的功能。比如:微信為了讓中老年用戶使用方便,推出了關懷模式。在關懷模式下(下圖)文字更大、色彩更強、按鈕更大,還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點,讓產品更加靈活易用。
靈活高效原則在交互設計中使用會提高用戶使用效率,例如微信聊天頁面中,當用戶輸入某個字詞之后,系統會自動幫你匹配相應的表情包;
當你輸入某個詞之后,輸入法會幫你自動聯想接下來你可能會輸入的詞;截圖后進入微信聊天頁面后,系統會將你剛截的圖前置,它會自動判斷你可能想發送該截圖。如下圖:
通過用戶快捷跳過的入口,比如常見的:引導頁、操作手冊、還是開屏廣告,有“跳過”或者”立即進入“按鈕真的很貼心。
對于用戶頻繁使用的部分,提供快捷的重復使用操作,比如:外賣app,用戶可以快捷地再來一單,同時保存上一次操作記錄。
在設計功能時,最好能考慮到不同層次用戶的需求,以此來讓用戶「各取所需」(需要平臺有多類型用戶);比如常見的Word、Photoshop等,有一個“二八定律”,就是說80%的功能是給20%的用戶使用的。
設計這類產品時,最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個產品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。
淘寶的首頁每個人推薦的商品都不相同,淘寶后臺根據用戶的瀏覽習慣,購買/收藏記錄等大數據智能判斷用戶的喜好,對商品進行千人千面的分發。
但是切記不要太過依賴大數據算法的判斷,因為一旦形成這種模式,會給用戶造成回音壁效應,你越喜歡的東西系統就越給你推薦,其他的商品就像回音壁一樣被吸收過濾,用戶永遠沒有辦法發現新的東西,讓用戶的選擇永遠都在一個死循環,所以做千人千面設計時一定要適度。
優美而簡約原則的根本目標是讓用戶快速找到界面的重要信息,引導用戶的視線及操作行為。
UI設計應該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內容,刪除多余的視覺表達元素,讓界面保持美觀簡約。
“快掃”是互聯網用戶瀏覽的主要方式。我們熟知的產品設計的四大基本原則:親密性、對齊、重復、對比,就是使頁面優美而簡約的方法。
建立清晰的視覺層級,越重要的內容越突出,能夠方便用戶無障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區分開,加強頁面層級區分。
我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。
避免界面呈現過多元素,包括動效、配圖、icon、按鈕等等,降低用戶的視覺干擾。保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀,可采用大留白增加頁面呼吸感,聚焦內容。
用戶注意力資源有限,應該保持信息精煉,突出重要信息,弱化次要信息。
上面兩個案例通過加粗放大、標記顏色,從而讓頁面簡潔,且突出重要信息。
容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地,從而給用戶一致產品很安全貼心的感覺。
系統需幫助用戶識別、診斷、并為用戶從錯誤中恢復提出建設性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了,比如404頁面的情感化插圖、彈窗提示用戶出錯等。
當發生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要,并給出解決方案。例如刪除訂單時,會提示二次確認,避免用戶誤操作。
在出錯界面給出解決方案,可以是文字提醒或者按鈕跳轉等形式,幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕,引導用戶去操作,去進一步解決問題。
系統能幫助用戶自動甄別錯誤,并及時進行糾正時,將會給用戶帶來極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯,相冊的最近刪除、回收站等等功能。
人性化幫助原則的根本目標是用戶在使用產品的過程中有所依循,因為產品已經貼心地為他們準備好了幫助方式,或者即時提示和反饋,或者客服。
人性化幫助用戶最好的方式分別為:1、無需提示;2、一次性提示;3、常駐提示;4、幫助文檔。
最好的就是沒有提示,用戶就能看懂與應用產品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進入app或新功能上線的引導設計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。
最后就是幫助文檔了,一般用于解釋規則或者熱點問題,通常以超鏈接的形式存在于頁面中,或者以集合形式位于設置頁中,此時需要注意要易于檢索。
幫助文檔的入口容易找到,幫助信息方便用戶查找。常見的方式有:鼠標劃過懸浮文字說明,幫助用戶更好地理解。
用戶通過查看幫助文檔來學習新功能,相對比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學邊練”,就更容易讓用戶理解。
提示語避免使用專業術語,盡量使用圖片或者圖形,同時處理文字外還可以使用示意圖,操作步驟等,方便用戶應用。
在操作時的幫助信息,比如幫助懸浮按鈕:一直出現在頁面固定位置,方便用戶遇到問題尋求幫助。
搜索時,預搜索詞直觀地顯示出來,可以讓用戶更快地做出搜索判斷。微信轉賬頁面,當用戶輸入金額較大時,會在第一位數字下方提示轉賬金額的人民幣單位,目的是為了避免用戶輸入錯誤金額導致資金損失;
復雜的流程可以通過分步驟來引導用戶逐步完成,而不是一次完成所有任務。個性化的提示一次就夠了,用戶用過一次就知道其用法。
現在很多C端產品普遍做了良好的交互設計,可以幫助用戶快速學習使用,而不用閱讀、理解復雜的說明文檔。
然而,B端產品的復雜性比C端產品高很多,因為B端產品蘊含很多業務流程的規則,系統中的一個按鈕可能代表了一個復雜的業務處理規則,如果不了解整個業務場景和處理規則,是很難理解按鈕的操作含義的。
因此,對于B端產品,用戶進行自助服務、自助操作的難度高很多,B端產品的幫助文檔依然有存在的必要。產品設計人員要盡量在前端交互上做好引導提示,對于復雜的規則和邏輯,可以考慮通過幫助文檔來指導用戶。
尼爾森十大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,而不是具體的規定。
1、狀態可見原則:位置可見、數量可見、狀態可見;
2、環境貼近原則:語言應該是用戶所能理解和習慣的;
3、用戶可控原則:可見導航、關閉與返回、撤銷與重做;
4、一致性原則:產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業內產品一致;
5、防錯原則:操作前預警、操作中確認、操作后可撤回;
6、易取原則:易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入;
7、靈活高效原則:靈活配置、允許頻繁操作、各取所需;
8、優美而簡約原則:視覺層次明顯、簡約且突出重點信息;
9、容錯原則:幫助用戶識別、診斷,并從錯誤中恢復提供方法;
10、人性化幫助原則:無需提示、一次性提示、常駐提示、幫助文檔。
我準備了一些常用的設計素材送給大家,需要的話免費拿走。獲取方式:老規矩公眾號后臺,發送文字“素材”,就可以獲取了~
文中如有不嚴謹的地方希望大家給予指正,希望大家可以多多點贊評論鼓勵一下,最后感謝你的耐心閱讀。
今天與大家分享的是關于B端頁面中篩選區的功能設計,本文會從篩選的展現形式、布局、反饋、設計中遇到的問題以及設計思考這幾個方面進行講述。
篩選,也可以稱作過濾器,它屬于搜索框架的一部分主要用于內容提取,將一類數據展示,同時一類數據隱藏,可以整合很多的組件。
在B端產品設計中,篩選區的設置便于用戶進行數據查詢和數據定位,可以快速的按照需要對數據進行查詢和篩選;篩選的存在對于整個表單來說是非常重要的,它可以幫助用戶在表單茫茫多的數據當中進行快速的數據定位;可以對表單進行快速數據按照自己想要的方式進行劃分,縮短用戶對于數據的尋找時間。
1、篩選區的展現形式有哪些?
篩選區常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區,但是二者還是有所差異的。
通過百度百科我們可以了解到:
搜索,意思指仔細查找,搜尋。
篩選,篩選是利用篩子使物料中小于篩孔的細粒物料透過篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件,細粒適篩是分離的目的。
在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容,功能偏主動性;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容,功能偏被動性。
無論被動性還是主動性,搜索和篩選這倆個功能都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。二者在功能上相輔相成,在B端系統的頁面中僅靠搜索或者篩選作為內容篩選都是不夠的,這就需要組合篩選區了。
1.1搜索篩選
精確搜索
優點:搜索準確率高,所要即所得。
缺點:需要用戶自己輸入,然后進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的內容,方便用戶填寫,以及確認輸入的類別或格式。
適用場景:適用于用戶有清晰的目標,同時需要有查詢/搜索按鈕,來執行篩選。搜索需要配合篩選固有類一起使用。
模糊搜索
優點:模糊搜索可以用于搜索關鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結果,減少記憶負擔,適用于不明確的信息篩選。
缺點:篩選出很多類似相關的內容,需要查找鑒別所要內容,不便捷。
適用場景:用戶對目標模糊,模糊是指不用關心輸入了什么格式,哪怕錯了,系統也會推薦給用戶相對正確的;用戶需要瀏覽操作過濾器提供的信息來輔助篩選達到目標。搜索需要配合篩選固有類一起使用。
搜索的設計原則
關于搜索,幾乎沒有人不知道,哪怕是不從事設計、產品的人,他們也知道。同時每一個產品,隨著規模變大,搜索一定必不可少。那么如何設計好搜索呢?有哪些原則可以借鑒,總結了以下4個方面。
漸進呈現
在我們設計搜索時,可以考慮漸進呈現的方式。這是指搜索結果不要一股腦兒都塞給用戶,而是使用逐步擴大的方式,讓用戶慢慢進入目標。但這里要注意,漸進的層級不要太深,漸進的內容要做到足夠為用戶著想。
結構化
結構化是指搜索結果呈現的形式要有歸納和整理的意圖,不能反饋給用戶的是沒有層次的內容。簡單來說,分類就是結構化呈現的體現,內容結構化后用戶查找和定位才會更快速。
可操作
對于搜索結果,我們可以給予操作選擇,例如收藏、分享等,這將會大大提升用戶與搜索結果之間的后續聯系。
可操作性是最佳優先的好伙伴。同時給搜索結果添加使用類操作,這會讓用戶專注于目標。
可保存
無論搜索任何內容,用戶都有權保存自己常用的搜索結果,保證用戶后續無需重復搜索。這點上已經有很多C端產品做的很好了,我們在B端產品上也可以考慮起來。
1.2條件篩選
下拉篩選
優點:頁面的空間利用率高,同時下拉起到了很好的收納作用,不占據頁面空間。
缺點:由于下拉的局限性無法觀看到所有的篩選字段,需要操作點擊查看。
適用場景:下拉的篩選字段選項有限,可以明確的總結分類時,一般采用固定選項類。這種操作起來便捷,降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕,但是也有的產品是勾選即執行的。主要需要結合具體的使用場景去判定。
矩陣(平鋪)篩選
優點:用戶可以直接看到篩選內容,支持輸入更多篩選條件,減少操作步驟提高了用戶篩選的效率。
缺點:平鋪的篩選類目占據頁面空間較大,空間利用率低,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不適合選項太多的情況。
適用場景:平鋪篩選控件的普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。需要注意的是,篩選條件不要過多(遵循7±2 法則)。
注意事項:
當確實需要支持大量的篩選條件時,有兩種解決方案可供參考
1、用戶自行配置篩選條件:對用戶來說,單次篩選會用到的條件是有限的;通過可配置的篩選條件,實現檢索效率和信息噪音的平衡,對于用戶自定義項的體驗與應用都有更好的支持。
2、 隱藏低頻的篩選條件:這種方法需要對用戶需求有明確的把握,哪些篩選條件是高頻、哪些是低頻需要有明確的分界,優點是第一次使用時用戶能更快上手。
表頭篩選
優點:通過表頭的點擊,簡潔、直觀的篩選當前表格列。
缺點:只能篩選當前列的內容,篩選字段比較少,篩選形式比較單一。每個表頭都會有篩選的icon,影響用戶對于表頭的識別。表頭篩選學習成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。
適用場景:表頭篩選類似Excel表格的操作,是一種相對高級的交互,適合表格列比較單一內容的篩選。
注意事項:
一般來說不推薦使用,僅建議在以下幾種情況考慮使用
1、空間是在有限或者表格非常靈活;
2、用戶可能對每一列都有篩選需求(如數據報表、Excel);
3、產品規劃時對于用戶篩選需求不夠明確,也可通過這種模式先采集數據,分析其使用頻次,對后期的界面優化進行指導。
TAB標簽
優點:篩選條件一目了然,交互步驟少,一個Tab標簽代表一個緯度,平鋪展示篩選內容方便識別,學習成本低。
缺點:Tab標簽篩選字段數量有限制,不宜過多,分類需覆蓋選項,并且保證每一項沒有交集,空間占用多、不夠靈活,對用戶自定義項支持較差。
適用場景:Tab標簽切換一般用于和時間、狀態的流轉有關,且沒有交集的數據內容(可以是同性質,也可以是不同性質)。權重高,選項值不超過5個。
1.3組合篩選
在B端系統表格類頁面中,字段屬性很多,簡單的檢索方式很難準確定位到目標數據,所以在實際使用當中,常會將大量非交叉關系的屬性進行羅列,搜索、篩選、TAB標簽切換組合出現,形成多屬性的組合檢索。而篩選項互相組合,其展示方式有如下幾種:
平鋪式
平鋪式是將所有篩選項羅列出來平鋪在頁面上,可以兼容多種數據格式比如數字、文本、標簽、枚舉值、布爾值等,包含但不限于日期選擇期、標簽切換、單選框、復選框等多種控件。
優點:用戶能直接看到選項內容,方便用戶識別選項,且提高了用戶篩選的效率(節省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問題。
缺點:篩選項多會占據大量頁面空間,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不利于表格數據的直觀展示,此類型一般配合“勾選即執行”使用。
適用場景:普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景,多維度篩選對信息篩選的顆粒度需求不一致,同時希望備選項被選中。
折疊式
折疊式篩選是平鋪式篩選的改進,一種簡單直接的篩選形式,對平鋪的篩選項進行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過折疊的方式將這部分篩選字段隱藏起來,高頻篩選字段外露。
優點:高頻篩條件可優先快速篩選、一定程度上減少用戶的認知負荷,同時占用空間較小。
缺點:不好劃分不同用戶的高頻篩選項,當高頻篩選項過多時,頁面同樣會出現信息冗雜、空間占比大等問題。
適用場景:折疊低頻篩選,顯示高頻篩選,能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。
從位置上來說,組合篩選一般有如下幾種常見類型:上下布局水平篩選區、左右布局的垂直側邊篩選區、 內嵌的的表頭篩選區。
上下布局水平篩選區
最常用的上下布局,篩選區放置在表格頁面的上方,方便用戶識別選項,提高了用戶篩選的效率,明確哪些數據是用戶所需的。上下布局的篩選區也方便用戶進行閱讀,對于那些由不同數據結構組成的頁面,是一個很好的選擇。
上下布局的篩選區的可擴展性差,當篩選項目少于五個的情況下,最常使用的就是上下布局,而當篩選項目多的時候,會占據大量頁面空間,內容在較多時,推薦增加收起功能,這樣保證篩選整體面積不會很大,提升屏效比。
左右布局的垂直側邊篩選區
左右布局的篩選區一般是以字段選擇進行篩選,篩選區的位置較固定,不會因為篩選項過多而影響頁面中主要內容的位置,可擴展性強,可在收起部分嵌套更多的字段值。
左右布局的好處就是能夠將篩選的所有條件都直接的展示出來,可以適應很多場景,但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響,避免造成混亂。
內嵌的表頭篩選區
表頭篩選是一種復雜的篩選形式,常見于列表中,是一種列表內置篩選形式,適合表格列比較單一內容的篩選,其最開始是源于Excel的篩選形式,點擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。
篩選區有兩種不同的反饋模式:數據實時更新反饋和數據手動更新反饋。
數據實時更新反饋
界面將與所有設置的篩選相匹配并對結果進行實時更新。
這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗,可以在每次點擊后立即看到結果。適用于較低風險的交互,一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少,如果應用中數據量巨大,每次更新時間較長,反而會降低用戶的使用效率。
手動更新反饋
在手動更新反饋模式下,過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果,必須單擊查詢按鈕。
這種模式適合多緯度復雜的篩選,所有篩選字段設置完畢之后,統一執行操作,和實時反饋結果相比降低篩選等待時間,尤其是在大量數據進行篩選中,優化了用戶體驗。
什么情況不適合用篩選?
選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼,注冊用戶郵箱這種無明顯規則的就不適合用篩選組件去查找,用搜索會更好。
篩選分類條件有什么要求?
一是分類需符合大眾認知的條件。如:按照年月日的認知來選擇,地理位置按照省市區街道…
二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。
高頻篩選操作怎么樣方便用戶操作?
首先高頻篩選操作不是產研團隊自己主觀臆斷出來的,需要有數據支撐。很多產品為了滿足用戶快捷操作,會在篩選區幫用戶集成常用的快捷操作入口。比如很多電商產品的新品、包郵等快捷篩選。根據不同產品用戶習慣下操作整理出快捷操作入口能提高用戶體驗方便度。
篩選和搜索的區別?
主要區別在于用戶對目標的清晰度不同,需要選用不同組件功能來達到其目的。
在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容。
搜索和篩選都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。
在設計組合篩選的時候,篩選區的設計需要根據業務實際情況進行設計,考慮每個篩選字段和業務場景,來安排合理的篩選展示方式。
那么到底什么情況下使用何種篩選模式?我們在設計篩選的時候可以如何思考?顯然,使用頻率和界面空間是兩個非常重要的評判維度。除此之外,我們還可以以可見性、系統性能和用戶認知等維度去深入思考,下面將逐一分析。
頻率
使用頻率是界面設計的一個重要考量因素,我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理,對于篩選模式,我們也會依據篩選條件的高低頻進行設計。頻率除了影響使用什么模式外,還會影響篩選條件及篩選項的排列順序,這里就不多敘述了。
界面空間
一些界面模式的出現就為了應對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
可見性太弱,當篩選條件都被收納在一個個小小的入口按鈕時,它的可見性也會隨之降低,尤其在PC端,一個大屏幕下更難發現。
可見性
既然說到可見性,不妨展開講講??梢娦允且豁椫匾脑O計原則之一。一個明顯的道理是,可見總比不可見好,但由于界面空間限制,我們不得不取舍。那么如何取舍才能保證可用性仍然友好?
針對篩選模式的可見性,我們可以分三個要點去考慮:
1、篩選條件本身的可見性:
用戶越難發現,即可見性越低。通常,我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效,因為正如上文所提及,到了篩選這一步通常是顆粒度比較細的分類,否則我們可以用導航解決。但顆粒度越細,用戶對信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌篩選,有人希望按價格,有人希望按顏色,我們很難判斷哪個頻率更高。面對這種情況,只能將所有的篩選條件平鋪出來供用戶選擇。例如,淘寶天貓等電商產品往往會使用矩陣式的篩選,而一些數據格式更多樣的B端產品則直接使用輸入式的篩選。
2、篩選項的可見性:
篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高,因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎?對于這個問題,可直接以篩選項的多少去決策(少則可見,多則不可見),比如一些B端產品,如果將備選項都全平鋪出來可能一個屏幕都放不下,所以只能將所有篩選項收起。但這是一種極端的情況,缺乏說服力。
用戶對備選項是否足夠熟悉?比如對于一個尺碼的下拉框,我很清楚自己能選擇什么,但對于一個衣服風格的下拉框,由于我對風格不熟悉,不能預判這個篩選條件能起什么作用,很可能會將其忽略。
3、選中項的可見性:
選中項的可見性,即當我選中某幾項后再次查看選中項的難易程度。
性能
數據量大才需要篩選,而數據量大必然會有性能問題。在不同場景下,用戶會發生不同的行為,對性能的要求也會不一樣。我們能經常發現一些篩選模式會帶有“確認”按鈕,當用戶設置完篩選條件后不會即時刷新,而需點擊按鈕才能觸發。而有的篩選模式則沒有“確認”按鈕。這分別對應著兩種不同的場景。
第一種場景,如B端產品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息,并進行對比分析,那么我就會設置篩選條件A、B、C后一并篩選出來,這種情況是一步到位的,我不需要再額外添加條件D或E,所以有“確認”按鈕的篩選模式更符合此場景。反而即時刷新會在我設置篩選條件時造成干擾。
另外一種場景,常見于B端產品中的查詢列表場景。如果我想找到信息α,通過篩選A后得出10個信息,那么憑肉眼即可找出信息α,任務結束,但如果篩選A后得出1000個信息,我可能會再添加篩選條件B、C或D,直到篩出的信息能讓我一眼分辨出信息α。換句話說,這時候我的心理模式是即時滿足的,只要信息縮窄到一定范圍我就會停止添加篩選條件,否則我會繼續添加篩選條件。所以即時刷新能更符合此場景,但與此同時就需要考慮到性能問題。
另外,我們也可從變更頻次和變更概率這兩個維度進行思考。
變更頻次是指用戶反復使用篩選的次數,變更概率是指用戶使用篩選的可能性,一般來說,高頻次必然大概率,但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例,在列表中,雖然很大概率會使用篩選來尋找信息,但由于用戶是即時滿足的,而且滿足即可,所以不會重復變更篩選條件。而在報表中,雖然用戶會一次性設置篩選條件,但需要分析的數據不只一種,所以會高頻更換篩選項,回想一下我們去分析自己產品或競品的日活月活等數據時,是不是會高頻地切換數據來分析比對?所以,高頻次的篩選就會對性能有更強的要求,而為了避免性能問題,往往也會加上“確認”按鈕。
用戶認知
最難解決的其實是用戶的認知問題,尤其在模式相對固定的當下,讓用戶適應并習慣新的模式并非易事。我們想出一些創新性的篩選模式時,不要忽略用戶的認知。
什么是交互設計?
交互設計是針對流程進行的設計,為確保用戶與產品接觸時有符合的行為習慣,保持操作過程的流暢邏輯,需要通過交互設計來引導行為,設計整個行為流程。
流程中需要考慮接觸前的信息顯示,接觸過程中的體驗反饋,以及接觸后的結果反饋,來給予我們下一步的行為指示。交互流程的目的以提升用戶使用產品過程的體驗感受為目標。
那么我們應該根據用戶習慣設計功能?還是設計可以改變用戶原有使用習慣?
產品設計該以什么樣的交互方式呈現?我們的設計又是否為用戶帶來愉悅的使用體驗?
在《俞軍產品方法論》中關于用戶行為背后原理的闡述,在行為發生前,用戶會接受一個情境的刺激,然后用戶會根據已有的認知經驗去產生一個主觀的期望效果,并產生與之對應的行為。行為產生的結果反饋又會成為認知經驗,從而可能對用戶的下一次行為產生影響。
用戶的行為認知具有可塑性,會根據每次行為的反饋積累經驗來完善認知模型,每次的結果反饋也會影響用戶下一次產生相應行為的判斷??梢娪脩粜袨槠鋵嵰彩且粋€不斷學習和適應的過程。
用戶行為受以往經驗影響,即在使用產品前就會根據認知去引導行為的產生。不只在同一產品中會有這種行為,用戶同樣會把認知經驗也代入到相似產品上,繼而有著相同的使用期望和操作行為。
這與尼爾森提出的雅各布定律有著相同的理論結果,作為10大可用性原則的提出者,他通過研究發現用戶更善于根據已積累的經驗來使用產品。
雅各布定律用戶將大部分時間花在其他網站上。這意味著用戶更喜歡您的網站與他們已經知道的所有其他網站相同的方式工作。為用戶習慣的模式設計。
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed
遇到新事物時,當產品概念與用戶認知不匹配,用戶在使用產品的過程中就會由于不一樣的理解方式而產生困惑,甚至產生持續性的錯誤操作,所以在設計思考中應盡量考慮用戶原有認知習慣。
舉個較簡單的例子,在抖音習慣了豎屏沉浸式瀏覽短視頻的行為后,在相應視頻類產品也會產生同樣需求的場景,提供對應的功能滿足用戶需求,有助于用戶使用產品提升平臺內容的消費曝光,相同的交互方式和內容信息展示也有助于降低用戶理解成本,提升使用體驗。
(1)認知負荷
為什么用戶更喜歡根據已有經驗來使用產品?這就需要了解另一個概念,認知負荷。
認知負荷是指一個人工作記憶中正在使用的注意力或者精神力總量。
人對信息的理解、短時記憶存儲是有容量限制的,當我們的大腦接收的信息超過了上限, 就會減慢大腦信息處理的效率,在短時間內處理大量信息必然會增加大腦的認知負荷,進而影響到判斷與決策。
而用戶在操作任務時,相關信息又會存儲在大腦的短期記憶中,在理解頁面信息時,需要識別、思考、記憶越多就會產生負荷。
表現在用戶自身上的就會覺得復雜,“這個是什么意思?”、“接下來要做什么”等等問題都會轉變成負向的情緒反饋。
所以用戶行為的習慣性是因為行為反饋符合自身認知,這樣讓產品使用起來更“簡單”。好的設計不需要讓用戶過多思考,這也指導我們設計師在方案思考的時候要可能降低用戶學習成本。
(2)習慣遷移
既然用戶行為習慣如此重要,那么就無法改變了嗎?
一般來說,舊的行為體驗越久,形成的沉沒成本越高,由于損失厭惡心理的存在,用戶接受新體驗方式的意愿會越低,沉沒成本是指過去的決策所產生的不可挽回的成本,包括時間、金錢和精力等等。
用戶和產品的關系在于價值互換,如果一個產品對用戶來說沒有價值,即使體驗再好也不會去用,而當用戶因為需求價值來使用產品時,如果體驗足夠好就可能留下來,用戶習慣遷移的最迫切問題就是怎樣讓新的產品(體驗)所能提供的用戶使用價值,足夠忽略沉沒成本的損失。
在《俞軍產品方法論》中,給出了提升用戶價值有三種方式:讓新體驗最大化,讓舊體驗最小化,降低替換成本,三者互相影響。
在產品設計中,我認為盡可能的根據用戶行為習慣去設計可以幫助用戶更好的理解和使用產品,為用戶習慣設計不是簡單的對競品模仿復制功能使用,而是更多關注用戶自身的行為需求去提供更多的產品價值,提升使用過程中的體驗,做到有價值的設計創新。
抖音目前的成功毋庸置疑,它改變了原有的視頻瀏覽方式,通過沉浸式內容展示提升了用戶專注度,滑動切換視頻保證了視頻瀏覽的延續性,將音樂當成視頻素材進行二次創作等等一系列創新都提升了產品價值。
所有的行為習慣都需要學習,但是好的習慣用戶只需要學習一次,上滑手勢的交互動作幾乎不需要什么成本,對視頻流內容獲取也有著很強的成癮性,很容易形成行為習慣。
作為抖音前身的Musically,創始人朱駿通過觀察當代年輕人在手機上的使用,將原本教育平臺的構想轉向做娛樂化平臺適應人群行為習慣。
年輕人有著極強的個性表現需求,并且已經在諸如YouTube,Snapchat等平臺懂得如何剪輯,拍攝視頻,內容生產不需要有過多的學習成本。但即便如此,還是發現了平臺用戶的上傳頻率不高,用戶很難保持高活躍的產出。
后來為了養成用戶隨時隨地創作內容的習慣,將產品價值調整為專業對口型APP,順應當時一個對口型挑戰的節目觀眾的模仿需求,進一步降低了內容生產門檻,優化了原本普遍認知下的上傳拍好的視頻片段到軟件,再添加音樂進行剪輯的流程,這也極大的提升了內容生產效率。
我很認同他說的,一個產品成功的核心,其實是因為他的一個功能很能打,不在于一直增加功能。
商業產品開發最終都是為實現商業價值,循序漸進地培養用戶行為習慣,有助于更高的留存,對于用戶行為設計、習慣設計,本質上都是通過一系列優秀的體驗來強化行為習慣,加強用戶需求與產品價值間的關聯,讓用戶自然而然的形成品牌認知,比如當用戶想打車或者想購物時心中所浮現的產品。
在行為設計中,有諸多因素會影響用戶是否會去使用產品/功能,福格模型將影響用戶行為的因素總結成以下概念:
B=MAP
這個概念看似簡單,但是適用于所有類型的行為,并且有很強的通用性,這個概念由行為科學家福格提出來,為各個領域的行為設計提供解決方案。
福格行為模型當動機(M)、能力(A)和提示(P)同時出現時,就會發生行為(B)
Behavior(B)happenswhenMotivation(M),Ability(A),andaPrompt(P)cometogetheratthesamemoment.
希望用戶具有哪些行為,用策略進行引導,設計滿足三個條件的方案或制造條件滿足,福格模型對我們的設計方向也提供了更多的想法。
總的來說,為觸發用戶對產品的使用行為,需要給予用戶足夠的動機,幫助用戶獲得能力,設計足夠明顯的提示。
在動機方面可以考慮用戶自身想要的內在需求,或通過外界獲得利益激勵,也可以根據用戶心理需求形成用戶間競爭、跟風、群聚等羈絆。
我們在設計上極可能地降低使用門檻,降低復雜程度,幫助用戶減輕心理負擔或解除憂慮。
考慮當下場景給予明顯的提示,做到“需要什么的時候剛好出現什么”,符合自身行為需求,保持用戶產品使用流程的連續性也有助于體驗的提升。
用戶行為是指用戶與產品進行交互的方式,設計師根據用戶行為特征進行設計,來提升產品使用過程中的用戶體驗,通過福格模型我們可以有更多的方案思考方向,在產品行為設計上比較常用的方式可以分成引導和預判兩種類型。
引導設計需要讓用戶明確當前的狀態,知道下一步能做的事情,避免用戶行為中斷;而預判類型主要需要考慮用戶下一步的行為,當用戶有明確的行為目標時,輔助用戶高效完成。
(1)未完成效應
利用心理學上的蔡格尼克記憶效應來提升用戶對未完成狀態的關注度,比如以進度條形式的任務類型。部分遮擋的內容信息設計方式也可以傳達給用戶,滑動可以查看更多內容的行為引導。
(2)信息提示
在用戶操作過程中,通過信息提示可以讓用戶明確不同操作行為的結果反饋,引導用戶做出符合自己預期的行為,降低不確定性和誤操作。
比如通過下拉操作出現的淘寶二樓,和微信中語音信息的發送都進行了信息提示。
(3)視覺動線
通過對用戶視線方向進行引導,達到傳達提示作用,在游戲設計中比較常用于方向指引。
如光遇中,用戶行進方向錯誤時,會有些微的鏡頭偏移到正確方向來進行提示,或者如原神中,直接以道路的行進方向來提示位置信息。
(4)物理映射
通過隱喻設計的方式,讓用戶聯想與物理環境中相似事物的特征,通過擬物的方式建立聯系,將現實生活中的認知代入產品中,以達到降低理解成本的作用。
比如在好好住中,利用陀螺儀來模擬物體掉落的重力感,增強了徽章的真實感和趣味性,網易云音樂模擬了黑膠唱片換盤、播放暫停等操作,儀式感滿滿。
(1)符合情境
產品設計的一個值得關注的點是合時宜,在不同的情境中,用戶的行為和意圖也會有所不同,針對性的進行區分設計才會更符合用戶預期。
比如在美團外賣中,在午間或晚間不同時間段打開的內容推薦也會有所差異,會根據時間段區分不同的內容展示。
(2)高頻行為
用戶與產品的關系是,用戶通過產品的使用來解決自身需求。在支付寶中,作為支付平臺,用戶間的高頻行為是轉賬、發紅包等交易行為,給予更多顯示可以降低查找成本。
騰訊視頻作為內容平臺,內容推薦的優先級也受用戶喜好等因素影響,在一般情況下,用戶手動標記的追劇內容會比單純平臺內容推薦更有播放需求,也更容易觸達用戶提升播放動機。
(3)臨時反饋
在一些流程設計中可能存在較強的上下步驟連續性,在系列行為完成前,用戶的關注度會更高。當原流程中,若短時間內重要的反饋信息需要強調時,將信息以成本最低的方式直接曝光給用戶,可以提升在整個流程中的高效率體驗。
餓了么作為外賣應用,當用戶下單后到收到外賣之前,再次使用APP,關注度最高的是當前訂單配送的位置時效,收貨后訂單狀態的優先級就會被降低,通過臨時狀態的顯示規則,可以靈活的解決信息顯示優先級的不同狀態。
同樣在iOS短信驗證碼的獲取過程中,因為驗證碼的獲取和輸入有著較強的關聯,收到短信后直接顯示便于填寫,輸入之后信息的需求降低,可以間隔時間或操作后自動消失。
(4)簡化流程
在功能使用中,設計師應該在功能使用,有符合用戶行為認知的前提下,盡可能不需要讓用戶頻繁操作,應該縮短操作路徑,減少多余思考成本。
在微博首頁的信息流中,當沒有評論數時點擊,會在當前頁面直接顯示進入評論流程,不中斷當前信息瀏覽的狀態;當有評論時點擊,會進入詳情頁的評論區。
一般來說,簽到都是為了提升用戶活躍的功能,通過外部獎勵養成啟動APP的習慣。樸樸中用戶點擊簽到入口,跳轉到簽到頁時,會自動進行簽到,在用戶目的明確的情況下減少了還需手動再次觸發點擊的行為。
在設計方案的分析中,我們會設想最理想的用戶行為路徑來思考,但用戶實際的產品使用過程有時候會與我們設想的有所差異。
在設計之初就需要考慮到用戶的行為路徑可能不只是一個線性活動,需要考慮多種行為路徑的情況加以權衡。并且我們所做的設計是針對某一類群體的行為,而非獨立的某一個用戶,考慮這類群體的行為共通性,才避免陷入過于過于絕對的細節判斷。
為了設計更符合用戶行為的方案,用戶調研應貫穿整個流程,通過定性和定量分析相結合來輔助我們做設計決策。
定性分析一般可以通過用戶訪談的方式來來了解用戶體驗的具體反饋和原因。
定量分析通過埋點數據來驗證群體行為的普遍特征,常用的數據主要關注以下兩種類型:
使用數據:
01
什么是靈動島(Dynamic island)
2022蘋果秋季新品發布會,備受關注的新一代iPhone如期而至,此次發布會最大的亮點是iPhone 14 Pro系列一改之前「劉?!乖O計,首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意,但一向以創新著稱的蘋果還是玩出了不一樣的花樣,帶來了全新的交互方式,模糊了硬件和軟件的界限,通過實時變化顯示重要的提醒、通知以及簡單的功能操作,蘋果把這一創新稱之為靈動島(Dynamic island)。
02
靈動島能做什么 / 不能做什么
靈動島其實可以簡單的理解為基于前置攝像頭區域拓展的消息通知和快捷操作的新交互方式。
來電
當有來電時,靈動島會發生變化,并在后臺打電話時顯示通話時間和聲音波紋。
音樂
有點類似于鎖屏后的音樂功能操作,保留了基本的播放、暫停、前進、后退等功能。
Airpods
連接AirPods后,AirPods的型號外觀和當前電量會一起顯示。
導航
顯示導航方向和距離,并且能夠在適當的時候放大顯示更多導航信息。
Face ID
以前Face ID認證會顯示在屏幕中間,現在集成于靈動島的擴展功能之中。
充電
當充電時,會顯示充電的狀態以及當前電量百分比。
當然,目前除了官方展示的這些功能以外,還會有更多的應用方式,在此不一一列舉。但靈動島也并不是萬能的,例如會存在以下的局限性:
重度使用場景
從官方給出的樣例來看,靈動島更多的是承擔了消息通知和提醒的作用,并不適用于重度使用和復雜交互等場景,例如消息聊天、刷短視頻、買賣交易等等。
過于復雜的圖形
受限于前置物理攝像頭,靈動島這個區域并不能顯示過于復雜的圖形,并需要避開攝像頭區域,因為該區域是不能顯示任何圖像的。
軟硬件的邊界
靈動島的實際效果并不會像宣傳圖中那樣好,特別是在反光強烈的戶外。攝像頭的挖孔清晰可見的,即使是在黑色不發光的OLED屏幕上,軟件和硬件的界限還是能夠明顯區分。
03
對于靈動島的各方反應
新事物的出現,總會伴隨著支持和反對兩種聲音,此次靈動島的創新交互,自然也是褒貶不一,還需要經受時間的考驗,因為即使是蘋果這樣的公司也難免會犯錯,比如3D Touch、MacBook上的Touch bar等。
支持方認為「靈動島是繼劉海屏之后的又一個成功設計,甚至會超越劉海屏,更受歡迎」。
「靈動島的設計非常討巧,同時也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分,首先是羅永浩第一時間發表了自己的觀點,表面上是硬贊這個創新,但實則是諷刺了這樣多此一舉的方式,「先在臉上涂屎,然后再把屎的顏色調整得跟粉底差不多」
很多的輿論認為,靈動島的創新是蘋果的一種無奈和妥協,因為自從第一代iPhone革新性的使用觸摸屏之后,十多年以來手機在工業設計方面并沒有太多的創新,大部分廠家是在屏幕分辨率,后蓋材質,攝像頭像素上面做文章,而蘋果作為一個工業設計創新的公司,也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創新,被認為是工業設計乏力之后推動交互設計創新的無奈之舉。
但無論支持還是反對,前置攝像頭挖孔屏終究是一個過渡性的方案,最終會被全面屏所替代,而在這個過渡時期,很明顯蘋果的解決思路與國內的絕大多數廠商都不一樣。
04
為什么國產手機不做靈動島
國產手機的前置攝像頭解決方案除了「劉海」以外,單攝像頭「圓孔」和雙攝像頭「藥丸」設計都已經非常成熟,但是為什么經過這么多年的迭代,依然沒有創新呢?
思維方式的差異
國產手機廠商的思路跟蘋果相反,希望盡可能的把前置攝像頭做得越小越好,甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案,目的就是為了把前置攝像頭隱藏。而蘋果的思路則是,既然現階段的技術沒有辦法把前置攝像頭隱藏,那么干脆就以此為基礎,把這個區域運用到極致。
缺少創新和引領者
似乎國內的用戶更關心的是電量是否持久、屏幕刷新率高不高、拍照功能強不強大等問題,秉持著「人民需要什么,我們就造什么」的成功理念,各大廠商也開始在這些方面內卷,從60Hz到120Hz刷新率,從千萬像素到一億像素,從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情,而很少有關注從0到1,因為這樣做的性價比的確不高。
市場的接受和認可程度
當劉海屏第一次出現的時候,很多用戶都在吐槽,其中也包括很多蘋果的忠實用戶,寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經過一兩年的審美教育以及國產手機的跟風之后,才慢慢的被更多用戶所接受。因此國內的廠商很難有信心通過一己之力去改變用戶習慣,并贏得市場的認可。我相信,蘋果發布以后,各大廠商已經在積極的學習和模仿,新的一輪內卷即將拉開帷幕。
即便如此,國產廠商也并不是完全沒有在前置攝像頭的區域努力嘗試過。例如魅族曾經在前置攝像頭上顯示當前電量,稱之為「環形電量」,并盡可能的使其與狀態欄的其它信息融為一體。
榮耀的通話時間膠囊和自拍膠囊,都以前置攝像頭為基礎做延展,可以看得出在想盡辦法的規避前置攝像頭所帶來的不好體驗。
雖然VIVO的原子通知不是圍繞前置攝像頭區域拓展,但從效果和想法來看,也與靈動島的概念比較類似。
HTC曾經出過一款HTC U Ultra,當然那時候還沒有全面屏的概念,所以HTC把它稱之為副屏,可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外,幾乎所有劉海屏的手機都有把劉海隱藏起來的功能。
05
對設計師的影響
靈動島的出現,對 iOS 原本通知、交互、卡片、彈窗等一系列交互規范進行了解構再重做,就好比「劉海屏」首次出現的時候,需要設計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。
新的交互方式
之所以叫靈動島,就是因為它是「靈動」的,擁有不同的狀態變化,以適應各種功能提示和操作。設計師在使用這個功能的時候,需要充分考慮其場景,恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態的容器可以裝載不同的內容,相比于以往常規的通知提醒,新的容器可以展示更多的信息,甚至是簡單的功能操作。在提出解決方案的時候,留給設計師更多的想象空間。
新的表達方式
靈動島相當于一個永遠在桌面上的島嶼,比任何App的優先級都要高,所以會成為各個應用的必爭之地,使用一種好的表達方式,必然能夠達到事半功倍的效果,因此也是考驗設計師在寸土寸金的區域中,通過視覺化手段表達的能力。
最后,我想蘋果的初衷是為了更好的用戶體驗,消除一部分用戶對于挖孔屏的焦慮,如果能夠真正的站在用戶的角度、克制的去使用新的交互方式,會得到用戶的喜愛和市場的認可。
我認為靈動島既是一種創新也是一種妥協,對于工業設計硬件創新乏力的妥協,更是對技術發展的妥協。我也相信,真正的全面屏時代終究會到來,期待那個時候蘋果再一次給我們帶來真正意義上的,里程碑式的,創新!
在產品設計中,當有新上線的功能或隱藏功能時,我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物,相比于靜態內容,我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引,然后是面積占比大的元素,最后根據閱讀習慣從上到下,從左到右,依次查看其他內容。(大致如下圖)
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態,便能使其脫穎而出,這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時,設計師們都會根據功能重要程度,來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素(通常這類形式只出現一次,當用戶點擊后就會消失)。當然,也有將上述點綴元素動態處理的。如果入口是圖標,甚至可以為圖標制作動畫,這在很多電商產品的品類區經??梢钥吹?。
動態處理的形式,比原本的靜態更容易引起用戶對元素的注意力(與動態方式有關),甚至傳遞某種情緒。由于是循環播放的動畫,因此可以持續吸引用戶注意力。
ps:據說,每當頁面多出一個會動的元素,后臺就會多出這樣一些留言,捅了開發窩了[Doge]。
▍誘導用戶操作 ?
動態引導還常常被設計師用來強調重要內容(有可能被產品、運營拿刀架脖子),來達成某些數據指標,通過利用動態誘導用戶操作。
例如:在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。
這些都能充分引起用戶注意,甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道,在大屏上有更多空間可以展示信息。但在移動端,受屏幕大小限制,設計師通常會折疊或隱藏不常用的功能,來保持頁面簡潔。
對于這些不可見的功能,在初次使用時需要進行引導,才能被用戶感知與使用。
▍操作教學指引 ?
講到引導,還必須要提的是手勢引導,通過動態直觀展示不同手勢的作用,提示用戶如何與產品進行交互。
這在游戲教學中就常常使用,它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中,你是否留意到,當你第一打開視頻時, App 會提醒你雙擊屏幕可以點贊,上下滑動可以切換視頻。
在產品交互設計中,如果使用到一些新穎的交互方式,這類引導可以大幅降低用戶學習成本,幫助用戶快速上手。
▍信息高效傳遞 ?
動態敘述的直觀性,使得我們可以減少對復雜信息進行大量文字描述。通過動態設計,我們可以創建視覺故事,這有助于將復雜信息以更簡單、清晰的方式進行傳遞,從而幫助用戶快速完成任務。
也因此,在一些含有復雜操作的彈窗中,漸漸開始應用。
但是需要注意的是,上述這些大多都只在第一次使用時才會觸發。
當然有特例,例如:
在 App Store 每次下載應用進行驗證時(面容解鎖的情況下),系統會通過動態提醒用戶電源鍵位置,并告知用戶需要雙擊進行人臉識別。
在掃碼時,弱光場景下出現的手電筒,通過動態引起用戶注意,指引用戶使用。
以及作為動態演示,幫助用戶理解如何使用手掌滑動截屏
如何進行NFC感應等等..
動態引導像是設計師用來控制我們眼睛的法寶,有的人用它改善產品體驗,有的人用它提升商業轉化。
但法寶雖好,我們只有理性使用,才能避免用戶迷失在這眼花繚亂的世界中。
作者:幺零三
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者:菜菜不甜 來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
良好的用戶體驗需要所有信息都符合邏輯且觸手可及。以下是一份完整的信息架構指南,它可以避免你的用戶迷失在錯綜復雜的網站信息中。
當我們使用任何網站或移動應用時,都會面對向我們提供所需信息的界面。這是大家都習以為常的,大多數用戶甚至沒有注意到網站的所有內容都經過精心組織。
內容的組織和劃分被稱為信息架構,它是用戶體驗設計的一個重要部分。如果內容沒有經過適當整理,大多數用戶在瀏覽網站或app時容易迷失方向,使得產品的真實價值被掩蓋。畢竟,即使再棒的功能也需要用戶去發現。
為確保你的內容結構合理并能以最佳方式呈現給用戶,好好看看我們為你準備的這份信息架構指南吧。
1、什么是信息架構?
信息架構可能難以定義。
部分原因是,內容寫作等其他學科可被縮小到特定職業,比如作家,而信息架構的范疇卻涵蓋了多項職業。的確,參與產品開發的每個人都會多少用到信息架構。
大多數網站和app都要將內容分成多個部分讓用戶快速理解,同時要被合理組織以便用戶發現產品的所有功能。當這項工作進行的非常順利時,用戶永遠不會停下來思考網站如何為他們組織信息。
Google Drive或Medium等網站就是這樣,設計者必須仔細考慮如何向用戶呈現信息。否則,功能就會有被淹沒在隨意布局的按鈕和鏈接中的風險,用戶既難以關注也不會喜歡。
在其他案例中,你可以看到信息架構的作用極其顯著,同時也很難做好。
2、信息架構與UX相同嗎?
不相同。
兩者之間有很強的聯系,盡管UX涉及大量的信息架構工作,但兩者并不完全相同。
用戶體驗涉及范圍更廣,包括了信息架構不會觸及的幾個方面,例如要確保界面令人愉快、響應用戶的某些心理需求。相比之下,信息架構則更側重用戶目標和為此付出的認知力。
以下是這兩個概念的緊密聯系:沒有良好的信息架構,就沒有合理有效的用戶體驗。它是界面開發的基礎,為我們所知所愛的用戶體驗設計其他方面打開大門。
然而在此,我們應該做一個小小的區分。
信息架構是建立用戶體驗的堅實基礎,但并不代表整個項目工作。
一旦你知道如何為用戶建立良好的信息架構,你需要為用戶體驗添加閃光點并進行其他工作,例如融合信息架構的交互設計,這樣才能創造讓人驚嘆的用戶體驗。
3、一個巧妙的信息架構類比
信息架構使你的產品可用,這在電子游戲中更為明顯。
電子游戲擁有自己規則和歷史,是一個全新的世界。這意味著如果用戶希望在游戲中進行下去,就需要向他們呈現關于這個世界的大量信息。
但你會注意到,所有這些信息不是一次性呈現的,而是隨著游戲進展,一點一點呈現。
首先,你會看到場景設置介紹,通常講述主角和一點背景故事。在此出發,新信息將以易于消化的形式呈現,從而使玩家可以慢慢探索這個世界。
在達到特定等級或完成特定動作時,那些小的對話框、內容框向用戶提供的新信息,都是游戲中最好的信息架構。但是我們如何決定從開始該告訴用戶什么內容呢?我們如何提供適量信息滿足用戶的好奇心,而非過量信息使用戶感到疑惑?
圖 1 刺客信條:奧德賽。摘自福布斯
4、信息架構的元素
正如大部分設計的輔件,信息架構有很多組件幫助你將這些結構應用于產品。
這些組件是由信息架構先驅羅森菲爾德和莫維爾在他們的開創性著作《Web信息架構》中建立的,如果你想深入了解信息架構,推薦閱讀這本書。這些組件組成的系統,用不同方式組織內容、讓內容被用戶發現。
4.1 組織系統/結構
組織結構讓你的內容具有意義、易于理解,即標記不同信息之間的聯系并嘗試構建框架,幫助用戶了解產品所有信息之間的聯系。
構建框架后,由于所有的內容分布都具有邏輯,用戶就更容易預見某些信息的位置,這也是可用性測試的一個經典部分。在《Web信息架構》中,列出了信息架構的三種不同框架。
1)層級結構
也稱為樹形結構,這意味著使用滴漏效應,將廣泛的分類放在頂部,更具體、更小的子類別放在下方,讓用戶進行導航。這種視覺層級將相關信息呈階梯狀顯示,很好地傳達了不同信息的重要性。
2) 順序結構
這種形式的信息架構通過組織信息為用戶創建特定瀏覽路徑。用戶需一步步操作,并僅接收當前呈現給他們的信息。這樣可以避免給用戶提供太多選擇,從而避免因自由選擇而導致的沮喪和信息過量。
3)矩陣結構
這與順序結構有些相反。順序結構通過一系列指定步驟帶領用戶,而矩陣結構則讓用戶自行選擇他們喜歡的導航方式,允許用戶以鏈接和按鈕的形式訪問所有信息并讓他們決定訪問內容。
可以說矩陣結構通過給用戶所有可能的方向和功能,讓用戶在使用產品時創造自己的使用路徑。
4.2 標簽系統
標簽系統是用單個詞匯傳達大量信息的一種方式。它可以幫助用戶通過概念來查找內容,而不是瀏覽整個產品來尋找想要的信息,這也是為何使用標簽系統的原因。
想想一個普通的商業網站,當你尋找業務聯系方式時,可能想找一套不同的信息:電話號碼、郵箱地址、辦公地址……而所有這些信息,都可以在網站界面的同一個標簽下找到——聯系頁。
4.3 導航系統
從信息架構的角度,導航系統并不意味著設計好的界面,更多則是關于用戶如何在內容和信息中移動。
重要的是要隨時記住,信息架構只是幫助用戶導航信息以達成目標的方法。
某種程度上,導航系統應與內容相反。只要用戶覺得有用愉快,你會想要豐富、復雜的內容;而你的導航系統則應該盡可能簡單明了,同時依然能讓用戶獲得任何想要的信息。這時,一個重要的概念就發揮了作用:元數據。
元數據是信息的信息,它在信息架構中起著重要作用。
可能聽起來過于技術,但元數據是導航系統中的關鍵組成部分。用戶在產品中進行導航,尋找特定的目標,但他們是否知道要尋找什么?是否知道所尋找東西的正確用語?
即使你的用戶知道產品中所有信息的名稱,僅僅以A-Z列表形式提供所有信息,并不能提供出色的用戶體驗,因此我們并不建議這樣做。出色的用戶體驗,需要對內容進行匯總和分類,這樣才能讓導航系統成為帶領用戶前往任何位置的道路。
導航系統可以以列表和菜單的形式呈現出內容的類別,但要警惕:不要將成千上萬的類別拋給用戶,這樣會導致信息超載。我們建議你創建不同的分類,然后按絕對重要性進行排序,放棄不重要的分類,因為它們只會使用戶暈頭轉向。
你可以通過閱讀Smashing Magazine上Karafilis發表的內容找到更多關于創建好導航系統的信息。
圖 2 亞馬遜網站
4.4 搜索系統
如你所期望,當產品中包含大量數據時,搜索系統會派上用場。如同你的標簽系統,搜索系統有幾個不同的方面需要考慮,你可能不會立即想到。
以一個普通的電商零售網站舉例。
當你創建網站時,第一反應可能是創建一個可以查找所有信息的搜索欄,但你必須抵制這種沖動。邏輯使然,每當用戶使用搜索框時,他們只會查找一種類型的數據:商品。它們不是在開放時間或數據隱私政策之后,它們在搜索欄中的索引是隨機的。在這種情況下,產品是被當成搜索區對待,確保搜索欄僅向用戶顯示某種類型的內容即可。
而你需要在搜索系統中考慮的另一個問題是,點擊搜索后信息要如何呈現?
5、信息架構的八原則
這八條基本原則可以作為任何想為產品賦予意義的UX設計師的行動指南。 最初由EightShape的創始人丹·布朗構想,這些原則將信息架構看成結構設計的實踐,以下是關于如何實踐的指南。
5.1 物體原則
這項原則關于你如何看待自己的內容。布朗說,不要把內容視為僵硬、無生命的東西。它像物體一樣,要嘗試將它當成擁有自己的生命周期、行為和特征的生命體對待。
這條原則之所以與信息架構相關,在于它可以讓你根據需要靈活處理內容。如果你將內容視為自身存在的個體,便可以更輕松地看到內容與其他信息之間的可能關系、發現向用戶呈現此內容的不同方式。
這個原則的特點之一在于它將內容的生命周期嵌入到結構中,考慮到內容從逐漸增長到穩定的不同時代——這在內容適時變化而更受歡迎后發生的格外頻繁。
布朗給我們提供了一個食譜網站的例子,食譜之間可以作為互補而互相關聯,或者在某些時節關聯性更強(比如感恩節時與火雞有關的食譜)。
5.2 選擇原則
布朗提到施瓦茨的心理學史詩級作品《選擇的悖論》 ,告訴我們人類有一種錯覺,即他們想要盡可能多的選擇。而大多數用戶體驗設計師都知道這并非真相,這也是施瓦茨和布朗所認同的。給用戶過多選擇的真相是:人們的可能選項越多,就需要付出越多的認知努力來做出選擇。這甚至能引發焦慮。
圖 3,Habitout漂亮的極簡主義首頁
布朗用企業內部網站舉例,大公司習慣于展示大量信息,卻通常忽略了內容的分類和信息架構。結果則是用戶浪費了大量時間來尋找他們實際想要的那一小部分數據,或干脆放棄使用網站。
聽起來不像你想要的產品是嗎?這正是信息架構所要避免的。
建議你縮短列表,尤其是在較高層級。這也是你在為內容設計矩陣結構時,需要牢記的一點:用戶在停止輕松并開始積極努力的使用產品之前,只能在一定數量的選項中做出選擇。
5.3 漸進式信息披露原則
該原則講述人們只能以某種方式處理新信息的事實,意思是人們不能很好地處理預期之外以及不想要的信息——這個概念被稱為漸進式披露。
這意味著在信息架構中,你需要組織數據,以便人們不僅能夠以正常速率吸收信息,而且還可以在呈現之前預測更多信息。在用戶體驗設計中,這意味著,你放在任何類型的列表或表格中連接詳細內容的入口信息,都需要好好考慮讓它們簡潔。
讓我們回到布朗的食譜網站案例。你不能指望在用戶瀏覽的所有頁面上顯示完整食譜,但是要如何在列出食譜時決定顯示什么呢?菜肴的類型是一個很好的指標,但它不能讓用戶清楚地了解在食譜中可以看到什么。你的設計應該選擇足夠的信息來幫助用戶決定是否要點擊某個食譜。
5.4 范例原則
這個原則是關于人類如何對事物進行分類的心理學。最終,我們能夠通過創建一個范例列表來對概念進行分類,這些范例可以幫助我們將不同概念組合在一起,無論此分類背后的標準是什么。
在將此應用到你的信息架構時,請考慮在應用程序或網站上顯示分類的方式。每個分類都需要一個包含該分類內容的范例,你可以使用最大、最常用的子分類。這樣,子類別可以作為大多數用戶的快捷方式,并且可以幫助用戶理解每個頂級分類。
5.5 前門原則
布朗說,設計師認為用戶會通過首頁之外的頁面訪問網站是一種明智的看法。認為網站有多個可訪問的入口,可能會對PC網頁設計產生不小的影響,而對移動app設計的影響則較小。布朗對此提出信息架構的兩個主要建議:
一、永遠告訴用戶他們在哪里。
你的網站擁有很多頁面,訪問者可以訪問其中的任何頁面。因此,在用戶可以看到的地方顯示站點地圖非常重要。因此,如果你剛從Google鏈接打開一個博客網頁,應該能看到博客文章的類別和其他類似內容。讓新用戶在大框架中理解邏輯非常重要,而不是像在廣袤湖泊中填充少量內容,以隨機的方式呈現。
二、首頁不應該包括網站的所有內容。
過長的首頁與好的首頁區別很簡單:好的首頁應該讓用戶清楚地了解你的目的、以及整個網站上可以找到的東西,而不應該嘗試向用戶顯示所有可能、詳細的信息。在信息架構方面,首頁不應該成為通往網站所有角落的快捷方式,而應該展示網站內容的概況。
5.6 多重分類原則
即使在一小群相似人群中,你仍然會發現人們有不同的信息尋找方式。有些人會輸入正在尋找的主題泛稱(例如沙灘裝),其他人則會自然地輸入他們想要的具體類型(例如比基尼)。
這對設計和信息架構很重要,你需要在搜索系統中考慮到這一點。但也需要小心對待,因為它總是伴隨如下事實的出現:呈現給用戶尋找信息的方式越多,他們越可能變得分心或不堪重負。
5.7 聚焦導航原則
布朗聲明,導航不應該只是簡單的包含網站中的所有內容。許多設計團隊在網站上隨意添加導航菜單,使得菜單本身看起來缺乏邏輯。然而信息架構本就是用戶體驗中邏輯的體現。
相反,布朗建議你為菜單制定策略,在可能的情況下為不同類型的信息提供不同菜單。例如,一個用于博客主題的菜單和一個市場營銷的菜單(列出公司提供的服務)。
這能改善網站的可用性,即便刪除了直接進入聯系頁的按鈕。請記住,信息架構是按照正確類別給事物分類,讓用戶確切知道他們在哪以及在何處找到所需信息,而不是將每條信息連接到主頁。
5.8 增長原則
對于這項規則,任何需要處理內容的人都應該牢記:產品中的內容量可能會隨時間的推移而增長。這是相當合乎邏輯的,在互聯網上放置內容變得越來越便宜??偟膩碚f,電子內容每年呈指數級增長,你的內容應該遵循相同的節奏。
但是,在設計中反應出內容增長并不容易。之所以如此困難,是因為即使你知道會有更多的內容,也不可能知道會有多少內容。如何為尚不存在的內容設計信息架構是件困難的事。同樣,產品也可以在不同方向上增長。是要增加新類別還是現有類別的新內容也會難以判斷。
遺憾的是,布朗發現當內容增長時,并沒有簡單的建議或明確的方法來避免麻煩。我們所能做的最好方式就是設計能夠接受新形式內容的頁面,為將來可能的內容擴展做好準備。換句話說,即使你現在不使用視頻內容,也要創建接受視頻的頁面。信息架構的結構應該具備的另一個技巧是,如果你需要在將來添加新的子類別,則應使頂級類別盡可能寬泛。
6、結論
如果你希望用戶足夠了解你的產品并能愉悅使用,那么信息架構至關重要。你所希望創建的結構,不僅要讓用戶理解、更要能進行預測,這樣他們才不會兜著圈子尋找信息,輕松地便能掌握產品的使用方法。
請記住,好的信息架構和好的用戶體驗設計是相輔相成的:即向讀者提供博客文章,或幫助新玩家在游戲世界中快速適應。請注意細節,不要用超出用戶處理能力的信息轟炸他們。
使用你的產品應該感覺自然,而不是像跑馬拉松一樣疲憊或像在房間里四處搜尋兩天沒見的手機充電器一樣迷茫。利用一切機會在用戶測試中檢驗你的信息架構,確保人們不會對信息呈現的方式感到困惑沮喪。
當擁有大量信息時,很難以好的方式呈現所有信息,但我們總能找到呈現與理解信息的方法,你應該用正確的計劃將這項工作反映到設計工作中,所以不要慌!
只需放輕松并回歸一切的根源:每個時間點用戶的目標是什么?如何以最簡單的方式幫助用戶實現目標?這才是信息架構中最重要的問題。
作者:Z9084488
來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
最近又翻了翻《無界面交互》這本書,不過與上次閱讀卻有了些不一樣的反思與收獲,這本書很多人應該都看過,起初看是因為以為里面有何新穎前瞻的交互方式與教程指南,不過之后卻發現是緊扣副標題“潛移默化的UX設計方略”,盡管對標題和內容的匹配產生了失望,但還是被作者幽默風趣的寫作風格與獨到的思考方式所吸引了。
這本書并沒有講述很多的交互觀點,也沒有展開說如何進行零界面的交互實踐技巧,反倒是通過幽默風趣的表達闡述早期硅谷以應用軟件為中心的需求解決現象,并且使得各種需求總是以軟件->以手機->以屏幕->以界面來進行交互,而這些軟件的快速發展也加劇了人們與手機屏幕的依賴性,以至于我們的身體也出現了一系列不良變化,盡管我們正在適應和習慣這些不良性,例如近視人口的比例與年齡層下降,而好的UX設計不該是基于界面的,所以UX≠UI,應該是基于更加自然智能自動的服務或交互方式,作者認為最好的界面就是沒有界面,我們面對未來的創新技術發展,應該試圖擺脫對屏幕的依賴性,并且為此作者列舉了多個例子來佐證,后文我會簡單的介紹一些書中的例子,所以你不用因為好奇而馬上跳離這個文章去搜索了。并且為此現象作者提出了三個原則;
一、貼合日常生活流暢,而不是一味依靠屏幕;大意是貼合日常生活中的一般工作流程,避免與手機與屏幕有過多非必要的綁定,使得避免沉迷用戶界面或者說手機。
二、做電腦的主人,而非仆人:科技的飛速發展還是不能很好的讓電腦智能化,時不時還是會出錯,例如藍屏閃退等,各種條條框框的限制等,如密碼限制。我們健忘、脆弱、繁忙,計算機應該更加智能的解決問題。
三、適應個體情況:大意是每個用戶都是特別的,可以提供定制化的服務,不在只關心平均數據或盈利趨勢,而且未來的計算應該更加主動,而不是被動的等待用戶來圖形界面操作。
大體上內容差不多就這些了吧,作者想以潛移默化的方式來引導UX思維方式,前面部分鋪墊了不少生活現象,以讓我們意識到感受到手機屏幕的負面影響,以及這種基于應用軟件來解決需求的慣性思維的局限,當然啦,一方面有文化差異,另一方面設計行業發展日新月異,現在的優秀設計師也不會完全聚焦在用戶界面上了吧,就像書中的結束語,也許未來的某天再次翻開時,已經覺得這本書無聊透頂,觀點已經過時,就像我們現在已經深知UX不是UI,也因此難免會被部分讀者所吐槽。
那么回到此時此刻,雖然不知道你是否有了新的思考或收獲,我來聊聊我的一些思考吧。
我們通過感知與身邊的事物發生著互動,而看見的信息往往是最豐富的最具體的,這也意味著屏幕或界面的概念會長存,即使全息影像技術隨處可見,所以我們要意識到零界面交互是一種交互方式,一種交互理念,而不是說以后沒有界面交互了,而且對于交互方式,基于語言系統的語音交互、腦電波控制交互、物理實體的人機交互等等,不就是沒有界面的交互嗎?對于零界面交互我認為有點兒奧卡姆剃刀原理的意思,能在其基礎上找到更好的辦法就不要復雜化,如無必要,勿增實體,并且合乎情理。智能的交互方式絕對不是多幾塊可交互的屏幕而已。
零界面交互后,作為一名UX設計者,如果不在互聯網行業里了,不搞應用軟件了,也無需在用戶界面上花心思了,那你還能做些什么?是否就要考慮轉行送外賣擺小攤呢?
當我想到這個問題的時候確實遲疑了,想到自己擅長或能夠勝任的,且符合以上要求的話,可能就需要轉型做技術咨詢服務、視覺設計或是產品經理之類的,但之后我想了想又感覺不大對,為什么不能是UX設計師呢?我也與其他好友相續的探討了下,UX設計最本質的競爭力不該是線框圖、界面交互或是視覺呈現,盡管在應用軟件中,是重要的環節,但!最本質的能力不應該是解決問題的能力與方法嗎?
在得出這一結論前,我們會慣性的結合平時的工作內容與輸出結果來匹配其他職能,結果反而忘了UX最本質的能力是什么,探討時UXRen的寶珠用一個詞描述道“模糊邊界”,我瞬間清醒,可不就是嗎?
如此看來,我們應該慶幸UX工作使得我們獲取了寶貴的問題解決能力與方法,正是因為有了這些東西,即使不做互聯網了,也還是能成為UX設計師,就像書中所提倡的那樣,不基于屏幕的思考,反而使得UX設計更加強大了。
早期福特汽車公司的Escape設計組想要創造出在自己獨具特色的SUV,他們觀察到現實中的人們拎著或抱著重的東西走向后備箱時,并騰不出手來,只有腳可以動,并且可能因為東西太重并不想彎腰放下后,打開后備箱再彎腰抱起重的東西放進后備箱,即使通過應用軟件,也要掏出手機,點一點再放回去,重新彎腰搬起重物,顯然應用軟件并不好使了。因此腳踢或橫掃式的后備箱開啟方式誕生了,他們在后備箱下的保險杠底部安裝了一組傳感器,只需要你踢一腳或拿腳掃一下,后備箱就開了,對于那些提著重物走向后備箱的人,很容易做到,也很符合后備箱的使用場景。
夏天里,停在室外水泥地上的汽車經過一段時間后,太陽的炙烤會讓車的內飾變得滾燙。NBC報道稱:“在美國,平均每年有超過36名兒童因車內溫度過高而死亡?!?
而在這個背景下,日產聆風轎車推廣了一款能讓你車內溫度變涼的手機軟件,只需提前15分鐘在手機應用上遠程打開空調就可以,當你回到車內時就是涼爽的,但回到復雜的現實環境,當你投入的看電影、投入的聚餐時,你不一定還記得用手機遠程打開空調這回事兒,回到車里時也許還是熱氣烘烘的。讓我們回到一個互聯網跟屏幕還不夠普及的年代,1991年,面對同樣的問題,當時線上技術還很稚嫩,馬自達汽車公司提供了一個更加自動化的可選功能,車頂配備太陽能供電,車內使用溫度傳感器監測,一旦溫度超過一定閾值,傳感器就會觸發散熱降溫,很巧妙,很自然,盡管還不能克服極端的高溫,時間快進到2009年,豐田汽車借鑒了馬自達汽車這一經驗,制造出了更好的制冷系統,這一功能很受歡,時至今日這個系統仍然可用。
橄欖球運動在美國很受歡迎,但也很危險,至少我看來是硬核運動,這種運動時常發生的撞擊會導致運動員患上慢性創傷性腦部病變,會引起記憶力減退、思維混亂、判斷力減弱、沖擊控制障礙、攻擊性、抑郁癥等癥狀。事實上在年輕的群體中,大學的橄欖球隊員都渴望自己留下好印象,因此他們幾乎不會上報自己的頭部損傷,在一組730名大學生球員中展開的調查顯示,他們的頭部平均受到27次沖擊后才會上報1次,為此疾病預防控制中心(CDC)研發了一款手機應用,在這個應用上,橄欖球運動員可以了解和挑選頭盔更好的保護頭部,以及如何察覺頭部損傷的跡象,并在遭到腦震蕩或其他頭部損傷時,知道接下來該怎么做。
但是圍繞橄欖球比賽這個場景,柔性傳感器制造商與運動品牌Reebok(銳步)設計了一款智能帽子,Reebok Checklight,它是一款運動影響指示器,通過傳感器持續的感應頭部受到的任何沖擊,并通過LED燈光進行信號反饋沖擊的程度,就像信號燈那樣,并且它能夠很舒適的佩戴在頭盔中,沒有界面、沒有菜單、沒有選項卡導航或賬號密碼登陸,盡管他不能代替醫療診斷,但是可以作為額外的參考指標來幫助教練或他人做出判斷與選擇,無論是繼續比賽還是立即就,以保障運動員的健康情況。
事實上這些案例中,確實很精妙的利用技術解決的生活中的需求場景,并且沒有使用以屏幕為交互的方式,也同時為用戶提供了良好的體驗不是嗎?案例中描述了設計師是通過怎樣的方案來解決了需求痛點,但,你有注意到是通過何種方式洞察到了這些設計理念嗎?也許細心的你已經從前面的案例描述讀出來答案,觀察,這是一種解決問題的好辦法,通過對場景對事物對用戶行為的細心觀察來找到問題的突破口,而這也是讓我對潛移默化的UX設計方略有了新的思考的部分。
觀察是設計思維的重要的一環,我們悉知的以人為本的設計流程便是以觀察開始的,而觀察與場景有著不可分離的淵源,我們觀察用戶、觀察環境、觀察事件等,這都是場景的一部分,我意識到場景化在任何時代任何設計過程中都有必要的價值,對于這一廣泛且常常忽視的思維模式,我想以自己的視角來通俗的聊一聊。
面對各種問題,有時候痛點顯而易見,有時候根據經驗也能夠快速看出端倪,有時候就靜靜的細心觀察就好啦,優秀的設計師擁有豐富的問題解決策略,以及各種工具輔助,能夠盡快的分析找出問題來并設計出解決方案來推敲,但這不意味著每次面對需求都將進行用戶分析、市場分析、數據分析、用戶研究、構建畫像、構建體驗地圖、套用設計原則、構建原型、可用性測試等等,這些只是解決問題的方法與工具,幫助我們更好的分析人物&場景&事件的關系,以找到問題根源或解決辦法。
平時的工作中,我們更多的是根據習慣與經驗完成工作,并且面對各種問題的差異性以及時限要求,斷然不會根據一套固定的設計策略或方法來輸出,這不見得更合理更專業更高效,問問你自己,每次學了新的設計方法論或工具后你都會在后續的工作中用起來的嗎?直到有一天這些方法論、設計模型、分析報告占據了你絕大部分的工作時間嗎?我想不是每個項目都會給予設計者如此充裕的時間吧,同事會說,看啊,這個設計真笨,還在輸出作證那點兒設計方案的分析材料,真磨唧。而通常老板也不會在意你是用了哪些方法,更在乎的是有沒有解決好問題,有沒有及時的解決,但是一定不會指責你沒有使用用戶畫像、體驗地圖什么的,如果有人遇到過,那就是他的需求中期望看到這個。
實際上當我們熟練掌握某些設計策略或工具的原理后,即使不寫出來,通過觀察與思考也會有結果,這種潛移默化的過程就像是數學公式的應用,當你通過觀察獲取到了夠用的信息后,就能思考出解決的方向,有點兒像韋東奕在接受采訪時說的“其實,我真正寫的題并不多,“想”的題卻很多,能想明白的題目我就不寫了”。所以當有人問起你是如何解決的,你說是通過對場景的觀察思考,絕不會有什么不妥或顯得很Low,但是你說一拍腦袋想的你試試,你看那程序員抽搐的嘴角是想干啥。就此我已經將大量的技法、設計論、工具隱匿起來了,但是場景的概念依舊不可缺失,不難看出為什么說“場景化思考與觀察有著豐富的設計啟示”,也許你還沒有意識到平時的設計工作中,會經常用到這一概念或思維方式,只是沒有人給你提示,你還沒有意識到這就是場景化的洞察或思考啊。
我跟一個設計朋友聊起了場景化這個話題,但是我發現對方似乎并沒有認識到這個場景化是什么概念,并問我這個場景化是什么,我想了想說:“就是一種找到問題前因后果并有效解決的好辦法,并不是游戲場景的概念”。于是又問我是怎樣一回事兒,我反問道你們接到游戲活動需求后會怎么思考?對方說一般由活動詳情與活動入口構成,例如一個夏日祭活動,是用作消費回饋的,會設計階段化的消費任務與回饋獎勵,刺激玩家進行消費獲取超出平常的獎勵,為了圍繞夏日祭這個盛會主題,需要搭建一個包含游戲元素和盛會元素的場景來承載活動內容、說明、進度、領取按鈕與信息,給用戶帶來夏日祭的活動氛圍與內容賣點... 我說等等,這不就是場景化的思考嗎?我們綜合場景構成的多個因素,并觀察思考圍繞玩家展開的一系列關系變化與過程感受。
這里的場景不是我們常以為的情景/情境或是某個事件的使用環境,近似場面的意思,場面是指戲劇、影視中由布景、音樂和登場人物組合成的景觀,而場景就是某個人在某個時間某個地點因為某個目標在做某個些事,即人物、地點、時間、目標、行為,只是某個環境或情景的畫面都不能稱為場景,場景能夠較好的反映出特定環境下人物實現目標的過程變化,因此不必糾結“場景”或是“場景化”一詞,轉而注意人物在對應環境下為目標做出了那些付出與反應,剩下的就是觀察與思考如何幫助人物更舒服效率的完成目標即可;
場景化就是將信息不齊全的情景根據關鍵信息推導或收集完善成一個場景,其目的是因為我們需要特定環境觀察或構思服務對象為了達成目標做出了哪些努力,然后我們為此洞察出能夠幫助服務對象解決麻煩的方案,但有意思的是在場景化的過程中,有時候不一定非要苛刻的補齊場景的五個因素,就像前面講的,通過觀察人物行為也能夠產生人物目標的收獲,記住場景化的重點是觀察或構思人物為了達成目標在特定環境下做出了哪些努力,基于不同的情況,有些次要因素我們可能不會太在意,例如我們在討論手機電筒的使用場景時,我們就不會太在意時間因素,反而昏暗的環境與亮度更重要,所以場景化時要靈活一點,挖掘有價值的因素而不是湊齊所有因素,常見有以下幾種情況:
場景化還有個作用就是讓自己更融入,算是同理心的一個竅門。我們在具有復雜性的功能自測時,我們不會只是反復的在界面上進行交互,這樣的往返操作容易迷失自己,甚至忘卻了我在哪兒,我在干嘛,這種情況用設計心理學描述為“記憶失效性失誤”,對此,我們的解決辦法就是設定場景,我們會簡單的代入一個用戶視角,并給自己設定一個匹配功能模塊的需求目標,使得整個場景看起來合乎情理,然后帶有目標的進行功能測試走查,如果這個過程中那里走不通了,不好用了,那就意味著這里的設計有問題,當然了,如果你是功能Bug測試,那我建議你找測試工程師要一份測試用例好了。
場景具有諸多變量,通過觀察狀態的變化,用戶情緒與行為變化、以及實際場景中常見的干擾事件,都能為我們帶來諸多的設計啟示,我們可以利用起來,為用戶提供更多的需求可能或是避免問題,就像車飾中的杯架,一開始汽車制造商們并不會覺得一個交通工具的駕駛室需要杯架,但是通過對真實場景下的觀察與客戶研究,不起眼的杯架竟然能為用戶帶來良好體驗,以至于杯架會成為汽車內飾的廣泛標配,這些巧妙的設計并不是設計師突然的靈感或渾然天成,這正是因為對場景的觀察以洞察出的用戶需求。
場景化可以讓我們找到問題在哪兒發生了,并且問題根源大概是什么,會有怎樣解決啟示,而不是因為數據或結果發現了問題,在有限的認知下就問題進行錯誤或膚淺的設計解決方案,還記得肥皂廠對空盒子過濾的案例嗎?A廠的設計師們發現了會有空的肥皂盒在流水線上,并且設計了高級的X光檢測儀來改進生產線,但是B廠的設計師卻根據觀察找到了更好的解決方法“電風扇”,是的,B廠直接通過電風扇將質量更輕盈的空盒子吹到了一旁,那么你是老板,出于成本與研發周期,你選擇哪個方案呢?
即使是線上場景也不例外,知道微信在直播場景時,收到的通訊消息已經采用了浮窗進行交互嘛?你也不想在看到精彩的時候卻要關閉直播切換窗口去回復消息吧,這便是基于場景化的思考,微信為你提供了更多的直播觀賞空間,而不會因為臨時的消息回復使你不得不切換場景進行其他的的輕量化事件。
這便是場景化的魅力,我們可以找到真實問題的根源,并且能夠充分的理解人物與環境與事件的關系,有很多設計師能夠很巧妙的解決問題,并不是因為直覺或天賦,實際上更多的是結合了場景化的思維與洞察,而這并不困難,你也可以。
在某個場景中,使用你產品的是誰?他們有什么特征,場景為他們帶來怎樣的感受,他們會面臨怎樣的問題或需求?這都是場景化中以用戶為中心的表現,我們很清楚產品的使用者是誰,購買者是誰,我們采用場景化去打磨產品并不是讓產品在場景下顯得更加美觀,而是讓用戶擁有更好的體驗,其次才是美觀,而作為設計師就不能以自己獨到的設計理念來完全代替用戶了。
事實上幾乎沒有一款產品是面向全人類的,出于人文差異、社會特征、個體特征、使用門檻等,做不到如此強大的兼容能力,過分兼容往往也會使得產品有缺陷或不倫不類,考慮的產品的功能作用以及商業價值,企業都會錨定一些具有某些特征或對應需求的用戶群體,這樣才更有機會成功,而不是迎合所有人,并且有時候還要進一步的區分用戶與特征,例如使用者可能是一只貓一只狗,但是購買者往往是養寵物的人,這個時候還要顧及購買者的偏好,而不只是局限的觀察場景下的使用者如何與產品交互,場景下購買者的動機與目的也是重要的,而那些線上應用就更不用說了,同一批人可能有不同的使用場景,同一場景下的用戶可能會有不同的特征,識別他們的共性與差異性是以用戶為中心的重要工作,為此我們可能還需要對場景下的用戶進行分層,甚至允許定制化。
除了以上說的用戶群體與特征,人文差異也是場景化下值得關注的問題,需求往往是來源部分用戶群體,迎合他們的人文特征可以更好的促進用戶使用和購買的欲望,在產品出海設計的過程中,人文差異往往是極其重要的,因為使用場景從國內變成了國外,如果不密切關注場景下的人文變化,出海則基本會以失敗告終,例如我們傳統的駕駛位在左邊,而部分國外的是在右邊;我們很多人愛吃的烤豬蹄,在印度卻不受歡迎;我們大多人閱讀是從左到右,而部分國外卻是從右到左。一旦場景發生了變化,我們就應該密切關注人文是否要做更新的思考。
此前已經解釋了,場景不是單一的情景,并且存在各種變數,甚至都不是靜態的,我們使用場景化思考時,一定不會局限在產品本身的流程或交互上的,也不是某個或多個人物上的,所以在場景下觀察時,注意力不該在單一的對象上,而應該覆蓋場景化的多個重要因素上。并且場景會給出用途和一些對應關系的特性,像我們提到某個需求時,研發的同學會問是那個場景,其實就是想要了解這個場景在哪里觸發,場景下的用途是什么,用戶與目標是什么,關聯了那些技術棧等等。如果我們在觀察某個場景時,出現了意外或小插曲,作為設計師就應該警覺起來,而不是認為只是意外,不會再發生,畢竟古人云“無獨有偶”。所以當你奉行場景化觀察或是思考時,就不會過于局限,反而會具有綜合性的思考過程,這能讓結果更加可靠和易于理解。
幾乎出現的所有問題都是有根源,有場景的,我們拿到需求卻還是要分析需求,其目的就是找到根源,而不至于在虛假的問題或需求上窘迫的發力,而最終得到一個跛腳的結果,問題的根源常常是無比真實和深刻的,而我們結合場景化思考時,就應當貼近現實,而不要簡易的虛構一個不真實的場景去匹配和思考問題,這個過程中要盡可能的追尋真實的環境,匹配的角色,更實際的問題,這個時候我們眼里的場景才有效,而不是做戲或是走個形式,并且最終你的解決方案是要搬進現實的啊,并不是以實驗室的結果來定義真實的場景發生的事物,即使是模擬也是在模擬更加真實的場景不是嗎?
倒上一杯水,抓來一碟零食,關上了窗簾,窩在椅子上,一切剛剛好,我沉浸在女鬼橋這部鬼片的精彩橋段里,我屏住呼吸,高度緊張的注視著,心里預測著下一個鏡頭將要如何如何,哐當一聲,嚇得我直起身來,其實女鬼還沒有出現,但是我的貓先出現碰倒了我身后的物件。
場景化不再是理想派了,意想不到事件正在場景中發生呢!
對于場景化,幾乎沒有可能與我們預期的一致,場景下會有各種變量也應該有各種變量,把場景定格后應用是不對的,它應該像一個故事一樣,有過程有發展變化,事件的發生、人物的行為、情緒的變化、環境的變化都是場景變量的一部分,越是忽略這些變量,越是會出現更多問題,因為這些變量會直接影響用戶的行為決策與結果。交互設計師做特殊場景狀態(常見有設備兼容、異常操作、網絡問題,非常規操作等)的兼容與防錯,不就是很好的體現嗎!拆分出更多的意外場景迎合做出兼容方案反而會多出一些細微的體驗差異,例如華為手機的消息通知會有自動收起內容的情況,其啟示來自于真實的環境下,背后會有其他人窺探到你的個人信息。
于此同時我們也應該清楚自身產品的局限性,我們做不到能應對各種突發事件的程度,所以設計出適當的約束來避免問題也是蠻重要的,大抵我下次在家看鬼片會先把貓關起來吧。
場景化、情感化似乎在現在的設計中經常被提及,如果把場景化比作一面灰色的墻,那么在墻上繪制多彩的小花,人物也露出愉悅的情緒,這些便是情感化的色彩,情感化傳遞的是一種情感價值和溫度,在產品使用的場景中,我們可以結合特定的時刻來打造情感化設計,可以是通過氛圍傳遞情緒,例如新年,產品視覺煥然一新,年味十足。又或是觸發回憶,幫助用戶想起那些有價值有溫度的回憶畫面,總之在適當的場景引起用戶共鳴是一件很有溫度的體驗設計,哪怕只是在南京大屠殺的公祭日將線上產品的彩色斑斕抹去,也能感受的產品的情感關懷與社會價值觀,總之識別出有意義的時刻,不論是節日盛典、解鎖成就還是目標達成,我們都可以通過具有儀式感或視覺氛圍的設計方式傳遞情感,讓用戶感受到產品設計的用心與別致的體驗,這也是場景化中的環境與時間因素的識別與運用。
但值得注意的是,情感化不單單是符合特殊時刻或環境的打造,只是說就讓用戶覺得好看或就該這樣有時還不夠,情感化更多的是期望與用戶情緒建立共鳴,引起用戶反思,試想一部電影,為什么有的人看哭了,有的人沒有反應呢?很大一部分原因就是看哭的人更投入,劇情經過了用戶的反思與共鳴,從而調動了情緒才鼻酸落淚。
常規性是一個很重要的部分,它包攬了以上多個部分,常規的情景、常規的流程、常規的客戶、常規的問題、常規的信息、常規的操作、常規的行為習慣、常規的難度、常規的文化差異、常規的認知等,常規意味著產品符合大多數客戶群體的認知、習慣與使用情景,這能夠大大提升易用性和兼容性,當設計無法接近用戶認知就會變得難以理解和使用,隨之門檻變高,而設計者不一定是產品的常規使用者,而常規性不僅能夠使得場景化更加貼近現實,也抑制著以設計師為中心的弊端,最終保障設計模型與用戶認知模型能夠靠攏。
但過分的常規性也會成為創新的絆腳石,不論是漸進式創新還是顛覆式創新,依舊會保留一定的常規性,例如常規的地域文化、常規的理解認知、常規的信息維度等,但也肯定有不常規的地方,那便是它獨特創新的部分,這意味著我們需要找對創新的場景,創新的部分,以及創新內容的本質與規則,要知道打破規則是一種創新是一種變革,但是前提是你得清楚規則的本質是什么,胡亂一通的創新往往達不到更好的效果,容易忽視其他變量與常規性。
這讓我想起來《設計心理學3》中,唐納德提及的指環王中創新的語種里的兩個詞語,一個是金屬另一個是雪花,盡管這個語種里的兩個單詞看起來是如此的陌生,但是大多數外國人還是能夠猜對那個是金屬那個是雪花,因為金屬的單詞中包含了兩個爆破音,更具有重金屬的味道,而雪花的單詞則具備斯斯的發音,顯得更加輕盈,這源于人們對現實生活場景的理解與認知作用,這也是常規性。
通過《無界面交互》,看見了應用軟件的發展簡史,看見了軟件對生活服務的影響力。還真就是那句話,“當我們習慣使用軟件后就需要更多更多的應用軟件”,隨之利弊也變得更加清晰可見,人們生活方式與行為習慣也對應發生著轉變,變得是數字化的服務方式,不變的還是各個場景下的需求與優化創新,就像我上一篇關于用戶行為與觸發式引導的文章中描述的那樣,應用程序提供的是完成需求的功能,這意味著行為方式或成本的變化,但是本質不變。
雖然書中作者批判了屏幕的種種罪惡,但是現階段發展離不開電子屏幕的存在,或許這就是發展進步中不可避免的一些矛盾與犧牲吧,誰知道作者現在有沒有躺著椅子上用手機刷TikTok呢?不過作者唾棄的以應用軟件來應對各種需求服務的方式,倒是認可的,應用程序解決需求不是一勞永逸的辦法,創意創新也不止于界面,最終還是要回歸場景與需求的探索,樸實無華的點子依舊受歡迎。
而聚焦生活服務類的場景與需求,我認為物聯網與人工智能反而是以后更好的解決方案,我在之前的一篇關于物聯網交互創新探索的文章中也有歸納過物聯網的特征趨勢(注: 有興趣可以在往期文章中找到,有圖解不枯燥,值得一看),即自動化、智能化、云計算、傻瓜式、聯動性、可視化,我認為這些特征都能很好的滿足無界面交互中潛移默化的UX設計理念,而作為這些生活服務類的UX設計師,了解和熟悉物聯網技術也顯得尤為重要。
作者:PP_PAO
來源:站酷
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
交互系統設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析,關注以人為本的用戶需求。
交互設計有許多的方法和理論,如格式塔心理學原理、尼爾森可用性原則、7±2法則、3次點擊法則、功能可見性原則、菲茨定律等。
系統應當在適當的時間內快速讓用戶知道當前所處的狀態,即無論單擊、雙擊還是滾動都會給用戶一個反饋,讓用戶對過去發生、當前目標、以及對未來去向有所了解,防止用戶出現錯誤操作。
常見的反饋有刷新提示、加載提示、支付提示、下載提示、進度提示等(具體見#產品中的反饋機制#文章)
示例:進度條、已讀文章標題變灰
軟件的使用更符合現實的場景,通過直觀的視覺來貼近真實的世界,比如使用易懂和約定俗成的表達。
示例:圖標ICON等圖形化手法代替純語言文字(音樂播放轉盤)
產品需要支持用戶“反悔”,即在用戶出現誤操作時,需要給用戶提供“緊急出口”,做出“撤銷”“返回”“取消”“重做”等功能。
示例:微信聊天的撤回及重新編輯功能;備忘錄的恢復刪除功能
產品的信息架構、交互方式、視覺表現等應該具有一致性,主要包括結構一致性、色彩一致性、文字一致性、操作一致性、反饋一致性
給用戶錯誤的提示不如在用戶發生錯誤之前避免它,可以幫助用戶排除一些容易出錯的情況,或者進行二次確認。
示例:微信朋友圈編輯內容后點選返回會出現是否保留此次編輯的彈窗以及在付款頁面等重要操作之前給出彈窗是否確認支付,銀行卡號輸入時自動以4位數字為一組便于用戶輸入防錯
將用戶的記憶負擔最小化,盡量減少用戶記憶信息,應該提供信息讓用戶辨認。
示例:淘寶的搜索功能,使用關鍵詞聯想要搜索的內容,避免有些商品名稱記不全可以輕松搜索到;引導頁的新功能提示
既能保證第一次使用者能清晰明白功能,又能給老用戶提供更高效的使用方式,允許用戶可以定制常用功能。
示例:支付寶首頁可以自定義放置常用功能;餓了么訂單頁面支持用戶再次購買上次的菜單,不需要重復選擇
去除冗余和不相關元素,適當留白,讓功能突出,不會分散用戶注意力,簡潔精致的圖形能留下深刻的印象。
示例:知乎、簡書等內容為主的產品,減少元素使用,讓用戶聚焦內容,提升用戶體驗
盡量幫助用戶從錯誤中恢復,讓損失降到最低。指出錯誤信息,并給解決建議。
示例:word的自動保存功能;登錄頁密碼輸入錯誤,給出錯誤提示并修改建議
當用戶需要幫助時給予用戶適當的幫助入口,幫助文檔要易于查找, 專注于用戶任務。
示例:微信 、淘寶等頁面的幫助與反饋
藍藍設計的小編 http://www.syprn.cn