เริ่มต้น UX/UI ง่ายๆ เพียงเข้าใจ 4 ขั้นตอน

ทุกวันนี้คำว่า UX (User Experience) และ UI (User Interface) เริ่มเป็นที่รู้จักกันเพิ่มมากขึ้น แต่ก็ปฎิเสธไม่ได้ว่ายังเป็นที่รู้จักกันแค่ในวงของนักพัฒนาเท่านั้น ป้าๆอาๆหรือแม้กระทั่งแม่ที่บ้านยังไม่แน่ใจว่าตอนนี้ลูกตัวเองทำงานอะไรอยู่กันแน่ 😂

เพราะฉะนั้นออนขอวาง persona ของบทความนี้เป็น

• คนที่ไม่เข้าใจว่า UX/UI คืออะไร
• กำลังสับสนในความแตกต่างของสองสิ่งนี้
• อยากจะลองเข้ามาศึกษาในศาสตร์นี้

เลยอยากจะขอเริ่มอธิบายความแตกต่างระหว่าง UX และ UI แล้วตามด้วย 4 ขั้นตอนของการออกแบบที่ได้มีโอกาสไปฟังพี่แบงค์กับพี่พีทพูดในงาน UX Meet Up เมื่อหลายเดือนก่อน ผสมไปกับความเข้าใจและประสบการณ์ของตัวเอง

เริ่มที่ UX ขอเรียกศาสตร์นี้ว่า ศาสตร์แห่งความพยายามเข้าใจผู้อื่นเพื่อประโยชน์อันสูงสุด

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

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

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

รูปจาก Interaction Design Foundation : Technology + Business + Design = User Experience

ต่อมาคือ UI ศาสตร์แห่งความสวยความงาม

เป็นศาสตร์ที่จะมาเติมเต็ม UX ให้ออกมาเป็นรูปเป็นร่าง เป็น first impression ที่ดีสำหรับผู้ใช้ ไม่ว่าจะเป็นเรื่องของสี การจัดวางองค์ประกอบ รวมไปถึงขนาดของตัวอักษรก็มีผลต่อความสวยงาม และต้องคำนึงถึงการใช้งานที่ง่ายและเฟรนด์ลี่ต่อผู้ใช้อีกด้วย

ดังนั้น UX ไม่ใช่ UI และ UI ไม่ใช่ UX สามารถเปรียบสองสิ่งนี้เหมือนสมองซีกซ้ายกับซีกขวา และ โครงสร้างของสิ่งของกับรูปร่างหน้าตาของสิ่งของ

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

ตอนนี้เราก็ได้รู้ถึงความต่างระหว่าง UX และ UI แล้ว งั้นเรามาเริ่ม 4 ขั้นตอนของการออกแบบโปรดักส์แบบ Full Stack Design กันฮะ

# 01

Concept is !important

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

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

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

ช่วยกัน Brianstrom เอาให้ชัวร์ว่าจะทำอะไร ทำไปทำไม ทำเพื่อใคร ทำยังไง ตรงนี้ต้องให้เข้าใจตรงกัน

# 02

Functional

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

• ฟีเจอร์ที่สำคัญสำหรับผู้ใช้ คือ ถ้าไม่มีมันชีวิตก็จะลำบากชีวิต
• ฟีเจอร์ที่ทำให้ผู้ใช้พึงพอใจ (ราคาหรือการใช้งาน เป็นต้น)

สามารถอ่านวิธีทำเพิ่มเติมได้ที่บทความนี้

ลูกค้าอยากได้ไปหมด ทำอะไรก่อนดี

วิธีนี้จะช่วยให้เรารู้ว่าเราควรจะทำอะไรก่อนหรือหลัง ซึ่งจะช่วยให้เราเรียงลำดับความสำคัญได้ง่ายขึ้น

และส่วนตัวเชื่อว่าการทำฟีเจอร์ที่สำคัญสำหรับผู้ใช้ก่อนนั้นเป็นอะไรที่เริ่มต้นได้ดี ถ้าจะบอกว่า “ มันเป็นของที่มีคนทำแล้ว ไม่ใช่ของใหม่ผู้ใช้อาจจะไม่สนใจแล้ว อย่าทำเลย .. ”

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

คิด feature จาก emphaty map ที่เราพยายามทำความเข้าใจผู้ใช้ ถ้าตัดสินใจไม่ได้ ก็เอาไปเทสตามวิธีด้านบน

# 03

Usability

ตรงนี้ก็ยังคงเป็นหน้าที่ของ UX ที่จะต้องทำ wireframe และ interaction design เพื่อให้เกิดความใกล้เคียงกับแอปจริงมากที่สุดว่าจะเกิดอะไรขึ้นเมื่อเข้าเมนูนี้ คลิกที่ปุ่มนี้ หรือแม้กระทั่งการปัดหน้าจอของแอป เป็นต้น

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

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

ได้ขออนุญาตผู้เข้าร่วมทดสอบก่อนเก็บภาพเป็นที่เรียบร้อยแล้วค่ะ

# 04

Visual Design

ตอนนี้ก็ถึงเวลาของ UI Designer, Graphic Designer, Copywriter ต่างๆ ออกโรงแล้วจ้า หลังจากผ่าน process ที่ว่ามาทั้งหมด ก็ถึงขั้นตอนของการนำเอา wireframe และ interaction design จากทีม UX มาออกแบบหน้าตาให้สวยงาม เหมาะสม และใช้งานง่าย

สรุป

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

1. คิดและตกลงกันเรื่อง Conceptให้ดี

2. เรียง Feature ที่จำเป็นต้องทำตามลำดับ

3. ทำ Usability สำหรับเทสเพื่อให้ได้รู้ถึงความต้องการที่ชัดเจนของผู้ใช้

4. ออกแบบ UI ให้สวยงามและใช้งานง่าย

สุดท้ายนี้หวังว่าทุกคนที่มีความสงสัยเกี่ยวกับ UX/UI design ขั้นตอนการทำ หรือผู้ที่ให้ความสนใจในด้านนี้อยู่แล้วจะได้รับประโยชน์จากบทความนี้ไม่มากก็น้อย ครั้งหน้าออนจะมาแชร์เรื่องเกี่ยวกับ Design Thinking ให้ทุกคนได้อ่านกันนะคะ 💙

ฝากบทความเกี่ยวกับการใช้สีใน UI ด้วยนะคะ 😊✨

ทำไมต้องใช้ HSB ในการช่วยออกแบบ UI