รีวิวเว็บ

รีวิวเว็บ Zalora

0

ผมชอบที่จะรีวิวเว็บประเภท e-commerce ด้วยเหตุที่เว็บในหมวดนี้มักมีลูกเล่นหรือ interface ที่ได้นำแนวคิดและทฤษฎีมากมายเพื่อมาทำให้เว็บบรรลุวัตถุประสงค์สูงสุด ซึ่งก็คือการทำให้ผู้ใช้ส่งคำสั่งซื้อสินค้าหรือบริการ

เว็บ Zalora ก็เป็นเว็บ e-commerce แบรนด์ต่างชาติอีกเช่นเคยที่เน้นขายสินค้าประเภทแฟชั่น เสื้อผ้า รองเท้า กระเป๋า มาดู interface หน้าแรกกันเลยครับ

front-page-01-600

หน้าแรกของเว็บ Zalora น่าสนใจที่ตรง ‘การเลือกดูสินค้าตามเพศ’ เพราะเป็นสินค้าแฟชั่นทั้งชายและหญิง ดังนั้นหน้านี้จึงเน้น call-to-action ที่ให้เราเลือกเพศเป็นอันดับแรกก่อนเลย ดีกว่าที่จะแสดงสินค้าแบบผสมปนๆ กันไป

ด้านบนของภาพดึงสายตา (hero image) จะเป็นฟีเจอร์ที่ทางเว็บต้องการทำให้ลูกค้าเชื่อใจในบริการ ซึ่งได้แก่เรื่อง

  1. คืนสินค้าภายใน 30 วัน
  2. การจัดส่งฟรีเมื่อซื้อครบ 490 บ.
  3. จ่ายเงินเมื่อได้รับของ
  4. เบอร์ call center

ทั้ง 4 ข้อนี้เป็นเหมือนหัวใจหลักของธุรกิจ e-commerce ในเมืองไทยก็ว่าได้ครับ และจะมีไม่กี่บริษัทที่สามารถกล้ารับรองและให้บริการได้เช่นนี้ (เว็บผมเองยังทำไม่ได้ครบเลยครับ) ผมย้ำว่าในเมืองไทยนะครับ เพราะถ้าเป็นที่อื่นที่มีความปลอดภัยในการชำระเงินผ่านอินเตอร์เน็ตสูง เรื่องการจ่ายเงินตอนรับของอาจไม่จำเป็นก็ได้

เรื่องดีๆ เช่นนี้ อย่าเอาไปแสดงที่ด้านล่างของเว็บนะครับ เสียของเปล่าๆ เอามาโชว์ร่าให้เห็นอย่างนี่้แหละครับ แนะนำๆ

ส่วนทางด้านมุมซ้ายล่างจะเป็นการโปรโมตลูกค้าให้ลองซื้อสินค้ากับ Zalora ดู ด้วยการให้เงิน 250 บ. ฟรีๆ แต่หารู้ไม่ว่าบริษัทได้อะไรมากกว่านี้เยอะครับ แรกสุดก็คือ อีเมลของเราไง เอาไปทำ e-mail marketing ที่จะคอยส่งอีเมลรายการสินค้ายั่วกิเลสเราทุกวันๆ ใครจะทนไหว

front-page-02-600

ถ้าเราเลือนหน้าลงมา ก็จะพบ interface ‘sticky header’ เหมือนลูกพี่ลูกน้องอย่าง Lazada ใช้เลย

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

product-list-02-600

  1. แบนเนอร์ที่โฆษณาควรมีปุ่มปิด เพื่อขยับเอาพื้นที่แสดงรายการสินค้าขึ้นมา
  2. รูปแสดงประเภทสินค้าดูใหญ๋เกินไปและไม่จำเป็น เพราะรูปรายการสินค้าก็เป็นเสมือนตัวอย่างสินค้าให้แล้ว
  3. breadcrumb มาอยู่เกือบครึ่งหน้าจอ (สำหรับจอโน้ตบุ๊ค) และต่ำแหน่งนี้ก็ไม่ได้เป็นที่ที่เว็บทั่วไปใช้กัน ควรจะไปวางไว้บริเวณด้านบนข้างล่างส่วนที่แสดง “รับสินค้าคืน…จัดส่งฟรี…” จะดีกว่า (ดูเรื่อง ความทรงจำและความลืมเลือนตอนที่ 2 ประกอบ)
  4. popup รับคูปองมันไปบังส่วนแสดงผลแถบหมวดหมู่สินค้าและเครื่องมือฟิลเตอร์ ควรจะอนุญาตให้ยูสเซอร์สามารถปิดหน้าต่างนี้ได้ ไม่ใช่แค่ย่อ

product-mouse-over-600

 

พอเราเอาเมาส์ไปวางไว้บนสินค้าก็จะมีข้อมูลเรื่องไซส์เพิ่มเติมอยู่ด้านล่าง

filter-out-02

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

filter-out-01-600

ผมลองใช้ filter เลือกดูสินค้าราคา 1,500 – 2,000 และเอาสีเหลือง ผลลัพธ์ก็น่าพอใจ แต่คราวนี้ผมอยากจะเอา filter ออกนี่ซิ ต้องมานั่งเอาออกทีละตัว คงจะดีไม่น้อยถ้ามีปุ่มที่ให้เคลียร์ filter ออกทั้งหมดในคราวเดียวใช่ไหมครับ

product-page-01-600

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

zoom-view-600

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

delivery-not-work

แต่มีตรงหนึ่งที่อยากติหน่อยก็คือ ปุ่มที่อยู่ตรงบรรทัด deliver above 490 THB พอกดแล้วไม่มีอะไรเกิดขึ้น ส่วนปุ่ม 2 อันล่าง พอกดแล้วหน้าจะเลื่อนลงไปเปิด tab ด้านล่างที่มีข้อมูลหัวข้อนั้นอยู่ให้เราเลยครับ ยูสเซอร์คาดหวังเสมอว่า กดปุ่มต้องมี action หรือ อะไรตอบสนองนะครับ อย่าเงียบ เดี๋ยวยูสเซอร์งอน

not-select-size

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

cart-check-out-left

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

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

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

แต่กรณีของ e-commerce เราไม่มี counter เช่นนั้นครับ เราไม่จำเป็นต้องรอ เราต้องการอะไรที่รวดเร็ว กดปุ๊ปได้ปั๊ป อย่างไรก็ตาม มันเป็นไปได้ที่จะนำเสนอสินค้าอย่างอื่น แต่เราต้องสร้างความอยากให้กับยูสเซอร์แบบที่ผมได้อธิบายไปแล้ว เช่น อาจจะบอกว่า ‘ซื้อสินค้าชิ้นนี้เพิ่ม จะได้รับส่วนลดรวมเป็น 20%’ เป็นต้น

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

login-on-check-out-600

จากนั้นก็เตรียมตัวเสียตังค์ เราก็ต้องบอกว่าเราเป็นลูกค้าเก่า (มี account)หรือใหม่ กรณีนี้ผมเลือกเป็น ‘ลูกค้าใหม่’ ของ Zalora

payment-form-600จากนั้นระบบก็จะนำเรามาสู่หน้า payment form ผมจะแสดงรูปให้เห็นในมุมมองกว้างก่อน Zalora เลือกใช้ฟอร์มแบบให้กรอกข้อมูลภายในหน้าเดียว แทนที่จะแบ่งออกเป็นขั้นตอนๆ แต่ก็แบ่งส่วนข้อมูลออกได้ชัดเจนดีครับว่า คอลัมน์แรกเป็นที่อยู่จัดส่ง สองเป็นวิธีจ่ายเงิน สามเป็นใบเสร็จ

visa-on-the-flyหากผมเลือกวิธีจ่ายเงินเป็นบัตรเครดิต และเลือกให้ระบบจำข้อมูลบัตร ครั้งหน้าก็ไม่จำเป็นต้องกรอกข้อมูลตรงส่วนนี้ซ้ำ แต่เราก็ต้องไว้ใจเว็บที่ให้บริการฟังก์ชันนี้ด้วยว่า เค้าจะไม่แอบเอาข้อมูลนี้ไปใช้หรือถูกแฮกได้ ดังนั้นก็ระวังๆ หน่อยนะครับ (・ω・)/

payment-safe

อย่าง Zalora ก็มีการเลือกใช้บริการและหยิบยืมแบรนด์ความน่าเชื่อถือจากผู้ให้บริการความปลอดภัยด้านธุรกรรมบน Internet เพื่อให้ลูกค้าเกิดความอุ่นใจในการเลือกใช้ฟังก์ชันด้านบน หรือมีการจ่ายเงินผ่านเครือข่าย internet

click-area-600

แล้วก็อีกอย่าง ไม่รู้ว่าเป็นความตั้งใจหรือบังเอิญ Zalora ทำให้พื้นที่ในการคลิกเลือก radio button และ checkout รวมเอาตัวหนังสือเข้าไปด้วย ทำให้ยูสเซอร์คลิกเลือกได้ง่ายขึ้นครับ

track-order-01

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

ทั้งหมดนี้คือการสร้างให้ยูสเซอร์เกิดความมั่นใจและเชื่อถือในการคลิกเลือกจ่ายตังค์ให้กับ Zalora ครับ และมันก็คือ หัวใจหลักของทำธุรกิจทุกๆ อย่างเช่นกันครับ ที่จะทำให้ลูกค้ายอมควักตังค์ออกจากกระเป๋านั่นเอง( ̄▽+ ̄*)

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

ใส่ความมนให้ความเหลี่ยมด้วยสคริปต์

Previous article

อย่าทำให้ฉันคิดมากนะจ๊ะเธอ (Don’t Make Me Think) ตอนที่ 1/3

Next article

You may also like

Comments

Leave a reply

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