UI Pattern

UI พื้นที่ว่าง (White Space)

หากจะให้ผมบอกชื่อ UI ที่ผมชอบใช้มากที่สุดออกมาสักชื่อหนึ่ง คงหนีไม่พ้น white-space UI หรือ UI พื้นที่ว่าง และ designer หลายๆ คนอาจยังไม่รู้ด้วยซ้ำว่าตัวเองกำลังใช้ UI นี้อยู่ White-space (รวมถึง negative space) เป็น UI ที่ใช้งานง่ายทีสุดและทรงประสิทธิภาพที่สุด แต่หลายๆ ...
UI Pattern

UI กลายร่างจากนู้นเป็นนี่ (Morphing UI)

เคยเป็น Effect ที่เป็นลูกเล่นสมัย Flash เคยโด่งดัง โดยการแปลงกายให้วัตถุหนึ่งกลายเป็นอีกวัตถุหนึ่ง แต่เมื่อมาใช้กับ UI แล้ว ก็เพียงแค่แปลงพื้นหลังของอันหนึ่งให้กลายมาเป็นพื้นหลังของอีกอย่างหนึ่งเท่านั้นเอง ดูดีมีหลักการเลยครับ เพราะเป็นการสร้างความสัมพันธ์ระหว่างวัตถุหรือหน้าจอผ่านทาง animation ลองเอาไปใช้ดูนะ ลองเล่นของจริงได้ที่: http://tympanus.net/Development/ButtonComponentMorph/ http://tympanus.net/Development/MorphingSearch/
UI Pattern

เรียนสิ่งถูก เพื่อทำผิด

ช่วงนี้ผมกำลังติดตามซีรีย์ญี่ปุ่นเรื่อง กาลิเลโอภาค 2 ซึ่งตอนนี้ไทยพีบีเอสกำลังฉายอยู่วันเสาร์และอาทิตย์ เวลา 21.00 – 22.00 น. เป็นเรื่องนักอาจารย์ฟิสิกส์ที่ใช้ความรู้ของเค้ามาช่วยในการแก้ไขคดีที่เด็กวิทย์อย่างเราดูแล้วอินดีครับ และเพราะว่าผมชอบฟังเสียงพูดของคนญี่ปุ่น (ไม่ใช่ว่าคนไทยพากย์ไม่ดีนะครับ) ก็เลยเสาะหาแหล่งดูซีรีย์ออนไลน์ฟรีจนมาพบ เว็บ http://www.gooddrama.net/ ที่มีซีรีย์นี้และนำเสนอเสียง Soundtrack ซับอังกฤษด้วย โดนใจผมมาก แต่การจะดูของฟรีนี่ไม่ใช่เรื่องสบายๆ แล้ว เพราะคนที่ออกแบบ UI ของเว็บนี้ ...
UI Pattern

เช็คบิลด้วยนิ้วมือ

เดี๋ยวนี้โทรศัพท์มือถือเป็นสิ่งที่เราใช้ชีวิตอยู่กับมันมากกว่าคนในครอบครัวของเราเสียอีก และเทคโนโลยีก็ทำให้มือถือฉลาดขึ้นเรื่อยๆ เพื่อทำหน้าที่แทนสิ่งของหลายๆ อย่าง จนสามารถเข้ามาทดแทนกระเป๋าสตางค์ของเราได้เลย ตัวอย่างเช่น เทคโนโลยี NFC (Near Field Connection) ที่ใช้คลื่นแม่เหล็กไฟฟ้าในการสื่อสารระหว่างอุปกรณ์ ก็นำมาใช้กับโทรศัพท์มือถือเพื่อจ่ายเงินค่าเดินทาง BTS หรือจุดบริการที่รับบัตร Rabbit แต่สำหรับคนที่ใช้ iPhone แล้ว จะมีมาตรฐานที่ทาง Apple ได้พัฒนามาพร้อมกับเทคโนโลยี Biometrics ...
UI Pattern

เลื่อน แล้ว เห็น

  UI นี้พัฒนาโดย Mark Szulyovszky ซึ่งจะทำให้การดูรายละเอียดข้อมูลที่เป็นรายการรวดเร็วและเป็นธรรมชาติขึ้น จากที่ต้องคลิกเพื่อดูรายละเอียดเพิ่มเติมของแต่ละรายการ ก็ห้นมาใช้การเลื่อน (swipe) แทน มันสะดวกกว่าเยอะนะ คือพอเลื่อนดูเสร็จแว่บๆ (ยังเลื่อนไม่สุด) ก็เห็นว่าไม่ใช้สิ่งที่เราอยากอ่านต่อ ก็สามารถชักนิ้วกลับได้โดยทันควัน เห็นม่ะ แค่ต่างกันเล็กน้อย แต่ประสบการณ์ต่างกันเยอะแยะ ที่มา: http://www.itchingpixels.com/anatomy-of-a-touch-interaction-swipe-to-peep/
UI Pattern

UI จับสแปม, CAPTCHA CHA CHA!

เว็บไซต์ใดที่มีฟอร์มให้ยูสเซอร์กรอก ไม่ว่าจะเพื่อสมัครสมาชิก ส่งคำแนะนำ หรือส่งข้อความรีวิว มักประสบปัญหาว่า ไม่เพียงแต่ได้รับข้อมูลตอบกลับจากยูสเซอร์จริงๆ (ที่เป็นมนุษย์) ยังต้องคอยปวดหัวในการคัดกรองฟอร์มข้อมูลที่ถูกกรอกโดยสแปมด้วย (สคริปต์คอมพิวเตอร์) สแปมพวกนี้มีจุดประสงค์หลักๆ คือ การโฆษณาหรือเพิ่มจำนวนลิงค์อ้างอิงให้กับเว็บตัวเอง หรือเพียงเพื่อความสนุก จึงเป็นที่มาของ UI CAPTCHA (Completely Automated Public Turing test to tell ...
UI Pattern

มอง UI เป็นภาพสะท้อน

ตอนที่เขียนบทความนี้ ผมกำลัง design interface ใหม่สำหรับหน้าแสดงรายละเอียดโรงแรมและห้องพัก เพื่อแสดงบนอุปกรณ์มือถือ ให้กับเว็บ Agoda หลังจากที่ผมส่ง mockup ให้กับ Designer Manager เพื่อดูความถูกต้องของ Interface และองค์ประกอบโดยรวม มีสิ่งหนึ่งที่ผมชอบมากในคำแนะนำของหัวหน้าผม เป็นมุมมองอันยิ่งใหญ่ที่ผู้มีประสบการณ์ช่ำชองเท่านั้นถึงจะเห็นภาพนี้ได้ เค้าเห็น “ภาพสะท้อน” นี่เป็นส่วนหนึ่งของ Interface หน้ารายละเอียดโรงแรมนะครับ ...
UI Pattern

อย่างนี้ต้องขยาย

Interface นี้ทำตัวเสมือนมีแว่นขยายคอยส่องขยายภาพและรายละเอียดให้เห็นชัดเจนไม่ต้องเพ่งมอง การใช้งานดูเหมือนว่าทางผู้พัฒนาตั้งใจให้ใช้กับอุปกรณ์ touch screen นะครับ เพราะถ้าลองใช้เมาส์เลื่อนดู จะพบว่าหน้ามันจะเลื่อนช้ามาก ต้องคลิกแล้วลากเหมือนเราเอานิ้วเลื่อนหน้าจอ สนุกดีครับ ลองเล่นดูที่เว็บ monocle สิบปากว่าไม่เท่านิ้วจิ้ม ヽ(=^・ω・^=)丿
UI Pattern

เมนูฉลาดสุดๆ ของ Amazon.com

เมนูที่ผมจะมานำเสนอนี่ไม่ใช่เมนูอาหารนะครับ แต่เป็นเมนูที่เป็นลิงค์แบ่งประเภทสินค้าออกเป็นหมวดหมู่ต่างๆ ซึ่งมักเรียกเป็นชื่อเฉพาะว่า เมกะเมนู (mega menu) หน้าตาของ UI เมกะเมนู ก็จะเป็นดั่งหนึ่งในเว็บที่ผมเคยทำให้ลูกค้าร้านขายส่งเครื่องเขียน myunionplus.net อย่างที่ได้บอกไปแล้วครับว่า UI นี้จะเหมาะกับร้านค้าออนไลน์ที่มีสินค้าหลายหลากประเภท แต่ความพิเศษที่อยากจะมาเล่าเกี่ยวกับ UI นี้ก็คือ ความพิถีพิถันใส่ใจการใช้งานของผู้ใช้อย่างแท้จริงของเว็บ Amazon.com ให้ลองเข้าที่เว็บ Amazon.com แล้วลองสัมผัสประสบการณ์การใช้งานเมกะเมนูของ Amazon ...
UI Pattern

ช่องเดียวเอาอยู่

UI ที่ผมกำลังจะแนะนำนี้เป็นความพยายามของมนุษยชาติที่ต้องการเอาชนะการกรอกฟอร์มที่ยุ่งยากเยอะแยะแสนจะทรมาน เมื่อต้องกรอกข้อมูลบัตรเครดิตเพื่อชำระเงิน ด้วย UI นี้ เราต้องการเพียงช่องกรอกข้อมูลเพียงช่องเดียวเท่านั้นเอง เคล็ดลับของการทำงานของช่องกรอกข้อมูลอันเดียวนี้ (single-field credit card input) คือการแบ่งขั้นตอนการตรวจสอบข้อมูลออกเป็นขั้นตอนย่อยๆ ซึ่งเราต้องกรอกข้อมูลเลขบัตรเครดิตให้ถูกต้องเสียก่อน จึงจะสามารถกรอกข้อมูลอื่นต่อไปได้ เช่น เลขหลังบัตร CVC, วันหมดอายุ เป็นต้น ช่องกรอกข้อมูลนี้จึงทำงานเสมือน real-time validator ...

Posts navigation