สตาร์ทอัพไม่จำเป็นต้องเกี่ยวกับเทคโนโลยีก็จริง แต่สิ่งที่ว่าเทคโนโลยีนี่แหละทำให้สตาร์ทอัพสามารถเติบโตได้เร็ว เราจึงเห็นสตาร์ทอัพพัฒนาแอปพลิเคชัน เวบไซต์ในแพลตฟอร์มต่างๆไม่ว่าจะเป็นสมาร์ทโฟน คอมพิวเตอร์ แม้แต่อุปกรณ์สวมใส่สำหรับ Virtual Reality
ทำให้แนวคิดพื้นฐานอย่าง “User Experience” มีความสำคัญมากขึ้นเรื่อยๆ พูดง่ายๆ User Experience หรือที่เราเรียกกันติดหูว่า UX น่ะแหละ คือกระบวนการวิเคราะห์ตามลับดับ เป็นประสบการณ์ของผู้ใช้แอปพลิเคชัน เว็บไซต์ สินค้า หรือบริการ ว่าใช้ง่ายหรือไม่ ใช้แล้วสะดวกขึ้น ทำให้ชีวิตดีขึ้นหรือไม่
ฉะนั้น UX จึงไม่ใช่ Graphic Design อย่างที่ใครหลายๆคนเข้าใจ และ ก็ไม่ใช่ User Interface ด้วย (จะอธิบายทีหลังว่าทำไมไม่ใช่)
รู้แบบนี้แล้ว สตาร์ทอัพเจ้าไหนอยากออกแบบ UX มาลองดู 7 ขั้นตอนออกแบบ UX แบบเข้าใจง่ายไปเลย
1. เขียนเรื่องราวของผู้ใช้งาน (User Stories)
ก่อนอื่นเราต้องเขียนเป้าหมายที่ Persona แต่ละคนต้องการทำให้สำเร็จ (ใครยังไม่รู้จักคำว่า Persona อ่านได้ที่นี่) ลอง “เขียน” อธิบายสัก 1-2 ย่อหน้าว่าผู้บริโภคจะใช้งานและต้องทำอะไรกับแอปฯ เว็บไซด์ หรือสินค้าของเราอย่างไรบ้าง เพื่อตอบสนองความต้องการของตัวผู้บริโภคเอง
จากนั้นลองไฮไลท์คำนามและคำกริยาสำคัญๆ โฟกัสไปที่ “ใคร” ทำ “อะไร” เท่านั้น (ห้ามโฟกัสไปที่ ใครทำ “อย่างไร”) เพื่อเป็นไอเดียสำหรับทำ “System Map” ในขั้นตอนต่อไป
ตัวอย่าง User Stories เราจะเห็นได้ว่าผู้ใช้งานได้ทำอะไรบ้างกับบริการออนไลน์
ตัวอย่างวิธีโต้ตอบกับหน้าจอเพื่อสั่งการ
2. ทำ “System Map”
System Map เปรียบเสมือนภาพรวมของความสัมพันธ์ของคนที่เกี่ยวข้องในการใช้งานได้แก่ตัวกิจการเอง ผู้ใช้งาน และ Study ผ่านการกระทำของแต่ละคน เป็นแผนที่ที่จะช่วยให้เราเข้าใจแก่นของระบบทั้งหมดโดยไม่จำเป็นต้องลงรายละเอียด
เริ่มจากระบุตัวละครที่เกี่ยวข้องในการใช้งานสินค้าก่อน ซึ่งก็หนีไม่พ้นตัวสตาร์ทอัพ ผู้ใช้งานและเพจหรือแอปฯ จากนั้นค่อยวาดความสัมพันธ์ระหว่างตัวละครว่า ใครทำอะไรกับใครได้บ้าง ในส่วนนี้ขอให้ระดมสมองช่วยคิดระหว่าคนในทีมด้วย
3. วาด “Flow Diagram”
เอาข้อมูลที่ได้จาก System Map ใช้โพลต์อิทลิสต์สกรีนหน้าจอของแอปฯหรือเว็บไซต์ที่เราต้องการขึ้นมาซึ่งได้แก่ Main Screen/Landing Page, Browse Study, View Study, New/Edit Study, User Profile, Company Profile, Sign Up Scree, Login Screen, Contact User Screen
จัดกลุ่มและเรียงแต่ละรายการ โดยอ้างอิงจากเรื่องราวของผู้ใช้งานในขั้นตอนแรกและ System Map ในขั้นตอนที่สอง โฟกัสไปที่ขั้นตอนของแต่ละสกรีนตามลำดับราวกับได้ใช้งานแอปฯหรือเว็บไซต์นั้นจริงๆ
Flow Diagram จึงเปรียบเสมือน Navigation Map ของแอปฯหรือเว็บไซต์นั้น
เมื่อร่าง Flow Diagram ให้กลับไปดูที่เรื่องราวของผู้ใช้งานในขั้นตอนแรกอีกครั้งหนึ่ง ตรวจสอบว่าการกระทำและเป้าหมายที่แต่ละ Persona ต้องทำนั้นสำเร็จได้จริงๆด้วย Flow Diagram
4. จำลองคุณลักษณะ
ขั้นตอนนี้เราต้องแจกแจงคุณลักษณะของแต่ละตัวละครให้เร็วที่สุด คิดอะไรได้ใส่เข้าไปเลย เราจะคิดคุณลักษณะจากเรื่องราวและการสัมภาษณ์ของผู้ใช้งาน
เช่นคำอธิบายบริษัทจะต้องมีชื่อ URL โลโก้ ที่อยู่ อีเมล คำอธิบายแอปฯเว็บไซต์ รหัสผ่าน
คำอธิบายผู้ใช้งานจะต้องมีชื่อ อีเมล รหัสผ่าน ประวัติส่วนตัว เพศ อายุ ภาษา ความสามรถเชิงเทคนิค แอปฯที่ใช้บ่อย ประเทศ การศึกษา แพลตฟอร์ม อาชีพ เงินเดือน ฯลฯ
คำอธิบายบทเรียน (หากต้องการทำแอปฯหรือเว็บเพื่อการศึกษา)จะต้องมีหัวข้อ คำอธิบาย ที่อยู่ แพลตฟอร์ม เงินทดแทนหรือรางวัล ข้อเรียกร้อง ลิงค์สำรวจ สถานะ รายชื่อผู้สมัคร
5. สร้าง “Screen Requirement”
ขั้นตอนนี้เป็นขั้นตอนที่เชื่อมระหว่าง “ความหมาย” และ “งานออกแบบ” โดยจะลิสต์สิ่งที่ต้องทำให้สำเร็จสัก 1-2 อย่างที่ผู้ใช้งานต้องทำในแต่ละหน้าจอ และข้อมูลที่ปรากฎอยู่ในแต่ละหน้าจอ
หน้าจอ Landing Page เราต้องมีสามส่วนได้แก่
1. การแจ้งข้อมูล บอกผู้ใช้งานว่าแอปฯหรือเว็บไซต์ของเรานั้นมีเพื่ออะไร? มีประโยชน์อะไรบ้าง?
2. ปฏิสัมพันธ์: ให้ผู้ใช้งานได้ทดลองแอปฯหรือเว็บไซต์นั้น
3. เชิญ ขอให้ผู้ใช้งานลงทะเบียน สร้างโปรไฟล์ ทิ้งข้อมูลติดต่อ
ส่วนหน้าจออื่นๆเช่นหน้าจอ Profile ให้ผู้ใช้งานสามารถสร้าง แก้ไขข้อมูลหรือลบทิ้งได้, หน้าจอ Log-In สำหรับผู้ใช้งานเดิม ก็มี Username และ Password ให้กรอก และมี Forget Password เวลาลืมรหัสผ่าน, หน้าจอ Sign Up สำหรับผู้ใช้งานใหม่ จะมี Email สำหรับ Username และ Password ให้กรอกสองครั้ง และหน้าจอ Applicant Page ก็มีรายชื่อผู้สมัคร Accept/Reject และช่องทางการติดต่อ
ออกแบบหน้าจอลงทะเบียนด้วย Adobe Photoshop ง่ายๆ
6. ออกแบบอินเตอร์เฟซ (User Interface หรือ UI)
User Interface หรือส่วนติดต่อผู้ใช้ มันคือส่วนที่คุณมองเห็น (หรือรับรู้ได้ — เช่นกรณีคนตาบอด ส่วนติดต่อผู้ใช้ของเขาก็คือเสียง) และใช้มันสั่งงานให้มันทำตามที่คุณต้องการได้
ในทางคอมพิวเตอร์ UI ก็คือพวกปุ่มเมนูต่างๆ บนหน้าจอ เพราะว่าคุณไม่สามารถส่งกระแสจิตไปสั่งให้คอมพิวเตอร์เปิดโปรแกรมขึ้นมาได้ จึงต้องพัฒนาหน้าจอเมนูให้เราได้กดเปิดโปรแกรมที่ต้องการ ซึ่งหน้าจอเมนูนี้ก็คือ UI ตัวหนึ่ง
นี่คือ 3 ขั้นตอนออกแบบอินเตอร์เฟซ
1. เลียนแบบ: ถ้าเราไม่เคยออกแบบ UI มาก่อน เราสามารถดูแนวทางเป็นแรงบันดาลใจและ “ก็อปปี้” ได้เลย ลองเข้าไปดูที่ www.patterntap.com และ ui-patterns.com แต่ขอเตือนไว้ก่อนว่าเราอาจจะก๊อปปี้แนวทางได้ แต่เราก๊อปปี้แก่นประสบการณ์ผู้ใช้งานไม่ได้ (User Experience จึงไม่ใช่ User Interface อย่างที่หลายคนเข้าใจกัน)
2. ร่างไอเดียหน้าจอนั้นๆคร่าวๆ ให้เร็ว มาก และแตกต่างที่สุด ใช้เวลา 3 นาทีต่อหนึ่งแผ่น ฉะนั้นร่างมา 10 แผ่นต้องไม่เกินครึ่งชั่วโมง
3. ระดมสมอง: สำรวจงานออกแบบต่างๆ จากนั้นให้เอาไอเดียไปคุยกับกราฟฟิคดีไซน์ และลองทดสอบงานออกแบบหลายๆตัวว่าได้ผลดีหรือไม่ อาจจะลองใช้ www.optimizely.com ช่วยด้วยก็ได้ เลือกไอเดียที่แก้ปัญหาให้ผู้ใช้งานได้อย่างมีประสิทธิภาพสูงสุด
ที่สำคัญคนอ่านเว็บไซด์ของเราแบบ “ผ่านๆ” เท่านั้น ฉะนั้นงานออกแบบของเราต้องน่าดึงดูด เร้าอารมณ์ น่าตื่นเต้น ไม่ต้องทำอะไรมากมาย โดยเฉพาะตัวอักษรที่ทำให้ผู้ใช้งานเบื่อได้ Landing Page ต้องใช้ Linear Structure ให้มากที่สุดและไม่มีการโต้ตอบทั้งสิ้น
https://www.youtube.com/watch?v=OXFGp0LPYgE
ออกแบบ UI ของหน้าจอสมาร์ทโฟน Log In ด้วย Adobe Photoshop
แล้วมาถึงขั้นตอนสุดท้าย นั่นก็คือ“ทดสอบกับผู้ใช้งานจริง”เป็นอีกขั้นตอนที่สำคัญที่สุดเพราะเราไม่มีทางรู้เลยว่าแอปฯหรือเว็บไซต์ที่เราจำลองมานั้นถูกใจผู้ใช้งานเป้าหมายหรือไม่ ฉะนั้นลองให้ผู้ใช้งานได้ใช้ รวบรวมความเห็น เอามาพัฒนาปรับปรุ่งต่อไป ลองคิดถึงหลัก Minimum Viable Product ดู แล้วเราก็จะได้แอปฯและเว็บที่ตอบโจทย์ผู้บริโภคที่สุด
แหล่งที่มา
Disrupt University by Krating Poonpol
