UI Pattern

UI เลือกปุ่ม Enter ให้ส่งข้อความหรือขึ้นบรรทัดใหม่

0

featured-text-filed-enter

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

 

text-field-enter-02

ตัวอย่างสถานการณ์ที่ต้องการกด Enter เพื่อขึ้นบรรทัดใหม่ในช่องกรอกข้อความหลายบรรทัด แต่บางทีก็อาจต้องการส่งฟอร์ม

แต่หาก UI สุดท้ายของฟอร์มเป็น “ช่องกรอกข้อมูลได้หลายบรรทัด” (Multiple line text fields) เราจะพบปัญหาว่า การกด Enter ควรจะให้เป็นการขึ้นบรรทัดใหม่ของข้อความดี หรือว่าจะให้เป็นการส่งฟอร์มดีหนอ?

text-field-enter-01

 Facebook จัดฟังก์ชันให้ยูสเซอร์เลือกได้ว่าจะให้ปุ่ม Enter ทำหน้าที่อะไร ตรงบริเวณใกล้ปุ่มส่งข้อความ

Facebook เข้าใจปัญหาในส่วนของฟังก์ชันการส่งข้อความตรงจุดนี้ดี จึงทำการแก้ปัญหาด้วยการให้ยูสเซอร์สามารถเลือกกำหนดได้ว่า จะให้ปุ่ม Enter ทำหน้าที่อะไร (ให้อำนาจการควบคุมแก่ยูสเซอร์)  ตรงบริเวณด้านล่างของ Message box ซึ่งจะมีให้ติ๊กเลือก ‘Press Enter to Send’ นั่นหมายความว่า เมื่อเรากด Enter หลังพิมพ์เสร็จ ข้อความที่เราพิมพ์ในช่องกรอกข้อความก็จะถูกส่งทันที แนะนำให้เลือกไว้ หากเราเป็นคนที่ชอบพิมพ์ตอบเป็นประโยคสั้นๆ ซึ่งก็ค่อนข้างเหมาะกับ app social พอสมควรครับ เพราะโดยสังเกตเราจะพิมพ์ข้อความยาวๆ ก็ตอนที่ส่งเมล หรือพิมพ์งานเท่านั้นนะ ^ ^!

text-field-enter-03

กดปุ่ม Enter เพื่อส่งฟอร์มได้ทุกเมื่อ หากไม่ได้กำลังพิมพ์อยู่ในช่องกรอกข้อความได้หลายบรรทัด

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

google-enter-form-01เมื่อเอาเมาส์ไปวางบนปุ่ม ส่ง ของฟอร์มกรอกรายละเอียดอีเมลของ Gmail  จะมีข้อความบอกใบ้คีย์ลัดในการส่งอีเมลให้เราทราบ

ฟอร์มกรอกรายละเอียดอีเมลของ Gmail อนุญาตให้เราสามารถใช้ปุ่ม shortkey เพื่อส่งฟอร์มได้ด้วยการกด Ctrl+Enter (สำหรับ Windows) หรือ Command + Enter (สำหรับ MAC)

สรุปแล้ว เราต้องดูว่ารายละเอียดฟอร์มของเราเป็นอย่างไร หากมีเฉพาะช่องกรอกข้อความหลายบรรทัด อาจเลือกวิธีแบบ ​​​Facebook (มี checkbox ให้เลือกว่าปุ่ม Enter ทำงานฟังก์ชันใด) หรือ  Gmail (สร้างคีย์ลัดในการส่งฟอร์ม) ก็ใช้การได้ดีทีเดียวครับ

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

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

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 6 – สร้าง Stroke 5 ชั้น ด้วย 1 เลเยอร์

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