ทฤษฎี UIเรื่องเด๊นเด่น

ทำ UI ให้เป็นลำดับชั้น (Hierarchy) ขั้นเซียน UI ใช้กัน

0

hierarchy-featured

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

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

1. บนไปล่าง

hierarchy-order-01

ข้อมูลด้านบนลำดับสูงกว่าด้านล่าง

เราจะเริ่มอ่านข้อความหรือดูภาพโดยไล่จากด้านบนลงด้านล่าง วิธีการนี้เป็นพื้นฐานง่ายๆ ที่รู้กันดีอยู่แล้ว ดังนั้นสิ่งที่อยู่ด้านบนจะมีความลำดับชั้นความสำคัญมากกว่าข้อมูลที่อยู่ด้านล่าง บางตำราตั้งเป็นกฏว่า Gravity (แรงโน้มถ่วงทางสายตา)

2. ซ้ายไปขวา

hierarchy-order-02

ข้อมูลด้านซ้ายลำดับสูงกว่าด้านขวา

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

hierarchy-layout-01

การวางเลย์เอาท์ตามลำดับความสำคัญแบบที่ 1

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

hierarchy-layout-02

การวางเลย์เอาท์ตามลำดับความสำคัญแบบที่ 2

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

hierarchy-sample-03

ตัวอย่างข้อมูลที่มีการวางเลย์เอาท์แบบที่ 2

สมมติผมออกแบบโดยใช้เลย์เอาท์แบบที่ 2 โดยให้บล็อคที่ 1 เป็นส่วนแสดงเมนูย่อย, บล็อคที่ 2 แสดงส่วนของเมนูหลัก (Logo + Navigation bar) และบล็อคที่ 3 เป็นส่วนของเนื้อหาข้อมูล ถ้าเรานิยามตำแหน่งเช่นนี้ จะทำให้การเข้าใจลำดับความสำคัญของยูสเซอร์ผิดไป เพราะด้วยรูปแบบเนื้อหาแล้ว ส่วนที่เป็น Navigation bar ควรจะอยู่ด้านบนสุดด้วยการที่เป็นเมนูหลักของเว็บ ไม่ใช่อยู่ลำดับรองจากเมนูย่อย

hierarchy-sample-01

เว็บ Kayak ใช้การวางเลย์เอาท์แบบที่ 1

ในตัวอย่างเว็บ Kayak.com เป็นการวางเลย์เอาท์ตามลำดับความสำคัญได้อย่างถูกต้องสมบูรณ์ครับ หากพิจารณาแล้วลำดับชั้นจะเป็น 1>3>2>4  ส่วนทำไม 3 ถึงมากกว่า 2 ไว้รอดูวิธีการด้านล่างที่เหลือก่อนแล้วกันนะครับ

3. วางเยื้อง

hierarchy-indent-02

ข้อมูลที่เยื้องห่างจากข้อมูลก่อนหน้าจะมีลำดับชั้นต่ำกว่า

การจัดวางเนื้อหาที่เยื้องย่อหน้าไปจากเนื้อหานำด้านบนเป็นสื่อนำให้รู้ว่าข้อมูลที่ตามหลังมาเป็นส่วนย่อยของข้อมูลด้านบน

hierarchy-indent-01

การย่อหน้าคือการทำให้ลำดับชั้นน้อยลง

เราคงคุ้นเคยเป็นอย่างดีกับการย่อหน้าข้อความเพื่อบอกรายละเอียดปลีกย่อยให้กับหัวข้อหลัก

4. ทำขนาดให้ต่าง

hierarchy-size-01

ขนาดที่ใหญ่กว่าสื่อว่ามีลำดับชั้นที่สูงกว่า

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

hierarchy-size-02

ตัวหนังสือที่สูงกว่าสื่อว่ามีลำดับชั้นที่ใหญ่กว่า

ตัวหน้งสือที่ใหญ่กว่าก็จะมีลำดับชั้นมากกว่าตัวหนังสือที่เล็ก

hierarchy-sample-01

ขนาดของเลย์เอาท์ที่ใหญ่กว่าสำคัญกว่าเลย์เอาท์ที่แคบกว่า

ดังนั้นแล้ว หากเราย้อนกลับมาดูตัวอย่างของเว็บ Kayak เมื่อเราพิจารณาในแถวที่ 2 ก็จะพบว่า บล็อคที่ 3 จะมีลำดับชั้นสูงกว่าบล็อค 2 (3 กว้างกว่า 2) ในขณะบล็อคที่ 4 มีความสำคัญน้อยสุด

5. ใช้เฉดสีหรือความโปร่งใส

hierarchy-color-01

เฉดสีที่เข้มกว่ามีลำดับชั้นที่ดีกว่า

การใช้โทนสีที่ไล่จากเข้มไปหาอ่อน (Shade) หรือทำพื้นสีให้โปร่งใส (Opacity) ก็จะช่วยแบ่งแยกลำดับชั้นของเนื้อหาได้

hierarchy-color-02

ตัวอย่างตัวอักษรที่มีเฉดสีต่างกัน

แม้จะมีขนาดเท่ากัน โทนสีจะช่วยบอกใบ้ให้เราทราบได้ทันทีว่า หัวข้อหลักคือส่วนไหน

6. ใช้สีเด่น, สีรอง

hierarchy-color-03

เลือกใช้สีที่เด่นเพื่อเพิ่มลำดับชั้น

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

 

7. ใช้ความหนาของเส้นขอบหรือตัวอักษร

hierarchy-stroke-01

ขอบที่หนาช่วยเพิ่มระดับความสำคัญของข้อมูลได้

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

hierarchy-stroke-02

ตัวหนังสือที่หนาจะลำดับชั้นสูงกว่าตัวหนังสือธรรมดา

เช่นเดียวกัน น้ำหนักของตัวอักษร (weight) ที่มากกว่าก็จะมีลำดับความสำคัญที่สูงกว่า

ด้วยวิธีการพื้นฐานในการทำให้ลำดับชั้นของข้อมูลมีระดับต่างกัน เรามาดูตัวอย่างกันเพิ่มเติมเพื่อให้เข้าใจหลักการนี้มากขึ้นกันครับ

 

ตัวอย่าง 1: การวางเลย์เอาท์พื้นฐาน

hierarchy-sample-04

หน้าจอการวางเลย์เอาท์ที่มีการคำนึงเรื่องลำดับชั้นข้อมูล

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

ตัวอย่าง 2: การใช้เฉดสี

hierarchy-sample-05

การลดเฉดสีเส้นขอบเพื่อเพิ่มช่องว่างระหว่างลำดับชั้น

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

ตัวอย่าง 3: ย้ายตำแหน่ง

hierarchy-sample-06

วัตถุที่ใหญ่ที่สุดจะเด่นและมีลำดับชั้นที่สูงที่สุด

ในตัวอย่างนี้ เราจะเห็นได้ชัดเลยว่า บล็อคที่ 1 มีลำดับชั้นความสำคัญมากที่สุด เพราะมีขนาดใหญ่ที่สุด แต่ถ้าหากผมอยากลดลำดับความสำคัญของมันลง จะทำได้อย่างไร?

hierarchy-sample-07

การย้ายตำแหน่งเพื่อสร้างสมดุลของลำดับชั้นระหว่างข้อมูล

ง่ายๆ เลยครับ เพียงแค่เราย้ายบล็อคที่ 1 ไปไว้ทางด้านขวาแทน ก็จะทำให้ลำดับชั้นของมันลดลงอย่างมาก (ใช้วิธีการที่ 2: ซ้ายไปขวา)

ตัวอย่าง 4: UI แชท

hierarchy-sample-08

การใช้งานวิธีการเยื้องข้อมูลเพื่อสร้าง UI พูดคุย

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

ตัวอย่าง 5: สร้างลำดับชั้นให้กับลิงค์

hierarchy-link-01

ลิงค์หลายหลายสไตล์ที่นำเอาเรื่องลำดับชั้นมาช่วยในการออกแบบ

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

ตัวอย่าง  6: ผสมผสานวิธีการ

hierarchy-mix-01

การผสมวิธีการใช้ขนาดและเฉดสีเพื่อสร้างความต่างลำดับชั้น

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

hierarchy-sample-02

การพัฒนาปรับปรุง UI จากธรรมดาจนถึงขั้นโปรด้วยวิธีการผสมผสาน

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

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

เท่านั้นยังไม่พอ เรารู้อีกว่าข้อมูลที่อยู่ด้านบน จะมีลำดับชั้นที่สูงกว่า จึงได้ย้ายตำแหน่งของข้อมูลวันที่ไปไว้ด้านบน ดั่งเช่นหมายเลข 3

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

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

แค่นี้พอแล้วเหรอ?

คงยังไม่แน่ใจอีกใช่ไหมครับว่า แค่รู้หลักการออกแบบข้อมูลแบบเป็นลำดับชั้น (Hierarchy) ก็เพียงพอต่อการออกแบบ UI ที่ดีแล้วเหรอ ถ้าให้ผมตอบตามตรง คำตอบก็คือ ใช่ครับ เพราะมันครอบคลุมหลักการอื่นๆ ของการออกแบบ UI เรื่องอื่นๆ ไปด้วย เช่น การออกแบบที่คำนึงถึงความต่างของสีวัตถุและพื้นหลัง (Contrast), การออกแบบอิงกฎ 3 ส่วน, หลักการอ่านข้อมูลของยูสเซอร์ เป็นต้น ซึ่งหากศึกษาจนลึกซึ้งก็จะทราบว่า หลักการต่างๆ ที่ผมกล่าวยกตัวอย่างมานี้ ก็มีส่วนหนึ่งของเนื้อหาที่คาบเกี่ยวกับเรื่องการออกแบบแบบมีลำดับชั้นด้วย เพียงพอที่จะแยกเราออกจาก designer มือสมัครสู่การเป็น Good Designer

แต่ถ้าเราต้องการก้าวไปสู่ความเป็น Professional หรือ Great Designer ความรู้เพียงเท่านี้ คงไม่เพียงพอที่จะทำให้เราแตกต่างจาก designer คนอื่นๆ แน่นอนครับ คงต้อง Stay foolish, Stay hungry อย่างที่สตีฟ จ๊อปส์พูดไว้

ฉะนั้นอย่าหยุดอ่าน อย่าหยุดศึกษา และอย่าหยุดออกแบบ!

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

3D Force Touch

Previous article

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 7 – วิธีการใส่ Font Awesome

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *