讓設計不再是小透明!超全面的用戶引導設計指南

      作者:cyRotel
      分類: 觀點/經驗
      2017-06-15
      4625

      網易UEDC-任軼:用戶引導,在生活中隨處可見。醫院的科室指向標、交通警察的指揮手勢、男廁內為了達到“精準射擊”的小蒼蠅……

      網易UEDC-任軼:用戶引導,在生活中隨處可見。醫院的科室指向標、交通警察的指揮手勢、男廁內為了達到“精準射擊”的小蒼蠅……

      網易UEDC-任軼.jpg

      然而,當我們看到不知是該“推”還是“拉”的門把手、看不出狀態的開關、摸不清頭緒的指示標,便會產生迷惑甚至焦躁。

      門把手.jpg

      引導是通過某種手段或方法,干預目標對象的決策和發展,促使其更快地接近目標。

      工作中,臭臉君經常糾結如何告知用戶功能新增和變更、如何讓用戶按照我們的預期順利使用產品。為什么說糾結,因為既然是引導,都是附加在原有產品功能之上的,往往不是用戶心理預期之內出現的東西。正因如此,我們更需要謹慎思考,選擇最恰當的方式實現我們的既定目標。

      用戶引導的目的

      從用戶的角度來說:降低學習成本,迅速上手使用產品;告知有價值的信息,減少時間和精力開支;提前預知幫助,愉快的學習使用產品。

      例如App Store的精華產品Paper,作為繪圖軟件它的交互建立在很多特殊手勢之上,還定義了一些帶有品牌特色的操作規范。要知道用戶沒有多少時間和耐心去摸索一個完全陌生的產品,因此Paper為用戶使用初期做了大量的引導。

      用戶引導的目的.jpg

      從產品的角度來說:需要通過用戶引導,讓新用戶快速了解使用產品;吸引用戶使用操作新功能或指定對象;提前給予用戶幫助,提升產品體驗的愉悅度。

      用戶引導三要素

      如何做引導設計?首先我們需要想清楚以下三個要素之間的關系

      目的:我們想達到的目標是什么?用戶能從中得到什么好處?我們能從中得到什么好處?

      用戶:目標用戶是誰?新用戶還是老用戶?活躍用戶還是輕度用戶?

      場景:被引導對象的使用場景是怎樣的?需要在什么場景下觸發?

      用戶引導三要素.jpg

      不同的用戶、不同時期、在不同狀態下,希望得到的幫助不盡相同。譬如高級功能在新用戶早期就不應給于引導,收效不大還會提升了學習成本。

      我們不妨多反問自己幾個問題

      1,這個功能真的很必要引導和提醒用戶嗎?

      2,這個功能是需要讓所有用戶都知道還是某一類用戶知道就可以了?

      3,這個提醒是需要所有場景都提示,還是到某一類特定場景才來提示呢?

      ……

      如果以上幾個問題你都能胸有成竹,那就開始吧騷年~

      觸發點的選擇

      用戶引導的觸發點,就是在什么地方觸發引導。是用戶打開程序時觸發?到達特定頁面后觸發?操作了指定功能后觸發?到了某個時間點觸發?

      作為設計師我們一定要懂得取舍和克制,什么都想說就等于什么都沒說。想象一下用戶隔三差五就能碰到引導提示,你的好意成為埋伏在產品中的地雷,而用戶也被你一手培養成“拆彈專家”。

      切勿像下圖這樣,一股腦的將所有東西拋給用戶。

      觸發點的選擇.jpg

      舉一個觸發點相關的小栗子

      小栗子.jpg

      掃一掃功能中,易信和微信都很貼心的引入照明功能。目的是為了滿足光線不好時可以輔助用戶完成掃描功能。

      左邊是易信的界面,“照明”按鈕是默認顯示在取景框下方,位置選在頁面中間倒也很好發現。而右邊微信對場景進行了細分,環境光線理想時不顯示照明提示按鈕,當設備檢查到環境較暗,“輕觸照亮”按鈕便會出現。一對比便高下立見,微信不但保障了正常狀態下頁面的純凈,而且從無到有的閃現比默認常置更能引起用戶注意。

      引導的類型

      信息提示類

      用信息展示的方式,幫助用戶理解產品的功能和所需要執行的操作。最常見的就是“小紅點”“未讀提醒”“更新提醒”這樣的提示。

      引導的類型.jpg

      從左到右依次為:云音樂頁面中的紅點和數字標識、聚劃算中的結束時間提示、唯品會中清空購物車的倒計時。

      功能提醒類

      出于有些icon達意不明確、有些功能被收起或隱藏在手勢中、主打功能希望被用戶快速掌握等原因,需要加以引導降低用戶的學習成本。

      類似的提示案例很多,在這里就不贅述了,下面分享兩個臭臉君覺得不錯的例子。

      功能提醒類.jpg

      左圖是微信預知引導發圖的功能,當檢測到相冊里有新增圖片時,一定時間內點擊微信的“+”,就會出現一個發圖的小浮層。此功能引導已成為很多應用模仿學習的對象。

      右圖是支付寶的對話頁面。你是否遇到過這樣的情況,當你打開支付寶想給對方轉賬時,點擊“發送”后才發現發過去的是個文本信息= =。應該是支付寶的設計師也嗅到了這個痛點,將此問題優化為檢測到用戶輸入了純數字內容時,便在鍵盤的上方出現一個“給對方轉賬n元”的按鈕。

      臭臉君最近一次腦袋短路時,看到此按鈕的瞬間就感動到內牛滿面。“你懂我”的認同感油然而生~~

      操作引導類

      操作引導分為強制性的和非強制性的。強制性的主要是登錄、注冊、安全認證、激活相關流程,需要身份驗證后才能繼續進行后續的操作;非強制性的則多是鼓勵用戶操作,例如完善的資料、關注更多好友、分享轉發等,這類引導最好給予一定的激勵。

      操作引導類.jpg

      從左到右依次為:閑魚引導用戶開通閑魚號,好處是可以看到sei在關注你;Facebook引導用戶授權訪問通訊錄,可以找到更多的好友;騰訊新聞引導用戶登錄注冊,可以查看更多有趣的個性化推薦。

      內容推廣類

      除了自身功能之外,產品中也會包含一些額外的推廣性引導,最常見的就是產品中植入的廣告。

      內容推廣類.jpg

      引導的形式

      引導頁

      引導頁.jpg

      引導頁通常是APP下載/更新第一次打開后,來向用戶展現產品中的功能和操作方法。通常用戶對信息吸收的效率并不高,用戶更希望趕緊體驗產品而不是看這些教導。因此引導頁的數量一定不要過多,頁面簡明扼要、中心明確才是王道。

      toast提示

      toast提示.jpg

      toast是一種極為輕量的提示方式,通常作為功能操作后的反饋。toast出現的時間都很短,不要指望用戶能真正注意到你在講什么。因此不要將其用作重要對象的引導形式,大多是可有可無或是會反復出現的,其次語言精練也是必要的。

      頁面遮罩

      頁面遮罩.jpg

      遮罩式引導為一種比較強勢的引導,通過直接蓋住界面來強調當前需要引導的內容。一般遮罩層為半透明,在此圖層上,通過各種圖形來結合被蓋住的界面內容,引導用戶聚焦到重要的信息。遮罩式浮層無法自動消失,而是需要用戶操作(指定操作/非指定操作)后才能隱掉。

      氣泡/浮層

      氣泡浮層.jpg

      氣泡/浮層式引導是一種量級輕但是目的性很強的引導方式,一般是半透明浮層結合文案的設計模式。大部分浮層模式帶有指向性的箭頭,可以用來提示重要功能或者隱藏操作。通常是非模態的,顯示3-5秒后自動消失,對用戶的干擾較小。也有一些重要功能使用模態浮層,需要用戶明確操作后才能隱掉。

      嵌入式(局部嵌入/整體嵌入)

      嵌入式.jpg

      嵌入式引導分為局部嵌入和整體嵌入。局部嵌入就是在當前頁面內容上增加引導提示。為了保證對象不埋沒在信息流中,有效地引起用戶注意,需要從視覺上做處理。整體嵌入則是將引導做為一個整體代替頁面內容的顯示,多使用在“空狀態”的情況下。

      操作示意

      操作示意.gif

      操作示意較常采用簡短的動畫向用戶展示操作方法,也不乏靜態圖片配以描述的方式。這種方法的好處是很直觀,用輕松淺顯的手法,就能傳達給用戶新鮮的功能和趣味的用法,比生硬的文字來得體貼。

      互動式引導

      互動式引導.jpg

      互動式引導通常比較隱蔽,是在用戶與產品之間互動的過程中引導用戶完成操作。常見的如下拉刷新、底部上拉等手勢互動。互動式引導也經常發生在語音操作中,例如用戶使用麥克風的過程中,界面隨著用戶的聲音的輸入而產生互動。

      彈窗

      彈窗.jpg

      與遮罩式相同,彈窗也能達到很強的引導效果且對當前操作具有很大的阻斷力。通常以文案配具體操作的形式呈現,可輔助搭配圖片烘托主題。需要用戶有明確的選擇后才能關閉彈窗。

      激勵引導(任務激勵/榜樣激勵)

      激勵引導.jpg

      激勵引導常見的有任務激勵和榜樣激勵。任務激勵是通過讓用戶做特定的任務從而獲得相應的好處,是APP拉新、促活慣用的方法。榜樣拉新則更偏向心里戰術,比如給自己的偶像打榜,激發起人性的好勝心通過購買數量的多少來表達對TA的熱情。

      自體變形

      自體變形.gif

      自體變形是元素自身發生改變,可以是純視覺上的也可以配合動畫效果。它沒有額外增加其他元素,也不會像膏藥一樣覆蓋在頁面上,只是通過效果變化達到與同組的其他元素作區分。如上圖淘寶首頁中天貓國籍的動畫形式。

      引導的強弱與頻率

      根據出現時是否有阻斷、消失時是否需要操作,我們可以劃分出不同強弱的引導提示。

      弱提示通常情況下它的出現不一定能讓每一個用戶都注意,或者不需要讓所有用戶都完整的了解。這樣的提示不會阻礙用戶當前的閱讀和操作行為,還可以自動消失;強提示需要用戶一定注意到的,它會阻斷用戶當前的使用且需要有明確的指定操作才能消失。

      頻率,是指單位時間內完成周期性變化的次數。是確定了引導的觸發點和類型后,另一個不可忽視的思考要素。

      引導的形式太強會干擾用戶當前操作,太弱又可能被忽略。即使用戶真的看到了,也可能遺忘掉。為了能讓引導的存在不只是滿足一下設計師自己的心理訴求,我們也需要把握好它出現的頻率,尤其是類似toast、浮層這種很容易被忽略的引導。

      引導的強弱與頻率.jpg

      在云音樂的最新版我們引入了截屏分享功能。雖然分享浮層出現后3秒會自動消失,但為了防止每次截屏都出現浮層給用戶帶來干擾,我們在設置頁里加入了功能開關。那么問題來了,如何告訴用戶有開關這個事情呢?

      我們的做法是:功能上線后針對所有用戶,首次手動取消浮層時(點擊浮層右上角的“×”、點擊半透明遮罩)即toast提示“可在設置中取消截屏分享提示”,之后每累計手動取消3次提示一次。

      注意事項

      保證引導的有效性

      用戶引導是對產品內容以及形式的輔助說明,存在即要有意義。

      觸發場景準確

      用戶在瀏覽/操作時都有一定的使用場景,根據場景觸發相應的用戶引導,保證在用戶需要的時候出現引導,才能達到接受度的最大化。

      簡單易懂,突出核心

      不論什么類型的引導,它們的目的都是為了讓用戶更好地去使用產品、減低認知和摸索學習的門檻。復雜繁瑣的內容會給用戶帶來壓力進而失去耐心,也很容易就被遺忘。

      與產品基調一致

      用戶引導的視覺風格、語言表達要與產品定位、產品理念相一致。因地制宜的前提下保證全局的一致性,切記沒有克制地隨意發揮。這樣的好處是可以讓用戶在看到引導的時候對產品有一個大致的基調認識和感受。

      啰嗦了這么多,文章的末尾臭臉君突然想感慨一下

      用戶引導是什么:是在對的時間遇到對的你~~


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 久久99精品波多结衣一区| 国产日韩一区二区三免费高清| 久久精品无码一区二区app| 日韩一区二区在线视频| 亚洲无圣光一区二区| 91国偷自产一区二区三区| 国产精品高清一区二区人妖| 国产精品亚洲产品一区二区三区| 无码人妻一区二区三区免费手机 | 99精品国产一区二区三区不卡| 亚洲一区综合在线播放| 精品动漫一区二区无遮挡| 亚洲日本va午夜中文字幕一区| 国产精品被窝福利一区 | 濑亚美莉在线视频一区| 波多野结衣精品一区二区三区| 亚洲AV无码一区二区三区在线观看| 精品国产AⅤ一区二区三区4区 | 国产美女在线一区二区三区| 色狠狠一区二区三区香蕉| 久久久久久综合一区中文字幕| 精品国产一区二区三区麻豆| 国产亚洲一区二区三区在线观看 | 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 99久久精品日本一区二区免费| 老熟女高潮一区二区三区| 乱精品一区字幕二区| 精品性影院一区二区三区内射 | 国产一区二区三区国产精品| 国产精品资源一区二区| 国产精品视频一区二区三区无码| 黑人大战亚洲人精品一区| 亚洲熟妇av一区二区三区| 国产日韩视频一区| 精品一区二区三区无码免费直播 | 中文字幕一区二区三区精华液 | 久久久久人妻一区二区三区vr| 五月婷婷一区二区| 2021国产精品视频一区| 日本一区中文字幕日本一二三区视频| 国偷自产视频一区二区久|