Design Exciteรีวิวเว็บ

Redesign app Call Zen

0

featured-redesign-callzen-01

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

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

หลังจากตกลงเรื่องบริการและค่าจ้างแล้ว ผมจึงเริ่มทำการ redesign ตัว app ทั้งหมด เริ่มตั้งแต่ logo, theme, UI, user flow จนกลายมาเป็นเวอร์ชันที่พร้อมให้ดาวน์โหลดแล้วในปัจจุบัน แต่บางหน้าอาจยังไม่ได้ปรับแต่งเก็บรายละเอียด อันนี้ต้องรอทางทีมงานว่างจัดการล่ะ

app CallZen มีให้เลือกใช้งานทั้ง iOS และ Android เลย ผมได้เห็นเบื้องหลังพบว่าเป็น developer คนเดียวกัน ทำทั้งสอง device เลยครับ โหว! เมพมาก

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

redesign-callzen-01

หน้าจอ Welcome ของ app Call Zen

เริ่มต้นที่หน้าแรก เนื่องจากทางทีมพัฒนามีวิสัยทัศน์ที่ต่อไปอยากให้ app สามารถรองรับได้หลายภาษาจึงต้องมีส่วนที่ให้ยูสเซอร์เลือกภาษาที่ต้องการก่อนการเข้าใช้งาน สีที่เลือกใช้ทางทีมกำชับว่าไม่อยากให้ซ้ำกับบริษัทโทรคมนาคม หรือบริษัทใหญ่ๆ เพราะจะเป็นการโอนเอียง ผมจึงลองดูสีใน material design ของ google ว่าพอมีสีไหนใช้ได้ไหม ก็พบว่าสี Indigo กับ สี Deep Orange ดูท่าทางเข้ากับเงื่อนไขของทางลูกค้า พอให้ลูกค้าลองเลือกก็สรุปผลว่าเป็นสี deep orange เพราะทางทีมอยากให้อารมณ์ของยูสเซอร์ที่มีต่อ app ในเชิงประมาณว่า app นี้มีความรวดเร็ว เหมาะกับคนที่เร่งรีบ เพราะไม่อยากเสียเวลาไปกับการรอสาย

variation-01

 งานออกแบบโลโก้ที่นำเสนอ

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

redesign-callzen-02

 หน้าหลักของ app Call Zen

ในส่วนหน้าหลัก ถือว่าเป็นส่วนที่สำคัญของ app เลยครับ เพราะต้องทำให้ดูดีน่าใช้งานและง่ายด้วย ในงานออกแบบสมัยใหม่มักจะมีการนำรูปภาพเข้ามาเป็นส่วนประกอบกับ UI (หาโหลดรูปได้ฟรีจากบทความ รวมลิงค์โหลดรูปใหญ่คุณภาพสูง) ผมเลยมีแนวคิดที่นำเอารูปภาพมาช่วยในการเสริมความสวยงามให้กับแต่ละหมวดหมู่แทนที่จะเป็นแค่ตัวหนังสือสีดำธรรมดา และวิธีการที่ทำให้แน่ใจว่าตัวหนังสือ (สีขาว) จะสามารถอ่านได้ชัดเจนบนรูปภาพ ผมเลือกใช้การไล่สี gradient จากดำเป็น transparent ทางด้านบนของรูป แต่ละหมวดหมู่จะแสดงผล UI ที่เป็น accordion ครับ

ส่วนบริษัทในหมวดหมู่นั้น ผมก็มีการใช้ชื่อบริษัทที่เป็นภาษาไทยด้านบน และภาษาอังกฤษด้านล่าง เพราะบางทีแม้เราเลือกภาษาไทย แต่บางบริษัทเรากลับคุ้นเคยกับชื่อบริษัทที่เป็นภาษาอังกฤษซะมากกว่า เช่น TOT, AIS เป็นต้น

ปุ่ม search ผมก็ย้ายไปอยู่ฝั่งขวา ซึ่งเป็นตำแหน่งที่ถูกต้องตามหลักการออกแบบ app สำหรับ iOS ฝั่งซ้ายมักจะเป็นพื้นที่สำหรับปุ่มย้อนกลับ หรือไม่ก็เมนู drawer ครับ

สไตล์ของปุ่ม tab ก็เลียนแบบตามสมัยนิยม โดยเลือกใช้ line icon ที่ผ่านการทดลองมาแล้วว่าเป็นสไตล์ที่สมองมนุษย์รับรู้และเข้าใจได้ดีกว่า solid icon

เรื่องฟอนต์ผมใช้ของฟรีครับ ’’Quark” มีให้เลือกใช้สองน้ำหนัก สไตล์ลายเส้นก็ดูดีเลยครับ แต่ถ้ามีกะตังค์หน่อย อยากใช้ Helvethaica เหมือนกันนะครับ

redesign-callzen-03

 เมนูหลักที่สามารถแก้ไขปรับเปลี่ยนได้ตามธีมบริษัท

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

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

redesign-callzen-04

 วิธีการออกแบบ UI ที่เป็น List View

สำหรับ design เก่า บางหัวข้อเมนูถ้าเป็นสุดทางของหัวข้อแล้ว เช่น ’Home For cash delivery’ ที่มีไอคอนโทรศัพท์อยู่ทางด้านขวา นั่นหมายถึงว่า เป็น action ของเมนูนั้น พอยูสเซอร์กดแล้ว ก็จะขึ้นหน้าให้ยูสเซอร์โทรหาเจ้าหน้าที่เลย แล้วถ้าเรามองดูระหว่างช่องค้นหากับรายการเมนู จะเห็น breadcrumb ซึ่งเป็น UI ที่เราไม่ใช้กันใน app นะครับ แล้วถ้าเราคลิกที่ไอคอนหมูจะเป็นการ save-to-favorite สำหรับรายการนั้นครับ ซึ่งยูสเซอร์ไม่รู้แน่ๆ เลย

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

redesign-callzen-05

 แนวความคิดการวางปุ่ม call-to-action และ action อื่นๆ ไว้ภายในหน้าเดียวให้หมด

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

redesign-callzen-06

 การทำสไตล์ให้เหมือนกันตลอดทุกหน้าของ app, (ซ้าย)  แท็บ favorite /  (ขวา)  แท็บการตั้งค่า

จากนั้นอ้างอิงสไตล์การออกแบบตาม user flow หลัก โดยแท็บอื่นๆ ผมก็ออกแบบออกมาในสไตล์เดียวกันครับ ซึ่งบางทีกลับเป็นเรื่องยากนะครับ ในการพยายามรักษาความกลมเกลียวกัน (consistency) ให้มันเหมือนกันทั้งเว็บ/ app

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

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

มันตื่นเต้นๆ ดีครับ ^^

 

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

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 3 – จัดระเบียบ Layer

Previous article

ทำไมไอคอนแบบเส้นถึงดูเข้าใจง่าย?

Next article

You may also like

Comments

Leave a reply

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