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

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

เนื่องในโอกาสครบรอบ 40 ปีกับตลาดหุ้นไทย ทางตลาดหลักทรัพย์จึงมีแนวคิดที่จะเปลี่ยนแปลงเว็บ Set.or.th ให้ทันกับดีไซน์สมัยใหม่ รูปโฉมของเว็บจึงเป็นแนว Flat Design และเป็น Responsive Web ที่ทำออกมาดูดีใช้ได้เลยครับ หน้าแสดงภาพโปรโมทก่อนเข้าหน้าเว็บหลัก หากเราเข้าเว็บไซต์ในช่วงนี้ (ตอนที่ผมเขียนคือ มิ.ย. 58) จะต้องผ่านหน้าโฆษณาเสียก่อน ถึงจะสามารถเข้าสู่หน้าเว็บไซต์หลักได้ รูปแบบวิธีการนี้ผมเห็นว่าล้าสมัยแล้วน่ะครับ ถ้าเราอยากจะโฆษณาอะไรก็ควรไปทำในหน้าหลักเลยดีกว่า เพราะมันเป็นการขัดขวางการใช้งานเว็บที่ไม่คุ้มกับเวลาและผลลัพธ์ที่ได้ครับ ...

การใช้งาน Photoshop โดยทั่วไป ผมมักจะสร้าง stroke (เส้นขอบรอบวัตถุ) รอบวัตถุที่เป็น vector shape แค่ 1 ชั้นเท่านั้น แต่บางทีหากต้องการสร้างเส้น stroke มากกว่านี้ ผมจะ copy วัตถุนั้น (กลายเป็น 2 เลเยอร์แล้ว) แล้วขยายวัตถุให้ใหญ่จนกลายเป็นอีกเส้นขอบหนึ่ง แต่พอใช้งานจนเข้าขั้น ...

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

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

Booking.com ใช้วิธีการแทรกตัวฟังก์ชันเรียงผลลัพธ์ (Sort by) ไว้ตรงหัวข้อผลลัพธ์การค้นหาเลย เราอาจจะเอาฟังก์ชันตัวกรองไว้ที่หัวข้อนี้ก็ได้เช่นกัน ทำให้ไม่จำเป็นต้องเสียพื้นที่ให้กับฟังก์ชันเหล่านี้ เป็นการผสาน UI ให้เข้ากับภาษาหรือข้อความที่มนุษย์อ่านได้เข้าใจเลย เนียนมากวิธีนี้  ลองเอา UI แทรกตัวกรอง/เรียงผลลัพธ์ที่หัวข้อไปใช้ดูนะครับ

Histogram เป็นกราฟแท่งที่พล็อตต่อเนื่องเพื่อบอกจำนวนในแต่ละค่าของแนวแกน X การนำเอา Slider มาใช้กับกราฟ Histogram ก็เพื่อจำกัดช่วงที่เราต้องการเรียกข้อมูล ถ้าผู้ใช้งาน Photoshop จะพบเห็นบ่อยๆ เมื่อเรียกฟังก์ชัน Levels ตัวอย่างการใช้ Histogram กับ Slider เพื่อบ่งบอกปริมาณข้อมูลในแต่ละช่วง แนวคิดนี้ไปใช้กับตัวกรองราคาแบบ Slider ได้เป็นอย่างดีเลยครับ การที่มีกราฟ Histogram ...

การใช้ Tab ตรงกลางหน้าเพื่อแบ่งประเภทข้อมูลดูเป็น Pattern ที่น่าสนใจดีนะครับ ดูตัวอย่าง Booking.com for Business หรือ Amoma.com   Booking.com for business แท็บ Travel Organiser   Booking.com for business แท็บ ...

ญี่ปุ่นไม่ได้มีแค่โตเกียว เกียวโต หรือฮอกไกโดนะครับ อีกภูมิภาคหนึ่งที่น่าสนใจไม่น้อย ซึ่งเป็นสถานที่ถ่ายทำละครกลกิโมโนที่พึ่งจบไปของช่อง 3 มีนามว่า คิวชู (Kyushu) แผนที่แสดงที่ตั้งของภูมิภาคคิวชู  ภูมิภาคนี้อยู่ทางตอนใต้ของประเทศญี่ปุ่นเลย ดังนั้นแล้ว ถ้าเดินทางมาจากประเทศไทยก็จะถึงก่อน หรือใช้เวลาในการเดินทางน้อยกว่าไปลงที่นาริตะ (โตเกียว) หรือสนามบินแห่งชาติคันไซ (โอซาก้า) ประมาณ 1-2 ชม. เลยครับ ค่าตั๋วก็เลยถูกกว่าด้วย ยิ่งถ้าจองตอนโปรโมชัน ...