คู่มือที่ครอบคลุมสำหรับสถาปัตยกรรมสารสนเทศ

ฟังเวอร์ชั่นเสียงของบทความนี้

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

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

อย่างไรก็ตาม การพัฒนาฟีเจอร์นั้นไม่ง่ายเหมือนการรวมรายการคุณสมบัติและการทำแผนที่วิธีการทำงาน เรามาตรวจสอบกระบวนการกัน

สถาปัตยกรรมสารสนเทศคืออะไร และเหตุใดจึงสำคัญ

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

เราจะใช้การอ้างอิงพิมพ์เขียวบ่อยๆ เนื่องจากวัตถุประสงค์ของเอกสารทั้งสองฉบับเกือบจะเหมือนกัน เช่นเดียวกับพิมพ์เขียว IA ให้นักออกแบบ (รวมถึงทีมพัฒนาผลิตภัณฑ์และทีมวิศวกรรม) ได้เห็นภาพผลิตภัณฑ์ทั้งหมดจากมุมสูง การมีเอกสารฉบับเดียวที่แสดงให้เห็นวิธีการทำงานของแอปพลิเคชันหรือเว็บไซต์ที่เข้าใจง่ายและเข้าใจง่ายนั้นมีความสำคัญต่อการพัฒนาคุณลักษณะใหม่ การอัปเดตคุณลักษณะที่มีอยู่ และการดูสิ่งที่เป็นไปได้เมื่อพิจารณาจากผลิตภัณฑ์ที่มีอยู่

ด้วย IA ที่พร้อมใช้งาน การตัดสินใจที่สำคัญสำหรับคุณลักษณะและการนำไปใช้งานใหม่ เข้าใจลำดับเวลาสำหรับการเปลี่ยนแปลงผลิตภัณฑ์ และติดตามพฤติกรรมของผู้ใช้ผ่านกระบวนการต่างๆ ได้ง่ายขึ้น

มาเจาะลึกในวิดีโอพื้นฐานเพื่อดูว่า IA ถูกสร้างขึ้นมาอย่างไร

วิธีการออกแบบสถาปัตยกรรมสารสนเทศ

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

มีข้อกำหนดหลักสองประการสำหรับการสร้าง IA จริงๆ: การจัดระเบียบผ่านลำดับชั้นของภาพ (กล่าวคือ ลำดับชั้นของคุณลักษณะ ฟังก์ชัน และพฤติกรรม) และการสร้างคำอธิบายสำหรับการแสดงคุณลักษณะ การโต้ตอบ และโฟลว์ประเภทต่างๆ ด้วยผังงานมาตรฐาน รูปร่างเป็นไปตามข้อกำหนดเฉพาะ (สี่เหลี่ยมผืนผ้าคือกระบวนการ เพชรคือจุดตัดสินใจ ฯลฯ) อย่างไรก็ตามการตั้งชื่อตามนั้นไม่ใช่ข้อกำหนด

กล่าวอีกนัยหนึ่ง ปัจจัยที่สำคัญที่สุดในการสร้าง IA ของคุณคือตำแหน่งที่องค์ประกอบแต่ละส่วนของสถาปัตยกรรมถูกจัดวาง (ตามลำดับชั้น) และการติดป้ายกำกับและแสดงผลอย่างไร

ทำความเข้าใจและแสดงลำดับชั้นภาพ

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

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

การแสดงลำดับชั้นของภาพเป็นทรัพย์สินที่มีค่าสำหรับ IA ไม่เพียงเพราะจะให้บริบทที่ดีขึ้นสำหรับผู้อ่าน แต่ยังทำให้ภาพรวมขอบเขตหลักของผลิตภัณฑ์ด้วย หากคุณสมบัติที่สำคัญที่สุดของแอปของคุณคือการเรียกรถ (a la Uber หรือ Lyft) ซึ่งสามารถทำได้จากหน้าแรก หน้านั้นจะมีจุดติดต่อลูกค้ามากที่สุดและมีคุณค่าต่อผลิตภัณฑ์มากที่สุด เช่นเดียวกับลำดับชั้นภาพ

แผนผังเว็บไซต์มีประโยชน์ในการทำความเข้าใจลำดับชั้นเนื่องจากจัดระเบียบหน้าเว็บเป็นตัวเลข (เช่น 1.0 Home, 2.0 Payment, 2.1 Add Pay Method เป็นต้น) หรือพิจารณาตัวอย่างในภาพด้านล่างสำหรับเว็บไซต์ห้องสมุดของ Duke University ซึ่งการนำทางด้านบนไม่ได้อยู่ที่ด้านบนเท่านั้น แต่ยังเน้นให้มองเห็นได้ทั่วทั้งแอปพลิเคชัน

ลำดับชั้นของรูปทรง สี และองค์ประกอบภาพอื่นๆ

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

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

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

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

เครื่องมือสถาปัตยกรรมข้อมูลที่ดีที่สุด

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

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

Lucidchart เป็นเครื่องมือที่ยอดเยี่ยมอีกตัวหนึ่งที่ให้ประสบการณ์ที่ดีกว่า Draw.io เล็กน้อย และมีประโยชน์เพิ่มเติม เช่น เทมเพลตที่สร้างไว้ล่วงหน้า การผสานการทำงานอื่นๆ มากมาย แอปบนอุปกรณ์เคลื่อนที่ (ให้คะแนน 2.5 ดาวบน App Store) และการสนับสนุนสำหรับองค์กร

Omnigraffle และ Visio เป็นแกนนำในอุตสาหกรรมมาเป็นเวลานาน และทำงานได้อย่างยอดเยี่ยมสำหรับการสร้างและบำรุงรักษาการออกแบบ IA แม้ว่า Visio จะออนไลน์เท่านั้น (เวอร์ชันออฟไลน์ที่เก่ากว่าคือ Windows เท่านั้น) ในขณะที่ Omnigraffle เป็น Mac เท่านั้น และต้องซื้อแยกต่างหากสำหรับ MacOS และ iOS รุ่น OmniGraffle มีประโยชน์อย่างหนึ่งเหนือคู่แข่งรายใหญ่ตรงที่มันให้การทำงานอัตโนมัติของ JavaScript และ AppleScript ซึ่งสำหรับนักออกแบบส่วนใหญ่อาจไม่จำเป็น แต่โดยทั่วไปแล้ว สถาปนิกด้านข้อมูลเต็มเวลาก็ชอบใจ

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

แนวทางปฏิบัติที่ดีที่สุดด้านสถาปัตยกรรมสารสนเทศ

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

อย่าเน้นที่ลำดับชั้น เน้นที่โครงสร้าง

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

กระบวนการทั้งหมดควรมีเหตุผล

แม้ว่า IA ในกระบวนการ UX นั้นมีไว้สำหรับการโต้ตอบกับผู้ใช้ ทุกขั้นตอนต้องสมเหตุสมผล หน้าจอการลงทะเบียนไม่ควรนำไปสู่การตั้งค่า ฟังก์ชันกล้องไม่ควรข้ามไปยังมุมมองแผนที่...รายการจะดำเนินต่อไป

จดจำกระบวนการ UX

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

คุณคือนักทำแผนที่

นักทำแผนที่นำทุกสิ่งที่เกี่ยวกับแผนที่มาพิจารณา ตั้งแต่เทือกเขาไปจนถึงพรมแดนของรัฐ เช่นเดียวกับผู้สร้างแผนที่ นักออกแบบเป็นผู้กำหนดสิ่งที่จะรวมอยู่ในการออกแบบ IA หน้าแต่ละหน้า พฤติกรรมเฉพาะของผู้ใช้ บริบทสำหรับประเด็นการตัดสินใจ... และอื่นๆ

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

สถาปัตยกรรมสารสนเทศมีการเปลี่ยนแปลงและพัฒนาตลอดเวลา

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

สถาปัตยกรรมข้อมูลของฉันเสร็จสิ้นแล้ว ... อะไรนะ?

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

และนั่นเป็นสิ่งที่ดี การรู้ว่า IA เป็นเอกสารที่ลื่นไหล—เอกสารที่มีแนวโน้มว่าจะเปลี่ยนแปลงทุกสัปดาห์และบางครั้งถึงแม้จะเป็นรายวัน—เป็นวิธีที่มีประสิทธิภาพในการรักษาโครงสร้างโดยรวมของแอปหรือเว็บไซต์ของคุณโดยไม่ต้องแตะโค้ดหรือสร้างต้นแบบใหม่ ยิ่งทีมพัฒนาผลิตภัณฑ์ทั้งหมด รู้จัก IA ดีเท่าไร ทุกคนก็จะยิ่งรู้ว่าอะไรเป็นไปได้และเป็นไปไม่ได้เร็วเท่านั้น และ "งานง่าย" ที่คิดว่าเป็นงานง่ายจริงๆ นั้นจริงจังแค่ไหน

ซึ่งนำเราไปสู่ความงามที่แท้จริงของสถาปัตยกรรมข้อมูล: ไม่มีจุดเริ่มต้นที่กำหนดไว้ล่วงหน้า ในขณะที่กระบวนการออกแบบ UX แบบดั้งเดิมนั้นกำหนดว่า IA นั้นถูกสร้างขึ้นหลังจากเสร็จสิ้นขั้นตอนของผู้ใช้ที่เพียงพอ ด้วยผู้ใช้จำนวนมากและการวิจัยเชิงแข่งขัน มันสามารถเป็นสิ่งแรกที่ทำ…หรือสิ่งสุดท้าย กระบวนการสร้างต้นแบบมักจะให้ข้อมูลว่าพฤติกรรมหรือการกระทำบางอย่างควรเกิดขึ้นได้อย่างไร ซึ่งยากต่อการจินตนาการจาก IA ที่มีเหตุผลหรือเหนือจินตนาการ

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

• • •

การอ่านที่แนะนำเกี่ยวกับสถาปัตยกรรมสารสนเทศ

IA สำหรับเว็บและอื่น ๆ

วิธีทำความเข้าใจความยุ่งเหยิง: สถาปัตยกรรมข้อมูลสำหรับทุกคน

ข้อมูลพื้นฐานสถาปัตยกรรมสารสนเทศ

ความแตกต่างระหว่างสถาปัตยกรรมสารสนเทศและการออกแบบ UX

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง