UI Pattern ออกแบบ Popup ไม่ยาก! By uiblogaziner January 27, 20168003 views ShareTweet 3 สำหรับบทความเริ่มต้นปี 2016 เรามาเรียนรู้อะไรที่ง่ายๆ กับ UI popup ที่น่าจะรู้จักกันดีอยู่แล้ว แต่ก็มักเกิดคำถามขึ้นในใจในบางประเด็นเวลาเราเลือกใช้เจ้า UI แสนง่ายตัวนี้ เช่น ปุ่ม OK บน Popup จะไว้ทางซ้ายหรือขวาดีหน้อ? จะแสดง Popup ที่ตรงไหนดีหว่า? ใช้ Popup ในสถานการณ์นี้ได้ไหมนะ? คำถามเล็กๆ น้อยๆ เหล่านี้จะหมดไปหลังจากที่ได้อ่านบทความนี้แน่นอนครับ (คิดว่านะ ^^!) ส่วนประกอบ ส่วนประกอบหลักของ Popup Popup (ป๊อปอัพ) หรืออีกชื่อที่เป็นทางการหน่อยว่า Modal (โมดอล) คือ UI ที่เป็นหน้าต่างที่ปรากฎขึ้นมาทับหน้าเว็บ หลังจากที่ยูสเซอร์ได้มีปฏิสัมพันธ์กับ UI หนึ่งๆ บนหน้าเว็บ เช่น การคลิกลิงค์ แล้วจึงมี Popup โผล่ขึ้นมาเพื่อให้ข้อมูล โดยส่วนประกอบหลักๆ ของ Popup มีด้วยกัน 5 ส่วนดังนี้ หัวข้อ (+ มีไอคอนประกอบก็ได้) ปุ่มปิด Popup เนื้อหา ซึ่งเป็นได้ทั้งภาพและตัวหนังสือ ปุ่มดำเนินการคำสั่งรอง (Secondary Call-To-Action) ปุ่มดำเนินการหลัก (Primary Call-To-Action) โดยในการใช้งาน เราไม่จำเป็นต้องออกแบบให้มีส่วนประกอบครบทั้ง 5 ส่วนก็ได้ ซึ่งอย่างน้อยก็ต้องประกอบไปด้วยส่วนเนื้อหา (1) แต่ต้องตั้งเวลาปิด Popup ให้ยูสเซอร์ด้วยนะ รูปแบบของ Popup สถานการณ์ที่ควรใช้ การใช้ Popup ในสถานการณ์ที่ผิด (ซ้าย) / การแสดงข้อความแจ้งเตือนที่ถูก (ขวา) Popup เป็น UI ที่ใช้ได้ง่ายเกือบแทบทุกสถานการณ์เลยครับ หากเราต้องการให้ข้อมูลเพิ่มเติมแก่ยูสเซอร์โดยที่ไม่อยากให้โหลดหน้าเว็บใหม่ แต่หลายๆ ครั้งที่ผมก็เห็นการเอา Popup ไปใช้ในสถานการณ์ที่ไม่ค่อยเหมาะเท่าไรนัก เช่น การใช้ Popup ขึ้นแจ้งเตือนการกรอกฟอร์มที่ไม่สมบูรณ์ ตัวอย่างรูปด้านบนซ้ายจะเห็นว่า หากเรากรอกข้อมูลฟอร์มที่เป็นอีเมลหรือรหัสผ่านไม่ถูกต้อง แล้วขึ้นแจ้งเตือนด้วย Popup พอยูสเซอร์ปิด Popup นี้ไปแล้ว จะทำให้ยูสเซอร์ลืมได้ว่าเค้าทำอะไรผิดพลาดไป ในทางกลับกัน เราควรจะทำการแจ้งเตือนภายในฟอร์มเลยจะเหมาะสมกว่า (รูปบนขวา) เพราะ จะทำให้ยูสเซอร์เชื่อมโยงการกระทำและผลของการกระทำได้ดีกว่าในกรณีของ Popup ซึ่งเป็น UI ที่แสดงคนละเลเยอร์ (แสดงทับหน้าเว็บ) เตือนความจำยูสเซอร์ได้ดีกว่า เพราะข้อความแจ้งเตือนไม่ได้หายไปเหมือนกับกรณีใช้ Popup การใช้คำบนปุ่ม คำบนปุ่มทั่วๆ ไป คำที่ใช้บนปุ่มของ Popup โดยปกติค่า Default จะเป็น Yes, No, OK, Cancel หากเราใช้คำเหล่านี้แล้วล่ะก็ ยูสเซอร์จำเป็นต้องเสียเวลาอ่านเนื้อหาบน Popup เพื่อให้แน่ใจว่า การคลิกปุ่ม ‘ใช่’ คือการสั่งลบไฟล์หรือเปล่า การใช้คำกริยาบนปุ่มเพื่อลดเวลาการกด แต่ถ้าเราเปลี่ยนจากคำตอบ ใช่/ไม่ใช่ ให้เป็น คำตอบเชิงคำกริยา เช่น ในกรณี Popup ถามยืนยันการลบไฟล์ ก็ใช้คำว่า ลบ/ยกเลิก ก็จะช่วยเพิ่มความมั่นใจและลดเวลาการอ่านเนื้อหาเวลาที่ยูสเซอร์ต้องการลบไฟล์นี้จริงๆ ตำแหน่งการแสดงผล ตำแหน่งของ Popup ที่มีผลต่อการให้ความสนใจของยูสเซอร์ บริเวณที่เราเลือกแสดง Popup ก็มีผลต่อการมองเห็นของยูสเซอร์ด้วยนะครับ หากเป็นบริเวณตรงกลางหน้าจอ ยูสเซอร์ก็ค่อนข้างให้ความสนใจมากหน่อย หากกระเถิบไปด้านบนก็จะเป็น Popup แนวแจ้งเตือน เช่น เวลาเราส่งเมล Gmail จะขึ้น Popup แถบยาวๆ บอกเราว่า อีเมลได้ถูกส่งแล้วนะ ถ้าอยากจะโฆษณาอะไร เช่น Popup ให้สมัคร Newsletter บริเวณนี้ก็ดูไม่เลวทีเดียว แม้ผมจะบอกว่าบริเวณตรงกลางคือ ตำแหน่งที่ยูสเซอร์เห็นชัดเจนและให้ความสนใจมากกว่าตำแหน่งอื่น แต่ไม่ใช่ว่า เราจะแสดง Popup แต่ตำแหน่งนี้นะครับ ให้เราพิจารณาความสำคัญหรือจุดประสงค์ของ Popup ประกอบด้วย ดั่งที่ผมแนะนำก็สามารถนำไปใช้เป็นเกณฑ์ในการเลือกทำเลก็ได้เช่นกันครับ ตำแหน่งปุ่มดำเนินการ ตำแหน่งของปุ่มหลักที่อยู่ทางด้านซ้ายของปุ่มรอง ถ้าใครได้เคยออกแบบ Popup จะต้องเจอปัญหานี้แน่นอนครับว่า เราควรจะวางตำแหน่งปุ่ม OK หรือ ปุ่มคำสั่งหลัก ไว้ทางซ้ายหรือขวาของปุ่ม Cancel (ปุ่มคำสั่งรอง) ดี? การสแกนอ่านข้อมูลบน Popup เมื่อปุ่มหลักอยู่ทางด้านซ้าย หากเราลองพิจารณา flow การอ่านข้อมูลบน Popup จะเห็นว่ายูสเซอร์จะไล่สแกนอ่านจากบนลงล่าง และซ้ายไปขวา หากยูสเซอร์ต้องการเลือก ‘ปุ่มยืนยัน’ โฟกัสทางสายตาจำเป็นต้องย้อนกลับมาซ้ายอีก การสแกนอ่านข้อมูลบน Popup เมื่อปุ่มหลักอยู่ทางด้านขวา ถ้าหากออกแบบให้ปุ่มอยู่สลับที่กันล่ะ ก็ดูเหมือนว่า flow การอ่านข้อมูลจะไหลลื่นมากกว่าแบบแรก เพราะ โฟกัสสายตาไม่เป็นต้องย้อนกลับไปทางซ้าย การตีความเมื่อปุ่มหลักอยู่ทางด้านขวาของปุ่มรอง อีกเหตุผลหนึ่งที่จะมาสนับสนุนข้อที่น่าจะวางตำแหน่งปุ่มหลักไว้ทางด้านขวาของปุ่มรองก็คือ ตำแหน่งของปุ่มให้ความรู้สึกสอดคล้องถึงการดำเนินการไปข้างหน้า แต่อย่างไรก็ตาม ผลงานวิจัยก็ไม่ได้ฟันธงว่า แบบใดดีกว่ากันหรอกนะครับ เพียงแต่เน้นเรื่องที่ว่า หากวางตำแหน่งปุ่มหลักไว้ทางขวา Popup อื่นๆ ที่ปรากฎทั่วทั้งเว็บก็ต้องวางไว้ที่ตำแหน่งเดียวกันนี้นะ ยูสเซอร์จะได้เกิดการเรียนรู้และไม่งง พื้นหลัง การใช้ Overlay ดึงความสนใจจากยูสเซอร์ ในบางครั้งเราอยากให้ Popup ของเราเห็นเด่นชัด เพื่อดึงความสนใจจากยูสเซอร์ 100% จึงเลือกใช้พื้นหลังสีดำโปร่งใส (overlay) คั่นระหว่างเลเยอร์ Popup กับ หน้าเว็บ ในกรณีที่เราอยากแสดง Popup และยังอยากให้ยูสเซอร์ดำเนินกิจกรรมบนหน้าเว็บของเราได้อย่างต่อเนื่อง ก็ไม่จำเป็นต้องใช้ overlay นั่นหมายความว่า เราไม่ต้องการความสนใจเพ่งไปที่ Popup 100% การใช้ Popup ที่ไม่มี overlay ยกตัวอย่างเช่น บนหน้าเว็บขายสินค้า ยูสเซอร์สามารถกดปุ่มรูปหัวใจ เพื่อเก็บสินค้านี้ไว้ในรายการโปรด เมื่อกดที่ปุ่มแล้ว ก็จะมี Popup แจ้งว่า รายการสินค้านี้ได้ถูกเพิ่มเข้าไปในรายการที่ชอบเรียบร้อยที่ตำแหน่งด้านบนโดยไม่มี overlay ในขณะเดียวกัน ยูสเซอร์ก็สามารถทำการเลื่อนหน้าลงเพื่อดูข้อมูลสินค้าเพิ่มเติม หรือจะกดปุ่มช้อปก็ได้ โดยที่ไม่ต้องเพ่งความสนใจไปที่ Popup 100% ปัญหาการใช้ Popup บนมือถือ ในอีกกรณีหนึ่ง หากมีความจำเป็นต้องใช้ Popup บนมือถือ ให้เราควรระมัดระวังอย่างมาก หากเป็น Popup ที่มีเนื้อหาไม่มาก ก็สามารถใช้ได้ แต่ถ้าเป็น Popup ที่มีเนื้อหาที่ค่อนข้างเยอะ เช่น คลิกลิงค์เพื่อดูรายละเอียดการจัดส่ง เราไม่ควรแสดงผลแบบ Popup ทั่วๆ ไปนะครับ เพราะการใช้นิ้วเลื่อนหน้า Popup อาจมีโอกาสเลื่อนไปโดนพื้นหลัง ซึ่งโดยปกติการเลือกพื้นหลังหมายถึงการปิด Popup ไป อันจะทำให้ยูสเซอร์อารมณ์เสียได้ง่ายๆ Popup แบบเต็มหน้า (Full-Page Popup) ดังนั้นเพื่อสร้างประสบการณ์การเลื่อนอ่านข้อมูลที่ดีขึ้น เราอาจทำเป็น full-page popup (Popup เต็มหน้าจอ) โดยบริเวณส่วนหัวของ Popup จะติดหนึบกับหน้าจอตลอดเวลา (Sticky header) ทำให้ยูสเซอร์สามารถปิด Popup ได้ทุกเมื่อ และรับทราบหัวข้อของ Popup นี้เหมือนกับแสดงผลบนหน้าจอ desktop Popup ไม่ยาก! เรื่องที่ไม่แน่ใจในการออกแบบ Popup คงน่าจะลดน้อยลงแล้วใช่ไหมครับ? ในการออกแแบบ Popup ครั้งหน้า คงกล้าพูดได้เต็มปากว่า ออกแบบ Popup ไม่ยากเลยเนอะ เพียงแค่ รู้สถานการณ์ที่ไม่ควรใช้ ใช้คำกริยาสำหรับปุ่ม เลือกตำแหน่งการแสดงตามความสำคัญ วางตำแหน่งปุ่มหลัก / ปุ่มรอง ให้เหมือนกันทั้งเว็บ ใช้พื้นหลังหากต้องการความสนใจ 100% อ้างอิง: https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/ http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/