หลายปีมานี้ เมื่อมีการสำรวจอาชีพใหม่ ๆ หรือตำแหน่งงานใหม่ ๆ ที่มาแรง เราจะได้เห็นคำว่า UX / UI Designer หรือ “นักออกแบบ UX / UI” หรือ “นักออกแบบประสบการณ์ผู้ใช้” … และก็เริ่มเห็นประกาศรับสมัครงานตำแหน่งนี้กันเพิ่มขึ้นเรื่อย ๆ
หลาย ๆ คนจึงมีคำถามว่า 2 คำนี้ คือ UX และ UI คืออะไร? และงานสายนี้มีหน้าที่ทำอะไรบ้าง?
UX หรือ User Experience เป็นศาสตร์ที่เน้นให้การเก็บข้อมูลความต้องการ ปัญหา ฯลฯ จากผู้ใช้สินค้า บริการ ร้านค้า หรือแอป เว็บ เกม ฯลฯ ให้ได้มากและละเอียดพอ
เป้าหมายก็เพื่อที่จะนำเสียงตอบรับที่ได้ ไปสร้างสิ่งที่ตอบโจทย์ลูกค้าหรือผู้ใช้งานให้มากที่สุด
ส่วน UI หรือ User Interface เป็นศาสตร์ที่เน้นการออกแบบหน้าจอแอป เว็บ เกม ตู้คีออส ฯลฯ … หรือออกแบบสินค้า บริการ ร้านค้า ฯลฯ
เป้าหมายก็เพื่อให้ตรงกับความต้องการของผู้ใช้ เข้าใจง่าย ไม่เสียเวลาเรียนรู้นานเกินไป มีความดูดีน่าซื้อน่าใช้ และสร้างได้จริง ทั้งในแง่การผลิตและต้นทุน
ตัวอย่างความแตกต่างของ UX กับ UI ก็เช่น สมมุติว่า โจทย์คือการหาทางให้ผู้สูงวัยในหมู่บ้านแห่งหนึ่ง สามารถพบหมอซึ่งอยู่ในโรงพยาบาลที่อีกฝั่งหนึ่งได้สะดวกทันการณ์
งาน UI ที่ปราศจาก UX อาจมุ่งไปที่สร้างสะพานให้ผู้สูงวัยเดินข้ามได้ง่าย มีราวจับ และพื้นไม่ลื่นเสี่ยงหกล้ม, หรือสร้างเรือข้ามฟากอัตโนมัติที่จะพาผู้สูงวัยข้ามไปฝั่งโรงพยาบาล
แต่งาน UX อาจสำรวจจนได้คำตอบที่แท้จริงว่าผู้สูงวัยต้องการให้หมอข้ามคลองมาหามากกว่า และคำตอบนี้ก็อาจประหยัดต้นทุนและได้ผลดีระยะยาวอย่างแท้จริงมากกว่า เป็นต้น
UX (User Experience) คืออะไร?
UX คือการเรียนรู้ความต้องการของผู้ใช้ให้มากที่สุด โดยเริ่มจากการตอบ 4 คำถามใหญ่ ๆ คือ …
ใครใช้?, ใช้ทำอะไร?, ใช้อย่างไร?, และ ใช้ที่ไหน ในสภาพแวดล้อมอย่างไรบ้าง?
การตั้ง “4 คำถาม” กับสินค้า บริการ เว็บ หรือแอปของเราที่กล่าวไปแล้วนี้ คำตอบที่ได้ต้องเกี่ยวข้องกับ “4 คุณสมบัติ” ที่ product ของเราต้อง “สอบผ่าน” นั่นคือ Usability, Ergonomics, Performance, และ Marketing
Usability
ความเข้าใจง่าย ใช้งานได้จริง สำหรับผู้ใช้หลากหลายกลุ่มคน ในหลากหลายสถานการณ์ (scenario) เท่าที่จะที่เป็นไปได้
เช่น ถ้าทำแอปที่เป็นฟิลเตอร์แต่งหน้าตา ก็ต้องทดลองว่าใช้ได้กับทั้งผู้ใหญ่ เด็ก ผู้หญิง ผู้ชาย และใช้ได้ทั้งในที่แสงน้อย และที่แดดจัด เป็นต้น
Ergonomics
ความสะดวกในการใช้ คือมีรูปลักษณ์สินค้า หรือปุ่มต่าง ๆ บนหน้าจอ ที่เข้าใจง่าย ไม่ต้องเรียนรู้นาน ไม่ต้องลองผิดลองถูกมากนัก
Performance
ความเร็วและสมรรถนะในการใช้จริง ซึ่งสำคัญเป็นพิเศษในเว็บและแอปทั้งหลาย
เพราะไม่ว่าจะออกแบบดีสวยเข้าใจง่ายอย่างไร แต่ถ้าช้า อืด ล่มบ่อย หรือข้อมูลผิดพลาด ก็ไม่น่าใช้ด้วยประการทั้งปวง
Marketing
ดูแล้วมีเอกลักษณ์ จดจำง่าย เผยแพร่ให้เป็นรู้จักได้ง่าย โดยเฉพาะเรื่องของโลโก้ ไอคอน สีสัน รูปลักษณ์ และที่สำคัญคือ “ชื่อ”
ทั้งนี้ ก็เพื่อให้ไม่สับสนกับคู่แข่งหรือผลิตภัณฑ์อื่นที่คล้ายกัน และเพื่อให้ง่ายต่อการจดจำและบอกต่อ
งาน UX ต้องทำอะไรบ้าง?
คนทำงาน UX จะต้องเข้าใจ “User Journey” คือประมวลเรียบเรียงเส้นทางของลูกค้าหรือผู้ใช้งาน ตั้งแต่ต้นจนจบ และครอบคลุมทุกขั้นตอนของผู้ใช้ทุกกลุ่มทุกสถานการณ์
ซึ่งส่วนใหญ่แล้ว คนทำงาน UX จะมีทั้งการทำสำรวจ สอบถาม สังเกต วิจัย (UX Research) แล้วประมวลงานออกมาเป็น 3 ด้าน คือ Persona, Storyboard, และ Usability Testing
Persona
เป็นขั้นตอนแรก ๆ ของการวิจัย UX หมายถึงการสร้าง “ผู้ใช้ในจินตนาการ” หรือบุคคลสมมุติ โดยจำลองลักษณะ เพศ, วัย, อาชีพ, กำลังซื้อ, ไลฟ์สไตล์ ของกลุ่มเป้าหมายขึ้นมาหลาย ๆ คนต่างกันไป
การสมมุตินี้ควรมาจากการไปสัมภาษณ์คนจริง ๆ ที่เป็นกลุ่มเป้าหมายของเราอย่างน้อย 10 คนขึ้นไป
จากนั้นก็ตั้งชื่อหรือฉายาให้กับแต่ละ Persona ที่เราสมมุติขึ้นมา เช่น สาวออฟฟิศ หนุ่มนักศึกษา ป้าแม่บ้าน ฯลฯ
ทั้งนี้ก็เพื่อที่ทีมงานจะได้ใช้ทำความเข้าใจและตอบคำถามว่า “ถ้าออกแบบหน้าจอนี้ user จะทำอย่างไร?” เป็นต้น
Storyboard
จากนั้นก็ทำ “Storyboard” คือลองเล่า เขียน หรือวาดขั้นตอนออกมาว่า ผู้ใช้คนไหน จะใช้ผลิตภัณฑ์ของเราที่ไหน อย่างไร เช่น ใช้บนรถไฟฟ้า? ใช้ตอนนั่งว่างๆที่บ้าน? ใช้ตอนวิ่ง ? หรือใช้ใต้น้ำ? …ฯลฯ
จากนั้นก็นำข้อมูลมาใช้จัด “Priority” ว่าผลิตภัณฑ์หรือบริการเรานั้น ประโยชน์ข้อไหน feature ใด สำคัญที่สุด จากอันดับแรกไล่เรียงลงไป
โดยต้องจำไว้ว่า… “ถ้าทุกอย่างสำคัญเท่ากันหมด แปลว่าไม่มีอะไรสำคัญเลย”
Usability Testing
ให้กลุ่มตัวอย่างเป้าหมายลองใช้ แล้วถ่ายวิดิโอกลุ่มตัวอย่างขณะใช้ผลิตภัณฑ์ ไว้ดูว่ามีการงุนงงติดขัดขั้นตอนไหนบ้าง
โดยอาจจะสร้างไว้ 2 แบบ (“A/B Testing”) แล้วดูว่าแบบไหนการตอบสนองดีกว่ากัน ทั้งในแง่เวลาและอื่น ๆ
ถ้าเป็นเว็บไซต์หรือแอปการตรวจวัดก็ง่ายขึ้น เพราะเก็บข้อมูลจากผู้ใช้จริงทุก ๆ รายได้เลย ด้วยการลงระบบ Analytics เช่น Google Analytics ที่ใช้ได้ฟรี มีรายงานยอดผู้เข้าชมและพฤติกรรมการคลิกไว้อย่างค่อนข้างละเอียด
โดยในแต่ละขั้นของการพัฒนาผลิตภัณฑ์สามารถทำ “Usability Testing” กับขั้นตอนนั้น ฟีเจอร์นั้น ได้เรื่อย ๆ ไม่ต้องรอให้ผลิตภัณฑ์เสร็จสมบูรณ์แล้วค่อยทำทีเดียวแต่อย่างใด
แล้ว UI คืออะไร? งาน UI ต้องทำอะไรบ้าง?
UI (ย่อจาก User Interface) Designer เป็นงานด้านการออกแบบที่เน้นไปที่การออกแบบหน้าจอ หรือส่วนที่ติดต่อกับผู้ใช้ ทั้งสินค้าหรือบริการด้านดิจิทัล เช่น เว็บไซต์ แอปพลิเคชัน เกม ฯลฯ
และรวมถึงสินค้าที่จับต้องได้ เช่น อุปกรณ์เครื่องใช้ต่าง ๆ และรวมถึงบริการ เช่น จอสัมผัส ณ เคาน์เตอร์ และสารพัดองค์ประกอบรอบเคาน์เตอร์นั้น ๆ เป็นต้น
ผลงานของผู้ทำตำแหน่ง UI Designer นี้จึงต้องออกมาเป็นงานวาดที่เห็นเป็นรูปธรรม เพื่อให้นักพัฒนาแอป, โปรแกรมเมอร์, หรือฝ่ายอื่นนำไปใช้ต่อได้สะดวก
โดยช่วงแรกมักจะเป็นงานวาดสเกตช์ลายเส้นคร่าว ๆ ให้เห็นโครงสร้างการเชื่อมโยงกันของหน้าจอต่าง ๆ และลำดับก่อนหลัง ซึ่งเรียกว่า “Wireframes” ซึ่งมาจากคำว่า wire (เส้น) และ frame (กรอบ)
… ซึ่งบางครั้งงานร่าง Wireframes นี้ก็เป็นหน้าที่ของ UX Designer ก่อนจะมาถึงมือของ UI Designer ในการวาดจริง ทำจริง
แล้วจากนั้นเมื่อได้ข้อสรุปแน่นอนถึงการออกแบบทั้งหมด จึงค่อยวาดเป็นงานกราฟิกจริงที่พร้อมติดลงในแอป ในเว็บ หรือหน้าจอต่าง ๆ ต่อไป
โดย UI Designer ต้องไม่เพียงแต่ออกแบบและวาดได้สวยงามน่าใช้ แต่ต้องดูแล้วเข้าใจง่ายว่า ปุ่ม ไอคอน สัญลักษณ์แต่ละอย่างนั้นมีไว้ทำอะไร
ซึ่งวิธีง่าย ๆ ก็คือใช้ “สัญลักษณ์มาตรฐาน” ที่สินค้าอื่นหรือแอปอื่นในหมวดเดียวกันใช้อยู่ เพื่อให้ผู้ใช้รายใหม่ ๆ เห็นแล้วเข้าใจได้เลย
เช่น ปุ่มเปิดปิดเป็นเส้นวงกลมแล้วมีขีดตั้งด้านบน, ปุ่ม back เป็นลูกศรซ้าย, ฯลฯ …หรือมีการ “Feedback Informed Users” คือมีแถบแจ้งตลอดเวลาว่ากำลังทำอะไร อยู่ในขั้นตอนไหน
… ซึ่งโดยรวมแล้วเป็นเทคนิคที่เรียกว่า “Re-Use Learnt Behaviors” ซึ่งแปลว่า การนำสิ่งที่ผู้คนได้เคยเรียนรู้จากแห่งอื่น ๆ แล้ว มาใช้ใหม่ เพื่อให้ผู้ใช้งานไม่ต้องเรียนรู้ใหม่อีก
แต่ความท้าทายอยู่ที่ต้องไม่เหมือนเกินไปจนไร้เอกลักษณ์และอาจมีปัญหาทางกฎหมายลิขสิทธิ์ แต่ก็ไม่แตกต่างเกินไปจนผู้ใช้ต้องมาเรียนรู้ใหม่
ฉะนั้น UI Designer นอกจากจะมีไอเดียด้านการออกแบบอยู่ในหัว มีฝีมือในการรังสรรค์ชิ้นงานขึ้นมาก็ยังต้องตามติดโลกการออกแบบและไลฟ์สไตล์ยุคใหม่อยู่เสมอ
โดยเฉพาะต้องเข้าใจว่ากลุ่มเป้าหมายนั้นใช้ชีวิตอย่างไร โดยเฉพาะในส่วนที่เกี่ยวข้องกับสินค้า/บริการที่ตัวเองรับผิดชอบอยู่
กรณีศึกษา “ปุ่ม 300 ล้านดอลลาร์” – ใช้ UX ระบุปัญหา แล้วแก้ไขด้วย UI – เพิ่มรายได้ทันที
case study ยอดฮิตในวงการ UX / UI คือตัวอย่างเว็บขายสินค้ารายใหญ่แห่งหนึ่ง ที่ได้สำรวจวิจัยพฤติกรรมการใช้งานของผู้ใช้เว็บ แล้วพบปัญหาในหน้าจอแรกซึ่งมีปุ่ม Login กับปุ่ม “Forget Password” (ลืมรหัสผ่าน)
ปัญหาคือมีคนกดปุ่ม “Forget Password” (ลืมรหัสผ่าน) มากถึงแสนกว่าครั้งต่อวัน และเมื่อกดแล้วก็ไปสู่ขั้นตอนการกรอกอีเมล
… แล้วก็มีผู้ใช้มากถึงเกือบ 5 หมื่นคนต่อวันที่ “ไม่ไปต่อ” คือกดออกไปเลย ไม่กรอกอีเมลใด ๆ
เว็บจึงเอาปุ่ม “Forget Password” ออก คนที่ลืมพาสเวิร์ดก็ไม่ต้องกรอกอีเมลแบบเดิมอีกต่อไป โดยเปลี่ยนเป็นปุ่ม “Continue as guest” “ซื้อของได้โดยไม่ต้องล็อกอิน” โดยแค่พิมพ์ชื่อที่อยู่และเบอร์ติดต่อลงไปเท่านั้น
การซื้อของจึงเกิดขึ้นได้ง่ายขึ้นสำหรับผู้ลืม username หรือ password โดยไม่ต้องไปรอรับอีเมลที่เว็บเมลหรือแอปเมลแล้วกดตอบอีก และไม่ต้องลุ้นว่าจำชื่ออีเมลตัวเองถูกต้องตรงกับที่สมัครไว้หรือเปล่าด้วย
ผลคือ การปรับเปลี่ยนครั้งนี้ช่วยลดเปอร์เซ็นต์คนที่กดหนีไปก่อนลงไปได้มหาศาล และเพิ่มรายได้ให้เว็บนี้ถึง 300 ล้าน US$ ในปีนั้นเลย
…
บทสรุป
ศาสตร์ UX และศาสตร์ UI นั้นต้องใช้ร่วมกัน และบางครั้งงานทั้ง 2 อย่างนี้ก็ต้องทำโดยคนเดียวกันหรือทีมเดียวกัน
บริษัทองค์กรหลาย ๆ แห่งก็รวบงานสองด้านนี้มาเป็นตำแหน่งเดียวกันเลยคือเป็น UX/UI Designer
ทั้ง 2 งานนี้ก็มีความสำคัญมากขึ้นเรื่อย ๆ ในโลกยุคนี้ที่บริษัทองค์กรต่าง ๆ ต้องมีเว็บไซต์ หรือแอป หรือแม้แต่จะผลิตสินค้าเป็นชิ้น ๆ หรือจะออกแบบร้านค้า เคาน์เตอร์บริการต่าง ๆ
ซึ่งทั้งหมดนี้ไม่ต้องรอให้สินค้าหรือบริการออกสู่ตลาดแล้ว และไม่ต้องรอให้เสร็จสมบูรณ์ก็ได้ โดยสามารถเลือกกลุ่มตัวอย่างที่ตรงกลุ่มเป้าหมายที่สุดมาใช้สำรวจแทนกลุ่มลูกค้าจริงไปก่อน
ทั้งนี้ เพื่อป้องกันปัญหาจากการที่ “นักออกแบบคิดว่าดีแล้ว” หรือ “เจ้านายคิดว่าดีแล้ว” …แต่หลงลืมไปว่าผู้ใช้จริงหรือลูกค้านั้น “คิดว่าดีแล้ว” ด้วยหรือไม่? และรู้สึกว่าผลงานเรามีประโยชน์หรือเปล่า?
และสุดท้าย บทความนี้ยังพูดถึงไปแค่บางส่วนของศาสตร์ UX UI เท่านั้น ยังมีหลักการและเครื่องมือด้านนี้อีกมากมายมหาศาล ซึ่งผู้อ่านที่สนใจต้องค้นคว้าเพิ่มเติมต่อไป
แหล่งข้อมูลและภาพ
en.wikipedia.org/wiki/User_experience
en.wikipedia.org/wiki/Usability
interaction-design.org/literature/topics/ux-design
uxmetric.com/en/concepts-en/history-of-user-experience
xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design
uxstudioteam.com/ux-blog/ux-storyboard
welovenocode.com/blog/tpost/4uiznp7g61-complete-guide-to-ux-research-for-startu
celesttechnologies.com/blog/ux-ui-design.php
louelledesignstudio.com/ux-vs-ui-design-whats-the-difference
blog.tubikstudio.com/mobile-app-design-concepts
plytix.com/blog/300-million-dollar-button
–
อัพเดตข่าวสารการตลาดทุกวันได้ที่ Website: Marketeeronline.co
Facebook: www.facebook.com/marketeeronline
