เมื่อหลายเดือนที่ผ่านมา Apple ได้เปิดตัว MacBook และ MacBook Pro รุ่นใหม่ที่มาพร้อมเทคโนโลยี Force Touch ซึ่งเป็นระบบที่สามารถตรวจวัดแรงกดจาก Trackpad เพื่อนำไปสร้างเป็น event ต่าง ๆ เช่น การ Preview หรือการเปิด Dictionary โดย Apple เองก็ได้เปิด API ให้นักพัฒนาสามารถนำความสามารถในการตรวจจับแรงกดนี้ไปใช้กับแอปพลิเคชันของตัวเองได้ด้วย ซึ่งถือว่าเป็นข่าวดีสำหรับ Web Developer เพราะ Apple มี source code ในส่วนของ JavaScript ให้ใช้งาน ทำให้เราสามารถตรวจจับแรงกดผ่าน JavaScript และนำไปใช้กับ HTML หรือ Web Application ได้โดยตรง
ผมเองก็ลองเอามาใช้กับเว็บตัวเองแบบงง ๆ เหมือนกัน ยังไม่ได้มี use case ชัดเจน ก็เลยลองเอามาใช้กับ interaction เล็ก ๆ เช่น การรับแรงกดที่แถบเมนูด้านซ้าย ถ้าเป็น force touch ก็ให้ trigger เมนูให้เปิดออกมา เป็นเหมือนการทดลองว่ามันเอาไป integrate กับ UI ได้ยังไงบ้าง
ถ้ามองในเชิงการทำงาน Force Touch มันไม่ได้เป็นแค่ “คลิกแรงขึ้น” ธรรมดา แต่เป็นระบบที่มีหลายระดับของแรงกด โดยเมื่อ user กดลงไปถึงระดับคลิกปกติ ระบบจะ trigger Haptic Feedback ให้สั่น เพื่อหลอกสมองว่ามีการยุบตัวของ Trackpad ทั้งที่จริงแล้วมันไม่ได้ขยับเลย เป็นแค่การสั่นเพื่อสร้าง illusion ทางกายภาพ และถ้ากดแรงขึ้นไปอีกจนถึงระดับที่สอง (force click) ก็จะมี Haptic Feedback เพิ่มอีกครั้ง ทำให้ผู้ใช้รู้สึกว่ามี interaction อีก layer หนึ่ง ทั้งหมดนี้เกิดขึ้นโดยที่ hardware ไม่ได้ขยับจริงเลย แต่เป็นการออกแบบ UX ผ่าน tactile feedback ล้วน ๆ
ในฝั่งของการพัฒนา ถ้าเราจะทำให้ JavaScript รับแรงกดได้ เราจำเป็นต้องใช้ Event Listener โดยต้อง import function ที่เกี่ยวข้องเข้ามาก่อน เช่นการใช้ state machine library ผ่าน CDN อย่าง Cloudflare จากนั้นจึงค่อย bind event เหล่านี้เข้ากับ DOM ของเรา ซึ่งในเชิง implementation จริง ๆ ก็ไม่ได้ต่างจากการทำ event handling ปกติ เช่นการใช้ document.querySelector()เพื่อจับ element ที่ต้องการ ใครถนัด jQuery ก็สามารถใช้ได้เช่นกัน
แนวคิดหลักของการจัดการ event พวกนี้จะอยู่ในรูปแบบของ state machine โดยเราจะมี state เริ่มต้น (initial) เช่น rest แล้วมี events อย่าง mousedown, mouseup, forcemousedown, forcemouseup ที่เปลี่ยนสถานะไปมา และสุดท้ายคือ callbacks ซึ่งเป็นส่วนที่เรากำหนดว่า “เมื่อเกิด event นี้แล้วจะให้ระบบทำอะไร” เช่น ถ้ากดแรงบน .class1 แล้วให้เปลี่ยน .class2 เป็น .class3 เราก็แค่เขียน logic นี้ไว้ใน callback function
พอเข้าใจโครงสร้างนี้แล้ว เราสามารถเอาไปประยุกต์กับ interaction อะไรก็ได้ ไม่ว่าจะเป็น UI animation, contextual menu หรือแม้แต่ gesture ใหม่ ๆ บนเว็บ ซึ่งจริง ๆ แล้วตัวอย่างที่ผมลองทำก็เป็นแค่ prototype ง่าย ๆ ถ้าอยากเห็นภาพชัดขึ้น ต้องลองโหลดโค้ดไปเล่นเองจะเข้าใจมากกว่า เพราะพวก interaction แบบนี้มันต้อง “รู้สึก” ถึงจะเห็นภาพจริง ๆ
