UI Blogazine

ทฤษฎี UI

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

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 อย่างที่สตีฟ จ๊อปส์พูดไว้

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

Tagged , ,

About uiblogaziner

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

View all posts by uiblogaziner →

Leave a Reply

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