[Case Study] VR Interaction Design for Home Buyer’s 360° VR Tour
“จะดีไหม ถ้าเราไปดูบ้านที่เราสนใจซื้อได้ทั่วประเทศโดยไม่ต้องเดินทาง?”
เมื่อเกือบปีที่แล้ว ผมได้ร่วมงานกับทีม home.tech เพื่อออกแบบและสร้าง VR Application ไปแสดงที่งาน Home Buyer’s Expo 2017 ที่จัดไปเมื่อเดือนสิงหาคมปีที่แล้ว ถ้าใครได้ไปเดินในงาน ก็อาจจะเห็น จอใหญ่ๆ พร้อมคนที่ใส่แว่น VR เล่นอะไรแบบในวิดีโอด้านล่างนี้อยู่ในงานครับ ในบทความนี้ผมจะมาเล่าที่มาที่ไปของการออกแบบ Application ใน VR ตัวนี้ไว้เป็นบันทึกการออกแบบ ให้ได้ลองอ่านกันดูครับ
เริ่มจากโจทย์
โจทย์ของงานนี้ อย่างแรกคือเป็น Virtual Reality (VR) Application ครับ เผื่อใครยังไม่รู้จัก VR คือเทคโนโลยีที่เราใส่แว่นอันนึงไว้ แล้วก็จะเห็นภาพเหมือนเข้าไปอยู่ในโลกนั้นๆ ได้แบบ 3 มิติ รอบตัว (หรือถ้าใครเคยดูหนังเรื่อง Ready Player One ก็ แบบนั้นเลยครับ)
กลับมาที่ VR App ตัวนี้ งานนี้จะไปตั้งแสดงใน Home Buyer’s Expo เพื่อให้ผู้ใช้สามารถเข้ามาดูห้องตัวอย่าง ของโครงการบ้านและคอนโดที่มาจัดแสดงในงานได้เหมือนเข้าไปอยู่ในห้องจริงๆ โดยที่มี feature อย่าง
- แสดงข้อมูลห้องตัวอย่าง เลือกดูภาพ 360° แบบ VR จากแต่ละห้อง (ห้องนอน ห้องน้ำ ห้องครัว ฯลฯ) ในโครงการนั้นได้
- ให้ผู้ใช้สามารถเลือกโครงการที่สนใจได้จากปัจจัยต่างๆ เช่น ช่วงราคา บริษัทเจ้าของโครงการ หรือเลือกดูจากโครงการที่มาจัดแสดงในงาน Expo นี้
- เลือกดูโครงการจาก keyword ต่างๆ เช่น อยากได้คอนโดติดรถไฟฟ้า คอนโดที่มีสระว่ายน้ำ เป็นต้น
โจทย์ส่วนที่สองก็คือเรื่อง Hardware ที่ใช้ งานนี้ทางเจ้าของงานนี้เลือก Hardware มาให้เป็น Oculus Rift และ Leap Motion Controller ครับ
คิดต่อ
จากโจทย์ เราคิดต่อได้ว่าผู้ใช้จะมีทั้งกลุ่มที่ใช้เทคโนโลยีคล่องและไม่คล่อง เพราะงาน Expo นี้ไม่ได้เน้นที่กลุ่มคนใช้เทคโนโลยี หรือวัยรุ่น และเมื่อเป็นอุปกรณ์ที่แสดงในงาน Expo แสดงว่า ผู้ใช้แต่ละคนมีเวลาอยู่กับ application นี้แค่ไม่กี่นาที ดังนั้นอย่างแรกที่ต้องคำนึงในการออกแบบคือ ต้องทำให้ผู้ใช้ใช้งานง่ายที่สุด คนไม่เคยใช้ VR ใดๆ มาก่อนก็ใช้เป็น และใช้งานเป็นในเวลาไม่กี่นาที (หรือน้อยกว่านั้น) และอีกประเด็นก็คือ จะต้องเปลี่ยนให้ผู้ใช้คนใหม่เล่นได้ง่าย ไม่ว่าคนที่แล้วจะอยู่ตรงไหนใน Flow ของโปรแกรม
ส่วนเรื่อง Hardware ตัว Oculus Rift + Leap Motion Controller ก็มีข้อดีและข้อจำกัดของมัน ส่วนที่มีผลกับการออกแบบหลักๆ คือตัว Leap Motion Controller ครับ
Leap Motion Controller เป็นเซ็นเซอร์ที่ใช้จับการเคลื่อนไหวของมือ ว่ามือเราอยู่ตำแหน่งไหน ทำท่าอะไรอยู่ พอใช้กับ VR เราก็จะใช้มือเราเพื่อควบคุมสิ่งที่อยู่ใน VR ได้ตรงๆ ต่างกับ Controller ของ VR แบบอื่นๆ ที่อาจจะมีหน้าตาเป็นรีโมทให้เราถือไว้ มีปุ่มให้กดหลายปุ่ม
ความแตกต่างนี้เป็นประเด็นครับ การที่เราใช้ Leap มีข้อดีคือผู้ใช้ไม่ต้องสนใจตัวรีโมทว่าปุ่มไหนทำอะไรได้ แต่ก็แปลว่าของบนจอที่ผู้ใช้ไปทำอะไรกับมันได้ จะต้องอยู่ในระยะที่มือเอื้อมถึง เมื่อรวมกับการแสดงผลของ Oculus ที่ให้ภาพไม่ชัดมาก (ปัจจุบันมีแว่น VR แบบที่ภาพชัดขึ้น แต่ก็ยังไม่นิยมใช้กันมาก) ทำให้ต้องเผื่อขนาดของสิ่งต่างๆ ใน VR มากขึ้น โดยเฉพาะ text จะต้องใหญ่พอให้อ่านออกในจอที่ไม่ชัด
เริ่มร่างแบบ: เริ่มที่ระบบ Navigation
หลังจากวิเคราะห์โจทย์แล้ว ก็เริ่มลงมือร่างแบบครับ คำถามที่จะต้องตอบในขั้นนี้ก็คือ …
จะใช้ยังไง?
รูปแบบ Interaction โดยรวมของงานนี้ ผมเลือกใช้การเอามือไปแตะที่ปุ่มใน VR เป็นหลัก จากสองสาเหตุหลัก คือ
- เข้าใจง่าย อย่างน้อยทุกคนที่เคยใช้สมาร์ตโฟนก็เคยกดปุ่มบนจอมาก่อน ไม่ต้องมีท่าทางเฉพาะ หรือการเคลื่อนไหวอื่นๆ ที่อาจจะทำให้ผู้ใช้งง เช่นกดแล้วต้องลากขึ้น ฯลฯ ยิ่งมีท่าที่ใช้เยอะ ถึงจะรู้สึกว่า VR ทำอะไรได้เยอะก็จริง แต่ก็จะยิ่งสับสน และรู้สึกว่า VR ใช้ยาก เป็นของไกลตัว
- ถ้าเราเลือกใช้ interaction แบบเดียวเป็นหลัก ก็จะทำโปรแกรมได้ง่ายขึ้นครับ
แล้วจะรู้ได้ไง?
คำถามต่อมาคือ แล้วผู้ใช้จะรู้ได้ยังไงว่าต้องทำอะไร? หรือ ทำอะไรได้บ้าง? ในกรณีนี้คนที่เข้ามาเล่นอาจจะเคยหรือไม่เคยใช้ VR มาก่อนครับ คนกลุ่มที่ไม่เคยใช้ VR อาจจะไม่คุ้นกับ interaction ใน VR จากโจทย์นี้เราจึงควรเลือกแบบที่คนเหล่านี้คุ้นเคยดี และรูปแบบ navigation ในโปรแกรมก็จะเข้ามาเป็นพระเอกที่จะช่วยตอบคำถามนี้ครับ
ถ้าเราลองกลับไปดูโปรแกรมคอมพิวเตอร์หรือ app มือถือที่เราคุ้นเคย ก็จะมีแถบเมนูบอกว่ามีอะไรให้ทำใน App นี้ บ้าง หลักการออกแบบใน VR ก็ไม่ต่างกันครับ ก็คือต้องทำให้ผู้ใช้เห็นภาพรวมว่า VR App นี้ทำอะไรได้บ้าง
ดังนั้น ผมจึงเลือกที่จะทำ Navigation Menu มาวางไว้ที่ขอบจอที่ผู้ใช้ไปแตะได้ มาวางใน VR App ตัวนี้เช่นเดียวกันครับ
แต่ VR เป็นโลก 360 องศา ไม่มีกรอบจอ แล้วขอบจอของ VR คืออะไรล่ะ?
ผมตอบปัญหานี้โดยการออกแบบ navigation menu เป็นวงแหวนรอบผู้ใช้ ลอยอยู่ที่ระดับเอว ซึ่งบนวงแหวนนี้ ก็จะมีปุ่ม navigation นำไปยังหน้าจอต่างๆ ของ App ตามภาพนี้
ถ้าถามว่าทำไมต้องเป็นระดับเอว ก็เพราะว่าโดยปกติแล้ว การใช้งานใน App นี้คือใช้เพื่อดูห้องตัวอย่างแบบ 360 องศา เมนูต่างๆ จึงไม่ควรอยู่สูงเกินไปจนบังภาพข้างหน้า แต่ก็ไม่ควรอยู่ต่ำเกินไปจนต้องตั้งใจมองหา เพราะก็จะเสียเรื่องการมองเห็นภาพรวมฟังก์ชันต่างๆ ของโปรแกรมไป ทำให้ใช้งานลำบากขึ้นสำหรับผู้ใช้ที่ยังใช้ไม่คล่อง
อีกส่วนหนึ่งของ Navigation Menu นี้ คือ ปุ่มด้านล่างจะหมุนตามทางที่ผู้ใช้หันไป เพื่อให้เราเห็นปุ่มอยู่ตลอดเวลา และมีข้อความคอยบอกสถานะเราว่าตอนนี้เราอยู่ในห้องไหน โครงการไหน แถบเมนูนี้ปุ่มจะไม่ได้หมุนเหมือนติดอยู่กับหน้าเราตลอดนะครับ ผมเลือกออกแบบให้แถบนี้ “วิ่งตาม” ทางที่เราหันไป แบบภาพด้านล่างนี้ เพื่อให้มีความเคลื่อนไหว เรียกร้องความสนใจจากผู้ใช้มากขึ้น (ปกติคนเราจะหันความสนใจไปหาของที่เคลื่อนที่ได้อยู่แล้ว โดยเฉพาะเมื่ออย่างอื่นนิ่งอยู่กับที่) และเพื่อให้ผู้ใช้รู้สึกว่าปุ่มบนแถบนี้ เราไปแตะมันได้ ไม่ได้ถูกกลืนไปกับฉากหลังครับ
เมื่อเอามือไปแตะปุ่มวนวงแหวน navigation นี้ หน้าจอที่เราต้องการก็จะปรากฏขึ้นมาตรงหน้าเราครับ ทีนี้เราก็จะสรุปรูปแบบ interaction ใน VR app ตัวนี้ก็จะได้เป็นรูปด้านล่างนี้ครับ
หน้าจอต่างๆ
หลังจากที่เรามี Navigation เป็นเสาหลักของการออกแบบในโปรแกรมนี้แล้ว ก็มาดูที่หน้าจออื่นๆ กันต่อครับ จะสังเกตได้ว่า Interaction จุดที่เราเข้าไปทำอะไรกับโปรแกรมได้ทั้งหมดจะยังคงมีพื้นฐานเป็นปุ่ม เพื่อให้ไปในทิศทางเดียวกับ Navigation หลัก
เริ่มจากหน้าจอข้อมูลโครงการ เมื่อเราต้องการดูว่าห้องที่เราอยู่ตอนนี้อยู่ในบ้านหรือคอนโดที่ไหน ก็เปิดดูข้อมูลโครงการได้จากเมนูด้านล่างครับ ข้อมูลของโครงการก็จะแสดงขึ้นมาในห้องนั้น เป็นป้ายตั้งอยู่นิ่งๆ ในห้องนั้นให้เราได้อ่านคำอธิบาย ราคา ฯลฯ ของที่อยู่อาศัยในโครงการนี้ ป้ายแสดงข้อมูลทั้งหมดนี้จะอยู่ไกลออกไป ให้ดูรู้ว่ามันอยู่ไกลเกินที่จะเอื้อมไปมี interaction กับมัน ส่วนบริเวณที่ใกล้มือเรา ก็จะมีปุ่มที่เราเลือกแตะเพื่อไปดูห้องอื่นๆ ในโครงการเดียวกันได้
เมื่อต้องการเลือกดูโครงการอื่น ก็แตะที่ปุ่ม เลือกดูโครงการ จะเป็นการ browse โครงการทั้งหมด โดยมีปุ่ม dropdown menu ให้เราเลือกโครงการตามประเภท (บ้านเดี่ยว ทาวน์โฮม คอนโด) หรือช่วงราคา และบริษัทเจ้าของโครงการ เมื่อเลือกแล้วก็จะมีภาพตัวอย่างของโครงการที่ตรงกับที่เราค้นหา ขึ้นมาให้เราเห็น เราก็แตะเลือกและเข้าไปดูในโครงการนั้นได้เลยครับ เช่นกัน ปุ่มที่แตะได้ทั้งหมดก็จะมีระยะอยู่ไม่เกินเอื้อมครับ แต่จุดนี้จะมีข้อเสียเล็กน้อย อย่าที่ได้เกริ่นไว้ว่า Oculus ให้ภาพที่ไม่ชัดมาก และเมนูนี้จะต้องมีข้อความให้อ่านเยอะ ปุ่มจึงต้องใหญ่ และค่อนข้างบดบังทัศนวิสัย แต่เนี่องจากในขั้นตอนการเลือกห้อง ผู้ใช้ไม่จำเป็นต้องมองเห็นห้องที่กำลังอยู่ ณ ปัจจุบันไปด้วย จึงไม่มีผลต่อการใช้งานมากครับ
ฟังก์ชันสุดท้ายใน app นี้ก็คือการค้นหาโครงการจาก keyword เช่น คอนโดติดรถไฟฟ้า โครงการที่มีสระว่ายน้ำ เป็นต้นครับ เมื่อกดปุ่มเรียกหน้านี้ขึ้นมา ก็จะเห็นคำอธิบาย “แตะเลือกคำที่สนใจ” ลอยขึ้นมาตรงหน้า พร้อมกับปุ่ม keyword ลอยอยู่รอบตัวผู้ใช้ สามารถหันไปดูได้รอบๆ เมื่อแตะเลือกก็จะเห็นโครงการที่มีคุณสมบัติตรงกับ Keyword นั้นๆ ขึ้นมาให้เราได้เลือกเหมือนในหน้าจอที่แล้วครับ
เมื่อรวมกันทั้ง App แล้ว ก็จะออกมาเป็นอย่างที่เห็นในวิดีโอนี้
โน้ตทิ้งท้าย
ความจริงแล้วการออกแบบใน VR ไม่ได้มีเพียงเท่านี้ครับ ยังมีส่วนอื่นๆ ที่ต้องคิดอีกหลายอย่าง เช่น
- เสียง (ทุก Action ที่ทำควรมีเสียง Feedback เสมอ— แต่ในวิดีโอไม่มีเสียงนะครับ เพราะว่าอัดมาไม่ติด)
- ขนาดร่างกายมนุษย์ (สังเกตว่าผมพูดถึงระยะเอื้อมถึงอยู่เรื่อยๆ แต่จริงๆ ระยะเอื้อมของแต่ละคนไม่เท่ากัน ความสูง ความยาวแขน ทั้งหมดนี้ต้องคิดเผื่อด้วย)
- เรื่องความซับซ้อนต่างๆ ของโปรแกรม ถ้าโปรแกรมใหญ่กว่านี้ (โปรแกรมนี้ถือว่าเล็กมากๆ ครับ ถ้าเป็นเว็บ จริงๆ มันก็จะเป็นแค่โปรแกรมแกลเลอรีภาพโครงการที่อยู่อาศัย)
- ความเป็นไปได้ในการเขียนโปรแกรม (เครื่องมือที่ใช้เขียนโปรแกรมทำอะไรได้บ้าง บางครั้งอาจจะต้องเขียนปุ่มหรือ UI Element เบื้องต้นขึ้นมาใหม่เองใน 3D ซึ่งยากกว่า 2D)
- เมื่อออกแบบไปแล้วก็ตองลองทดสอบ prototype ดูเป็นระยะๆ (งานนี้ผมก็ได้เอาไปทดสอบกับหลายคนก่อนจะนำไปแสดงจริง จนพัฒนาแบบมาได้เป็นแบบที่เห็นนี้ครับ)
โปรแกรมที่เห็นในตัวอย่างนี้ก็ยังมีข้อที่พัฒนาได้อีกมากครับ ทั้งในด้านความสวยงามไปจนถึงด้าน Interaction Design เอง ผมหวังว่าใครที่อ่านมาถึงตรงนี้จะพอได้เห็นแนวทางการออกแบบ User Interface ไปจนถึง User Experience ในสื่อใหม่ๆ ที่กำลังจะโตขึ้นในอนาคตอย่าง VR นะครับ 😃
ส่งท้าย สำหรับใครที่สนใจหลักการออกแบบใน VR เพิ่มเติม ขอแนะนำวิดีโอนี้ครับ
