Please enable JavaScript.
Coggle requires JavaScript to display documents.
ให้นักศึกษาอ่านและทำความเข้าใจ พร้อมทั้งสรุป บทความหัวข้อ UX/UI Design…
ให้นักศึกษาอ่านและทำความเข้าใจ พร้อมทั้งสรุป บทความหัวข้อ UX/UI Design ทั้ง 5 บทความลงใน Coggle
4 สิ่งที่แตกต่างระหว่าง UX และ UI
UI Design หรือ User Interface Design นั้นก็คือศาสตร์ที่มาเติมเต็มให้กับ UX นั้นสวยงามและสมบูรณ์ ไม่ว่าจะเป็นเรื่องการจัดวางองค์ประกอบต่างๆ สี ขนาดตัวอักษร ฟอร์มต่างๆ ที่จะไปอยู่ภายในเว็บไซต์ หรือแอพพลิเคชั่นของเราให้สะอาด สวยงาม มีเอกลักษณ์ และใช้งานได้ง่ายยิ่งขึ้นนั่นเอง ซึ่งจะใช้ความคิดริเริ่มสร้างสรรค์เป็นหลัก
โดยถ้าเราต้องการที่จะเปรียบเทียบให้เห็นภาพก็คือ UX Design นั้นก็คือโครงสร้างบ้านของเรา ส่วน UI Design จะเป็นวัสดุหรืออุปกรณ์ต่างๆ ที่ใช้ตกแต่งบ้านให้สวยงาม
หลายๆ คนคงสงสัยว่า UX/UI Designer นั้นมีขั้นตอนการทำงานอย่างไร คนเดียวสามารถทำพร้อมกันเลยได้ไหม? ซึ่งจริงๆ แล้วกระบวนการและขั้นตอนการทำงานนั้นแตกต่างกันอยู่ โดยที่ UX Designer นั้นจะต้องทำการค้นหาปัญหา เก็บข้อมูล และทำการวิเคราะห์ข้อมูลที่ได้มา และเรียบเรียงออกมาเป็น Wireframe สำหรับทำการทดสอบการใช้งานของผู้ใช้ และสุดท้ายเพื่อส่งงานต่อให้กับ UI Designer ได้ทำงานต่อ อ้าว! แล้ว UI Designer เราล่ะ มีขั้นตอนการทำงานอย่างไรบ้าง เริ่มแรกเลยเมื่อเราได้รับข้อมูล หรือ Wireframe จาก UX Designer แล้ว จะต้องนำข้อมูลที่ได้มาวิเคราะห์ แล้วตีโจทย์ที่ได้ออกมาเป็นภาพ อีกทั้งยังต้องคำนึงถึง Mood&Tone ของ Product นั้นๆ เพื่อให้สอดคล้องและเป็นไปในทางเดียวกันหรือบางครั้งจะต้องสร้าง UI Kits ไว้สำหรับใช้งานใน Product นั้นๆ เพื่อที่จะส่งต่องานให้กับทีมพัฒนาได้ง่ายขึ้น
แล้ว UX กับ UI เขาใช้อะไรทำงานกันนะ ?
ในส่วนของ UX Designer นั้นจะสร้าง Wireframe เพื่อเป็นการวางโครงสร้างหรือเนื้อหาภายใน Product ของเรา ซึ่ง Tool ที่ใช้นั้นมีมากมายหลากหลายมาก
เช่นมีดังนี้
Prototype โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน
Pencil Project โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Mac OS
Cacoo Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
JumpChart Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
FrameBox เป็น Web Application ที่เหมาะสำหรับทำ Wireframe มีฟีเจอร์น้อย แต่ใช้ฟรี เมื่อทำสร็จส่งลิงค์ให้ลูกค้าได้ทันที
iPlotz นั้นเป็น Web Application สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น สามารถใช้งานได้ฟรี แต่จะจำกัดหน้าในการใช้งาน
WireframeCC เป็น Web Application สำหรับทำ Wireframe ง่ายๆ มีทั้งขนาด Desktop, Tablet, Mobile ให้เราเลือกใช้งานได้ตามความต้องการ
Ux design คืออะไร
สินค้า/บริการ ที่ถูกสร้างขึ้นมา และมีคนนำไปใช้ก็ถือว่ามี UX เกิดขึ้นแล้ว อาจจะเป็นเว็บไซต์สอนเขียนโค้ดออนไลน์ ระบบจัดการบิลออนไลน์ หรือแม้แต่เก้าอี้ที่เรากำลังนั่งอยู่ตอนนี้ก็ตาม ถ้าหากเป้าหมายของผู้ใช้และผู้สร้างตรงกัน เราจะเรียกมันว่าเป็น UX ที่ส่งผลดี อาจจะฟังดูงง ๆ ผมขอยกตัวอย่างของการเลือกซื้อรถระหว่างนาย A และ นาย B ที่ไปทดลองขับรถคันเดียวกัน ซึ่งผู้สร้างตั้งใจจะทำให้มันเป็นรถที่ทำให้ผู้ขับรู้สึกสบาย และปลอดภัยมากที่สุด
A : ฉันว่ารถคันนี้มีตัวช่วยเยอะดีนะ แต่มันขับไม่สนุกเลย
B : ฉันชอบรถคนนี้มากเลย มีระบบขับอัตโนมัติ แถมยังมีถุงลมนิรภัยด้วย
แน่นอนครับว่าทั้ง A และ B มี Experience เกิดขึ้นกับรถแน่นอน แต่สิ่งที่แตกต่างกันคือ Goal ของทั้งสองคนในการเลือกซื้อรถไม่เหมือนกัน นาย A อยากได้ประสบการณ์ความเร้าใจจากการขับรถ ในขณะที่นาย B อยากได้ความสบาย และความปลอดภัยสิ่งที่เกิดขึ้นระหว่างนาย B และรถยนต์คันดังกล่าวเราจะเรียกมันว่าเป็น UX ที่ส่งผลดี (ความต้องการของผู้ใช้ และผู้สร้างตรงกัน)
ในการออกแบบธุรกิจนั้น เรามักจะเริ่มด้วย Business Goals เพื่อให้รู้ก่อนว่าเป้าหมายทางธุรกิจนั้นเป็นอย่างไร เมื่อเรารู้เป้าหมายทางธุรกิจแล้ว ก็เพิ่ม User Goals เข้ามาเพื่อหาว่าสิ่งที่เราจะทำนั้นมันไปตอบโจทย์ใครบ้าง จากนั้นก็ทำ UI ขึ้นมาเพื่อให้ผู้ใช้งานสามารถใช้งานได้ และ UI ก็จะขาด Back End Process ไม่ได้เลย เพราะสิ่งนี้จะเป็นสิ่งที่ทำให้ UI นั้น สามารถทำงานได้ สิ่งเหล่านี้แหละที่เราจะเรียกมันว่า UX Design
ไม่ว่าจะเป็นการทำ Digital Product อย่างแอปพลิเคชัน หรือจะเป็น Physical Product อย่างพวกโต๊ะ เก้าอี้ ก็จะใช้สมการนี้เหมือนกัน
ลักษณะของสิ่งที่มีคุณค่านั้นจะประกอบไปด้วยคุณสมบัติต่าง ๆ ดังนี้ครับ
มีประโยชน์ (Useful)— ต้องมีประโยชน์ และเติมเต็มความต้องการของผู้ใช้ได้
ดูน่าสนใจ (Desirable)— ภาพลักษณ์จะต้องเป็นที่น่าดึงดูด และง่ายต่อการเข้าใจ
การใช้งาน(Accessible) — การออกแบบการใช้งานจะต้องคำนึงถึงผู้ใช้หลาย ๆ กลุ่ม เช่น ผู้พิการ เป็นต้น เพื่อให้พวกเค้าสามารถใช้สินค้า/บริการ ของเราได้
น่าเชื่อถือ (Credible) — ตัวสินค้า/บริการ จะต้องมีความน่าเชื่อถือ และความไว้วางใจ
การเข้าถึงข้อมูล (Findable) — ผู้ใช้จำเป็นที่จะต้องเข้าถึงข้อมูลต่าง ๆ ได้ง่าย หรือถ้าหากเกิดปัญหาตรงไหน ผู้ใช้ก็จะต้องหาวิธีการแก้ไขได้ด้วยเช่นกัน
ใช้งานได้ง่าย (Usable) — ตัวสินค้า/บริการ จะต้องเข้าใจได้ และใช้งานได้ง่าย เพื่อไม่ไปรบกวนการเรียนรู้ของผู้ใช้ (Learning Curve) มากจนเกินไป
ดังนั้นสิ่งที่สำคัญที่สุดในการออกแบบคือต้องระบุปัญหาให้ถูกจุด ปัญหาไหนที่มีคุณค่าพอที่เราจะลงไปแก้ไข ซึ่ง UX Design ก็คือการค้นหาวิธีต่าง ๆ ที่เป็นไปได้ เพื่อดูว่าปัญหามีอะไรบ้าง เราต้องระบุให้ได้ว่าปัญหามาจากตรงไหน และเราจะแก้ที่จุดใด
ทำไมต้องใส่ใจเรื่องUx
สินค้า/บริการ ที่เราใช้กันอยู่ในทุกวันนี้ ล้วนแต่ให้ประสบการณ์กับเราทั้งสิ้น ไม่ว่าจะเป็นเตียงนอน แปรงสีฟัน ไปจนถึงการบริการตามร้านอาหารตามสั่ง ของสิ่งต่าง ๆ ให้ประสบการณ์ที่แตกต่างกันออกไป สิ่งนึงที่ผมค่อนข้างมั่นใจมาโดยตลอดคือ ไม่ว่าสินค้า/บริการ จะเหมือนหรือคล้ายคลึงกันมากแค่ไหน แต่ประสบการณ์ที่ได้ก็จะแตกต่างกันออกไปอยู่ดี เรามาดูกันดีกว่าทำไมเราถึงต้องใส่ใจให้กับเรื่องของ UX
สินค้า/บริการ ต้องมีคนใช้
ใช่ครับ เพราะเราผลิตสินค้า/บริการ ออกมาให้ คน ได้ใช้กัน สิ่ง ๆ นึงที่คนทุกคนจะต้องมีนั่นคือ ประสบการณ์ เราทุกคนล้วนมีประสบการณ์ครับ มีทั้งที่ดี และไม่ดี การใช้ Google Maps นั้นทำให้การเดินทางในยุคนี้สะดวกมากขึ้น ไม่ต้องมานั่งกางแผนที่ดูเหมือนแบบไม่สมัยก่อน บอกเลี้ยวแบบซอยต่อซอยได้เลยทีเดียว เมื่อถึงจุดหมายปลายทางชีวิตก็แฮปปี้….แต่การใช้ Google Maps ก็ไม่ได้ทำให้ชีวิตแฮปปี้เสมอไป มีหลายคนมากที่ยังหลงทางเพราะ Google Maps ผมเองครั้งนึงก็เคยหลงเช่นกัน เพราะมัวแต่สนใจ Google Maps จนลืมดูป้ายบอกทาง (ตอนนั้นผมเชื่อ Google Maps มากกว่า) ทำให้ผมวนขึ้นทางด่วนไป 2 รอบ เซงสุด ๆ หลังจากนั้นผมได้บทเรียนว่าให้อ่านป้ายบอกทางทุกครั้ง แล้วดูว่ามันตรงกับใน Google Maps ไหม
จากเหตุการณ์นี้เราจะเห็นเลยครับว่า ประสบการณ์ที่ไม่ดีมักจะติดอยู่ในหัวของคนมากกว่าประสบการณ์ที่ดี สาเหตุที่มันเป็นแบบนั้นก็เป็นเพราะว่า เรามักจะจำสิ่งที่ไม่ค่อยดี เพื่อที่จะหลีกเลี่ยงประสบการณ์เหล่านั้นไม่ให้เกิดขึ้นกับตัวเองอีก และนี่ก็เป็นสาเหตุหนึ่งที่เราจะต้องใส่ใจ UX กับตัวสินค้า/บริการ ของเรามาก ๆ เพราะเราก็ไม่อยากให้ Expereince ที่ไม่ดีเกิดขึ้นกับผู้ใช้งานของเรา
ผู้คนมักจะมองหาสิ่งที่พวกเค้าต้องการ
เราทุกคนล้วนแต่มองหาสิ่งต่าง ๆ เพื่อมาเติมเต็มความต้องการของตัวเอง เรารู้ว่าเราต้องการอะไร (แม้บางครั้งเราจะอธิบายออกมาไม่ได้ก็ตาม) เรารู้ว่ามีสิ่งไหนบ้างที่พอจะเติมเต็มความต้องการของเราได้ เราก็จะมองหาสินค้า/บริการ เพื่อมาเติมเต็มความต้องการเหล่านั้น และทุกครั้งที่เรากำลังมองหาสินค้า/บริการ เรามักจะเต็มไปด้วยคำถามในหัวเสมอ ๆ เช่น
“ไอ้นี่มันจะดีไหม ?”
“ มันใช่สิ่งที่เราต้องการจริง ๆ หรือเปล่า ?”
“ถ้าใช้ ๆ อยู่มันพัง จะทำยังไงดี”
ดังนั้นการผลิตสินค้า/บริการ ก็เหมือนกับการสื่อสารครับ เราต้องรู้ว่าเราควรจะพูดอะไร พูดแบบไหน และพูดเมื่อไหร่ เพื่อให้การสื่อสารระหว่างผู้ส่งสาร (ผู้ผลิต) และผู้รับสาร (ลูกค้า) นั้นบรรลุผล
ความคาดหวังจากสิ่งที่มองเห็น
ประสบการณ์แรกสุดที่คนเราจะได้รับ จะมาจากการที่แสงสะท้อนกับวัตถุและกระเด็นเข้าตาของเราเนี่ยแหละครับ พูดง่าย ๆ ก็คือสิ่งที่เรามองเห็นนั่นเอง การตกแต่งภายในร้านกาแฟ ปกหนังสือ หรือแม้กระทั่งไอคอนที่อยู่ใน App Store ก็ตาม เมื่อเรามองไปยังสินค้า/บริการต่าง ๆ ในหัวเราก็จะเริ่มใส่ความคิดเห็นลงไป เช่น ร้านกาแฟนี้มันต้องแพงมากแน่ ๆ หนังสือเล่มนี้น่าจะไม่ใช่แนวที่เราอ่าน หรือแอปพลิเคชันนี้ไม่น่าจะเอาไว้ใช้ถ่ายรูป เป็นต้น สิ่งเหล่านี้เกิดขึ้นได้เพียงแค่การมองครับ และการยังเป็นตัวที่ทำให้เกิดการตัดสินใจที่จะเลือก หรือไม่เลือกสินค้า/บริการนั้น ๆ ด้วย มีหลายครั้งที่เราเลือกจะไม่ใช้สินค้า/บริการต่าง ๆ เพียงเพราะเราเห็นแล้วรู้สึกว่ามันดูใช้งานยาก หรือไม่เข้าใจว่ามันคืออะไร
ความสำคัญของNavigation บนเว็บไซต์
ผมเชื่อว่าทุกคนต้องเคยผ่านการใช้งานเว็บมาบ้างแล้วล่ะ (อย่างน้อยก็ต้องผ่านเว็บเพื่อมาอ่านบทความนี้ได้ 5555) และผมคิดว่ามีไม่น้อยเลยทีเดียวที่เคยหลงทางบนเว็บไซต์ หรือหาสิ่งที่ตัวเองต้องการไม่เจอ ไม่รู้ว่าตอนนี้กำลังใช้เว็บอะไรอยู่ และมันก็จะลงเอยด้วยการปิดเว็บนั้นทิ้งไป ยิ่งเราอยู่ในยุคที่การเกิดขึ้นของเว็บไซต์นั้นเพิ่มมากขึ้นแบบเท่าตัว ไม่ต้องแปลกใจเลยครับ บางคนเข้ามาหน้าแรกไม่ถึง 10 วินาที ก็กดปุ่ม Back ไปหาเว็บอื่นต่อแล้ว ในบทความนี้เลยจะมาแชร์เรื่องความสำคัญของ Navigation บนเว็บไซต์กันครับ
ทำไมต้องทำ Navigation บนเว็บไซต์
ถ้าคุณกำลังทำเว็บไซต์แบบ One-Page ที่มีเนื้อหาไม่มากนัก ก็อาจจะมองไม่เห็นความสำคัญของการนำทางหรอกครับ มันเหมือนกับการขับรถบนถนนที่มีแต่เส้นตรงไปกลับอย่างเดียว แต่ลองนึกถึงเว็บไซต์ขนาดใหญ่ เช่น เว็บขายของออนไลน์ หรือเว็บค้นหาเที่ยวบิน มันเหมือนกับขับรถในเมืองขนาดใหญ่ที่มีซอยเป็นร้อย ๆ ซอย มีหลงแน่นอน ดังนั้นจุดประสงค์หลัก ๆ ของตัว Navigation นั้นมีอยู่ 2 ข้อ คือ
ทำให้ผู้ใช้รู้ว่าตอนนี้ตัวเองอยู่ที่ไหน
ทำให้ผู้ใช้รู้ว่าควรจะหาสิ่งที่ตัวเองต้องการได้จากส่วนไหนของเว็บไซต์
ถ้าใครเคยไปซื้อของในห้างสรรพสินค้า ก็คงจะคุ้นเคยกับป้ายบอกทางต่าง ๆ เป็นอย่างดี ในการเลือกซื้อของในห้างสรรพสินค้านั้นจะมีคนอยู่ 2 แบบครับ แบบแรกจะเป็นแบบที่ยอมเสียเวลาหน่อยเพื่อเดินหาเอาตามป้าย กับแบบที่สองคือเดินเข้าไปถามพนักงานเลยเพื่อให้เค้าพาไปหาสิ่งที่เราต้องการ ซึ่งการตัดสินใจว่าจะเลือกแบบไหนนั้นมาจากหลายปัจจัย เช่น ความคุ้นเคยกับสถานที่ ความเร่งรีบ เป็นต้น
ในโลกออนไลน์ก็เหมือนกันครับ เรากำลังมองหาอะไรสักอย่าง ไม่ว่าจะเป็นหูฟัง ของเล่น กล้อง หรืออะไรก็ตามที่ตัวเราเองต้องการ จากนั้นก็เปิดเว็บไซต์หา เราอาจจะมีเว็บไซต์ขาประจำที่ใช้ซื้อของบ่อย ๆ หรืออาจจะเพิ่งพา Google ก็ได้ ซึ่งมันอยู่ที่ว่าเราจะหาเอง หรือจะมองหาตัวช่วยอื่น ๆ เข้ามาช่วย เพราะอย่าลืมครับว่าในโลกออนไลน์นั้นเราไม่มีพนักงานประจำแผนกคอยให้ความช่วยเหลือ
ความแตกต่างระหว่างโลกความเป็นจริง และโลกออนไลน์
จริง ๆ แล้วการมองหาอะไรสักอย่างในโลกของความเป็นจริงนั้นจะคล้ายคลึงกับการค้นหาบนโลกออนไลน์ แต่สิ่งที่ทำให้แตกต่างกันนั่นก็คือประสบการณ์ในการค้นหาครับ ในโลกของออนไลน์นั้นมันมีปัจจัยหลาย ๆ อย่าง เรามาดูกันดีกว่าว่ามีอะไรบ้าง
ขนาด
ทุกครั้งที่เราค้นหาอะไรบางอย่างบนโลกออนไลน์ หรือเว็บไซต์ขายของสักเว็บเคยถามตัวเองไหมครับว่ามันใหญ่ขนาดไหน ร้อยหน้า หรือพันหน้า นั่นแหละครับที่เป็นปัญหา มันไม่เหมือนกับการไปห้างสรรพสินค้าตรงที่เรารู้ว่าห้างมันใหญ่ขนาดไหน มีกี่ชั้น เรารู้ว่าเราเดินจนครบหมดแล้วหรือยัง แต่พอเป็นเว็บไซต์ที่ไม่มีขนาดบอก เราจะไม่รู้เลยว่าเราเห็นข้อมูลทั้งหมดที่เว็บมีแล้วหรือยัง มันเลยเกิดคำถามว่า แล้วเราจะเลิกหาของจากเว็บนี้ได้เมื่อไหร่
ทิศทาง
เวลาที่เราเดินหาของตามห้างเราจะรับรู้ถึง “ทิศทาง” เช่น ซ้าย ขวา บน ล่าง แต่พอมาเป็นเว็บไซต์มันจะเหลือแค่การ scrolling เท่านั้น แม้มันจะเป็นขึ้น ลง เหมือนกันแต่ ประสบการณ์ที่ได้ต่างกันแน่นอน และบางเว็บก็เปลี่ยน layout ของตัว content แทบจะทุกเดือน ทำให้ “ทิศทาง” บนเว็บไซต์นั้น แทบจะไม่มีความหมายเลย
มิติ
ในความเป็นจริงเวลาเราเดินไปไหนมาไหน สิ่งหนึ่งที่เรารับรู้ได้คือ มิติ ของสถานที่ ให้ลองนึกถึงห้างสรรพสินค้าที่เราไปบ่อย ๆ ครับ ถ้าเปรียบเทียบกับการไปครั้งแรกที่เดินหลง ๆ มั่ว ๆ เพราะยังไม่รู้จักสถานที่ดีพอ กับ ณ ปัจจุบันที่เราแทบจะเป็นเจ้าถิ่นของห้างนั้นแล้ว เราจะรู้เลยว่า อ้อ โรงหนังอยู่ชั้น 4 ขึ้นบันไดเลื่อนฝั่งหลังห้างไปเรื่อย ๆ พอถึงชั้น 4 แล้วเลี้ยวขวา ก็จะเจอโรงหนัง นี่คือสิ่งที่เกิดขึ้นในโลกความเป็นจริง แต่พอมาเป็นเว็บ เท้าของเราไม่ได้สัมผัสพื้น ไม่มีการเคลื่อนไหวใด ๆ ทั้งสิ้น เราจะไปยังจุดต่าง ๆ ผ่านการคลิกที่ลิงก์เท่านั้น เหมือนกับการใช้ใบวาร์ปกลับบ่อ หรือ Fast Travel ตามเกม RPG นั่นเอง ซึ่งเป็นอีกเหตุผลว่าทำไมปุ่ม back และปุ่มกลับหน้าหลักถึงถูกใช้บ่อยมากบนเว็บไซต์ เพราะถ้าเกิดเราหาอะไรไม่เจอ เราก็แค่กดปุ่มเหล่านี้ เหมือนกับเวลาเราหลงทางในป่าตามเกม RPG แล้วก็ใช้ใบวาร์ปกลับจุดเซฟนั่นแหละ
การทำประกันงานออกเเบบด้วยWireframe
Wireframe เปรียบเสมือนพิมพ์เขียว หรือที่มักจะเคยได้ยินในหนังฮอลลีวูดว่า ฺBlueprints มันมีหน้าที่คือทำให้ผู้ที่เกี่ยวข้องกับงานนั้น ๆ มองเห็นเป็นภาพเดียวกัน ในมุมของการออกแบบ มันก็คือการทำให้ ทั้ง Business, Developer, Designer, Stakeholder หรือผู้ที่มีส่วนเกี่ยวข้อง มองเห็นชิ้นงานเป็นภาพเดียวกัน ก่อนที่จะเริ่มเอาไปทำเป็น Product จริง ๆ ขึ้นมา ลองนึกสภาพของหนังปล้นธนาคารของฮอลลีวูดสิครับ ถ้าพวกตัวเอกที่เป็นโจรไม่มีพิมพ์เขียวของธนาคาร และลงมือปล้นเลยทันที การปล้นครั้งนั้นคงเละไม่เป็นท่าแน่นอน เพราะแต่ละคนจะไม่รู้ว่า ธนาคารมีโครงสร้างอย่างไร อันไหนคือห้องเก็บเงิน
ทำไมเราต้องทำ Wireframe ?
จากนั้นชีวิตผมก็ดีขึ้น เมื่อได้รู้จักกับ Wireframe (พูดได้ขายประกันมาก) การทำ Wireframe นั้น สามารถทำได้เร็วกว่าตัว Hi-End UI เยอะเยอะมาก เพราะไม่ต้องมาโฟกัสเรื่องความสวยงาม หรือรายละเอียดยิบย่อยอย่างการจัด Alignment มากนัก ซึ่งการทำได้เร็วกว่าแปลว่าเราสามารถขัดเกลาไอเดียกับทีมได้เร็วและมากขึ้น อีกทั้งยังเป็นการเซฟตัว Designer ไปในตัวด้วย เพราะถ้าหากมีการแก้ไข หรือปรับ Flow ตรงไหน ก็จะสามารถแก้ไขได้เร็วกว่า ยิ่งล้มเหลวเร็วเท่าไหร่ยิ่งดีครับ เพราะทุกครั้งที่เราล้มเหลว แปลว่าไอเดียเราจะถูกขัดเกลาขึ้นไปเรื่อย ๆ
ทำ Wire Frame ยังไงดี ?
เหตุที่ Wireframe นั้นทำได้เร็วกว่า Hi-End นั้น เพราะว่ามันเป็นแค่พิมพ์เขียวครับ มีแต่โครงคร่าว ๆ ที่พอจะถ่ายทอดไอเดียให้คนอื่นเข้าใจได้ และนั่นแหละครับ เราไม่ต้องเสียเวลาไปจัด Alignment เป๊ะ ๆ หรือมานั่งจิ้มสีให้มันสวย ๆ แค่วาดมันออกมาให้คนเข้าใจไอเดียของเราก็พอแล้ว
ก่อนอื่นที่จะเริ่มทำ Wireframe เราควรคุยเรื่อง Flow ให้ชัดเจนก่อน ว่า Flow ของระบบนั้นเป็นยังไง ต้องเจออะไรบ้าง คุยกับทีมแบบคร่าว ๆ ก็พอครับ เดี๋ยวตอนทำ Wireframe ก็จะเจอ Flow ท่าบังคับตาม Design Pattern เอง เช่น พวก Pop-Up เป็นต้น
หลังจากได้ Flow แล้วก็เริ่มลงมือวาดเลยครับ เลือกเครื่องไม้เครื่องมือที่คิดว่าตัวเองทำได้เร็วที่สุด แล้ววาดมันออกมา อย่างที่บอกครับ ไม่เน้นสวย เน้นใช้เล่าไอเดียได้ก็เพียงพอแล้ว บางรายละเอียดไม่ต้องลงเยอะมาก อย่างเช่นรูปภาพวาดกล่อง ๆ นึงไปพอ แล้วบอกว่าเป็นรูปภาพ ส่วนที่เป็น Content ยาว ๆ ก็ใช้ Lorem
โฟกัสที่โครงสร้าง มากว่าความสวยงามสิ่งที่สำคัญอย่างหนึ่งที่ผมอยากให้คำนึงไว้เสมอคือ เราทำ Wireframe เพื่อให้ทีมดูโครงสร้างครับ ไม่ใช่ให้ดูที่ความสวยงาม และนั่นจึงเป็นสาเหตุที่ผมแนะนำให้ใช้ดินสอกับกระดาษ และไม่ต้องลงรายละเอียดมากจนเกินไปนัก อ้อที่สำคัญ ขาว-ดำ พอครับ ไม่ต้องลงสีสันให้บรรเจิดจ้ามาก เพราะตอนที่เราเอาให้ทีมดู เราอยากรู้แค่ว่า Flow ของระบบมีปัญหาไหม มีตรงไหนที่ Developer ทำไม่ได้บ้าง ทาง Business ติดปัญหาตรงไหนใน Flow ไหม คือให้ทุกคนโฟกัสที่ Flow กับรายละเอียดคร่าว ๆ พอครับ อย่าให้พวกเค้าคอมเมนท์กลับมาว่า ไม่ชอบสีตรงนี้ รูปตรงนี้ไม่สวย ซึ่งมันแทบจะไม่ช่วยอะไรเลยในการดู Flow ของระบบ
การทำ Wireframe นั้น เราต้องคำนึงถึงอะไรบ้าง
พูดคุยเรื่อง Flow แบบคร่าว ๆ กับทีม ก่อนจะเริ่มวาด Wireframe
อย่าลงรายละเอียดกับ Wireframe เยอะ เช่น สีก็ใช้ขาวดำ รูปไม่ต้องใส่ทำให้รู้ว่าเป็นรูปก็พอ ส่วนอันไหนเป็นข้อความที่ไม่ค่อยสำคัญมากใช้เป็น Lorem แทน
ทำให้เร็วที่สุดเท่าที่จะเป็นไปได้ แต่ต้องดูแล้วรู้เรื่อง
ตอนไปเสนอ พยายามให้ทุกคนโฟกัสไปที่ Flow อย่างเดียวเท่านั้น
ทำมันไปเรื่อย ๆ จนกว่าคนในทีมจะมองเห็นภาพของ Product เป็นภาพเดียวกัน
นางสาว จิราพัชร แก้วรอด ส1/12 เลขที่่ 14