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

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

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

กรุณาคลิกที่ภาพเพื่อดูภาพเคลื่อนไหว UI นี้จะช่วยเราแก้ปัญหาการลืมป้ายกำกับในช่องกรอกข้อความ (Label in Textbox) เพราะพอเราเริ่มคลิกที่ช่องกรอกข้อความ บางทีข้อความที่กำกับในช่องจะหายไป เพื่อเตรียมพร้อมให้เรากรอกข้อมูล แต่จะเหมาะกับช่องกรอกข้อความที่ค่อนข้างใหญ่หน่อยนะครับ ขอท้าวความนิดหน่อยนะครับ ป้ายกำกับช่องกรอกข้อความ (label) นั้นปกติจะอยู่ด้านนอก ถ้าเป็นอุปกรณ์ที่หน้าจอกว้าง ป้ายก็จะถูกออกแบบให้อยู่ทางด้านซ้าย (รูปซ้าย) แต่ถ้าหน้าจอแสดงผลแคบก็จะอยู่ด้านบนของช่องกรอกข้อความ (รูปกลาง) และยิ่งในปัจจุบัน เราหลีกเลี่ยงไม่ได้ที่จะต้องแสดงผลฟอร์มบนอุปกรณ์มือถือ ดังนั้นเพื่อลดพื้นที่ในแนวตั้ง จึงมีการออกแบบให้ข้อความกำกับช่องกรอกข้อความไปอยู่ด้านในและใช้สีอ่อนเพื่อบอกให้ทราบว่า ...

Interface นี้ผมเล่นแล้วสนุกดีครับ เค้าสร้างเมนูโดยเอาสภาพของเจลลี่ที่มันเด้งดึ่งๆ มาทำให้ดูน่าสนใจดีครับ ลองเล่นได้ที่ http://codepen.io/sol0mka/full/Jsyxq เป็นโค้ดที่เขียนอยู่บนเว็บ Codepen ที่กำลังมาแรงในเรื่องของ Open-source แบบ live บนเว็บที่ให้ใครก็ได้มาดูโค้ดพร้อมผลลัพธ์เมื่อประมวลผลเสร็จ ไว้ผมจะเขียนเล่าเรื่อง Codepen ทีหลังแล้วกันนะครับ แต่ตอนนี้มาเล่นดึ๋งๆ กันให้สนุกกันดีกว่าครับ

หลายๆ UI ที่เกิดขึ้นมามากมายนั้น ส่วนใหญ่จะได้รับแรงบันดาลใจจากสภาพทางกายภาพของวัตถุที่เกิดขึ้นจริงในโลก แล้วถูกนักพัฒนาสร้างเลียนแบบสภาพนั้นให้เกิดขึ้นบนโลกดิจิตอล Interface ม่านรูด (Curtain Slide Interface) ก็เป็นอีกหนึ่ง UI pattern ที่ช่วยเน้นย้ำให้เรารู้ว่าไม่มีสิ่งใดสร้างไม่ได้ในโลกดิจิตอล แม้แต่การจำลองการเลื่อนเปิด/ ปิดม่าน อินเตอร์เฟสนี้ถูกพัฒนาโดย Marcus Eckert ผู้ที่ชื่นชอบทำการทดลองเกี่ยวกับ animation programming เค้าได้ไอเดียนี้มาจากนักออกแบบที่สร้างสรรค์ต้นแบบด้วย Photoshop ...

ระบบปฏิบัติการ Windows ได้พัฒนามาถึงเวอรชันล่าสุด Windows 8 นอกจากจะทำเพื่อให้ใช้งานกับอุปกรณ์ทัชกรีนแล้ว เรื่อง UI ก็เป็นสิ่งถูกพัฒนามาอย่างต่อเนื่องยาวนาน ทำให้ผู้ใช้งานรู้สึกได้ถึงความสะดวก และประสบการณ์ที่ได้สั่งสมมายาวนาน มี Interface หนึ่งที่ผมชื่นชอบมากเป็นพิเศษสำหรับ Windows 7 ขึ้นไป ก็คือ ปุ่ม Show Desktop หน้าที่ของมันคือ เพียงเรากดปุ่มนี้ปุ๊ป ...