Archive for the 'Usability Engineer' Category

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

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

ปุ่ม Check Price น่ากดกว่าปุ่ม Buy Now

ที่ชอบใจก็คือคนเขียนเว็บไซต์ Lego รู้ดีว่า คงไม่มีใครตัดสินใจซื้อสินค้าตั้งแต่หน้าแรกที่เข้าชม

จึงใช้คำว่า “Check Price” แทนคำว่า “Buy Now” หรือ “Add to Cart”

คำว่า “Check Price” เป็นคำที่อ่อนหวาน ไม่ดูคุกคามเท่ากับ “Buy Now” และสร้างความน่ากดให้มากกว่าหลายเท่านัก แต่เพื่อสร้างความรู้สึกให้ใกล้เคียงกับการซื้อสินค้า (และเหมือนเป็นการเตือนคร่าวๆ ให้ผู้เข้าชมรู้ว่า กำลังเดินใกล้เคาร์เตอร์เข้าไปเรื่อยๆ จึงมีข้อความข้างๆ เขียนว่า Shop พร้อมตะกร้าสีแดงแสดงให้เห็นไว้)

และหลังจากเข้าไปหน้าด้านใน จึงเริ่มทำการขายของอย่างจริงจัง

เมื่อคนสนใจ จึงค่อยตั้งใจขายอย่างจริงจัง

ด้วยข้อมูลภาพประกอบ รายละเอียดรีวิว ระบบ Rating จากลูกค้า Lego เพิ่มความมั่นใจในการสั่งซื้อด้วยการวางเนื้อหาล่อลวง เอ้ย… เนื้อหาจูงใจ ว่ามี 93% ของคนส่วนใหญ่แนะนำสินค้านี้ให้กับคนรู้จัก

เมื่อลูกค้าไม่ได้อยากซื้อสินค้าโดยทันที สิ่งที่เขาจะทำมักเป็นการมองหาลิงค์ข้อมูลเพิ่มเติมในหน้าเว็บไซต์ แต่ส่วนใหญ่มักจะถูกทำให้รำคาญสายตาด้วยปุ่ม Buy Now หรือ Add to Cart เพราะเว็บส่วนใหญ่มักทำปุ่มนี้ให้ใหญ่และโดดเด่นเป็นพิเศษอยู่เสมอ

ถูกต้องที่ปุ่ม Buy Now หรือ Add to Cart จะต้องอยู่ ณ ตำแหน่งที่เด่น และเห็นได้ชัด เพื่อผลทางจิตวิทยา แต่มีเงื่อนไขว่า มันต้องถูกวางในหน้าที่ถูกต้องด้วย (ซึ่งโดยทั่วไปมักจะไม่ใช่หน้าแรก)

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

แต่สุดท้าย จนแล้วจนรอด ผมก็ไม่ได้อุดหนุน Lego Mindstorms ครับ เพราะว่าเว็บไซต์ไม่ยอมจัดส่งที่ประเทศไทย -_-

Popularity: 58%

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

SERP คือ Search Engine Results Page หรือง่ายๆ ก็คือหน้าผลลัพธ์ของการค้นหาของ Search Engine นั่นเองครับ

ในโลกยุค SEO บูม มีหลายทฤษฏีที่พูดกันถึงผลลัพธ์ของการค้นหา บ้างก็อ้างว่าผลลัพธ์ที่ 1 มีความสำคัญน้อยกว่าอันดับ 2 ตามหลักจิตวิทยา ซึ่งบางคนก็เชื่อ บางคนก็ไม่เชื่อในคำกล่าวอ้างนี้

ตำแหน่งใดใน SERP ที่มีความสำคัญสูงที่สุด…?

ในยุคหลังการทำ Usability Study มีการพัฒนาขึ้นอย่างมาก ทั้งเครื่องมือ เทคโนโลยี และการวิจัย ถึงหลักจิตวิทยาการออกแบบเว็บไซต์ มีเทคโนโลยีหนึ่งที่เรียกว่า “แผนที่ความร้อน (Heatmap)”

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

ภาพจาก <a href="http://www.useit.com/alertbox/reading_pattern.html">useit.com</a>

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

ดูภาพขวามือ ผลลัพธ์ของการค้นหาของ Google จะสังเกตได้ว่านำหนักของสีแดงกระจายอยู่ในรูป F-Shape ตั้งแต่ SERP ลำดับ 1 และ 2 ส่วน 3 และ 4 เริ่มที่จะได้รับความสนใจน้อยลง ถัดจากลำดับ 4 ไปนี่เริ่มกลายเป็นสีฟ้าแล้ว

และส่วนใหญ่ผลลัพธ์ของ Heat Map ในหลายๆ การทดลองก็ตอบสนองออกมาในรูปแบบคล้ายๆ กันนี้

สรุปจากผลการทดลอง ตำแหน่งที่ 1 กับ 2 เจ๋งสุดครับ และที่สำคัญ 1 และ 2 ได้รับความสนใจจากกลุ่มผู้ทดลองไม่ต่างกัน…!!

2 ต่างกับ 3 พอประมาณ และต่ำกว่า 5 ถือว่ามีความสำคัญน้อยลงไปกว่า Top 5 มากทีเดียว

ส่วนความสำคัญของ AdWords เมื่อเทียบกับ SERP ในส่วน organic แล้วเป็นไปตามภาพด้านล่างครับ

ภาพจาก <a href="http://www.webgrowth.biz/tag/keyword-research/">webgrowth.biz</a>

พอจะสรุปผลได้หรือไม่ว่า ในงบประมาณที่ใกล้เคียงกัน เราควรทำ SEM แบบ Organic หรือแบบ Pay per Click..? และตอบคำถามที่หลายๆ คนเคยถามผมว่า Google ทำการตลาด AdWords ให้ดูดี “เกินจริง” ไปหรือเปล่า…? สำหรับผม ได้คำตอบในใจแล้วครับ

นอกจากนี้ ผมยังมีเรื่อง Usability ที่เกี่ยวเนื่องกับ Heatmap อีกเพียบ ไว้จะเอามาเล่าสู่กันฟังเพิ่มเติมครับ ทั้งเรื่องเทคโนโลยี Eye Tracking Device (ETD) รวมถึงการทดสอบ Usability แบบอื่นๆ ที่น่าสนใจทั้ง Branding, E-Mail Marketing, Blog ฯลฯ ถ้าสนใจเก็บ RSS Feed ไว้ติดตามได้หรือสมัครรับ Feed ทางอีเมล์ได้ครับ

PS. Heatmap นั้นเป็นการเก็บข้อมูลเรื่องความเข้มข้นในการโฟกัสของผู้เข้าทดสอบ ต่างกับ Gutenberg Diagram ที่ผมเขียนก่อนหน้านี้ ที่เป็นเรื่องของตำแหน่งสายตาในการมอง (Optical Area) ซึ่งจริงๆ แล้วการทดสอบ Eye Tracking นี้สามารถเก็บข้อมูล Optical Area ได้ด้วย เรียกกันว่า Scan Path ครับ ซึ่งเป็นข้อมูลอีกชุดนอกเหนือไปจาก Heatmap ที่ได้พูดถึงไปแล้ว

Popularity: 24%

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

ผมตัดสินใจเปิด Category ใหม่ในบล็อก Marketing 2.0 ในเรื่องของ Usability Engineer ซึ่งผมจะเน้นไปในเรื่องของแนวทางการออกแบบเว็บไซต์ที่มีประสิทธิภาพในการสื่อสารที่ดีที่สุด

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

ในแวบแรกที่มองหน้าจอ มนุษย์จำพวกนี้จะ “โฟกัส” จุดสนใจของสายตาที่มุมบนซ้ายของหน้าจอเป็นอันดับแรก และจะไล่สายตาจากจุดดังกล่าวเป็นเส้นทแยงมุมไปที่มุมล่างขวาของเลย์เอาท์ ภาพด้านล่างเป็นแผนผัง Gutenberg โดยภาพซ้ายเป็นแผนผังสำหรับคนอ่านจากซ้ายไปขวา ส่วนภาพขวาสำหรับพวกขวาไปซ้าย (ญี่ปุ่น, จีน)

Gutenberg Diagram สำหรับพวกซ้ายไปขวาGutenberg Diagram สำหรับพวกขวาไปซ้าย

จุดบนซ้ายที่เป็นจุดที่เด่นที่สุดตามทฤษฏีของ Gutenberg เราเรียกกันว่าจุด POA (Primary Optical Area) จุดล่างขวาที่เป็นจุดสิ้นสุดของสายตา เรียกกันว่าจุด TA (Terminal Area) ข้อมูลที่อยู่ในเส้นทางของสายตาระหว่าง POA ไปยัง TA จะซึมเข้าสู่หัวสมองของผู้อ่านได้มากกว่าส่วนที่เหลือ ซึ่งก็คือมุมบนขวาและล่างซ้าย ซึ่งเราเรียกกันว่า Follow Area และระหว่างสอง Follow Area นี้ มุมบนขวาจะได้รับ Attention จากผู้อ่านมากกว่ามุมล่างซ้าย ถ้าหากปัจจัยขององค์ประกอบอื่นๆ (สี, lead graphics, ขนาดตัวอักษร) เท่ากัน

พอเห็นพฤติกรรมทางจิตวิทยาของผู้อ่านเป็นแบบนี้แล้วเราจึงมีแนวทางการออกแบบที่สอดคล้องกับพฤติกรรมดังกล่าว โดยเราสามารถแบ่งพื้นที่ของหน้าจอออกเป็นสี่ส่วน (4 Quadrants) และให้น้ำหนักการออกแบบของแต่ละส่วนหนักเบาให้สอดคล้องกับทฤษฏี Gutenberg

เช่น…

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

โลโก้ที่จุด POA POA เน้นไปที่การติดต่อร้านค้า
โลโก้และ Lead Graphic ที่จุด POA โปรโมชั่นที่โดดเด่น ณ จุด TA 
POA อยู่ด้านขวาสำหรับเว็บภาษาญี่ปุ่น แต่ก็ไม่เสมอไปที่เว็บเอเชียจะต้องเป็นขวาไปซ้าย เนื่องจากชาวเอเชียส่วนใหญ่เรียนรู้และซึมซับแนวทางการอ่านในรูปแบบตะวันตกไว้เป็นปกติอยู่แล้ว รวมถึง Global Brand บางแบรนด์มีเลย์เอาท์เว็บไซต์ในรูปแบบเดียวกันทั่วโลก รวมถึงเว็บไซต์ของประเทศญี่ปุ่นหรือจีน จะมีการวางเลย์เอาท์แบบเดียวกันกับทางตะวันตก

แต้ท้ายที่สุดผมคงต้องบอกว่า Gutenberg Diagram ไม่ใช่สูตรสำเร็จของการจัดวางองค์ประกอบเว็บไซต์ สิ่งที่เราจะได้เรียนรู้จาก Gutenberg ก็คือแนวคิดตามจิตวิทยาของมนุษย์ และแนวทางพื้นทางในการสร้าง Attention กับเว็บไซต์ เช่น หากองค์ประกอบต่างๆ บังคับให้ข้อมูลส่วนสำคัญของเราไปอยู่ที่ Follow Area ก็ควรจะสร้างจุดเด่นอื่นที่ฉีกหนีองค์ประกอบต่างๆ เพื่อทำให้องค์ประกอบดังกล่าวมีความโดดเด่นและดึง Attention ของสายตาผู้อ่านได้ดีกว่าเดิม

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

ใครไม่เชื่อใน Gutenberg Diagram เราสามารถทำการทดลองได้โดยการใช้เครื่องมืออย่าง Google Website Optimizer เพื่อวัด Attention ของผู้เข้าชมได้ โดยการออกแบบเลย์เอาท์เว็บไซต์สองประเภทและทดสอบกับผู้เข้าชมจริง ว่าสอดคล้องกับทฤษฏีของ Getenberg หรือไม่ (สิ่งที่ทีมงานของเราเคยทดสอบก็คือ การวางไอคอน “สมัครสมาชิก” ไว้ณ ตำแหน่ง Follow Area นั้นทำให้มียอดสมาชิกน้อยกว่าตำแหน่ง TA ถึงประมาณ 300%)

ปิดท้ายกันด้วยข้อมูลเพิ่มเติมว่า ทฤษฏีของ Gutenberg จะเหมาะสมและมีประสิทธิภาพสูงสุดกับเว็บไซต์ที่มีอาการ Information Overflow นั่นก็คือ ข้อมูลท่วมจนไม่รู้ว่าอันไหนเด่นอันไหนด้อยไปกว่ากัน ส่วนในกรณีเว็บไซต์ที่มีข้อมูลไม่มาก เราอาจจะมองไม่เห็นศักยภาพของทฤษฏี Gutenberg อย่างชัดเจนนัก

Popularity: 28%

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • bodytext
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google