เทรนด์ทั้งหมดคุ้มค่าหรือไม่ 5 อันดับแรก ข้อผิดพลาด UX ที่พบบ่อยที่สุดที่นักออกแบบเว็บไซต์ทำ

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

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

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

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

มาดูข้อผิดพลาดทั่วไปของ UX กัน

การออกแบบเว็บข้อผิดพลาด UX ทั่วไปครั้งที่ 1: ส่วนหัวคงที่ขนาดใหญ่

สามารถดูส่วนหัวที่เหนียวเหนอะได้บนเว็บไซต์ “บล็อกการสร้างแบรนด์” และเมนูการนำทางที่มีตำแหน่งตายตัวและใช้พื้นที่เป็นจำนวนมาก พวกเขาติดอยู่ที่ด้านบนของหน้าต่างเบราว์เซอร์ ("ส่วนหัวที่เหนียว") และมักจะบล็อกเนื้อหาเมื่อเลื่อนไปด้านล่าง

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

ส่วนหัว Sticky Nav อาจใหญ่เกินไปสำหรับความสบาย

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

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

นี่คือตัวอย่างส่วนหัวที่เหนียวแน่น: หน้าโปรไฟล์ผู้เล่นของ ATP ใน Roger Federer

ส่วนหัวติดหนึบของไซต์นี้มีความสูงมากกว่า 180px! นั่นคือมากกว่า 30% ของความสูงของหน้าทั้งหมดบนแล็ปท็อปบางรุ่น: ประสบการณ์การใช้งานที่ไม่ดีซึ่งเป็นสิ่งที่หลีกเลี่ยงได้

ไม่พิจารณาปัญหา UX ของ Sticky Nav Header บนมือถือ

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

ไซต์ Coffee with a Cop มีส่วนหัวคงที่ แต่เล็กกว่ามาก—สูงน้อยกว่า 80 พิกเซล

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

การออกแบบเว็บข้อผิดพลาด UX ทั่วไปครั้งที่ 2: แบบอักษรบางและเบา

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

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

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

หลักเกณฑ์เกี่ยวกับอินเทอร์เฟซสำหรับมนุษย์ของ Apple

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

ข้อผิดพลาด UX ทั่วไปที่ควรพิจารณาก่อนใช้ประเภทบางมีดังต่อไปนี้

ใช้แบบอักษรที่บางและเบาเพราะมันทันสมัย

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

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

ซึ่งนำเราไปสู่ข้อผิดพลาด UX ทั่วไปครั้งต่อไป:

ไม่ทดสอบความชัดเจนของข้อความบนอุปกรณ์หลักทั้งหมด

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

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

การออกแบบเว็บข้อผิดพลาด UX ทั่วไปครั้งที่ 3: ข้อความคอนทราสต์ต่ำ

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

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

ความเปรียบต่างของข้อความต่ำใน Body Copy

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

ไม่ทดสอบความคมชัดของข้อความ

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

การออกแบบเว็บข้อผิดพลาด UX ทั่วไปครั้งที่ 4: Scroll Hijacking

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

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

ไม่ได้ทดสอบกับผู้ใช้จริง

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

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

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

การออกแบบเว็บข้อผิดพลาด UX ทั่วไปครั้งที่ 5: ภาพหมุน

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

ภาพหมุนของเว็บไซต์อาจไม่ให้คุณค่าแก่ผู้ใช้

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

ลูกศร ก่อนหน้า และ ถัดไป มีการค้นพบได้ต่ำ

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

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

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

บทสรุป

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

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• การออกแบบที่ตอบสนอง – แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด
• เข้าใกล้ขั้นตอนการออกแบบเว็บไซต์จากเบราว์เซอร์
• การเข้ารหัสสำหรับนักออกแบบ - เราควรรู้มากแค่ไหน?
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบ UI และข้อผิดพลาดทั่วไป