UI Pattern

เรียนสิ่งถูก เพื่อทำผิด

0

featured-bad-uiช่วงนี้ผมกำลังติดตามซีรีย์ญี่ปุ่นเรื่อง กาลิเลโอภาค 2 ซึ่งตอนนี้ไทยพีบีเอสกำลังฉายอยู่วันเสาร์และอาทิตย์ เวลา 21.00 – 22.00 น. เป็นเรื่องนักอาจารย์ฟิสิกส์ที่ใช้ความรู้ของเค้ามาช่วยในการแก้ไขคดีที่เด็กวิทย์อย่างเราดูแล้วอินดีครับ

และเพราะว่าผมชอบฟังเสียงพูดของคนญี่ปุ่น (ไม่ใช่ว่าคนไทยพากย์ไม่ดีนะครับ) ก็เลยเสาะหาแหล่งดูซีรีย์ออนไลน์ฟรีจนมาพบ เว็บ http://www.gooddrama.net/ ที่มีซีรีย์นี้และนำเสนอเสียง Soundtrack ซับอังกฤษด้วย โดนใจผมมาก

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

bad-ui-good-money-01x600

  1. พอเปิดเข้าหน้าซีรีย์กาลิเลโอปุ๊ป ก็จะมีโฆษณาโผล่มาด้านล่างทันที จะเห็นว่ามันบดบังทัศนียภาพการรับชมแบบน่ารำคาญมาก พอจะปิด popup โฆษณานี้ ก็ต้องเล็งให้ดี เพราะปุ่มปิดเล็กมาก
  2. คราวนี้มาเจอตัวโฆษณาเกะกะยิ่งกว่าอันแรกอีก ก็เล่นวางทับส่วนแสดงวีดิโอเลยนี่ โดยปกติปุ่มปิดจะวางไว้อยู่มุมบนขวาเหมือนกับด่านแรก แต่นี่ทำให้เราชะงักไปหลายวินาทีถึงจะรู้ว่าปุ่มปิดอยู่ด้านล่างของกล่องโฆษณา ซ้ำร้ายกว่านั้น อาจจะมีโฆษณาที่เป็นวีดิโอฉายก่อนประมาณ 10-15 วิ ก่อนที่จะเข้าสู่ตัวซีรีย์จริงๆ
  3. เสียเวลายิ่งขึ้น ยังแบ่งตอนซีรีย์ตอนหนึ่งออกเป็น 3 ส่วนอีก นั่นหมายความว่า เราต้องเริ่มฝ่าด่านตั้งแต่ด่านแรกใหม่ถ้าจะดูส่วนถัดไป หรือตอนใหม่

เห็นไหมครับว่ามันเป็น UI ที่เลวร้ายเอามากๆ แต่หากถามว่ามันเป็น UI ที่ประสบความสำเร็จหรือไม่? ก็ต้องตอบเลยว่า ‘ใช่’ (Bad UI but good for business) เพราะเป้าหมายของการออกแบบให้เป็นแบบนี้ก็เพื่อต้องการให้ยูสเซอร์คลิกโฆษณาให้มากที่สุด ด้วยการเพิ่มแรงเสียดทาน (ดูบทความตอน “ออกแบบแรงเสียดทาน” ประกอบ) ในการรับชมถึงขั้นสูงสุดว่างั้นเถอะ

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

เว็บ Cnet.com

bad-ui-good-money-02x600

ในกรณีตัวอย่างนี้ ผมต้องการดาวน์โหลดซอฟต์แวร์ป้องกันไวรัส Avast จากเว็บ Cnet ครั้นพอเข้ามาในหน้าดาวน์โหลดกลับต้องเจอปุ่มดาวน์โหลดถึง 3 ปุ่ม กับอีก 2 ลิงค์ ซึ่งปุ่มที่น่ากดมากที่สุดเป็นปุ่มหมายเลข 1 และ 4

ทั้งสองปุ่มนี้ (1, 4) ไม่ใช่ปุ่มที่จะให้ดาวน์โหลดโปรแกรม Avast เลยนะครับ แต่เค้ากลับทำมาหลอกให้เราเผลอกดดาวน์โหลดได้ง่ายๆ สำหรับคนที่ไม่ค่อยคุ้นเคยกับเว็บเป็นอย่างดี ปุ่มจริงๆ คือปุ่มหมายเลข 2 ดูไม่เด่น กลางๆ ใช่ไหมครับ ไม่ได้บังเอิญแต่เป็นความตั้งใจ 100%

 เว็บ All-Fonts.combad-ui-good-money-04x600

คราวนี้ ผมลองค้นหาฟอนต์ฟรีที่ชื่อว่า Avenir จากกูเกิล ในผลลัพธ์ก็มี all-fonts.com เป็นลำดับแรกๆ ซึ่งผมก็คิดว่าน่าจะมีฟอนต์ตัวนี้ให้ดาวน์โหลด พอเข้ามาแล้วก็พบเจอปุ่มสีเขียวโตเด่นเป็นสง่า (หมายเลข 1) และหลายคนอาจคิดว่า นี่ต้องเป็นปุ่มให้ดาวน์โหลดฟอนต์แน่ๆ แต่ในความเป็นจริง มันคือปุ่มสำหรับโฆษณาอันเบอเร่อเลย หากลองสังเกตที่มุมบนขวาของแบนเนอร์ก็จะรู้ว่าเป็นโฆษณาจาก Google (สมรู้ร่วมคิดกันดีนะเนี่ย)

เว็บ Stock2morrow

bad-ui-good-money-03x600

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

bad-ui-good-money-05x600

บางกระทู้ของเว็บ พอเปิดเข้าอ่านบทความ ก็มีโฆษณาเปิดให้ดูเต็มๆ อีก เอากันสุดๆ เลย แต่เราก็ไม่ว่า อย่างที่บอกก็ของมันฟรีนี่นา ก็เลยทนได้

เว็บ Mangareader.net

bad-ui-good-money-06x600

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

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

ข้อคิดก่อนจบ

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

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

 

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

การใช้งานฟังก์ชัน Blend If บน Photoshop

Previous article

ทำน้อย สำเร็จได้ (Minimum Viable Product)

Next article

You may also like

Comments

Leave a reply

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

More in UI Pattern