[ DESIGN : UX/UI ] กว่าที่จะเห็นเป็นหน้าตาของ wip.camp ต้องผ่านอะไรมาบ้าง
สวัสดีครับ วันนี้ผมจะมาเล่าถึงการทำ UX/UI (ตำแหน่งใหม่) ของ wip.camp ว่ามีขั้นตอนอย่างไร มีปัญหาอะไรบ้าง และผมได้เรียนรู้อะไรบ้างครับผม นำนิ้วมาแตะที่หน้าจอ และเลื่อนลงมาอ่านกันเลย!!
UX/UI มันคือไรหรอ?
UX = User eXperience ส่วนนี้คือประสบการณ์ของผู้ใช้งาน คือเรื่องความสะดวก ตอบสนองการใช้งาน ยาก — ง่าย
UI = User Interface ตรงนี้มีคนแปลว่า “ส่วนติดต่อผู้ใช้” บ้างก็แปลว่า “หน้าจอผู้ใช้” คือสิ่งที่ผู้ใช้งานมองเห็นผ่านอุปกรณ์ทำงาน
// สรุปคือ // ต้องออกเเบบหน้าตากับการใช้งานให้กับหน้าเว็บเนี่ยแหละ!!
Brainstorm for Persona
ก่อนอื่นเลยพวกเราได้ช่วยกันคิด Persona (เป็นวิธีการสร้างบุคลิกลักษณะของกลุ่มเป้าหมายออกมาเพื่อเป็นตัวแทนกลุ่มเป้าหมาย) กันอย่างละเอียด และ เรียบเรียงเรื่องราวภายในเว็บเพื่อให้น่าสนใจยิ่งขึ้น
โดยที่เราได้ระดมสมองกัน ประมาณครึ่งวัน กระทั่งได้ออกมาเป็นน้องๆ ที่มีความหลากหลาย ทั้งผู้หญิง ผู้ชาย ทั้งมีความสนใจด้านไอที และชอบคอมพิวเตอร์ เป็นต้น
กว่าจะเป็น Wireframe / Prototype
เราได้เริ่มวาด Wireframe ออกมาทีละหน้าๆ โดยทำการวาดด้วยดินสอก่อน มีท้้ง Mobile /Desktop จึงต้องเเบ่งหน้าที่กันทำงาน … เมื่องานเสร็จ ได้ให้พี่ๆตรวจ พบว่ายังมีบางจัดต้องแก้ไขต่อไป และต้องคุยกันให้มากขึ้น!!
มาถึงกระบวนการการร่างแบบบน Ps (ซึ่งผมไม่เคยทำมาก่อน แต่ก็ได้พยายามและทำมันให้ดี) ในคราวนี้ได้เข้าไปคุยกับทีม Front-end และทีม Draft ของ Design มากขึ้น โดยถามถึงความเป็นไปได้ ว่าส่วนนี้เป็นอย่างไร ทำได้ไหม เป็นต้น รวมทั้งเริ่มคุยกันมากขึ้นๆเรื่อยๆ
เรามีการใช้ InVision เพื่อช่วยให้ตัว Wireframe มีชีวิตชีวายิ่งขึ้น สามารถทำ Action ง่ายๆ และ Transition ต่างๆ ทั้งยังมีเรื่อง Collaboration ที่สามารถทำงานร่วมกันในแต่ละโปรเจคบนนี้ได้เลยอีกด้วยครับ
แต่เเล้วก็ต้องหันกลับมาทบทวนการทำงานและงานที่ออกมาอีกหลายรอบเลย เพราะงานที่ออกมานั้น ยังต้องเเก้ไขจุดใหญ่ๆอีกมากมาย เช่น ปุ่มใหญ่ไป ตัวอักษรชิดขอบมากเกินไป ทีม Front-end จะทำได้หรือเปล่า และอีกคำถามมากมายที่ถาโถมเข้ามา ณ ตอนนั้น ถึงกับต้องออกเเบบใหม่หมด จากนั้นก็ได้ปรับปรุงมาเรื่อยๆตามลำดับ และออกเป็น Prototype ของตัวเว็บเวอร์ก่อนที่จะนำมาปรับใช้จริงครับผม [https://bit.ly/2Mf7osx]
มาท่อง - wip.camp -กันเถอะ
เรามาดูลูกเล่นที่หลายคนอาจจะไม่รู้กันดีกว่านะ
Tools ที่นำมาช่วยสร้างสรรค์ UI
เมื่อปัญหาเกิด เราต้องแก้มันสิ!!!
แน่นอนว่าการทำงานชิ้นนี้ของทีมเดฟนั้น เป็นงานแรกที่เราได้ทำงานร่วมกัน ในช่วงแรกๆอาจจะไม่ค่อยได้คุยกัน ทำให้งานที่ออกมานั้นหลุดออกนอกโลก และเข้าใจไม่ตรงกัน แต่ก็ได้มีรุ่นพี่ที่คอยให้คำแนะนำ ให้คำปรึกษา และงานที่ออกมานั้น สมบูรณ์ยิ่งขึ้น ทำให้ได้เรียนรู้อีกหนึ่งบทเรียนสำคัญในการทำงานเป็นทีมครับ
Special Thanks จากใจ
รัน ผักบุ้ง -> เพื่อนที่ร่วมทุกข์ร่วมสุขกันมาหลายเดือน กว่าจะได้ออกมาแต่ละเเบบ แก้แล้วแก้อีก ทำกันจนดึกดื่น นึกถึงเเล้วก็คิดนะว่าผ่านมาได้ไงว่ะ
เจนนี่ เฟม จิว ปลื้ม พี มายด์ -> อีกหนึ่งทีมที่ใกล้ชิดกันมาก ต้องคุยกันอยู่เกือบตลอด มีเรื่องที่อาจจะไม่เข้าใจกันบ้าง แต่เพื่อให้เว็บมันมีหน้าตาและประสบการณ์ที่ดีอีกด้วย
จอย มิ้ม ปอย กัน ต้อง พี่แจม -> ทีมงานออกแบบคุณภาพที่สร้างสรรค์รูปต่างๆออกมา ทั้งตัว wippo รายละเอียดต่างๆที่สวยงามในเว็บ และต้องขอโทษด้วยที่งานบางอย่างอาจจะไม่ได้นำมาใช้
พี่หมิง พี่แนน พี่ฟลุ๊ค พี่อ๊อฟ (พี่แจน พี่จิว) -> พี่ที่คอยช่วยเหลือ ให้กำลังใจ ช่วยคิดงานต่างๆออกมา ทั้งยังตามงานอีก ขอบคุณพี่จากใจเลย พี่หมิงพี่เเนนคงเข้าใจความรู้สึกดี 555
พี่เต้ พี่บาส พี่เอ -> พี่ทีม frontend ที่ต้องคุยอยู่ตลอดเหมือนกัน ขอบคุณพี่ที่คอยให้คำปรึกษา และให้กำลังใจ
กระต่าย เฟิร์ส ลาล่า เกม นาย เป้ -> ขอบคุณที่สร้างเกมส์ออกมาให้ทุกคนได้เล่นน และมียังมีเสื้อรามรันขายอยู่นะ
ไบร์ท ทีเจ ข้าวตู -> ขอบคุณที่ทำให้ทำให้เว็บอัพขึ้นได้
จิ๋ว ฝ้าย -> ที่ทำให้มีแอพดีๆได้ใช้ในค่ายกัน
ขอบคุณไอทีบางมดที่มอบโอกาสดีๆมาให้ครับ
