4 เหตุผล ทำไมพรักซุสเรา ถึงเน้นการทำ wireframe (และไม่เน้นทำ UI)

ทำไมตอนออกแบบ UX บริการของเราถึงเน้นทำแต่ Wireframe และไม่เน้นทำ UI?

พรักซุสเป็นบริษัท สอน UX

พรักซุสเป็นบริษัท สอน UX + ทำ UX Research

พรักซุสเป็นบริษัท สอน UX + ทำ UX Research + ทำ UX Design

สิ่งที่พรักซุสเราไม่ค่อยบอกเท่าไหร่เกี่ยวกับ service ของเรา ก็คือ เราทำ UX Design ด้วยนะครับ (ชื่อบริษัทคือ “Pruxus Design” มีคำว่า Design อยู่)

เพียงแต่ว่าเราเน้นสื่อสารเรื่องการทำ UX Research มาก เลยอาจจะทำให้หลายคนคิดว่าบริษัทนี้สอน UX กับทำ Research เท่านั้น ครับ

แต่คำว่า “ทำ UX Design” ของเรา ก็มีความแปลกกว่าบริษัท UX อื่น ๆ อยู่เช่นกันครับ เพราะงาน Design ของเรานั้นเราจะส่งมอบงานในรูปแบบ “Wireframe” เป็นหลัก และปกติเราจะไม่ทำ Visual Design (หรือที่หลายคนเรียกว่า “ทำ UI”) เลย ซึ่งก็เลยมักจะมีลูกค้าหลายเจ้าถามว่าทำไม ทำแค่ Wireframe มันไม่เห็นดูน่าใช้เลย

โพสต์นี้ก็เลยอยากจะมาอธิบายว่าทำไม “Wireframe” ถึงเป็นเครื่องมือที่มีประสิทธิภาพที่สุดสำหรับเรา และทำไมเราถึงได้เน้นส่งมอบแค่ Wireframe เป็นหลัก รวมทั้งปัญหาด้านจิตวิทยามนุษย์หลายอย่าง ที่การทำ Wireframe มันจะช่วยแก้ปัญหาให้ได้ด้วยครับ

======================

Wireframe คืออะไร?

Wireframe คือโครงร่างของหน้าจอที่แสดงการจัดวางองค์ประกอบต่าง ๆ โดยไม่มีสีสันหรือกราฟิกที่สวยงาม (แบบในรูปประกอบโพสต์นี้ครับ)

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

ซึ่งต่างจาก “UI” ที่จะเน้นหน้าตาที่สวยงามเหมือนเป็นเวอร์ชันจริงที่จะสร้างออกมาเป็นโปรดักส์จริงครับ

==============================

4 เหตุผลที่ทางพรักซุสเน้นทำแต่ Wireframe

==============================

1 บังคับให้ทุกคนโฟกัสไปที่ “การใช้งานของ users” ก่อน “หน้าตาความสวยงาม”

เนื่องจากงานดีไซน์ที่เราทำที่ส่วนมาก จะเป็นการออกแบบระบบที่มีความซับซ้อนมาก (เช่นระบบธนาคาร, ระบบ eCommerce ที่มีขั้นตอนแปลก ๆ หรือระบบ HR ภายในองค์กร เป็นต้น)

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

แต่จริง ๆ แล้วมีสิ่งที่สำคัญยิ่งกว่า (โดยเฉพาะระบบที่มีความซับซ้อนมาก) ก็คือ การออกแบบ flows การใช้งาน, การแสดงข้อมูลต่าง ๆ บนแต่ละหน้าจอ, Interactions การใช้งานในจุดต่าง ๆ, การใช้คำพูดที่เข้าใจง่าย, ฯลฯ ซึ่งสิ่งเหล่านี้ควรเป็นสิ่งที่เราต้องทำก่อนความสวยงาม และเป็นสิ่งที่ Wireframe สามารถถ่ายทอดออกมาได้ครบถ้วนครับ

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

------------------------------------------

2จะได้ “ทำแล้วทิ้ง” (Iterations) ได้เร็วยิ่งขึ้น

หัวใจหลักของการสร้างโปรดักส์ให้ตอบโจทย์ users คือการที่เราต้องพยายามมี การทำซ้ำ หรือ “Iterations” ให้มาก

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

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

ดังนั้นการทำ Wireframe มันจึงเป็นการทำ design ที่ใช้แรงและเวลาน้อยที่สุด แต่ยังเก็บในสิ่งที่สำคัญที่เราควรต้องเก็บก่อนไปถึงเรื่องความสวยงาม นั่นก็คือ flow การใช้งาน และข้อมูลต่าง ๆ ได้ครบครับ

------------------------------------------

3 สามารถช่วยให้โฟกัสที่ “Cases” และ “States” ของการใช้งานของ users ได้ครบถ้วนยิ่งขึ้น

คำว่า Cases นั้นคือ รูปแบบการใช้งานที่เป็นไปได้ของ users ทั้งหมด (เช่น การสมัครสมาชิกเว็บ ที่ users บางคนอาจจะใช้ Facebook หรือ Google แต่ก็อาจจะมี Case ที่บางคนสมัครด้วยอีเมลไปแล้ว แต่ลืมว่าเคยสมัคร มาครั้งนี้กดสมัครด้วย Google และใช้อีเมลที่ซ้ำกับเดิมที่เคยสมัครไป ระบบจะต้องแสดงผลอย่างไร?)

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

ซึ่งระบบที่มี UX ที่ดี จะต้องมีการออกแบบรองรับ Cases และ States ให้ได้ครบมากที่สุดเท่าที่จะเป็นไปได้ครับ ยิ่งระบบใหญ่มาก ยิ่งมี Cases และ States เยอะแบบมหาศาลมาก ยิ่งจำเป็นต้องพึ่งพารูปแบบการออกแบบที่โฟกัสเรื่องการใช้งาน และลดในเรื่องความสวยงามออกไปก่อนครับ

และจุดสังเกตอย่างนึงคือ ส่วนมากปัญหาการใช้งานที่รุนแรงมาก ๆ ก็มักจะเกิดกับ Cases หรือ States ที่ดีไซเนอร์ไม่ได้ออกแบบเผื่อไว้นี่ละครับ

------------------------------------------

4 ช่วยให้สื่อสารกับทีม Devได้แต่เนิ่น ๆ

เพราะความคล่องตัวของการทำ Wireframe มันเลยช่วยให้เราสามารถอธิบายการทำงานของดีไซน์ให้ทีม Dev ฟังได้ตั้งแต่เนิ่น ๆ ครับ ซึ่งเร็วกว่าการทำ UI ให้เสร็จก่อน เราสามารถสื่อสารว่า flows เป็นแบบไหน, Cases/States ต่าง ๆ เป็นอย่างไร และทีม Dev ก็จะได้สามารถเตรียม code หรือออกแบบ Database รอไว้ได้เลยแต่เนิ่น ๆ

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

และในช่วงที่ทีม Dev เริ่มขึ้น Code ของการทำงานของ flows ระบบ ทีมที่ทำ UI ความสวยงาม ก็สามารถทำงานขนานกันไป และทะยอยส่งเพิ่มให้ทีม Dev ต่อไปได้ ซึ่งก็จะช่วยประหยัดเวลาในระดับภาพรวมของทั้งโปรเจ็คได้ด้วยครับ

------------------------------------------

เพราะเหตุนี้เอง การทำ Wireframe เลยเป็นเครื่องมือทำ Design สำคัญของทางพรักซุสเราครับ เพราะเราโฟกัสมาก ๆ กับการคิด Flows, Cases, States ให้ครบถ้วน เพื่อให้ users ใช้งานได้ง่ายที่สุด และลดโอกาสที่เกิดปัญหาตามมาจากการคิดไม่ครบครับ ทีมเราจึงให้ความสำคัญกับการทำ wireframe มากกว่าการทำ UI ครับ

ปล. ทั้งนี้เราก็ไม่ได้หมายความว่า การทำ UX ที่ไม่ทำ Wireframe แต่กระโดดไปทำ UI สวยงามทันทีเลย จะเป็นสิ่งที่เราไม่เห็นด้วยนะครับ

โปรเจ็คบางประเภทที่เน้นเรื่องความสวยงามมาก ๆ การทำ UI ไปเลยอาจจะเป็นสิ่งที่ work กว่าการทำ Wireframe ก็ได้ครับ