UI Pattern

ใส่อีเมล ให้ตรวจทันที

0

featured-email-validationLuke Wroblewski นักวิเคราะห์และนักวิจัยงานออกแบบ UI ชาวรัสเซีย ได้นำเสนอผลการศึกษาว่า การที่เราทำการตรวจสอบรูปแบบข้อมูลอีเมลที่ยูสเซอร์ใส่เข้ามาทันที (email inline validation) จะทำให้สามารถลดจำนวนที่อีเมลส่งไปไม่ถึงผู้รับถึง 50% พูดในอีกแง่หนึ่ง ก็คือเราได้อีเมลลูกค้าเพิ่มขึ้นกว่า 50 % นั่นเองครับ

ผมขออธิบายคำว่า Inline Validation เบื้องต้นให้เข้าใจมากขึ้นนะครับ ในการกรอกฟอร์มตามปกติ เราจะรู้ว่าเรากรอกข้อมูลช่องไหนถูกหรือผิดก็ต่อเมื่อเราต้องกดปุ่ม ‘ส่ง (submit)’ แล้วถึงจะมีข้อความบอกว่าข้อมูลตรงไหนที่ผิด

ส่วนการใช้ Inline Validation คือการบอกให้ยูสเซอร์ทราบโดยทันทีว่า ข้อมูลที่กำลังกรอกอยู่ มันถูกต้องตามชนิดข้อมูลในช่องนั้นหรือไม่ (ด้วยการใช้เทคโนโลยี AJAX) ลองดูตัวอย่างฟอร์มของ Twitter ด้านล่างดูนะครับ

4_inline-validation-twitter

ฟอร์มการสร้างแอคเคาท์ของ Twitter ที่แสดงพร้อมข้อความผลลัพธ์ความถูกต้องของข้อมูลที่แจ้งให้ทราบโดยทันที (inline validation)

จะเห็นว่า เราไม่จำเป็นต้องรอกดปุ่ม Create my account แต่กลับรู้เลยว่าเรากรอกอะไรผิดหรือถูก เช่น ช่องตั้งพาสเวิร์ด, ช่องกรอกชื่อ ระบบก็แจ้งให้เรารู้เลยว่า โอเคแล้วนะจ้ะ

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

1. ตั้งค่าประเภทคีย์บอร์ด

email-validation-03คียบอร์ดสำหรับพิมพ์อีเมลแอดเดส

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

2. แนะนำ Provider

email-validation-05ตัวเลือก (suggest ) หลังจากพิมพ์ @

เมื่อยูสเซอร์เริ่มกรอกอีเมลจนถึง @ เราอาจจะขึ้นแนะนำ email provider เจ้าที่ดังๆ ที่คนส่วนใหญ่ใช้

3. แนะนำสิ่งที่ถูก

email-validation-02ตัวเลือก (suggest) เมื่อพิมพ์ผิด

และแม้จะพิมพ์ผิดไป ก็ยังสามารถแนะนำตัวเลือกที่ควรเป็นได้อีกด้วย

4. แนะนำอีกทีหากสงสัยว่าผิด

email-validation-01ตัวเลือกเมื่อสงสัยว่าผิดเมื่อพิมพ์จบ

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

รูปด้านล่างจะทำให้เราเห็นภาพมากขึ้นว่า ด้วยวิธีการ inline validation จะทำให้เกิดโอกาสที่ยูสเซอร์พิมพ์อีเมลผิดพลาดได้น้อยลงอย่างเห็นได้ชัด และเกิดความรวดเร็วในการกรอกข้อมูลด้วย

email-validation-04ภาพรวมการใช้งาน inline validation กับช่องอีเมล

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

รูป/ที่มา: http://www.cxpartners.co.uk/cxblog/towards-an-easier-way-to-enter-email-addresses/, https://twitter.com/lukew/status/448834876897103872/photo/1

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

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 4 – ก๊อปปี้ Effects ให้ว่อง

Previous article

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 5 – ซูม 100%

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