Uncategorizedรีวิวเว็บ

รีวิว app Rush Bike ตอนที่ 3

0

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

ปัญหา #2: การกำหนดจุดรับสินค้ามีขั้นตอนไม่ชัดเจนและไม่ครบถ้วน

rushbike-03

 หน้าจอแสดงขั้นตอนที่ 1 (จาก 3) เพื่อให้ระบุตำแหน่งจุดเริ่มต้น (รับสินค้า) และปลายทาง (ส่งสินค้า)

หลังจากที่เรากดปุ่ม ‘+’ ในหน้าแรก เราจะต้องระบุพิกัดจุดรับ-ส่งสินค้า แต่เนื่องจาก app ออกแบบฟอร์มให้มีทั้งช่องจุดเริ่มต้นและจุดปลายทางเป็นขั้นตอนที่ 1 (ดูตัวหนังสือเล็กๆ ด้านล่างของภาพด้านบน) ซึ่งผมไม่เห็นด้วยครับ เราควรแยกการกำหนดจุดเริ่มต้นและจุดส่งของเป็นคนละขั้นตอน ไม่งั้นพอเรากำหนดจุดรับสินค้า แล้วก็ต้องกลับมาหน้านี้ใหม่เพื่อใส่ที่อยู่ช่องจุดปลายทางอีก เห็นไหมครับ มันขัดต่อ flow การใช้งาน ขั้นตอนมันต้องก้าวหน้าไปเรื่อยๆ ไม่ใช่ ไปกลับๆ

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

วิธีแก้ไข

solution-06

 

UI แก้ไขสำหรับขั้นตอนที่ 1 – กรอกรายละเอียดสินค้า

ขั้นตอนที่ 1

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

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

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

จากนั้นก็กดปุ่ม ‘ยืนยันสินค้าที่จะส่ง’ เพื่อเสร็จสิ้นในขั้นตอนนี้

ขั้นตอนที่ 2

solution-07

UI แก้ไขสำหรับขั้นตอนที่ 2 – กำหนดจุดรับสินค้าพร้อมฟีเจอร์เลือกจุดรับที่เคยสร้างไว้

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

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

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

solution-08

 

หมุดสามารถกดได้เพื่อกรอกรายละเอียดเรื่องที่อยู่

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

solution-09

 

popup ยืนยันตำแหน่ง พร้อมปุ่ม หลังจากแผนที่ถูกซูม

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

ขั้นตอนที่ 3

solution-10

UI แก้ไขสำหรับขั้นตอนที่ 3 ที่สามารถเพิ่มจุดส่งได้มากกว่า 1 ที่ (ไม่แนะนำ)

โดยรวม UI จะคล้ายๆ กับขั้นตอนที่ 2 แต่จะพิเศษกว่าตรงที่มีปุ่มเพิ่มจุดส่งสินค้า ทำให้เราสามารถกำหนดจุดส่งสินค้าได้มากกว่า 1 จุด อันนี้ผมลอกความต้องการตาม app ดั้งเดิมครับ ผมไม่แนะนำ

solution-12

UI แก้ไขสำหรับขั้นตอนที่ 3 ที่สามารถกำหนดจุดส่งได้เพียงที่เดียว

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

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

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

ขั้นตอนที่ 4

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

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

solution-11

 UI เพิ่มเติมสำหรับขั้นตอนที่ 4 – ตรวจสอบรายการ, ระบุวันเวลารับสินค้า, แจ้งยอดชำระ

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

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

หรือถ้าอยากส่งคำสั่งก็กดปุ่ม ‘จัดส่งเลย’ รายการนี้ก็จะไปเข้าระบบของฝั่งเจ้าหน้าที่รับเรื่อง ก็เป็นอันเสร็จพิธีฮี้ฮ้า

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

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

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

ในตอนหน้าซึ่งเป็นตอนสุดท้าย ผมจะมาเก็บปัญหายิบย่อยที่หลงเหลืออีกหน่อย ติดตามอีกนิดนะ ^^

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

จิตวิทยาการรอ กรณีศึกษาจาก Facebook

Previous article

25 ปี Photoshop ขอบคุณนะ

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *