來看一下如何做引導流程。
中國著名哲學家老子說過:“千里之行始於足下”。 這個簡單而強大的道理同樣適用於眾多數字產品的設計:與app或網站的關係建立於第一印象,由通過嘗試某種操作的實際交互流程所決定。
這個過程通常需要花費一些時間,但對建立用戶與產品之間的粘性卻起著至關重要的作用。 那麼我們從介紹應用的流行手法——新手引導開始,來看一下如何做引導流程。
為什麼需要引導流程?
首先,來看看基本術語。 Onboarding這個概念起源於人力資源領域,意為“新人的入職培訓”,是企業製定的一系列用於幫助新員工迅速適應新環境的步驟和方法,並卓有成效。
對大多數人來說,嘗試新事物需要付出各種努力和考慮,讓人倍感壓力。 所以哪怕是看起來很微小的幫助也可能讓決策更容易、更和諧。 特殊的策略可以糾正可能產生的問題,讓新人在新地方更有信心,更高效的投入工作並與同事快速熟悉起來,更快為公司產生價值。
數字產品作為日常生活中不可或缺的一部分,一開始就吸納了onboarding這個概念,是指在用戶首次使用產品時取悅用戶並介紹產品的一系列交互。
設計新手引導時,最重要的一件事便是理出清晰的優先級。 用戶的時間是有限的,他們想要在實際上手操作之前,充分了解這個產品。
此外,人的操作記憶和對優先級的認知是有限的,所以產品的創造者應明確在不同階段分別提供不同的信息,而不是一次性給出大量數據,讓用戶感到困惑和尷尬。
在Adobe Creative Cloud Blog最近的一篇文章中,UX研究員、認知心理學家,Youtube的UX部門負責人Rob Youmans說,“在設計中,首次啟動時需要顯示重要度和新近度。當用戶開始 了解一個新產品時通常會有教程、嚮導、說明或其他內容。設計師在這方面花功夫是極為明智的,重要的信息放最前或者最後,畢竟你希望人們稍後使用產品時記住它們。 ”
什麼是新手引導?
新手引導是在用戶第一次與產品交互時展示的一組畫面。 在絕大多數情況下,設計師會用3-4屏頁面去向新用戶介紹產品的相關信息。
App 新手引導是尊重用戶的標誌:通過它用戶可以快速了解這個app所能解決的問題、有什麼用以及能夠幫用戶解決什麼問題。 當然,如果信息足夠清晰,這是一個很好的、提升可用性的手段。
為什麼你的app需要新手引導?
新手引導有三個基本功能:
打招呼
App新手引導是用戶與產品建立的第一次聯繫。 這是一種介紹行為,在大多數情況下,模仿真實交往場景,從打個招呼開始,尤其是當應用程序擁有吉祥物或性格角色時,它們可以成為與用戶交流的直接主體。 打招呼需謹慎使用,問候語盡量短小精幹,否則會轉移用戶對於核心信息的注意力。
信息傳達
這可能是新手引導任務中最有價值的部分。 首先,新手引導是用戶入門的第一步,因此應該告訴用戶為什麼要使用本產品或者本產品有哪些基本功能。 用戶研究和產品的USP(營銷理論,指商品獨特的銷售主張)有助於設計師和文案快速找到向用戶提供關鍵信息的方法。
參與
另外,新手引導為產品抓住用戶奠定了堅實基礎,它可以快速向用戶展示產品最有價值的地方,刺激用戶去嘗試,並容忍探索未知時可能會遇到的困難。
此外,符合目標受眾喜好的設計風格,更能激髮用戶想要了解更多的興趣。 多數情況下,用戶是視覺驅動的生物:我們通常會對符合我們審美的設計或視覺表達出的特定情緒感興趣。 而新手引導則是要從第一秒開始就充分利用這個法則。
新手引導設計需要注意什麼?
新手引導的結構與內容對於項目來說是相對獨立的。 影響設計解決方案的因素有很多,但都不外乎這三個核心問題:用戶需求/願景/預期、產品性質和商業目標。 作為產品的門面,新手引導是一種利用動態效果和吸引人的內容來展示產品基本信息的方式。
自定義圖像或插畫
大部分人對圖片的解析速度快於文字,邏輯性的圖像可以將信息快速傳達給用戶。 在引導中 使用照片或手繪稿,可以大大提升其解釋力和辨識度。 選擇可以是多樣的,簡潔的圖標或複雜精緻的藝術作品都可以。 插圖是一種不錯的方式,可以最大限度減少文案在頁面中的使用。 在兒童或青少年app中,使用插圖特別有效並顯得更加人性化。
在近年的設計趨勢中,為特定界面設計自定義插圖已經日益普及。 大家都喜歡在app 新手引導嘗試各種設計風格。 在很多案例中,自定義插圖成為創作的中心內容,用一種容易理解且吸引人的方式表達出產品的特性和用處。 另一種流行的方法是引用吉祥物,模仿與用戶的真實溝通並設立情感紐帶。
文案與排版
新手引導,文字即是力量。 有力量的文字符合兩個簡單的原則:簡短、有效。 毫無疑問, 精煉短小的句子比長句更難寫: 你必須找到有效的方法,避免用戶在閱讀新手引導時浪費寶貴時間。 如果允許,可以請一個文案專家,打造出字字珠璣的引導文案。 或者,利用你的閒暇時間去思考一些簡明、抓人眼球且清晰的文案 ,讓這些言語表達適用於目標用戶並契合產品目標。 和設計方案一樣, 文案也需要反复推敲,以找到能打動用戶的最佳方式。
設計師應該牢記的另一個點是:文案也是一個重要的視覺元素。 除了圖標、字段、按鈕、插圖、控件等,文字也是和其他圖形組件一樣佔據屏幕或網頁的一部分,並影響app和網站的風格呈現。 此外, 文案成功與否也取決於文字的字體、樣式、背景,以及位置等設計方案的選擇。 這些因素都極大影響了可讀性,所以在設計不當時,文案就會失去本應有的價值和意義。
動畫
另一種製作引導的方法不僅易傳達信息,而且更具吸引力,這就是運用動畫。 動效讓交互變得更有活力, 讓界面擁有生命力,博人眼球。 更重要的一點,動畫可以突出重要的細節。 不過,動效會增加加載時所需時間與流量,因此需要與開發人員就技術實現進行討論。
清晰的頁碼
一般來說,新手引導會有幾個頁面,每一頁對應一個產品特性和用處。 請記住,從這個一開始的交互開始,用戶就應該知道他們在哪,使用路徑有多長,因此通常會使用頁面指示器這種簡單快捷的控件。
可以跳過
另一件需要注意的事情是:跳過引導。 並不是所有用戶在第一次使用產品時都需要引導,因此對於某些產品,允許用戶跳過是合理的。 是否允許用戶跳過,取決於對目標受眾的測試與數據分析。
最後,在界面中,細節決定成敗。 正如古諺語所說:“好禮服是邀請函,好頭腦是推薦信。”當然,如果這個產品對用戶來說毫無用處,新手引導設計的再好,都無濟於事。 然而,如果產品能滿足需求解決問題,並且易用性強,那麼新手引導可以讓體驗更流暢、更愉快。 好禮服能讓人印象深刻——經過深思熟慮設計的新手引導便是如此。
作者:Tubik Studio
譯者:Donkey
原文鏈接:https://uxplanet.org/design-of-onboarding-tutorial-greet-inform-engage-55c36c9b4999
來源:微信公眾號:滬江設計中心(ID:HJ-UED)
題圖來自PEXELS,基於CC0協議