UI Pattern ใส่อีเมล ให้ตรวจทันที By uiblogaziner May 27, 20152636 views ShareTweet 0 Luke Wroblewski นักวิเคราะห์และนักวิจัยงานออกแบบ UI ชาวรัสเซีย ได้นำเสนอผลการศึกษาว่า การที่เราทำการตรวจสอบรูปแบบข้อมูลอีเมลที่ยูสเซอร์ใส่เข้ามาทันที (email inline validation) จะทำให้สามารถลดจำนวนที่อีเมลส่งไปไม่ถึงผู้รับถึง 50% พูดในอีกแง่หนึ่ง ก็คือเราได้อีเมลลูกค้าเพิ่มขึ้นกว่า 50 % นั่นเองครับ ผมขออธิบายคำว่า Inline Validation เบื้องต้นให้เข้าใจมากขึ้นนะครับ ในการกรอกฟอร์มตามปกติ เราจะรู้ว่าเรากรอกข้อมูลช่องไหนถูกหรือผิดก็ต่อเมื่อเราต้องกดปุ่ม ‘ส่ง (submit)’ แล้วถึงจะมีข้อความบอกว่าข้อมูลตรงไหนที่ผิด ส่วนการใช้ Inline Validation คือการบอกให้ยูสเซอร์ทราบโดยทันทีว่า ข้อมูลที่กำลังกรอกอยู่ มันถูกต้องตามชนิดข้อมูลในช่องนั้นหรือไม่ (ด้วยการใช้เทคโนโลยี AJAX) ลองดูตัวอย่างฟอร์มของ Twitter ด้านล่างดูนะครับ ฟอร์มการสร้างแอคเคาท์ของ Twitter ที่แสดงพร้อมข้อความผลลัพธ์ความถูกต้องของข้อมูลที่แจ้งให้ทราบโดยทันที (inline validation) จะเห็นว่า เราไม่จำเป็นต้องรอกดปุ่ม Create my account แต่กลับรู้เลยว่าเรากรอกอะไรผิดหรือถูก เช่น ช่องตั้งพาสเวิร์ด, ช่องกรอกชื่อ ระบบก็แจ้งให้เรารู้เลยว่า โอเคแล้วนะจ้ะ และประเด็นในบทความนี้ จะมุ่งไปที่การทำให้ยูสเซอร์กรอกอีเมลได้ถูกต้องให้มากที่สุด โดยเจาะจงไปที่อุปกรณ์ประเภทมือถือ เพราะปุ่มตัวอักษรที่เล็กกว่าทำให้เกิดความผิดพลาดในกรอกได้มากกว่าบนเดสทอปครับ 1. ตั้งค่าประเภทคีย์บอร์ด คียบอร์ดสำหรับพิมพ์อีเมลแอดเดส ก่อนอื่นเลย การตั้งค่าประเภทช่องกรอกข้อมูลให้เป็น input ประเภท อีเมล เป็นสิ่งที่ควรทำอย่างยิ่ง เพราะจะช่วยให้การกรอกอีเมลของยูสเซอร์เกิดความรวดเร็ว ไม่ต้องถูกรบกวนจากสัญลักษณ์อื่นๆ ที่ไม่จำเป็นสำหรับอีเมลแอดเดส 2. แนะนำ Provider ตัวเลือก (suggest ) หลังจากพิมพ์ @ เมื่อยูสเซอร์เริ่มกรอกอีเมลจนถึง @ เราอาจจะขึ้นแนะนำ email provider เจ้าที่ดังๆ ที่คนส่วนใหญ่ใช้ 3. แนะนำสิ่งที่ถูก ตัวเลือก (suggest) เมื่อพิมพ์ผิด และแม้จะพิมพ์ผิดไป ก็ยังสามารถแนะนำตัวเลือกที่ควรเป็นได้อีกด้วย 4. แนะนำอีกทีหากสงสัยว่าผิด ตัวเลือกเมื่อสงสัยว่าผิดเมื่อพิมพ์จบ จนเมื่อพิมพ์เสร็จเรียบร้อยแล้ว ก็ให้ระบบตรวจสอบอีกที หากสงสัยว่าผิด ก็ถามให้แน่ใจอีกครั้งว่า เราไม่ได้พิมพ์ผิดใช่ไหม พร้อมนำเสนอรูปแบบที่น่าจะเป็นไปได้ให้แก่ยูสเซอร์ได้เลือกแก้ไขได้เลย รูปด้านล่างจะทำให้เราเห็นภาพมากขึ้นว่า ด้วยวิธีการ inline validation จะทำให้เกิดโอกาสที่ยูสเซอร์พิมพ์อีเมลผิดพลาดได้น้อยลงอย่างเห็นได้ชัด และเกิดความรวดเร็วในการกรอกข้อมูลด้วย ภาพรวมการใช้งาน 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