淺析:APP使用的指引模組和使用的元件和技術

編輯導讀:使用者在使用新的一個產品時,最先遇到的就是引導介面,幫助使用者更好更快地熟悉產品。本文將從四個方面,對引導功能進行深入分析,希望對你有幫助。

淺析:APP使用的指引模組和使用的元件和技術

引導是讓使用者熟悉新介面的過程。它可以包含以下一個或多個元件:功能升級、自定義和說明。

想象一下,你突然接到一份新的工作任務,卻沒有解釋你的主要工作任務或如何完成它們。你可能不會很成功(無論如何衡量)或花費了很長時間,對嗎?有效的入職流程是新員工成功的關鍵。此外,每次引入一個新流程時,都需要再次進行培訓,以便讓每個人都採用它。

使用者介面也是如此,尤其是當介面是要重複使用的時候。在本文中,我們將重點介紹移動應用程式的引導。

我們將” 引導”定義為讓使用者熟悉新介面的過程——學習使用不屬於常規應用程式介面的專用流程和UI元素的過程。這不僅包括教使用者如何與介面互動(常見的誤解),還包括完成任何必要的設定。此外,引導不僅限於首次使用的使用者——在釋出新功能或重新設計時,現有使用者也可能會收到引導。因此,引導可以在使用者生命週期的多個點發生,而不僅僅是首次啟動。

一、儘量跳過引導

一般來說,引導是有問題的,原因如下:

  • 互動成本更高。引導流程需要使用者的關注與嘗試。即使使用者決定跳過您的引導,他們仍然需要單擊或點選才能這樣做,從而增加了使用者在應用程式中完成任務的互動成本。
  • 記憶體壓力。引導通常用來幫助使用者記住介面的某些東西(比如圖示的含義或者如何做某事),但是人類的記憶是有限的。與其讓使用者記一些關於應用的內容來消耗他們的記憶體,不如在現有的思維模型上構建,花點時間讓你的應用更容易被使用。
  • 可能無法提高使用者效能。我們知道引導的一些缺點,但好處有時不太明顯。然而,我們對紙牌教程(一種指導性培訓方法)的研究表明,這些教程並不能提高任務績效。

因此,我們建議專業人士在任何可能的情況下避免建立應用程式的引導,而應該將您的資源用於UI上,使其更加好用。

二、移動應用程式何時需要引導

使用者總是需要(通常時間做到最短的)時間來學習一個新的應用程式,但這並不意味著所有的應用程式都需要單獨的引導流程或冗長的解釋。

對於大多數移動應用程式,使用者應該能夠透過使用程式來學習介面,因此不需要指導性的引導流程。即使是對於相當複雜的移動應用程式,透過在情境中向用戶展示提示,而不是向他們提供解釋應用程式UI的教程,這樣對於學習通常更有效——人們根本不可能(甚至試圖)記住很多資訊,尤其是當他們不確定是否真的必須使用這些資訊時。

此外,雖然錯誤訊息是使用者體驗的一個負面元素,但錯誤訊息可以在“可教的時刻”向用戶傳授更多關於應用程式的知識,在這個時刻,人們有很小的動力去閱讀一些關於如何解決問題的單詞。

在移動應用程式中,只有少數情況下,引導頁面是有用的:

  • 您需要使用者資訊才能開始。例如,銀行應用程式可能需要使用者在使用該應用程式之前建立一個帳戶並確認其身份。
  • 應用程式功能根據使用者的情境和偏好進行了高度定製。例如,一個節食應用程式可以從瞭解使用者當前的體重中獲益。
  • 重要的應用程式特性或工作流對於應用程式來說是相當獨特的,可能與標準的UI模式不同,或者是比較新穎的和不熟悉的。例如,當移動支票存款首次作為個人自動取款機存款的替代品推出時,這種新穎的功能值得使用正式的引導流程。

如果你還不確定你的應用是否需要引導,那麼在投入費用去增加額外頁面之前,可以先測試沒有的引導頁面的情況。你的使用者在第一次使用這個應用程式(或一個新功能)時是否表現出困難?

如果是,首先考慮是否可以對應用程式設計進行一些更改,使其更易於學習。如果這無法解決問題,試著建立一個引導流程的原型並進行測試。它能解決你的問題嗎?人們能更流暢地使用這個應用嗎?只有在答案是肯定的情況下,才值得在UI中新增專門的引導流程。

三、它有哪些內容:引導元件

在移動引導流程中有三個經常遇到的元件:功能提升、定製和引導說明。引導流程可能包含一個或多個這些元件。

淺析:APP使用的指引模組和使用的元件和技術

在引導流程中有三個常見元件:功能提升、定製和說明,引導流程可以包含一個或多個這些元件。

在接下來的內容中,我們將研究移動應用程式中的每一個元件,並討論它們是否實踐有用。

四、功能推廣

基於功能的引導流程可以使使用者瞭解該應用程式可以做什麼,因此,它往往被視為營銷。

淺析:APP使用的指引模組和使用的元件和技術

Productive是一款習慣追蹤應用程式,它提供了入門培訓,展示了該應用程式可以執行的一些操作,比如設定提醒和檢視統計資訊。

避免在首次啟動時啟用功能推廣。使用者很少無緣無故地下載應用程式;因此,他們很可能會跳過冗長的引導流程。該規則的一個例外是真正的新功能或是高階功能,例如前面提到的移動儲存示例。

不過請記住:這項技術已經不是什麼新技術了,因此現如今的應用程式不應該在首次釋出時對其進行推廣!一個功能從新奇到廣為人知的速度各不相同,這取決於它的使用頻率和其步驟的可記憶性。

在應用商店頁面上展示這些型別的推廣介面,而不是將這些資訊提前告知使用者,因為在這裡使用者可以瀏覽新應用並比較功能。

淺析:APP使用的指引模組和使用的元件和技術

Productive應用程式還在其蘋果應用程式商店頁面的預覽部分提供了推廣內容。在應用程式商店和應用程式中都包含這些內容是多餘的。

除了在應用商店中突出顯示功能外,另一個解決方案是透過情境幫助使用者在應用程式中突出顯示功能。與其在使用者有辦法使用它之前推廣這個功能,不如在對使用者來說可行的情況下對其進行突出顯示。例如,當用戶記錄了7天的習慣資料後,應用程式可能會提供一個視覺提示(比如突出顯示該應用程式的統計資訊部分),並簡要提示使用者如何處理這些資料。

儘管這種型別的入門功能在應用程式首次釋出時不太有效,對首次使用的使用者也沒有幫助,但是在釋出新功能時顯示功能入門可以對現有使用者有所幫助。 例如,Chase使用了一種卡片流程來介紹新的預算功能。

淺析:APP使用的指引模組和使用的元件和技術

大通銀行應用程式透過卡片組功能的入門流程提示現有使用者,以突出顯示新的應用程式功能(例如信用卡消費彙總)。流程很短,甚至允許使用者完全跳過它。

將引導流程的使用限制在對使用者來說是真正新的功能上,而不是在應用程式中已經使用了一段時間並且利用率較低的功能。持續地突出顯示使用者可能已經熟悉但並不相關或不需要的現有功能可能會讓使用者感到厭煩,並使他們忽略所有新功能,甚至是那些合理的新功能。

五、定製

許多應用程式請求使用者資料以便定製使用者體驗。例如,使用者可能會自定義應用程式的內容或視覺設計。然而,並不是所有的自定義都應該在引導期間完成。

特別是,視覺設計定製,如選擇配色方案,不應該在引導流程中。在真正使用之前,人們很難知道他們會喜歡這個應用程式的外觀,或者為什麼某種視覺設計會比其他的更好。

而且,一般來說,很多研究表明人們通常會堅持預設設定。與其讓他們做出選擇並增加認知負荷,不如做你的功課,進行一項研究,然後找出哪種設計最好。

淺析:APP使用的指引模組和使用的元件和技術

Reflectly應用程式包括了視覺設計定製。該應用程式強迫使用者在不知道UI外觀之前就選擇一個配色方案。

這並不是說您不應該提供自定義視覺設計的功能,但是您可以將其儲存以備以後使用。在你的引導流程中,它不值得優先考慮。

淺析:APP使用的指引模組和使用的元件和技術

Any.do允許透過應用程式設定進行視覺設計定製,並且在第一次啟動時不會提示使用者選擇主題。

內容定製可以建立相關的體驗,而且更適合初始應用的引導。在應用程式中有很多內容定製的例子。例如,對於一個語言學習應用程式來說,選擇一門語言並確定你對這門語言的精通程度對於這個應用程式的使用是至關重要的。

淺析:APP使用的指引模組和使用的元件和技術

Fitplan對新使用者進行了一個簡短的調查,以便根據推薦的鍛鍊方式量身定製應用體驗。該應用程式還提供了一個簡短的說明,說明它需要什麼資訊以及為什麼需要。此外,雖然這個調查是自動顯示的,但是有一個跳過它的選項,以及一個進度指示器。

當提示使用者定製他們的體驗時,保持簡潔。解釋為什麼需要這些資料以及如何使用這些資料(如上面的Fitplan示例)。考慮你是否真的需要這些資訊來幫助使用者開始並在APP中取得成功。如果你不能解釋為什麼在啟動時收集這些資料是有益的,那麼這些資訊應該稍後收集,使用者能夠更好地理解為什麼需要這樣做。

六、說明

說明的目的是教使用者如何使用介面,引導流程不應該被用來補充糟糕的設計。與建立教學內容相比,將資源花在UI的可用性上更好。也就是說,在某些情況下,說明是必須的。

例如,應用程式的特性或工作流是獨特的,與標準UI模式不同,或者對使用者來說是新的或不熟悉的)或預期的(手機遊戲)。

引導流程有多種形式:卡片教程、上下文幫助、互動式演練等等。無論採用何種形式,引導說明都應該簡潔、可選,並且應該只突出使用者使用APP需要知道的最小部分。

下面是一些在移動應用中使用引導說明風格的例子。

七、卡片組

卡片組教程通常會在應用啟動時立即顯示,並提供有關如何以卡片組格式(類似於輪播)使用其介面的說明。這種型別的引導,尤其是在相對簡單的移動應用程式中,往往會使介面看起來比實際介面更加複雜,並會佔用使用者的記憶體。

因此,我們不建議您在紙牌遊戲中使用。就是說,如果您仍然選擇實施它們,請對您的使用者好些,並確保有一個高度可見的“跳過”選項,將卡的數量減少到僅關注需要了解的資訊,並且只關注每張卡的一個概念。

淺析:APP使用的指引模組和使用的元件和技術

什麼預測?!使用卡片組教程來提供指導性入門資訊,並告知使用者某些控制元件在應用程式中的位置。標準圖示的解釋是無用的,只會浪費使用者的時間。

八、引導疊加

引導文字和引導標記共同使用是另一種引導方式,用於向用戶顯示UI中一些核心功能的位置以及這些元素的作用。

實施引導疊加時,請確保內容及時(例如在使用者第一次接觸某個功能時)且內容不引人注目。這種型別的引導方式在使用者第一次嘗試完成任務時會很好地配對,因此,隨著使用者的前進,它會提供額外的資訊。

因此,說明性疊加層通常是很好的元素,而不是不需要的元素。

淺析:APP使用的指引模組和使用的元件和技術

NOAA Weather應用程式透過在一個螢幕上突出顯示所有可能的互動來使使用者超載。對於標準UI元素(如“共享”和 “設定”圖示),此實現非常麻煩且不需要。

淺析:APP使用的指引模組和使用的元件和技術

Checklist使用說明性疊加層向用戶顯示一些核心功能,例如如何對裝箱單進行分類和標記。但是,該說明性副本用於解釋不熟悉的字詞(左:在這種情況下,是討論裝箱單時的“類別”)和未標記的圖示(右:橙色大標籤)。在這種情況下,針對教學內容的較不引人注目的解決方案將是彈出提示,因此,如果使用者需要清晰度,則可以輕按(甚至更好:改進UI而不是在一個不好的情況下提供清晰度)。

九、互動式引導

如果您的應用程式比以前的示例更復雜,並且您認為由於設計新穎或不熟悉而需要使用說明,請考慮進行互動式引導。互動式引導使使用者可以邊做邊學(最好是在低風險的環境中)。成功完成之後(例如,簡短並僅強調新內容或不熟悉的內容,如上所述),互動式引導將更像是練習,而不是教程。

淺析:APP使用的指引模組和使用的元件和技術

目標跟蹤應用程式Fabulous使用互動式引導來使使用者熟悉相對簡單且熟悉的工作流程,是不必要的。

淺析:APP使用的指引模組和使用的元件和技術

Temple Run 2提供了一個互動式引導,可讓使用者在玩簡單級別的遊戲時及時獲得螢幕指示。例如,在接近障礙物之前,先給出瞭如何避開障礙物的說明。本演練向用戶介紹了遊戲控制元件,併為他們提供了在情境中多次練習的機會。

淺析:APP使用的指引模組和使用的元件和技術

MindNode是一個思維導圖和頭腦風暴應用程式,它使用互動式引導來使使用者加入不太熟悉的工作流程。在本教程中,使用者建立了一個非常簡單的思維導圖工件,因此熟悉了互動式引導環境中的控制元件和術語。還提供了跳過教程的選項。

十、結論

保證引導儘可能簡單。對於大多數移動應用程式而言,這意味著將使用者直接置於介面中。

另一方面,具有獨特互動模式的複雜應用程式或希望使用者資訊定製體驗的應用程式可能會受益於引導流程。透過引導,您可以專注於哪些使用者需要在您的應用程式中取得成功,突出顯示新內容或不熟悉的內容,並保持引導流程簡短明瞭。

原文連結:

https://www.nngroup.com/articles/mobile-app-onboarding/

本文由 @喵吉斯蒂 翻譯釋出於人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基於CC0協議

版權宣告:本文源自 網路, 於,由 楠木軒 整理釋出,共 4841 字。

轉載請註明: 淺析:APP使用的指引模組和使用的元件和技術 - 楠木軒