ทุกหน้าเว็บกำลังบอกว่าอะไรสำคัญที่สุด ไม่ว่าจะมีใครวางแผนไว้หรือไม่ก็ตาม พาดหัวที่ใหญ่ที่สุด ปุ่มที่สว่างที่สุด และรูปที่มีใบหน้าคน ต่างแย่งความสนใจในวินาทีแรกของผู้เข้าชม ลำดับชั้นทางสายตา (visual hierarchy) ในการออกแบบเว็บ คือศิลปะของการตัดสินว่าใครจะชนะ
เมื่อได้ผล จะไม่มีใครสังเกต เมื่อล้มเหลว หน้าเว็บจะรู้สึกรกหรือแบนราบ และคนก็จากไปโดยไม่บอกว่าทำไม บทความนี้เขียนสำหรับคนที่ตรวจงานออกแบบ ไม่ใช่คนที่ออกแบบเอง: คำที่ใช้อธิบายว่าอะไรดูไม่ลงตัว สองวิธีทดสอบง่าย ๆ และวิธีแก้ที่ใช้กันบ่อย
visual hierarchy คืออะไร?
ลำดับชั้นทางสายตา คือลำดับที่คนสังเกต อ่าน และลงมือทำกับส่วนต่าง ๆ ของหน้า ซึ่งกำหนดอย่างตั้งใจผ่านขนาด น้ำหนักตัวอักษร สี ระยะห่าง ตำแหน่ง การจัดแนว และภาพ
หน้าที่ออกแบบดีส่วนใหญ่ทำงานสามระดับ:
- ระดับหลัก: สิ่งเดียวในแต่ละหน้าจอที่สำคัญที่สุด มักเป็นพาดหัวหลักหรือการกระทำหลัก
- ระดับรอง: ไม่กี่สิ่งที่สนับสนุนระดับหลัก เช่น หัวข้อของแต่ละส่วน หลักฐานสำคัญ และตัวเลือกที่สองที่เบากว่า
- ระดับที่สาม: ทุกอย่างที่คนใช้เมื่อตัดสินใจอยู่ต่อแล้ว ตั้งแต่เนื้อหาไปจนถึงฟุตเตอร์
ส่วนที่ยากไม่ใช่การแต่งสไตล์ แต่คือการตกลงกันว่าสิ่งหลักคืออะไร ถ้าไม่มีใครบอกได้ ก็ไม่มีงานออกแบบไหนแสดงมันได้ ลำดับชั้นจึงเริ่มจากกลยุทธ์และเนื้อหา ไม่ใช่ฟอนต์ และยังเป็นจุดที่ UX กับ UI มาพบกัน: การตัดสินว่าอะไรสำคัญเป็นคำถามด้าน UX และการทำให้มันดูสำคัญเป็นเรื่องของ UI
คนมองหน้าเว็บอย่างไรจริง ๆ
คนแทบไม่เคยอ่านหน้าเว็บจากบนลงล่าง พวกเขากวาดตามองหาสัญญาณว่ามาถูกที่ แล้วจึงอ่านอย่างตั้งใจ Nielsen Norman Group (NN/g) ศึกษาเรื่องนี้ด้วยการติดตามการเคลื่อนไหวของสายตา (eye-tracking) มาหลายปี และมีข้อค้นพบไม่กี่ข้อที่ควรรู้
F-pattern คือสัญญาณเตือน ไม่ใช่เป้าหมาย
NN/g รายงาน F-pattern ครั้งแรกในปี 2006: กวาดตาข้ามส่วนบนของเนื้อหา กวาดสั้นกว่าในส่วนที่ต่ำลงมา แล้วไล่ลงตามขอบซ้าย งานติดตามผลในปี 2017 พบว่ารูปแบบนี้ยังเกิดขึ้น ทั้งบนมือถือและเดสก์ท็อป
มันไม่ใช่เลย์เอาต์ที่ควรออกแบบให้เป็น มันคือสิ่งที่คนหันไปพึ่ง เมื่ออยากได้ใจความเร็ว ๆ และหน้าเว็บไม่มีอะไรที่ดีกว่าให้ตาม เช่น เป็นข้อความยาวที่ไม่มีหัวข้อ ไม่มีวลีตัวหนา และไม่มีรายการ บทเรียนคือ คำแรก ๆ ของหัวข้อ ย่อหน้า และรายการ แบกน้ำหนักส่วนใหญ่ และอะไรที่อยู่ท้ายบรรทัดยาว ๆ ถูกมองข้ามได้ง่าย
รูปแบบเค้กชั้น คือรางวัลของหัวข้อที่ดี
ในรูปแบบนี้ (layer-cake pattern) สายตากระโดดจากหัวข้อไปหัวข้อ และลงไปอ่านเนื้อหาเฉพาะเมื่อหัวข้อสัญญาว่ามีสิ่งที่เกี่ยวข้อง ถ้าไม่นับการอ่านทุกคำ NN/g เรียกรูปแบบนี้ว่าเป็นวิธีกวาดตาอ่านที่ได้ผลที่สุดโดยห่างไกล แต่จะเกิดขึ้นก็ต่อเมื่อหัวข้อโดดเด่น และสื่อความหมายจริง “แนวทางของเรา” ไม่บอกอะไรคนที่กวาดตาอ่านเลย แต่ “ราคาคงที่ ตกลงกันเป็นลายลักษณ์อักษร” บอก
รูปแบบกระโดดหา: ตามหาสิ่งเฉพาะ
เมื่อมองหาราคา เบอร์โทร หรือที่อยู่ คนจะข้ามเนื้อหาทั้งก้อน (spotted pattern) จึงควรทำให้สิ่งเหล่านี้ดูออกทันทีว่าเป็นราคา เบอร์โทร หรือที่อยู่
ความสนใจที่เอียงซ้ายและ banner blindness
ในภาษาที่อ่านจากซ้ายไปขวา ความสนใจจะเอียงไปทางซ้ายของหน้า NN/g เห็นรูปแบบกลับด้านบนเว็บไซต์ภาษาที่อ่านจากขวาไปซ้าย ถ้าเว็บไซต์ของคุณมีหลายภาษา ให้ตรวจลำดับชั้นในแต่ละภาษา คนยังเรียนรู้ที่จะมองข้ามอะไรก็ตามที่ดูเหมือนโฆษณา (NN/g เรียกว่า banner blindness) โปรโมชันในกรอบที่ฉูดฉาด จึงอาจเป็นสิ่งเดียวที่ไม่มีใครเห็น
หลักการลำดับชั้น: 7 เครื่องมือ
นักออกแบบกำหนดลำดับของหน้าด้วยเครื่องมือหลักเจ็ดอย่าง แต่ละอย่างทำงานผ่านความต่างกับสิ่งรอบข้าง: หัวข้อขนาดใหญ่จะดูใหญ่ ก็ต่อเมื่ออยู่ข้างข้อความที่เล็กกว่า
1. ขนาด
องค์ประกอบที่ใหญ่ที่สุดมักถูกเห็นก่อน แต่สิ่งที่นับคือความต่างระหว่างระดับ หัวข้อที่ใหญ่กว่าเนื้อหาเพียงนิดเดียว ไม่ได้ช่วยนำสายตาเลย สเกลตัวอักษรที่สม่ำเสมอ ซึ่งอธิบายไว้ใน ตัวอักษรบนเว็บสำหรับเว็บไซต์ธุรกิจ ทำให้แต่ละระดับแยกกันชัด
2. น้ำหนักตัวอักษร
ตัวหนาได้ผลเพราะมันหายาก ทำตัวหนาวลีสำคัญหนึ่งวลี คนที่กวาดตาจะเจอมัน ทำตัวหนาทุก ๆ ประโยค คุณแค่ทำให้ย่อหน้าเข้มขึ้น
3. สีและคอนทราสต์
คอนทราสต์ในการออกแบบเว็บ ขึ้นอยู่กับการใช้สีอย่างมีวินัย เก็บสีเน้นสีเดียวไว้ใช้กับการกระทำและลิงก์ ถ้าสีแบรนด์ถูกใช้กับหัวข้อ ไอคอน และพื้นหลังด้วย ปุ่มจะไม่โดดเด่นอีกต่อไป
ยังมีเกณฑ์ขั้นต่ำด้านการเข้าถึงด้วย ที่ระดับ AA ของ WCAG 2.2 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ 3:1 สำหรับข้อความขนาดใหญ่ และ 3:1 สำหรับส่วนที่มองเห็นซึ่งคนต้องใช้ระบุตัวควบคุม เช่น เส้นขอบที่บอกว่าช่องกรอกอยู่ตรงไหน และยังระบุว่าสีต้องไม่ใช่วิธีเดียวในการสื่อความหมาย บทความ คอนทราสต์สีและตัวอักษรที่อ่านง่าย มีรายละเอียด
4. ระยะห่างและ white space
พื้นที่ว่างในการออกแบบเว็บ ทำหน้าที่จัดกลุ่มและแยกองค์ประกอบ สิ่งที่วางใกล้กันจะถูกอ่านว่าเกี่ยวข้องกัน หัวข้อจึงควรอยู่ใกล้ส่วนของตัวเอง มากกว่าส่วนที่อยู่ด้านบน องค์ประกอบที่มีพื้นที่ว่างรอบตัวมาก ดูสำคัญกว่าองค์ประกอบเดียวกันที่ถูกบีบอยู่ในแถว
ตรวจสอบด้วยตัวเอง เทียบช่องว่างด้านบนและด้านล่างของแต่ละหัวข้อ ถ้าเท่ากัน หัวข้อจะลอยอยู่ระหว่างสองส่วน และการจัดกลุ่มก็หายไป
5. ตำแหน่งและลำดับ
สิ่งที่อยู่ใกล้ด้านบน (และในภาษาที่อ่านจากซ้ายไปขวา คือด้านซ้าย) มักถูกเห็นก่อน บนมือถือ คอลัมน์จะยุบเหลือหนึ่งคอลัมน์ ลำดับจึงกลายเป็นลำดับชั้น แผงด้านข้างที่อยู่เงียบ ๆ บนเดสก์ท็อป อาจไปอยู่เหนือสารหลักของคุณบนมือถือ ซึ่งเป็นเหตุผลหนึ่งที่ควร ออกแบบสำหรับมือถือก่อน
6. การจัดแนวและการจัดกลุ่ม
ขอบซ้ายที่แข็งแรง ให้เส้นที่สายตาตามได้ การจงใจทำลายแนว ด้วยคำพูดที่ดึงออกมาเด่น หรือแถบเต็มความกว้าง ดึงความสนใจได้ แต่การทำลายแนวโดยไม่ตั้งใจ เพิ่มแค่ความรก
7. ภาพและการเคลื่อนไหว
รูปถ่าย โดยเฉพาะใบหน้า ดึงความสนใจอย่างแรง รูป hero ขนาดใหญ่จึงอาจกลบพาดหัวข้าง ๆ ได้ งานวิจัย eye-tracking ของ NN/g พบว่าคนมองข้ามรูปที่ใช้ตกแต่งล้วน ๆ และมองอย่างตั้งใจที่รูปที่มีข้อมูล เช่น สินค้าจริงและพนักงานจริง การเคลื่อนไหวยิ่งมองข้ามยากกว่า จึงควรให้อยู่ห่างจากสิ่งที่คุณต้องการให้คนอ่าน
หนึ่งการกระทำหลักต่อหนึ่งหน้าจอ
กฎลำดับชั้นที่มีประโยชน์ที่สุดสำหรับเว็บไซต์ธุรกิจ: แต่ละมุมมองขนาดหนึ่งหน้าจอ ควรมีการกระทำหลักที่ชัดเจนหนึ่งอย่าง และทุกอย่างที่เหลือควรดูเบากว่า
นั่นไม่ได้หมายถึงปุ่ม CTA หนึ่งปุ่มต่อหน้า: การกระทำเดียวกันกลับมาได้ และมักควรกลับมา หลังหลักฐานที่ทำให้มันน่าเชื่อ ปุ่มหน้าตาเหมือนกันสองปุ่มวางข้างกัน “ขอใบเสนอราคา” และ “ดาวน์โหลดโบรชัวร์” ทำให้ผู้เข้าชมต้องตัดสินใจเรื่องหน้าเว็บ ก่อนที่จะได้ตัดสินใจเรื่องคุณ นักจิตวิทยาเรียกผลที่อยู่เบื้องหลังว่ากฎของ Hick: ยิ่งคนต้องชั่งตัวเลือกมาก ก็ยิ่งใช้เวลาเลือกนาน
ในทางปฏิบัติ:
- ทำการกระทำหลักเป็นปุ่มทึบสีเน้น
- ทำตัวเลือกรองเป็นปุ่มแบบเส้นขอบ หรือลิงก์ข้อความ
- ย้ายตัวเลือกที่สามไปไว้ในเมนูนำทาง หรือต่ำลงไปในหน้า
ถ้าคุณให้บริการกลุ่มผู้ชมสองกลุ่มที่ต่างกัน ให้นำด้วยกลุ่มที่สำคัญที่สุดต่อธุรกิจ และให้อีกกลุ่มมีทางที่ชัดเจนในส่วนล่าง หรือในเมนู บทความ แนวปฏิบัติที่ดีของปุ่ม CTA อธิบายเรื่องถ้อยคำและตำแหน่ง
ทำให้โค้ดตรงกับงานออกแบบ
ลำดับชั้นทางสายตาก็คือโครงสร้างเอกสารด้วย สิ่งที่ดูเหมือนหัวข้อหลักควรเป็น H1 ของหน้า หัวข้อส่วนเป็น H2 หัวข้อย่อยเป็น H3 ระดับหัวข้อไม่ควรเลือกตามขนาด นั่นเป็นหน้าที่ของการแต่งสไตล์
ผู้ใช้โปรแกรมอ่านหน้าจอจำนวนมาก ไล่ดูหน้าด้วยการกระโดดจากหัวข้อหนึ่งไปอีกหัวข้อ และ WCAG (เกณฑ์ความสำเร็จ 1.3.1 Info and Relationships) กำหนดให้โครงสร้างที่แสดงด้วยสายตา ต้องมีอยู่ในโค้ดด้วย เครื่องมือค้นหาและเครื่องมือค้นหาด้วย AI ก็ใช้หัวข้อเพื่อเข้าใจว่าหน้าจัดระเบียบอย่างไร และข้อความส่วนไหนตอบคำถามไหน เมื่อหน้าตาและ markup ตรงกัน หน้าจะกวาดตาอ่าน นำทาง และอ้างอิงได้ง่ายขึ้น ซึ่งเป็นเหตุผลหนึ่งที่งานออกแบบและงานพัฒนา ทำงานได้ดีที่สุดเมื่อเป็นงานเดียวกัน
2 วิธีทดสอบหน้าเว็บของคุณ
ทดสอบด้วยการหรี่ตา
หรี่ตาจนอ่านข้อความไม่ออก หรือเบลอภาพหน้าจอในโปรแกรมแก้ไขรูปภาพใดก็ได้ เมื่อคำหายไป จะเหลือแค่รูปร่าง ขนาด และคอนทราสต์ ซึ่งใกล้เคียงกับสิ่งที่คนกวาดตาเห็นในแวบแรก จากนั้นตรวจ:
ลองกับภาพหน้าจอทั้งบนเดสก์ท็อปและมือถือ เพราะมักให้ผลไม่ตรงกัน
ทดสอบห้าวินาที
ให้คนที่ไม่เคยเห็นหน้านี้มาก่อน ดูหน้าเว็บห้าวินาที ซ่อนหน้าไว้ แล้วถาม:
- บริษัทนี้ทำอะไร?
- บริษัทนี้ทำเพื่อใคร?
- คุณจะทำอะไรต่อ?
- คุณจำอะไรได้?
ถ้าคำตอบไม่ตรงกับสิ่งที่หน้าควรบอก ลำดับชั้น พาดหัว หรือทั้งสองอย่างต้องปรับ คนไม่กี่คนจากกลุ่มเป้าหมายของคุณ ดีกว่าเพื่อนร่วมงานเต็มห้อง ถ้าต้องการดูลึกขึ้นว่าผู้เข้าชมทำสิ่งที่ตั้งใจได้สำเร็จแค่ไหน ดู UX audit ของเว็บไซต์ตรวจอะไรบ้าง
เปลี่ยนผลลัพธ์เป็นความเห็นที่มีประโยชน์
“ทำให้มันเด่นหน่อย” อธิบายความรู้สึก “เวลาหรี่ตา สไลด์รีวิวจากลูกค้าเป็นสิ่งแรกที่ฉันเห็น แต่ฉันคาดว่าจะเห็นปุ่มขอใบเสนอราคา” อธิบายปัญหาที่นักออกแบบแก้ได้ ให้ความเห็นเรื่องลำดับความสำคัญ ไม่ใช่เรื่องพิกเซล: บอกว่าอะไรควรถูกเห็นเป็นอันดับหนึ่ง สอง และสาม แล้วให้นักออกแบบเลือกเครื่องมือเอง
ลำดับชั้นที่ล้มเหลวบ่อย และวิธีแก้
ทุกอย่างถูกเน้น
ตัวหนาในทุกย่อหน้า สีเน้นสามสี ตัวพิมพ์ใหญ่ในทุกหัวข้อ เมื่อทุกอย่างถูกเน้น ก็ไม่มีอะไรถูกเน้นเลย
วิธีแก้ เลือกสิ่งเดียวในแต่ละส่วนที่สมควรถูกเน้น แล้วเอาการเน้นออกจากที่เหลือ ตอนแรกจะรู้สึกเรียบเกินไป นั่นคือสัญญาณว่าลำดับชั้นเริ่มทำงาน
ปุ่มที่แข่งกันเอง
ปุ่มทึบสองสามปุ่มในส่วน hero บวกปุ่มแชต ประกาศคุกกี้ และแถบข้อเสนอที่ติดหน้าจอ ทั้งหมดขอความสนใจในวินาทีเดียวกัน
วิธีแก้ หนึ่งการกระทำหลักต่อหนึ่งหน้าจอ ตัวเลือกรองที่เบากว่า และไม่มีอะไรลอยหรือติดหน้าจอ จนบังการกระทำหลัก
สไลด์ภาพหมุนเวียน
สไลด์หมุนเวียนทำให้ทุกแผนกได้พื้นที่บนสุดของหน้าแรก ซึ่งนั่นแหละคือปัญหา การเคลื่อนไหวดึงสายตาออกจากพาดหัว ข้อความเปลี่ยนก่อนจะอ่านจบ และคนที่เลื่อนเร็วอาจไม่เคยเห็นสไลด์ที่สำคัญ สไลด์ที่เล่นอัตโนมัติยังอยู่ภายใต้กฎ Pause, Stop, Hide ของ WCAG: เนื้อหาเคลื่อนไหวที่เริ่มเอง นานเกินห้าวินาที และอยู่ร่วมกับเนื้อหาอื่น ต้องมีวิธีหยุดชั่วคราว หยุด หรือซ่อน
วิธีแก้ เลือกสารเดียวสำหรับส่วนบนของหน้า และให้สารอื่นมีส่วนของตัวเอง บทความ การออกแบบหน้าแรก อธิบายว่าอะไรควรอยู่ตรงนั้น
รูปชนะ พาดหัวแพ้
รูปที่สะดุดตาอยู่หลังข้อความเส้นบางที่คอนทราสต์ต่ำ ผู้เข้าชมจำรูปได้ แต่จำสารไม่ได้
วิธีแก้ วางพาดหัวบนพื้นหลังทึบหรือแรเงา ย้ายออกจากส่วนที่รกที่สุดของรูป หรือเลือกรูปที่สงบกว่า แล้ววัดคอนทราสต์ แทนที่จะเชื่อสายตาตัวเอง
ขั้นตอนต่อไป
ลำดับชั้นทางสายตาไม่ใช่ของตกแต่งที่เติมตอนท้าย มันคือกลยุทธ์ที่มองเห็นได้: สิ่งที่ธุรกิจต้องพูด ในลำดับที่คนรับรู้ได้ในแวบเดียว มันได้ผลดีที่สุดเมื่อเนื้อหา งานออกแบบ และโค้ด มีลำดับความสำคัญเดียวกัน ตามที่บทความ อะไรทำให้เว็บไซต์ดี ของเราอธิบายไว้
เริ่มจากเล็ก ๆ: ทำทั้งสองการทดสอบกับหน้าแรกและหน้าบริการหลักของคุณ แล้วจดว่าคนเห็นอะไรก่อน
ถ้าไม่มีอะไรโดดเด่น หรือสิ่งที่โดดเด่นเป็นสิ่งที่ผิด งาน ออกแบบและพัฒนาเว็บไซต์ ของเราเริ่มจากคำถามนั้น: แต่ละหน้าต้องพูดอะไรก่อน และจะทำให้แน่ใจได้อย่างไรว่าผู้เข้าชมเห็น ถ้าอยากได้มุมมองจากคนนอกต่อเว็บไซต์ปัจจุบันก่อน ขอ ตรวจสอบเว็บไซต์ฟรี ได้เลย