iUXUI Journey XII — UX Umbrella
คำว่า UX หรือ User Experience นั้น ประกอบด้วยหลายส่วนที่อยู่ภายใต้ร่มดังกล่าว ลองมาทำความเข้าใจกันหน่อย
Visual Design
การออกแบบหน้าจอหรือสิ่งที่ตาเห็น คนที่ทำหน้าที่นี้เราจะเรียกว่า UI Designer ซึ่งก็จะรับผิดชอบพวก กราฟฟิก รูปภาพ Typography ไอคอนต่างๆ ส่วนขั้นตอนการทำงานก็จะประมาณนี้ user flow > wireframe > visual design
NN/g แบ่งหลักการออกแบบในส่วนนี้ไว้เป็น 5 เรื่องด้วยกัน ได้แก่
- Scale สิ่งสำคัญมันต้องใหญ่ ไม่ว่าจะรูปหรือ font ที่สำคัญรองลงมาก็ลดไซด์ตามลำดับ แต่อย่าเกิน 3 ไซด์ เพราะมากกว่านี้ผู้ใช้เริ่มสับสนละ
- Visual hierarchy คือการกำหนดลำดับความสำคัญของสิ่งที่อยู่บนหน้าจอ เพื่อให้ผู้ใช้มุ่งความสนใจไปที่นั่น โดยใช้พวก สี ขนาด ช่องว่าง และอื่นๆ เพื่อดึงดูดสายตาของผู้ใช้ (ถ้าเปิดเข้าไปแล้วงงๆ ว่าจะต้องจ้องไปที่ไหน แสดงว่าเว็ปไม่มีการวาง visual hierarchy)
- Balance ความสมดุล (คนละความหมายกับความสมมาตร แต่จะใช้ความสมมาตรเพื่อให้สมดุลก็ได้ 😆) เป็นการจัดวาง element บนหน้าจอให้เกิดความรู้สึกสมดุล ทั้งแนวตั้งและแนวนอน ไม่รู้สึกหนักไปทางใดทางหนึ่ง ใช้ได้ทั้งวางแบบสมมาตร ไม่สมมาตร และตามรัศมีของวงกลม ก็ได้
- Contrast ใช้เพื่อเน้นความแตกต่างของสิ่งสองสิ่ง ส่วนมากจะใช้สีเป็นตัวจัดการ ซึ่งตามหลักการออกแบบที่ถนอมสายตาผู้ใช้แล้ว สองสีนี้ไม่ควรตัดกันจนปวดตา
- Gestalt แปลว่า ทั้งหมดที่รวมกัน (งงละซิ 😆) เป็นหลักการที่อธิบายการทำงานของจิตใต้สำนึกของเรา ในการรับรู้ทางด้านภาพ ว่าเราตีความสิ่งที่เราเห็นจากองค์ประกอบหลายๆ ส่วนมาประกอบกัน องค์ประกอบดังกล่าว ได้แก่ ความเหมือน (similarity), ความต่อเนื่อง (continuity), ความใกล้ (proximity), ความสมมาตร (symmetry) และจุดสิ้นสุด (closure)
ซึ่งใช้สำหรับการจัดกลุ่มของ element บนหน้าจอ
Information Architecture (IA)
แปลว่า สถาปัตยกรรมข้อมูล เป็นศาสตร์เกี่ยวกับการจัดเรียงข้อมูลอย่างเป็นระบบ ให้ใช้งานข้อมูลได้ง่ายและรวดเร็ว เพื่อนำไปทำพวก site map, menu, label, searching รวมไปถึง SEO ด้วย ถือเป็น core หลักของระบบ ที่ต้องวางให้ดี เพื่อให้เกิด usability กับผู้ใช้
มองดูเหมือนง่ายแต่ไม่ง่าย ลองอ่าน ที่นี่ เพิ่มเติม เพื่อให้เห็นภาพมากขึ้น และแบบลงรายละเอียดว่ามีหลักการออกแบบอย่างไรก็อ่านได้ ที่นี่
Interaction Design (IxD)
การออกแบบปฎิสัมพันธ์ ระหว่างผู้ใช้กับตัวผลิตภัณฑ์ (ไม่จำกัดแค่ web/app เพราะ UX จริงๆ นำไปใช้กับทุกธุรกิจ) ถ้าเป็นในเรื่องของการพัฒนา web/app IxD จะไม่ได้มองแค่ว่ากดปุ่มแล้วได้อะไร แต่จะรวมไปถึงพฤติกรรมที่ผู้ใช้ทำเลยทีเดียว
Gillian Crampton Smith แบ่งหมวดของ IxD ไว้คร่าวๆ ได้แก่
- 1D: Words: ข้อความต่าง ๆ ที่ปรากฎอยู่บนเว็บไซต์หรือแอปพลิเคชัน
- 2D: Visual representations: กราฟฟิก รูปภาพ Typography ไอคอน ที่ใช้ส่งสารให้ผู้ใช้งาน
- 3D: Physical objects or space: วัตถุ สิ่งของ พื้นที่ สภาพแแวดล้อมที่คนเข้าไปมีปฎิสัมพันธ์ด้วย เช่น คอมพิวเตอร์ หน้าจอมือถือ เมาส์ แป้นพิมพ์ ห้อง ฯลฯ
- 4D: Time: สิ่งที่มีการเปลี่ยนสถานะ หรือมีความเคลื่อนไหว เช่น แอนิเมชัน วิดิโอ เสียง รวมถึงระยะเวลาที่คนใช้ระหว่างปฎิสัมพันธ์
- 5D: Behaviour: พฤติกรรมและปฎิกิริยาโต้ตอบของผู้ใช้งาน
กระบวนการทำงานของ IxD จะดูภาพกว้างกว่า visual design โดยขั้นตอนจะเป็น user flow > wireframe > visual design > micro Interaction/animation > prototype (รายละเอียดเพิ่มเติม)
Usability
Usability = Effectiveness (ใช้ได้) ∩ Efficiency (ใช้ง่าย) ∩ Satisfaction (ชอบใช้)
เป็นตัวบ่งชี้คุณภาพของผลิตภัณฑ์ ว่าใช้งานได้ง่ายแค่ไหน ซึ่งมีผลต่อความรู้สึกของผู้ใช้ ว่าจะใช้ต่อไปไหม
ซึ่ง usability ที่ดีจะมีองค์ประกอบ 5 ส่วนด้วยกัน คือ
- เข้าใจง่าย (Learnability): ผู้ใช้สามารถใช้งานได้เองเลย โดยไม่ต้องมีคู่มือการใช้งานหรือใครสอน
- ใช้งานไม่ติดขัด (Efficiency): ผลิตภัณฑ์ใช้งานได้ลื่นไหล ผู้ใช้สามารถทำสิ่งที่อยากทำได้ สะดวก รวดเร็ว
- คนจำวิธีใช้ได้ (Memorability): ผู้ใช้ไม่จำเป็นต้องฝึกใช้ผลิตภัณฑ์ใหม่ ถ้าต้องกลับมาใช้อีกรอบ
- มีข้อผิดพลาดน้อย (Errors): Bug น้อย, เจอสิ่งที่ผิดคาดน้อย, ผู้ใช้รู้ว่าจะต้องทำอะไรต่อตอนเจอ Error
- รู้สึกชอบ (Satisfaction): ใช้แล้วรู้สึกดี ดีไซน์ถูกใจ 😘😘😘
ยังอ่านหัวข้อนี้ไม่จุใจ ไปที่นี่ (รายละเอียดเพิ่มเติม) แต่ถ้าอยากได้ usability tips ต้องนี่เลย evinex
User Research
คือการทำวิจัยผู้ใช้งาน มีวิธีการทำวิจัยอย่างเยอะ คร่าวๆ จาก NN/g
งงๆ ละซิว่าอะไร ยั้วเยี้ยไปหมด มีแกนนอนกับแกนตั้ง เพื่อใช้แบ่ง category ของวิธีวิจัยแบบต่างๆ ว่ามันตอบด้านไหนของผู้ใช้ อ้างอิงโซนจากรูปด้านล่าง
แนวตั้งคือการตอบว่า ผู้ใช้พูดว่าอย่างไร กับ ทำแบบไหน เพราะคนเรามักทำในสิ่งที่ไม่ตรงกับที่พูด ดูที่การกระทำจะเห็นพฤติกรรมที่แท้จริงมากกว่า
ส่วนแนวนอน จะแบ่งหมวดเป็น ความถี่ กับ ทำไมและแก้ปัญหาอย่างไร
ใน NN/g เขียนรายละเอียดไว้เยอะมาก มีอธิบายด้วยว่า วิธีวิจัยแต่ละแบบคืออะไร ซึ่งน่าสนใจมาก ขอติดรายละเอียดไว้ก่อนละกัน ซึ่งพอพูดถึงผู้ใช้ อีกเรื่องที่นึกถึงคือ Empathy ขอแปะวาร์ปไว้ก่อน
Content Strategy
คอนเทนต์ คือสิ่งที่เราต้องการสื่อสารไปให้กับผู้ใช้ คนที่ทำหน้าที่นี้จะต้องคอยวางแผน สร้าง ส่งมอบ และบริหาร สิ่งที่จะสื่อสารออกไป โดยต้องสื่อสารแบบเข้าอกเข้าใจ ตรงใจลูกค้า และเป็นไปเพื่อประโยชน์ขององค์กร (บางเวลา)
นี่เป็นอีกหัวข้อที่ค้นเข้าไปแล้ว มีรายละเอียดอีกพอสมควรเลย ขอติดไว้อีกหนึ่งครับ 😅