UI Pattern

ออกแบบ Popup ไม่ยาก!

3

featured-popup

สำหรับบทความเริ่มต้นปี 2016 เรามาเรียนรู้อะไรที่ง่ายๆ กับ UI popup ที่น่าจะรู้จักกันดีอยู่แล้ว แต่ก็มักเกิดคำถามขึ้นในใจในบางประเด็นเวลาเราเลือกใช้เจ้า UI แสนง่ายตัวนี้ เช่น ปุ่ม OK บน Popup จะไว้ทางซ้ายหรือขวาดีหน้อ? จะแสดง Popup ที่ตรงไหนดีหว่า? ใช้ Popup ในสถานการณ์นี้ได้ไหมนะ? คำถามเล็กๆ น้อยๆ เหล่านี้จะหมดไปหลังจากที่ได้อ่านบทความนี้แน่นอนครับ (คิดว่านะ ^^!)

ส่วนประกอบ

popup-01

ส่วนประกอบหลักของ Popup

Popup (ป๊อปอัพ) หรืออีกชื่อที่เป็นทางการหน่อยว่า Modal (โมดอล) คือ UI ที่เป็นหน้าต่างที่ปรากฎขึ้นมาทับหน้าเว็บ หลังจากที่ยูสเซอร์ได้มีปฏิสัมพันธ์กับ UI หนึ่งๆ บนหน้าเว็บ เช่น การคลิกลิงค์ แล้วจึงมี Popup โผล่ขึ้นมาเพื่อให้ข้อมูล โดยส่วนประกอบหลักๆ ของ Popup มีด้วยกัน 5 ส่วนดังนี้

  1. หัวข้อ (+ มีไอคอนประกอบก็ได้)
  2. ปุ่มปิด Popup
  3. เนื้อหา ซึ่งเป็นได้ทั้งภาพและตัวหนังสือ
  4. ปุ่มดำเนินการคำสั่งรอง (Secondary Call-To-Action)
  5. ปุ่มดำเนินการหลัก (Primary Call-To-Action)

โดยในการใช้งาน เราไม่จำเป็นต้องออกแบบให้มีส่วนประกอบครบทั้ง 5 ส่วนก็ได้ ซึ่งอย่างน้อยก็ต้องประกอบไปด้วยส่วนเนื้อหา (1) แต่ต้องตั้งเวลาปิด Popup ให้ยูสเซอร์ด้วยนะ

popup-07

รูปแบบของ Popup

สถานการณ์ที่ควรใช้

popup-06

การใช้ Popup ในสถานการณ์ที่ผิด (ซ้าย) / การแสดงข้อความแจ้งเตือนที่ถูก (ขวา)

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

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

  • จะทำให้ยูสเซอร์เชื่อมโยงการกระทำและผลของการกระทำได้ดีกว่าในกรณีของ Popup ซึ่งเป็น UI ที่แสดงคนละเลเยอร์ (แสดงทับหน้าเว็บ)
  • เตือนความจำยูสเซอร์ได้ดีกว่า เพราะข้อความแจ้งเตือนไม่ได้หายไปเหมือนกับกรณีใช้ Popup

การใช้คำบนปุ่ม

popup-04

คำบนปุ่มทั่วๆ ไป

คำที่ใช้บนปุ่มของ Popup โดยปกติค่า Default จะเป็น Yes, No, OK, Cancel หากเราใช้คำเหล่านี้แล้วล่ะก็ ยูสเซอร์จำเป็นต้องเสียเวลาอ่านเนื้อหาบน Popup เพื่อให้แน่ใจว่า การคลิกปุ่ม ‘ใช่’ คือการสั่งลบไฟล์หรือเปล่า

popup-05

การใช้คำกริยาบนปุ่มเพื่อลดเวลาการกด

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

ตำแหน่งการแสดงผล

popup-desktop-03

ตำแหน่งของ Popup ที่มีผลต่อการให้ความสนใจของยูสเซอร์

บริเวณที่เราเลือกแสดง Popup ก็มีผลต่อการมองเห็นของยูสเซอร์ด้วยนะครับ

  • หากเป็นบริเวณตรงกลางหน้าจอ ยูสเซอร์ก็ค่อนข้างให้ความสนใจมากหน่อย
  • หากกระเถิบไปด้านบนก็จะเป็น Popup แนวแจ้งเตือน เช่น เวลาเราส่งเมล Gmail จะขึ้น Popup แถบยาวๆ บอกเราว่า อีเมลได้ถูกส่งแล้วนะ
  • ถ้าอยากจะโฆษณาอะไร เช่น Popup ให้สมัคร Newsletter บริเวณนี้ก็ดูไม่เลวทีเดียว

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

ตำแหน่งปุ่มดำเนินการ

popup-03

ตำแหน่งของปุ่มหลักที่อยู่ทางด้านซ้ายของปุ่มรอง

ถ้าใครได้เคยออกแบบ Popup จะต้องเจอปัญหานี้แน่นอนครับว่า เราควรจะวางตำแหน่งปุ่ม OK หรือ ปุ่มคำสั่งหลัก ไว้ทางซ้ายหรือขวาของปุ่ม Cancel (ปุ่มคำสั่งรอง) ดี?

popup-03-path

การสแกนอ่านข้อมูลบน Popup เมื่อปุ่มหลักอยู่ทางด้านซ้าย

หากเราลองพิจารณา flow การอ่านข้อมูลบน Popup จะเห็นว่ายูสเซอร์จะไล่สแกนอ่านจากบนลงล่าง และซ้ายไปขวา หากยูสเซอร์ต้องการเลือก ‘ปุ่มยืนยัน’ โฟกัสทางสายตาจำเป็นต้องย้อนกลับมาซ้ายอีก

popup-02-path

การสแกนอ่านข้อมูลบน Popup เมื่อปุ่มหลักอยู่ทางด้านขวา

ถ้าหากออกแบบให้ปุ่มอยู่สลับที่กันล่ะ ก็ดูเหมือนว่า flow การอ่านข้อมูลจะไหลลื่นมากกว่าแบบแรก เพราะ โฟกัสสายตาไม่เป็นต้องย้อนกลับไปทางซ้าย

popup-02-compare

การตีความเมื่อปุ่มหลักอยู่ทางด้านขวาของปุ่มรอง

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

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

พื้นหลัง

popup-desktop-02

การใช้ Overlay ดึงความสนใจจากยูสเซอร์

ในบางครั้งเราอยากให้ Popup ของเราเห็นเด่นชัด เพื่อดึงความสนใจจากยูสเซอร์ 100% จึงเลือกใช้พื้นหลังสีดำโปร่งใส (overlay) คั่นระหว่างเลเยอร์ Popup กับ หน้าเว็บ ในกรณีที่เราอยากแสดง Popup และยังอยากให้ยูสเซอร์ดำเนินกิจกรรมบนหน้าเว็บของเราได้อย่างต่อเนื่อง ก็ไม่จำเป็นต้องใช้  overlay นั่นหมายความว่า เราไม่ต้องการความสนใจเพ่งไปที่ Popup 100%

popup-desktop-01

การใช้ Popup ที่ไม่มี overlay

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

popup-mobile-01

ปัญหาการใช้ Popup บนมือถือ

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

popup-mobile-02

Popup แบบเต็มหน้า (Full-Page Popup)

ดังนั้นเพื่อสร้างประสบการณ์การเลื่อนอ่านข้อมูลที่ดีขึ้น เราอาจทำเป็น full-page popup (Popup เต็มหน้าจอ) โดยบริเวณส่วนหัวของ Popup จะติดหนึบกับหน้าจอตลอดเวลา (Sticky header) ทำให้ยูสเซอร์สามารถปิด Popup ได้ทุกเมื่อ และรับทราบหัวข้อของ Popup นี้เหมือนกับแสดงผลบนหน้าจอ desktop

Popup ไม่ยาก!

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

  • รู้สถานการณ์ที่ไม่ควรใช้
  • ใช้คำกริยาสำหรับปุ่ม
  • เลือกตำแหน่งการแสดงตามความสำคัญ
  • วางตำแหน่งปุ่มหลัก / ปุ่มรอง ให้เหมือนกันทั้งเว็บ
  • ใช้พื้นหลังหากต้องการความสนใจ 100%

 

อ้างอิง:

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

รวมบทความน่าอ่านมากแห่งปี 2015 โดย UI Blogazine

Previous article

ตุนของฟรี ปีใหม่จีน 2016

Next article

You may also like

3 comments

  1. ได้ความรู้รับปีใหม่..ขอบคุณมากครับ

  2. ขอบคุณมากนะคะ ดีไซน์น่ารักมาก คอนเท้นต์เขียนเข้าใจง่ายดีเลยค่ะ ^ ^

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern