คู่มือที่ครอบคลุมสำหรับการออกแบบแอพมือถือ

( นี่คือบทความที่ได้รับการสนับสนุน ) ผู้คนมีส่วนร่วมกับโทรศัพท์ของตนในช่วงเวลาที่สำคัญมากกว่าที่เคย ผู้ใช้โดยเฉลี่ยในสหรัฐฯ ใช้เวลา 5 ชั่วโมงต่อวันบนมือถือ เวลาส่วนใหญ่ถูกใช้ไปกับแอพและบนเว็บไซต์

ความแตกต่างระหว่างแอปที่ดีและแอปที่ไม่ดีมักจะอยู่ที่คุณภาพของประสบการณ์ผู้ใช้ (UX) UX ที่ดีคือสิ่งที่แยกแอปที่ประสบความสำเร็จออกจากแอปที่ไม่ประสบความสำเร็จ ทุกวันนี้ ผู้ใช้มือถือคาดหวังอะไรมากมายจากแอป: เวลาในการโหลดที่รวดเร็ว ใช้งานง่าย และมีความสุขในระหว่างการโต้ตอบ หากคุณต้องการให้แอปของคุณประสบความสำเร็จ คุณต้องพิจารณาว่า UX ไม่ได้เป็นเพียงส่วนเล็กๆ ของการออกแบบ แต่เป็นองค์ประกอบที่สำคัญของกลยุทธ์ผลิตภัณฑ์

มีหลายสิ่งที่ควรพิจารณาเมื่อออกแบบสำหรับมือถือ ในบทความนี้ ฉันได้สรุปคำแนะนำเชิงปฏิบัติมากมายที่คุณสามารถนำไปใช้กับการออกแบบของคุณได้

ลดภาระทางปัญญาให้น้อยที่สุด

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

รกร้าง

การตัดความยุ่งเหยิงออกไปเป็นหนึ่งในคำแนะนำหลักใน “10 สิ่งที่ควรทำและไม่ควรทำของการออกแบบ UX บนมือถือ” ความยุ่งเหยิงเป็นหนึ่งในศัตรูตัวฉกาจของการออกแบบที่ดี การทำให้อินเทอร์เฟซของคุณยุ่งเหยิง แสดงว่าผู้ใช้มีข้อมูลมากเกินไป: ปุ่ม รูปภาพ และไอคอนที่เพิ่มเข้ามาทุกปุ่มทำให้หน้าจอซับซ้อนยิ่งขึ้น

ความยุ่งเหยิงนั้นแย่มากบนเดสก์ท็อป แต่บนมือถือนั้นแย่กว่ามาก (เพียงเพราะเราไม่มีอสังหาริมทรัพย์บนอุปกรณ์มือถือมากเท่ากับที่เราทำบนเดสก์ท็อปและแล็ปท็อป) จำเป็นต้องกำจัดสิ่งใดๆ ในการออกแบบมือถือที่ไม่จำเป็นจริงๆ เพราะการลดความยุ่งเหยิงจะช่วยเพิ่มความเข้าใจ เทคนิคการใช้งาน Minimalism สามารถช่วยคุณจัดการกับปัญหา UI ที่รก:

• รักษาเนื้อหาให้น้อยที่สุด (นำเสนอเฉพาะสิ่งที่พวกเขาจำเป็นต้องรู้แก่ผู้ใช้)

• รักษาองค์ประกอบอินเทอร์เฟซให้น้อยที่สุด การออกแบบที่เรียบง่ายจะทำให้ผู้ใช้รู้สึกสบายใจกับผลิตภัณฑ์

• ใช้เทคนิคการเปิดเผยข้อมูลแบบก้าวหน้าเพื่อแสดงตัวเลือกเพิ่มเติม

ออฟโหลดงาน

มองหาทุกอย่างในการออกแบบที่ต้องใช้ความพยายามของผู้ใช้ (ซึ่งอาจเป็นการป้อนข้อมูล การตัดสินใจ ฯลฯ) และมองหาทางเลือกอื่น ตัวอย่างเช่น ในบางกรณี คุณสามารถใช้ข้อมูลที่ป้อนก่อนหน้านี้ซ้ำแทนที่จะขอให้ผู้ใช้พิมพ์เพิ่มเติม หรือใช้ข้อมูลที่มีอยู่แล้วเพื่อตั้งค่าเริ่มต้นอัจฉริยะ

แบ่งงานเป็นชิ้นขนาดพอดีคำ

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

Chunking ยังช่วยเชื่อมโยงสองกิจกรรมที่แตกต่างกัน (เช่น การท่องเว็บและการซื้อ) เมื่อโฟลว์ถูกนำเสนอเป็นขั้นตอนจำนวนหนึ่งที่เชื่อมต่อกันอย่างมีเหตุผล ผู้ใช้สามารถดำเนินการผ่านขั้นตอนนั้นได้ง่ายขึ้น

ใช้หน้าจอที่คุ้นเคย

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

พิจารณาอ่าน "11 หน้าจอที่คุณจะพบในแอปบนอุปกรณ์เคลื่อนที่ที่ประสบความสำเร็จมากที่สุด" เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับหน้าจอที่คุ้นเคย

ลดขนาดอินพุตของผู้ใช้

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

• เก็บแบบฟอร์มให้สั้นที่สุดโดยลบฟิลด์ที่ไม่จำเป็นออก แอปควรขอข้อมูลจากผู้ใช้เพียงเล็กน้อยเท่านั้น

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

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

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

• ปรับแต่งแป้นพิมพ์สำหรับประเภทของข้อความค้นหา แสดงแป้นพิมพ์ตัวเลขเมื่อขอหมายเลขโทรศัพท์ และใส่ปุ่ม @ เมื่อขอที่อยู่อีเมล ตรวจสอบให้แน่ใจว่ามีการใช้คุณลักษณะนี้อย่างสม่ำเสมอทั่วทั้งแอป แทนที่จะใช้เฉพาะบางรูปแบบเท่านั้น

คาดการณ์ความต้องการของผู้ใช้

มองหาขั้นตอนในเส้นทางของผู้ใช้ในเชิงรุกที่ผู้ใช้อาจต้องการความช่วยเหลือ ตัวอย่างเช่น ภาพหน้าจอด้านล่างแสดงส่วนที่ผู้ใช้จำเป็นต้องให้ข้อมูลเฉพาะ

ใช้น้ำหนักภาพเพื่อถ่ายทอดความสำคัญ

องค์ประกอบที่สำคัญที่สุดบนหน้าจอควรมีน้ำหนักที่มองเห็นได้มากที่สุด การเพิ่มน้ำหนักให้กับองค์ประกอบสามารถทำได้ด้วยน้ำหนัก ขนาด และสีของฟอนต์

หลีกเลี่ยงศัพท์เฉพาะ

การสื่อสารที่ชัดเจนควรมีความสำคัญสูงสุดในแอพมือถือเสมอ ใช้สิ่งที่คุณรู้เกี่ยวกับกลุ่มเป้าหมายเพื่อพิจารณาว่าคำหรือวลีบางคำเหมาะสมหรือไม่

ทำให้การออกแบบสอดคล้องกัน

ความสม่ำเสมอเป็นหลักการพื้นฐานของการออกแบบ ความสม่ำเสมอขจัดความสับสน การรักษารูปลักษณ์โดยรวมที่สม่ำเสมอทั่วทั้งแอปเป็นสิ่งสำคัญ เกี่ยวกับแอพมือถือ ความสอดคล้องหมายถึงสิ่งต่อไปนี้:

• ความสม่ำเสมอของภาพ
  แบบอักษร ปุ่ม และป้ายกำกับต้องสอดคล้องกันทั่วทั้งแอป

• ความสม่ำเสมอในการทำงาน
  องค์ประกอบแบบอินเทอร์แอกทีฟควรทำงานเหมือนกันในทุกส่วนของแอป

• ความสม่ำเสมอภายนอก
  การออกแบบควรสอดคล้องกันในหลายผลิตภัณฑ์ วิธีนี้ทำให้ผู้ใช้สามารถนำความรู้เดิมไปใช้กับผลิตภัณฑ์อื่นได้

ต่อไปนี้คือคำแนะนำที่เป็นประโยชน์บางประการเกี่ยวกับวิธีทำให้การออกแบบสอดคล้องกัน:

• เคารพหลักเกณฑ์ของแพลตฟอร์ม
  แต่ละระบบปฏิบัติการมือถือมีแนวทางมาตรฐานสำหรับการออกแบบส่วนต่อประสาน: แนวทางส่วนต่อประสานกับมนุษย์ของ Apple และแนวทางการออกแบบวัสดุของ Google เมื่อออกแบบสำหรับแพลตฟอร์มดั้งเดิม ให้ปฏิบัติตามแนวทางการออกแบบของ OS เพื่อคุณภาพสูงสุด เหตุผลที่การปฏิบัติตามแนวทางการออกแบบนั้นมีความสำคัญง่ายมาก: ผู้ใช้จะคุ้นเคยกับรูปแบบการโต้ตอบของแต่ละ OS และสิ่งใดก็ตามที่ขัดกับหลักเกณฑ์จะทำให้เกิดความขัดแย้ง

• อย่าเลียนแบบองค์ประกอบ UI จากแพลตฟอร์มอื่น
  ในขณะที่คุณสร้างแอปสำหรับ Android หรือ iOS อย่าพกพาองค์ประกอบ UI จากแพลตฟอร์มอื่น ไอคอน องค์ประกอบการทำงาน (ช่องป้อนข้อมูล ช่องทำเครื่องหมาย สวิตช์) และแบบอักษรควรมีความรู้สึกดั้งเดิม ใช้องค์ประกอบดั้งเดิมให้มากที่สุด เพื่อให้ผู้คนเชื่อถือแอปของคุณ

• ให้แอพมือถือสอดคล้องกับเว็บไซต์
  นี่คือตัวอย่างความสอดคล้องภายนอก หากคุณมีบริการเว็บและแอปบนอุปกรณ์เคลื่อนที่ ตรวจสอบให้แน่ใจว่าทั้งสองบริการมีลักษณะที่คล้ายคลึงกัน ซึ่งจะทำให้ผู้ใช้สามารถเปลี่ยนระหว่างแอปบนอุปกรณ์เคลื่อนที่และเว็บบนอุปกรณ์เคลื่อนที่ได้อย่างราบรื่น ความไม่สอดคล้องกันในการออกแบบ (เช่น รูปแบบการนำทางที่แตกต่างกันหรือรูปแบบสีที่ต่างกัน) อาจทำให้เกิดความสับสน

ควบคุมผู้ใช้

รักษาองค์ประกอบเชิงโต้ตอบที่คุ้นเคยและคาดเดาได้

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

ปุ่ม "ย้อนกลับ" ควรทำงานอย่างถูกต้อง

ปุ่ม "ย้อนกลับ" ที่สร้างขึ้นอย่างไม่ถูกต้องอาจทำให้เกิดปัญหามากมายสำหรับผู้ใช้ ป้องกันสถานการณ์เมื่อแตะปุ่ม "ย้อนกลับ" ในกระบวนการหลายขั้นตอนจะนำผู้ใช้กลับไปที่หน้าจอหลัก

การออกแบบที่ดีทำให้ผู้ใช้ย้อนกลับและแก้ไขได้ง่ายขึ้น เมื่อผู้ใช้รู้ว่าสามารถดูข้อมูลที่พวกเขาให้ไว้หรือตัวเลือกที่พวกเขาเลือกได้อีกครั้ง จะช่วยให้ดำเนินการได้อย่างง่ายดาย

ข้อความแสดงข้อผิดพลาดที่มีความหมาย

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

ยกตัวอย่างหน้าจอสถานะข้อผิดพลาดจาก Spotify ไม่ได้ช่วยให้ผู้ใช้เข้าใจบริบทและไม่ช่วยให้พวกเขาพบคำตอบของคำถามว่า "ฉันจะทำอย่างไรกับมันได้บ้าง"

อย่าถือว่าผู้ใช้มีความชำนาญด้านเทคโนโลยีมากพอที่จะเข้าใจสิ่งต่างๆ บอกคนอื่นว่ามีอะไรผิดปกติในภาษาธรรมดาเสมอ ข้อความแสดงข้อผิดพลาดแต่ละข้อความควรแจ้งให้ผู้ใช้ทราบ:

• เกิดอะไรขึ้นและอาจเป็นเพราะเหตุใด
• ขั้นตอนต่อไปที่ผู้ใช้ควรทำเพื่อแก้ไขข้อผิดพลาดคืออะไร

ลองอ่าน "วิธีออกแบบสถานะข้อผิดพลาดสำหรับแอปบนอุปกรณ์เคลื่อนที่" สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดการข้อผิดพลาด

ออกแบบอินเทอร์เฟซที่เข้าถึงได้

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

ระวังตาบอดสี

4.5% ของประชากรโลกมีอาการตาบอดสี (ผู้ชาย 1 ใน 12 คน และผู้หญิง 1 ใน 200 คน) 4% มีอาการสายตาเลือนราง (1 ใน 30 คน) และ 0.6% เป็นคนตาบอด (1 ใน 188 คน) ง่ายที่จะลืมไปว่าเรากำลังออกแบบสำหรับผู้ใช้กลุ่มนี้ เนื่องจากนักออกแบบส่วนใหญ่ไม่ประสบปัญหาดังกล่าว

ผมขอยกตัวอย่างง่ายๆ ข้อความแสดงความสำเร็จและข้อผิดพลาดในแบบฟอร์มมือถือมักเป็นสีเขียวและสีแดงตามลำดับ แต่สีแดงและสีเขียวเป็นสีที่ได้รับผลกระทบมากที่สุดจากการขาดการมองเห็นสี ส่วนใหญ่คุณอาจเคยเห็นข้อความแสดงข้อผิดพลาดต่อไปนี้เมื่อกรอกแบบฟอร์ม: “ฟิลด์ที่มีเครื่องหมายสีแดงเป็นสิ่งจำเป็น”? แม้ว่าอาจดูเหมือนไม่ใช่เรื่องใหญ่ แต่ข้อความแสดงข้อผิดพลาดนี้รวมกับแบบฟอร์มในตัวอย่างด้านล่างอาจเป็นประสบการณ์ที่น่าผิดหวังอย่างมากสำหรับผู้ที่มีปัญหาด้านการมองเห็นสี

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

ทำให้แอนิเมชั่นเป็นตัวเลือก

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

ทำให้การนำทางเป็นเรื่องง่าย

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

ใช้ส่วนประกอบการนำทางมาตรฐาน

ควรใช้รูปแบบการนำทางมาตรฐาน เช่น แถบแท็บ (สำหรับ iOS) และลิ้นชักการนำทาง (สำหรับ Android) ผู้ใช้ส่วนใหญ่คุ้นเคยกับรูปแบบการนำทางทั้งสองแบบ และจะทราบวิธีใช้งานแอปของคุณโดยสัญชาตญาณ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบการนำทาง โปรดอ่านบทความ "รูปแบบพื้นฐานสำหรับการนำทางบนมือถือ: ข้อดีและข้อเสีย"

จัดลำดับความสำคัญของตัวเลือกการนำทาง

จัดลำดับความสำคัญของการนำทางตามวิธีที่ผู้ใช้โต้ตอบกับแอปของคุณ กำหนดระดับความสำคัญที่แตกต่างกัน (สูง กลาง ต่ำ) ให้กับงานของผู้ใช้ทั่วไป สร้างความโดดเด่นใน UI ให้กับเส้นทางและปลายทางที่มีระดับความสำคัญสูงและใช้งานบ่อย ใช้เส้นทางเหล่านั้นเพื่อกำหนดการนำทางของคุณ จัดระเบียบโครงสร้างข้อมูลของคุณในแบบที่ต้องการจำนวนการแตะ การปัด และหน้าจอขั้นต่ำ

อย่าผสมรูปแบบการนำทาง

เมื่อคุณเลือกรูปแบบการนำทางหลักสำหรับแอปของคุณ ให้ใช้อย่างสม่ำเสมอ ไม่ควรมีสถานการณ์ที่ส่วนใดของแอปของคุณมีแถบแท็บ ในขณะที่อีกส่วนหนึ่งมีลิ้นชักด้านข้าง

ทำให้การนำทางมองเห็นได้

อย่างที่ Jakob Nielsen กล่าว การจดจำบางสิ่งง่ายกว่าการจดจำ ลดโหลดหน่วยความจำของผู้ใช้โดยทำให้การดำเนินการและตัวเลือกปรากฏให้เห็น การนำทางควรพร้อมใช้งานตลอดเวลา ไม่ใช่แค่เมื่อเราคาดหวังว่าผู้ใช้ต้องการ

สื่อสารตำแหน่งปัจจุบัน

การไม่ระบุตำแหน่งปัจจุบันเป็นปัญหาที่พบบ่อยมากในเมนูแอปบนอุปกรณ์เคลื่อนที่จำนวนมาก "ฉันอยู่ที่ไหน?" เป็นหนึ่งในคำถามพื้นฐานที่ผู้ใช้ต้องตอบเพื่อนำทางให้ประสบความสำเร็จ ผู้คนควรรู้ว่าพวกเขาอยู่ที่ไหนในแอปของคุณเมื่อใดก็ได้

ใช้แอนิเมชั่นการทำงานเพื่อชี้แจงการเปลี่ยนผ่านของการนำทาง

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

ระวังการใช้ท่าทางสัมผัสใน UI

การใช้ท่าทางสัมผัสในการออกแบบการโต้ตอบสามารถดึงดูดใจได้ แต่ในกรณีส่วนใหญ่ เป็นการดีกว่าที่จะหลีกเลี่ยงสิ่งล่อใจนี้ เมื่อใช้ท่าทางสัมผัสเป็นตัวเลือกการนำทางหลัก สิ่งเหล่านี้อาจทำให้ UX แย่ได้ ทำไม? เพราะ ท่าทางจะเป็นตัวควบคุมที่ซ่อนอยู่

ตามที่ Thomas Joos ชี้ให้เห็นในบทความของเขา "Beyond the Button: Embracing the Gesture-Driven Interface" ข้อเสียที่ใหญ่ที่สุดของการใช้ท่าทางสัมผัสในอินเทอร์เฟซผู้ใช้คือเส้นโค้งการเรียนรู้ ทุกครั้งที่มีการแทนที่การควบคุมที่มองเห็นด้วยท่าทางสัมผัส เส้นโค้งการเรียนรู้ของแอปจะเพิ่มขึ้น สิ่งนี้เกิดขึ้นเนื่องจากท่าทางสัมผัสมีความสามารถในการค้นพบที่ต่ำกว่า — โดยจะถูกซ่อนอยู่เสมอ และผู้คนจำเป็นต้องสามารถระบุตัวเลือกเหล่านี้เพื่อใช้งาน นั่นเป็นเหตุผลว่าเหตุใดจึงจำเป็นต้องใช้ท่าทางสัมผัสที่ยอมรับกันอย่างแพร่หลายเท่านั้น (ท่าทางที่ผู้ใช้คาดหวังในแอปของคุณ)

เมื่อพูดถึงการใช้ท่าทางสัมผัสใน UI ให้ปฏิบัติตามกฎง่ายๆ สองสามข้อ:

• ใช้ท่าทางมาตรฐาน
  ตาม "มาตรฐาน" ฉันหมายถึงท่าทางสัมผัสที่เป็นธรรมชาติที่สุดสำหรับแอปในหมวดหมู่ของคุณ ผู้คนคุ้นเคยกับท่าทางมาตรฐาน ดังนั้นจึงไม่จำเป็นต้องใช้ความพยายามพิเศษในการค้นหาหรือจดจำ
• นำเสนอท่าทางสัมผัสเป็นส่วนเสริม ไม่ใช่แทนตัวเลือกการนำทางที่มองเห็นได้
  ท่าทางสัมผัสอาจทำงานเป็นทางลัดสำหรับการนำทาง แต่ไม่ใช่เพื่อแทนที่เมนูที่มองเห็นได้ทั้งหมด ดังนั้น ให้เสนอวิธีนำทางที่เรียบง่ายและมองเห็นได้เสมอ แม้ว่าจะหมายถึงการดำเนินการพิเศษบางอย่างก็ตาม

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ท่าทางสัมผัสใน UI ของคุณ โปรดอ่าน "ท่าทางสัมผัสในแอปและประสบการณ์ผู้ใช้แอปบนอุปกรณ์เคลื่อนที่"

เน้นที่ประสบการณ์ครั้งแรก

ประสบการณ์ครั้งแรกคือการสร้างหรือทำลายส่วนหนึ่งของแอปบนอุปกรณ์เคลื่อนที่ คุณจะได้รับหนึ่งช็อตในครั้งแรกที่ประทับใจ และหากคุณล้มเหลว มีความเป็นไปได้สูงที่ผู้ใช้จะไม่เปิดแอปของคุณอีก (การวิจัยโดย Localytics แสดงให้เห็นว่า 24% ของผู้ใช้ไม่เคยกลับมาที่แอปหลังจากใช้งานครั้งแรก)

หลีกเลี่ยงกำแพงการลงชื่อเข้าใช้

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

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

ออกแบบประสบการณ์การเริ่มต้นใช้งานที่ดี

ในบริบทของ UX บนมือถือ การมอบประสบการณ์การเริ่มต้นใช้งานที่ยอดเยี่ยมเป็นรากฐานสำหรับการรักษาผู้ใช้ไว้ เป้าหมายของการเริ่มต้นใช้งานคือการแสดงคุณค่าที่แอปของคุณมอบให้

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

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

พิจารณาอ่าน "บทบาทของสถานะว่างในการปฐมนิเทศผู้ใช้" สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งาน

ไม่ต้องขอข้อมูลการตั้งค่าล่วงหน้า

ขั้นตอนการตั้งค่าที่บังคับทำให้เกิดความขัดแย้งและอาจนำไปสู่การละทิ้งแอป เมื่อผู้ใช้เปิดแอป พวกเขาคาดหวังว่าแอปจะใช้งานได้ ดังนั้น ออกแบบแอปของคุณสำหรับผู้ใช้ส่วนใหญ่ และให้ผู้ที่ต้องการการกำหนดค่าที่แตกต่างออกไป ปรับการตั้งค่าของตนให้ตรงกับความต้องการได้ทุกเมื่อที่ต้องการ

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

หลีกเลี่ยงการขออนุญาตตั้งแต่เริ่มต้น

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

แต่สำหรับกรณีอื่น ๆ ขอสิทธิ์ในบริบท ผู้ใช้มักจะให้สิทธิ์หากถูกถามระหว่างงานที่เกี่ยวข้อง

เคล็ดลับ :

• ขอเฉพาะสิ่งที่แอปของคุณต้องการอย่างชัดเจน
  อย่าขอสิทธิ์ที่เป็นไปได้ทั้งหมด คงจะน่าสงสัยหากแอพร้องขอบางสิ่งที่ไม่จำเป็นอย่างชัดเจน ตัวอย่างเช่น แอปนาฬิกาปลุกที่ขออนุญาตเข้าถึงรายชื่อผู้ติดต่อของคุณจะถูกสงสัย

• อธิบายว่าเหตุใดแอปของคุณจึงต้องการข้อมูล หากไม่ชัดเจน
  บางครั้งคุณจำเป็นต้องให้บริบทเพิ่มเติมสำหรับคำขอของคุณ ด้วยเหตุนี้ คุณจึงสามารถออกแบบการแจ้งเตือนที่กำหนดเองเพื่อขออนุญาตได้

ทำให้แอปของคุณปรากฏอย่างรวดเร็วและตอบสนอง

เวลาในการโหลดมีความสำคัญอย่างยิ่งสำหรับ UX ในขณะที่เทคโนโลยีก้าวหน้าไป เราก็หมดความอดทนมากขึ้น และวันนี้ 47% ของผู้ใช้คาดหวังว่าหน้าเว็บจะโหลดได้ภายใน 2 วินาทีหรือน้อยกว่า

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

เน้นที่การโหลดเนื้อหาในบริเวณที่มองเห็นได้ของหน้าจอ

โหลดเนื้อหาให้เพียงพอเพื่อให้เต็มหน้าจอเมื่อเปิดหน้า เนื้อหาที่มีอยู่ในการเลื่อนควรโหลดต่อไปในพื้นหลัง ประโยชน์ของแนวทางนี้คือ ผู้ใช้จะมีส่วนร่วมในการอ่านเนื้อหาเริ่มต้น และในบางกรณี จะไม่สังเกตเห็นว่าเนื้อหายังคงโหลดอยู่

ทำให้ชัดเจนเมื่อมีการโหลดเกิดขึ้น

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

ลองอ่าน “แนวทางปฏิบัติที่ดีที่สุดสำหรับตัวบ่งชี้ความคืบหน้าแบบเคลื่อนไหว” สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวบ่งชี้การโหลด

เสนอความฟุ้งซ่านของภาพ

หากแอปให้ผู้ใช้ดูสิ่งที่น่าสนใจขณะรอ ผู้ใช้จะให้ความสนใจกับการรอน้อยลง ดังนั้น เพื่อให้แน่ใจว่าผู้คนจะไม่เบื่อในขณะที่รออะไรบางอย่างเกิดขึ้น ให้เบี่ยงเบนความสนใจ ตัวบ่งชี้การรอแบบเคลื่อนไหวที่ดีสามารถรักษาความสนใจของผู้ใช้ไว้ได้ในขณะที่รอ

เคล็ดลับ : ให้อายุยืนยาวในใจ แม้แต่แอนิเมชั่นที่ดีก็อาจสร้างความรำคาญได้เมื่อมีการใช้งานมากเกินไป เมื่อออกแบบแอนิเมชั่น ให้ถามตัวเองว่า “แอนิเมชั่นจะน่ารำคาญไหมเมื่อใช้งานครั้งที่ร้อย หรือมันชัดเจนและไม่สร้างความรำคาญในระดับสากล”

หน้าจอโครงกระดูก

หน้าจอโครงกระดูก (เช่น ที่เก็บข้อมูลชั่วคราว) เป็นเวอร์ชันว่างของหน้าที่โหลดข้อมูลทีละน้อย

หน้าจอโครงร่างจะปรากฏขึ้นทันทีที่แอปของคุณเริ่มโหลดข้อมูล ทำให้ผู้ใช้รู้สึกว่าแอปของคุณรวดเร็วและตอบสนอง ต่างจากตัวบ่งชี้การโหลดซึ่งบ่งบอกว่ามีบางอย่างเกิดขึ้น หน้าจอโครงกระดูกมุ่งเน้นไปที่ความคืบหน้าจริง

ปรับเนื้อหาให้เหมาะสมสำหรับมือถือ

เนื้อหามีบทบาทสำคัญในการออกแบบ ในกรณีส่วนใหญ่ สาเหตุหลักที่ทำให้ผู้คนใช้แอปคือเนื้อหาที่มีให้ แต่ยังไม่เพียงพอที่จะมีเนื้อหาที่ชัดเจนและมีฝีมือดี เนื้อหาต้องเข้าใจง่าย

ทำให้ข้อความอ่านง่าย

เมื่อเรานึกถึงเนื้อหา ในกรณีส่วนใหญ่ เราหมายถึงการพิมพ์ ดังที่ Oliver Reichenstein กล่าวไว้ในบทความเรื่อง “Web Design Is 95% Typography”:

“การเพิ่มประสิทธิภาพการพิมพ์คือการเพิ่มประสิทธิภาพในการอ่าน การเข้าถึง การใช้งาน(!) ความสมดุลของกราฟิกโดยรวม”

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

ประการแรก คำแนะนำที่เป็นประโยชน์บางประการเกี่ยวกับความชัดเจน:

• ขนาดตัวอักษร
  โดยทั่วไป สิ่งที่มีขนาดเล็กกว่า 16 พิกเซล (หรือ 11 จุด) เป็นสิ่งที่ท้าทายในการอ่านบนหน้าจอใดๆ

• ตระกูลอักษร
  ผู้ใช้ส่วนใหญ่ชอบแบบอักษรที่ชัดเจนและอ่านง่าย การเดิมพันที่ปลอดภัยคือแบบอักษรเริ่มต้นของระบบ (Apple iOS ใช้แบบอักษร San Francisco; Google Android ใช้ Roboto)

• ตัดกัน
  ข้อความสีอ่อน (เช่น สีเทาอ่อน) อาจดูน่าดึงดูดใจ แต่ผู้ใช้จะรู้สึกลำบากในการอ่าน โดยเฉพาะกับพื้นหลังสีอ่อน ตรวจสอบให้แน่ใจว่าแบบอักษรและพื้นหลังมีความแตกต่างกันมากเพื่อให้อ่านง่าย แนวทางการเข้าถึงเนื้อหาเว็บของ WC3 ให้คำแนะนำอัตราส่วนคอนทราสต์สำหรับรูปภาพและข้อความ

และตอนนี้ คำแนะนำบางประการสำหรับการอ่านง่าย:

• หลีกเลี่ยงตัวพิมพ์ใหญ่ทั้งหมด
  ตัวพิมพ์ใหญ่ทั้งหมด — หมายถึงข้อความที่มีตัวพิมพ์ใหญ่ทั้งหมด — ใช้ได้ดีในบริบทที่ไม่เกี่ยวข้องกับการอ่านอย่างตั้งใจ (เช่น ตัวย่อและโลโก้) แต่ให้หลีกเลี่ยงเมื่อข้อความของคุณต้องอ่านอย่างหนัก

• จำกัดความยาวของบรรทัดข้อความ
  หลักการทั่วไปที่ดีคือการใช้อักขระ 30 ถึง 40 ตัวต่อบรรทัดสำหรับมือถือ

• อย่าบีบเส้น
  การเว้นวรรคระหว่างข้อความช่วยผู้ใช้ในการอ่าน และสร้างความรู้สึกว่าไม่มีข้อมูลให้รับมากนัก

ภาพคุณภาพระดับ HD และอัตราส่วนภาพที่เหมาะสม

การเพิ่มขึ้นของอุปกรณ์ที่มีหน้าจอความละเอียดสูงกำหนดมาตรฐานคุณภาพของภาพ รูปภาพไม่ควรปรากฏเป็นพิกเซลบนหน้าจอ HD

รูปภาพควรปรากฏในอัตราส่วนที่ถูกต้องเสมอ เพื่อไม่ให้ภาพดูบิดเบี้ยว ภาพที่ขยายกว้างหรือยาวเกินไปเพียงเพื่อให้พอดีกับพื้นที่จะดูไม่สวยและไม่เหมาะสม

ความท้าทายล่าสุดที่นักออกแบบอุปกรณ์พกพาต้องเผชิญคือการเพิ่มประสิทธิภาพ UX สำหรับ iPhone X การออกแบบสำหรับ iPhone X ต้องใช้อาร์ตบอร์ดขนาดต่างจาก iPhone อื่นๆ (คุณต้องมีภาพความละเอียด 375 x 812 จุดที่ 3x)

ลองอ่าน “การออกแบบแอพสำหรับ iPhone X: สิ่งที่นักออกแบบ UX ทุกคนต้องรู้เกี่ยวกับอุปกรณ์ล่าสุดของ Apple” สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบสำหรับ iPhone X

เนื้อหาวิดีโอได้รับการปรับให้เหมาะสมสำหรับโหมดแนวตั้ง

วิดีโอกำลังกลายเป็นวิธีการมาตรฐานสำหรับการบริโภคเนื้อหาสำหรับผู้ใช้จำนวนมากอย่างรวดเร็ว ตาม YouTube การบริโภควิดีโอบนมือถือเพิ่มขึ้น 100% ทุกปี ภายในปี 2020 กว่า 75% ของปริมาณข้อมูลมือถือทั่วโลกจะเป็นเนื้อหาวิดีโอ ซึ่งหมายความว่าจำเป็นต้องปรับเนื้อหาวิดีโอให้เหมาะสมสำหรับโหมดแนวตั้ง

จากข้อมูลของ ScientiaMobile ผู้ใช้ 94% ใช้อุปกรณ์มือถือในโหมดแนวตั้ง หากแอปของคุณมีเนื้อหาวิดีโอ ควรปรับให้เหมาะสมเพื่อให้ผู้ใช้ดูในโหมดแนวตั้งได้

ออกแบบเพื่อสัมผัส

การออกแบบสำหรับการสัมผัสมีเป้าหมายในการลดจำนวนอินพุตที่ไม่ถูกต้องและทำให้การโต้ตอบกับแอปสะดวกสบายยิ่งขึ้น

Design For Fingers, Not Cursors

When you're designing actionable elements in a mobile interface, it's vital to make targets big enough so that they're easy for users to tap. Mistaken taps often happen due to small touch controls.

When designing a touch target, you can rely on the MIT Touch Lab's study (PDF) to choose a proper size for interactive elements. This study found that the average size of finger pads are between 10 and 14 mm and fingertips are 8 to 10 mm, making 10 by 10 mm a good minimum touch target size.

Not only is the size of the target important, but it's also essential to have the right amount of space between targets. If multiple touch targets are near each other (for example, “Agree” and “Disagree” buttons), ensure that there is good amount of space between them.

Consider Thumb Zone

Designing for thumbs isn't only about making targets big enough, but also about considering the way we hold our devices. A lot of users hold their phone with one hand. Only a part of the screen would be a genuinely effortless territory for their thumbs. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Below, you can see what the safe zone looks like on a modern mobile device.

The bigger the display, the more of the screen is less easily accessible.

Consider all zones when designing for mobile:

• The green zone is the best place for navigation options or frequent interactive actions (such as call-to-action buttons).

• The red zone is the best place for potential danger options (such as “Delete” or “Erase”). Users are less likely to trigger this option accidentally.

Feedback on Interaction

In the physical world, objects respond to our interaction. People expect a similar level of responsiveness from digital UI controls. You'll need to provide instant feedback on every user interaction. If your app doesn't provide feedback, the user will wonder if it has frozen or if they missed the target. The feedback could be visual (highlighting a tapped button) or tactile (a device vibration on input).

Humanize The Digital Experience

UX isn't only about usability; it's mostly about feelings. And when we think about what makes us feel great, we often think about well-crafted design.

Personalized Experience

Personalization is one of the most critical aspects of mobile apps today. It's an opportunity to connect with users and provide the information they need in a way that feels genuine.

There are countless ways to improve the mobile UX by incorporating personalization. It's possible to offer personalized content depending on the user's location, their past searches and their past purchases. For example, if your users prefer to purchase particular groups of products each month, an app might track that and offer them special deals on those types of products.

Starbucks' mobile app is an excellent example that follows this approach. The app uses information provided by users (for example, the type of coffee they usually order) to craft special offers.

Delightful Animation

Unlike functional animation, which is used to improve the clarity of a user interface, delightful animation is used to make an interface feel human. This type of animation makes it clear that the people who crafted the app care about their users.

เพิ่มประสิทธิภาพการแจ้งเตือนแบบพุช

การแจ้งเตือนที่น่ารำคาญเป็นสาเหตุอันดับ 1 ที่ผู้ใช้ถอนการติดตั้งแอปบนอุปกรณ์เคลื่อนที่ (ตาม 71% ของผู้ตอบแบบสอบถาม)

อย่าส่งการแจ้งเตือนแบบพุชเพียงเพราะคุณทำได้ การแจ้งเตือนแต่ละครั้งควรมีค่าและตรงเวลา

ผลักดันคุณค่า

เมื่อผู้ใช้เริ่มใช้แอปของคุณ พวกเขาจะไม่รังเกียจที่จะได้รับการแจ้งเตือน ตราบใดที่มูลค่าที่พวกเขาได้รับนั้นมากกว่าการหยุดชะงักเพียงพอ ผู้ใช้เกือบ 50% รู้สึกขอบคุณสำหรับการแจ้งเตือนที่พวกเขาสนใจ การปรับเนื้อหาให้เป็นส่วนตัวเพื่อสร้างแรงบันดาลใจและความสุขเป็นสิ่งสำคัญ Netflix เป็นตัวอย่างที่ยอดเยี่ยมของบริษัทที่ "ผลักดันคุณค่า" ใช้ข้อมูลการดูอย่างระมัดระวังเพื่อนำเสนอคำแนะนำที่ปรับแต่งได้

หลีกเลี่ยงการส่งการแจ้งเตือนจำนวนมากในระยะเวลาอันสั้น

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

เวลาการแจ้งเตือนของคุณ

สิ่งที่คุณพูดไม่เพียงแต่สำคัญ แต่ยังสำคัญเมื่อคุณพูดด้วย ห้ามส่งข้อความแบบพุชในช่วงเวลาแปลกๆ (เช่น กลางดึก) เวลาที่ดีที่สุดสำหรับการแจ้งเตือนแบบพุชคือช่วงที่มีการใช้งานมือถือสูงสุด: ตั้งแต่ 18:00 น. ถึง 22:00 น.

พิจารณาช่องทางอื่นในการส่งข้อความของคุณ

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

ปรับให้เหมาะสมสำหรับมือถือ

การออกแบบเพื่อการหยุดชะงัก

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

เมื่อเกิดการหยุดชะงัก แอปของคุณควรบันทึกสถานะปัจจุบัน (บริบท) และอนุญาตให้ผู้ใช้ดำเนินการต่อจากที่ค้างไว้ ซึ่งจะทำให้ผู้ใช้กลับมามีส่วนร่วมกับแอปอีกครั้งได้ง่ายขึ้นเมื่อพวกเขากลับมาที่แอปหลังการหยุดชะงัก

ใช้ประโยชน์จากความสามารถของอุปกรณ์

อุปกรณ์เคลื่อนที่มีเซ็นเซอร์จำนวนมาก (กล้อง การติดตามตำแหน่ง มาตรความเร่ง) ที่สามารถนำมาใช้ปรับปรุง UX ได้ นี่เป็นเพียงคุณสมบัติบางส่วนที่คุณสามารถใช้เพื่อดำเนินการดังกล่าว:

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

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

• การตรวจสอบไบโอเมตริกซ์
  เป็นไปได้ที่จะลดจำนวนขั้นตอนที่จำเป็นในการเข้าสู่ระบบแอพโดยใช้คุณสมบัติเช่นการเข้าสู่ระบบด้วยลายนิ้วมือหรือการระบุใบหน้า

เคล็ดลับ : คุณสามารถดูคำแนะนำที่นำไปใช้ได้จริงเกี่ยวกับวิธีใช้ Face ID ของ Apple ได้ในบทความ "การออกแบบแอปสำหรับ iPhone X: สิ่งที่นักออกแบบ UX ทุกคนต้องรู้เกี่ยวกับอุปกรณ์ล่าสุดของ Apple"

มุ่งมั่นสร้างประสบการณ์หลากหลายช่องทาง

อย่าคิดว่าแอพมือถือของคุณเป็นประสบการณ์ที่แยกออกมา เมื่อพูดถึงการสร้างเส้นทางของผู้ใช้ เป้าหมายสูงสุดคือการสร้างประสบการณ์ที่ราบรื่นในทุกอุปกรณ์ ผู้ใช้ควรเปลี่ยนไปใช้สื่ออื่นและเดินทางต่อได้

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

ปรับการออกแบบมือถือให้เข้ากับตลาดเกิดใหม่

จากข้อมูลของ Google ผู้ใช้ใหม่กว่าพันล้านรายคาดว่าจะออนไลน์ในอีกไม่กี่ปีข้างหน้า และส่วนใหญ่จะมาจากตลาดเกิดใหม่ (หรือที่เรียกว่าประเทศที่เน้นมือถือเป็นหลัก เช่น อินเดีย อินโดนีเซีย บราซิล และไนจีเรีย) พวกเขาจะเข้าใช้งานผ่านโทรศัพท์มือถือ ผู้ใช้เหล่านี้จะมีประสบการณ์และความคาดหวังที่แตกต่างจากผู้ที่อยู่ในสหรัฐอเมริกาและยุโรปอย่างมาก

หากคุณสนใจที่จะก้าวไปสู่ระดับโลก ควรพิจารณาประสบการณ์ของพวกเขาด้วย

การเชื่อมต่ออินเทอร์เน็ตไม่ดี

ในสหรัฐอเมริกาและยุโรป ผู้ใช้คุ้นเคยกับการเชื่อมต่อที่แพร่หลาย แต่นั่นไม่เป็นความจริงทั่วโลกอย่างแน่นอน ผลิตภัณฑ์ในตลาดเกิดใหม่จะต้องสามารถทำงานผ่านการเชื่อมต่อที่ช้าหรือไม่ต่อเนื่อง เครือข่ายอาจเปลี่ยนจาก Wi-Fi เป็น 3G เป็น 2G เป็นไม่มีการเชื่อมต่อเลย ทั้งนี้ขึ้นอยู่กับตำแหน่งของบุคคล และผลิตภัณฑ์ของคุณจะต้องรองรับได้

หากคุณวางแผนที่จะออกแบบสำหรับตลาดดังกล่าว ให้พิจารณาสิ่งต่อไปนี้:

• ตรวจสอบให้แน่ใจว่าผลิตภัณฑ์ของคุณทำงานได้เมื่อไม่ได้เชื่อมต่อกับอินเทอร์เน็ตเลย อนุญาตให้แคชข้อมูล

• เพิ่มประสิทธิภาพผลิตภัณฑ์ของคุณเพื่อการโหลดที่รวดเร็ว ลดขนาดหน้าโดยรักษารูปภาพและเนื้อหาที่มีน้ำหนักอื่นๆ ให้เหลือน้อยที่สุด และลดขนาดของเนื้อหานั้น

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

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

จำกัดข้อมูล

ในตลาดเกิดใหม่ประมาณ 95% ผู้คนพึ่งพาข้อมูลมือถือแบบเติมเงินที่มีราคาแพงเกือบทั้งหมด ผู้คนซื้อข้อมูลในปริมาณคงที่ และหลายคนสามารถซื้อข้อมูลได้เพียง 250 MB ต่อเดือนเท่านั้น

ผู้ใช้เหล่านี้ชื่นชมความโปร่งใสในการทำความเข้าใจการใช้ข้อมูล พวกเขายังให้ความสำคัญกับความสามารถในการควบคุมว่าจะดาวน์โหลดผลิตภัณฑ์ผ่าน Wi-Fi หรือใช้ข้อมูล

ด้านล่างนี้ คุณสามารถดูตัวอย่างอื่นจาก YouTube Go หลังจากเลือกวิดีโอแล้ว ผู้ใช้สามารถเลือกคุณภาพของวิดีโอได้ แอปช่วยให้พวกเขาทราบล่วงหน้าว่าจะใช้ข้อมูลไปเท่าใดก่อนที่จะดำเนินการใดๆ

ความสามารถของอุปกรณ์ที่จำกัด

สมาร์ทโฟนในประเทศที่เน้นอุปกรณ์พกพาเป็นหลักมีความสามารถที่แตกต่างจาก Pixel และ iPhone ที่ได้รับความนิยมในสหรัฐอเมริกาอย่างมาก อุปกรณ์ในตลาดเกิดใหม่ส่วนใหญ่มีราคาต่ำกว่า $100 และอาจมาพร้อมกับพื้นที่จัดเก็บและกำลังประมวลผลที่จำกัด ตรวจสอบให้แน่ใจว่าผลิตภัณฑ์ที่คุณออกแบบใช้งานได้กับอุปกรณ์และซอฟต์แวร์ระดับล่างรุ่นเก่า

สุนทรียศาสตร์ท้องถิ่น

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

ข้อมูลเฉพาะของ Region

เมื่อ Google ปรับ Google Maps สำหรับอินเดีย ถือว่าอินเดียเป็นตลาดรถสองล้อที่ใหญ่ที่สุดในโลก และผู้ขับขี่รถจักรยานยนต์และสกู๊ตเตอร์หลายล้านคนมีความต้องการที่แตกต่างจากผู้ขับขี่รถยนต์ เปิดตัวโหมดสองล้อในแผนที่ โหมดนี้แสดงเส้นทางการเดินทางที่ใช้ทางลัดซึ่งรถยนต์และรถบรรทุกเข้าถึงไม่ได้

การทดสอบและข้อเสนอแนะ

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

วงข้อเสนอแนะ

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

การออกแบบเป็นกระบวนการที่ไม่มีวันสิ้นสุด

เป็นเรื่องที่ยุติธรรมที่จะบอกว่าการออกแบบเป็นกระบวนการของการปรับปรุงอย่างต่อเนื่อง ในฐานะผู้ออกแบบผลิตภัณฑ์ เราใช้การวิเคราะห์และคำติชมของผู้ใช้เพื่อปรับปรุงประสบการณ์อย่างต่อเนื่อง

เครื่องมือและแหล่งข้อมูลที่เป็นประโยชน์สำหรับนักออกแบบ

ตัวตรวจสอบความคมชัดของสี

น่าแปลกใจที่แอพมือถือกี่แอพไม่ผ่านการทดสอบ AA อย่าเป็นหนึ่งในนั้น! จำเป็นอย่างยิ่งที่จะต้องตรวจสอบความสามารถในการเข้าถึงของคอนทราสต์ของสีของคุณ ใช้ Color Contrast Checker ของ WebAIM เพื่อทดสอบการผสมสี

ชุด UI สำหรับ Adobe XD

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

บทสรุป

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

บทความนี้เป็นส่วนหนึ่งของชุดการออกแบบ UX ที่สนับสนุนโดย Adobe Adobe XD สร้างขึ้นสำหรับกระบวนการออกแบบ UX ที่รวดเร็วและลื่นไหล เนื่องจากช่วยให้คุณเปลี่ยนจากแนวคิดไปสู่การสร้างต้นแบบได้เร็วยิ่งขึ้น ออกแบบ สร้างต้นแบบ และแชร์ ทั้งหมดในแอปเดียว คุณสามารถดูโปรเจ็กต์ที่สร้างแรงบันดาลใจอื่นๆ ที่สร้างด้วย Adobe XD บน Behance และสมัครรับจดหมายข่าวการออกแบบประสบการณ์ของ Adobe เพื่อรับทราบข้อมูลล่าสุดและรับทราบเกี่ยวกับแนวโน้มล่าสุดและข้อมูลเชิงลึกสำหรับการออกแบบ UX/UI