ออกแบบแรงเสียดทาน

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

แรงเสียดทานเป็นแรงที่ทำให้วัตถุเคลื่อนที่ช้าลง เช่นเดียวกับ UI ที่มีแรงเสียดทาน หมายถึง Interface ที่ทำให้กระบวนการตอบสนองของ user ช้าหรือหยุดชะงักลง แม้จะด้วยความตั้งใจหรือไม่ตั้งใจก็ตาม

การออกแบบ UI ให้มีแรงเสียดทานในปริมาณที่มากน้อยแค่ไหนนั้น ขึ้นอยู่กับว่าเราต้องการให้ user หยุดคิดและเรียนรู้ UI นานแค่ไหน โดยปกติเราจะใส่แรงเสียดทานใน UI กรณีที่ต้องการให้ user เรียนรู้การใช้งานแอปฟลิเคชันหรือเกมส์ที่พวกเค้าพึ่งติดตั้ง มาดูตัวอย่าง Interface แบบ walkthrough กันครับ (หน้าจอที่พาเราเดิมชมและแนะนำการใช้งานเบื่องต้น)

หน้าจอด้านบนนี้จะปรากฎเมื่อเราเริ่มใช้งานแอปพลิเคชันเป็นครั้งแรก โดยจะสอนและบอกฟีเจอร์ที่สำคัญๆ ที่เราควรรู้ ในภาพคือการสอนให้เราใช้นิ้วเลื่อนจอขึ้นลงเพื่อเรียกดูข้อมูล

หรืออีกกรณี เราจะใส่แรงเสียดทานเพื่อเตือน user หรือถามให้แน่ชัดว่าต้องการดำเนิน action นั้นๆ จริงหรือไม่

เวลาเราจะลบอะไรก็แล้วแต่ มักจะมี alert box แจ้งถามความแน่ใจกับเราว่า เราต้องการลบมันจริงๆ หรือไม่ เพราะถ้าผิดพลาดไปแล้ว การกู้ข้อมูลกลับมาอาจทำได้ยากลำบาก

หรือในกรณีที่เราอยากให้ user หยุดคิดก่อน เพื่อจะทำ action ต่อไป ผมยกตัวอย่างเช่น ปกติแล้วเราจะออกแบบสเกลให้คะแนนจากน้อยไปมาก จากซ้ายไปขวา เหมือนอย่างรูปด้านล่างใช่ไหมครับ

แล้วถ้าหากผมออกแบบเป็นอย่างนี้แทนล่ะครับ

มันออกจะขัดความรู้สึกไปใช่ไหมครับ แต่นี่ไม่ใช่เป็นการออกแบบที่ผิดพลาดนะครับ เหตุผลคือปกติสมองคนเราจะคาดหวังว่าตัวเลขที่มีค่ามากน่าจะอยู่ทางขวาซิ แต่การทำเช่นนี้เพื่อให้ user หยุดคิดและไตร่ตรองว่า จริงๆ แล้วเขาควรให้คะแนนกับคำถามนั้นเท่าไร แต่ถ้าถามหลายๆ ข้อ ก็จะไม่มีประโยชน์กับข้ออื่นๆ นะครับ เพราะเราเริ่มเรียนรู้นั่นเอง จึงแนะนำว่าให้กลับสเกลเฉพาะแบบสอบถามที่มีน้อยข้อครับ ซึ่งจะได้คำตอบที่ออกมาจากความคิดเห็นของผู้ตอบจริงๆ

สรุปก็คือ การออกแบบแรงเสียดทานเราสามารถทำได้โดย

เพิ่มหน้าจอหรือขั้นตอน เช่น แสดง popup, เพิ่มขั้นตอนในกระบวนการจาก 3 ขั้นตอนเป็น 5 ขั้นตอน
เพิ่มคำอธิบาย เช่น แสดงวิธีการใช้งานโปรแกรมหรือแสดงตัวอย่างผ่าน video หรือ walkthrough
เปลี่ยนวิธีการนำเสนอที่ไม่ปกติแต่ง่ายที่จะเรียนรู้ เช่น เปลี่ยน UI จากที่เคยเป็นสเกลเส้นตรง ก็ลองเปลี่ยนเป็น slide วงกลมดู (เช่นตัวอย่างภาพด้านล่าง)

แต่อย่างที่เราทราบ หากเราเพิ่มแรงเสียดทานในงาน UI มากจนเกินไป จะกลายเป็นสร้างความรำคาญหรือทำให้ user สับสนในการใช้งานได้ เพราะฉะนั้น ต้องเลือกใช้ให้ถูกกาลเทศะนะครับ