User Interface สำหรับคน 2 กลุ่ม

ทุกคนรู้จัก Microsoft Word ใช่มั้ยครับ? ผมมั่นใจว่าใช่ แล้วถ้าถามต่อว่า มีใครใช้ Microsoft Word เป็นบ้าง ผมคิดว่าคำตอบคือ “คนส่วนใหญ่” ใช้เป็น แต่คำว่า “ใช้ Microsoft Word เป็น” จริงๆ แล้วมันแปลว่าอะไร?

คนส่วนใหญ่ใช้ Microsoft Word เพื่อพิมพ์งาน, ทำเอกสาร, จัดหน้า, แปะรูปนิดหน่อย อันนี้ก็เรียกว่า “ใช้เป็น” คือสามารถใช้มันพิมพ์งานทั่วๆ ไปได้

บางคนสามารถสร้างตาราง, ใส่แผนภูมิ, ทำ Header, Footer, ทำจดหมายเวียน, ใส่สูตรทางคณิตศาสตร์ อันนี้ก็เรียกว่า “ใช้เป็น” เหมือนกัน แต่เริ่มทำได้หลายอย่าง

บางคนที่เซียนจริงๆ อาจจะสามารถเขียน VB Script, ทำตัวเชื่อมต่อจากฐานข้อมูลภายนอก, ทำสารบัญแบบ Reference, สร้าง Template ของตัวเอง อันนี้ก็คือใช้เป็น แต่เป็นการใช้เป็นระดับ Power User หรือภาษาไทยเรียกสั้นๆ ว่า “เซียน”

ทั้งๆ ที่เป็น Microsoft Word เหมือนกัน แต่พอยื่นให้คนต่างกัน ผลที่ได้ลัพท์ออกมาก็ต่างกัน

ถ้ามองแบบกว้างๆ Microsoft Word ก็เหมือน “อุปกรณ์” อย่างนึง ลองเปรียบเทียบกับ “มีด” นะครับ ถ้าเรายื่น “มีด” ให้พ่อครัว เค้าก็สามารถสร้างสรรค์อาหารออกมา, ยื่นให้คนขายหมู เค้าก็ทำให้หมูออกมาเป็นชิ้นๆ สวยงามได้ ถ้ายื่นให้ฆาตกร เค้าก็สามารถเอามันไปใช้ฆ่าคนได้…พอมองภาพออกใช่มั้ยครับ?

Microsoft Word เองก็เหมือนกัน มันเป็นเครื่องมือที่มีความสามารถหลากหลายมากมาย แต่คนส่วนใหญ่ก็ใช้แค่พิมพ์งาน แต่กลับมีคนบางกลุ่มใช้มันทำมากกว่านั้น ในทาง UI เลยแบ่ง User ตามหลักนี้ออกเป็น 2 กลุ่มคือ

(รูปจากที่นี่ครับ)

1. กลุ่ม User ทั่วไป

เป็นกลุ่มคนส่วนใหญ่ที่ใช้ UI ของเรา คนกลุ่มนี้จะใช้ความสามารถหลักๆ ของ Application ซึ่ง “ควรจะ” เป็นความสามารถที่สามารถใช้งานและจับต้องได้ง่าย ยกตัวอย่างเช่น

  1. Microsoft Word – สามารถพิมพ์งานทั่วๆ ไปได้
  2. Microsoft Excel – สามารถทำตารางเพื่อบวกเลขแบบง่ายๆ ได้
  3. Internet Exporer – สามารถเข้าเว็บได้
  4. Faceboook – สามารถเพิ่มเพื่อน, คอมเม้นเพื่อนได้

ความสามารถที่ยกตัวอย่างนี้ มันคือความสามารถ “ผิวๆ” ของ Application นั้นๆ เท่านั้น ถ้าดูจากรูปแล้วเปรียบเทียบว่า ก้อนน้ำแข็งก้อนนี้คือความสามารถทั้งหมดของ Application ส่วนเล็กๆ ที่อยู่เหนือน้ำขึ้นไปนี่แหล่ะ คือส่วนที่ออกแบบมาสำหรับ User แต่ไอ้ “ผิวๆ” นี่แหล่ะครับคือสิ่งที่สำคัญมากๆ สำหรับการออกแบบ UI

สรุป – User คือคนส่วนใหญ่ที่ใช้ความสามารถส่วนน้อย

2. กลุ่ม Power user

กลุ่มนี้คือ คนส่วนน้อยแต่มีความสามารถในการใช้ความสามารถยากๆ ของ Application ได้ ยกตัวอย่างเช่น

  1. Microsoft Word – สามารถสร้าง VB Script เพื่อช่วยจัดการงานได้
  2. Microsoft Excel – สามารถสร้างสมการยากๆ ที่ประกอบด้วย If/Else ได้
  3. Internet Exporer – รู้จัก Bookmark, ใช้ History, ตั้งค่าการเข้า Internet ได้
  4. Faceboook – สร้างและตกแต่ง Fanpage ได้, เข้าใจ Graph API

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

สรุป – Power user คือคนส่วนน้อยที่ใช้ความสามารถส่วนใหญ่

 

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

ความยากของมันอยู่ตรงที่ เราจะใช้อะไรมาแบ่งว่า ความสามารถไหนสร้างมาสำหรับ User, ความสามารถไหนสร้างมาสำหรับ Power user เพราะแน่นอนว่าต้องมีความสามารถหลายๆ อย่างที่จะก้ำกึ่งว่าจะแบ่งอะไรยังไง ดังนั้น Phase นี้จะเป็น Phase ที่สำคัญมาก

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

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

อ่านถึงตอนนี้เพื่อนๆ คงได้ไอเดียในการออกแบบ Application และ UI มากยิ่งขึ้นนะครับ ขอบคุณครับ

หน้า Email subscription สมัครรับอีเมล์แบบเจ๋งๆ

ไปเจอมาเห็นว่าสวยทั้งรูปลักษณ์และใช้งานง่ายก็เลยเอามาแชร์ให้ดูครับ

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

เจ้าของ Blog ชอบมากครับ ขอกด like และ share หลายๆ ที :)

Infographic อย่าง facebook, google เค้ามี datacenter เยอะแค่ไหนอะไรยังไง

วันก่อนไปเจอ infographic ที่อธิบายเกี่ยวกับการทำงานของ datacenter ของบริษัทใหญ่ๆ อย่าง facebook, google ว่าเป็นยังไง วันนี้เลยขอเอามาแชร์ให้เพื่อนๆ ครับ

ด้านล่างเป็น eng ผมขอแปลเป็นภาษาไทยเฉพาะส่วนที่น่าสนใจเป็นประเด็นๆ แล้วกัน

  • Data centers หรืออีกคำหนึ่งคือ server farms คืออาคารหรือห้องที่สร้างขึ้นมาเพื่อที่จะเก็บ server ต่างๆ เอาไว้รองรับการใช้งาน websites ซึ่งอาคารพวกนี้ก็จะมี security ที่เยอะมากๆ ทั้ง network security และ physical security คือมียาม, มีบัตรผ่าน ไม่ใช่ว่าอาม้าอยู่ๆ จะเดินดุ่มๆ เข้าไปได้นะครับ
  • เว็บที่ใหญ่และมี traffic เยอะที่สุดในโลกตอนนี้คือ facebook ตามมาด้วย google เป็นอันดับ 2
  • สถิติของ Facebook ตอนนี้
    • 690 พันล้าน pageview ต่อเดือน!!! (เยอะมากกกกกกกก)
    • มีคนเพิ่มรูป 100 ล้านรูปทุกวัน
    • มีคน update status มากถึงวินาทีละ 700 ครั้ง!
    • datacenter ของ facebook ใช้ไฟมากขนาดที่สามารถเอาไปใช้ในบ้านได้มากถึง 4615 หลัง เป็นเวลา 1 เดือน!

อ่านแล้วก็รู้สึกว่า เออ มันใหญ่จริงแล้วการที่จะ host web ที่ใหญ่ระดับ facebook ได้เนี่ย ไม่ง่ายเลยย

อยากอ่านเพิ่มเติมก็คลิกรูปด้านล่างได้เลยนะครับ


Created by PEER 1 Dedicated Hosting

ว่าด้วยเรื่อง “การเปลี่ยน Password” ของ Wongnai.com

วันก่อนมีโอกาสได้รู้จักและเข้าไปสัมผัส Wongnai.com (อ่านว่า วงใน) ซึ่งเป็นเว็บไซต์รวบรวมร้านอาหารและ review เค้าโฆษณาว่ามีตั้ง 7000 กว่าร้านแหน่ะ น่าสนใจมาก แถมมีโปรแกรมบน iPhone ด้วย โดยส่วนตัวผมเข้าใจว่า concept น่าจะคล้ายๆ yelp.com

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

พอคิดจะเปลี่ยน password ก็เลยกลายเป็นที่มาของโพสต์นี้ทันที

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

wongnai

ส่วนในหัวของผมที่หาปุ่มเปลี่ยน Password เห็นเป็นภาพนี้ครับ

เลข 1 คือเลขที่ผมกดก่อน ปรากฏว่ากดแล้วมาทีเดิม ก็เลยไปกดเลข 2 ก็เจอหน้านี้ครับ


กดแล้วดูผ่านปรื้บเดียว มองไม่เห็นปุ่มเปลี่ยน Password แต่อย่างใด รู้สึกเศร้าเสียใจมาก จึงรีบไป tweet บอก @wongnai ว่าข้าพเจ้าหาปุ่มเปลี่ยน password ไม่เจอครับ แต่ก็หามีเสียงตอบรับจากเลขหมายที่ท่านเรียกไม่

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

แต่มองรอบแรกผมก็ยังไม่เห็นนะครับ เพราะปุ่มมันเล็กมาก ถึงจะวางไว้ข้างบนสุดก็โดนความเด่นของอีเมล์บังอยู่ดี ผมต้องมองตั้ง 2 รอบแหน่ะกว่าจะเห็น

สรุปก็คือ อยากให้ wongnai เปลี่ยน password ได้ทั้งใน iPhone และทำให้ปุ่มเปลี่ยน password มันเด่นกว่านี้อีกหน่อยครับ ไม่งั้นจะมีลูกค้าตาเบลอแบบผมโวยวายอีกเยอะ :)

วิธีการนำเสนอ Presentation เจ๋งๆ

มี 2 อันครับ
อันแรกพูดถึงเรื่อง Simplicity ซึ่งเอามา apply ใช้กับการทำ UI ได้

อีกอันวิธีการ present แบบท่านศาสดา Steve Jobs แห่ง Apple ครับ

วิจารณ์ UI ของ application บน iPhone (Budget Planner)

ไปอ่านเจอ โพสต์นี้ของ Smashing แล้วน่าสนใจเลยเอามาแชร์ครับ

App ที่เค้าเอามาวิเคราะห์ชื่อ Budget Planner ครับ มันเอาไว้วางแผนรายรับรายจ่ายในแต่ละเดือน

ดู UI ปัจจุบันนะครับ

ก็จะมีให้กรอกว่าเรามีรายรับรายจ่ายอะไรได้ แบ่งเป็นประเภทยังไง

จากนั้นมันก็จะสรุปออกมาให้เราเป็นปฏิทินว่าแต่ละวันเราจะเหลือเงินเท่าไรบ้าง ถึงปลายเดือนแล้วหมดตัวรึเปล่า ก็ว่ากันไป

คราวนี้คุณ Alex ที่เป็นคนวิจารณ์ App นี้เค้าก็อธิบายปัญหาใหญ่สุดของ UI ขอ App ตัวนี้คือหน้าปฏิทินนั่นเอง คำอธิบายตามนี้ครับ

ขออนุญาติยกมาแปลนะครับ

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

เค้าก็เลยเสนอให้ทำแบบนี้

ออกมาเป็นกราฟเส้นซะเลย!

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

สามารถ zoom in/out ได้ แล้วก็ pan ไปมาเพื่อดูยอดแต่ละเดือนได้

เรียกว่าแก้ข้อบกพร่องที่เค้าบอกหมดเลย แถมใช้ feature touch ของ iPhone ได้คุ้มค่าอีกด้วย

แก้แบบนี้น่าจะ work จริง รับรองว่าโปรแกรมเมอร์แก้ไม่เหนื่อยฟรีแน่ :)

ตัวอย่างหน้า Error สุด Cool ของเว็บดังๆ ปี 2010

เว็บยิ่งฮิตยิ่งมีคนเข้าเยอะ มันก็ต้องมีล่มบ้างอะไรบ้าง หรือไม่บางที link เสียเข้าไม่เจอก็ต้องมี error บ้างเหมือนกัน

ตอนนี้เว็บเมืองนอกกำลังฮิตทำ mascot เวลามี error พวกนี้ เวลาคนเข้าเว็บแล้วจะได้หายเครียด (หรือเครียดกว่าเดิม)

มาดูกันดีกว่าว่ามีตัวอะไรบ้าง จะได้เป็น idea เวลาเว็บของตัวเองมี error

Twitter

ฮิตสุดตอนนี้ไม่มีอะไรเกินปลาวาฬ twitter ไปได้ ใครที่บอกว่าตัวเองเป็นเซียน twitter แต่ไม่เคยเห็นหน้านี้แปลว่า ไม่ใช่เซียนตัวจริง (เพราะพี่ twitter แกล่มบ่อยมาก)

FourSquare

ใครๆ ก็เห่อ check-in กัน ขยับทีนึงก็ check-in ตลอด

Bit.ly

เว็บ shorten urls ที่ฮิตที่สุดในโลก

Digg

ต้นฉบับ web digg แห่งแรกของโลก

Reddit

เว็บข่าวสุดฮิต (แต่ตอนนี้เริ่มไม่ฮิตเท่าไรแล้ว)

เว็บไทยมีแบบนี้บ้างมั้ยหนอ ถ้าใครเคยเห็นรบกวนแจ้งด้วยนะครับ จะได้ไปหาข้อมูลมาลง

การทำ Wireframing สำหรับออกแบบเว็บ

การเริ่มต้นออกแบบ interface ที่ดีควรจะเริ่มต้นจากการทำ wireframe เสียก่อน ว่าแต่ wireframe มันคืออะไรล่ะ?

Wireframing คือการออกแบบโครงสร้างของสินค้า (ถ้าเป็นทำเว็บก็คือการออกแบบโครงร่างหน้าเว็บ) โดย wireframe นั้นจะประกอบไปด้วยส่วนประกอบต่างๆ ในหน้าเว็บเท่านั้น จะไม่มีการลง detail เรื่อง design แต่อย่างใด คือจะไม่พูดว่าตรงนี้สีแดง ตรงนี้สีเขียว แต่จะว่ากันด้วยเรื่องว่า ในหน้าเว็บนี้จะประกอบไปด้วยอะไรบ้าง และจะวางมันไว้ตรงไหน

ดูตัวอย่างประกอบ

นี่คือตัวอย่างของ wireframe ซึ่งสิ่งนี้เป็นสิ่งที่ต้องทำให้เสร็จก่อนที่จะให้เหล่าทีม designers เริ่มทำงาน

ดูอีกตัวอย่างครับ

อันนี้เป็นตัวอย่างอีกอันของ wireframe สำหรับทำร้านขายเพลง

การทำ wireframe ก็คือการวาง layout ของหน้าเว็บก่อนเอาไปเริ่ม design จริงๆ นั่นเอง การทำ wifeframe ที่ดี ต้องทำออกมาแล้วคนในทีมดูรู้เรื่อง อย่างภาพด้านบนนี่จะเห็นว่าการใช้ปุ่มและคอนโทรลต่างๆ เข้าใจง่ายมาก คือมองปุ้บก็รู้ว่า อ้อ นี่คือ TextBox นะ มีไว้สำหรับให้ผู้ใช้พิมพ์ข้อมูล, อันนี้คือช่องเอาไว้ใส่รูปนะ เป็นต้น

การทำ wireframe มีประโยชน์หลักๆ 2 ประการคือ

  1. ช่วยให้เราเห็นภาพองค์ประกอบทั้งหมดในเว็บว่ามีอะไรบ้าง, ขาดตกบกพร่องอะไรรึเปล่า, วางตำแหน่งดีหรือยัง ก่อนที่จะเริ่มทำจริง
  2. ทำให้ผู้ร่วมงานของเราเข้าใจความต้องการ (requirement) ของเราได้ง่ายและชัดเจนขึ้น

สำหรับ tools ที่ใช้ทำ wireframe มีเยอะมากครับ ที่ฮิตใช้กันเยอะๆ ก็คือ Microsoft Visio นั่นเอง

การทำ Web usability testing แบบไม่ต้องลงทุน

หลายๆ คนก็พอจะรู้จัก usability กันมาบ้างแล้วว่ามันคืออะไร ตอนนี้เราจะมาพูดถึงเืรื่องการทำ Usability testing ครับ

Usability testing นั้นก็คือวิธีการทำ test แบบหนึ่ง แต่ไม่เหมือนการ Test software แบบธรรมดานะครับ เพราะคนที่จะช่วยเราทำ usability testing ไม่จำเป็น ที่จะต้องมีความรู้พื้นฐานด้านคอมพิวเตอร์มากนัก ยิ่งเป็นการทำ Web usability testing นี่ยิ่งควรจะให้คนที่ไม่ได้เรียนคอมมาทำให้เลยครับ

Web usability testing นั้น สามารถทำเองได้ง่ายมากโดยไม่ต้องลงทุนอะไรเยอะ ขั้นตอนในการทำประกอบด้วย

1. กำหนดกลุ่มเป้าหมาย

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

  1. ผู้ซื้อ
  2. ผู้ขาย

2. กำหนดเป้าหมายในการทดสอบ

หลังจากรู้แล้วว่า กลุ่มลูกค้าของเว็บเราคือใคร เราก็ต้องมามองว่า เราต้องการจะทำ usability testing เพื่ออะไร เช่น

  • ทำเพื่อทดสอบว่าระบบการซื้อสินค้าปัจจุบันใช้งานง่ายรึเปล่า เวลาคนมาซื้อสามารถทำรายการสั่งซื้อได้สำเร็จหรือไม่
  • ทดสอบระบบการเพิ่มสินค้าว่าสามารถใช้งานได้ง่ายหรือไม่

ต้องกำหนดออกมาอย่างชัดเจน ว่า function อะไรคือสิ่งที่คุณอยากจะปรับปรุง (ถ้าอยากจะปรับปรุงทั้งเว็บเลยก็ขอให้ใจเย็นๆ ครับ ค่อยเป็นค่อยไป)

3. สร้าง Script สำหรับการทดสอบ

หลังจากรู้แล้วว่าจะทดสอบอะไรกับใคร คุณก็ต้องเขียน script ออกมาว่า ในการทดสอบนั้นคุณจะให้เค้าทำอะไรบ้าง

นี่ืคือตัวอย่าง script อย่างย่อสำหรับทดสอบระบบการหาสินค้าและสั่งซื้อสินค้าครับ

ให้คุณทำการเข้าเว็บ www.xxx.com เพื่อทำการซื้อสินค้าชื่อ “แปรงสีฟันซิสเทมม่า” และใำห้ทำการชำระเงินผ่านบัตรเครดิต

เป็นไงครับ ง่ายและสั้นมั้ยครับ? นีคือวิธีที่ง่ายที่สุดในการเริ่มต้นทำ usability testing ครับ ดังนั้น ยังไม่ต้องลงรายละเอียดมากนัก (ผมจะเขียนถึงการเขียน script อย่างละเอียดในโพสต์ต่อๆ ไปนะครับ)

4. รับสมัครคนมาทดสอบ

คุณรู้กลุ่มเป้าหมายคุณอยู่แล้ว ตอนนี้ก็ต้องไปหาคนเหล่านั้นมาครับ เริ่มต้นแค่ 3 คนก็พอ อาจจะชวนเพื่อนๆ คุณมาก็ได้ บอกเค้าว่ามาช่วยเล่นเว็บหน่อย เสร็จแล้วเดี๋ยวพาไปเลี้ยงข้าวตอบแทน :)

คุณผู้อ่านอาจจะสงสัยว่า 3 คนจะพอเหรอ กลุ่มตัวอย่างนี้น้อยไปหรือเปล่า คำตอบก็คือ ถ้าคุณมีงบเพียงพอก็ควรจะจ้างมากกว่า 3 คนครับ แต่นี่เนื่องจากเป็น usability testing แบบลงทุนน้อยเลยใช้แค่ 3 คนก็พอ

5. ทดสอบ!

ก่อนที่จะให้คนที่คุณหามาเริ่มทำการทดสอบ คุณต้องเตรียมสภาพแวดล้อมในการทดสอบให้เค้าก่อนนะครับ

ในการทำ usability testing แบบหรูๆ แพงๆ เค้าจะพวกคนที่มาทดสอบ (เรียกว่า subject ละกัน) เข้ามานั่งในห้องคอมพิวเตอร์ที่มีกล้องวงจรปิด และกระจกให้ผู้สังเกตุการณ์ (เรานั่นเอง) นั่งดู ทุกอย่างที่เค้าคลิก ทุกอย่างที่เค้าพูดจะถูก record ไว้หมด … คล้ายๆ กับเรียกเ้ข้ามาสอบปากคำน่ะครับ :)

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

ตอนที่เค้าเริ่มทำ usability testing สิ่งที่สำคัญมากอย่างนึงก็คือ เวลาเค้าคิดอะไรหรือจะทำอะไร เค้าต้องคิดออกมาดังๆ ครับ นั่นก็คือต้องพูดออกมาเลย เช่น ถ้าเค้ากำลังหาปุ่ม search อยู่ เค้าก็ต้องพูดออกมาเลยว่า “เนี่ย ปุ่ม search อยู่ไหนน้าาา”

นี่คือเหตุผลที่เราต้องอัดเสียงเค้าไว้ด้วย

6. สอบถามกลุ่มผู้ทดสอบ

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

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

7. รวบรวมและปรับปรุง

สุดท้ายก็คือการรวบรวมสิ่งที่ได้รับมาและนำเอามาเข้าประชุมว่าจะปรับปรุงมันยังไง หลังจากปรับปรุงเสร็จก็ควรจะทำ usability testing ซ้ำอีกครั้งหนึ่งกับกลุ่มทดสอบคนใหม่

นี่คือวิธีการทำ usability testing แบบต้นทุนต่ำและเห็นผลไวครับ ใครไปทำแล้วได้ผลยังไงก็เอามาเล่าให้ฟังบ้างนะครับ