รีวิวเว็บเรื่องเด๊นเด่น

รีวิวเว็บ Gogoprint (เว็บโรงพิมพ์ออนไลน์)

0

featuring-gogoprint

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

 

ralamusic-namecard

นามบัตรที่จะสั่งพิมพ์ในการทดลองใช้งานเว็บไซต์ Gogoprint

เนื่องจากว่าพึ่งเปิดเว็บร้านดนตรีใหม่ ผมจึงคิดว่าจะพิมพ์นามบัตรของร้าน (ชื่อ Rala Music ช่วยๆ กันอุดหนุนกันนะครับ ^0^)  ช่างโชคดีเหลือเกิน วันหนึ่งผมได้รับเมลจากทีมงาน Gogoprint เพื่อให้ผมลองรีวิวเว็บนี้ดู โดยให้คูปอง 1,000 บ. ในการทดลองใช้บริการของบริษัทรีวิวครั้งนี้จึงเป็นการใช้งานจริงๆ ในฐานะยูสเซอร์คนหนึ่ง (User On Board) ที่ไม่มีการเสแสร้งแต่อย่างใด ก็คอมเมนต์และแนะนำกันตรงๆ ตามหลักการออกแบบ UI ที่ดี เพื่อการพัฒนาและเป็นประโยชน์ต่อยูสเซอร์และบริษัทด้วย

 

ทำความรู้จักเว็บ Gogoprint

index-01

หน้าแรกเว็บ Gogoprint.co.th

เว็บ Gogoprint.co.th เป็นเว็บโรงพิมพ์ออนไลน์ที่คิดว่าน่าสนใจมากๆ เลยครับ คอนเซ็ปต์ของเว็บเลือกใช้สี CYMK ซึ่งเป็นแม่สีของธุรกิจการพิมพ์ มีบริการส่งฟรี สามารถประมาณการได้ว่าเราจะได้รับสินค้าวันไหนได้ด้วยล่ะ

 

navigation-menu

เมนูของเว็บ Gogoprint

Navigation เมนูก็ทำออกมาเป็นไอคอนพร้อมข้อความสื่อให้เห็นภาพได้ดีเลยครับ ชัดเจนมาก

 

กระดาษเคลือบเงา 300 กรัม from Gogoprint on Vimeo.

ถ้าน้องๆ graphic designer ที่ยังไม่ค่อยรู้เรื่องสื่อสิ่งพิมพ์ เว็บนี้จะทำให้เราเข้าใจวงการอุตสาหกรรมการพิมพ์ได้ดีเลยครับ เพราะเค้าได้รวบรวมสื่อสิ่งพิมพ์ไว้เกือบทุกประเภท เช่น นามบัตร, การ์ดแต่งงาน, สติ๊กเกอร์ ฯลฯ แถมมีวิดีโอประกอบให้เราเห็นภาพด้วยว่า ถ้าเคลือบด้วยวิธีการนี้ จะเห็นความมันวาวของกระดาษเป็นอย่างไร เรียกได้ว่าเป็นแหล่งศึกษาหาความรู้เรื่องงานพิมพ์ที่ใช้ได้เลยครับ (ขัอมูลพวกนี้จะแทรกอยู่ที่หน้าตอนเราเลือกสเปคของสิ่งพิมพ์บ้าง หรือคลิกดูที่ลิงค์ ศูนย์ช่วยเหลือ ตรงด้านบน)

 

popup-code-01

Popup คูปองส่วนลด เมื่อเข้าหน้าเว็บในครั้งแรก หรือกดที่ลิงค์ รับส่วนลด 20% บริเวณด้านบนของเว็บไซต์

ช่วงนี้สำหรับลูกค้าใหม่ทั่วไป ลงทะเบียนก็จะได้รับคูปองส่วนลด 20% ส่วนตัวผมได้คูปอง 1,000 บ. จากทีมงานแล้ว อย่าอิจฉากันนะ ヘ(= ̄∇ ̄)ノ

 

email-coupon-01s

อีเมลแจ้งกลับเมื่อทำการลงทะเบียนรับคูปองส่วนลด

ลงทะเบียนเสร็จเราจะได้เมลยืนยันพร้อมคูปองโค้ดมาด้วย ดีจัง

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

 

ขั้นตอนที่ 1 เลือกตัวเลือกของคุณ

select-product-page

หน้าตัวเลือกการพิมพ์นามบัตร

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

 

size-option

แสดงตัวเลือกรูปแบบขนาด

ผมเลือกที่ช่องรูปแบบเพื่อกำหนดขนาดของนามบัตร ซึ่งงงๆ นิดๆ เพราะ ตัวเลือกค่า default ตอนแรกคือ 8.5 x 5.5 ซม. แต่ในตัวเลือกบอกว่าขนาด 9 x 5.5 ซม. เป็นตัวเลือกยอดนิยม โดยส่วนตัวแล้ว ในเมื่อขนาด 9 x 5.5 ซม. เป็นขนาดมาตรฐาน ทำไมไม่เลือกให้เป็นค่า Default ในตอนแรกเลยล่ะ? เพราะก่อนออกแบบผมก็ลองหาข้อมูลว่านามบัตรทั่วไปเค้าพิมพ์ขนาดไหนกัน ซึ่งผมก็ทำ artwork ขนาด 9 x 5.5 ซม. มานั่นแหละ

ในกรณีไม่มีตัวเลือกขนาดที่เราต้องการ ก็สามารถกำหนดขนาดของนามบัตรได้เองด้วยการคลิกที่ปุ่ม ‘กำหนดขนาดเอง’

 

custom-size

การกำหนดขนาดเอง

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

 

size-custom-normal

ขนาดที่กำหนดเองจะแสดงใน drop down list เมื่อกดยืนยัน

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

 

size-propose

ตัวอย่าง mockup ที่นำเสนอสำหรับการทำ UI กรณียูสเซอร์เลือก กำหนดขนาดเอง (คลิกเพื่อดูภาพขยาย)

Mockup ที่ผมนำเสนอคือ

  • หมายเลข 1– ให้ค่า default เป็น 9 x 5.5 ซม. โดยมีวงเล็บไว้เลยว่าเป็นขนาดมาตรฐาน
  • หมายเลข 2 – หากต้องการกำหนดขนาดเอง ก็ให้กดที่ปุ่ม ‘กำหนดขนาดเอง’ จากนั้นก็จะมีช่องให้กรอกค่าขนาด โดยสีปุ่ม ผมใช้เป็นสีเหลืองและเขียนว่า ‘ใช้ขนาดนี้’ เพื่อให้ชัดเจนกว่าปุ่มเดิมที่เป็นเครื่องหมาย ‘ติ๊กถูกบนพื้นสีฟ้า’ ครับ ให้สังเกตว่าตัวเลือก dropdown list ก็จะเปลี่ยนเป็น ‘กำหนดขนาดเอง’ ด้วย
  • หมายเลข 3 – ดังนั้นการกำหนดขนาดเอง เราสามารถทำได้ด้วยการกดปุ่ม หรือเลือกตัวเลือก ‘กำหนดขนาดเอง’ จาก dropdown list ก็ได้ครับ
  • หมายเลข 4 – พอยืนยันขนาดด้วยการคลิกปุ่ม ‘ใช้ขนาดนี้’ ก็แสดงเป็นข้อมูลขนาด พร้อมลิงค์ให้แก้ไขขนาดไว้อยู่ข้างๆ

ยังไงทีมงานลองนำไปพิจารณาดูนะครับ

side-select

ตัวเลือกพิมพ์หน้าเดียวหรือสองด้าน

ผมเลือกแล้วว่าจะพิมพ์ขนาด 9 x 5.5 ซม. ต่อไปผมก็ดูว่าจะพิมพ์นามบัตรด้านเดียวหรือสองด้าน ส่วนตัวผมเห็นว่า ค่า Default พิมพ์หน้าเดียว น่าจะอยู่ด้านซ้ายนะ แล้วพิมพ์หน้าหลังมาอยู่ด้านขวา มันน่าจะดูเข้าใจง่ายกว่าครับ ขั้นตอนนี้ผมเลือกพิมพ์หน้าเดียวล่ะ

 

select-paper-type-01

ตัวเลือกประเภทกระดาษ

ค่า default ประเภทกระดาษเช่นกัน (คือค่าอาร์ตมัน 300 แกรม) ที่ไม่ได้ใช้ตัวเลือกยอดนิยมมาเป็นค่า default ในตัวเลือกนี้ผมก็เลยเลือกพิมพ์เป็นกระดาษอาร์ตมัน 230 แกรมก่อน

 

cover-shield

ตัวเลือกการเคลือบ

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

 

ขั้นตอนที่ 2 เลือกจำนวนและความเร็วในการจัดส่ง

select-options

ตัวเลือกจำนวนและราคา

พอมาถึงส่วนเลือกจำนวนการพิมพ์ อันนี้ผมเห็นว่าเป็นไฮไลท์ของเว็บนี้เลยครับ เพราะมันทำให้เราเห็นเลยว่า ถ้ายิ่งเราสั่งจำนวนมากขึ้นราคาต่อชิ้นก็จะถูกลงอย่างมาก อีกทั้งยังรู้ได้ว่า เราจะได้สินค้าวันไหน ถ้างานเร่งก็ต้องจ่ายแพงกว่าปกติประมาณ 30% ซึ่งจากสเปคกระดาษที่ผมได้เลือกไปก่อนหน้า รู้สึกว่ายังเหลือเงินจากคูปองอีกเยอะ ผมเลยกลับไปขั้นตอนก่อนหน้า แล้วเลือกพิมพ์เป็นกระดาษอาร์ตมัน 260 แกรม และทำการเคลือบด้าน โดยสั่งพิมพ์จำนวน 500 ใบ ได้ราคา 930 บ. ตามภาพด้านบนเลยครับ (เค้าให้มาแล้ว เอาให้คุ้ม (^_^))

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

 

ขั้นตอนที่ 3 Finalise Your Options (สรุปตัวเลือกของคุณ)

select-additional-options

Popup ขั้นตอนที่ 3 เพื่อสรุปสเปคงานพิมพ์

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

 

file-and-proof

ตัวเลือกรูปแบบไฟล์และการตรวจสอบไฟล์

หากต้องการส่งไฟล์เป็น format อื่นที่ไม่ใช่ PDF ก็มีค่าใช้จ่ายเพิ่มเติมนะ เช่นเดียวกันถ้าต้องการปรูฟสีก็เสียเงินเพิ่ม 800 บ. ล่ะ ถ้าใครยังไม่มี artwork ก็จ้างให้ทีมงานทำก็ได้ ในราคา 3,000 บ.

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

 

ภายในรถเข็น

cart-checkout

หน้า shopping cart

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

 

coupon-applied

การแสดงผลราคาเมื่อมีการใช้คูปอง

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

 

เช็คเอาท์จุดที่ 1: เข้าสู่ระบบ

login

ตัวเลือกเข้าสู่ระบบและตัวเลือกสมัครสมาชิก

เข้าสู่โซนปราบเซียน นั่นก็คือ ส่วนที่เว็บ e-commerce เรียกว่า ‘หน้าเช็คเอาท์’ ซึ่งหน้าด่านของเว็บนี้คือ การให้ยูสเซอร์เข้าสู่ระบบ หากไม่มี account ก็ทำการสมัครสมาชิกซะ

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

 

เช็คเอาท์จุดที่ 2: การวางบิล

address-comp

ฟอร์มที่อยู่การออกใบเสร็จ

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

address-personal

ฟอร์มสำหรับลูกค้าประเภทบุคคล

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

 

address-billing-form

ฟอร์มที่นำเสนอซึ่งเปลี่ยนหัวข้อการกรอกข้อมูลเป็นเรื่องที่อยู่การจัดส่งสินค้า

ถ้าให้ผมลองออกแบบปรับปรุงฟอร์ม ก็จะออกมาหน้าตาคร่าวๆ เช่นรูปด้านบนครับ โดยผมมีเปลี่ยน

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

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

เช็คเอาท์จุดที่ 3: การชำระสินค้า

payment-option

ตัวเลือกการชำระเงินปลายทาง

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

  1. จ่ายเงินปลายทาง (Cash on Delivery, COD) สำหรับคำสั่งซื้อที่ไม่เกิน 1,000 บ. นะ และ
  2. โอนเงิน ซึ่งหากต้องการหักภาษี ณ ที่จ่าย ต้องเลือกตัวเลือกนี้นะ

 

payment-bank-transfer

ตัวเลือกการชำระเงินด้วยการโอนเงิน

ที่ผมบอกว่ามีให้เลือกจ่าย 2 ช่องทางไม่ผิดหรอกครับ แม้เราจะเห็นตัวเลือกที่ 3 แต่พอผมลองเลือกตัวเลือกที่ 3 แล้ว (No payment information required) กลับไม่พบข้อมูลอะไรเลย ก็เลยไม่รู้มันคืออะไร ยังไงฝากทีมงานช่วยเอาตัวเลือกนี้ออกก็ดีครับ เดี๋ยวยูสเซอร์งงได้

เช็คตัวเลขที่ต้องจ่ายเรียบร้อยแล้ว ก็กดปุ่ม ยืนยันและอัพโหลดไฟล์ กันเลย

 

เช็คเอาท์จุดที่ 4: อัพโหลดไฟล์

tip-and-trick

Popup แทรกเพื่อให้ข้อมูลเรื่องการอัพโหลดไฟล์

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

ผมก็ปิด popup นี้ไป แล้วก็คลิกเลือกปุ่ม ‘UPLOAD ARTWORK’ จากนั้น ผมอยากลองของคือ ผมจะลองเลือกอัพโหลดไฟล์ AI ดู ว่าได้หรือเปล่า

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

 

upload-file-done

หน้าจอแสดงผลเมื่อทำการอัพโหลดไฟล์ artwork เสร็จเรียบร้อย

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

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

 

order-history

หน้าแสดงประวัติคำสั่งซื้อ

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

 

mail-order

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

 

สรุปคะแนน

broken-link

ความสวยงาม:  9/10 (แนว Flat design, เลือกธีมสีเข้ากับตัวธุรกิจ, จัดวาง layout ได้ดี, เว็บดูน่าเชื่อถือ)

การนำเสนอเนื้อหา: 8/10 (ครบถ้วนดีครับ มีทั้งบล็อค, FAQs, ตัวอย่างสินค้า, ลูกค้าตัวอย่าง, วิธีการสั่งพิมพ์)

ฟังก์ชันการใช้งานหลัก: 7/10 (แบ่งเมนูได้น่าสนใจ เข้าใจง่าย, สามารถส่งคำสั่งซื้อได้จนถึงขั้นตอนอัพโหลดไฟล์โดยไม่ติดขัด, แต่ยังมีเรื่องลิงค์ขาดพอสมควร (Broken links) เช่น พอกดเลือกรูปสไลด์ตามภาพด้านบน จะพาไปหน้า Error 404 ตามเก็บงานส่วนนี้ไม่ยาก ลุยได้เลยนะครับ, ตัวเลือกการจ่ายเงินอันที่ 3 ไม่มีข้อมูลอธิบาย)

ความถูกต้องตามหลัก UI/UX: 6/10 (UI มีความสอดคล้องกันดีทั้งเว็บ, ค่า default ยังไม่ดีพอ, มี popup มาขัดขวางขั้นตอนการอัพโหลดไฟล์, ควรเก็บตกเรื่องแปลภาษาในอีเมลที่ส่ง, ปุ่มและหัวข้ออีกหน่อยนึงนะ, มาเสียคะแนนเรื่องขั้นตอนเช็คเอาท์ซะเยอะเลย โดยเห็นว่าน่าจะมีหน้า Thank you ที่ให้ข้อมูลสรุปข้อมูลสินค้าและรายละเอียดอื่นๆ หมือนกับอีเมลยืนยันคำสั่งซื้อ )

การแสดงผลบนมือถือ: N/A (ไม่ได้รองรับ Responsive จึงไม่มีการประเมิน)

ความคิดสร้างสรรค์: 9/10 (ชอบตารางการเลือกจำนวนที่จะพิมพ์พร้อมแสดงราคาซึ่งเป็นหัวใจหลักของธุรกิจ ดูๆ แล้วเหมือนกับตารางเลือกเที่ยวบิน พอนำมาใช้กับโรงพิมพ์ ค่อนข้างตอบโจทย์สิ่งที่ลูกค้าต้องการเลย, มีการแสดงตัวอย่างภาพสินค้า, ทำวิดีโอแสดงการสะท้อนของแสงสำหรับตัวเลือกงานพิมพ์ต่างๆ)

ขอบคุณทีมงาน Gogoprint สำหรับสปอนเซอร์ที่ให้ผมได้ทดลองประสบการณ์โรงพิมพ์ออนไลน์ ส่วนตัวผมคิดว่าเป็นนวัตกรรมที่น่าสนใจมากๆ เลยครับ ซึ่งเปลี่ยนโฉมธุรกิจสื่อสิ่งพิมพ์เข้าสู่แพลทฟอร์ม e-commerce แบบเต็มตัว o(^^o)

บริษัทหรือเจ้าของเว็บไหน สนใจบริการรีวิวเว็บ/app มือถือ ติดต่อมาที่อีเมล s.piyawit@gmail.com ได้เลยนะครับ รับรองเนื้อหาเข้มข้น ได้ประโยชน์กันทั้งสองฝ่ายครับ ( ̄▽ ̄)ノ

 

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

10 Design Details, So in Details (10 ดีไซน์เจ๋ง เก่งรายละเอียด)

Previous article

เช็คความเข้าใจ UI Checkbox in Practice

Next article

You may also like

Comments

Leave a reply

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