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

ความคิดสร้างสรรค์เป็นสิ่งที่ขาดไม่ได้เลยในงานด้าน design และมันก็ไม่ใช่สิ่งยากที่จะทำด้วยครับ ความคิดสร้างสรรค์ไม่จำเป็นต้องเป็นสิ่งใหม่และมีประโยชน์ใช้งานได้ (เพราะสมัยนี้ หาสิ่งใหม่ 100% แทบไม่มีแล้ว) โดยมีแนวคิดภายใต้กรอบวิธีการง่ายๆ ดังนี้ ขยายให้ใหญ่ ย่อให้เล็ก เปลี่ยนสี, รสชาด, ผิวสัมผัส, เสียงบรรเลง ผสมปนเป รู้จักสังเกตพฤติกรรมและปัญหา แน่นอนครับ แนวทางการออกแบบ UI เชิงสร้างสรรค์ก็สามารถใช้แนวคิดนี้ได้เช่นกัน ผมจึงลองนำเอา UI ...

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

หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ 1. ใช้นางแบบ, นายแบบในหน้าแรก เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง เว็บ 37 ...

ฟีเจอร์ของ application ไหนที่ต้องมีการร้องขอให้ยูสเซอร์ทำการตัดสินใจเพื่อโหวตขอความเห็นหรือเปิดฟังก์ชันที่เป็นค่า setting ของระบบรวม จะมีโอกาสที่ยูสเซอร์จะแสดงความเห็นในด้านลบ หรือไม่ก็ปฏิเสธการเปิดฟังก์ชันนั้นๆ ดังนั้นแแล้วจึงจำเป็นต้องหา UI อะไรสักอย่างมาหยุดหรือดักคอยูสเซอร์ไม่ให้กระทำการที่เป็นผลเสียต่อ app ในระดับที่ไม่สามารถกู้ผลลัพธ์กลับคืนมาได้ ผมยกตัวอย่างให้เห็นภาพมากขึ้น เช่น ในกรณีของ app Hopper, app ดูราคาตั๋วเครื่องบิน, ซึ่งมีฟีเจอร์หลักคือ การแจ้งเตือนราคาตั่วเครื่องบินเมื่อราคาตกหรือกำลังจะขึ้นให้แก่ยูสเซอร์ได้รับทราบ ตัวอย่างหน้าจอร้องขอให้เปิดฟังก์ชัน Notification ...

ผมเชื่อว่า UI designer ทุกคนคงไม่พลาดที่จะผ่านการออกแบบฟอร์มบนเว็บหรือไม่ก็บน mobile app คนทั่วไปอาจคิดว่ามันดูเหมือนไม่มีอะไรยาก ซึ่งจริงๆ แล้ว เว็บฟอร์มเป็นหนึ่งใน UI ที่ออกแบบยากที่สุด เพราะมันมีรายละเอียดเยอะมากครับ ข้อแรกที่เราต้องเจอเลยก็คือ ตำแหน่งการวางเลเบล (form label) มาดูกันว่าเราสามารถวางมันแบบไหนได้บ้างครับ 1. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงซ้าย ( Left-Aligned Label) การจัดเรียงเลเบลชิดซ้ายของฟอร์มเว็บสรรพากร เว็บยื่นเอกสารภาษีของกรมสรรพกรจะวางตำแหน่งของเลเบลทางด้านซ้ายของช่องกรอกข้อความ โดยให้แนวเลเบลเรียงเสมอกันทางด้านซ้าย ข้อดีของวิธีการนี้คือ ...

หน้าเว็บเพจที่มีเนื้อหาที่ค่อนข้างยาวควรจะมีลิงค์ที่คอยช่วยเลื่อนหน้าขึ้นไปจนถึงด้านบนสุด (Go to Top) เพื่อประหยัดแรงให้แก่ยูสเซอร์ในการที่เลือกเมนูหลักต่อ หรือต้องการคลิกเลือกลิงค์ที่อยู่ด้านบน เราสามารถทำลิงค์เลื่อนหน้าขึ้นได้หลากหลายวิธี มาดูตัวอย่างกันเลย 1. ใช้รูปลูกศรโดยจะปรากฏเมื่อผู้ใช้เลื่อนดูหน้าเกิน 1 หน้าจอ และจะอยู่ในตำแหน่งด้านล่างตลอดขณะเลื่อนหน้าจอ เว็บอีเกียใช้ลูกศรประจำอยู่ด้านล่างเมื่อยูสเซอร์เลื่อนหน้าอ่านข้อมูล 2. ใช้ลูกศรวางไว้ตำแหน่งด้านบน โดยจะปรากฎเมื่อเลื่อนหน้าลง เว็บ New Balance จะแสดงลูกศรเลื่อนหน้าในตำแหน่งตรงกลางหน้าจอทางด้านบน 3. ใช้ลูกศรวางไว้ในตำแหน่งแต่ละส่วนของประเภทสินค้า โดยปรากฏให้เห็นตลอด ...

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

ตามปกติแล้วเราสามารถใช้ปุ่ม Enter เพื่อใช้เป็นคีย์ลัดสำหรับการส่งฟอร์มทั่วๆ ไปได้ เช่น เมื่อกรอกช่อง Username / Password เสร็จเรียบร้อยแล้ว เราสามารถกดปุ่ม Enter แทนการใช้เมาส์เลือกคลิกปุ่ม Login ได้เลย (หากโค้ดดิ้งถูกนะครับ)   ตัวอย่างสถานการณ์ที่ต้องการกด Enter เพื่อขึ้นบรรทัดใหม่ในช่องกรอกข้อความหลายบรรทัด แต่บางทีก็อาจต้องการส่งฟอร์ม แต่หาก UI ...

Tag filter จะมีลักษณะคล้ายปุ่มให้กดพร้อมกับเครื่องหมายกากบาทด้านท้ายเพื่อให้เราสามารถลบมันออกจากตัวกรองได้ทันที ดูตัวอย่างการใช้งานจากเว็บด้านล่างนะ Tag filter ของเว็บ Tripadvisor   Tag การค้นหาของเว็บ Booking.com   Tag Skill หน้า Profile ของเว็บ Linkedin