วันอังคารที่ 11 ธันวาคม พ.ศ. 2555

ออกแบบ Pantip บน iPad

หลายสัปดาห์ก่อนมีเพื่อนสมาชิกคนนึงบน https://www.facebook.com/groups/ux.in.th/ ทดลองออกแบบหน้าจอ ipad สำหรับ App Pantip แล้วมา Post ให้คนในกลุ่มช่วยกันออกความคิดเห็นครับ ตอนนั้นเขียนไปค่อนข้างยาว เห็นว่าน่าจะบันทึกเอาไว้ เลยขอทำซ้ำไว้บนนี้อีกชุดนึง
หน้า login
เริ่มจากหน้า Login ครับ หน้านี้ดูแล้วสวยดี เข้าใจง่ายเพราะมีตัว Login ค่อนข้างเด่น ผู้ใช้เข้ามาแล้วรู้ว่าตอนนี้เปิด App อะไรอยู่โดยดูจาก Logo ที่เด่นอยู่ด้านบน ถ้าให้ดีน่าจะมีปุ่ม skip ในกรณีที่เค้าอยากเข้าไปดูก่อนว่าโปรแกรมหน้าตาเป็นอย่างไร ก่อนที่จะสมัครสมาชิก

ชุดปุ่ม "ลืมรหัสผ่าน ขอบัตรผ่าน สมัครสมาชิก" ดูเหมือนออกมาจากตัว (i) ซึ่งจริงๆ ตัว i จะสื่อถืง information แต่ปุ่มทั้งสามเป็น action ไม่ใช่ information ทำให้คนเดาได้ลำบากครับ ถ้าทำเป็นตัวหนังสือที่ไม่เด่นมาก หรือวาดสวยๆ ฝังลงไปกับ background จะดูดีกว่าให้ดูเหมือนออกมาจากตัว (i)

ส่วน (i) อาจจะเอาไว้แสดง information จริงๆ เช่น about us contact us หรือเป้าหมายน่าจะดีกว่าครับ

ปุ่ม On/Off ควรระวังเรื่อง Accessibility ด้วยครับ ในกรณีที่ผู้ใช้กลับขาวเป็นดำ ในกรณีของคนตาบอดสี เค้าจะดูยากว่าเป็น On หรือ Off ลองอ่านเรื่อง accessibility ในนี้ดูครับ
หน้าเลือกห้อง

หน้าเลือกห้อง ผมเดาว่าเป็นหน้าที่ผู้ใช้ Login เข้ามาครั้งแรกจะเจอหน้านี้เลย หน้านี้ดูสวยและเข้าใจง่าย

เท่าที่ดูมี flow แปลกๆ นิดนึงครับ อันแรกคือการเอาปุ่ม Post ไปไว้มุมบนซ้ายสุด ผมมองว่าธรรมชาติของการ Post น่าจะเป็นการเลือกห้องก่อน แล้วค่อยกด Post ดังนั้นการ Post น่าจะอยู่ในส่วนขวามือ ภายในห้องเท่านั้น จะประหยัดทั้งการพัฒนา และทำให้เข้าใจได้ง่ายครับ

ผมเสนอให้เราใช้ Logo ของ Pantip มาแทนปุ่ม Post เพื่อเป็นการตอกย้ำ Brand ครับ

ที่ Tab ด้านซ้ายจะใช้ 3 องค์ประกอบที่ใช้บอกว่าเลือก Tab นี้อยู่

  1. เปลี่ยนสี icon 
  2. เปลี่ยนสี Background 
  3. ทำลูกศรชี้ 

ผมมองว่าใช้ตัวใดตัวหนึ่งก็พอครับ หรือใช้แค่เปลี่ยนสี icon กับเปลี่ยนสี background เล็กน้อยก็น่าจะสวยและง่ายในการแสดงผลตอนที่เข้าไปในห้องแล้วด้วยครับ หรืออีกแบบคือดูว่า Apple ใช้วิธีไหนในการแสดง Active Tab เราก็ใช้วิธีการเดียวกัน เพื่อลดการเรียนรู้ของผู้ใช้

การเลือกห้องผมเชื่อว่าผู้ใช้จะเลือกจากชื่อของห้องมากกว่า icon ครับ ดังนั้นอาจจะทำชื่อให้อ่านง่ายขึ้น เช่นตัวใหญ่ขึ้น ส่วน icon ผมคิดว่าผูัใช้ pantip น่าจะจดจำชุดของห้องไว้ด้วย เช่น ชุด cafe ชุด technical เป็นต้น น่าจะลองจัดเป็นชุดๆ ด้วยสี หรือเส้นดูครับ

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

หน้าแสดงกระทู้ห้องชายคา

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

กลับมาที่ปุ่ม Post ทางซ้ายมือ เมื่อเข้ามาที่หน้านี้แล้วผมจะไม่แน่ใจว่าเมื่อกดแล้วมันจะพาผมออกไปนอกห้องหรือเปล่า และไม่แน่ใจว่ามันทำงานต่างจากปุ่ม [ + ] ทางขวามืออย่างไร

ถัดมาเป็นแผ่น ชายคา อันนี้จะแปลกๆ ว่า "Tab เลือกห้อง" ไม่ถูกเลือกค้างไว้ ทำให้เหมือนว่าผมออกมาแล้ว เหมือนเป็นหน้าลอยๆ ไม่อยู่บน Tab ไหนเลย ซึ่งเป็นพฤติกรรมที่แปลกสำหรับ iOS ครับ จะให้ดีน่าจะให้เลือก "Tab เลือกห้อง" ค้างไว้ แล้วใส่ปุ่ม Back เพื่อกลับไปหน้าเลือกห้อง

Tab "ทั้งหมด แนะนำ และ หมวดหมู่" น่าจะใช้ขนาดมาตรฐานของ iPad ครับ จะช่วยให้ ผู้ใช้รู้สึกคุ้นเคยได้ง่าย และอย่าลืมตรวจเรื่อง Accessibility ด้วยนะครับ (มีคนตาบอดใช้ pantip เยอะอยู่ครับ)

รายการกระทู้ถ้าแอบบอก ชื่อผู้เขียนและเวลาไว้ด้วย น่าจะดีครับ เพราะของเก่ามีตรงนี้อยู่ อาจจะมีรหัสของกระทู้ด้วยก็ดี

ปุ่ม + ทางขวามือ ผมไม่แน่ใจว่าคืออะไร แต่น่าจะทำให้ชัดเจนกว่านี้ครับ ถ้าเป็นการตั้งกระทู้เพิ่ม อาจจะเอาไว้รวมกับรายชื่อกระทู้ครับ แล้วลองเปลี่ยน icon เป็นรูปดินสอคล้ายกับ Twitter น่าจะช่วยให้เรียนรู้น้อยลงครับ หรือจะยั่วให้ตั้งกระทู้ โดยใช้ช่องว่างๆ ไว้เหมือน Facebook ก็น่าสนใจครับ

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

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

ทั้งหมดก็ประมาณนี้ ผมพยายามใส่เฉพาะในส่วนที่เป็นภาพรวม เพราะถ้าลงรายละเอียดน่าจะลงได้หลังจากคุยที่มาที่ไปมากกว่านี้ครับ

ต้องขอบคุณ iwattgetmore มากๆ ครับ การได้คิดแบบนี้สนุกมากเลย และถ้าสมาชิกท่านอื่นๆ ได้ช่วยกันเสนอข้อคิดเห็นในมุมต่างๆ เราคงได้เรียนรู้กันมากมายครับ


ไม่มีความคิดเห็น:

แสดงความคิดเห็น