วิธีการออกแบบสำหรับ UX บนมือถือที่ยอดเยี่ยม

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

มาดูสถิติกัน

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

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

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

ลองมาดูกัน

วิธีการออกแบบสำหรับ UX บนมือถือที่ยอดเยี่ยม: สถิติเป็นอย่างไร

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

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

นี่เป็นอีกหนึ่งสถิติที่น่าสนใจมากที่เปิดเผยจริง ๆ มากกว่าที่ดูเหมือนเมื่อมองแวบแรก

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

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

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

มันอยู่ในมือคุณ นี่คือสิ่งที่ต้องทำ

ออกแบบสำหรับนิ้วโป้ง…แต่ไม่ใช่สำหรับนิ้วโป้งเป็น หลัก

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

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

อย่างไรก็ตาม ภูมิปัญญาดั้งเดิมนี้เป็นสิ่งที่ผิดจริง ๆ เพราะสันนิษฐานว่าผู้คนใช้มือเดียวหรือใช้มือเดียวเป็นหลักในการสั่งงานโทรศัพท์

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

หกวิธีคือ:

• Cradled (มือข้างหนึ่งรองรับโทรศัพท์ในขณะที่อีกมือแตะนิ้วโป้ง)
• กดค้างไว้แล้วสัมผัส (มือข้างหนึ่งรองรับโทรศัพท์ในขณะที่นิ้วชี้ของอีกมือแตะ)
• สองมือสำหรับการวางแนวนอน (ลองนึกดูว่าคุณจะถืออุปกรณ์เล่นเกมพกพาอย่าง Nintendo 2DS XL ได้อย่างไร)
• มือเดียว – ลำดับแรก (มือข้างหนึ่งถือโทรศัพท์ในขณะที่นิ้วโป้งบนมือข้างเดียวกันแตะ)
• มือเดียว – ลำดับที่สอง (มือข้างหนึ่งถือโทรศัพท์ในขณะที่นิ้วโป้งบนมือข้างเดียวกันแตะ แต่จากตำแหน่งเริ่มต้นที่สูงกว่า)
• สองมือสำหรับการวางแนวตั้ง (ลองนึกดูว่าคุณจะถืออุปกรณ์เล่นเกมพกพาอย่างไร คราวนี้ เหมือน Nintendo Gameboy รุ่นเก่าๆ)

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

• การแตะที่ลิงก์ – ส่วนใหญ่กดค้างไว้แล้วแตะหรือเปล
• กล่องกาเครื่องหมาย – ส่วนใหญ่วางหรือกดค้างไว้แล้วแตะ
• การพิมพ์ – ส่วนใหญ่ใช้สองนิ้วหรือนิ้วโป้งพร้อมกันหรือกดค้างไว้แล้วแตะ
• การเลื่อนแบบสั้น – ส่วนใหญ่กดค้างไว้แล้วแตะหรือวาง
• เลื่อนอีกต่อไป - ส่วนใหญ่วางหรือกดค้างไว้แล้วแตะ

บรรทัดด้านล่าง: ออกแบบไซต์บนมือถือของคุณเพื่อรองรับรูปแบบต่างๆ ที่ผู้คนถือโทรศัพท์ของตน

ปุ่มที่ใหญ่กว่าจะดีกว่า

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

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

Err ด้านที่ใหญ่กว่าจะดีกว่า

ปุ่มที่ใหญ่ขึ้นช่วยให้ UX ของคุณราบรื่นขึ้นสำหรับผู้ซื้อ ลูกค้า ผู้เยี่ยมชม ฯลฯ

นี่ทำให้เกิดคำถามว่าใหญ่แค่ไหนกันแน่?

ตามแนวทางการออกแบบ Material Touch Target Size ของ Google ปุ่มมือถือควรมีขนาดหน้าจอสัมผัสอยู่ระหว่าง 7 ถึง 10 มม. กล่าวคือ ปุ่มควรมีขนาดประมาณ 1 เซนติเมตร ไม่ว่าจะปรากฏบนหน้าจอใดก็ตาม สิ่งนี้ทำให้มั่นใจได้ถึงความสมดุลที่ยอดเยี่ยมระหว่าง:

• ความหนาแน่นของข้อมูล
• “การกำหนดเป้าหมาย” ขององค์ประกอบอินเทอร์เฟซผู้ใช้

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

จัดลำดับความสำคัญของเนื้อหาที่สำคัญที่สุด

คำตอบสำหรับคำถาม วิธีออกแบบ UX บนมือถือที่ยอดเยี่ยมได้อย่างไร บางครั้งอยู่ในสิ่งที่คุณลบแทนที่จะบวก ในกรณีของเนื้อหาบนหน้าจอ กฎนี้ใช้ 100%

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

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

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

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

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

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

มุ่งเน้นไปที่ผู้ใช้ปลายทาง

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

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

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