UI Pattern

UI จับสแปม, CAPTCHA CHA CHA!

0

featured-captcha

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

สแปมพวกนี้มีจุดประสงค์หลักๆ คือ การโฆษณาหรือเพิ่มจำนวนลิงค์อ้างอิงให้กับเว็บตัวเอง หรือเพียงเพื่อความสนุก

จึงเป็นที่มาของ UI CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart – ชื่อเต็มยาวมาววววก -___-!) ซึ่งเป็น UI ที่จะมาช่วยแยกแยะว่าคนที่กำลังกรอกฟอร์มอยู่เป็นมนุษย์หรือคอมพิวเตอร์กันแน่นะ

captcha-01

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

CAPTCHA มีอยู่หลากหลายประเภทเหลือเกิน เรามาดูกันว่ามีอะไรกันบ้าง

1. อาศัยความคุ้นตาของตัวอักษร (Text Recognition)

simple-captcha-01

อย่างที่เราได้รู้จักกันไปแล้ว CAPTCHA แบบนี้ถูกใช้มากที่สุดและเป็นแบบแรกที่ถูกคิดค้นขึ้นมา

scrim-captcha

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

2. คนคุ้นหน้า (Face Recognition)

captcha-02

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

3. ตัวเลื่อน (Slider)

น่าชื่นชมที่ไปรษณีย์ไทยก็มีอะไรใหม่ๆ มาลองเล่นอยู่เหมือนกัน ในหน้าตรวจสอบสถานะการส่งพัสดุที่ปกติเราแค่กรอกรหัสลงทะเบียน 13 หลัก แล้วจากนั้นก็กดปุ่ม หรือ Enter ก็ได้ ก็สามารถเข้าดูได้แล้วว่าพัสดุเราอยู่ที่ไหน

thailandpost-01-600

แต่ UI ใหม่นี้ พอเรากรอกข้อมูลเสร็จแล้ว จำเป็นต้องเลื่อน (เพื่อปลดล็อค) ตัวเลื่อนไปทางขวา จึงจะสามารถเข้าสู่หน้าแสดงสถานะการส่งพัสดุได้ครับ เพื่อป้องกันเจ้าสแปมที่สุ่มตัวเลขแล้วกด Enter ไง

thailandpost-02-600

หากเรากรอกรหัสที่มีอยู่ในระบบ ก็จะมีเครื่องหมายถูกสีเขียวบอก จากนั้นก็ทำการเลื่อนสไลเดอร์เลย ^^

captcha-slider-01

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

4. การจดจำภาพ (Image Recognition)

airplane-captcha-jpgการแปลความหมายจากภาพที่มองเห็นเป็นสิ่งที่ทำได้ยากมากสำหรับคอมพิวเตอร์ (image processing) แต่สำหรับมนุษย์แล้ว เป็นสิ่งที่ใช้เวลาเพียงเสี้ยววินาทีเท่านั้นเอง

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

smb2-googlephoto

Google เค้าก็มีไอเดียวเรื่อง CAPTCHA แบบนี้เหมือนกัน โดยให้เราหมุนภาพให้อยู่ในแนวเดียวกัน แต่กรณีนี้อาจจะง่ายกว่ากรณีด้านบนนะ ผมว่า แต่ยังไงก็ยากอยู่ดีสำหรับคอมพิวเตอร์ ถ้าเจออย่างงี้

Street-captcha

หรือใช้ภาพตัวเลขที่เราพบได้โดยทั่วไปในชีวิตประจำวันมาทำเป็น CAPTCHA ก็ได้ครับ

5. ใช้หมองแต่ไม่ต้องนั่งมาธิ (Logic)

Nt4EB

เป็น CAPTCHA ที่ต้องอาศัยตรรกะการคิดคำนวณง่ายๆ หรือเป็นคำถามง่ายๆ เช่น ตัวอักษรที่ 2 ของ Monday คืออะไร โดยคำถามจะถูกทำเป็นภาพนะครับ เพราะงั้นการใช้โปรแกรมคำนวณหรือตอบอาจไม่ใช่ง่ายๆ

q3EId

แต่ถ้าเล่นตั้งคำถามเกรียนอย่างงี้ ปิดเว็บไปเลยดีกว่าไหมเนี่ย

6. เกม (Games)

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

playthru

อย่าง CAPTCHA นี้ให้เราลากวางอาหารลงบนจาน

media_1364932276971

หรือคั้นน้ำมะนาวดื่มกัน

tic-tac-toe

หรือถึงขั้นต้องเล่นเกม OX ให้ชนะ แบบนี่อาจเสียเวลาไปหน่อยนะเธอร์

CAPTCHA-Game

หรือจะเป็นเกมจับหมูบิน

forms-play-through

เกมจับคู่

dice_cpatcha2

ทอยลูกเต๋าแล้วบวกเลข

7. วีดิโอ / อนิเมชัน (Video / Animation)

nlp-videoCaptcha

CAPTCHA นี้จะให้เราดูคลิปไปสักระยะ จากนั้นก็จะมีข้อความที่เราต้องพิมพ์ปรากฏระหว่างที่เราดูคลิปนี้ แบบว่าโฆษณาหาเงินไปด้วยในช่วงที่รอข้อความขึ้น

nucaptcha-normal-1

หรือจะเป็นข้อความที่เคลื่อนที่ตลอดเวลา ถ้าข้อความยาวมากก็อาจดูไม่ทันได้นะ

8. รหัสใช้ครั้งเดียวและแป้นตัวเลขแบบสุ่ม (One Time Password + Random Keypad)

ในกรณีที่ต้องการความปลอดภัยขั้นสูง เช่น การทำธุรกรรมทางการเงินผ่านอินเตอร์เน็ต อาจต้องมีการมียืนยันตัวตนก่อน ด้วยการร้องขอรหัสผ่านทางมือถือ โดยระบบจะจัดส่งรหัสผ่านแบบใช้ครั้งเดียว (One Time Password – OTP) ผ่านทาง SMS จากนั้นให้เรานำรหัสที่ได้นี้ไปกรอกลงในช่องที่ระบบเตรียมไว้

otp

แต่กรณีของ SCB easy net ป้องกันปัญหาสแปมแบบชั้นที่สองได้อย่างฉลาดมากครับ เพราะพอเรากดที่ช่องใส่รหัส จะมีหน้าต่างแป้นตัวเลขขึ้นมาเพื่อให้เราใช้เมาส์กดใส่ตัวเลขทีละตัวแทนที่การกดจากแป้นคีย์บอร์ดโดยตรง ซึ่งอาจไม่ปลอดภัยหากมีใครเขียนโปรแกรมสุ่มตัวเลขไปเรื่อยๆ เพราะรหัสที่ SCB ใช้นั้น จะมีแต่ตัวเลขเท่านั้น ดังนั้นจึงต้องแก้ปัญหาโดยการรับค่าผ่านทางเมาส์เท่านั้น และด้วยการที่ตำแหน่งตัวเลขบนแป้นพิมพ์จะเปลี่ยนทุกครั้งที่เข้าหน้าทำธุรกรรมใดๆ ทำให้การเขียนโปรแกรมสแปมรหัสผ่านจึงทำได้ยากมาก

แนวทางแก้ไขอื่นๆ

smb2-janrainlogin

หากเราไม่อยากยุ่งยากเรื่องสแปมสมัครสมาชิก อาจลองมองหาบริการอื่นๆ ที่ยอมให้เรานำเอาระบบการลงทะเบียนของเค้ามาใช้ เช่น Google, Facebook, Twitter เป็นต้น โดยจำเป็นต้องศึกษา API (Application Programming Interface) หรือรูปแบบการเขียนโค้ดแบบสำเร็จเพื่อเชื่อมต่อข้อมูลระหว่างกัน

อีกวิธีคือ ถ้าเราไม่อยากไปรบกวนให้ยูสเซอร์ต้องมาคอยพิสูจน์ตัวตน เราสามารถวางกับดักเจ้าสแปม

add-comment-form-hidden

ด้วยการสร้างช่องหลอกที่มีแต่สแปมเท่านั้นที่มองเห็น แต่ผู้ใช้ทั่วไปจะมองไม่เห็น (ซ่อนช่องไว้ด้วยการเขียนโค้ด CSS เช่น display: none เป็นต้น) ทีนี้ถ้าฟอร์มถูกส่งพร้อมกับข้อความที่ถูกกรอกลงในช่องกับดัก ก็จะทราบทันทีว่า ฟอร์มนี้ถูกกรอกโดยโปรแกรมคอมพิวเตอร์นะ ไม่ใช่คนกรอก

ยังมีวิธีการป้องกันสแปมอยู่อีกมากมายหลายวิธีกว่านี้อีกนะครับ แต่หนึ่งในนั้นต้องมี UI ยอดนิยมอย่าง CAPTCHA แน่นอนที่เป็นได้ทั้งรูป, เสียง, หรือแม้แต่ภาพเคลื่อนไหว ช๊ะ ช๊ะ ช่า! นี่แหละครับ CAPTCHA! UI จับสแปม!

ข้อมูล, ภาพ: http://www.smashingmagazine.com/2011/03/04/in-search-of-the-perfect-captcha/

 

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

มอง UI เป็นภาพสะท้อน

Previous article

อย่าทำให้ฉันคิดมากนะจ๊ะเธอ (Don’t Make Me Think) ตอนที่ 3/3

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern