Login form กำแพงแรกที่ผู้ใช้ต้องผ่าน

Hanii
20Scoops CNX
Published in
3 min readMay 9, 2016

--

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

สิ่งที่ผมกำลังจะพูดถึงนั้นเป็นเพียงแค่ User Experience (UX) เบื้องต้นเท่านั้น จุดประสงค์มีสามอย่างคือ Get to the point (ไปยังจุดที่เราต้องการนำเสนอให้เร็วที่สุด), 3Minutes (ความอดทนของคนมีไม่เกิน 3 นาที) และ 3 click (ให้กดแค่ 3 ครั้งเพื่อสามารถใช้ระบบได้เลย) โดยสามจุดประสงค์นี้จะมีอยู่ในบทความ Login form ที่กำลังจะพูดถึง เพื่อให้ผู้ใช้เข้าใช้งานได้สะดวกที่สุด

Login Form

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

ระวังเรื่องการใช้คำ

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

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

image credit: https://colorlib.com

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

การใช้สีอย่างมีประสิทธิภาพจะต้องเข้าใจถึงผลกระทบทางจิตวิทยาที่ว่าสีสามารถเข้ามาเป็นส่วนหนึ่งในชีวิตเราในด้านจิตใจและการตัดสินใจ โดย ศาสตราจารย์ศรียา นิยมธรรม

ล็อกอินด้วย Social Network

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

image credit: https://colorlib.com

การล็อกอินด้วย Social network จะทำให้ผู้ใช้งานสามารถล็อกอินได้ภายใน 1 Click แทนที่จะต้องมานั่งกรอกฟอร์มหนึ่งนาที Social Network ที่แนะนำคือ Facebook, Google+ และ Twitter เพราะเป็น Social ใหญ่ที่มีผู้ใช้จำนวนมาก ซึ่งมั่นใจได้ว่าผู้ใช้งานต้องมี Account อย่างใดอย่างหนึ่งแน่นอน เพื่อความสะดวกในการใช้งานโดยที่ผู้ใช้งานไม่จำเป็นต้องสร้าง account ใหม่

image credit: https://colorlib.com

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

image credit: https://colorlib.com

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

การซ่อน Password

“ เคยกันหรือเปล่า พิมพ์พาสเวิร์ดเสร็จ กดยืนยัน มีแจ้งเตือนว่าพาสเวิร์ดผิด แล้วเราก็อุทานในใจว่า ผิดตรงไหนหว่า ”

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

image credit: https://colorlib.com

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

Username ซ้ำ?

“ การออกแบบระบบ Username suggestions นั้นคิดว่าจะทำให้ผู้ใช้งาน Login ง่ายขึ้นนั้นเป็นความคิดที่ผิด ”

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

image credit: https://colorlib.com

ยกตัวอย่างเช่น ผมใส่ชื่อว่า Superman ซ้ำ ระบบแจ้งว่าคุณต้องการจะใช้ชื่อ Supermaann,Superm,Supermannm13 หรือเปล่า ถ้าเกิดผมเลือกชื่อใดชื่อหนึ่ง
ครั้งต่อไปที่ผมทำการล็อกอินก็คงสมัครไอดีใหม่ เพราะผมจำอันเก่าไม่ได้แน่นอน :]

image credit: facebook.com

วิธีแก้ปัญหาเรื่องนี้คือ เราควรจะเพิ่มช่องทางการใส่ Username ในรูปแบบอื่นลงไป เช่น Phone number, Email, Username ให้เขาเลือกช่องทางใดช่องทางหนึ่ง เพื่อง่ายต่อการจดจำของผู้ใช้งาน

Input number ทำอย่างไรให้ง่าย

ในส่วนนี้ผมจะขอเอาบทความที่ Sansern Wuttirat เคยทำไว้เกี่ยวกับ Form input ในรูปแบบต่างๆ มาอ้างอิงครับ

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

Reset buttons วายร้ายที่แท้จริง
การที่ผู้ใช้งานมานั่งกรอกข้อมูลนั้นถือว่าผู้ใช้ได้ยินยอมกับการที่จะใช้งานกับสิ่งที่เราต้องการนำเสนอแล้ว แต่ทว่าผู้ใช้งานบังเอิญไปกดปุ่ม Reset ละก็ ผู้ใช้งานจะรู้สึกว่าเขาเสียเวลาทั้งหมดในการใส่ข้อมูลไปฟรีๆ อาจจะทำให้ผู้ใช้หงุดหงิดและเลิกใช้งานไปเลยก็เป็นได้

สรุปปิดท้าย

ถ้า Login form ของคุณนั้น ไม่ทำให้ผู้ใช้เกิดความสับสน รู้สึกไม่ติดขัดกับการกรอกข้อมูลเพื่อใช้งาน ยิ่งเข้าไปใช้งานได้รวดเร็วเท่าไร (Get to the point) เขาจะได้ใช้ฟังก์ชั่นที่คุณต้องการสื่อสารได้เร็วเท่านั้น จะเกิดข้อดีทั้งสองฝ่าย ทั้งผู้พัฒนา และ ผู้ใช้ครับ

--

--