ไปขันอาสาเอาไว้ ช่วงที่ยังมีไฟก็ต้องรีบเขียนก่อนไฟจะมอด

ในบล็อกอันนี้จะ

• วิเคราะห์ส่วนติดต่อผู้ใช้ของ Jibjib รุ่นปัจจุบัน (1.1.0 beta)
• เสนอส่วนติดต่อผู้ใช้ฉบับปรับปรุง

ทั้งหมดเป็น mockup ของผมเอง โดยอิงจาก Jibjib ที่รันบนมือถือ Sony Ericsson K750i

Current UI

เนื่องจากว่า Jibjib เป็นโปรแกรมแบบ menu-based มีปุ่มควบคุมหลักๆ เพียงแค่สองปุ่มคือ soft key ของมือถือ ซึ่งแปรเปลี่ยนไปตามบริบทของโปรแกรม เหมือนกับโปรแกรมอื่นทั่วไป

ก่อนอื่นมาดูโครงสร้างหน้าจอและเมนูของ Jibjib วาดออกมาเป็นแผนภาพได้ดังนี้

Jibjib ประกอบด้วย 5 หน้าจอ

1. หน้าจอหลัก (main) เอาไว้แสดง timeline ของ Twitter
2. หน้าจอเขียนข้อความ (edit) เอาไว้ส่ง tweet
3. หน้าจอ setup
4. หน้าจอ log
5. หน้าจอ about

ซึ่งหน้าจอที่ใช้บ่อยๆ มีสองอันคือ main กับ edit โดย main มีได้หลายโหมด

เมนูที่สำคัญมีสองอัน ตามหน้าจอหลักทั้งสอง

1. เมนูหลัก (main) เอาไว้สลับไปยังหน้าจอต่างๆ ของโปรแกรม
2. เมนูแก้ไขข้อความ (edit)

ความเชื่อมโยงระหว่างหน้าจอและเมนู เป็นไปดังภาพ

สำหรับเมนูหลัก แบ่งได้เป็น 4 หมวด ตามสีที่แสดงไว้ให้

1. Command (สีเหลือง) - คำสั่ง ตอนนี้มีอันเดียวคือ ส่ง Tweet
2. Timeline (สีเขียว) - สลับโหมดไปยัง timeline หรือ messages แบบต่างๆ มี 6 ชนิด
3. Other (สีฟ้า) - สลับไปยังหน้าจออื่นๆ ที่ไม่ใช่ timeline อีก 3 หน้าจอ
4. System (สีแดง) - คำสั่งเกี่ยวกับโปรแกรม มี 2 อันคือ ย่อ (minimize) กับ ออก (exit)

ส่วนเมนูแก้ไขข้อความ แบ่งได้เป็น 2 หมวด

1. ส่วนอำนวยความสะดวกของการเขียนข้อความ (สีแดง) มากับตัวมือถือเลย (ในหน้าจอส่ง SMS ก็เป็นแบบนี้)
2. คำสั่งของโปรแกรม Jibjib เอง (สีฟ้า)

Problems

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

1. ปัญหาหลักของ Jibjib ในขณะนี้อยู่ที่เมนู นั่นคือเมนูยาวเกินไป เมนูหลักมี 12 รายการ ส่วนเมนูแก้ไขข้อความมี 11 รายการ ไล่กันทีเหนื่อย
2. ข้อความบางจุดในโปรแกรม ยังไม่สื่อความหมายเท่าที่ควร
3. หน้าจอ Setup ยาวมาก (ไม่มีภาพประกอบ แต่นับแล้วมี selectable/editable items ทั้งหมด 28 อัน)

Solutions

เสนอสิ่งที่ควรปรับปรุงดังนี้ (ดูภาพประกอบ)

1. จัดเรียงเมนูหลัก (Main menu) ใหม่ โดยยุบรวมเมนู timeline ที่ใช้ไม่ค่อยบ่อยเป็นเมนูย่อย Other timeline ซึ่งจะลดจำนวนรายการในเมนูลงจากเดิม 12 เหลือ 9
2. ถ้าอยากได้มากกว่านั้นอีก สามารถย้ายหน้าจอ Log เข้าไปเป็นส่วนหนึ่งของ About จะทำให้ลดลงเหลือ 8
3. ตัด About menu ออกทั้งหมด เนื่องจากว่าไม่ใช่ฟีเจอร์สำหรับผู้ใช้ทั่วไป และเปลี่ยนปุ่ม More ของหน้าจอ About มาเป็นปุ่มลิงก์ไปยังหน้าจอ Log แทน (ในกรณีที่รวมหน้าจอ)
4. จากข้อ 3. เพิ่มลิงก์ไปยังเว็บไซต์ของโปรแกรม และลิงก์ไปยังไฟล์ stable (เพียงแค่ 2 อัน)​ลงในหน้า About
5. เปลี่ยนข้อความใน Main menu คือ “User timeline” เป็น “My timeline” และ “Favourites เป็น Favourite messages”
6. (ไม่แน่ใจนักว่าสามารถทำอะไรกับเมนู Edit ได้บ้าง) ถ้าทำได้ ตัดลิงก์ Info และ Insert ออก
7. ในหน้าจอหลัก (Main) ซึ่งปกติเป็นหน้าว่าง ควรเพิ่มคำอธิบายสั้นๆ ว่าจะ tweet และอ่าน timeline ได้อย่างไร
8. จัดหน้าจอ Setup ใหม่ โดยแบ่งเป็นหน้าจอย่อย ดูรายละเอียดในส่วนถัดไป
9. อาจถึงเวลาต้องมีโลโก้

หน้าจอ Setup จะแบ่งเป็นหมวดต่างๆ 6 หมวด ดังนี้ (เรียงตามลำดับ)

• Account
  • Username
  • Password
• General settings
  • Number of items in timeline
  • Start screen - ยกของเก่ามาได้เลย
• Gateway - ยกของเก่ามาได้เลย (ควรเปลี่ยนค่า default เป็น Birdnest)
• Capture device - ยกของเก่ามาได้เลย (เปลี่ยนชื่อหมวดเป็น Camera)
• Picture Options - ยกของเก่ามาได้เลย (เปลี่ยนชื่อหมวดเป็น Picture Size)
• Advanced settings
  • Time offset
  • Advances Options เดิม (เปลี่ยน Alternate เป็น DTAC)
  • Hack (ควรพิจารณาเอาออก)