พื้นฐานของการสร้างของให้คนใช้ง่าย (ตอน 1) — จัดการกับ Information รกรุงรัง เพื่อให้ users รับข้อมูลได้มากขึ้น

Pij Pruxus
1 Jun 2020

1k

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

การที่เราเปิดดู (ส่อง) โซเชียลทั้งวัน ก็เพื่อเสพย์ “ข้อมูล” เกี่ยวกับเพื่อนฝูง, ดารา, การเปิด Google ก็เพื่อหา “ข้อมูล” ข่าวสาร, ของกิน, สถานที่เที่ยว ฯลฯ อีกมากมาย ทุกอย่างก็คือ “ข้อมูล” ทั้งนั้น ซึ่งการที่คนยุคนี้เสพย์ข้อมูลกันมากขึ้น มันก็เลยทำให้ ยุคนี้คนเรามีปัญหาเรื่องเกี่ยวกับข้อมูลมากที่สุดเท่าที่เคยมีมา กันเลยก็ว่าได้ครับ

 

ข้อมูลไม่ได้มีแค่ใน online โลก offline ก็มีข้อมูลเยอะได้ ร้านเครื่องไฟฟ้า Yodobashi Camera โตเกียว กับป้ายแสดงข้อมูลของแอร์แต่ละเครื่อง ที่เยอะมหาศาล — Source K.Bur

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

 

ป้ายหาเสียงที่มีเต็มถนนไปหมดในช่วงนี้ (ต้นมีนา 62) ที่แย่งกันดึงดูดความสนใจของคนสัญจรไปมา https://www.thairath.co.th/content/1499511

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

แล้วคนเราเลือกอ่านหรือดูข้อมูลกันยังไงล่ะ?

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

 

http://www.topdesignmag.com/20-examples-of-bad-web-design/

คนเรา ไม่อ่าน

 

รูป 1 — http://www.barclayrae.com/too-much-information-v-2/

 

รูป 2 — http://www.satukyrolainen.com/cartoons/ux-cartoons/usability-vs-usefulness/

รูปการ์ตูนด้านบนนี้ทั้ง 2 รูป คุณได้อ่านตัวอักษรบ้างไหมครับ (ห้ามเลื่อนขึ้นไปอ่านใหม่นะครับ)

รูป 1 คุณได้อ่านที่คุณแว่นด้านบนพูดซักคำไหมครับ และถ้าอ่าน อ่านซักกี่ % ของทั้งหมดนั่นครับ?

และถ้าเทียบกัน 2 รูปบน คุณอ่านตัวอักษรจากรูปไหนมากกว่ากันครับ?

คนส่วนมากมักจะอ่านตัวอักษรบนรูป 2 นะครับ บางคนก็อาจจะดูแต่รูป แต่ไม่ได้อ่านอะไรเลยซักคำด้วยซ้ำ
สาเหตุที่รูป 2 มีโอกาสที่คนอ่านสูงกว่า ก็เพราะว่ามันมีตัวอักษรน้อยกว่านี่หละ

ยิ่งตัวอักษรเยอะและแน่นเท่าไหร่ คนเรายิ่งไม่อ่านเท่านั้น

แล้วทำไมคนเราถึงไม่ค่อยอ่านตัวอักษร (text) กัน?

คำตอบง่าย ๆ ก็คือ “การอ่าน text มันเหนื่อย” เพราะมันต้องใช้พลังงานมากกว่าการดูแค่รูปครับ ซึ่งนี่เป็นพื้นฐานสำคัญของการออกแบบการแสดงข้อมูลเลยครับ
หลายๆ ครั้งเคยเจอคนที่ทำงานออกแบบการแสดงผลข้อมูล แต่ไม่คำนึงว่าคนเราไม่ได้อ่านทุกคำ กลับเอาข้อมูลที่สำคัญ ๆ ไปวางในจุดที่มองยาก ทำให้ users พลาดในข้อมูลสำคัญ ๆ เช่นข้อกำหนดและเงื่อนไขที่สำคัญต่อการใช้งาน หรือการใส่ข้อมูลโฆษณาไปเยอะแยะ จนทำให้ users มองหาปุ่มที่ต้องกดเพื่อใช้งานแอปจริง ๆ ไม่เจอ เป็นต้นครับ

เรื่องการอ่าน text ของคนเรานี่ มีหนังสือที่อธิบายไว้ดีมาก ที่เรียกได้ว่าเป็นหนังสือคลาสสิกของวงการ UX เลย นั่นก็คือ Don’t Make Me Think ของ Steve Krug ครับ

 

เวลาที่ users เข้ามาบนหน้าเพจ จะสแกนด้วยความรวดเร็วเพื่อหาของที่เค้าต้องการ ซึ่งถ้าในเวลาที่ users กะไว้ในใจยังหาของไม่เจอ users ก็จะไม่ทนอ่านต่อ แต่จะออกจากเว็บไปเลย

We don’t read, we scan — คนเราไม่ได้ตะบี้ตะบันอ่านไปซะทุกอย่างที่สายตามองเห็น แต่จะเริ่มจากการ scan หาสิ่งที่ “น่าจะ” ตรงกับข้อมูลที่ตนต้องการก่อน จากนั้นจึงอ่านจริง แค่ที่จุดนั้น ๆ ครับ

นอกจากนี้ มี research ที่น่าสนใจเหมือนกัน จากเว็บไซต์ของ Nielson Norman Group website (ซึ่งจะเป็นแหล่งที่ผมใช้อ้างอิงข้อมูลอีกบ่อยมากๆ นะครับ) เค้าก็เคยทำ research เรื่องนี้ และสรุปเป็นกราฟไว้ดังนี้ครับ

 

Source: https://www.nngroup.com/articles/how-little-do-users-read/

บางคนเห็นกราฟด้านบนนี้อาจจะตกใจ แต่จริง ๆ ไม่ต้องตกใจนะครับ
กราฟนี้สรุปง่าย ๆ ว่า ยิ่งมีปริมาณคำบนหน้าเยอะเท่าไหร่ users ยิ่งอ่านน้อยลงเท่านั้น สรุปสั้น ๆ คือ เว็บเพจปกติที่เค้าทดลอง มีคำประมาณ 600 กว่าคำ ซึ่งโดยเฉี่ยแล้ว users ก็จะอ่านแค่ประมาณ 20–28% ของเนื้อหาที่แสดง เท่านั้นเองครับ

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

การ scan ก่อนการอ่านจริงของคนเรา มันเป็นสิ่งที่คนเราเรียนรู้เองโดยอัตโนมัติมาก ๆ จนมีสิ่งนึงที่เรียกว่า Banner Blindness เกิดขึ้นด้วยครับ นั่นคือถ้า users scan เจออะไรที่หน้าตาดูเหมือนโฆษณา users จะมองข้ามส่วนที่หน้าตาทันทีโดยอัตโนมัติ

 

Banner Blindness Eye-tracking Heat Map — สีแดงๆ คือส่วนที่ users ดูมากเป็นพิเศษ สีเหลืองคือดูบ้าง ส่วนที่ไม่มีสี คือ users ไม่มองด้วยซ้ำครับ จะเห็นว่าคนเข้าจะรู้ตัวได้ว่ากล่องด้านขวานั่นคือโฆษณา และจะไม่แม้แต่จะมองเลยด้วยซ้ำ

แล้วเราควรจะทำยังไงละ? สิ่งแรกที่ผมคิดว่าทุกคนที่ทำงานด้านการสร้างสรรค์ทุกอย่างที่เกี่ยวข้องกับข้อมูล ควรต้องเริ่มทำ ก็คือ การทำ Information Architecture และ Information Design ครับ


Information Architecture และ Information Design

มีศาสตร์ที่เกี่ยวข้องกับการจัดการข้อมูลให้ users เข้าใจง่าย ที่มีมานานมากแล้วนะครับ นั่นคือ Information Architecture (หรือ IA) และ Information Design (ไม่แน่ใจว่ามีคนใช้คำย่อกันหรือเปล่าครับ -_-” )

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

ความแตกต่างของสองด้านนี้คือประมาณนี้ครับ:

Information Architecture

จะโฟกัสไปยังการ จัดระเบียบข้อมูลและการตั้งชื่อ (organization and labeling) เพื่อทำให้ข้อมูลที่ปริมาณมาก ซับซ้อน เกิดโครงสร้างที่มีความสัมพันธ์กันขึ้นมา ซึ่งจะทำให้ข้อมูลเหล่านี้เข้าใจได้ง่ายขึ้น และช่วยให้ users หาของที่ต้องการได้ง่ายขึ้น ซึ่งจะเกิดจากการที่เราต้องทำความเข้าใจใน information ให้ดีก่อน เข้าใจว่าสิ่งที่สำคัญ/ไม่สำคัญในมุมมองของ users คืออะไร จากนั้นก็ลงมือจัดกลุ่มข้อมูล และลองตั้งชื่อมันซะ

 

ตัวอย่างการทำ info architecture — สมมุติว่าร้านโชห่วยแห่งหนึ่ง มีสินค้าขายตามนี้ ปัญหาคือถ้าสินค้าเหล่านี้วางกระจายไปทั่วร้าน เจ้าของร้านก็มีโอกาสจำไม่ค่อยได้ว่าอะไรอยู่จุดไหนบ้าง

 

หลังจากทำ info architecture คร่าว ๆ เริ่มจัดกลุ่มให้ information และตั้งชื่อ (labels) เข้าไป จากสินค้า 10 ประเภทที่ต้องจำ ตอนนี้เหลือต้องจำแค่ 5 ประเภทก็พอครับ แล้วเอาสินค้าประเภทเดียวกันไปวางด้วยกันซะ ซึ่งจะช่วยให้ทั้งเจ้าของร้านและลูกค้า สามารถหาของเจอได้ง่ายขึ้น

 

ตัวอย่างการทำ information architecture ของเว็บไซต์ ซึ่งสิ่งที่ได้นี่คล้าย ๆ กับ site map แต่ก็ไม่เหมือนซะทีเดียวครับ (รายละเอียดจะลงใน blog ต่อ ๆ ไป)

Information Design

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

ด้านนี้จะค่อนข้างออกไปทางสาย Graphic/Visual Design ครับ แต่จริง ๆ ก็สำคัญกับทุก ๆ คน ไม่ว่าจะคนทำ UX, dev, หรือแม้คนสาย business ที่ต้องทำ presentation นะครับ เพราะมันคือการเข้าใจถึงเทคนิคที่จะทำให้คนเข้าใจในข้อมูลที่เราต้องการนำเสนอได้ชัดเจนและถูกต้องครับ

ตัวอย่างปัญหาด้าน Info Design ที่มักจะโดนพูดถึงบ่อย ๆ ก็คือการแสดงข้อมูลสถานีและขบวนรถไฟ ของ BTS และ MRT

 

 

การแสดงข้อมูลสถานี และขบวนรถไฟ ของสถานี MRT สิงคโปร์ และบนรถไฟ BTS บางคันของไทยเรา ซึ่งแต่ละแบบก็มีข้อดีและเสียที่แตกต่างกันไป

 

การแสดงข้อมูลตัวเลขให้เข้าใจง่าย ในการทำ presentation ก็ถือเป็น information design ครับ ควรใช้กราฟแบบไหน จัดวางอย่างไร เพื่อให้ผู้ฟังเข้าใจสาส์นที่เราต้องการสื่อให้ดีที่สุด https://www.microsoft.com/en-us/microsoft-365/blog/2012/08/21/tips-for-turning-your-excel-data-into-powerpoint-charts/

 

การออกแบบ UI แอปธนาคารต่าง ๆ สิ่งที่สำคัญที่สุดก็คือการทำ information design นี่หละครับ เพื่อแสดงข้อมูลที่ users ต้องการที่สุด ให้เข้าใจง่ายที่สุด ซึ่งแต่ละธนาคารก็มีจุดที่เหมือนและแตกต่างกันออกไป

ใน blog ต่อ ๆ ไป เราจะมาลงรายละเอียดเพิ่มเติมเกี่ยวกับการ Information Architecture และ Information Hierarchy และการนำไปประยุกต์ใช้นะครับ

พบกันใหม่เร็ว ๆ นี้ครับ :-)


สามารถติดตามข้อมูลข่าวสารความรู้ด้าน User Experience Design และ Research ได้ที่เพจ http://www.facebook.com/pruxusdesign นะครับ


pruxus

About us

We are a Bangkok, Thailand-based UX consulting agency that is passionate in helping our clients overcome their user experience challenges through our systematic user-centered design process.
We firmly believe that focusing on people first is the key to success for any business in the digital era.

Let’s talk

Whether you are looking for some help with UX challenges, want to get in touch with us, or just interested to learn more and request our portfolio, feel free to say hello to us!

hello@pruxus.com

Message us

Follow us