Tag: User Interface

Seven Stages of Action – ระยะห่างระหว่างคนกับคอมพิวเตอร์

Seven Stages of Action – ระยะห่างระหว่างคนกับคอมพิวเตอร์

รู้ไหมครับว่า มนุษย์กับจักรกล(ในที่นี้คือคอมพิวเตอร์) จะติดต่อสื่อสารกันสักทีหนึ่ง ต้องผ่านขั้นตอนมากมาย… ตามหลัก HCI มีผู้รู้ท่านหนึ่ง (Dornald Norman) นิยามกฎชื่อว่า Seven Stages of Action ขึ้นมา สรุปเนื้อความคร่าวๆคือ กระบวนการติดต่อระหว่างมนุษย์และจักรกล (Computer หรือเครื่องจักรอื่นๆ) ประกอบด้วยขั้นตอนย่อย 7 กระบวนการด้วยกัน กะอีแค่กรูจะพิมพ์รายงานส่งอาจารย์เนี่ย มันมีถึง 7 ขั้นตอนเชียวเหรอ! (ฮั่นแน่แอบเถียงในใจล่ะสิ) ลองดูนี่… ตั้งใจว่าจะพิมพ์รายงานส่งอาจารย์ -> คิดว่าจะพิมพ์อะไร -> กำหนดว่าต้องคลิ้กที่ Start แล้วเลือกไอค่อนโปรแกรมเวิร์ด จากนั้นถึงจะเริ่มพิมพ์ blah blah -> เริ่มทำตามขั้นตอนที่ 3 -> หน้าจอมีตัวอักษรขึ้นตามที่เราพิมพ์ต๊อกแต๊ก ขณะนี้เรารับรู้แล้วว่าพิมพ์ได้ โปรแกรมไม่แฮ้ง -> สมองเราแปลความหมายจากสิ่งที่เห็น ว่าที่พิมพ์ไปน่ะ ใช่ที่ตั้งใจไว้ (ถ้าพิมพ์ผิดจะได้กดลบทัน) -> สมองรับรู้ และก็เริ่มขั้นตอนที่ 4-7 ซำ้ [...]

 

Faux Columns using jQuery

Faux Columns using jQuery

เคยเจอปัญหานี้กันหรือเปล่า… ออกแบบ layout แบบสองคอลัมน์ (หรือมากกว่า) โดยใช้ div + float แต่พอเจอ content มากๆ ความสูงของ div มันกลับไม่เท่ากัน ทำให้ไม่สามารถใส่ background-color ให้กับคอลัมน์ที่สั้นกว่าได้ (ส่วนมากจะเป็น navigation menu) Faux Columns คือนิยามของเรื่องข้างบนที่ A List Apart ให้ไว้ – เขาใช้การใส่ background image สลับข้าง คือให้เป็นพื้นหลังของข้างที่ยาวกว่า ผมมีวิธีแก้ปัญหาอีกทางหนึ่ง โดยใช้ JavaScript เข้ามาช่วย สมมุติว่ามีโค้ดแบบนี้ HTML <div id="wrapper"> <h1 id="header">Site Header</h1> <div id="main"> <div id="sidebar"> <!– Main Navigation–> <ul id="navigation"> … [...]

 

User Interface Design – Scrabble Tools

User Interface Design – Scrabble Tools

Scrabble Tools เป็นโปรเจ็กต์ในวิชา UI Design ที่ทำกับเพื่อนอีกสองคน อัดเรื่องของ Accessibility และ UI best practices เข้าไปแบบงูๆปลาๆ – ไว้จะมาโม้ให้ฟัง http://vashira.com/scrabble/

 

Graphical Keyboard User Interface

Graphical Keyboard User Interface

เคยเขียนเกริ่นเรื่อง User Interface ไว้ตอน Ringo วันนี้มาลองเปรียบเทียบ UI ที่เราใช้กันปัจจุบันบ้างดีกว่า Command Line Interface (CLI) CLI เป็นรูปแบบแรกๆที่มนุษย์ใช้เพื่อสื่อสารกับคอมพิวเตอร์ เข้าใจว่าคีย์บอร์ดเป็นพัฒนาการขั้นต่อมาของพิมพ์ดีด ในเมื่องานเขียนเราใช้พิมพ์เอา ทำไมเราจะพิมพ์สั่งให้คอมพิวเตอร์ทำงานไม่ได้ใช่ไหม? รูปแบบนี้ใช้กันมาต่อเนื่องตั้งแต่ยุคเครื่อง IBM มาจน PC จนกระทั่ง apple ได้ไอเดีย (ลอก) มาจาก PARC เกิดเป็น GUI นั่นแหละ ยุคสมัยจึงเริ่มเปลี่ยนไป สาเหตุหลักๆที่เกิดการเปลี่ยนแปลงเพราะ Mind Model ของคนเรา(ทั่วๆไป) มันไม่เข้ากับการใช้ CLI เท่าไหร่ – ชีวิตประจำวันเรา interact กับสิ่งของแบบ “สัมผัส” ไม่ใช่เขียนคำสั่งให้มันทำงาน Graphical User Interface (GUI) GUI เริ่มแรกคือคอนเซ็ปต์ที่ใช้พิกัด xy ของตัวเคอร์เซอร์ที่ลากไปมาบนพื้นผิว 2 มิติ ไป [...]

 

Poking box – ทามาก๊อตจิพันธุ์ใหม่

Poking box – ทามาก๊อตจิพันธุ์ใหม่

เป็น User Interface ที่น่าสนใจมาก แหวกแนวสุดๆ ไม่เชื่อลองดูวีดีโอข้างล่างสิ เอาไปประยุกต์ได้อีกเยอะเลยครับ ที่มา: engadget