UI Pattern

UI แทรกตัวกรอง/เรียงผลลัพธ์ที่หัวข้อ

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

Histogram Slider

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

Tab ตรงกลางหน้า

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

ใส่อีเมล ให้ตรวจทันที

Luke Wroblewski นักวิเคราะห์และนักวิจัยงานออกแบบ UI ชาวรัสเซีย ได้นำเสนอผลการศึกษาว่า การที่เราทำการตรวจสอบรูปแบบข้อมูลอีเมลที่ยูสเซอร์ใส่เข้ามาทันที (email inline validation) จะทำให้สามารถลดจำนวนที่อีเมลส่งไปไม่ถึงผู้รับถึง 50% พูดในอีกแง่หนึ่ง ก็คือเราได้อีเมลลูกค้าเพิ่มขึ้นกว่า 50 % นั่นเองครับ ผมขออธิบายคำว่า Inline Validation เบื้องต้นให้เข้าใจมากขึ้นนะครับ ในการกรอกฟอร์มตามปกติ เราจะรู้ว่าเรากรอกข้อมูลช่องไหนถูกหรือผิดก็ต่อเมื่อเราต้องกดปุ่ม ...
UI Pattern

จิตวิทยาการรอ กรณีศึกษาจาก Facebook

ผมย้ำเสมอว่า การรอคอยเป็นสิ่งที่น่าเบื่อและทรมานสำหรับยูสเซอร์ และได้เคยนำเสนอในบทความ “รอให้ดู“ว่าการรอคือโอกาสงามที่เราสามารถนำเสนอข้อมูลที่เป็นประโยชน์กับแบรนด์บริษัทหรือแม้แต่ขายของก็ยังได้เลยครับ นี่เป็นการตอบสนองอย่างหนึ่งที่เรียกว่า feedback ซึ่งเกิดขึ้นเมื่อระบบกำลัง process ข้อมูลที่อาจใช้เวลาสักระยะ ไอคอนโหลดข้อมูลของ facebook (ซ้าย) และไอคอนโหลดข้อมูลของ iOS (ขวา) App ระดับโลกอย่าง Facebook ก็มีการแสดง feedback ตอบสนองให้กับยูสเซอร์ได้รับทราบเมื่อ app กำลังโหลดข้อมูลอยู่ ...
UI Pattern

Microsite สร้างเว็บมินิเรียกความสนใจ

ผมได้มีโอกาสทำ Mockup (ต้นแบบภาพสุดท้ายของงานกราฟิคเพื่อใช้อ้างอิงในการพัฒนา) ส่งให้ Toyota ได้พิจารณางานหนึ่ง ทำให้ต้องทำการศึกษาบริษัทและสินค้า ในระหว่างที่กำลังดูรุ่นรถต่างๆ ในเว็บ Toyota ผมสังเกตเห็นว่า Toyota ได้นำเอาแนวคิด Microsite มาใช้เพื่อนำเสนอตัวสินค้าเกือบทุกรุ่น เว็บ Microsite ของ Toyota รุ่น Camry [ดูเว็บไซต์] Microsite ...
UI Pattern

เอียง เขย่า กวน บิด

การปฏิสัมพันธ์ (Interaction) กับหน้าจอมือถือแบบรองรับการสัมผัส (Touch-screen mobiles)  นอกเหนือจากการใช้นิ้วกดหรือเลื่อนหน้าจอแล้ว อย่าลืมว่ายังมี action ที่นิ้วมือของเราไม่จำเป็นต้องแตะหน้าจอเลยและเคยเป็นฟีเจอร์เด่นตอนเปิดตัว iPhone แรกๆ เลยนะ ให้ลองเข้าเว็บ warbyparker ผ่าน iPhone ดูนะครับ (สำหรับ Safari บน iOS เท่านั้นนะ, Android อด T_T) ...
UI Pattern

UI ไปเรื่อยๆ ค่อยๆ ลด (Progressive Reduction)

ตอนที่แล้วผมได้นำเสนอ UI progressive disclosure ที่จะแสดงข้อมูลหรือฟังก์ชันเท่าที่จำเป็นต่อยูสเซอร์ในตอนแรก จากนั้นก็ค่อยๆ แสดงมันเพิ่มขึ้นในช่วงจังหวะเวลาที่เหมาะสม ว่าตามหลักหยิน-หยาง แล้ว ในเมื่อมี UI progressive disclosure (ไปเรื่อยๆ เผยให้เห็น) ก็ต้องมี UI แบบ progressive reduction (ไปเรื่อยๆ ค่อยๆ ลด) ...
UI Pattern

UI ไปเรื่อยๆ เผยให้เห็น (Progressive Disclosure)

UI ที่เรียกว่า Progressive Disclosure (ไปเรื่อยๆ เผยให้เห็น) เป็นการแสดงข้อมูลหรือเครื่องมือเพิ่มเติมเมื่อยูสเซอร์มีการกระทำผ่าน UI ใดๆ ส่วนใหญ่ที่ผมพบเห็นการใช้งาน UI นี้ มักจะใช้คู่กับฟอร์มกรอกข้อมูล อธิบายตรงนี้อาจจะยังไม่เข้าใจ เดี๋ยวผมจะยกตัวอย่างก็แล้วกันครับ อันแรกเป็น feed ในหน้า Google+ ที่ด้านล่างของแต่ละบล็อคจะมีช่องให้เรากรอกคอมเมนต์ จะสังเกตว่าไม่มีปุ่มส่งคอมเมนต์ใช่ไหมครับ แต่ถ้าเราเริ่มคลิกที่ช่องกรอกคอมเมนต์ จะปรากฎฟอร์มให้กรอกใส่ข้อความที่รองรับตัวอักษรได้มากขึ้น ...
UI Pattern

วิธีขอให้ยูสเซอร์ให้คะแนน app อย่างถูกวิธี

น่ารำคาญไหมครับ ถ้าเราเปิด app แล้วขึ้น popup ขอให้เราเรทคะแนนให้กับ app อย่างงี้ หากคิดจะทำอย่างนี้แล้วล่ะก็ ขอให้อ่านวิธีดีๆ ที่ทาง app Circa เค้าวิเคราะห์มาจนตกผลึกให้เราได้ลอกนำไปใช้ฟรีๆ การจะทำให้ยูสเซอร์ให้คะแนน app ของเรานั้น เค้าบอกให้จำกฎง่ายๆ 3 ข้อ อย่าไปขัดหูขัดตายูสเซอร์มากนัก เช่น ขึ้น ...

Posts navigation