5 เคล็ดลับ Mobile Ux นักออกแบบทุกคนควรปฏิบัติตาม

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

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

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

เน้นที่ระยะห่างขององค์ประกอบการออกแบบ

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

ข้อผิดพลาดทั่วไปในการใช้งานอุปกรณ์เคลื่อนที่ใน Google Search Console คือ "องค์ประกอบที่คลิกได้อยู่ใกล้กันเกินไป"

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

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

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

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

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

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

ตรวจสอบให้แน่ใจว่าข้อความและแบบอักษรอ่านง่าย

นอกเหนือจากการเว้นวรรค ข้อผิดพลาดทั่วไปในการใช้งานอุปกรณ์เคลื่อนที่ในรายงาน Google Search Console ก็คือ “ข้อความมีขนาดเล็กเกินกว่าจะอ่านได้” แม้ว่านักพัฒนาจะสามารถปรับขนาดฟอนต์ได้ในบางแง่มุม แต่ก็มีแนวทางปฏิบัติที่ดีที่สุดสำหรับ UX หลายประการที่ทีมออกแบบสามารถนำไปใช้ได้ตั้งแต่ต้นในแง่ของความสามารถในการอ่าน

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

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

ในการออกแบบของคุณ คุณยังสามารถเพิ่มความสูงของบรรทัดระหว่างบรรทัดของข้อความเพื่อเพิ่มความสามารถในการอ่านของหน้า

เมื่อคุณตัดสินใจเลือกแบบอักษรและขนาดแล้ว คุณต้องพิจารณาอัตราส่วนคอนทราสต์ของสีด้วย

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

นอกจากนี้ยังมีบทบาทในการช่วยสำหรับการเข้าถึงและการสร้างเว็บไซต์ที่สอดคล้องกับ ADA ตามมาตรฐาน WCAG 2.1 แนะนำให้ใช้อัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่

ตรวจสอบให้แน่ใจว่าโฮเวอร์โอเวอร์และแอนิเมชั่นเป็นไปตามแนวทางปฏิบัติที่ดีที่สุด

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

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

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

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

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

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

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

วางแผนการจัดวางป๊อปอัปและองค์ประกอบของบุคคลที่สาม

มีการถกเถียงกันอยู่เสมอว่าควรใช้แบบฟอร์มป๊อปอัปบนเว็บไซต์หรือไม่ และควรปรับใช้กับอุปกรณ์พกพาหรือไม่

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

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

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

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

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

พิจารณาการออกแบบและการจัดวางแบบฟอร์มอีกครั้ง

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

เมื่อสร้างการนำทางเมนูมือถือ ให้พิจารณารวมหมายเลขโทรศัพท์ "คลิกเพื่อโทร" ไว้ในส่วนหัว เพื่อให้ผู้เข้าชมสามารถเข้าถึงธุรกิจได้อย่างง่ายดาย

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

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

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

บทสรุป

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

ถัดไป: สร้างชุดทักษะการออกแบบเว็บของคุณด้วยหลักสูตรออนไลน์ที่เป็นประโยชน์!

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

บทความนี้มีรายชื่อหลักสูตรออนไลน์ที่ดีที่สุดสำหรับนักออกแบบเว็บไซต์ (+ราคาเท่าไร) ดังนั้นคุณจึงไม่ต้องเสียเวลาไปกับการค้นหาตัวเลือกที่มีทั้งหมดอีกต่อไป!