มาอัพเดพเทรนด์และเทคนิคที่จะช่วยจุดประกายไอเดียปิ๊งๆ ให้กับความคิดสร้างสรรค์งานออกแบบด้าน UI อย่างมืออาชีพ ด้วยเว็บน้องใหม่ไฟแรงทั้ง 5 นี้กันครับ UI Movement เว็บ UIMovement รวบรวมเอาไอเดียสุดคูลเกี่ยวกับ animation ที่มาช่วยเพิ่มสีสันและความแปลกตาแปลกใจให้กับ UI ได้อย่างน่าอัศจรรย์ใจ ดูไปเพลินไป นี่แหละมนตร์เสน่ห์ของ animation   Lapa.Ninja ช่วงนี้เว็บสกุลนินจาเริ่มออกมาให้เราเห็นอยู่มากมาย เว็บ Lapa ...

ช่วงนี้ใครแวะเยี่ยมเยียนเว็บ uiblogazine จะสังเกตเห็น popup เล็กๆ ขึ้นอยู่ที่มุมขวาล่างของหน้าแรก เจ้า popup นี้ ผมไม่ได้ใช้ jQuery หรือ plugin ใดๆ ของ wordpress เพื่อสร้างมันขึ้นมานะครับ แต่ผมใช้แค่ script สั้นๆ ของ Nectar Ninja ...

การออกแบบ UI ที่นำเสนอข้อมูลจำนวนมากให้เข้าใจได้โดยง่าย เราสามารถแปลงข้อมูลเหล่านั้นให้กลายเป็นกราฟหรือแผนภูมิ  เช่น กราฟเส้นแสดงการเปลี่ยนแปลงรายได้ของบริษัท แต่ถ้าต้องการดูเจาะลึกในรายละเอียดว่ารายได้มีที่มาจากอะไรบ้าง อย่างไรก็คงหนีไม่พ้นตารางหรอกครับ เรื่องนี้คงจะไม่ทำให้ designer หลายคนติดตาราง หากยูสเซอร์ไม่ต้องการดูข้อมูลบนอุปกรณ์มือถือ ซึ่งคงเป็นไปไม่ได้แล้วในยุคนี้ โชคดีที่ผมได้มีโอกาสได้ออกแบบตัวระบบ dashboard บนเว็บสำหรับบริษัทการเงินแห่งหนึ่งซึ่งหนีไม่พ้นรายงานที่เป็นในรูปแบบตาราง ทำให้ได้เห็นนวัตกรรมการแสดงผลที่ค่อนข้างเวิร์คของตารางบนมือถือ และรู้จักประเภทของตารางมากกว่าแต่ก่อนอีกด้วย ในแต่ละประเภทตาราง ผมมีสร้างหน้าตัวอย่างไว้ดูประกอบ ลองคลิกดูก็จะเข้าใจคำอธิบายได้ดียิ่งขึ้นนะครับ เกริ่นมาเยอะ งั้นเรามาเข้าตาราง ...

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

หนึ่งในตัววัดผลว่าเว็บของเรามีประสิทธิภาพ ไม่ใช่ดูที่เว็บสวยงามหรือไม่ แต่ขึ้นอยู่กับว่าเว็บของเราตอบโจทย์ยูสเซอร์และองค์กรได้มากน้อยแค่ไหน บริษัทจึงต้องดูค่าแปรเปลี่ยนเป็นกำไร (Conversion Rate) ในแต่ละการเปลี่ยนแปลงที่เกิดขึ้นบนหน้าเว็บ เพราะเป็นวิธีการเฝ้าติดตามผลลัพธ์ของงานออกแบบอันจะส่งผลต่อพฤติกรรมของลูกค้าและกำไรของบริษัท ซึ่งผมได้รวบรวมวิธีการออกแบบ UI หน้าเว็บที่จะช่วยเพิ่มตัวเลข Conversion rate ที่ใครๆ ก็สามารถทำได้ มาเริ่มหมากทั้ง 10 วิธีกันครับ 1. ใช้นางแบบ, นายแบบในหน้าแรก เปรียบเทียบเว็บแบบเดิมกับแบบที่ปรับมาใช้รูปคนเป็นพื้นหลัง เว็บ 37 ...

มาสคอตของบริการ HotelsCombined ไม่ใช่จะมาโฆษณาลูกอมฮอลล์สูตรเย็นซ่าส์ชื่นใจที่มีเหล่าหมีขาวเป็นตัวประกอบนะครัช แต่ผมจะมารีวิว app ที่ใช้สำหรับดูราคาเปรียบเทียบโรงแรมทั่วโลกโดยมีเจ้าหมีใหญ่ขั้วโลกเป็นพระเอกของบริการนี้ครับ ซึ่งหากใครสะดวกใช้งานผ่านเว็บก็ให้เข้าไปใช้งานได้ที่ www.hotelscombined.co.th หรือใครชอบแบบ mobile app ก็เข้าไปดาวน์โหลด app HotelsCombined ได้ทั้งใน app Store หรือ Google Play ก็ได้เช่นกันครับ โฆษณาให้เค้าก่อนที่จะรีวิว เป็นมารยาท ^^! ...

ฟีเจอร์ของ application ไหนที่ต้องมีการร้องขอให้ยูสเซอร์ทำการตัดสินใจเพื่อโหวตขอความเห็นหรือเปิดฟังก์ชันที่เป็นค่า setting ของระบบรวม จะมีโอกาสที่ยูสเซอร์จะแสดงความเห็นในด้านลบ หรือไม่ก็ปฏิเสธการเปิดฟังก์ชันนั้นๆ ดังนั้นแแล้วจึงจำเป็นต้องหา UI อะไรสักอย่างมาหยุดหรือดักคอยูสเซอร์ไม่ให้กระทำการที่เป็นผลเสียต่อ app ในระดับที่ไม่สามารถกู้ผลลัพธ์กลับคืนมาได้ ผมยกตัวอย่างให้เห็นภาพมากขึ้น เช่น ในกรณีของ app Hopper, app ดูราคาตั๋วเครื่องบิน, ซึ่งมีฟีเจอร์หลักคือ การแจ้งเตือนราคาตั่วเครื่องบินเมื่อราคาตกหรือกำลังจะขึ้นให้แก่ยูสเซอร์ได้รับทราบ ตัวอย่างหน้าจอร้องขอให้เปิดฟังก์ชัน Notification ...

ผมเชื่อว่า UI designer ทุกคนคงไม่พลาดที่จะผ่านการออกแบบฟอร์มบนเว็บหรือไม่ก็บน mobile app คนทั่วไปอาจคิดว่ามันดูเหมือนไม่มีอะไรยาก ซึ่งจริงๆ แล้ว เว็บฟอร์มเป็นหนึ่งใน UI ที่ออกแบบยากที่สุด เพราะมันมีรายละเอียดเยอะมากครับ ข้อแรกที่เราต้องเจอเลยก็คือ ตำแหน่งการวางเลเบล (form label) มาดูกันว่าเราสามารถวางมันแบบไหนได้บ้างครับ 1. วางเลเบลไว้ด้านซ้ายของช่องและจัดให้เรียงซ้าย ( Left-Aligned Label) การจัดเรียงเลเบลชิดซ้ายของฟอร์มเว็บสรรพากร เว็บยื่นเอกสารภาษีของกรมสรรพกรจะวางตำแหน่งของเลเบลทางด้านซ้ายของช่องกรอกข้อความ โดยให้แนวเลเบลเรียงเสมอกันทางด้านซ้าย ข้อดีของวิธีการนี้คือ ...

ใครจะเชื่อไหม ถ้าผมบอกว่าแค่การเปลี่ยนปุ่มเพียงแค่หนึ่งปุ่ม แต่กลับช่วยสร้างรายได้ต่อปีให้กับเว็บไซต์ e-commerce แห่งหนึ่งได้ถึงปีละ 300 ล้านดอลลาร์ ฟอร์มสำหรับใช้เข้าสู่ระบบหรือลงทะเบียนสำหรับลูกค้าใหม่ (สร้างสมมติจากคำบรรยายในบทความ) เรื่องเริ่มที่ฟอร์มที่ดูง่ายๆ ดังแสดงตามรูปด้านบน มันเป็นฟอร์มใช้เพื่อเข้าสู่ระบบ (Login form) ของยูสเซอร์ซึ่งประกอบด้วย ช่องกรอก: email address และ password ปุ่ม: Login และ ...

เรื่องราวที่ผมจะนำมาเล่าเกี่ยวกับการพลิกผันชีวิตของธุรกิจปล่อยเช่าบ้านพักอาศัยให้กับคนทั่วไปของ airbnb จากที่เคยทำรายได้เพียงแค่ 200 ดอลลาร์ต่อสัปดาห์ในปี 2009 แต่ในขณะนี้ airbnb สามารถทำรายได้ต่อปีกว่า 10,000 ล้านเหรียญสหรัฐฯ (หรือ 200 ล้านดอลลาร์ / สัปดาห์) สิ่งนี้เริ่มจากการเริ่มคิดอย่างมีดีไซน์เป็นตัวนำ (Design-thinking strategy) ในแวดวงธุรกิจซิลิกอนวอลเลย์ (Silicon Valley, แหล่งรวม Start-Up ...