Cursors มาตั้งแต่ "The Mother of All Demos" เมื่อ Douglas Englebart นำเสนอ mouse และ GUI ในช่วงปลายศตวรรษที่ 6 Mouse cursor ช่วยให้เราเห็นตำแหน่งบนหน้าจอ เป็น UX tool ที่ดีในการแสดงว่าทำอะไรได้บนจุดใดจุดหนึ่ง หรือคอมพิวเตอร์กำลังทำอะไร บทความนี้จะเล่าเกี่ยวกับการใช้ mouse cursor บน webpage เพื่อปรับปรุง UX
Syntax
ใน CSS selector ใช้ syntax นี้เพื่อเปลี่ยน cursor จาก default arrow:
cursor: [ url(1.png), url(2.png) ], etc., <mandatory keyword value>
ใน square brackets แรกมี list of urls คั่นด้วย comma เป็น optional value อนุญาต custom cursors – มี custom cursor creators มากมายออนไลน์
Comma separated list หมายถึง browser จะลองโหลดตัวแรก ถ้าไม่เจอหรือ url ผิด จะลองตัวถัดไปจนกว่าจะเจอ หรือจะใช้ mandatory keyword ท้ายสุด
พารามิเตอร์แรก (urls) เป็น optional แต่พารามิเตอร์ที่สองจำเป็น ต้องมี keyword บอก cursor type ที่ต้องการ นี่คือค่าบางส่วนที่ใช้ได้:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS custom cursor</title> <style> table { width:100%; text-align: center; border-collapse: collapse; font-family: 'Roboto', sans-serif; } thead { width: 100%; background: lightblue; } tr:nth-child(even) { background-color: lightgrey; } td { width: 32%; height: 50px; padding: 10px; } td.test { color: red; font-weight: bold; } td#auto { cursor: auto; } td#cell { cursor: cell; } td#crosshair { cursor: crosshair; } td#default { cursor: default; } td#none { cursor: none; } td#pointer { cursor: pointer; } td#help { cursor: help; } td#progress { cursor: progress; } td#wait { cursor: wait; } td#text { cursor: text; } td#vertical-text { cursor: vertical-text; } td#zoom-in { cursor: zoom-in; } td#zoom-out { cursor: zoom-out; } </style> </head> <body> <table> <thead> <td>Cursor Type:</td> <td>Description:</td> <td>Test it Out: </td> </thead> <tr> <td>auto</td> <td>Automatically figures out which cursor to use based on context.</td> <td class="test" id="auto"> TEST </td> </tr> <tr> <td>default</td> <td>Typically an arrow, but depends on platform being used.</td> <td class="test" id="default"> TEST </td> </tr> <tr> <td>help</td> <td>Used to indicate help is available</td> <td class="test" id="help"> TEST </td> </tr> <tr> <td>none</td> <td>No cursor present</td> <td class="test" id="none"> TEST </td> </tr> <tr> <td>pointer</td> <td>Most often used when hovering over link or button to indicate it can be clicked.</td> <td class="test" id="pointer"> TEST </td> </tr> <tr> <td>progress</td> <td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td> <td class="test" id="progress"> TEST </td> </tr> <tr> <td>text</td> <td>Tells the user text can be highlighted.</td> <td class="test" id="text"> TEST </td> </tr> <tr> <tr> <td>wait</td> <td>Indicates that the computer is thinking and user CANNOT interact with UI...</td> <td class="test" id="wait"> TEST </td> </tr> <tr> <td>zoom-in</td> <td>Indicates to user that we can zoom in on something. </td> <td class="test" id="zoom-in"> TEST </td> </tr> <tr> <td>zoom-out</td> <td>Indicates to user that we can zoom out on something. </td> <td class="test" id="zoom-out"> TEST </td> </tr> </table> </body> </html>
โค้ดข้างต้นแสดงแค่บางส่วนของ cursors ที่ใช้ได้ ดูเพิ่มเติมที่ MDN
สรุป
วันนี้เรารู้จักวิธีเพิ่ม cursors บนเว็บไซต์ช่วยปรับปรุง UX ด้วย cursor แสดงสิ่งที่ทำได้บนแต่ละจุด users รู้ว่าคาดหวังอะไรขณะ navigate site มี cursors มากกว่านี้มาก แนะนำลอง customize cursor ให้ตรงความต้องการ และจำไว้: cursor เป็นแค่ครึ่งหนึ่งของ UX อีกครึ่งคือ implement สิ่งที่ user คาดหวังจาก cursor จะพูดถึงอีกครั้ง Happy hacking!
