เช่น นักออกแบบเว็บไซต์ เราพยายามสร้างประสบการณ์ UX ที่ยอดเยี่ยมอย่างต่อเนื่องและช่วยให้ผู้ใช้บรรลุเป้าหมาย ในงานประจำวันของเราเราใช้รูปแบบและแนวโน้มทั่วไปหลายประเภท จากประสบการณ์ของฉันฉันได้เห็นว่ารูปแบบและเทรนด์เหล่านั้นสามารถควบคุมลูกค้าและนักออกแบบ / นักพัฒนาไปในทิศทางที่ผิดได้อย่างไร ไม่มีความลับใด ๆ ที่เราทุกคนมักจะหลงระเริงไปกับสิ่งต่างๆที่ดูเหมือนจะได้เห็น เหลือเชื่อ . ฉันยอมรับว่าฉันตกอยู่ในกับดักเหล่านั้นหลายต่อหลายครั้งฉันเลือกที่จะสร้างสิ่งที่ดึงดูดสายตาและเสียสละประโยชน์ใช้สอยเพื่อมัน ทำไมฉันถึงทำมัน? ฉันสันนิษฐานว่าช่วงเวลาหนึ่ง ว้าว จะเกิดขึ้นและจะดึงดูดผู้ใช้อย่างน่าอัศจรรย์ ฉันหวังว่าผลกระทบนี้ ว้าว มันจะทำให้เกิดผลกระทบในระยะยาว ช่วงเวลาที่เคร่งขรึมเกิดขึ้นเมื่อฉันพบว่าผู้ใช้ของฉันมีปัญหาในการทำความเข้าใจอินเทอร์เฟซที่ฉันสร้างขึ้นและเป็นสิ่งที่ฉันภูมิใจมาก บางครั้งคุณได้เรียนรู้วิธีที่ยากลำบาก
บทเรียนที่ฉันได้เรียนรู้คือเพื่อหลีกเลี่ยงการเดินทางที่เป็นหลุมเป็นบ่อมากสำหรับผู้ใช้ของเราเราต้องถามตัวเองเสมอว่าอะไรอยู่ภายใต้พื้นผิวมันวาวของอินเทอร์เฟซผู้ใช้ที่เรากำลังสร้างขึ้น ควรหยุดก่อนที่จะชอบรูปแบบหรือเทรนด์ใด ๆ และคิดถึงคุณค่าที่พวกเขามอบให้ ดังที่ Kate Rutter กล่าวไว้อย่างยอดเยี่ยม 'น่าเกลียด แต่มีประโยชน์มากกว่าสวย แต่ไร้ความหมาย'
โปรดอย่าเข้าใจฉันผิด - ฉันไม่ได้แนะนำว่าเราไม่ควรทำของสวยงามฉันแนะนำว่าเราควรเน้นไปที่การทำให้สิ่งของสวยงามและสวมใส่ได้ กุญแจสำคัญที่มีรูปแบบและแนวโน้มคือการหาจุดสมดุลระหว่างสิ่งที่ดูดีและคุณค่าที่อยู่เบื้องหลัง
ในบทความนี้ฉันจะแสดงรายการข้อผิดพลาด UX ทั่วไปหลายรายการที่ฉันเห็นทุกวัน แม้ว่าจะไม่ได้เลวร้าย แต่อย่างใด แต่ก็อาจเป็นอันตรายได้หากไม่ดำเนินการด้วยความระมัดระวัง ฉันจะแบ่งปันข้อมูลเล็กน้อยเกี่ยวกับวิธีที่คุณสามารถปรับปรุงความสามารถในการใช้งานเมื่อนำเทรนด์เหล่านั้นไปใช้หรือแม้กระทั่งแนะนำวิธีแก้ปัญหา ไม่มีอะไรเพิ่มเติมให้ดูที่รายการ
ข้อผิดพลาดทั่วไป # 1: ส่วนหัวขนาดใหญ่คงที่
เราเห็นส่วนหัวที่ใหญ่และสูงมากขึ้นเรื่อย ๆ - บล็อกและเมนูที่คั่นหน้าไว้ซึ่งอยู่ในตำแหน่งคงที่และใช้เวลาส่วนใหญ่และสำคัญของหน้าต่างดู พวกเขายึดติดกับด้านบนและมักจะบล็อกเนื้อหาด้านล่าง ฉันเคยเห็นส่วนหัวในเว็บไซต์คุณภาพสูงที่มีความสูงมากกว่า 150 พิกเซล แต่มีคุณค่าที่แท้จริงอยู่เบื้องหลังหรือไม่ ฉันอาจจะบังคับมันเล็กน้อย แต่ส่วนหัวคงที่ขนาดใหญ่ทำให้ฉันนึกถึงเฟรม HTML ที่น่ากลัวและตอนนี้เก่า วุ้ย
องค์ประกอบคงที่สามารถมีได้ ประโยชน์ที่แท้จริง แต่โปรดระมัดระวังเมื่อจัดการกับพวกเขา - มีสิ่งสำคัญหลายประการที่ต้องจำไว้ เมื่อใช้ส่วนหัวแบบคงที่โปรดจำข้อผิดพลาดทั่วไปสองสามข้อที่คุณต้องการหลีกเลี่ยงให้มากที่สุด:
ใหญ่เกินไปที่จะสบาย
หากมีการตัดสินใจออกแบบส่วนหัวที่มีขนาดใหญ่และคงที่แล้วให้ทำการทดสอบเพื่อดูว่า 'ใหญ่' 'ใหญ่เกินไป' หรือไม่ ตรวจสอบให้แน่ใจว่าคุณไม่ลงน้ำและใส่เนื้อหาจำนวนมากในส่วนหัวซึ่งจะส่งผลให้องค์ประกอบสูงเกินไป เมื่อแก้ไขส่วนหัวแล้วการเรียกดูควรรวดเร็วและสะดวกสำหรับผู้ใช้ในการทำ หากคุณมีข้อสงสัยเกี่ยวกับขนาดที่แท้จริงของส่วนหัวให้พยายามทำให้มีขนาดเล็กลงโดยไม่ให้ความสนใจกับภาพลักษณ์และการสร้างแบรนด์มากเกินไป การไม่พบความสมดุลที่ดีอาจส่งผลให้ผู้ใช้ของคุณได้รับประสบการณ์ที่ไม่สะดวกสบายและทำให้เหลือพื้นที่สำหรับเนื้อหาหลักน้อยมาก
ปีที่แล้วฉันได้ทำงานในโครงการที่ลูกค้ายืนยันว่าจะมีการนำทางแบบคงที่ในเวอร์ชันเดสก์ท็อป แม้ว่าบาร์จะไม่สูงเป็นพิเศษ แต่ฉันก็กลัวว่าผู้ใช้บางคนอาจรู้สึกอึดอัดจากความรู้สึกถูกล็อค วิธีแก้ปัญหาของฉันนั้นง่ายมาก - โดยการให้แถบนำทางมีความโปร่งใสเล็กน้อยโดยใช้ CSS ผู้ใช้สามารถมองเห็นผ่านแถบซึ่งทำให้พื้นที่เนื้อหาใหญ่ขึ้น นี่คือโค้ด CSS เล็กน้อยทำไมไม่ลองดูว่ามันเหมาะกับคุณด้วยหรือไม่?
.header { opacity: 0.9; } ตัวอย่างนี้ฉันพบเมื่อไม่นานมานี้ หน้าโปรไฟล์ ATP ของ Roger Federer .
ส่วนหัวคงที่มีความสูงประมาณ 110px และเมื่อคุณเลื่อนลงการนำทางย่อยจะปรากฏขึ้นทำให้ส่วนหัวสูง 160px นั่นคือมากกว่า 30% ของความสูงเต็มหน้าของ MacBook Pro ของฉันเมื่อแท่นเปิดอยู่
ไม่แก้ไขปัญหาบนมือถือ
แน่นอนว่าผู้ใช้จำนวนมากจะใช้หน้าจอที่ค่อนข้างใหญ่และเมนูคงที่อาจเป็นข้อได้เปรียบในความละเอียดขนาดใหญ่ แต่ความละเอียดที่เล็กกว่าและโลกของอุปกรณ์เคลื่อนที่ล่ะ? โปรดทราบว่าผู้ใช้ส่วนใหญ่ของคุณจะใช้อุปกรณ์ที่มีความละเอียดเล็กน้อยดังนั้นสำหรับมือถือตัวเลือก position: fixed อาจไม่ใช่ทางออกที่ดีที่สุด โชคดีที่ เทคนิคการตอบสนอง ช่วยให้เราสามารถออกแบบโซลูชันที่แตกต่างกันและยึดติดกับส่วนหัวคงที่สำหรับความละเอียดขนาดใหญ่เท่านั้น แนวทาง 'มือถือเป็นอันดับแรก' จะให้คำตอบมากมายแก่เราโดยเริ่มจากการแก้ปัญหาอุปกรณ์เคลื่อนที่เป็นเพียงเนื้อหาที่จำเป็นและดำเนินการต่อจากที่นั่น
กาแฟกับตำรวจ นอกจากนี้ยังมีส่วนหัวคงที่ แต่เล็กกว่า - น้อยกว่า 80 พิกเซล
อาจกล่าวได้ว่าเป็นโซลูชันที่ดีในความละเอียดขนาดใหญ่เนื่องจากช่วยให้นำทางได้ง่ายและรวดเร็ว ด้วยความละเอียดขนาดเล็กส่วนหัวจะได้รับการแก้ไขและใช้พื้นที่บนหน้าจออุปกรณ์เป็นจำนวนมาก ฉันไม่แนะนำให้ใช้ส่วนหัวคงที่ในมือถือและใช้ไอคอนแฮมเบอร์เกอร์คงที่แทนซึ่งสามารถเปิดเมนูได้เมื่อแตะ แม้ว่ารูปแบบนี้จะไม่สามารถแก้ปัญหาสากลได้ แต่ก็ทำให้มีพื้นที่ว่างมากขึ้น บนสมาร์ทโฟนและแท็บเล็ตพื้นที่อาจมีค่ามาก
ข้อผิดพลาดทั่วไป # 2: แบบอักษรบาง
แบบอักษรบาง ๆ ดูเหมือนจะมีอยู่ทั่วไปในแอปบนอุปกรณ์เคลื่อนที่และเว็บไซต์สมัยใหม่จำนวนมาก ด้วยเทคโนโลยีการแสดงผลที่ก้าวหน้าและก การแสดงผล ได้รับการปรับปรุงให้ดีขึ้นนักออกแบบหลายคนเลือกที่จะใช้แบบอักษรที่ดีหรือแบบบางในการออกแบบ มีความหรูหราสดใหม่และแปลกใหม่ อย่างไรก็ตามแบบอักษรแบบบางอาจส่งผลต่อความสามารถในการอ่านและกลายเป็นปัญหาใหญ่ โปรดทราบว่าไม่ใช่ทุกคนที่จะดูเว็บไซต์ของคุณบนจอภาพที่แสดงผลแบบอักษรเท่าที่ควร ตัวอย่างเช่นฉันพบว่าแบบบางนั้นอ่านยากมากบน iPhone และ iPad ด้วยจอแสดงผลเรตินา ก่อนที่จะคิดว่าแบบอักษรมีลักษณะและความรู้สึกอย่างไรลองย้อนกลับไปสักวินาที
ของ คู่มือการเชื่อมต่อกับมนุษย์ของ Apple :
เหนือสิ่งอื่นใดข้อความจะต้องชัดเจน หากผู้ใช้ไม่สามารถอ่านคำศัพท์ในแอปของคุณได้ก็ไม่สำคัญว่าตัวอักษรของคุณจะสวยงามเพียงใดApple อ้างถึงแอพมือถือ แต่หลักการเดียวกันนี้สามารถใช้ได้กับทุกเว็บไซต์ ดังที่ Colm Roche กล่าวไว้ว่า อ่านได้≠เป็นทางเลือก แต่จำเป็นสำหรับการใช้งานที่ดี ไม่มีประเด็นใดที่จะใส่เนื้อหาลงในเว็บไซต์หากผู้ใช้ส่วนใหญ่ของคุณแทบไม่สามารถอ่านมันได้คุณไม่คิดเหรอ?
ต่อไปนี้เป็นข้อผิดพลาดที่พบบ่อยที่สุดที่คุณควรทราบก่อนที่จะใส่แบบอักษรลงในอาหาร:
ใช้ Thin Typography เพราะใช่
เช่นเดียวกับเทรนด์ใด ๆ การทำหรือสวมใส่บางอย่างนั้นเป็นเรื่องอันตรายเพราะคนอื่นทำเช่นนั้น ฟอนต์ไม่ควรดูดี ประการแรกควรอ่านได้และเป็นก้าวสำคัญสู่การใช้งานที่ดี การเลือกใช้แบบบางเพียงเพราะมันดูดีจะถูกผูกไว้กับไฟหลัง ในการพูดคุยที่ยอดเยี่ยมนี้ การพิมพ์ที่สมบูรณ์แบบยิ่งขึ้น ทิมบราวน์พูดถึงจุดที่ไพเราะที่ตัวอักษรร้องเพลง จุดที่น่าสนใจนี้เป็นการผสมผสานระหว่างขนาดน้ำหนักและสีที่คุณวางรากฐานสำหรับเว็บไซต์ของคุณ
เพื่อให้แน่ใจว่าคุณพบแบบอักษรที่ดีสำหรับเนื้อหาของเนื้อหาที่ตรงกับจุดที่น่าสนใจให้ทำการทดสอบบางอย่างในสภาพแวดล้อมที่แตกต่างกัน ซึ่งนำเราไปสู่ข้อผิดพลาดต่อไปนี้ที่ควรหลีกเลี่ยง:
ไม่สามารถทดสอบความสามารถในการอ่านบนอุปกรณ์หลัก ๆ
แบบบางอาจดูดีบนหน้าจอของคุณและคุณอาจไม่มีปัญหาในการอ่าน แต่โปรดจำไว้ว่า คุณไม่ใช่ผู้ใช้ของคุณ . ลงทุนในการทดสอบการใช้งานเพื่อดูว่าผู้ใช้จริงของคุณพอใจกับการพิมพ์บนอุปกรณ์หลัก ๆ หรือไม่เช่นเดสก์ท็อปแล็ปท็อปแท็บเล็ตและสมาร์ทโฟน ในขณะที่คุณทำการทดสอบอุปกรณ์เคลื่อนที่มากขึ้นให้ผู้เข้าร่วมใช้เว็บไซต์ของคุณบนอุปกรณ์เคลื่อนที่ในเวลากลางวัน - ผู้ใช้จริงของคุณจะไม่มีเงื่อนไขที่เหมาะสมในการสำรวจเว็บไซต์ของคุณเสมอไป หากคุณต้องอ่านบางสิ่งบนอุปกรณ์พกพาในวันที่มีแดดคุณคงรู้ดีว่ามันยากแค่ไหน หากคุณตัดสินใจที่จะใช้แบบอักษรแบบบางบนเว็บไซต์ของคุณมีวิธีง่ายๆในการปรับให้เหมาะกับผู้ใช้มือถือ นี่คือวิธีแก้ปัญหาที่ฉันเพิ่งเห็นบนเว็บไซต์:
โอ๊ค มันทำงานได้ดีโดยปรับให้เข้ากับความต้องการของผู้ใช้ที่ความละเอียดเดสก์ท็อปส่วนหัว H1 นั้นบางมาก เนื่องจากส่วนหัวมีขนาดใหญ่และมีความคมชัดของสีที่ดีฉันจึงสงสัยว่าความสามารถในการอ่านไม่ได้รับผลกระทบ บนมือถือที่ขนาดส่วนหัวเล็กกว่าอย่างเห็นได้ชัดน้ำหนักจะหนาขึ้นเล็กน้อยซึ่งช่วยให้อ่านง่าย เห็นได้ชัดว่าพวกเขาประสบปัญหาด้านความสามารถในการอ่านได้ง่ายเมื่อพูดถึงฟอนต์ขนาดเล็กที่มีขนาดเล็กและใช้น้ำหนักตัวอักษรที่หนักกว่า แบบสอบถามสื่อ . วิธีแก้ปัญหาของเขานั้นง่าย แต่มีประสิทธิภาพมาก
ข้อผิดพลาดทั่วไป # 3: คอนทราสต์ต่ำ
คอนทราสต์ต่ำกลายเป็นเทรนด์ในการออกแบบอินเทอร์เฟซผู้ใช้ในช่วงไม่กี่ปีที่ผ่านมา เราได้พูดคุยเกี่ยวกับแบบอักษรซึ่งสร้างคอนทราสต์ต่ำไปแล้ว แต่มีกับดักที่ใหญ่กว่าอีกอย่างหนึ่งที่คุณอาจพบได้นั่นคือการรวมกันของแบบอักษรแบบบางที่มีความคมชัดของสีต่ำจะทำให้ผู้ใช้ของคุณเกาหัวและคิดว่า เราเสียสติไปแล้วหรือยัง? . แน่นอนว่าคอนทราสต์ต่ำทั้งหมดไม่ได้แย่ แต่ยังสามารถเพิ่มความน่าสนใจให้กับภาพได้หากคุณออกแบบอย่างระมัดระวัง แต่ในกรณีที่มีข้อบกพร่อง UX ทั้งหมดสิ่งสำคัญคืออย่าหักโหมจนเกินไปและคิดถึงความสามารถในการใช้งาน
ข้อผิดพลาดใหญ่สองสามประการที่คุณควรหลีกเลี่ยงในขณะที่ต้องรับมือกับคอนทราสต์ ได้แก่ :
คอนทราสต์สีต่ำในเนื้อหาของร่างกาย
แม้ว่าความคมชัดต่ำของสีจะไม่เลวร้าย แต่ก็อาจส่งผลเสียต่อการใช้งานเว็บไซต์ของคุณและทำให้ผู้ใช้บางคนอ่านข้อความได้ยากมาก หากบทความนี้สร้างแรงบันดาลใจให้คุณเพิ่มความคมชัดของสีอย่างน้อยหนึ่งอย่างให้ทำให้สิ่งนั้นเป็นเนื้อหาของร่างกาย น่าจะเป็นพื้นที่ที่เหมาะสำหรับการทดลองน้อยที่สุด
Cool Springs การเงิน ใช้ Helvetica รูปแบบบางสำหรับเนื้อความของเนื้อหา และแม้ว่าจะดูหรูหราและมีส่วนช่วยให้ผู้ใช้ชื่นชอบในแง่สุนทรียภาพ แต่ก็ยากที่จะอ่านในหลาย ๆ แพลตฟอร์ม
ฉันทำการทดสอบอย่างรวดเร็วบน MacBook Pro ที่มีจอแสดงผลเรตินารวมทั้ง iPhone และ iPad ที่มีจอแสดงผลเรตินา ภาพหน้าจอมาจาก MacBook Pro ของฉันซึ่งแสดงให้เห็นปัญหาความคมชัดและความสามารถในการอ่าน ฉันมีปัญหาในการอ่านข้อความเว็บไซต์บนอุปกรณ์ทั้งหมดของฉัน
อย่าทดสอบคอนทราสต์
ลองทำการทดสอบผู้ใช้เล็กน้อยเพื่อหลีกเลี่ยงปัญหาที่จุดสิ้นสุดของถนน ในตัวฉันเองก็ได้ยินลูกค้าและเพื่อนร่วมงานบางคนพูดว่า 'Bojan การทดสอบผู้ใช้ใช้เวลานานและมีราคาแพง' อาจเป็นได้ แต่ใช้เวลาไม่นานในการทดสอบความเปรียบต่างของเว็บไซต์ของคุณ เริ่มต้นด้วยเนื้อหาของร่างกายจากนั้นหาทางขึ้น มีเครื่องมือที่ดีที่เรียกว่า Colorable ซึ่งคุณสามารถตั้งค่าความคมชัดของข้อความที่ถูกต้องตามแนวทางการเข้าถึงของ WCAG เมื่อคุณรู้ว่าคุณกำลังใช้คอนทราสต์ที่ถูกต้องให้ปรับสีอื่น ๆ บนเว็บไซต์ของคุณและทำการทดสอบผู้ใช้อย่างรวดเร็วเพื่อให้แน่ใจว่าผู้ใช้ส่วนใหญ่ของคุณจะได้รับประสบการณ์ที่ปราศจากความเจ็บปวด ฉันสงสัยว่าคอนทราสต์ต่ำจะทำให้เกิดการกบฏ แต่อาจทำให้ผู้ใช้หลายคนของคุณหงุดหงิด
ข้อผิดพลาดทั่วไป # 4: การจัดสรรตำแหน่ง
แนวโน้มอีกประการหนึ่งที่เราเห็นกันมากในช่วงนี้คือการจัดสรรการกระจัด เว็บไซต์ที่ใช้เทรนด์นี้จะเข้าควบคุม เลื่อน (โดยปกติจะใช้ JavaScript) และแทนที่ฟังก์ชันพื้นฐานในเว็บเบราว์เซอร์ ผู้ใช้ไม่สามารถควบคุมการเลื่อนหน้าได้อีกต่อไปและไม่สามารถคาดเดาพฤติกรรมได้ซึ่งอาจทำให้เกิดความสับสนและหงุดหงิดได้ง่าย เป็นการทดลองที่มีความเสี่ยงซึ่งอาจเป็นอันตรายต่อการใช้งานดังนั้นฉันขอแนะนำให้ระมัดระวัง
หากคุณมั่นใจว่าจะใช้สิ่งนี้คุณควรพยายามหลีกเลี่ยงข้อผิดพลาดต่อไปนี้:
สวมเทรนด์นี้เพียงเพราะเป็นที่นิยม
บางเว็บไซต์สามารถควบคุมการเลื่อนได้ แต่ก็ไม่รับประกันว่าเว็บไซต์ของคุณจะทำได้เช่นกัน แนวโน้มและรูปแบบไม่สามารถติดตามและนำไปใช้อย่างสุ่มสี่สุ่มห้าได้ ตัวอย่างเช่นเราเห็นนักออกแบบจำนวนมากติดตามสิ่งที่ Apple กำลังทำกับเว็บไซต์และการควบคุมการเลื่อนแบบหน้าต่อหน้าเอฟเฟกต์พารัลแลกซ์และภาพความละเอียดสูงจากอุปกรณ์ต่างๆ Apple มีเหตุผลของตัวเองผู้ใช้แนวคิดและเนื้อหาที่ไม่เหมือนใคร และเนื่องจากทุกเว็บไซต์มีปัญหาที่ไม่ซ้ำกันคุณจึงต้องมีวิธีแก้ไขปัญหาเหล่านี้โดยเฉพาะ
อย่าทดสอบกับผู้ใช้จริง
เพื่อหลีกเลี่ยงปัญหาในการยืมแนวคิดหรือรูปแบบอย่าลืมทดสอบต้นแบบเว็บไซต์ของคุณกับผู้ใช้ของคุณเอง การทดสอบการใช้งานอย่างง่ายจะเปิดเผยว่าการใช้งานการเลื่อนแบบควบคุมนั้นเป็นไปได้หรือไม่ การทดสอบนี้จะช่วยตอบคำถามได้มากมายและให้เบาะแสว่าคุณจะปรับปรุงแนวคิดของคุณได้อย่างไร หากไม่มีการทดสอบคุณจะไม่มีทางรู้ได้เลยว่าควรจะไปในทิศทางใดและการพัฒนาเว็บไซต์ตามสมมติฐานมักจะเสียค่าใช้จ่ายมากเกินไปในภายหลัง
สถาปนิกข้อมูลทำอะไร
Tumblr ใช้สิ่งนี้บนเว็บไซต์ แม้ว่าการนำไปใช้งานอาจมีความเสี่ยง แต่ดูเหมือนว่าพวกเขาเข้าใจผู้ชมเนื้อหาและแนวคิดสนับสนุนและตอบสนองความต้องการของผู้ใช้หลายประการ เมื่อผู้ใช้พยายามลงไปการเลื่อนจะถูกควบคุมโดยเว็บไซต์ แต่ผู้ใช้จะถูกนำไปที่ส่วนถัดไปของเว็บไซต์ เนื้อหาถูกแบ่งออกเป็นหลายส่วนหรือหลายบล็อกซึ่งง่ายต่อการแยกแยะและจุดตัวบ่งชี้ขนาดใหญ่จะตั้งอยู่ทางด้านขวาของไฟล์ วิวพอร์ต . เป็นผลให้ไฟล์ บ้าน ให้ความรู้สึกเหมือนเป็นรถคันใหญ่ที่คุณควบคุมได้แทนที่จะเป็นเว็บไซต์ทดลองที่มีความคิดเป็นของตัวเอง
ข้อผิดพลาดทั่วไป # 5: ภาพหมุนไม่ได้ผล
ภาพหมุนเป็นเรื่องธรรมดาบนเว็บและมีมาช้านานแล้ว แม้ว่าจะมีประสิทธิภาพ แต่ก็อาจเป็นฝันร้ายได้หากไม่ได้รับการออกแบบและพัฒนาอย่างรอบคอบ ฝันร้ายสำหรับผู้ใช้ของคุณอาจเป็นเพราะพวกเขามีปัญหาในการทำความเข้าใจ ฝันร้ายสำหรับคุณอาจเป็นความจริงที่ว่าผู้ใช้ของคุณไม่เห็นเนื้อหาที่สำคัญในไฟล์ สไลด์ ของม้าหมุน
ภาพหมุนหลายตัวที่ฉันเคยดูมีข้อเสียที่คล้ายกัน บางส่วน ได้แก่ :
ขาดคุณค่าที่แท้จริงต่อผู้ใช้
มูลค่าที่แท้จริงที่ภาพหมุนมอบให้กับผู้ใช้ของคุณคืออะไร เรียบร้อยแล้วม้าหมุนควรเชื่อมต่อกับผู้ใช้ของคุณและช่วยให้พวกเขาบรรลุเป้าหมายได้อย่างรวดเร็วและไม่ลำบาก หลายครั้งฉันเห็นภาพหมุนที่อาจไม่ได้ให้คุณค่าเพิ่มเติม แต่ดูเหมือนเป็นการตกแต่งที่เรียบง่าย ต่อไปนี้เป็นแบบทดสอบสั้น ๆ ที่คุณสามารถทำได้: ทำโพสต์อิทและเขียนข้อดีสามประการที่ภาพหมุนสามารถมอบให้กับผู้ใช้ได้ หากคุณคิดไม่ถึงสามก็มีโอกาสดีที่ม้าหมุนของคุณจะต้องทำงานมากขึ้น
มีสไลด์มากเกินไปหรือน้อยเกินไปบนม้าหมุน
สไลด์จำนวนมากอาจส่งผลเสียต่อผู้ใช้และสามารถเลือกที่จะเพิกเฉยต่อภาพหมุนได้ กูรูด้านการใช้งาน Jakob Nielsen แนะนำสิ่งต่อไปนี้:
รวมสไลด์ห้าสไลด์หรือน้อยกว่าไว้ในภาพหมุนเนื่องจากผู้ใช้ไม่น่าจะเชื่อมต่อกับมากกว่านั้น ในขณะที่มากกว่าห้าคนอาจมากเกินไป แต่น้อยกว่าสามอาจบ่งชี้ว่ามีการแนะนำวิธีแก้ปัญหาที่ดีกว่า หนึ่งในสถานที่สำหรับม้าหมุนคือความจริงที่ว่าคุณต้องการเนื้อหาจำนวนมากที่ยัดไว้ในพื้นที่ขนาดเล็กมาก แต่มีเพียงสองสไลด์ทำไมไม่แสดงทั้งสองพร้อมกันและลืมเลื่อนไปทางเดียวหรืออีกทางหนึ่งในคราวเดียว?
ลูกศร ก่อนหน้านี้ ย ต่อไป และตัวบ่งชี้สไลด์ไม่ชัดเจนและ / หรือเข้าถึงได้
ตรวจสอบให้แน่ใจว่าคุณกำลังทำให้เนื้อหามีค่าของคุณสามารถเข้าถึงได้ ข้อมูลสำคัญบนภาพหมุนอาจถูกซ่อนไว้หากลูกศรของ ต่อไป ย ก่อนหน้านี้ ไม่ชัดเจนและใหญ่เกินไปสำหรับการคลิกที่สะดวกสบาย อ้ออย่าลืมแตะผู้ใช้มือถือของคุณจะขอบคุณสำหรับสิ่งนั้น
บางครั้งไม่มีลูกศรบนม้าหมุนและตัวบ่งชี้จุดจะเชื่อมโยงเพื่อข้ามไปมาระหว่างการไถล จำไว้ว่าคุณจะต้องระบุไฟล์ แตะพื้นที่ ทำให้ดีคลิกได้และมีขนาดใหญ่ (ฉันแนะนำ 35x35px เป็นอย่างน้อย) มิฉะนั้นเป้าหมายขนาดเล็กจะนำไปสู่แนวทางปฏิบัติในการกำหนดเป้าหมายที่น่าหงุดหงิดและผู้ใช้จะออกจากเว็บไซต์ของคุณ
เว็บไซต์ของ มูลนิธิลองฟอเรสต์ มีภาพหมุนในส่วนหัว มี เล่นอัตโนมัติ และมีการนำเสนอภาพถ่ายห้าภาพบนสไลด์ ลูกศร ก่อนหน้านี้ ย ต่อไป มีขนาดเล็กและโปร่งใสทำให้มองเห็นและคลิกหรือแตะได้ยาก ไม่มีตัวบ่งชี้สำหรับสไลด์ที่คุณเปิดอยู่และไม่มีป้ายกำกับที่แสดงถึงสิ่งที่ภาพถ่ายแสดง รูปภาพไม่ใช่ลิงก์และเป็นเพียงการตกแต่งเท่านั้น แม้ว่าภาพหมุนอาจมีคุณค่าในการสร้างการเชื่อมต่อกับผู้ใช้ แต่ก็เป็นที่ต้องการอย่างมาก
ข้อสรุป
ฉันได้ระบุข้อผิดพลาด UX ที่พบบ่อยที่สุดในแนวโน้มของเว็บในปัจจุบัน หากคุณได้นำไปใช้หรือกำลังคิดที่จะนำสิ่งเหล่านี้ไปใช้ฉันหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์สำหรับคุณ ในฐานะ [UX Designer] โปรดใช้วิจารณญาณที่ดีที่สุดและอย่ากลัวที่จะโพล่งออกมา แต่อย่าลืมคำนึงถึงผู้ใช้ของคุณเสมอ
อย่าลังเลที่จะเริ่มการสนทนาด้านล่าง ฉันอยากอ่านเกี่ยวกับประสบการณ์มุมมองหรือคำแนะนำของคุณเกี่ยวกับวิธีทำสิ่งต่างๆให้ดีขึ้นมาก
