หน้าจอ Edit มักเป็นหน้าที่ถูกลืมตอนที่ออกแบบ User Interface เพราะมักเป็นหน้าจอที่ไม่สร้างคุณค่าให้กับโปรแกรม เราจึงใช้เวลาส่วนมากในการออกแบบส่วนที่สร้างคุณค่าและทิ้งหน้าจอ Edit ให้โปรแกรมเมอร์คิดเอาเอง โดยคาดหวังว่าโปรแกรมเมอร์ทำตามโปรแกรมอื่นๆ หรือทำตามที่ Guideline บอกไว้
สำหรับบน iPhone คนออกแบบ User Interface อาจจะพอคิดแบบนั้นได้ เพราะมันมีรูปแบบที่เป็นที่นิยมของหน้า Edit อยู่
Apple Guideline
ในรูปด้านบนเป็นโครงสร้างหน้าจอ Edit ที่นิยมบน iPhone เราจะเห็น Title ที่อยู่ตรงกลางเพื่อบอกว่าหน้านี้คืออะไร และมีปุ่ม Cancel Done อยู่ด้านซ้ายและขวา ส่วนปุ่ม Delete จะอยู่ล่างสุด หากหน้าจอ Edit ยาวกว่าหนึ่งหน้าจอ ปุ่ม Edit จะถูกดันจนมองไม่เห็นในหน้าแรก
สำหรับ App บน iPhone เรายังพอจะบอกให้ Programmer ทำตามที่เค้านิยมกันได้ครับ แต่สำหรับบน Android เราต้องบอกให้ชัดเจนมากขึ้น เพราะยังไม่มีรูปแบบที่มาตรฐานหรือเป็นที่นิยมจริงๆ
Android Ice Scream Sandwich (Edit contact)
บน Android Ice Scream Sandwich รูปแบบข้างต้นน่าจะเป็นรูปแบบที่เป็นมาตรฐานต่อไปในอนาคต โดยปุ่ม Done อยู่ทางมุมบนขวา ส่วน Delete และ Discard จะขึ้นมาเมื่อกดปุ่ม Menu (ปุ่มที่เรียงเป็นแนวตั้งสามปุ่ม) หรือถ้าผู้ใช้กด System Back ก็จะได้ผลเหมือน Done
รูปแบบนี้จะอันตรายต่อผู้ใช้มือใหม่ เพราะปุ่ม Discard ไม่ได้แสดงให้เห็นบนหน้าจอตั้งแต่ครั้งแรก อาจจะทำให้ผู้ใช้หลายคนคิดว่าปุ่ม System Back จะมีค่าเท่ากับ Discard ได้ครับ แต่ก็มีข้อดีที่ความเรียบร้อย เพราะมีปุ่ม Done บนหน้าจอเพียงปุ่มเดียว
Android Gingerbread (Edit contact)
อีกรูปแบบนึงจะมีปุ่ม Cancel และ Save ติดอยู่ด้านล่าง อันนี้เป็นหน้าจอ Edit สมัย Android Gingerbread ซึ่งผู้ใช้ที่ยังเป็นรุ่นนี้อยู่จะเคยชินกับปุ่มแบบนี้ ถ้าให้ดีเราควรตรวจสอบว่าผู้ใช้ นั้นใช้ระบบอะไรอยู่และแสดงหน้าจอ Edit ในแบบที่เค้าคุ้นเคยครับ อาจจะเป็นงานหนักแต่ถ้าใครใส่ใจต่อ User Experience ของคนที่ใช้ระบบเก่า ก็ควรทำครับ
Android Tasks (Edit task)
แบบสุดท้ายเป็นตัวอย่างของโปรแกรม Tasks บน Android โปรแกรมนี้สร้างรูปแบบของหน้า Edit ขึ้นมาเอง แม้ว่าจะทำตาม Guideline ของ Android แต่ก็ไม่เหมือนหน้า Edit ของโปรแกรมที่ Google ทำขึ้นมา
ในหน้าจอนี้ผู้ใช้สามารถบอกให้โปรแกรม Save ได้สามที่ จุดที่แรกคือกดเครื่องหมาย < มุมบนซ้าย ข้างๆ โลโก้ จุดที่สองคือเครื่องหมายถูกที่มุมบนขวา จุดที่สามคือกดที่ปุ่ม system back
ถ้าผู้ใช้ต้องการลบ ให้กดที่รูปถังขยะข้างๆ เครื่องหมายกากบาท และถ้าต้องการยกเลิกการแก้ไขให้กดที่เครื่องหมายกากบาทครับ
หน้าจอนี้แก้ปัญหาที่ delete และ discard ถูกซ่อนเอาไว้ได้ แต่ก็มีปัญหาตามมาคือปุ่มทั้งสามอันอยู่เรียงชิดติดกันทำให้กดผิดได้ง่าย และเครื่องหมายกากบาทอาจจะไม่สื่อว่าเป็นการลบ หรือการยกเลิก
สำหรับใครก็ตามที่กำลังออกแบบ User Interface อย่าลืมวาดหน้า Edit ให้ Programmer ด้วยนะครับ
อ่านเพิ่มเติมได้ที่ androiduipatterns.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น