Information Architecture (IA) — ฉันจะออกแบบ UI ที่ User พอใจ

IA Pattern — (image by Heather Gass)

เมื่อเวลาผ่านไป การใช้งานและการออกแบบ Software นั้นถูกปรับปรุงจากการที่ทุกคนบริโภค Product ของใครบางคนอยู่

และนั่นคือสิ่งที่ทำให้เกิดการ Improve ในเรื่องของการออกแบบอยู่ตลอดเวลา จนมาถึงปี 2020 ที่เขียนบทความนี้ มีข้อมูลมากมายมหาศาลที่สามารถนำมาเป็นพื้นฐานในการออกแบบให้กับงานทุกงานได้ เหมือนกับเวลาที่เราทบทวนวรรณกรรมแล้วพบว่ามีงานวิจัยที่คล้ายกันเต็มไปหมด

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

ข้อแตกต่างระหว่างการออกแบบ Information Architecture (IA) กับการออกแบบ User Interface (UI) นั้น ควรมองว่าข้อมูลนั้นไม่ได้มาในรูปแบบภาพหรือเวคเตอร์ แต่มาในรูปของ ‘คำ’ ซึ่งคำหลักๆ ที่เรามักพบเจอในแอปก็คือ ‘คำนาม’ และ ‘คำกิริยา’ — Thanon Vongprayoon

Information Architecture คืออะไร?

Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. — https://www.usability.gov/what-and-why/information-architecture.html

Information Architecture หรือ IA พูดให้เข้าใจง่ายคือ โครงสร้างของข้อมูลทุกอย่างที่อยู่ภายในระบบ ไม่ว่าจะเป็น ข้อมูลที่ปรากฏอยู่ภายในหน้าเว็บไซต์หรือแอพพลิเคชัน รวมไปถึง ข้อมูลที่เกี่ยวข้องกับความสามารถที่ระบบมี เช่นคำว่า “พิมพ์” , “บันทึก” , “แก้ไข” และ “ลบ” เป็นต้น

ซึ่งข้อมูลเหล่านี้มักจะเป็นข้อมูลที่ต้องใช้เวลาในการเก็บรวบรวมจากทุกคนที่เกี่ยวข้องในโปรเจค ปัญหาที่สำคัญคือ ข้อมูลที่เราได้มานั้น มักจะเกิดความไม่เป็นระเบียบ ทำให้เราไม่สามารถจัดลำดับความสำคัญให้กับมันได้ (ข้อมูลจากทั้งทางฝั่ง UX และ Business)

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

การค้นหา Information Architecture

หลังจากทำการเก็บรวบรวม User journey มาแล้ว เราจะทำการหาคำตอบของ 3 สิ่งนี้ได้แก่ Users , Content และ Context เมื่อเราได้ครบทั้ง 3 สิ่งแล้ว เราจะสามารถออกแบบ UI ที่เหมาะสมกับการใช้งานและตรงตามเป้าหมายทางธุรกิจ

Information Architecture (image by eventbrite)

ประกอบไปด้วยสามส่วนได้แก่

1. User : ทำการค้นหา User ที่จะใช้งานระบบๆนี้ ประกอบไปด้วย งานที่เค้าทำในระบบ , ความต้องการที่เค้าใช้ระบบ , ข้อมูลของระบบที่จำเป็นในการใช้งานของเค้า และ Experience
2. Context : ค้นหาบริบทของ User แต่ละคน หรือ บริบทของ User ที่เป็นเจ้าของข้อมูล, เป้าหมายทางธุรกิจ , บริบทของงานที่นำข้อมูลไปใช้ , ข้อมูลที่มีอยู่ในระบบ
3. Content : ค้นหาว่าข้อมูลอะไรที่มาตอบโจทย์ Context หรือที่ถูกใช้ใน Context นั้นๆ

เมื่อเราค้นหาทั้งสามสิ่งนี้ได้ เราจะค้นพบว่า

• เรากำลังออกแบบให้ใครใช้
• คนที่ใช้ ใช้มันทำงานอะไร ใช้อย่างไร
• ระหว่างที่ใช้งาน ต้องการข้อมูลอะไรบ้าง

ขั้นตอนต่อไปคือเริ่มลงมือวาด Wire frame ให้เหมาะสมกับ IA ที่ได้มา และสุดท้ายจะได้ UI ที่เหมาะสมกับธุรกิจของเรานั่นเอง

Information Architecture Should Be Priority #1 — (Image by Shari Thurow)

แล้วเราใช้ IA ตอนไหนในโปรเจค Software นะ?

The goal of information architecture is to classify the content in a clear and understandable way and arrange it according to relations between the content pieces, allowing users to find what they need with less effort. — altexsoft

สำหรับคนที่เคยเจอปัญหา UI ที่ออกแบบมีข้อมูลที่เยอะเกินไป บาง field user ไม่ต้องใช้ designer ก็ใส่มาเผื่อ จนมันยุ่บยั่บไปหมด ลองเอา information architecture ไปช่วยในการตัดส่วนที่เกิน เติมส่วนที่ขาด ด้วยการจับประเด็น User , Context และ Content ที่จำเป็นใน task นั้นๆ

เนื่องจากการที่เราจะเริ่มจัดการกับข้อมูลต่างๆของระบบได้นั้น เราจะต้องทำการค้นหาจุดประสงค์ของโปรเจคก่อน รวมไปถึง experience ต่างๆที่ได้ทำการ Research มาจนละเอียดพอที่จะออกแบบ UI ได้แล้ว การทำ IA จึงทำในขั้นตอนก่อนที่จะออกแบบ wireframes เพื่อให้ได้ design UI ที่เหมาะสมกับการใช้งานของ User ไม่ว่าจะเป็นตอนที่เริ่มโปรเจคใหม่ หรือในสถานการณ์ที่เราต้องการทำการ Re-Design UI ที่มีในปัจจุบัน

ก่อนจบบทความมาดูตัวอย่างของการออกแบบ UI ที่ไม่ดี กันสักหน่อย

https://www.nytimes.com/ (image by Nathan Sleeter)

ภาพด้านบนเป็นหน้าตาในอดีตของเว็บไซต์ของ The New York Times หนังสือพิมม์รายวันของนิวยอร์ก ซึ่งออกแบบมาโดยยึดหลักการว่า “ต้องการให้เว็บไซต์เป็นเหมือนกับหนังสือพิมพ์ออนไลน์” จึงออกมาหน้าตาแบบนี้

• คุณมองภาพนี้แล้วตอบได้ไหมว่าส่วนไหนคือส่วนที่สำคัญที่สุด
• ต้องใช้เวลาในการมองทั้งหน้านี้กี่นาทีเมื่ออยากจะ filter เพื่ออ่านข่าวที่เกี่ยวกับ “Travel”
• คุณกรอกลูกตากี่ครั้ง กว่าจะรู้ว่ามีอะไรให้อ่านบ้าง

มีตัวอย่างคำคอมเม้นที่น่าสนใจจากผู้ใช้ว่า

“ฉันอ่านข่าวของ New York Times ในช่องทางออนไลน์อยู่ตลอด แต่ฉันไม่เคยอ่านจากหน้าเว็บไซต์ที่เป็นของ New York Times โดยตรงเลย เพราะทุกครั้งที่เข้าไปฉันรู้สึกว่ามันคือหนังสือพิมพ์ ไม่ใช่เว็บไซต์ เหมือนกับ New York Time กำลังบอกว่า อย่ามาอ่านฉันในอินเตอร์เน็ตอีก”

นี่แหละคือตัวอย่างของการที่ไม่สนใจการออกแบบ Information Architechture เว็บไซต์นี้สร้างขึ้นมาเพื่อให้ User ใช้ในการอ่านข่าว แต่กลับยึดเอาตามแค่ Model ของธุรกิจตัวเองเป็นหลัก ถ้ามีการเก็บข้อมูล User , Context และ Content ก่อนการออกแบบก็คงจะไม่เกิดเว็บไซต์หน้าตาเหมือนหนังสือพิมพ์แบบนี้แน่ๆ — จริงมั้ย?

ธุรกิจของหนังสือพิมพ์ New York Times นั้นเป็นหนังสือพิมพ์ชื่อดัง ดังนั้นโอกาสที่จะมี Traffic ในการเข้าเว็บไซต์จำนวนมากเป็นเรื่องที่เดาได้ไม่ยากเลย แต่กลับพลาดในเรื่องของการออกแบบอย่างน่าเสียดาย คุณคิดดูว่าเขาเสียผลประโยชน์ที่ควรจะได้ ไปมากเท่าไหร่แล้ว

ท่องเอาไว้ User , Context , Content!

Draw How to Make Toast — แก้ไขปัญหาทางธุรกิจด้วยการช่วยกันปิ้งขนมปัง

ขอบคุณที่อ่านจนจบนะคะ

อ้างอิง : https://natesleeter.wordpress.com/2012/09/13/information-architecture-good-and-bad/