uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ
Design Excite

รอให้ดู (Waiting Interface)

การรอเป็นสิ่งที่น่าเบื่อมากสำหรับยูสเซอร์ ถ้าหากระบบเราไม่สามารถตอบสนองความต้องการของยูสเซอร์ได้ทันที เราควรใช้ช่วงจังหวะการรอนั้น หาอะไรให้ยูสเซอร์ดู อย่างวันนี้ที่แยกราชประสงค์ Nissan มีการเปิดตัวรถรุ่นใหม่ ก็เลยสร้างสรรค์งานโฆษณาด้วยการใช้เวลาที่ผู้ขับรถต้องรอไฟแดง ให้มาดูโฆษณาแผ่นป้ายขนาดใหญ่ที่กางขวางทางม้าลาย เป็นการโฆษณาที่ได้ประโยชน์ทุกฝ่ายจริงๆ ครับ คือคนจอดรถได้ดู คนข้ามถนนได้ความปลอดภัย คนโฆษณาก็ได้โชว์ ตัวอย่างเว็บที่หาอะไรให้คนรอได้ดู ก็เช่น expedia.co.th hotellweb.com มาในแนว gimmick เครื่องสแกนกระเป๋า Booking.com มาอย่างฉลาด ...
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/
Design Excite

แบงค์เมกา design ใหม่!

เมื่อแบงค์ยุคสงครามของอเมริกากำลังปรับเปลี่ยนให้เข้ากับยุคสมัยใหม่ หน้าตาของแบงค์ชาติมหาอำนาจเค้าจะเป็นอย่างไร มาดูกันๆ ภาพด้านบนจะแสดงให้เห็นว่าองค์ประกอบสำคัญๆ ที่แบงค์ควรมี ก็ยังคงอยู่ครบถ้วนในแบงค์ดีไซน์ใหม่ หน้าตาด้านหลังของแบงค์ ซึ่งแต่ละราคาก็มีเรื่องราวของมันเอง แต่จะไม่ไปอิงกับเรื่องของบุคคลสำคัญใดบุคคลสำคัญหนึ่งแล้ว แต่เป็นการบอกเล่าเรื่องราวในยุคสมัยใหม่ และขอบคุณชนชาติอเมริกันในทุกหมู่เหล่า   ด้านหน้าของแบงค์ต้องแสดงราคาชัดเจน ฟอนต์ก็เปลี่ยนไปเยอะเลยครับ ไม่ได้ใช้ฟอนต์แบบยุค ’80 แล้ว แบงค์ราคา 5 ดอลลาร์ มาในเรื่องราวทักษะการทำงานของชาวอเมริกัน แบงค์ราคา 10 ...
ทฤษฎี UI

UI ที่ให้อำนาจการควบคุมและการให้อภัย

ไม่มีใครที่ไหนอยากจะถูกปกครองหรืออยู่ภายใต้การบังคับที่ไม่อนุญาตให้เราทำตามความต้องการของเราได้อย่างอิสระเสรี และดูเหมือนว่าการออกแบบ UI ก็ไม่ได้ต่างกับเรื่องนี้สักเท่าไรนัก การกระทำ (action) ที่เกิดขึ้นบนหน้าเว็บที่ปฏิสัมพันธ์ผ่านทาง UI ต้องเกิดขึ้นจากความเต็มใจของยูสเซอร์ ไม่ใช่เกิดจากความจำยอมนะครับ เราต้องออกแบบ UI ที่ทำให้ยูสเซอร์เกิดความรู้สึกว่าเค้ากำลังมีอำนาจในการควบคุมทุกอย่างในหน้าเว็บ (control) แม้กระทั่งทำอะไรผิดพลาดไป ก็สามารถแก้ไขหรือกลับไปสถานะก่อนหน้าได้เสมอ พูดอีกนัยหนึ่งก็คือ UI ต้องพร้อมให้อภัยยูสเซอร์เสมอ (forgiveness) มาดูตัวอย่างกันครับ ในหน้า feed ...
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 หน้ารายละเอียดโรงแรมนะครับ ...
Freebies

ไอคอนแจกฟรี จาก Sketch Active

ชุดไอคอนแจกฟรี จาก Sketch Active โดย designer สาวชาวจีนล่ะ (เหมือนว่าตอนนี้ทำงานให้กับ Louis Vuitton อยู่นะเนี่ย ไม่ธรรมดาจริงๆ) ไม่มีเงื่อนไขการใช้งาน แค่อย่าเอาไปขายต่อแค่นั้นแหละ หรือถ้าถูกใจมาก สามารถบริจาคเงินให้เป็นอาหารแมวสุดเลิฟของเธอก็ได้นะ ^^ ไอคอนชุดนี้มีทั้งหมด 7 ชุด ประกอบด้วย 1. ชุดจิบชากาแฟยามบ่ายพร้อมของหวานย้อมใจ ...
Freebies

UI/UX E-Book ฟรี จาก UXPin

UXpin เป็นบริษัทที่ผลิตและจำหน่ายซอฟต์แวร์สำหรับสร้างภาพโครงเว็บและแอปพลิเคชัน (wireframing) ที่มีแพทเทิร์น interface ที่ครบครันให้เลือกใช้ เพียงแค่ลากวางๆ รองรับการออกแบบ UI ทั้งบนหน้าจอเดสก์ทอปและมือถือ ทางบริษัทเค้ายังใจดีแบ่งปันความรู้เรื่อง UI โดยผลิตหนังสือ E-book มาให้ผู้สนใจและนักออกแบบได้อ่านมีความรู้กันเต็มอิ่มถึง 8 เล่ม ณ ปัจจุบัน (โหลดได้จากลิงค์นี้) และคาดว่าคงจะยังมีหนังสือดีๆ มาให้พวกเราอ่านกันฟรีเพิ่มขึ้นอีกเรื่อยๆ ผมก็จะคอยอัพเดทให้รับรู้โดยทั่วกันแน่นอนครับ ...

Posts navigation