守望者

藝術對視覺做加法,設計在做減法。

選擇視覺元素好比在做選擇題,層級越深選題就越多,用戶的學習成本就越高,所以引導用戶快速做出選擇就變得尤為重要。

比如產品在更新完新功能,會設計新功能引導教程,大大降低用戶的學習成本;電商產品促銷時,會設計大量推廣海報引導消費者來購買;公路上接近景區的地方,會設計各種指示牌,引導旅客到達目的地。下圖為原研哉為梅田醫院做的導視設計。

引導設計的目的是為了引發用戶的觸發行為,降低用戶的使用成本,促成關鍵指標的轉化,產生雙贏。那么為什么引導設計有這么大魅力,能勾引到用戶上鉤呢?想尋找答案的同時,還真就找到了一個博士研究過這個命題,還發表過一篇著名的論述。如下:

 

行為設計的本質

斯坦福大學的BJ Fogg博士,創建了誘導性技術實驗室,帶領的幾個行為設計學博士生都創業成了百萬富翁。他在2009發表過一篇論述《行為設計學》的模型,叫做Fogg’s Behavior Model。簡單用公式表達為B=MAT,認為一個人的行為產生需要3個要素。

1. 動機(Motivation)

在心理學上一般被認為涉及行為的發端、方向、強度和持續性??梢约毞譃?種類型如下:
直接動機:通常指與生俱來的需求,也可以理解為生理動機,是同人的生理需要相關聯,比如饑餓、口渴、睡眠、性等。
間接動機:通常指外界對自身的影響而產生的需求,比如聽很多名人演講,身心被感染,也想成為這樣的人,這個動機迫使自身開始奮發圖強。
社會認同/拒絕:通常指人天生具有交往的動機,在交往動機的基礎上,產生社會認同的需求。比如少年叛逆,更多是做給同齡人看的,希望獲得同齡人的崇拜。
?

2、能力/成本(Ability / Simplicity)

時間成本:誰的時間都很寶貴,沒功夫陪你玩。
金錢成本:比如成本都是有預算的,不能超出心里接受范圍。
體力付出:比如折騰身體的運動量太大,用戶肯定不買單。
腦力付出:比如呈現起來太復雜,表達不清晰,學習成本高。
社會壓力:比如獲得社會認同,動力很大,否則就適得其反。
習慣的力量:比如打破了日常習慣,成本是不是很高。
?

3、觸發因素(Trigger)

刺激:比如用戶沒有足夠動機,需要用各種方法刺激用戶產生動機,打折促銷不就是很好的手段嗎?
輔助:比如當用戶有足夠動機,不知道怎么做,新手引導設計是時候登場了。
信號:比如用戶既有動機、又知道該怎么做時,適時出現個彈窗提醒下。
?

引導類型設計

理解了BJ Fogg博士《行為設計學》模型,引用到產品設計中,就是讓用戶快速上手,引導用戶正確操作,適時給予用戶提供幫助,從而降低用戶的學習成本,營造愉快的體驗過程。關鍵是怎么做設計才能達到這樣的效果呢?有我們經常見到小紅點到數字未讀消息的提醒類設計;有新功能操作更新操作教程類的引導設計;有營銷推廣類的引導設計等。這些引導從功能類別到視覺的層級可分為以下3種類型。
?

1. 提示型引導

提示型引導表現為各種提示,引導有需求的用戶,針對用戶群既有動機、又知道該怎么做時,適時出現個彈窗提醒下,產品轉化的目標就達成了。比如各種推送消息、各種提示框、廣告短信、品牌廣告、指示牌等。
設計形式:直接用提示框、推消息給用戶、醒目色塊樣式設計、各種彈框設計等。
適用設計:新功能提醒、重要的通知提醒等
優點:視覺感受非常強烈,很容被用戶感知到,被忽略概率很小。
缺點:每個用戶的對產品的熟悉程度不一樣,干擾到沒有需求的用戶,違背了用戶的意愿,可能會引起用戶的反感,后果很嚴重。
?

2. 新手型引導

新手型引導的關鍵是新手,主要針對新手設計的一種引導,給予用戶操作過程中的幫助。工具和游戲類型的產品引用比較多,這類型產品不引導用戶操作,對新用戶的使用成本很高,所以新手型引導特別適合新手初期熟悉產品的功能。
這種引導通常不會強制用戶一定要操作完,而是會給用戶一個可以關閉或直接跳過的選項,將操作的自主權留給了用戶。比如游戲王者榮耀對新用戶做的引導教程,熟悉流程的用戶可以跳過新手引導的步驟,快速組隊進入競技模式。
設計形式:引導頁設計、操作步驟引導設計、蒙版遮罩引導設計、積分獎勵引導設計等。
適用設計:新手快速熟悉產品體驗操作。
優點:詮釋的比較清晰,用戶的學習成本比較低,容易上手。
缺點:用戶的使用率普遍比較低,打開后直接關閉,但也有很多產品把其作為強制性流程,這樣會引起用戶的反感。還有這種效果通常只能詮釋簡單的功能,深入復雜的功能留給用戶去摸索。
?

3.?視野型引導

視野泛指視線范圍觸及到的場景,隨著視線移動而發生改變,在一定程度上可以記錄用戶的瀏覽軌跡。比如眼動測試、閱讀軌跡通過視野引導來監測,某大廠更是以眼動測試而著稱。視野引導反應在視覺層級的先后順序,某個未讀消息、小紅點、鮮明色塊、動效都可能會吸引到視覺層級的順序,所以視野型也是使用范圍最廣的設計形式。
設計形式:小紅點提醒設計、符號(加減號方向箭頭等)寓意類設計、對比層級設計、Toast提示、指向性設計等。
適用設計:消息提示、新入口、操作引導、深入了解產品的更多功能。
優點:最不傷害用戶體驗的引導方式,對于小白用戶來說也不會被混淆。滿足高級用戶的使用心理,用到更多的高級功能,定制使用到產品,從而滿足自己的高級心理。
缺點:對用戶的干擾比較強,體驗上怎么銜接好各個功能點,才能呈現出連貫性。有一個很經典的案例,某公園不是先去修好路才讓游客走,而是先讓游客走,再沿著踩出來的路線修路。
?
三種引導設計的優缺點一目了然,具體怎么使用還要結合我們產品的目標和用戶的使用場景來考量。比如新產品可能需要新手型引導設計,降低用戶的使用成本;成熟的產品可能更多的使用視野型引導設計,就可以達到事半功倍的效果。
?

寫在最后

引導設計要權衡好一個關鍵問題,就是出現的頻率問題,不是強制性的功能可以采取弱提示,降低對用戶造成的體驗干擾。所以說適時做出正確的引導設計,還是要站在用戶的角度,思考用戶行為設計的三個關鍵要素:動機、能力、觸發因素。其次才是根據產品的類型及其發展階段,選擇適合的引導設計類型,從而高效地完成業務指標的轉化。?
?
?
原文地址:VV體驗(公眾號)
作者:李偉巍

轉載請注明:學UI網 » 引導設計里被忽略的,那些你所不知道的細節

登錄收藏
 
你可能喜歡的:
觸摸鍵盤的設計解析 | 智能化工具產品觸摸鍵盤的設計解析 | 智能化工具產品
十萬個為什么設計系列02-內容個性化十萬個為什么設計系列02-內容個性化
騰訊動漫8.0——用戶為本騰訊動漫8.0——用戶為本
蘋果絕對不會告訴你表單設計原則:我研究3年后才發現蘋果絕對不會告訴你表單設計原則:我研究3年后才發現
從4款主流產品中掌握登錄注冊流程從4款主流產品中掌握登錄注冊流程
【新系列】十萬個為什么設計-為什么行為召喚按鈕的位置在右側【新系列】十萬個為什么設計-為什么行為召喚按鈕的位置在右側
你必須知道的8種金剛區的設計樣式你必須知道的8種金剛區的設計樣式
關于「微信 7.0.9 for iOS 改版」的一點思考關于「微信 7.0.9 for iOS 改版」的一點思考
為什么我們會情不自禁地陷入設計的套路?為什么我們會情不自禁地陷入設計的套路?
10個小時掙10000元?如何用UI組件提高工作效率10個小時掙10000元?如何用UI組件提高工作效率
?
类似钱咖的高额赚钱