Mobile first ตอนที่ 6 Input

Mobile first ตอนที่ 6 Input

Input ในมือถือนั้นมีแนวทางในการใช้ดังนี้

การยอมรับ Input
มือถือรุ่นใหม่พยายามทำให้การใช้ Input ไม่ว่าจะเป็นการสัมผัส, การพิมพ์, การพูด และการแชร์ขึ้นออนไลน์นั้นง่ายขึ้น และด้วยความสามารถใหม่ที่เพิ่มเข้ามาเช่น location, detection, video ฯลฯ ทำให้เรามีทางเลือกใหม่ที่จะใส่ input เพิ่มมากขึ้น

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

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

ส่วนของคำตอบ
          แบ่งออกเป็น 3 แบบดังนี้

  • แบบมาตรฐาน เป็น Input พื้นฐานที่ใช้ใน website ได้แก่ checkbox, radio, password, select, file pick, submit buttons และ plain text
  • แบบนอกเหนือจากมาตรฐาน เป็นข้อยกเว้นสำหรับมือถือสำหรับแบบมาตรฐานเนื่องจากมีการแสดงผลที่ต่างไปในแต่ละรุ่นมือถือ จึงควรจะใช้ให้เข้ากับข้อมูล, เหมาะสมกับหน้าจอและการแสดงผล
  • แบบมาตรฐานใหม่ เป็น Input ที่มีเพิ่มใน html5 ที่เข้ามาช่วยให้การใส่ Input นั้นถูกต้องตามรูปแบบที่กำหนดไว้ (สามารถดู Input type ใหม่ได้ที่ : http://www.w3schools.com/html/html5_form_input_types.asp) type ของ input นั้นจะบังคับ keyboard ให้สามารถใส่ค่าที่ต้องการได้เท่านั้น (จะเห็นได้ชัดจาก keyboard IOS ดูตัวอย่างได้ที่ : http://mobileinputtypes.com/ ) นอกจากนี้ใน IOS จะปิด auto capitalize และ auto correct เมื่อ Input type email, password, URL และกรณีจำเป็นอื่นๆ แต่ในส่วนของ Input type ใหม่นี้จะมีบาง browser ที่ไมได้ support อยู่ด้วย

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

การจัดวางคำถาม
มีหลัก 3 ส่วนที่ควรพิจารณา ได้แก่

  • ลำดับของคำถามที่เกี่ยวข้องกัน ควรจะมีการรวมกลุ่มคำถามที่เกี่ยวข้องกันแล้วตัดคำถามที่ไม่จำเป็นหรือเลือกเฉพาะคำถามที่ต้องการคำตอบเพื่อให้ได้หน้าที่สั้นลง
  • การจัดการกับคำตอบแนวตั้ง อาจจะซ่อนคำตอบบางส่วนเอาไว้เพื่อให้สามารถอ่านคำถามได้อย่างต่อเนื่อง
  • Input  ที่ตอบสนองทันที มีบางกรณีที่ใส่ input แล้วแสดงผลในทันทีซึ่งส่วนที่ใส่เข้ามาใหม่เหล่านั้นจะต้องปรับให้เหมาะสมกับ layout มือถือ

เมื่อออกการจัดวางคำถามจะต้องคำนึงถึง keyboard ในมือถือด้วย ควรจะให้ผู้ใช้เห็นคำถามและคำตอบเมื่อ keyboard ในมือถือแสดงขึ้นมา

ส่วนที่นอกเหนือกจาก input
          Input ไม่ใช่เป็นเพียงการพิมพ์ข้อมูล และส่วนมากสามารถให้ผู้ใช้มีส่วนโดยไม่รู้ตัวและนอกจากนี้ยังมีเทคโนโลยี Google Goggles ค้นหาจากรูปภาพ (เหมาะกับสิ่งที่อธิบายด้วยคำพูดได้ยาก), เทคโนโลยีไร้สายระยะสั้น NFC ระบบสื่อสารระยะสั้นที่สามารถทำให้มือถือใช้ digital barcodes ได้ และเทคโนโลยีอื่นๆ ที่เราควรจะศึกษาเพื่อให้ได้ Input แบบใหม่ๆ เพิ่มขึ้น

Leave a Reply