UI Pattern

เข้า(ใจ)ตาราง

1

ui-tables-featured

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

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

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

1. ตารางพื้นฐาน (Basic Table)

ui-tables-01

ตารางแบบพื้นฐาน

คงคุ้นตากันอยู่แล้วกับตารางประเภทนี้ มันไม่มีอะไรพิเศษมากนักเมื่อแสดงผลบน desktop

ui-tables-02

ตารางแบบพื้นฐานเมื่อแสดงผลบนมือถือ

แต่ตารางพื้นฐานนี้เราควรยกระดับให้อย่างน้อยเมื่อแสดงผลบนมือถือ ควรจะให้มี scroll bar ด้านล่างเพื่อเลื่อนดูข้อมูลซ้าย/ขวา ไม่ใช่ปล่อยให้ข้อมูลล้นหน้าจอไปทางขวามือ หรือตัดคำในช่องจนอ่านไม่รู้เรื่อง

ดูตัวอย่างตารางพื้นฐาน 

2. ตารางแบบฟอร์มแนวนอน (Inline Form Table)

ui-tables-03

ตารางแบบฟอร์มเมื่อแสดงผลปกติบนหน้าจอขนาดใหญ่

ตารางนี้จะไม่เห็นความพิเศษ ถ้าเราไม่ได้ย่อหน้าต่างให้เล็กลงเพื่อเสมือนดูบนมือถือ

ui-tables-04

ตารางแบบฟอร์มเมื่อแสดงบนหน้าจอขนาดเล็ก

จะเห็นว่าหัวข้อคอลัมน์จะกลับเข้ามาอยู่ข้างในแถวตาราง และแสดงผลคล้ายฟอร์มที่มี เลเบลและข้อมูลต่อท้ายในแนวนอน ส่วนตัวผมชอบการแสดงตารางแบบนี้มากที่สุดในบรรดาตัวอย่างที่แสดง ณ ที่นี้ครับ

ดูตัวอย่างตารางแบบฟอร์มแนวนอน

3. ตารางแบบยึดหัวตาราง (Float Thead Table)

ui-tables-05

หัวตารางที่ยึดติดด้านบนหน้าจอตลอดเมื่อเลื่อนดูข้อมูลด้านล่าง

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

ดูตัวอย่างตารางแบบยึดหัวตาราง

4. ตารางแบบให้แก้ไขข้อมูลได้ (Editable Table)

ui-tables-06

ตารางที่สามารถแก้ไขข้อมูลได้

ตามชื่อก็บอกยี่ห้อ ข้อมูลในตารางประเภทนี้จะยอมให้เราสามารถแก้ไขข้อมูลได้โดยตรง ลักษณะการใช้งานของตารางประเภทนี้จะเหมาะกับงานที่ต้องการทดสอบฟังก์ชันการคำนวณค่า เช่น ถ้าเราลองลองเปลี่ยนค่าตัวแปรต้นทุน เราจะได้กำไรเท่าไร? เป็นต้น

ดูตัวอย่างตารางแบบให้แก้ไขได้

5. ตารางแบบแถวเปิด/ปิด (Foo Table)

ui-tables-07

สถานะตอนยังไม่แสดงคอลัมน์ที่ถูกซ่อนไว้

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

ui-tables-08

สถานะเมื่อคลิกแสดงข้อมูลคอลัมน์ที่ซ่อนไว้

พอคลิกไอคอน + ที่แถวแรก ก็จะเป็นการแสดงผลแบบฟอร์มแนวเรียงแถวเหมือนอย่างตารางประเภทที่ 2 เวลาดูบนมือถือครับ

ดูตัวอย่างตารางแบบแถวเปิด/ปิด

6. ตารางข้อมูลซับซ้อน (Data Table)

ui-tables-09

ตารางที่มีข้อมูลหลายคอลัมน์(ซ้บซ้อน) พร้อมฟังก์ชันช่วยค้นหา

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

ui-tables-10

ส่วนด้านท้ายของตารางข้อมูลซับซ้อน

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

ui-tables-11

ตัวกรองที่ด้านท้ายของตาราง

ล้ำไปอีก ก็อาจทำเป็นฟังก์ชันตัวกรองให้เราเลือกดูเฉพาะข้อมูลที่สนใจเท่านั้น ในตัวอย่างทำไว้ที่ท้ายตารางก็ดูเข้าท่านะ (ไมมีแสดงในหน้าลิงค์ตัวอย่าง)

ui-tables-12

ตัวกรองในหัวของตาราง

หรือจะไปทำตัวกรองที่หัวตารางก็ไม่ว่ากัน ตัวอย่างผมอยากดูข้อมูลว่ามีผู้ชายขึ้นต้นด้วย W กี่คน ผมก็พิมพ์ Male ลงในช่อง Gender

ui-tables-13

ผลลัพธ์ตัวกรอง

แล้วก็พิมพ์ตัว W ที่่ช่อง Name ก็จะได้ผลลัพธ์ออกมาว่า มีผู้ชายทีชื่อขึ้นต้นด้วย W แค่คนเดียวเอง

ui-tables-14

ช่องค้นหาแบบมีขอบเขต

หรือจะทำเป็นช่องค้นหาที่บอกขอบเขตการค้นหาเฉพาะคอลัมน์ก็เยี่ยมดีแท้ ตัวอย่างด้านบนมีช่องค้นหาขอบเขตข้อมูล 3 แบบ คือ ช่องค้นหาเฉพาะชื่อ ช่องค้นหาข้อมูลทั้งหมด และช่องค้นหาเฉพาะอีเมล

ui-tables-20

การแสดงผลของตารางข้อมูลซับซ้อนบนมือถือ

ส่วนเรื่องการแสดงผลบนมือถือ ก็จะคล้ายๆ กับแบบที่ 5 (เปิด/ปิด เพื่อดูเพิ่ม) ซึ่งถ้าเป็นข้อมูลเยอะๆ น่าจะดูยากพอตัวนะครับ

ดูตัวอย่างตารางข้อมูลซับซ้อน

ui-tables-21

การแสดงผลของตารางข้อมูลซับซ้อนบนมือถือเมื่อคลิกเลือกดูคอลัมน์ที่ซ่อน

 

7. ตารางแบบ Responsive (Responsive Table)

ui-tables-15

การแสดงผลของตารางที่รองรับการแสดงผลแบบ Responsive แม้จะมีหลายคอลัมน์

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

ui-tables-17

การกำหนดคอลัมน์หลักของตารางแบบ Responsive

ตัวอย่างนี้ คอลัมน์ Movie Title ถูกกำหนดให้เป็นคอลัมน์หลัก จะติดยึดฝั่งซ้ายตลอดแม้เราจะเลื่อนดูคอลัมน์อื่นที่อยู่ด้านขวา

ดูตัวอย่างตารางแบบ Responsive

ui-tables-18

ตัวเลือกแสดงผลคอลัมน์

จากนั้นให้เราลองเปลี่ยนไปเป็นโหมด Toogle จะเห็นว่าลูกศรเลื่อนหน้าจะเปลี่ยนเป็น dropdown เพื่อให้เราเลือกว่าเราต้องการแสดงผลคอลัมน์ไหนบ้าง ซึ่งเป็นการให้อิสระเลือกดูข้อมูลที่เราสนใจจริงๆ

ui-tables-19

การแสดงผลแบบแถวเมื่อเลือกโหมด Stack และเรียกดูบนหน้าจอขนาดเล็ก

โหมดสุดท้ายคือ Stack ก็คล้ายๆ กับประเภทที่ 2 แต่ในตัวอย่างค่อนข้างแบ่งกลุ่มแถวได้ไม่ค่อยชัดเจนเท่าไรนัก

ดูตัวอย่างตารางแบบ Responsive

เลือกตารางไหนดี?

benefit-comparing

สรุปคุณสมบัติของตารางประเภทต่างๆ

หากตารางของเราจำเป็นต้องแสดงผลบนมือถือและปริมาณช้อมูลค่อนข้างมาก ตัวเลือกตารางประเภทที่ 2 (แบบฟอร์มแนวนอน) และ 7 (ตาราง responsive) ก็เป็นตัวเลือกที่น่าจะเข้าท่ามากที่สุดในความคิดของผมนะครับ ในโปรเจ็คดังกล่าว ผมเลือกใช้แบบที่ 2 เพราะมันง่ายและไม่ดูซับซ้อนเกินไป แล้วไปผสมกับฟังก์ชันที่ไว้ใช้ค้นหาข้อมูลของตารางแบบที่ 6 (ตารางข้อมูลซับซ้อน) อย่างเช่น ตัวเลือกการเรียงลำดับ, ตัวเลือกการกรอง, ช่องค้นหาข้อมูล เป็นต้น

แต่ถ้าหากข้อมูลไม่มากนักตัวเลือกที่ 4 (แถวเปิด/ปิด) ก็น่าจะตอบโจทย์ได้ดีทีเดียวครับ

ซึ่งแน่นอนว่าสุดท้ายแล้ว ผมก็ไม่ได้เลือกใช้ตารางแบบใดแบบหนึ่งหรอกครับ แต่อาศัยข้อดีของตารางประเภทต่างๆ มาประกอบเป็นตารางที่เหมาะกับงานนั้นๆ ให้มากที่สุด

ต่อไปพอเจองานที่ต้องใช้ตาราง ก็ไม่ต้องกลัวอีกแล้ว เพราะเราเข้า(ใจ)ถึงตารางอย่างถ่องแท้แล้ว แถมยังอาจชอบติด(ใจ)ตารางอีกด้วย ^^

แหล่งที่มา:

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

รู้จักชั้นเชิง UI (UI Stack)

Previous article

สร้าง UI popup ให้กับเว็บด้วย Twitter โดย Nectar Ninjar

Next article

You may also like

1 comment

  1. Hello I’m Dip. Author of BDTask. I found your site very overwhelming. That’s why i want to promote my products in your website.

    Check my product details here:- https://themeforest.net/item/bdtask-bootstrap-admin-template-dashboard/19487723

    I think your site will be a great platform for promoting my product. So check my product and if you find it interesting then i request you to post my product in you excellent website.

    Thanks.

Leave a reply

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

More in UI Pattern