UI Pattern ออกแบบ Popup ไม่ยาก! สำหรับบทความเริ่มต้นปี 2016 เรามาเรียนรู้อะไรที่ง่ายๆ กับ UI popup ที่น่าจะรู้จักกันดีอยู่แล้ว แต่ก็มักเกิดคำถามขึ้นในใจในบางประเด็นเวลาเราเลือกใช้เจ้า UI แสนง่ายตัวนี้ เช่น ปุ่ม OK บน Popup จะไว้ทางซ้ายหรือขวาดีหน้อ? จะแสดง Popup ที่ตรงไหนดีหว่า? ใช้ Popup ในสถานการณ์นี้ได้ไหมนะ? คำถามเล็กๆ ... By uiblogazinerJanuary 27, 20163
UI Pattern UI Hybrid ความคิดสร้างสรรค์เป็นสิ่งที่ขาดไม่ได้เลยในงานด้าน design และมันก็ไม่ใช่สิ่งยากที่จะทำด้วยครับ ความคิดสร้างสรรค์ไม่จำเป็นต้องเป็นสิ่งใหม่และมีประโยชน์ใช้งานได้ (เพราะสมัยนี้ หาสิ่งใหม่ 100% แทบไม่มีแล้ว) โดยมีแนวคิดภายใต้กรอบวิธีการง่ายๆ ดังนี้ ขยายให้ใหญ่ ย่อให้เล็ก เปลี่ยนสี, รสชาด, ผิวสัมผัส, เสียงบรรเลง ผสมปนเป รู้จักสังเกตพฤติกรรมและปัญหา แน่นอนครับ แนวทางการออกแบบ UI เชิงสร้างสรรค์ก็สามารถใช้แนวคิดนี้ได้เช่นกัน ผมจึงลองนำเอา UI ... By uiblogazinerDecember 28, 20150
UI Pattern เข้า(ใจ)ตาราง การออกแบบ UI ที่นำเสนอข้อมูลจำนวนมากให้เข้าใจได้โดยง่าย เราสามารถแปลงข้อมูลเหล่านั้นให้กลายเป็นกราฟหรือแผนภูมิ เช่น กราฟเส้นแสดงการเปลี่ยนแปลงรายได้ของบริษัท แต่ถ้าต้องการดูเจาะลึกในรายละเอียดว่ารายได้มีที่มาจากอะไรบ้าง อย่างไรก็คงหนีไม่พ้นตารางหรอกครับ เรื่องนี้คงจะไม่ทำให้ designer หลายคนติดตาราง หากยูสเซอร์ไม่ต้องการดูข้อมูลบนอุปกรณ์มือถือ ซึ่งคงเป็นไปไม่ได้แล้วในยุคนี้ โชคดีที่ผมได้มีโอกาสได้ออกแบบตัวระบบ dashboard บนเว็บสำหรับบริษัทการเงินแห่งหนึ่งซึ่งหนีไม่พ้นรายงานที่เป็นในรูปแบบตาราง ทำให้ได้เห็นนวัตกรรมการแสดงผลที่ค่อนข้างเวิร์คของตารางบนมือถือ และรู้จักประเภทของตารางมากกว่าแต่ก่อนอีกด้วย ในแต่ละประเภทตาราง ผมมีสร้างหน้าตัวอย่างไว้ดูประกอบ ลองคลิกดูก็จะเข้าใจคำอธิบายได้ดียิ่งขึ้นนะครับ เกริ่นมาเยอะ งั้นเรามาเข้าตาราง ... By uiblogazinerSeptember 19, 20151
UI Pattern 10 วิธีออกแบบเว็บเพื่อความร่ำรวยแบบรุกฆาต หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ 1. ใช้นางแบบ, นายแบบในหน้าแรก เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง เว็บ 37 ... By uiblogazinerAugust 27, 20150
UI Pattern UI ดักการตัดสินใจด้านลบของยูสเซอร์ ฟีเจอร์ของ application ไหนที่ต้องมีการร้องขอให้ยูสเซอร์ทำการตัดสินใจเพื่อโหวตขอความเห็นหรือเปิดฟังก์ชันที่เป็นค่า setting ของระบบรวม จะมีโอกาสที่ยูสเซอร์จะแสดงความเห็นในด้านลบ หรือไม่ก็ปฏิเสธการเปิดฟังก์ชันนั้นๆ ดังนั้นแแล้วจึงจำเป็นต้องหา UI อะไรสักอย่างมาหยุดหรือดักคอยูสเซอร์ไม่ให้กระทำการที่เป็นผลเสียต่อ app ในระดับที่ไม่สามารถกู้ผลลัพธ์กลับคืนมาได้ ผมยกตัวอย่างให้เห็นภาพมากขึ้น เช่น ในกรณีของ app Hopper, app ดูราคาตั๋วเครื่องบิน, ซึ่งมีฟีเจอร์หลักคือ การแจ้งเตือนราคาตั่วเครื่องบินเมื่อราคาตกหรือกำลังจะขึ้นให้แก่ยูสเซอร์ได้รับทราบ ตัวอย่างหน้าจอร้องขอให้เปิดฟังก์ชัน Notification ... By uiblogazinerAugust 21, 20150
UI Pattern แนวไหนดีสุดสำหรับเลเบลฟอร์ม ผมเชื่อว่า UI designer ทุกคนคงไม่พลาดที่จะผ่านการออกแบบฟอร์มบนเว็บหรือไม่ก็บน mobile app คนทั่วไปอาจคิดว่ามันดูเหมือนไม่มีอะไรยาก ซึ่งจริงๆ แล้ว เว็บฟอร์มเป็นหนึ่งใน UI ที่ออกแบบยากที่สุด เพราะมันมีรายละเอียดเยอะมากครับ ข้อแรกที่เราต้องเจอเลยก็คือ ตำแหน่งการวางเลเบล (form label) มาดูกันว่าเราสามารถวางมันแบบไหนได้บ้างครับ 1. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงซ้าย ( Left-Aligned Label) การจัดเรียงเลเบลชิดซ้ายของฟอร์มเว็บสรรพากร เว็บยื่นเอกสารภาษีของกรมสรรพกรจะวางตำแหน่งของเลเบลทางด้านซ้ายของช่องกรอกข้อความ โดยให้แนวเลเบลเรียงเสมอกันทางด้านซ้าย ข้อดีของวิธีการนี้คือ ... By uiblogazinerAugust 20, 20154
UI Pattern UI เลื่อนหน้าขึ้น (Go to Top) หน้าเว็บเพจที่มีเนื้อหาที่ค่อนข้างยาวควรจะมีลิงค์ที่คอยช่วยเลื่อนหน้าขึ้นไปจนถึงด้านบนสุด (Go to Top) เพื่อประหยัดแรงให้แก่ยูสเซอร์ในการที่เลือกเมนูหลักต่อ หรือต้องการคลิกเลือกลิงค์ที่อยู่ด้านบน เราสามารถทำลิงค์เลื่อนหน้าขึ้นได้หลากหลายวิธี มาดูตัวอย่างกันเลย 1. ใช้รูปลูกศรโดยจะปรากฏเมื่อผู้ใช้เลื่อนดูหน้าเกิน 1 หน้าจอ และจะอยู่ในตำแหน่งด้านล่างตลอดขณะเลื่อนหน้าจอ เว็บอีเกียใช้ลูกศรประจำอยู่ด้านล่างเมื่อยูสเซอร์เลื่อนหน้าอ่านข้อมูล 2. ใช้ลูกศรวางไว้ตำแหน่งด้านบน โดยจะปรากฎเมื่อเลื่อนหน้าลง เว็บ New Balance จะแสดงลูกศรเลื่อนหน้าในตำแหน่งตรงกลางหน้าจอทางด้านบน 3. ใช้ลูกศรวางไว้ในตำแหน่งแต่ละส่วนของประเภทสินค้า โดยปรากฏให้เห็นตลอด ... By uiblogazinerJuly 15, 20150
UI Pattern คลิก เปลี่ยน เล่น สำหรับ slideshow UI จำพวก Slideshow หรือวีดิโอ เราควรกำหนดว่าเมื่อยูสเซอร์ทำการคลิกเมาส์ซ้ายแล้วจะเกิด action ใดขึ้น โดยความเห็นของผม ถ้าเป็น Slideshow หากยูสเซอร์คลิกซ้าย ให้เปลี่ยนสไลด์เป็นรูปถัดไป หรือทำการเล่นสไลด์โชว์ก็ได้ ไม่ควรปล่อยให้เป็น action ว่างครับ Slideshow ของเว็บ Grovemad ยกตัวอย่างเว็บ Grovemade ที่ทำ UI ... By uiblogazinerJune 27, 20150
UI Pattern UI เลือกปุ่ม Enter ให้ส่งข้อความหรือขึ้นบรรทัดใหม่ ตามปกติแล้วเราสามารถใช้ปุ่ม Enter เพื่อใช้เป็นคีย์ลัดสำหรับการส่งฟอร์มทั่วๆ ไปได้ เช่น เมื่อกรอกช่อง Username / Password เสร็จเรียบร้อยแล้ว เราสามารถกดปุ่ม Enter แทนการใช้เมาส์เลือกคลิกปุ่ม Login ได้เลย (หากโค้ดดิ้งถูกนะครับ) ตัวอย่างสถานการณ์ที่ต้องการกด Enter เพื่อขึ้นบรรทัดใหม่ในช่องกรอกข้อความหลายบรรทัด แต่บางทีก็อาจต้องการส่งฟอร์ม แต่หาก UI ... By uiblogazinerJune 6, 20150
UI Pattern Tag Filter Tag filter จะมีลักษณะคล้ายปุ่มให้กดพร้อมกับเครื่องหมายกากบาทด้านท้ายเพื่อให้เราสามารถลบมันออกจากตัวกรองได้ทันที ดูตัวอย่างการใช้งานจากเว็บด้านล่างนะ Tag filter ของเว็บ Tripadvisor Tag การค้นหาของเว็บ Booking.com Tag Skill หน้า Profile ของเว็บ Linkedin By uiblogazinerJune 3, 20150
ทฤษฎี UI 6 หลักการเพื่อออกแบบทุกสิ่งบนโลกนี้ ตอนที่ 1: Affordance (ล่อให้กระทำ) June 22, 201714488 views