ทฤษฎี UIเรื่องเด๊นเด่น ทำ UI ให้เป็นลำดับชั้น (Hierarchy) ขั้นเซียน UI ใช้กัน By uiblogaziner December 6, 20155275 views ShareTweet 0 ขอขอบคุณท่านผู้อ่านที่ติดตามหรือพึ่งจะมาอ่านจนถึงบทความนี้ ก่อนสิ้นปีนี้ ผมอยากจะมอบของขวัญชิ้นหนี่งซึ่งเป็นหนึ่งในสุดยอดวิชา การเป็นออกแบบขั้นเซียน ถ้าหากสำเร็จหรือฝึกวิชานี้แล้ว จะทำให้เราสามารถโลดโผนในยุทธจักรได้อย่างไม่ต้องเกรงกลัวฝีมือใครเลย วิชาที่ผมจะถ่ายทอดเปรียบได้กับคัมภัร์เปลี่ยนเส้นเอ็นของวัดเส้าหลินเลยก็ว่าได้ เพราะสามารถนำไปประยุกต์ได้ในหลายสถานการณ์จำเป็นและหลายรูปแบบกระบวนท่า ขอเพียงคำนึงถึงเป็นแกนหลักในขณะออกแบบ UI ก็เพียงพอแล้วครับ หลักการหรือวิชาที่ผมอยากนำเสนอคือ การทำ UI ให้เป็นลำดับชั้นตามความสำคัญ (Hierarchy) Hierarchy หรือการออกแบบที่มีการเรียงลำดับความสำคัญขององค์ประกอบจะช่วยเรื่องการรับรู้ข้อมูลของยูสเซอร์ให้เป็นไปได้อย่างมีประสิทธิภาพ ภายใต้หลักการอ่านของยูสเซอร์ที่เป็นการสแกนอ่านข้อมูล ไม่ใช่การอ่านแบบลงรายละเอียด ทำให้การออกแบบที่มีลำดับชั้นการวางองค์ประกอบของเนื้อหาเป็นเรื่องง่ายต่อยูสเซอร์ที่จะเข้าใจได้ว่าเนื้อหาส่วนไหนสำคัญที่สุด เนื้อหาไหนสำคัญรองลงมา หรือเนื้อหาไหนที่ทางองค์กรต้องการสื่อสารให้ชัดเจนกับผู้อ่านมากที่สุด แต่จะทำได้ด้วยวิธีการใด ผมได้รวบรวมและกลั่นกรองจากประสบการณ์ สรุปออกมาเป็น 7 วิธีนี้ครับ 1. บนไปล่าง ข้อมูลด้านบนลำดับสูงกว่าด้านล่าง เราจะเริ่มอ่านข้อความหรือดูภาพโดยไล่จากด้านบนลงด้านล่าง วิธีการนี้เป็นพื้นฐานง่ายๆ ที่รู้กันดีอยู่แล้ว ดังนั้นสิ่งที่อยู่ด้านบนจะมีความลำดับชั้นความสำคัญมากกว่าข้อมูลที่อยู่ด้านล่าง บางตำราตั้งเป็นกฏว่า Gravity (แรงโน้มถ่วงทางสายตา) 2. ซ้ายไปขวา ข้อมูลด้านซ้ายลำดับสูงกว่าด้านขวา ในวัฒนธรรมการอ่านโดยส่วนใหญ่ เราจะดูข้อมูลจากซ้ายไปขวา ดังนั้นแล้ว สิ่งที่อยู่ทางด้านซ้ายจะมีลำดับความสำคัญมากกว่าสิ่งที่อยู่ด้านขวา แต่ถ้าเป็นชาวอาหรับ เค้าจะอ่านจากขวาไปซ้าย วิธีการนี้ก็ทำตรงกันข้ามนะครับ การวางเลย์เอาท์ตามลำดับความสำคัญแบบที่ 1 จากวิธีการง่ายๆ ทั้ง 2 ข้อนี้ ผมจะแสดงให้เห็นถึงความสำคัญของมันผ่านตัวอย่างหนึ่ง ซึ่งหลายๆ คนอาจทำผิดโดยไม่รู้ตัวมาก่อน จากรูปด้านบน เป็นการวางเลย์เอาท์ของหน้าเว็บ โดยถ้าพิจารณาตามวิธีการด้านบน เราจะสามารถเรียงลำดับชั้นของบล็อคได้ดังนี้ บล็อคที่ 1 > บล็อคที่ 2 > บล็อคที่ 3 การวางเลย์เอาท์ตามลำดับความสำคัญแบบที่ 2 แต่ถ้าผมจัดวางเลย์เอาท์ของหน้าเว็บเป็นแบบรูปด้านบน เราจะเรียงลำดับชั้นได้เป็น บล็อคที่ 1 > บล็อคที่ 2 > บล็อคที่ 3 ตอนนี้ยังไม่มีเลย์เอาท์ไหนที่ผิดนะครับ เพียงแต่ปูพื้นให้เราเห็นก่อนว่าการจัดวางเลย์เอาท์ทั้ง 2 แบบ จะได้ลำดับความสำคัญที่ต่างกัน ตัวอย่างข้อมูลที่มีการวางเลย์เอาท์แบบที่ 2 สมมติผมออกแบบโดยใช้เลย์เอาท์แบบที่ 2 โดยให้บล็อคที่ 1 เป็นส่วนแสดงเมนูย่อย, บล็อคที่ 2 แสดงส่วนของเมนูหลัก (Logo + Navigation bar) และบล็อคที่ 3 เป็นส่วนของเนื้อหาข้อมูล ถ้าเรานิยามตำแหน่งเช่นนี้ จะทำให้การเข้าใจลำดับความสำคัญของยูสเซอร์ผิดไป เพราะด้วยรูปแบบเนื้อหาแล้ว ส่วนที่เป็น Navigation bar ควรจะอยู่ด้านบนสุดด้วยการที่เป็นเมนูหลักของเว็บ ไม่ใช่อยู่ลำดับรองจากเมนูย่อย เว็บ Kayak ใช้การวางเลย์เอาท์แบบที่ 1 ในตัวอย่างเว็บ Kayak.com เป็นการวางเลย์เอาท์ตามลำดับความสำคัญได้อย่างถูกต้องสมบูรณ์ครับ หากพิจารณาแล้วลำดับชั้นจะเป็น 1>3>2>4 ส่วนทำไม 3 ถึงมากกว่า 2 ไว้รอดูวิธีการด้านล่างที่เหลือก่อนแล้วกันนะครับ 3. วางเยื้อง ข้อมูลที่เยื้องห่างจากข้อมูลก่อนหน้าจะมีลำดับชั้นต่ำกว่า การจัดวางเนื้อหาที่เยื้องย่อหน้าไปจากเนื้อหานำด้านบนเป็นสื่อนำให้รู้ว่าข้อมูลที่ตามหลังมาเป็นส่วนย่อยของข้อมูลด้านบน การย่อหน้าคือการทำให้ลำดับชั้นน้อยลง เราคงคุ้นเคยเป็นอย่างดีกับการย่อหน้าข้อความเพื่อบอกรายละเอียดปลีกย่อยให้กับหัวข้อหลัก 4. ทำขนาดให้ต่าง ขนาดที่ใหญ่กว่าสื่อว่ามีลำดับชั้นที่สูงกว่า แน่นอนครับว่า วัตถุหรือภาพที่มีขนาดใหญ่กว่าย่อมมีลำดับชั้นสูงกว่าวัตถุที่เล็ก ตัวหนังสือที่สูงกว่าสื่อว่ามีลำดับชั้นที่ใหญ่กว่า ตัวหน้งสือที่ใหญ่กว่าก็จะมีลำดับชั้นมากกว่าตัวหนังสือที่เล็ก ขนาดของเลย์เอาท์ที่ใหญ่กว่าสำคัญกว่าเลย์เอาท์ที่แคบกว่า ดังนั้นแล้ว หากเราย้อนกลับมาดูตัวอย่างของเว็บ Kayak เมื่อเราพิจารณาในแถวที่ 2 ก็จะพบว่า บล็อคที่ 3 จะมีลำดับชั้นสูงกว่าบล็อค 2 (3 กว้างกว่า 2) ในขณะบล็อคที่ 4 มีความสำคัญน้อยสุด 5. ใช้เฉดสีหรือความโปร่งใส เฉดสีที่เข้มกว่ามีลำดับชั้นที่ดีกว่า การใช้โทนสีที่ไล่จากเข้มไปหาอ่อน (Shade) หรือทำพื้นสีให้โปร่งใส (Opacity) ก็จะช่วยแบ่งแยกลำดับชั้นของเนื้อหาได้ ตัวอย่างตัวอักษรที่มีเฉดสีต่างกัน แม้จะมีขนาดเท่ากัน โทนสีจะช่วยบอกใบ้ให้เราทราบได้ทันทีว่า หัวข้อหลักคือส่วนไหน 6. ใช้สีเด่น, สีรอง เลือกใช้สีที่เด่นเพื่อเพิ่มลำดับชั้น วิธีการนี้ไม่เหมือนกับข้อที่แล้ว เพราะเป็นการใช้สีหลายๆ สี โดยสีที่เด่นสะดุดตาสุดจะเป็นสีที่มีลำดับชั้นสูงกว่าสีที่ดูอ่อนๆ หรือกลางๆ 7. ใช้ความหนาของเส้นขอบหรือตัวอักษร ขอบที่หนาช่วยเพิ่มระดับความสำคัญของข้อมูลได้ เราสามารถใช้ความหนาของเส้นขอบเพื่อเน้นย้ำความสำคัญของข้อมูลที่อยู่ด้านใน โดยที่เส้นขอบที่หนากว่าจะมีลำดับความสำคัญที่มากกว่า ตัวหนังสือที่หนาจะลำดับชั้นสูงกว่าตัวหนังสือธรรมดา เช่นเดียวกัน น้ำหนักของตัวอักษร (weight) ที่มากกว่าก็จะมีลำดับความสำคัญที่สูงกว่า ด้วยวิธีการพื้นฐานในการทำให้ลำดับชั้นของข้อมูลมีระดับต่างกัน เรามาดูตัวอย่างกันเพิ่มเติมเพื่อให้เข้าใจหลักการนี้มากขึ้นกันครับ ตัวอย่าง 1: การวางเลย์เอาท์พื้นฐาน หน้าจอการวางเลย์เอาท์ที่มีการคำนึงเรื่องลำดับชั้นข้อมูล ในตัวอย่างแรกนี้ ผมได้แสดงให้เห็นว่า ลำดับชั้นสูงสุดที่เราเห็นก็คือ ตัวเลขแจ้งเตือน (Notification) สีแดง เพราะใช้สีที่โดดเด่นและอยู่ในตำแหน่งบนสุดของหน้า ถัดมาเราก็ใช้วิธีการกำหนดขนาดให้ต่างกันสำหรับตัวอักษรที่เป็น Header และ Subheader ที่ด้านล่างของ Subheader จะมีเส้นใต้ซึ่งมีลำดับชั้นต่ำกว่า Subheader หากผมใช้สีที่เข้มประมาณเดียวกันกับ Subheader จะทำให้ลำดับชั้นดูไม่ได้ต่างกันมาก ผมจึงเลือกใช้วิธีการลดเฉดของเส้นให้ดูจางลง เพื่อสร้างช่องว่างความต่างชั้นของหัวข้อและปุ่มที่กำลังจะตามมา ตัวอย่าง 2: การใช้เฉดสี การลดเฉดสีเส้นขอบเพื่อเพิ่มช่องว่างระหว่างลำดับชั้น จากภาพด้านบน เมนูตัวอย่างแต่ละเมนูทางด้านซ้ายถูกแแบ่งด้วยเส้นขอบสีดำอย่างเด่นชัด แต่การใช้งานเราไม่ได้ต้องการให้ลำดับชั้นของเส้นและตัวอักษรเท่าเทียมกัน หากจะลดลำดับชั้นของเส้นขอบ เราสามารถใช้วิธีลดเฉดสีขอบเส้นขอบ เช่น ปรับค่าความโปร่งใสให้เหลือน้อยลง เป็นดั่งภาพเมนูทางด้านขวา ตัวอย่าง 3: ย้ายตำแหน่ง วัตถุที่ใหญ่ที่สุดจะเด่นและมีลำดับชั้นที่สูงที่สุด ในตัวอย่างนี้ เราจะเห็นได้ชัดเลยว่า บล็อคที่ 1 มีลำดับชั้นความสำคัญมากที่สุด เพราะมีขนาดใหญ่ที่สุด แต่ถ้าหากผมอยากลดลำดับความสำคัญของมันลง จะทำได้อย่างไร? การย้ายตำแหน่งเพื่อสร้างสมดุลของลำดับชั้นระหว่างข้อมูล ง่ายๆ เลยครับ เพียงแค่เราย้ายบล็อคที่ 1 ไปไว้ทางด้านขวาแทน ก็จะทำให้ลำดับชั้นของมันลดลงอย่างมาก (ใช้วิธีการที่ 2: ซ้ายไปขวา) ตัวอย่าง 4: UI แชท การใช้งานวิธีการเยื้องข้อมูลเพื่อสร้าง UI พูดคุย เราคงคุ้นเคยกับ UI Facebook หรือ UI ประเภทที่เกี่ยวข้องกับการคอมเมนต์หรือแชทเป็นอย่างดี UI พวกนี้จะใช้การเยื้องของข้อมูลเพื่อบ่งบอกว่าข้อมูลเหล่านั้นเป็นส่วนของผู้ตอบข้อความ ตัวอย่าง 5: สร้างลำดับชั้นให้กับลิงค์ ลิงค์หลายหลายสไตล์ที่นำเอาเรื่องลำดับชั้นมาช่วยในการออกแบบ หลายโอกาสที่ในหน้าเว็บหนึ่งๆ ของเราจะเต็มไปด้วยลิงค์มากมาย ถ้าต้องพึ่งพาแต่ลิงค์ที่เป็นปุ่มอย่างเดียวแล้ว ยูสเซอร์ก็จะไม่รู้เลยว่าปุ่มหลักของหน้า (Call-to-Action button) คืออะไร ดังนั้นหากเราสามารถสร้างรูปแบบของลิงค์ที่มีลำดับชั้นต่างกัน ก็จะช่วยนำยูสเซอร์ไปสู่ขั้นตอนการใช้งานที่ถูกต้อง ในตัวอย่าง เราใช้สไตล์ของลิงค์ที่เป็นปุ่มให้มีลำดับชั้นสูงสุด รองลงมาใช้ไอคอนกับตัวอักษรมาเป็นตัวสื่อความเป็นลิงค์ (ขนาดเล็กลง) และลิงค์ทีสำคัญน้อยสุด ก็ใช้รูปแบบง่ายๆ คือ ใช้สีและมีเส้นใต้บ่งบอกว่าเป็นลิงค์ (มีขนาดเล็กที่สุด) ตัวอย่าง 6: ผสมผสานวิธีการ การผสมวิธีการใช้ขนาดและเฉดสีเพื่อสร้างความต่างลำดับชั้น วิธีการทำให้ลำดับชั้นต่างกันไม่ได้จำกัดไว้ว่า 1 ข้อมูลสามารถใช้วิธีการได้แค่ 1 วิธี หากเราอยากทำให้ลำดับความสำคัญน้อยลง เราอาจใช้วิธีการลดขนาดพร้อมๆ กับลดเฉดสีของข้อมูล ซึ่งจะทำให้ช่องว่างของลำดับชั้นต่างกันมากกว่าที่เราเลือกใช้วิธีการเพียงอย่างเดียวครับ การพัฒนาปรับปรุง UI จากธรรมดาจนถึงขั้นโปรด้วยวิธีการผสมผสาน สุดท้ายเราลองมาดูการออกแบบ UI ที่แสดงข้อมูลวันเช็คอินและเช็คเอาท์กัน หากเป็นคนทั่วไป ไม่มีความรู้เรื่อง ลำดับชั้นข้อมูล ก็คงจะได้ผลลัพธ์การออกแบบเป็นในรูปแบบหมายเลข 1 แต่วันนี้พอเราได้เรียนรู้เรื่องวิธีการจากบทความนี้ ก็เอะใจว่า ข้อมูลสำคัญของเนื้อหานี้คือ ตัวแสดงวันที่ เราจึงเลือกใช้วิธีการ ปรับขนาดตัวอักษรให้ใหญ่ขึ้น ทำให้ได้ผลงานเป็นหมายเลข 2 เท่านั้นยังไม่พอ เรารู้อีกว่าข้อมูลที่อยู่ด้านบน จะมีลำดับชั้นที่สูงกว่า จึงได้ย้ายตำแหน่งของข้อมูลวันที่ไปไว้ด้านบน ดั่งเช่นหมายเลข 3 ท้ายที่สุด เพื่อสร้างความต่างชั้นของลำดับให้เด่ดชัดมากขึ้น เราก็เลยลดเฉดสีของข้อความ วันที่เช็คอิน และ วันที่เช็คเอาท์ ให้จางลง ทำให้ยูสเซอร์ที่มองเห็นข้อมูลรับรู้ได้ทันทีว่าข้อมูลวันที่เป็นเนื้อหาที่ผู้ออกแบบต้องการสื่อและเน้นย้ำ โปรหรือเซียนผู้เข้าใจหลักการออกแบบข้อมูลอย่างเป็นลำดับชั้นถึงจะสามารถนำเสนอรูปแบบ UI เป็นดั่งหมายเลข 4 บางคนอาจจะมีข้อถกเถียงว่า ถ้าไม่วางหัวข้อไว้ด้านบน ยูสเซอร์จะรู้เหรอว่า ข้อมูลวันที่คือข้อมูลแบบไหน ผมก็มองว่าเป็นประเด็นที่ถูกต้องเหมือนกันครับ แต่หากข้อมูลนี้ต้องแสดงซ้ำๆ อยู่หลายหน้า หลายๆ ตำแหน่ง การแสดงผลด้วยรูปแบบหมายเลข 4 ก็จะช่วยลดภาระการอ่านข้อมูลที่ไม่เกิดประโยชน์ มีเพียงครั้งแรกหรือครั้งที่สองที่ยูสเซอร์จำเป็นต้องอ่านหัวข้อด้านล่างวันที่ว่าเป็นข้อมูลวันที่ของอะไร แค่นี้พอแล้วเหรอ? คงยังไม่แน่ใจอีกใช่ไหมครับว่า แค่รู้หลักการออกแบบข้อมูลแบบเป็นลำดับชั้น (Hierarchy) ก็เพียงพอต่อการออกแบบ UI ที่ดีแล้วเหรอ ถ้าให้ผมตอบตามตรง คำตอบก็คือ ใช่ครับ เพราะมันครอบคลุมหลักการอื่นๆ ของการออกแบบ UI เรื่องอื่นๆ ไปด้วย เช่น การออกแบบที่คำนึงถึงความต่างของสีวัตถุและพื้นหลัง (Contrast), การออกแบบอิงกฎ 3 ส่วน, หลักการอ่านข้อมูลของยูสเซอร์ เป็นต้น ซึ่งหากศึกษาจนลึกซึ้งก็จะทราบว่า หลักการต่างๆ ที่ผมกล่าวยกตัวอย่างมานี้ ก็มีส่วนหนึ่งของเนื้อหาที่คาบเกี่ยวกับเรื่องการออกแบบแบบมีลำดับชั้นด้วย เพียงพอที่จะแยกเราออกจาก designer มือสมัครสู่การเป็น Good Designer แต่ถ้าเราต้องการก้าวไปสู่ความเป็น Professional หรือ Great Designer ความรู้เพียงเท่านี้ คงไม่เพียงพอที่จะทำให้เราแตกต่างจาก designer คนอื่นๆ แน่นอนครับ คงต้อง Stay foolish, Stay hungry อย่างที่สตีฟ จ๊อปส์พูดไว้ ฉะนั้นอย่าหยุดอ่าน อย่าหยุดศึกษา และอย่าหยุดออกแบบ!
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 8: คิดประสบการณ์ใหม่ในการดื่มกาแฟ By uiblogazinerAugust 23, 20171
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 7: เรียนรู้จากเจ้าของธุรกิจที่ชื่นชอบ By uiblogazinerAugust 1, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 6: คิดสร้างสรรค์ด้วยการเล่นไพ่ By uiblogazinerJuly 25, 20170
คิดให้ปังดังทั่วโลกแบบนักเรียนสแตนฟอร์ด ตอนที่ 5: สร้างสินค้าใหม่ใน 30 นาที By uiblogazinerJuly 10, 20170