กฎข้อที่ 2 แต่ละคลิกต้องไม่คิดและไม่ซับซ้อน (It doesn’t matter how many times I have to click, as long as each click is minless, unambiguous choice) ผมเคยได้อ่านหลายๆ ...

ในวงการ User Interface Design คงจะเป็นไปไม่ได้ที่จะไม่กล่าวถึงผู้แต่งหนังสือ Don’t Make Me Think (อย่าทำให้ฉันคิดมากนะจ๊ะเธอ) ซึ่งผมแปลซะเป็นเหมือนชื่อเพลงเลยเนอะ หนังสือเล่มนี้ หัวหน้าผมแนะนำให้รู้จักเป็นครั้งแรก และได้เป็นเหมือนแรงบันดาลใจให้กับผมที่จะอยากเป็น UI designer มืออาชีพตัวจริงเหมือนกับผู้แต่ง – Steve Krug (สตีฟ ครูค) ด้วยภาษาที่ใช้อธิบายอย่างง่ายๆ ...

มาถึงตอนที่เราจะได้ใช้สิ่งที่เราได้เรียนรู้ไปในตอนที่แล้ว ตื่นเต้นๆ จัง จำที่ผมให้ท่องได้ใช่ไหมครับ UI ต้องสนับสนุนหน่วยความจำระยะสั้น (recognition) มากกว่า หน่วยความจำระยะยาว (recall) ตัวอย่างแรกที่ผมอยากนำเสนอก็คือ UI search box ของ Google ครับ ตัวอย่างนี้เป็นการค้นหาเบอร์โทรของร้าน True Love Cafe (Cafe ที่ให้เราได้เล่นกับน้องหมาไซบีเรียน) ...

นี่คือทฤษฎีที่นักออกแบบ UI ควรต้องรู้และจำไว้ในอยู่เสมอ เกี่ยวกับการจดจำและการจำได้หมายรู้ของมนุษย์ ซึ่งจะช่วยให้เราออกแบบ UI ที่สอดคล้องกับความจริงนี้ได้อย่างเข้าอกเข้าใจและเห็นใจ

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

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

เราเคยสังเกตไหมว่า แต่ละครั้งที่เราเลื่อนเมาส์เพื่อไปคลิกปุ่มใดปุ่มหนึ่งบนหน้าจอนั้นมีความยากง่ายแค่ไหน ต้องใช้ความพยายามของกล้ามเนื้อมือมากน้อยเท่าไร พวกเราอาจจะคิดว่ามันก็แค่เรื่องง่ายๆ เพราะก็แค่ออกแบบปุ่มยังไงก็ได้ให้ผู้ใช้คลิกได้ก็พอแล้ว แต่มีกฎหนึ่งได้เข้ามามองพฤติกรรมการเคลือนไหวของกล้ามเนื้อมนุษย์เมื่อมีการปฏิสัมพันธ์กับหน้าจอคอมพิวเตอร์ (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 ...

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