5 คำถามสำหรับการทำ UX/UI – เพราะการทำ Product ให้ง่าย มันยาก!

ช่วงเดือนที่ผ่านมานี้ Skooldio ได้จัดรายการ “ตอบคำถาม UX/UI กับ Skooldio” โดยคุณแบงค์ – อภิรักษ์ ปนาทกูล Founder of UX Academy และอดีต Google Developers Expert in UX/UI เป็นกิจกรรมที่เปิดโอากาสให้ทุกคนสนใจด้าน UX/UI มาแชร์มุมมองใหม่ๆ และตั้งคำถามที่สงสัย เพื่อมาไขข้อข้องใจเกี่ยวกับการออกแบบ UX/UI โดยเปิดให้ส่งคำถามผ่านทาง Facebook Page ของ Skooldio

โดยผ่านมาแล้ว 5 ตอนด้วยกัน โดยแต่ละตอนมาช่วยไขข้อข้องใจเกี่ยวกับ
EP.1 : ปุ่ม Next ควรอยู่ตรงไหน?
EP.2 : เทคนิค Card Sorting คืออะไร?
EP.3 : เมื่อไหร่ควรใช้ Drop Down VS Radio Button
EP.4 : เมื่อไหร่ควรใช้ Bottom Navigation หรือ Navigation Drawer
EP.5 : เด้ง Pop-up เมื่อไหร่ไม่ให้ผู้ใช้รำคาญ

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

EP.1 : ปุ่ม Next ควรอยู่ตรงไหน?

จะออกแบบปุ่ม Next ยังไง เพื่อให้ผู้ใช้งานได้รับ Experience ที่ดีที่สุด?

เคยไหม? กรอกข้อมูลครบเสร็จเรียบร้อย กำลังจะกดส่งหรือไปหน้าต่อไป แล้วหาปุ่ม Next ไม่เจอ

ทำไมแต่ละแอปพลิเคชันมีตำแหน่งของปุ่มนี้ต่างกันออกไป? 

แล้วปกติปุ่ม Next ควรอยู่ตรงไหนของหน้าจอกันแน่?

ก่อนอื่น เรามาทำความเข้าใจวิวัฒนาการของปุ่ม Next กันก่อน

โดยเริ่มแรกปุ่ม Next บน Desktop ส่วนมากจะออกแบบมาให้อยู่ข้างล่าง โดยไล่เรียงจากบนลงล่างเสมอ เป็นแบบนี้มาเรื่อยๆ จนมาถึงยุคของการใช้ Moblie ปุ่ม Next ไม่สามารถอยู่ข้างล่างได้ หลายๆ งาน Design เริ่มมีปัญหา เพราะมีแป้นคีย์บอร์ดบนหน้าจอเพิ่มขึ้นมา ยิ่งในสมัยก่อนที่หน้าจอโทรศัพท์ค่อนข้างเล็ก ทำให้คีย์บอร์ดบดบังเนื้อหาต่างๆบนหน้าจอเข้าไปอีก เช่น แสดงได้เพียงแค่ 1 Field ซึ่งทำให้ปุ่ม Next สามารถแสดงได้แค่นิดเดียวเช่นกัน จึงเป็นสาเหตุที่ผู้ใช้งานมักจะหา ปุ่ม Next ไม่เจอ

ต่อมา Iphone มีวิธีแก้ปัญหาคือมีการปรับเปลี่ยนตำแหน่งปุ่ม Next ไปไว้ข้างบนขวามือของหน้าจอโทรศัพท์ เพื่อให้ง่ายต่อการมองเห็น รวมไปถึงปุ่ม Save ด้วย ทำให้คีย์บอร์ดไม่บังปุ่มเหล่านี้อีกต่อไป รวมไปถึงเวลาผู้ใช้งาน Scroll ขึ้นลง ก็จะเห็นปุ่ม Next ตลอด 

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

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

แล้วเราควรจะเอา “ปุ่ม Next” ไปไว้ที่ไหนดี? 

ไม่มีคำตอบที่ถูกต้อง เพราะประเด็นหลักในการทำ UX ที่เราควรเน้นคือการ Test กับผู้ใช้งานของเรา เพราะแต่ละกลุ่มผู้ใช้งานอาจจะใช้งานต่างกัน ความเคยชินของ User ไม่เหมือนกัน กลุ่มที่ใช้ Apple กลุ่มที่ใช้ Android ก็จะมีความเคยชินที่ไม่เหมือนกัน

ดูวิดีโอเต็มได้ที่

---

EP.2 : เทคนิค Card Sorting คืออะไร?

Card Sorting คือหนึ่งในเครื่องมือในการทำ User Experience (UX) โดยเป็นการนำ Content ที่มีอยู่มาตัดเป็นการ์ด แล้วให้ผู้ใช้งานลองจัดเรียงการ์ดเหล่านี้ตามลำดับขั้นตอนในการใช้งาน รวมไปถึงการจัดหมวดหมู่ของการ์ดนั้นๆ (อ่านเพิ่มเติมเกี่ยวกับ 14 ศัพท์ใช้บ่อย! ในการทำงาน UX UI Designer)

เอาไปใช้ทำอะไร มีประโยชน์อย่างไรบ้าง?

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

ตัวอย่างการนำ Card Sorting ไปประยุกต์ในการออกแบบแอปพลิเคชัน

การทำ Application ขายของใน E-commerce ต้องมีการจัดกลุ่มสินค้าต่างๆ ตาม Category แล้วเราจะรู้ได้อย่างไรว่า ควรจัดหมวดหมู่แบบไหน แล้วแต่ละหมวดหมู่ควรชื่ออะไร เพื่อที่จะตอบคำถามเหล่านี้ ขั้นตอนแรกคือการทำความเข้าใจผู้ใช้งานมากขึ้น เราสามารถใช้เทคนิค Card Sorting โดยการนำรูปภาพของสินค้าต่างๆ มาให้ผู้ใช้งานลองจัดเรียงสินค้าตามกลุ่มและตั้งชื่อให้ Category นั้นๆ ซึ่งตอนแรกเราอาจจะตั้งชื่อว่า Gadget แต่พอไปให้ลูกค้าลองทำ ไม่มีใครตั้งชื่อนี้เลย ทำให้เรารู้ว่า ถ้าหากเราตั้งชื่อ Gadget จริงๆ ผู้ใช้งานอาจจะไม่เข้าใจหมวดหมู่นี้ได้ดีพอ เพราะหมวดหมู่นี้ไม่ได้อยู่ในความคิดของผู้ใช้งานตั้งแต่แรก ซึ่งทำให้เราเข้าใจสิ่งที่อยู่ในหัวผู้ใช้งานมากขึ้น และปรับเปลี่ยนตามผู้ใช้งาน

โดยหัวใจหลักของการทำ Card Sorting คือการให้ผู้ใช้งานเป็นดั่งศูนย์กลางในการออกแบบ Flow โดยจะใช้วิธีนี้ก่อนการออกแบบ UX และ UI

ดูวิดีโอเต็มได้ที่

---

EP.3 : เมื่อไหร่ควรใช้ Drop Down VS Radio Button?

คำถามนี้เป็นคำถามคลาสสิกสำหรับการออกแบบ UX กันเลยทีเดียว หลายๆ คนอาจเคยสงสัยว่า เราควรใช้อันไหนมากกว่ากันระหว่าง Drop Down และ Radio Button ซึ่งบางครั้งทีม Business และ UX designer อาจะเคยเจอปัญหานี้ โดยมีหลายปัจจัยในการเลือกใช้ 2 ทางเลือกนี้ ไม่ว่าจะเป็นการประหยัดพื้นที่ ความง่ายต่อการใช้งาน เป็นต้น 

Drop Down กับ Radio Button ต่างกันอย่างไร?

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

Radio Button คือ ปุ่มที่แสดงตัวเลือกเป็นข้อๆ โดยสามารถกดเลือกได้ทันที ไม่ต้องกดให้แสดงตัวเลือกเหมือน Drop Down ข้อดีคือ user จะเห็นตัวเลือกทั้งหมด ข้อเสียคือเปลืองเนื้อที่ในกรณีที่มีตัวเลือกมาก

เราควรใช้ Drop Down หรือไม่ แล้วควรใช้ในกรณีแบบไหน?

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

แต่ในยุคสมัยนี้ ผู้ใช้งานเริ่มคุ้นชินกับการเลื่อนขึ้นลง (Scroll) ของแอปพลิเคชันและเว็บไซต์แล้ว ดังนั้นเราสามารถทำแสดง List ทั้งหมดได้โดยไม่ต้องซ่อนตัวเลือกไว้ใน Drop Down อีกต่อไป โดยอาจจะไม่ได้แสดงตัวเลือกทั้งหมดก็ได้ อาจจะแสดงให้เหมาะสมกับขนาดหน้าจอของ user แล้วให้ user เลือกขึ้นลงเอาเอง

ในส่วนของการทำเป็น Radio Button หรือแสดงเป็น List ออกมาเลย ก็เริ่มมีการใช้มากขึ้นในปัจจุบัน ยกตัวอย่างเช่น E-commerce ที่แทบจะไม่ใช้ Drop Down เลย เพื่อที่จะแสดงตัวเลือกทั้งหมดที่เกี่ยวกับสินค้า มีสีอะไรให้เลือกบ้าง มีขนาดอะไรให้ซื้อได้บ้าง ก็สามารถทำออกมาเป็น List ได้เลย ไม่จำเป็นต้องทำเป็น Drop Down เป็นต้น 

ซึ่งปัญหาหนึ่งในการใช้ Drop Down คือการใช้งานที่ค่อยข้างยาก และเดาพฤติกรรมยาก เพราะ  Drop Down แต่ละเว็บไซต์ แต่ละ device ก็มีรูปแบบที่ไม่เหมือนกัน บางที่จะเปิดขึ้นว่าตอนที่เรา click ตอนที่เราปล่อยเม้าส์ รายการทั้งหมดจะหายไป บางที่กดตรงตรงสามเหลี่ยม บางที่กดตรงไหนก็ได้ของกล่อง Drop Down อย่างไรก็ตาม Business และ Designer ยังคงใช้ Drop Down เพราะว่า Operating System ได้คิด Drop Down มาดีมาก ปัญหาเรื่องกดค้างหรือกดแล้วปล่อย Operating System จะเป็นคนคิดให้เหมาะสมกับแต่ละ device เอง

Drop Down ถูกใช้ในกรณีที่พื้นที่น้อยจริงๆ หรือเป็นสิ่งที่ผู้ใช้งานทราบอยู่แล้วว่าใน Drop Down นั้นจะประกอบไปด้วยอะไรบ้าง เช่น วัน เดือน ปี จังหวัด เป็นต้น 

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

ถ้าหากในบาง Category มีตัวเลือกเยอะเกินไปจนไม่สามารถทำ Radio Button ได้ เราสามารถทำการ “เปิด Drop Down ทิ้งไว้” ให้ขึ้นเป็น List ขึ้นมา ไม่ต้องเปิด-ปิดเพื่อแสดงตัวเลือก เป็นต้น ดังนั้น ถ้าหากเป็นไปได้ ควรหลีกเลี่ยงการใช้ Drop Down หากไม่จำเป็นจริงๆ

มีทางเลือกอื่นไหม นอกจากการใช้ Drop Down และ Radio Button?

ในกรณีที่เป็น Mobile ถ้ามี Drop Down บางครั้งตัวเลือกจะขึ้นข้างล่างตรงคีย์บอร์ด ซึ่งจะส่งผลให้ Interaction จะดูไม่ธรรมชาติ โดยเมื่อก่อนขนาดหน้าจอค่อนข้างเล็ก ทำให้ไม่รู้สึกแปลก แต่พอหน้าจอมีขนาดที่ใหญ่ขึ้น Interaction ของ Drop Down ค่อนข้างแปลก Apple เลยให้คำแนะนำให้ใช้ Pull-Down Menu แทนนั้นเอง

ดูวิดีโอเต็มได้ที่

---

EP.4 : เมื่อไหร่ควรใช้ Bottom Navigation หรือ Navigation Drawer?

Bottom Navigation และ Navigation Drawer คืออะไร แล้วแตกต่างกันอย่างไร ?

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

Navigation Drawer เกิดมาพร้อมกับเมนู Hamburger ซึ่งมีลักษณะคล้ายขีด 3 ขีดที่ใช้ซ่อนเมนู เมื่อกดแล้วถึงจะแสดงเมนูที่ซ่อนอยู่ออกมานั้นเอง เราเรียกส่วนที่แสดงออกมาว่า Navigation Drawer นั้นเอง

แล้วควรใช้อันไหนมากกว่ากันระหว่าง 2 แบบนี้ ?

หากเป็นไปได้ ควรเลือกใช้  Bottom Navigation ก่อนเพื่อที่จะแสดงเมนูที่สำคัญให้ผู้ใช้งานเห็นได้ง่าย ในทางกลับกันถ้าหากเราต้องการที่จะซ่อนบางเมนูที่มีความสำคัญน้อยลงมา เราสามารถเลือกใช้ Navigation Drawer ได้ ตัวอย่างเช่น เวลาเราเปิด Mail ขึ้นมาเรามักจะดูเฉพาะอีเมลในปัจจุบัน ส่วน เมนูอื่นๆเช่น Sent, Drafts หรือ Spam เรามักจะไม่ค่อยได้ใช้ ก็สามารถซ่อนเมนูเหล่านั้นไว้ได้

แล้ว Bottom Navigation ควรมีกี่เมนู ?

โดยส่วนมากแล้ว จำนวนของเมนู ใน Bottom Navigation ไม่ควรเกิน 5 อย่าง ควรเลือกเฉพาะเมนูที่สำคัญจริงๆ เพื่อให้ผู้ใช้งานเห็นแล้วเข้าใจง่าย และไม่ควรน้อยกว่าหรือเท่ากับ 2 เนื่องจากเวลาที่เมนูถูกไฮไลท์ ผู้ใช้งานจะสับสนได้ว่าตอนนี้กำลังอยู่ที่เมนูไหน

อยากโชว์ของใช้ Bottom Navigation

อยากซ่อนของใช้ Navigation Drawer

ถ้ามีหลายเมนูที่สำคัญมากๆ ควรทำอย่างไร ?

ในกรณีที่มีสิ่งสำคัญมากกว่า 5 อย่าง เช่น มี 20 เมนู สามารถใช้ได้ทั้ง Bottom Navigation และ Navigation Drawer ตัวอย่างที่เห็นได้ชัดคือ Facebook ที่ใช้ ทั้ง 2 อย่างในการทำ Navigation โดยใช้ Bottom Navigation เป็นหลัก ซึ่งแสดงถึงเมนูที่สำคัญและถูกใช้บ่อย และเมนูสุดท้ายในแถบ Bottom Navigation ใช้เป็น Navigation Drawer ที่ซ่อนเมนูทั้งหมดที่เหลือไว้โดยใส่คำว่า More แทน 

แล้ว Bottom Navigation อยู่อย่างข้างบนได้หรือไม่ ?

ถ้าอยู่ข้างบน ใน Guideline ของ Material Design จะเรียกว่า Tab ซึ่ง Tab ข้างบนที่เรามักเห็นบ่อยๆ มีคุณสมบัติในการเป็น Filter ยกตัวอย่างเช่น แอปพลิเคชัน Youtube จะมี Tab ด้านบนเป็น Home, Videos และ Playlists เป็นต้น ที่ช่วยกรองรายการต่างให้ผู้ใช้ ใช้งานได้งานยิ่งขึ้น เป็นต้น โดยถ้าเป็น IOS Tab จะอยู่ด้านล่างแทน ไม่ได้อยู่ด้านบนเหมือน Guideline ของ Material Design

ดูวิดีโอเต็มได้ที่

---

EP.5 : เด้ง Pop-up เมื่อไหร่ไม่ให้ผู้ใช้รำคาญ?

เวลาเข้าไปที่หน้าเว็บไซต์แล้วจะหน้าต่างเด้งขึ้นมาให้ลงทะเบียน บางเว็บไซต์ก็เด้งโฆษณาขึ้นมา พอกดแล้วเด้งไปอีกหน้าเลย บางเว็บก็เป็นแค่ Pop-up ขึ้นสามารถกดปิดได้ง่ายๆ บางเว็บไซต์ก็ไม่มีเลย แล้วเวลาไหนควรใช้ Pop-up กันแน่?

Pop-up คืออะไร ทำไมถึงมีการใช้ Pop-up?

Pop-up หรือที่เราเรียกกันในชื่อทางการว่า Modal คือ หน้าต่างที่ปรากฎขึ้นมาทับหน้าเว็บไซต์หรือแอปพลิเคชัน โดย Pop-up มักจะถูกใช้เมื่อไม่ต้องการให้ผู้ใช้หน้าเปลี่ยนหน้าหลายๆ หน้า 

อย่างไรก็แล้วแต่ เวลามีการใช้ Pop-up พอมี 2 layer จะทำให้ดูยากถ้าเป็นผู้ใช้งานที่ไม่ได้ผ่านการใช้เว็บไซต์มาก่อน และทำให้ผู้ใช้งานไม่สามารถคลิ๊กอะไรได้เลย เพราะถ้ากดในส่วนอื่นๆ ที่นอกเหนือจากสิ่งที่ Pop-up แสดง Pop-up นั้นก็มีโอกาสที่จะหายไป ดังนั้นจึงควรใช้ Pop-up เท่าที่จำเป็นเท่านั้น

ควรใช้ Pop-up ในโอกาสไหนบ้าง?

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

ซึ่งจะถูกใช้เมื่อไม่อยากให้ผู้ใช้งานเปลี่ยนหน้าทั้งหมดไปยังอีกหน้าหนึ่ง อย่างไรก็ตาม Pop-up ไม่ควรถูกใช้บ่อย เนื่องจากจะทำให้ผู้ใช้งานรู้สึกใช้งานยากขึ้น และขัด Flow ของผู้ใช้งานนั้นเอง 

โดยหลักๆแล้ว Pop-up จะถูกใช้ในการกรอกฟอร์มเล็กๆ สามารถทำเสร็จได้เร็ว หากหายไป ก็สามารถเรียกกลับมาได้อย่างง่ายดาย 

ประเภทของ Pop-up 

• Full-screen Pop-up คือการ Pop-up แบบเต็มหน้าจอ เหมาะสำหรับการกรอกข้อมูลที่ค่อนข้างเยอะ และต้องการให้ผู้ใช้งานสามารถโฟกัสได้มากยิ่งขึ้น โดยปกติแล้วเราอาจไม่สังเกต หน้าจอมือถือส่วนมากใช้ Pop-up ประเภทนี้บ่อยครั้ง การทำ Full-screen Pop-up ไม่จำเป็นต้องกลัวว่าจะเป็นการเปลืองเนื้อที่ เพราะในปัจจุบัน ผู้ใช้งานไม่มีปัญหาในการเลื่อนหน้าจอ (Scroll) อีกแล้ว
• Alert Box คือการใช้ Pop-upในการเตือนหรือแจ้งสิ่งที่จำเป็นต่อผู้ใช้งาน ซึ่งไม่ควรใช้บ่อยและใช้เฉพาะสิ่งที่สำคัญจริงๆ เพราะการใช้ Alert Box จะเป็นการขัด Flow ของผู้ใช้งาน 
• Pull-down Menu (Non-Modal) ที่กดแล้วมีให้เลือกเป็นช่องเล็กๆลงมา หรือ อาจจะขึ้นมาจากข้างล่างตรงคีย์บอร์ด โดยการใช้วิธีนี้จะไม่บดบังเนื้อหาหลักของหน้าเว็บไซต์และแอปพลิเคชัน 

ดูวิดีโอเต็มได้ที่

 

ได้ความรู้กันไปเต็มๆ กับรายการตอบคำถาม UX, UI ในรอบนี้ สำหรับใครที่กำลังมีคำถามเกี่ยวกับ UX, UI จดเก็บเอาไว้แล้วเตรียมตัวมาเจอกันใน ตอบคำถาม UX, UI ในตอนถัดไปได้เลย!

---

และสำหรับใครที่กำลังสนใจสายงานด้าน UX UI Design หรือกำลังทำงานอยู่แต่อยากอัพสกิลให้ทำงานด้านนี้ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น

Skooldio เปิดรับสมัคร UX UI Desgin Bootcamp หลักสูตร 6 สัปดาห์ ที่จะทำให้คุณเข้าใจครบพร้อมก้าวสู่การเป็น UX/UI Designer สมัครได้แล้ววันนี้