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

เคล็ดลับที่เราจะได้เรียนในบทความนี้เป็นสิ่งที่ผมใช้หากินอยู่บ่อยๆ เมื่อต้องการแต่งรูปสินค้าเพื่อเอาไปลงขายของในเว็บ โดยรูปสินค้าที่นำไปแสดงนั้น โดยทั่วไปแล้วจะเป็นรูปสินค้าบนพื้นหลังสีขาว แต่ภาพที่ได้จากกล้องดิจิตอลจะไม่ได้เป็นอย่างใจนึกครับ ซ้ำร้ายยิ่งกว่านั้น สถานที่ถ่ายทำของผมยังดูเลวร้ายด้วย ไม่เชื่อ มาดูภาพต้นแบบและขั้นตอนการแต่งภาพกันครับ ขั้นตอนที่ 1 ก่อนอื่นให้เราสร้างพื้นที่เกือบขาว (มาตอนแรกก็ขาวหรอก แต่พอผ่านไปๆ ก็เริ่มเป็นอย่างในภาพครับ -_-!) ให้ครอบคลุมตัวสินค้า ผมใช้คำว่าครอบคลุมนะครับ ไม่ใช่ครอบเต็ม เพราะเปลืองกระดาษแย่หากต้องทำทั้งพื้นและผนังเป็นสีขาว ถ่ายภาพด้วยกล้องดิจิตอลบนขาตั้งกล้อง ปรับโหมดการถ่ายให้เป็น Fluorescent เพื่อให้โทนสีใกล้เคียงของจริงมาที่สุด ...

เคยมีปัญหาเรื่องการคิดชื่อและหารูปจำลองผู้ใช้งานเว็บเพื่อไปทำเป็นตัวอย่างหน้าตา Interface สำหรับเว็บ / app ไหมครับ ถ้าไม่กี่ชื่อคงไม่เสียเวลาเท่าไรนัก เพราะมีชื่อยอดฮิตอันดับหนึ่ง คือ John Doe คอยทำหน้าเป็น avatar ให้แก่ designer อย่างเราๆ มาเป็นเวลาช้านาน แต่ถ้าเราต้องการแสดงชื่อเป็น 10 รายชื่อขึ้นไป อย่างนี้คงต้องนั่งคิดปวดหมองมีใช่น้อย ต่อไปนี้ไม่จำเป็นต้องเสียเวลาคิดชื่อหรือค้นหารูปใครผู้ใดก็ไม่รู้จาก google ...

ผมได้มีโอกาสไปฟังการบรรยายที่ LaunchPad แหล่งชุมนุมนักธุรกิจ StartUp ที่ตั้งอยู่ในซอยถนนปั้น (ลงสถานนีสุรศักดิ์ แล้วเดินไปโรงเรียนกรุงเทพคริสเตียน) ในหัวข้อเกี่ยวกับ การออกแบบ UI เบื้องต้น ตอน: Talk to Your Users โดยพี่พิชญ์ รัตนาธิกุล (รุ่นพี่ของผมเอง น่าปลื้มใจมากเลย) ผมเลยอยากเก็บมาสาธยายอีกครั้งในบทความนี้ เพราะเห็นว่ามันมีประโยชน์มากๆ เลยครับ ...

ทฤษฎีของฟิตส์ที่ผมได้เขียนอธิบายไปเมื่อบทความที่แล้ว เป็นความรู้ที่เราสามารถนำมาประยุกต์ใช้ในการออกแบบ UI ได้เป็นอย่างดีเลย โดยเฉพาะเรื่องของลิงค์ซึ่งเราจะมาดูตัวอย่างกันครับ 1. การออกแบบแถบเมนู (Navigator Menu) ลองดูเปรียบเทียบ design ของ เมนู a (บน) และ b (ล่าง) ตามที่แสดงให้ในรูปด้านบนดูนะครับ การใช้งานส่วนใหญ่คือ เราจะเคลื่อนเมาส์จากด้านล่างแถบเมนูเพื่อไปคลิกเลือกลิงค์หน้าที่ต้องการ สำหรับแบบ a ...

Lazada เว็บ e-commerce ที่ขายสินค้าออนไลน์หลากหลายประเภท เติบโตอย่างรวดเร็วมากในช่วง 2-3 ปีที่ผ่านมา รวมถึงการเปลี่ยนแปลงหน้าตาเว็บให้ทันสมัย น่าซื้อน่าช้อป ทำให้ผมรู้สึกตื่นตาตื่นใจไม่น้อย เริ่มจากโลโก้และธีมสีที่เน้นใช้สีน้ำเงินกรมท่าและสีส้ม พอมาถึงหน้าตาหน้าแรก ก็เห็นเลยว่าตัวเว็บได้ปรับปรุงให้เข้าการช้อปปิ้งสไตล์เอเชียจริงๆ เพราะอัดแน่นไปด้วยข้อมูลและรูปภาพ ไม่ค่อยมีการใช้พื้นที่สีขาว (white space) มากเหมือนเว็บฝรั่งเค้า เมนูหมวดหมู่ของสินค้าก็มีให้เลือกอยู่ทางด้านซ้าย ดีมากครับ เพราะเป็น interface ที่เหมาะสมสำหรับร้านค้าที่มีสินค้าปริมาณมากเช่นนี้ ...

เราเคยสังเกตไหมว่า แต่ละครั้งที่เราเลื่อนเมาส์เพื่อไปคลิกปุ่มใดปุ่มหนึ่งบนหน้าจอนั้นมีความยากง่ายแค่ไหน ต้องใช้ความพยายามของกล้ามเนื้อมือมากน้อยเท่าไร พวกเราอาจจะคิดว่ามันก็แค่เรื่องง่ายๆ เพราะก็แค่ออกแบบปุ่มยังไงก็ได้ให้ผู้ใช้คลิกได้ก็พอแล้ว แต่มีกฎหนึ่งได้เข้ามามองพฤติกรรมการเคลือนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (human-computer interaction)ได้อย่างน่าสนใจทีเดียวครับ กฎของฟิตส์ (Fitts’s Law) คือกฎที่ว่าด้วยความสัมพันธ์ระหว่างเวลาที่ใช้ในการคลิกเลือกวัตถุเป้าหมายกับระยะทางจากวัตถุและขนาดของวัตถุเป้าหมาย พอได้เริ่มกล่าวถึงกฎนี้แล้ว การจะให้ไม่แสดงสมการคงจะเป็นการไม่ให้เกียรติผู้ค้นพบนะครับ MT = a + b log2 (2A/W) ที่ซึ่ง MT (movement ...

เราเคยสังเกตไหมว่า แต่ละครั้งที่เราเลื่อนเมาส์เพื่อไปคลิกปุ่มใดปุ่มหนึ่งบนหน้าจอนั้นมีความยากง่ายแค่ไหน ต้องใช้ความพยายามของกล้ามเนื้อมือมากน้อยเท่าไร พวกเราอาจจะคิดว่ามันก็แค่เรื่องง่ายๆ เพราะก็แค่ออกแบบปุ่มยังไงก็ได้ให้ผู้ใช้คลิกได้ก็พอแล้ว แต่มีกฎหนึ่งได้เข้ามามองพฤติกรรมการเคลือนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (human-computer interaction)ได้อย่างน่าสนใจทีเดียวครับ กฎของฟิตส์ (Fitts’s Law) คือกฎที่ว่าด้วยความสัมพันธ์ระหว่างเวลาที่ใช้ในการคลิกเลือกวัตถุเป้าหมายกับระยะทางจากวัตถุและขนาดของวัตถุเป้าหมาย พอได้เริ่มกล่าวถึงกฎนี้แล้ว การจะให้ไม่แสดงสมการคงจะเป็นการไม่ให้เกียรติผู้ค้นพบนะครับ MT = a + b log2 (2A/W) ที่ซึ่ง MT (movement ...

เราเคยสังเกตไหมว่า แต่ละครั้งที่เราเลื่อนเมาส์เพื่อไปคลิกปุ่มใดปุ่มหนึ่งบนหน้าจอนั้นมีความยากง่ายแค่ไหน ต้องใช้ความพยายามของกล้ามเนื้อมือมากน้อยเท่าไร พวกเราอาจจะคิดว่ามันก็แค่เรื่องง่ายๆ เพราะก็แค่ออกแบบปุ่มยังไงก็ได้ให้ผู้ใช้คลิกได้ก็พอแล้ว แต่มีกฎหนึ่งได้เข้ามามองพฤติกรรมการเคลือนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (human-computer interaction)ได้อย่างน่าสนใจทีเดียวครับ กฎของฟิตส์ (Fitts’s Law) คือกฎที่ว่าด้วยความสัมพันธ์ระหว่างเวลาที่ใช้ในการคลิกเลือกวัตถุเป้าหมายกับระยะทางจากวัตถุและขนาดของวัตถุเป้าหมาย พอได้เริ่มกล่าวถึงกฎนี้แล้ว การจะให้ไม่แสดงสมการคงจะเป็นการไม่ให้เกียรติผู้ค้นพบนะครับ MT = a + b log2 (2A/W) ที่ซึ่ง MT (movement ...

แนะนำไฟล์แบบฝึกหัดการใช้เครื่องมื่อ Pen Tool สำหรับโปรแกรม Illustrator ไม่ว่าจะเป็นมืออาชีพหรือผู้เริ่มต้นศึกษาก็ควรทำนะครับ สนุกดี จะช่วยให้เราเข้าใจธรรมชาติของเครื่องมือนี้มากขึ้นครับ ดาวน์โหลดได้จากเว็บ VectorTut หรือ จาก uiblogazine ก็ได้ครับ [btn link=”http://cdn.tutsplus.com/vector/uploads/legacy/articles/article_pen_tool_comprehensive_guide/pen_tool_excercise.zip” color=”red” size=”size-l” target=”_blank”]ดาวน์โหลดไฟล์แบบฝึกหัด[/btn]