Information Architecture — เรื่องที่ UX Designer ไม่ควรมองข้าม
หลายๆ ครั้งที่เรา UX Designer มักจะได้ยินคำว่า Information Architecture (IA) หรือ ‘สถาปัตยกรรมข้อมูล’ แล้วมักมองข้ามเพราะเห็นว่าเป็นเรื่องไกลตัว เป็นเรื่องของ Developer มากกว่า หรือมักคิดว่ามันก็คล้ายๆ กับการวาง Wireframe ทำควบๆ กันไปก็ไม่น่ามีปัญหาอะไร
ในบทความนี้เราจะทำการขยายความรู้ ความเข้าใจเกี่ยวกับ IA โดยอิงจาก
Apple Music เพื่อให้เห็นว่า IA มีบทบาทสำคัญต่อการออกแบบประสบการณ์ให้
กับผู้ใช้อย่างไร
ก่อนอื่นเลย…What is Information Architecture ?
Information Architecture คือโครงสร้างข้อมูลทุกอย่างที่อยู่ภายในแอปหรือเว็บไซต์ การเข้าถึงข้อมูลสินค้าหรือบริการที่ง่าย มักเกิดจากการวาง IA อย่างเป็นระบบ การจัดการกลุ่มข้อมูลที่ยุ่งยากให้เป็นระเบียบ จึงเป็นงานของ UX Designer ซึ่งไม่ต่างอะไรจากการที่สถาปนิกวางแผนโครงสร้างในพิมพ์เขียว ก่อนที่จะส่งแบบต่อ ไปให้วิศวกรเพื่อลงมือสร้างจริง
เปรียบเทียบให้ชัดขึ้น ถ้าเรามอง Information Architecture เป็นโครงสร้างอาคาร ข้อมูลที่สำคัญๆ ต่างๆ ก็ไม่ต่างจากเสาหลักที่จะมาค้ำโครงสร้างอื่นๆ ไม่ว่าจะเป็น ฟีเจอร์แต่ละฟีเจอร์ การเข้าถึงหน้าในแต่ละหน้า คอนเทนต์ต่างๆ ที่จะวางอยู่ในหน้านั้นๆ หรือแม้กระทั่งกราฟิกที่จะเอามาใช้ในแต่ละหน้า ทั้งนี้ล้วนมาจากการวาง
ข้อมูลแผนผังที่เป็นระบบ การที่เรามีโครงสร้างที่แข็งแรงแต่ตอนแรก จะทำให้การต่อเติมส่วนต่างๆ นั้นเป็นไปได้ง่ายขึ้น
การออกแบบ Information Architecture ที่ดีควรคำนึงถึง 3 สิ่งหลัก
- Ontology (ภววิทยา) — การนิยาม
- Taxonomy (อนุกรมวิทยา) — การจัดหมวดหมู่และเรียงลำดับ
- Choreography(รูปแบบการเข้าถึง) — การเข้าถึง
Ontology (ภววิทยา)
Taxonomy คือการจำแนกข้อมูลต่างๆ แล้วจัดหมวดหมู่ให้อยู่ในประเภทเดียวกัน โดยวิธีจำแนกสามารถแบ่งได้เป็นเป็น 2 รูปแบบใหญ่ๆ
- Classification การจับกลุ่มข้อมูลที่อยู่ในประเภทเดียวกัน
- Hierarchy การใช้ลำดับความสำคัญในการจัดกลุ่ม เช่น ลำดับตัวอักษร ความถี่ของการใช้งาน การเรียงลำดับตัวเลข เป็นต้น
กลับมาที่ AC/DC หากเรากำลังจะจัดวาง CD ให้เข้าไปอยู่ในชั้นวาง แผ่น AC/DC ก็ควรจะถูกจัดอยู่ในประเภท Rock อีกทั้งถ้าให้เรียงลำดับตาม Hierarchy ก็ควรจะอยู่ในกลุ่มของตัว ‘A’ เพื่อความง่ายต่อการค้นหา หรือในกรณีที่มี AC/DC มี 2 อัลบั้มอาจจะเรียงลำดับตามปีที่อัลบั้มนั้นวางจำหน่าย หรือการซื้อก่อนหลังก็ยังได้
Choreography (รูปแบบการเข้าถึง)
Choreography คือการนำนิยามของข้อมูลต่างๆ(Ontology) กับการจัดหมวดหมู่(Taxonomy) มาสร้างให้เกิดการปฏิสัมพันธ์กับผู้ใช้งานตามความต้องการต่างๆ
ลองนึกภาพว่าเราจะใช้ให้น้องเข้าไปหยิบแผ่น AC/DC จากในห้อง เพื่อเอาไปคืนเพื่อน ซึ่งเมื่อน้องเห็นชั้นวาง CD น้องควรจะเห็นกลุ่มศิลปินประเภทเพลง Rock อยู่ด้วยกัน น้องไม่ควรเห็นแผ่น Classic หรือ Pop มาปนอยู่ด้วย แล้วกลุ่ม CD เพลง Rock ก็ควรเรียงตามลำดับตัวอักษร เพื่อให้ง่ายต่อการค้นหา หรือถ้าให้สะดวกกว่านั้นเราควรติด Post it บอกไว้เลยว่า แผ่นไหนคืนเพื่อนบ้าง เพื่อเวลาบอกน้องเราจะได้บอกแค่ว่าเอาแผ่นที่ติด Post it ซึ่งการจำแนกออกมาแบบนี้ก็เป็นอีกหนทางหนึ่งที่ช่วยให้น้องเข้าถึงแผ่น CD เราได้ง่ายขึ้น
Good Information Architecture is Universal
ในหลายๆ ปีที่ผ่านมาเรามักคุ้นชินกับ IA ที่ถูกออกแบบมาดีแล้ว ลองนึกกลับไปสมัยที่ iPod ยังเป็นที่นิยมอย่างแพร่หลาย หากเราต้องการฟังเพลงของ Bodyslam เราก็เพียงกดเข้าไปที่ “Artist” ตามด้วยเลือกลำดับตัวอักษร A-Z จากนั้นก็เลือกตัวอักษร B ก็จะเจอ Bodyslam ซึ่งการเข้าถึงแบบเป็น Stack แบบนี้ เป็นพฤติกรรมปกติของมนุษย์ เรามักจะเริ่มต้นการค้นหาจากอะไรที่กว้างๆ ก่อนแล้วก็ค่อยๆ ลงลึกไปในเรื่องนั้น เราเรียกลักษณะการหาแบบนี้ว่า “Drilling down”
พอถึงยุคที่มี Smartphone เราก็ยังคงเห็นลักษณะการเข้าถึงเพลงแบบ Drilling Downใน Apple Music อยู่ โดยมีฟีเจอร์การเข้าถึงเพลง(Choreography) ในรูปแบบที่หลากหลายขึ้น เช่น For You ที่จะแสดงเพลงที่เลือกสรรจาก Playlist เดิมที่เราชอบฟัง หรือเพลงที่เราฟังบ่อยๆ ส่วน Browse ก็เข้ามาช่วยเราในการค้นหาเพลงใหม่ๆ เพื่อดาวน์โหลดมาเก็บไว้ใน Library
ทำไมต้องวาง Information Architecture ก่อนออกแบบ UI
“อยากได้ Design ที่ง่ายต่อการใช้ ต้องเริ่มจากการวางโครงสร้างของข้อมูลที่ง่ายและเป็นระบบด้วย”
ถ้าให้หาข้อแตกต่างระหว่างการออกแบบ Information Architecture (IA) กับการออกแบบ User Interface (UI) นั้น ควรมองว่าข้อมูลนั้นไม่ได้มาในรูปแบบภาพหรือเวคเตอร์ แต่มาในรูปของ ‘คำ’ ซึ่งคำหลักๆ ที่เรามักพบเจอในแอปก็คือ ‘คำนาม’ และ ‘คำกิริยา’
ใน Apple Music หน้า Library สามารถจำแนกคำนามออกมาคร่าวๆ ได้ดังนี้
- Playlists
- Artists
- Albums
- Songs
- Downloaded Music
- Recently Added
คำกริยาที่พบก็มี
- Edit
- Play
- Shuffle
- Sort
- Download
- Delete
- Add to a Playlist… เป็นต้น
พอเราจำแนก Choreography ออกมาชัดๆ ก็จะทำให้เรามองเห็นกลุ่มของคำ ‘กริยา’ ที่สามารถทำ Action กับคำนามต่างๆ ได้ เช่น Play > Song , Delete > Album หรือ Shuffle > Playlist ซึ่งเราก็จะรู้แล้วว่ากลุ่มคำกริยาไหนจะถูกใช้บ่อย ควรออกแบบแบบไหนหรือจัดวางมันยังไงให้ง่ายต่อการเข้าถึง
Pattern หลังการวาง IA
หากสังเกตดีๆ เราจะเห็น Pattern ลำดับขั้นของการเข้าถึงข้อมูลที่ย่อยที่สุด(Song)
เราก็จะเห็นลักษณะ Component ที่คล้ายๆ กันคือ
เมื่อเราเห็นการรูปแบบใช้ข้อมูลซ้ำๆ เราก็จะรู้ว่าควรออกแบบข้อมูลนั้นด้วย UI Component แบบไหน เพื่อให้ผู้ใช้เข้าใจและจดจำข้อมูลที่มีลักษณะคล้ายๆ กันในแอปได้ง่ายขึ้น
คำแนะนำส่งท้าย
คิดไม่ออกก็เขียน
หลายๆ ครั้งการเริ่มออกแบบโดยการวาดเลย มักใช้เวลานานในการสร้างสรรค์ ควรลองเริ่มจากการเขียนคำต่างๆ ออกมาก่อน
“การเขียนคำที่จะอยู่ในแอปก่อน จะช่วยให้เราเปลี่ยนภาพที่อยู่ในหัวออกมาเป็นรูปธรรมมากขึ้น “
พอเห็นภาพโครงสร้างภาพรวมของข้อมูลแล้ว เราก็จะรู้ว่ากลุ่มคำหรือฟีเจอร์ไหนควรอยู่ตำแหน่งไหน รู้ว่าข้อมูลชุดไหนสามารถเชื่อมโยงกันได้ จากนั้นเราค่อยออกแบบ Wireframe การเขียนคำออกมาก่อนนั้นยังช่วยให้เราสื่อสารกับ Developer ได้ไปในทิศทางเดียวกัน อีกทั้งยังช่วย Developer เข้าใจลักษณะของการเข้าถึงข้อมูลในรูปแบบต่างๆตามการของแบบของเรา
