UI Pattern เข้า(ใจ)ตาราง By uiblogaziner September 19, 20155180 views ShareTweet 1 การออกแบบ UI ที่นำเสนอข้อมูลจำนวนมากให้เข้าใจได้โดยง่าย เราสามารถแปลงข้อมูลเหล่านั้นให้กลายเป็นกราฟหรือแผนภูมิ เช่น กราฟเส้นแสดงการเปลี่ยนแปลงรายได้ของบริษัท แต่ถ้าต้องการดูเจาะลึกในรายละเอียดว่ารายได้มีที่มาจากอะไรบ้าง อย่างไรก็คงหนีไม่พ้นตารางหรอกครับ เรื่องนี้คงจะไม่ทำให้ designer หลายคนติดตาราง หากยูสเซอร์ไม่ต้องการดูข้อมูลบนอุปกรณ์มือถือ ซึ่งคงเป็นไปไม่ได้แล้วในยุคนี้ โชคดีที่ผมได้มีโอกาสได้ออกแบบตัวระบบ dashboard บนเว็บสำหรับบริษัทการเงินแห่งหนึ่งซึ่งหนีไม่พ้นรายงานที่เป็นในรูปแบบตาราง ทำให้ได้เห็นนวัตกรรมการแสดงผลที่ค่อนข้างเวิร์คของตารางบนมือถือ และรู้จักประเภทของตารางมากกว่าแต่ก่อนอีกด้วย ในแต่ละประเภทตาราง ผมมีสร้างหน้าตัวอย่างไว้ดูประกอบ ลองคลิกดูก็จะเข้าใจคำอธิบายได้ดียิ่งขึ้นนะครับ เกริ่นมาเยอะ งั้นเรามาเข้าตาราง เอ้ย เข้าเรื่องกันเลยดีกว่าเนอะ ^^ ! 1. ตารางพื้นฐาน (Basic Table) ตารางแบบพื้นฐาน คงคุ้นตากันอยู่แล้วกับตารางประเภทนี้ มันไม่มีอะไรพิเศษมากนักเมื่อแสดงผลบน desktop ตารางแบบพื้นฐานเมื่อแสดงผลบนมือถือ แต่ตารางพื้นฐานนี้เราควรยกระดับให้อย่างน้อยเมื่อแสดงผลบนมือถือ ควรจะให้มี scroll bar ด้านล่างเพื่อเลื่อนดูข้อมูลซ้าย/ขวา ไม่ใช่ปล่อยให้ข้อมูลล้นหน้าจอไปทางขวามือ หรือตัดคำในช่องจนอ่านไม่รู้เรื่อง ดูตัวอย่างตารางพื้นฐาน 2. ตารางแบบฟอร์มแนวนอน (Inline Form Table) ตารางแบบฟอร์มเมื่อแสดงผลปกติบนหน้าจอขนาดใหญ่ ตารางนี้จะไม่เห็นความพิเศษ ถ้าเราไม่ได้ย่อหน้าต่างให้เล็กลงเพื่อเสมือนดูบนมือถือ ตารางแบบฟอร์มเมื่อแสดงบนหน้าจอขนาดเล็ก จะเห็นว่าหัวข้อคอลัมน์จะกลับเข้ามาอยู่ข้างในแถวตาราง และแสดงผลคล้ายฟอร์มที่มี เลเบลและข้อมูลต่อท้ายในแนวนอน ส่วนตัวผมชอบการแสดงตารางแบบนี้มากที่สุดในบรรดาตัวอย่างที่แสดง ณ ที่นี้ครับ ดูตัวอย่างตารางแบบฟอร์มแนวนอน 3. ตารางแบบยึดหัวตาราง (Float Thead Table) หัวตารางที่ยึดติดด้านบนหน้าจอตลอดเมื่อเลื่อนดูข้อมูลด้านล่าง ลองสังเกตที่หัวตารางให้ดีครับ เมื่อเรา scroll ตารางนี้ลงไปด้านล่าง หัวตารางจะติดอยู่ด้านบนตลอดจนกว่าจะเลื่อนพ้นข้อมูลของตารางนี้ไป เราสามารถนำเอาความสามารถของตารางประเภทนี้ไปผสมกับตารางประเภทอื่นก็ได้นะครับ ไม่ได้จำกัดว่าต้องเลือกใช้ตารางสายพันธุ์เดียวเท่านั้นครับ ดูตัวอย่างตารางแบบยึดหัวตาราง 4. ตารางแบบให้แก้ไขข้อมูลได้ (Editable Table) ตารางที่สามารถแก้ไขข้อมูลได้ ตามชื่อก็บอกยี่ห้อ ข้อมูลในตารางประเภทนี้จะยอมให้เราสามารถแก้ไขข้อมูลได้โดยตรง ลักษณะการใช้งานของตารางประเภทนี้จะเหมาะกับงานที่ต้องการทดสอบฟังก์ชันการคำนวณค่า เช่น ถ้าเราลองลองเปลี่ยนค่าตัวแปรต้นทุน เราจะได้กำไรเท่าไร? เป็นต้น ดูตัวอย่างตารางแบบให้แก้ไขได้ 5. ตารางแบบแถวเปิด/ปิด (Foo Table) สถานะตอนยังไม่แสดงคอลัมน์ที่ถูกซ่อนไว้ ตารางแบบนี้คิดมาเพื่อแก้ปัญหาเรื่องการแสดงผลบนมือถือโดยตรงเลยครับ โดยจะนำเสนอแค่คอลัมน์หัวข้อหลักเพียง 2-3 คอลัมน์เท่านั้น ส่วนคอลัมน์ที่เหลือก็จับยัดไปอยู่ในไอคอนเปิด / ปิด (Toggle icon) แทน สถานะเมื่อคลิกแสดงข้อมูลคอลัมน์ที่ซ่อนไว้ พอคลิกไอคอน + ที่แถวแรก ก็จะเป็นการแสดงผลแบบฟอร์มแนวเรียงแถวเหมือนอย่างตารางประเภทที่ 2 เวลาดูบนมือถือครับ ดูตัวอย่างตารางแบบแถวเปิด/ปิด 6. ตารางข้อมูลซับซ้อน (Data Table) ตารางที่มีข้อมูลหลายคอลัมน์(ซ้บซ้อน) พร้อมฟังก์ชันช่วยค้นหา ตารางประเภทนี้จะเน้นการแสดงผลข้อมูลที่ค่อนข้างหนักและเยอะ ดังนั้นจึงพ่วงมาด้วยฟังก์ชันต่างๆ มาด้วยเพื่อให้ดูข้อมูลได้ง่ายและรวดเร็ว ฟังก์ชันที่ว่าก็เช่น ช่องเลือกจำนวนรายการแสดงผลต่อหน้า, การเรียงลำดับข้อมูลในแต่ละคอลัมน์, ช่องค้นหา ส่วนด้านท้ายของตารางข้อมูลซับซ้อน หากเป็นตารางที่ยาวและไม่มีการใช้เทคนิคยึดหัวตาราง ก็อาจมีหัวตารางมาโผล่ที่ด้านท้ายตารางอีก และมี pagination เพื่อใช้เลือกดูชุดข้อมูลหน้าถัดไป ตัวกรองที่ด้านท้ายของตาราง ล้ำไปอีก ก็อาจทำเป็นฟังก์ชันตัวกรองให้เราเลือกดูเฉพาะข้อมูลที่สนใจเท่านั้น ในตัวอย่างทำไว้ที่ท้ายตารางก็ดูเข้าท่านะ (ไมมีแสดงในหน้าลิงค์ตัวอย่าง) ตัวกรองในหัวของตาราง หรือจะไปทำตัวกรองที่หัวตารางก็ไม่ว่ากัน ตัวอย่างผมอยากดูข้อมูลว่ามีผู้ชายขึ้นต้นด้วย W กี่คน ผมก็พิมพ์ Male ลงในช่อง Gender ผลลัพธ์ตัวกรอง แล้วก็พิมพ์ตัว W ที่่ช่อง Name ก็จะได้ผลลัพธ์ออกมาว่า มีผู้ชายทีชื่อขึ้นต้นด้วย W แค่คนเดียวเอง ช่องค้นหาแบบมีขอบเขต หรือจะทำเป็นช่องค้นหาที่บอกขอบเขตการค้นหาเฉพาะคอลัมน์ก็เยี่ยมดีแท้ ตัวอย่างด้านบนมีช่องค้นหาขอบเขตข้อมูล 3 แบบ คือ ช่องค้นหาเฉพาะชื่อ ช่องค้นหาข้อมูลทั้งหมด และช่องค้นหาเฉพาะอีเมล การแสดงผลของตารางข้อมูลซับซ้อนบนมือถือ ส่วนเรื่องการแสดงผลบนมือถือ ก็จะคล้ายๆ กับแบบที่ 5 (เปิด/ปิด เพื่อดูเพิ่ม) ซึ่งถ้าเป็นข้อมูลเยอะๆ น่าจะดูยากพอตัวนะครับ ดูตัวอย่างตารางข้อมูลซับซ้อน การแสดงผลของตารางข้อมูลซับซ้อนบนมือถือเมื่อคลิกเลือกดูคอลัมน์ที่ซ่อน 7. ตารางแบบ Responsive (Responsive Table) การแสดงผลของตารางที่รองรับการแสดงผลแบบ Responsive แม้จะมีหลายคอลัมน์ ตารางประเภทนี้ค่อนข้างเหมาะกับแสดงผลบนมือถือเอามากๆ อย่างตารางด้านบนในโหมด Swipe จะมีคอลัมน์ที่ไม่แสดงผลให้เห็นอยู่ทางด้านขวา หากเราอยากดูก็เพียงแค่ใช้นิ้วเลื่อนหน้าจอไปทางซ้าย เหมือนเลื่อนดูภาพยังไงยังงั้น หรือบน desktop ก็ใช้ปุ่มลูกศรที่อยู่ด้านบนขวา กดเพื่อเลื่อนดูคอลัมน์ได้ตามต้องการ และเราสามารถกำหนดได้ว่าจะให้คอลัมน์แสดงผลตลอด พอเราเลื่อนคอลัมน์อื่นเข้ามา คอลัมน์นั้นก็จะยึดติดฝั่งซ้ายไว้เสมอ การกำหนดคอลัมน์หลักของตารางแบบ Responsive ตัวอย่างนี้ คอลัมน์ Movie Title ถูกกำหนดให้เป็นคอลัมน์หลัก จะติดยึดฝั่งซ้ายตลอดแม้เราจะเลื่อนดูคอลัมน์อื่นที่อยู่ด้านขวา ดูตัวอย่างตารางแบบ Responsive ตัวเลือกแสดงผลคอลัมน์ จากนั้นให้เราลองเปลี่ยนไปเป็นโหมด Toogle จะเห็นว่าลูกศรเลื่อนหน้าจะเปลี่ยนเป็น dropdown เพื่อให้เราเลือกว่าเราต้องการแสดงผลคอลัมน์ไหนบ้าง ซึ่งเป็นการให้อิสระเลือกดูข้อมูลที่เราสนใจจริงๆ การแสดงผลแบบแถวเมื่อเลือกโหมด Stack และเรียกดูบนหน้าจอขนาดเล็ก โหมดสุดท้ายคือ Stack ก็คล้ายๆ กับประเภทที่ 2 แต่ในตัวอย่างค่อนข้างแบ่งกลุ่มแถวได้ไม่ค่อยชัดเจนเท่าไรนัก ดูตัวอย่างตารางแบบ Responsive เลือกตารางไหนดี? สรุปคุณสมบัติของตารางประเภทต่างๆ หากตารางของเราจำเป็นต้องแสดงผลบนมือถือและปริมาณช้อมูลค่อนข้างมาก ตัวเลือกตารางประเภทที่ 2 (แบบฟอร์มแนวนอน) และ 7 (ตาราง responsive) ก็เป็นตัวเลือกที่น่าจะเข้าท่ามากที่สุดในความคิดของผมนะครับ ในโปรเจ็คดังกล่าว ผมเลือกใช้แบบที่ 2 เพราะมันง่ายและไม่ดูซับซ้อนเกินไป แล้วไปผสมกับฟังก์ชันที่ไว้ใช้ค้นหาข้อมูลของตารางแบบที่ 6 (ตารางข้อมูลซับซ้อน) อย่างเช่น ตัวเลือกการเรียงลำดับ, ตัวเลือกการกรอง, ช่องค้นหาข้อมูล เป็นต้น แต่ถ้าหากข้อมูลไม่มากนักตัวเลือกที่ 4 (แถวเปิด/ปิด) ก็น่าจะตอบโจทย์ได้ดีทีเดียวครับ ซึ่งแน่นอนว่าสุดท้ายแล้ว ผมก็ไม่ได้เลือกใช้ตารางแบบใดแบบหนึ่งหรอกครับ แต่อาศัยข้อดีของตารางประเภทต่างๆ มาประกอบเป็นตารางที่เหมาะกับงานนั้นๆ ให้มากที่สุด ต่อไปพอเจองานที่ต้องใช้ตาราง ก็ไม่ต้องกลัวอีกแล้ว เพราะเราเข้า(ใจ)ถึงตารางอย่างถ่องแท้แล้ว แถมยังอาจชอบติด(ใจ)ตารางอีกด้วย ^^ แหล่งที่มา: http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202 http://themeforest.net/item/slant-angularjs-admin-web-app-with-bootstrap/full_screen_preview/12161704