โพสที่แล้วผมเกริ่นนำเรื่องของ usability engineering ไปพอหอมปากหอมคอ ในโพสนี้ผมจะยกตัวอย่างกรณีศึกษาเรื่องของ usability engineering ซักกรณีหนึ่งเพื่อให้ผู้อ่านได้มองเห็นภาพแนวทางการทำ usability และคุ้นชินกันให้มากขึ้น โดยกรณีศึกษาที่ผมจะยกตัวอย่างนี้เป็นกรณีศึกษาระหว่างผู้ให้บริการเว็บบล็อกชื่อดังสองแห่ง นั่นก็คือ WordPress และ Tumblr
ก่อนอื่นผมต้องบอกก่อนว่าทั้ง WordPress และ Tumblr นั้นมีการออกแบบ usability ในเว็บไซต์ได้ดีกว่ามาตรฐานอยู่แล้ว เพียงแต่การที่ผมนำสองเว็บไซต์นี้มาเปรียบเทียบเพื่อให้เห็นสิ่งที่ “ดีกว่า” ของ Tumblr แต่ใช่ว่า WordPress จะแย่ (ยังมีเว็บไซต์อีกหลายร้อยล้านเว็บไซต์ที่แย่กว่า WordPress มากๆ)
หน้าโฮมของ WordPress.com และ Tumblr.com
หน้าโฮมของ WordPress
หน้าโฮมของ Tumblr
สิ่งแรกที่เราจะนำมาประเมินว่าเว็บไซต์มี usability ที่ดีหรือไม่ ผมมักจะนำ “เป้าหมาย (Goal)” มาเป็นตัวตั้ง อย่าลืมว่าถ้าเราตั้งเป้าหมายของหน้าเพจผิด แนวทางการออกแบบ usability ก็จะผิดไปตั้งแต่เริ่มต้น
Steps to Goal
เป้าหมาย (Goal) ของหน้าโฮมของทั้ง WordPress และ Tumblr มีเหมือนกันคือ “เชิญชวนให้สมัครสมาชิก” มีบางคนถามผมว่า เป้าหมายไม่ใช่สำหรับสมาชิก login เข้าระบบไปเขียนบล็อกหรอกเหรอ..? คิดดูดีๆ นะครับ สำหรับสมาชิกเดิมของบล็อก ส่วนใหญ่ไม่มีใครเข้าหน้าโฮมของเว็บแล้ว login หรอกครับ เพราะว่าถ้าคุณเป็นสมาชิกเก่า ระบบมักจะจดจำ login ของคุณไว้เสมอ ยกเว้นเวลาคุณบังเอิญเปลี่ยนเครื่อง หรือล้างคุ้กกี้ในบราวเซอร์เท่านั้นที่จะต้อง login ใหม่ที่หน้าโฮม ดังนั้นเป้าหมายเรื่องการ login จึงเป็นเป้าหมาย “รอง” สำหรับหน้าโฮม เป้าหมายหลักควรจะเป็นเรื่องการสมัครสมาชิกมากกว่า
อย่าเสียเวลากับเป้าหมายรอง ให้โฟกัสไปที่เป้าหมายหลัก..!!
ในหน้าโฮมของ WordPress และ Tumblr ล้วนให้ความสำคัญกับการ “สมัครสมาชิก” เด่นเท่าๆ กัน แต่สำหรับผมแล้ว Tumblr ชนะขาดในเรื่องนี้ เพราะ “step to goal” ของ Tumblr นับได้เป็น 1 ขั้นตอนเท่านั้น คือเข้าหน้าโฮมแล้วคุณสามารถสมัครสมาชิกและเริ่มต้นโพสได้เลยในคลิกเดียว จุดเด่นหลักๆ ในแง่ usability ของหน้าโฮมของ Tumblr ในการสมัครสมาชิกมีดังนี้ครับ
- สมัครสมาชิกได้ใน 1 คลิก (1 step to goal)
- กรอกแบบฟอร์มเพียงแค่ 3 ฟิลด์เท่านั้น
- ปุ่มสมัครสมาชิกใช้การเขียนคอนเทนต์ว่า “Start posting!” เป็นการสื่อสารเชิงจิตวิทยาที่ทำให้สมาชิกรับรู้ว่า คลิกที่ปุ่มนี้แล้วเสร็จเลย ไม่มีขั้นที่ 2 หรือขั้นที่ 3 ต่ออีก
- ช่องกรอกแบบฟอร์มและตัวหนังสือใหญ่อ่านง่ายและชัดเจน
- ใช้สีเขียวนำสายตาให้กับปุ่ม “Start posting!” โดดเด่นออกมาจากคอนเทนต์ส่วนอื่น
Tumblr ใช้เพียงขั้นตอนเดียวในการสมัครสมาชิก
ในขณะที่ WordPress จะต้องใช้ถึง 5 ขั้นตอนในการสมัครสมาชิก นั่นคือ
- การกด “Get started here” ที่หน้าแรก
- การกรอกแบบฟอร์มขนาดยาวที่หน้าสอง
- การรอเพื่อเข้าตรวจสอบเมล์บอกซ์ (ระวัง อาจอยู่ในสแปมบอกซ์)
- คลิกอ่านอีเมล์เพื่อยืนยันการสมัคร
- การยืนยันการสมัคร
Wordpress ใช้ถึง 5 ขั้นตอนในการสมัครสมาชิก
หมายความว่าขณะผู้เข้าชม Tumblr สมัครสมาชิกเสร็จเรียบร้อยและเตรียมโพสบล็อกแล้ว ผู้เข้าชมของ WordPress ยังคงลงทะเบียนไม่เสร็จเลย นี่คือความแตกต่างที่หลายคนอาจมองว่าเล็กน้อย แต่สุดท้ายผลลัพธ์ที่เกิดคืออัตรา conversion ในการเป็นสมาชิกของเว็บไซต์สองเว็บไซต์นี้จะแตกต่างกันมาก แปรผันตรงกับจำนวนขั้นตอนที่จะไปถึงเป้าหมาย
จำไว้นะครับ step to goal ควรจะต้องสั้นที่สุดเท่าที่จะเป็นไปได้ นี่คือกฏเบื้องต้นของการออกแบบ usability
สิ่งที่ต้องแลกมาในการทำให้ขั้นตอนหดสั้นลง ก็คือการเสียสละตัดความต้องการบางอย่าง หรือคอนเทนต์บางส่วน ยกตัวอย่างง่ายๆ หลายๆ เว็บไซต์เวลาสมัครสมาชิกแล้วต้องมานั่นกรอกที่อยู่ ทั้งๆ ที่ความจริงแล้วเจ้าของเว็บไม่เคยนำที่อยู่ที่ได้มาจากสมาชิกไปใช้ประโยชน์เลย นี่คือตัวอย่างของการเพิ่มขั้นตอนในเว็บไซต์ที่ไม่จำเป็น แต่จำไว้เสมอครับว่าการทำเว็บดีๆ ซักเว็บหนึ่งมันคือการต่อสู้ระหว่างสมดุลของการหดขั้นตอนไปสู่เป้าหมายให้สั้นที่สุด ที่ต้องแลกมากับการเสียสละคอนเทนต์หรือตัดข้อมูลบางส่วนทิ้งไปจากเว็บไซต์ ผู้ที่สร้างสมดุลระหว่างปริมาณคอนเทนต์กับขั้นตอนไปสู่เป้าหมายได้นั่นคือผู้ชนะ
เรามาต่อกันถึงประเด็นน่าสนใจอื่นๆ ของ Tumblr กับ WordPress
รหัสผ่าน รอบเดียวพอ
Tumblr ขอให้กรอกรหัสผ่านเพียงครั้งเดียว
จุดน่าสังเกตที่เป็นการแหกกฏสามัญสำนึกของคนทั่วไปจุดหนึ่งที่ Tumblr กล้าเอามาใช้ นั่นก็คือการละเว้นการใส่รหัสผ่านซ้ำสองครั้งที่เว็บทั่วไปเกือบ 100% จะบังคับให้ผู้สมัครกรอกรหัสผ่านซ้ำซ้อนเพื่อป้องกันความผิดพลาดในการกรอก แต่คนใช้เว็บออกจะรำคาญข้อบังคับที่กลายเป็นกฏธรรมชาติของการสมัครสมาชิกข้อนี้อยู่ในใจลึกๆ
แต่กลับกันการที่ Tumblr ไม่ถามอะไรจุกจิกมันทำให้การสมัครสมาชิกราบรื่นอย่างเหลือเชื่อทีเดียว
No Scroll
โจทย์นี้เป็นโจทย์ที่ยากที่สุดข้อหนึ่งของการทำ usability นั่นก็คือ เว็บไซต์ที่ไม่ต้อง scroll จะดีกว่าเว็บไซต์ที่ต้อง scroll เสมอ โดยมีข้อแม้ว่า ขนาดตัวอักษรและคอนเทนต์ต่างๆ ต้องอยู่ในขนาดที่พอเหมาะอ่านง่าย อย่าสักแต่ว่ายึดถือกฏห้าม scroll แล้วพยายามยัดทุกอย่างเอาไว้ในหน้าเดียวให้ได้จนตัวอักษรเล็กจิ๋วไปหมด แบบนี้ไม่ถือว่าเป็น usability ที่ดีครับ
แน่นอนว่าการที่ใครซักคนจะออกแบบเว็บไซต์ให้ไม่มี scroll เลยนั้นเป็นเรื่องที่ยาก เช่นเดียวกันกับเรื่องของ step to goal นั่นคือเราต้องสร้างสมดุลระหว่างคอนเทนต์ภายในเว็บให้ได้ เว็บไซต์บางเว็บไซต์คิดอยากจะใส่อะไรๆ ต่างๆ เข้าไปในเว็บไซต์เต็มไปหมด นั่นทำให้หน้าจอมีแต่ข้อมูลยืดยาว เสียเวลา scroll และทำให้หน้าจอรกจนผู้ใช้งานไม่สามารถโฟกัสสิ่งที่ตนเองต้องการได้
(บางคนบอกว่า มีคอนเทนต์เยอะ แต่ไม่อยากเลื่อนหน้าจอ เลยทำการซอยข้อมูลออกเป็นหลายๆ หน้าแบบไม่ scroll นั่นก็เป็นการเพิ่ม step to goal ให้กับเว็บไซต์ของคุณนั่นเองครับ
กลับกัน บางคนบอกว่า ไม่อยาก scroll หน้าจอหลัก เลยพยายามยัด internal scroll bar ลงไปในคอนเทนต์ของเว็บไซต์ ซึ่งผมเรียกกรณีนี้ว่า หายนะของ usability มีโอกาสจะพูดถึงประเด็นนี้ในโพสถัดๆ ไปครับ)
เว็บ WordPress ต้อง scroll หน้าจอเพื่ออ่านคอนเทนต์หรือกรอกข้อมูล ในขณะที่ Tumblr หลีกเลี่ยง scroll เท่าที่จะเป็นไปได้ และนี่คือข้อได้เปรียบของ Tumblr ครับ
จำไว้อย่างหนึ่งครับว่าเรื่องของ usability จริงๆ มันเป็นประเด็นด้านจิตวิทยาและกลไกการทำงานของสมอง, สายตา และมือ ข้อเสียของการ scroll จริงๆ นั่นคือสิ่งที่มีผลกระทบในแง่ลบต่อสมอง, สายตา และมือ ของผู้เข้าเว็บนั่นเองครับ นั่นก็คือ
- ต้องเล็งเมาส์ (มือ) ไปเลื่อนแถบ scroll ด้านข้างบราวเซอร์ ซึ่งโดยส่วนใหญ่จะเป็นแถบเล็กๆ และต้องเล็งเมาส์ (สายตา) เพื่อคลิกแล้วลาก (มือ) (นี่เป็นกฏที่เรียกว่า Fitts’ Law ซึ่งผมจะพูดถึงกฏข้อนี้ในโพสถัดๆ ไปครับ) สำหรับคนใช้แมค หรือเมาส์ที่มี wheel ข้อเสียตรงนี้ก็จะหายไป
- สมองจะต้องทำงานหนักขึ้นในการจดจำตำแหน่งของสิ่งต่างๆ บนหน้าเว็บไซต์เมื่อเราเลื่อนหน้าจอลงมาจนหน้าจอด้านบนพ้นสายตาของเราไปแล้ว สมองจะทำหน้าที่จดจำตำแหน่งสิ่งต่างๆ ที่พ้นสายตาของเราไปโดยอัตโนมัติ สมองทำงานหนักขึ้นเล็กน้อย และมีความรู้สึกไม่สบายใจเกิดขึ้นนิดหน่อยในจิตใต้สำนึกของผู้ใช้งาน
- หากคอนเทนต์ในเพจเยอะมากและขาดการจัดหมวดหมู่อย่างเป็นระเบียบ เมื่อนั้นแหละครับ ภาระของสมองและสายตาจะเพิ่มมากขึ้นจนผู้ใช้งานรู้สึกอีดอัดในการเข้าเว็บไซต์ของคุณทันที
Secondary Goal
การให้ความสำคัญกับเป้าหมายรอง (การ login) ของทั้งสองเว็บไซต์ก็แตกต่างกันครับ ใน WordPress เป้าหมายรองถูกดึงให้โดดเด่นใกล้เคียงกับเป้าหมายหลัก ด้วยการเพิ่มช่องใส่ user และ password ด้านบนของเว็บเพจ แม้จะเป็นแค่แถบเล็กๆ แต่มันก็เพิ่มความรกสายตาให้กับเว็บไซต์อย่างหลีกเลี่ยงไม่ได้
เป้าหมายรอง ถูกทำให้เด่นขึ้น แลกกับความรกที่เพิ่มขึ้นในหน้าเว็บไซต์
ในขณะที่ Tumblr ทำในทางกลับกัน นั่นก็คือ Tumblr วางปุ่ม “Log in” ไว้ที่มุมบนขวา ซึ่งเป็นมุมอับตามกฏของ Gutenberg (ผมจะกล่าวถึงในโพสถัดๆ ไปเช่นกัน) ทำให้ไม่เกะกะสายตาของผู้ใช้เว็บไซต์ และเมื่อผู้ใช้บางคน (ที่เป็นคนกลุ่มน้อย) ต้องการจะ login ค่อยทำการคลิกที่ปุ่ม “Log in” แล้วฟอร์มการ login จึงจะแสดงอย่างเด่นชัดที่กลางจอภาพ
เป้าหมายรอง (login) มี step to goal เป็น 2 ในขณะที่เป้าหมายหลัก (sign up) มี step to goal เป็น 1
ลองสังเกตดีๆ นะครับ จะเห็นได้ว่า Tumblr ให้เป้าหมายรองมี step to goal เป็น 2 ยอมเสียหนึ่งขั้นตอนในการคลิก “Log in” เพื่อรักษาความเรียบง่ายของหน้าโฮมไม่ให้มีองค์ประกอบเยอะจนรกสายตา
ในขณะที่เป้าหมายหลักของ WordPress กลับมี step to goal มากถึง 5 แต่กลับยอมเพิ่มความรกให้เว็บไซต์ด้วยการใส่เป้าหมายรองให้มี step to goal เป็น 1
นี่คือสิ่งที่นักออกแบบเว็บไซต์ต้องตัดสินใจครับ ผมไม่ได้บอกว่าการออกแบบของ WordPress นั้นผิด ย้อนกลับมาประเด็นเรื่องความสมดุลใน usability คุณเลือกที่จะต้องแลกระหว่างความเรียบง่ายของหน้าเว็บ กับ step to goal โดย Tumblr เลือกที่จะให้เว็บเรียบง่าย ในขณะที่ WordPress เลือกที่จะลัดขั้นตอนการเข้าระบบ ไม่มีใครผิดใครถูก 100% แต่สำหรับผม เป้าหมายรอง ที่ตอบสนองคนกลุ่มน้อย ไม่ควรมาทำให้หน้าโฮมซึ่งโฟกัสไปที่คนหมู่มากต้องรกสายตา ซึ่งเป็นแนวคิดเดียวกันกับเว็บไซต์ Tumblr นั่นเองครับ
เรื่องเล็กน้อยพวกนี้แหละครับ ที่หลายคนอาจจะคิดว่า ทำไมแค่ทำเว็บไซต์ ต้องคิดลึกมากเรื่องถึงขนาดนี้ แต่นี่แหละคือสิ่งที่แบ่งแยกระหว่างเว็บไซต์ที่ดี กับเว็บไซต์ที่ยอดเยี่ยม และในยกนี้ Tumblr ชนะ WordPress ขาดลอยครับ
จริงๆ มีอีกหลายประเด็น ไว้โอกาสหน้าจะมาเล่าให้ฟังต่อครับ
เครดิต : http://apricotion.org/
บทความเกี่ยวกับ Usability Engineering ทั้งหมดครับ
