การออกแบบกระบวนการออนบอร์ดที่ช่วยให้ผู้ใช้เรียนรู้ได้จริง
การกระโดดเข้าไปในแอพใหม่มักจะมาพร้อมกับการดิ้นรนของการเรียนรู้วิธีการทำงาน คุณอาจได้รับมันอย่างรวดเร็ว แต่ มีกระบวนการเรียนรู้อยู่เสมอ. เป้าหมายของ การสร้างความคุ้นเคย คือการ แนะนำผู้ใช้ใหม่ ไปยังเว็บไซต์โปรแกรมหรือแอปพลิเคชัน ด้วย onboarding คุณควรสอนเกี่ยวกับ คุณสมบัติส่วนบุคคลวิธีการทำงาน, และ แอพเสนอคุณค่าอย่างไร ให้กับผู้ใช้.
ในโพสต์เมื่อเร็ว ๆ นี้เราครอบคลุม หน้าจอออนบอร์ดมือถือ ที่มุ่งเน้น การออกแบบและรูปแบบเนื้อหา. ในโพสต์นี้ฉันต้องการแบ่งปันเคล็ดลับสำหรับประสบการณ์การใช้งานและกระบวนการทางการตลาดของ แนวทางผู้ใช้ผ่านกระบวนการออนบอร์ด.
ใช้รูปภาพและไดอะแกรม
กราฟิกและองค์ประกอบภาพ สามารถอธิบายประสบการณ์ของผู้ใช้ได้ดีกว่าคำพูด พึ่งพาภาพเพื่อช่วย แนะนำผู้ใช้ตลอดกระบวนการ ตามความจำเป็น. นี่เป็นกลยุทธ์ที่มีค่าเพราะดึงดูดสายตาสู่กระบวนการขึ้นเครื่องบินและชี้แจงถึงเจตนา ด้วยภาพเป้าหมายของคุณคือ แสดงมากกว่าบอก.
คุณสามารถทำได้หลายวิธีด้วย ภาพหน้าจอแบบเต็มไอคอนขนาดเล็กหรือภาพประกอบ / กราฟิกแบบเวกเตอร์ เหมาะสมกับเวิร์กโฟลว์การออกแบบ ยกตัวอย่างหน้าจอออนบอร์ดนี้จาก Salman Shah นักออกแบบ.

เขาใช้ไอคอนเวกเตอร์เพื่อ มองเห็นคิวแต่ละสไลด์. ไอคอนใช้งานได้ เป็นอุปมาอุปมัยสำหรับแต่ละจุด, และช่วย ขายคุณสมบัติ ให้กับผู้ใช้.
หากคุณไม่มีทักษะในการออกแบบไอคอนตั้งแต่เริ่มต้นคุณสามารถใช้งานได้ตลอดเวลา ชุดไอคอนฟรี เพื่อประโยชน์ของคุณ นักออกแบบหลายคนปล่อยผลงานของพวกเขาฟรีและคุณสามารถทำได้อย่างง่ายดาย รวมไอคอนเหล่านี้ไว้ในหน้าจอออนบอร์ดของคุณ.
คุณสามารถย้ายเกินไอคอนคงที่ไป รวมถึงภาพเคลื่อนไหว เช่นกัน ยกตัวอย่างกระบวนการทางการเงินที่สร้างขึ้นโดย Iaroslav Zhmak.

เขาใช้ ไอคอนมากมาย แต่ยัง วางภาพเคลื่อนไหวลงในแต่ละส่วน. คุณเรียนรู้ว่าแอปทำอะไรผ่านตัวชี้นำภาพ ที่เคลื่อนไหวเพื่อดึงดูดความสนใจของคุณ.
ขอให้สังเกตว่าแต่ละสไลด์ onboarding จะมีคำอธิบายข้อความเช่นกัน. นี่คือเนื้อจริงของข้อความเพราะจะบอกผู้ใช้ว่าพวกเขาสามารถทำได้ ทำจริงกับแอปพลิเคชัน. บางครั้งหน้าข้อความเท่านั้นสามารถ รู้สึกเหมือนตำราวิทยาลัยอุดอู้ แม้ ใช้ภาพและภาพเคลื่อนไหวเพื่อเติมชีวิตชีวาให้แต่ละส่วนของกระบวนการขึ้นเครื่องบิน.
แสดงคุณสมบัติที่ใช้งานจริง
พยายามที่จะ หลีกเลี่ยงการระบุคุณสมบัติที่ชัดเจน หรือบังคับให้ผู้ใช้จดจำทุกส่วนของแอพ ยังลอง หลีกเลี่ยงข้อความพื้นฐาน ที่แนะนำผู้ใช้รอบ ๆ แอพเช่น “นี่คือเมนูหลักนี่คือหน้าจอเพื่อน”, เป็นต้นให้พยายามจดจ่อกับสิ่งเหล่านี้แทน ทำได้, และวิธีการที่ผู้ใช้ สามารถโต้ตอบกับพื้นที่เหล่านี้.
กลยุทธ์นี้ชวนให้นึกถึงสุภาษิตโบราณทางการตลาด “อย่าขายสเต็ก, ขายเสียงดังฉ่า”. คุณต้องการขายแอพ ผ่านผลประโยชน์ให้กับผู้ใช้, ไม่ผ่านคุณสมบัติและรายการเมนูโดยพลการ.
ตัวอย่างเช่นการออกแบบนี้สร้างโดย Prakhar Sharma จะแนะนำคุณเกี่ยวกับกระบวนการทำงานทั้งหมดในบัญชีธนาคารของคุณ.

การออกแบบ ให้การไหลตามธรรมชาติ เพื่อช่วยคุณเริ่มต้นใช้งานและนำทางคุณไปทุกขั้นตอน กระบวนการออนบอร์ดนี้บังคับให้ผู้ใช้ เริ่มปฏิบัติ ซึ่งในที่สุดเป้าหมายหลัก.
คุณสามารถ แสดงคุณสมบัติที่ใช้งานจริง ผ่านการสาธิตหรือคุณสามารถช่วยผู้ใช้ ดำเนินการผ่านกระบวนการขึ้นเครื่องบิน. ทั้งวิธี กระตุ้นให้เกิดการกระทำมากกว่าการบริโภค ซึ่งมักจะนำไปสู่ผู้ใช้ที่มีส่วนร่วมมากขึ้น.
ฉันพบตัวอย่างที่ดีอีกอย่างหนึ่งของหน้าจอ onboarding แอพสไตล์ YouTube ที่สร้างโดย Riko Sapto Dimo มันใช้ภาพและไอคอนในการถ่ายทอดข้อความ แต่ยังช่วยให้ผู้ใช้ ลงมือปฏิบัติก่อนดำน้ำเข้าไปในแอพ.

หลังจาก “มันทำงานอย่างไร” หน้าจอที่คุณสามารถเลือกได้ ตั้งค่าการแจ้งเตือน ด้วยการคลิกปุ่ม มันคือ กลยุทธ์ที่ดี เพราะผู้ใช้หลายคนจะลืมแอพอย่างสมบูรณ์ แต่ด้วย การแจ้งเตือนโผล่ขึ้นมา พวกเขาจะ ในที่สุดใช้มันอีกครั้ง (หรือปิดใช้งานการแจ้งเตือน).
คุณยังสามารถเพิ่ม ปุ่มเพื่อเปิดหรือปิดคุณสมบัติ ณ จุดใด ๆ ในกระบวนการขึ้นเครื่องบิน คุณสมบัติเหล่านี้อาจเกี่ยวข้องกับการสมัครรับจดหมายข่าวการติดตามบัญชีอื่นหรือแม้กระทั่ง สมัครรับข้อมูลอัปเดต. เพียงแค่ รับผู้ใช้มีส่วนร่วม, และช่วยพวกเขา เริ่มดำเนินการ. จากตรงนั้นมันง่ายกว่าที่จะ ให้พวกเขาติดยาเสพติด.
แสดงคุณสมบัติหนึ่งครั้ง
หน้าจอออนบอร์ดส่วนใหญ่แสดงคุณสมบัติบางอย่างและนำคุณผ่านกระบวนการตั้งแต่ต้นจนจบ. อย่ารีบเร่งผู้ใช้, และแน่นอน อย่าดันข้อมูลจำนวนมาก เข้าสู่หน้าจอในครั้งเดียว.
กุญแจสำคัญในการรักษาผู้ใช้ใหม่ที่สนใจและตื่นเต้นคือการ รักษาโฟกัส และ แสดงคุณลักษณะครั้งละหนึ่งคุณลักษณะ. หากคุณดันหน้าจอมากเกินไปผู้ใช้จะสามารถทำได้ รู้สึกจม. หากกระบวนการขึ้นเครื่องบินน่าเบื่อเกินไปคนจะเบื่อและเลิกเล่น.
แต่ละหน้าจอควรมีอย่างน้อย ข้อมูลใหม่หนึ่งชิ้น ที่มีคุณค่าต่อผู้ใช้ คุณสามารถทำสิ่งนี้บนเว็บด้วย วิธีการหน้าต่าง / กล่องโต้ตอบเป็นกิริยาช่วย. อย่างไรก็ตามคุณควรเก็บไว้ เน้นที่หัวข้อเดียวในแต่ละครั้ง เพื่อดึงดูดความสนใจว่ามันอยู่ที่ไหน.
ทีม Dropbox กำลังวางแผนแอพเดสก์ท็อปใหม่ที่มีออนบอร์ดและ Wes O'Haire แบ่งปันตัวอย่างนี้ในบัญชี Dribbble ของเขา.

ทุกอย่างเกี่ยวกับหน้าจอออนบอร์ดนี้ รู้สึกเป็นธรรมชาติมาก. คุณมีแถบสีน้ำเงินระบุ ไกลแค่ไหนในกระบวนการออนบอร์ด คุณไปแล้ว จากนั้นคุณมีเส้นทางที่ชัดเจนไปยัง ย้ายในลักษณะทีละขั้นตอน ผ่านกระบวนการ นอกจากนี้ยังมี ปุ่มย้อนกลับ ในกรณีที่ผู้ใช้ลืมขั้นตอนก่อนหน้าใด ๆ หรือเพียงแค่ต้องการสรุป.
โฟกัส เป็นชื่อของเกมและการออกแบบนี้ช่วยให้ผู้ใช้ มุ่งเน้นไปที่การกระทำ. ในตอนท้ายของกระบวนการเริ่มต้นนี้ผู้ใช้ใหม่ควรจะสามารถ ใช้อย่างสะดวกสบาย แอพ Dropbox บนเดสก์ท็อปเพื่ออัปโหลดดาวน์โหลดและดำเนินการอื่น ๆ ที่พวกเขาต้องการ.
และจำไว้ว่า ผลประโยชน์ขายดีกว่าคุณสมบัติ. อธิบาย สิ่งที่ผู้ใช้ได้รับจากแอพ แทนที่จะเรียกใช้อย่างรวดเร็วหรือมีโปรไฟล์เท่าใดที่คุณสามารถมีได้.

ตัวอย่างด้านบนมีหน้าจอสองสามหน้าจากแอปนัดพบแพทย์ / สุขภาพที่เรียกว่า Qikwell แต่ละสไลด์แสดงคุณสมบัติที่สำคัญอย่างหนึ่ง กำหนดเป้าหมายไปยังผลประโยชน์ของผู้ใช้ (ความพร้อมในการนัดหมายและจำนวนรวมทั้งหมดในบรรทัด).
สไลด์สุดท้ายยังมีขนาดเล็ก “เริ่ม” เชื่อมโยงไปยัง แนะนำผู้ใช้เกี่ยวกับขั้นตอนต่อไป. มันจะเพิ่มการมองเห็นของลิงค์นั้นเพื่อส่งเสริมการมีส่วนร่วม แต่เพียงแค่มีความคิดที่ดี.
อย่าลืมเก็บทุกอย่างไว้ ง่ายและตรงไปตรงมา. แต่ละขั้นตอนของกระบวนการ ควรมีเป้าหมาย เพื่อสอนผู้ใช้หรือช่วยให้พวกเขาย้ายไปที่แอปพลิเคชันต่อไป.
สรุปด้วยการกระทำ
ในตอนท้ายของกระบวนการเริ่มต้นคุณควรมีผู้ใช้ที่รู้ แอปเสนอสิ่งที่พวกเขาสามารถทำได้, และ ทำไมพวกเขาควรใช้มัน. แต่พวกเขาอาจจะ ต้องมีการผลักดัน เพื่อลงมือทำจริงและทำบางสิ่ง.
จบการทำงานบนเครื่องบินของคุณเสมอด้วยลิงก์หรือปุ่มบางประเภท ขับผู้ใช้เพื่อเริ่มต้นที่ไหนสักแห่ง. นี่อาจเป็นหน้าการตั้งค่าหน้าโปรไฟล์หน้าจอโฟลว์ผู้ใช้หรือสิ่งอื่นที่คล้ายคลึงกัน.
ที่สุด การดำเนินการที่แนะนำจะแตกต่างกันไป ตามเป้าหมายของแอปของคุณ แอปโภชนาการอาจกระตุ้นให้ผู้ใช้ใหม่เริ่มบันทึกอาหารของพวกเขาในแต่ละวัน แต่แอปเครือข่ายสังคมอาจส่งผู้ใช้ไปที่หน้าจอโปรไฟล์หรือไปที่ รายการผู้ใช้ที่แนะนำ ติดตาม.
ในการออกแบบแอพนี้โดย Oktafian Nugraha คุณจะสังเกตเห็นส้มใหญ่ “เริ่มกันเลย!” ปุ่มที่ด้านล่างของสไลด์สุดท้าย นี่เป็นซุปเปอร์สดใสและยากที่จะพลาด.

ปุ่มการกระทำขั้นสุดท้ายนี้สามารถนำไปสู่ทุกที่ตราบใดที่ เป้าหมายสุดท้ายคือการรักษาผู้ใช้. ติดปุ่มนี้ในกระบวนการเริ่มต้นของคุณและ ตรวจสอบให้แน่ใจว่าสามารถมองเห็นได้. หากผู้ใช้เสร็จสิ้นการออนบอร์ดแล้วและไม่เห็นปุ่มใดที่จะสรุปได้ รู้สึกติดกับดัก และ เพิ่งจากไป.
มันค่อนข้างยากที่จะทำให้เรื่องนี้ยุ่งเหยิงดังนั้นเพียงแค่ วางแผนโฟลว์ผู้ใช้ทั่วไป, และทำให้แน่ใจว่าคุณ ลิงค์ไปยังหน้าที่เหมาะสม ในตอนท้ายของกระบวนการขึ้นเครื่องบิน ถ้าการออนบอร์ดทำหน้าที่ของมันได้ผู้ใช้ใหม่ก็ควรจะเรียบร้อยแล้ว รู้ว่าต้องทำอะไรจากที่นั่น.
ดูสุดท้าย
โครงการใหม่ทุกโครงการควรมีคู่มือช่วยเหลือหรือกระบวนการออนบอร์ดสำหรับผู้ใช้ใหม่ มันเป็นวิธีที่เร็วที่สุด แนะนำผู้ใช้ใหม่, และ ทำให้ผู้คนมีส่วนร่วมมากขึ้น ด้วยแอพมือถือเว็บไซต์หรือโปรแกรมเดสก์ท็อปของคุณ.
การออกแบบที่สวยงาม มีความสำคัญ แต่ประสบการณ์ของผู้ใช้นั้นสำคัญกว่าทุกอย่าง เมื่อทำอย่างถูกต้องกระบวนการ onboarding ควรเป็น การศึกษาและหวังว่าสนุกเล็กน้อย!