การออกแบบคีย์บอร์ดรายละเอียดเล็กๆ ที่ UX Designer หลายๆ คนคาดไม่ถึง

จากหัวข้อบทความที่ได้อ่านด้านบท แน่นอนคุณอ่านไม่ผิดหรอกครับ ผมจะมาเขียนอธิบายกว่าการออกแบบคีย์บอร์ดสำหรับการพิมพ์ในแต่ละหน้าจอนั่นสำคัญยังไง เพราะผมเห็นแอพพลิเคชันเมืองไทยเรานี้แหละ หลายตัวเลยไม่ค่อยใส่ใจตรงนี้เท่าไร และผมแนะนำว่าบทความนี้เหมาะกับ Mobile Developer หลายๆ คนด้วยเช่นกัน เพราะคุณเองก็ควรจะมีความรู้เรื่อง UX ไว้บ้างเผื่อแก้ไขงาน หรือคุยกับ Designer หรือ PO หรือใครก็ตามที่เกียวกับข้องกับการออกแบบ Product และ Designer เองก็ควรเก็บรายเอียดเล็กตรงนี้ด้วยเช่นกัน

 

ทำไมจึงต้องเขียนบทความนี้ สาเหตุมาจากไหน

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

 

เราต้องเข้าใจบริบทหรือ User action และ Input ก่อน

เป็นที่แน่นอนว่าคีย์บอร์ดมีไว้กรอกข้อมูล และการกรอกข้อมูลก็มีหลายๆ แบบเช่น กรอกรหัส กรอกตัวเลข กรอกตัวอักษร เป็นต้น ลองดูวอย่าง Layout คีย์บอร์ดบน Android รุ่น Google Nexus 6P ของผมกัน ซึ่งประกอบไปด้วย คีย์บอร์ดแบบกรอกตัวเลข แบบกรอกพาสเวิรด์ แบบกรอกตัวอักษร แบบกรอกตัวอักษรพิเศษและตัวเลข (ลำดับจากซ้ายมาขวา)

 

กรอก OTP ตัวปัญหา เพราะ User ชอบลืมตัวเลข

ก็สาเหตุนี่แหละที่ผมจึงขียนบทความตัวนี้มาเพราะ OTP เลย ซึ่งผมเชื่อว่า OTP ที่ได้จาก SMS เนี่ย ต่อให้มีแค่ 4-6 ตัวก็มีคนลืมต้องสลับแอพหรือเลือน Notification Bar ลงมาดู ก่อนอื่นเรามาดูรูปแบบของ OTP ก่อนมันมีอยู่ 3 แบบคืออักษรล้วน เช่น XVCFGJ ถัดมาคือตัวเลขล้วน เช่น 058732 และสุดท้ายแบบผสมกัน เช่น RN36R และแต่ละแบบคงเห็นแล้วว่าเราควรเลือกใช้ Layout แบบไหน แล้วแอพเจ้าปัญหาตัวไหนถึงขนาดผมต้องเขียนบทความอธิบาย UX ละ มาดูกัน

เริ่มด้วย ผมต้องการกรอกจำนวนเงินกลายเป็น Layout แบบอักษรแทนที่จะเป็นตัวเลขอย่างเดียว (1) จากนั่นกรอกจำนวนเงินเพื่อไปหน้าต่อไปขอรับ OTP (2) พอได้แล้วผมก็ท่องจำว่ามันคือไรจากนั่นกดที่ช่อง input เพื่อใส่เลขกลายเป็น Layout แบบอักษรอีกแล้ว (3) จากนั่นไม่เป็นไรกดเปลี่ยนคีย์บอร์ด (4) พอดีว่าลืมรหัสเลยเลื่อนไปดู Notification เพิ่อทวน OTP อีกรอบ (5) พอกลับมาที่หน้าแอพกลายเป็น Layout อักษรอีกแล้ว (6)  ซึ่งจริงๆ แล้วหลาย Internet Banking มักจะมีปัญหาเรื่อง UX อย่างมาก หลายๆ อย่างผมก็ยังขัดใจมากๆ

 

เรามาดูแอพในต่างประเทศกันว่าเขาทำยังไง

Dropbox – ซึ่งเขาใช้ OTP แบบตัวเลขล้วนดังนั่นเขาจึงเขียนโปรแกรมตั่งค่าคีย์บอร์ดเป็นตัวเลขสะเลย

 

Gmail – OTP ก็เป็นตัวเลขล้วนเหมือนกัน

 

อย่าลืมว่าเลือก Layout ให้เหมาะกับการพิมพ์

Steam – หลายๆ คนอาจจะยังไม่รู้ว่า steam ที่ขายเกมส์ให้เราเล่นมีแแอพด้วย พอดีผมเป็น item saller ของเกมส์ Dota2 กับ CS:GO จึงต้องมีการ Authentication ผ่านแอพด้วย และด้านล่างเขาก็เป็น Layout แบบใส่พาสเวิร์ด

 

ดังนั่น Designer นอกจากจะออกแบบ UI แล้วอย่าลืมดูเรื่อง input และเรื่องคีย์บอร์ดด้วย และ Developer เองก็ต้องมีหัวด้าน UX ด้วยเช่น หรือสรุปง่ายๆ ว่าคนทำงานสายนี้เราควรมีทั่ง Hard Skill และ Soft Skill ด้วยเพื่อสื่อสารหรือช่วยกันสร้าง Product ที่ดีออกมาเช่น ถ้า Developer มีหัวด้าน UX หรือการออกแบบหน้าจอเขาก็จะสามารถบอกได้ว่าการออกแบบที่ Designer ทำมานั้นเขียนโค้ดได้ไหมและผิดหลัก Guideline หรือไหม ควรปรับปรุงตรงไหน และหาก Designer มีความรู้เรื่องเทคนิคอลก็จะสามารถรู้ข้อจำกัดของการออกแบบ UI ว่าคอมพิวเตอร์ไม่ได้สามารถทำได้ดังใจไม่เหมือนกับการออกแบบโปรสเตอร์ที่อยากวางก็วาง เพิ่มเติมสำหรับ Developer ผมลองค้นหาใน Stack Overflow แล้วว่าเราสามารถ Custom keyboard layout เองได้เพราะงั้นต่อไปถ้า Designer ออกแบบมาให้ คุณจะบอกว่าทำไม่ได้ ไม่ได้นะครับ ผมเพราะผมไปค้นมาหมดแล้ว (55+) และหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นส่วนนึงของการช่วยพัฒนาระบบของใครหลายๆ คนหรือคนที่เริ่มหัดออกแบบนะครับ

ฝากทิ้งท้ายไว้หน่อยจริงๆ ผมตั่งใจหาจอ OTP มาให้เยอะกว่านี้แต่พอดี แอพที่ผมมีในเครื่องมัน sync ไว้หมดแล้วพอกด login ใหม่ระบบไม่ถามแล้วเพราะผมตั่งค่า security ไว้ หากใครมีหน้าจอเพิ่มเติม ส่งมาในเพจให้ได้นะผมจะอัพลงบทความครับ
Credit: ขอบคุณ Application แต่ละตัวที่ผมนำมาลงในที่นี้ด้วย

Facebook Comments