10 คำคมเจ๋งๆ ในรูปแบบกราฟฟิคสวยๆ

คำคมเจ๋งๆ ในวงการ Designer มีมากมาย คำที่หลายๆ คนน่าจะเคยได้ยินก็คือ

Good artists copy, Great artists steal.

เค้าก็ทำออกมาเป็นภาพสวยๆ แบบนี้

นอกจากนี้ก็ยังมี

และอีก 8 อันที่เหลือไปดูเต็มๆ ได้ที่

http://freshbump.com/special/10-design-quotes-designed/

หวังว่าคงจะเป็น inspiration สำหรับบางคน

Don’t make me think (แนะนำหนังสือ)

วันนี้มีหนังสือมาแนะนำครับ เป็นหนังสือคลาสสิคเล่่มหนึ่งเกี่ยวกับ web usability

ชื่อหนังสือตามหัวข้อครับ

Don’t make me think

แปลชื่อหนังสือเป็นภาษาไทยก็คงประมาณว่า

“อย่าให้กรูต้องคิดได้มั้ย (สาดดด)”

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

อันนี้เป็นตัวอย่าง content ภายในคร่าวๆ จาก amazon ครับ

1. Don’t make me think: คนเล่นเว็บทั่วไปไม่ต้องการคิดมาก เค้าต้องการให้ทุกอย่างมันง่ายและอธิบายชัดเจนได้ด้วยตัวเอง เวลาคนเล่นเว็บเค้าจะ

a. ไม่อ่านทีละบรรทัดแต่สแกนคำเด่นๆ เอา

b. ตัดสินใจตามอารมณ์ คลิกไปทั่ว

c. เดาเป็นหลัก

2. พร้อมที่จะคลิกหลายๆ ครั้งตราบใดที่ทุกครั้งที่เขาคลิกมันมีความหมายอะไรซักอย่าง

3. ตัดคำรกๆ ออกให้หมดครึ่งนึง…พอตัดเสร็จแล้วก็ให้ตัดคำที่รกๆ ออกให้หมดอีกครึ่งนึงอีกรอบ (สรุปแล้วตัดสองรอบ)

ก็คือศาสตร์ของ usability นั่นเอง

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

ใครที่สนใจด้านนี้อย่าลืมไปซื้อหามาอ่านนะครับ สั่ง amazon 26 เหรียญเอง

UI-patterns เว็บห้องสมุดรวบรวม ui pattern ที่มีประโยชน์ (แนะนำเว็บ)

วันนี้มีเว็บที่ผมเข้าประจำและมีประโยชน์มากๆ สำหรับคนที่ทำเกี่ยวกับ UI มาแนะนำครับ

ชื่อเว็บว่า UI-patterns

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

ขั้นตอนการใช้งานแบบ Step

step pattern

สมัีครสมาชิก

lazy registration pattern

Tag Cloud

tag clouds pattern

Paging

pagination pattern

และอื่นๆ อีกมากมาย

ลองคลิกตามเข้าไปเล่นได้ครับ ในเว็บจะไม่ได้มีแค่ภาพเท่านั้น เค้าจะมีคำอธิบายด้วยว่า ปัญหาของการออกแบบ UI pattern นี้มาจากไหน และเหตุผลกลใด ถึงต้องทำให้ UI ออกมาหน้าตาแบบนี้

ความรู้เพียบครับ ลองเข้าไปติดตามกันได้เลย

UI-patterns คลิกโลดดดด

Tutorial เพื่อสร้าง User Experience ของ Treasure Hunter

หลังจากโพสที่แล้วผมเอา collection ของ tutorial จากเกม FarmVille มาลง วันนี้เอาของอีกเกมจากค่าย Zynga ชื่อเกมว่า Treasure Hunter มาให้ดูครับ

ไป step by step กันเลยดีกว่า :)

เข้าเกมมาก็จะเจอ introduction ของเกมว่าเกมนี้มีจุดประสงค์อะไร อันนี้ต้องทำให้สั้นกระชับไว้

Zynga ยังคงเน้นตัวละครน่ารักๆ เหมือนเดิม ทีมงานกราฟฟิคน่าจะเป็นทีมเดิมจาก FarmVille

พอเข้าสู่ tutorial เค้าก็จะสอนให้เราขุด อันนี้ก็คือคลิกที่พื้นแล้วคลิกไปเรื่อยๆ กดอย่างอื่นไม่ได้เลย ต้องขุดอย่างเดียว

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

อันนี้เป็นความตั้งใจของ Zynga เองที่อยากให้คนที่เคยเล่นเกมของเค้าแล้ว สามารถเล่นเกมใหม่ๆ ที่ผลิตออกมาได้ง่ายและทำความเข้าใจได้อย่างรวดเร็ว

หลังจากขุดไปซักพักก็จะได้ archivement ให้เรารู้สึกดีใจนิดนึง สามารถแชร์แบ่งปันให้เพื่อนๆ รู้ได้ตามสูตรสำเร็จของเกมบน social network

ถ้าเราพยายามทำอย่างอื่นที่นอกเหนือจากที่ tutorial เค้าบอกไ้้ว้ก็จะโดนขัดขวางครับ อย่างตอนนี้ผมพยายามจะหนีออกจากเกาะ แต่มันไม่ยอม

วิธีการหลีกเลี่ยงความผิดพลาดของผู้ใช้ที่ดีทีุ่สุดก็คือ การไม่ยอมให้เค้าทำผิดพลาดเลยนั่นเอง และนี่คือสิ่งที่ Zynga ทำ

พอขุดๆ ไปอีกซักพักก็จะมีแนะนำให้ชวนเพื่อนๆ มาเล่นครับ นี่ก็อีกสูตรสำเร็จของเกมบน social network การชวนเพื่อนมาเล่นด้วยกันหรือถ้าใช้ภาษาตามหลักการตลาดก็คือ Viral marketing นั่นเอง

พอเราทำตาม tutorial จบ (ขุดจนรอบเกาะ) เราก็จะได้ archivement กลายร่างเป็นเลเวล 2 สามารถซื้อของแปลกๆ ได้มากขึ้น และออกจากเกาะได้แล้ว

เวลาเลเวลอัพก็แชร์ให้เพื่อนๆ รู้บน Facebook ได้เช่นเคย

จบแล้วครับส่วน tutorial ตอนเริ่มเกม Treasure Hunter จะเห็นได้ว่าคล้ายกับ FarmVille มากทีเดียว

นี่อาจจะเป็นสูตรสำเร็จของการทำ tutorial บนเกมบน social network แล้วก็ได้

การทำ Tutorial เพื่อสร้าง User experience ของเกม FarmVille

ณ วันนี้ ในวงการอินเตอร์เน็ต น้อยคนมากถ้าพูดถึงเกมปลูกผักแล้วจะไม่รู้จัก

ใช่แล้วครับ วันนี้เราจะมาพูดถึงเกมปลูกผักกัน :)

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

ใดๆ ในโลกก็ไม่สำคัญเท่า first impression ถ้าคุณทำเกมแล้วไม่สามารถดึงผู้เล่นไว้ให้ได้ตั้งแต่ครั้งแรก กว่าเค้าจะให้โอกาสคุณมาลองเล่นเกมของคุณอีกทีก็คงกินเวลาอีกนานโข และ Farmville สามารถสร้าง first impression ได้ค่อนข้างดีทีเดียว มาดูกันดีกว่าว่าเค้าทำอะไรบ้าง

หลังจากเข้าเกมครั้งแรก เราก็จะเจอกับแถบ loading นี้ครับ ก็ต้องรอจนโหลดเสร็จก่อน

บทเรียนแรกของหน้าจอข้างบนนี้คือ “loading bar นั้นสำคัญไฉน” ถ้าไม่มี loading bar แล้ว คนทีคลิกเข้ามาก็คงงงว่ามันเกิดอะไรขึ้น ทำไมหน้าจอไม่มีอะไรขึ้นมาเลย นี่เรากำลังเข้าเกมจริงหรือเปล่า ดังนั้น ถ้าเว็บของคุณหรือโปรแกรมของคุณโหลดนาน จงอย่าลืมใส่ loading bar เข้าไป

ลองคิดถึงโลกแห่งความจริงด้วย อะไรก็ตามที่ต้องรอ ยกตัวอย่างเช่น ไปธนาคาร เค้าก็จะมีให้กดบัตรคิว นั่นก็คือ 1 ในวิธีของการแสดง loading bar ว่าเราต้องรออีกนานแค่ไหน

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

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

  1. คุณกดตรงอื่นของหน้านี้ไม่ได้เลย
  2. ไม่ว่าคุณจะกดที่รูป หรือ กดที่คำว่า female/male ก็มีค่าเท่ากัน
  3. ถ้าคุณกดปิดมันก็ไม่ให้คุณปิดหรอกครับ (แล้วจะมีปุ่มปิดไว้ทำไมเนี่ย)

หลังจากเลือกเพศเสร็จแล้วก็จะมาเจอกับหน้านี้ ก็คือเริ่มเล่นละ ตอนนี้ถ้าคุณเคยเล่นมาก่อนคุณจะกดอะไรไปเลยก็ได้ รึจะกด skip tutorial ก็ได้

แต่ถ้าคนไม่เคยเล่นก็จะเห็นทันทีว่า อ้อ มันให้เรา Harvest your crops ด้วยการกดปุ่มที่มันชี้ข้างล่างขวานะ (ปุ่มลูกศรนี้จะขยับด้วยนะครับ ทำให้คนเล่นสามารถเห็นได้ง่าย)

Tutorial สำคัญมากสำหรับเกม ทุกเกม ย้ำเลยนะครับ ว่าทุกเกม เพราะการจะให้คนเล่นเกมเราแล้วสนุกได้ เค้าจะต้องเข้าใจเกมเราเสียก่อน การที่จะทำให้เค้าเข้าใจได้ ก็ต้อง “สอน” ให้คนเล่น “เป็น”

ดังนั้นถ้าสอนไม่ดีทุกอย่างก็จบ ถ้าทำ tutorial แล้วคนไม่เข้าใจ ทุกอย่างก็จบ

first impression สำคัญมาก ถ้า tutorial ดี คนเล่นเข้าใจ รับรองว่าเค้ากลับมาเล่นต่อแน่นอน

หลังจากผมกดปุ่มชี้ขวาล่างปุ้บ ลูกศรมันก็จะย้ายมาชี้ที่แปลกผักแทน ก็แปลว่าให้ผมคลิกที่แปลงผักต่อ

สังเกตุนะครับว่า เค้าใส่คำว่า “Click to harvest” ไว้ตรงนี้ด้วย เพราะกลัวคนไม่เข้าใจว่าให้ “คลิก”

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

  1. ทำลูกศรชี้แปลงผัก
  2. ไฮไลท์แปลงผัก
  3. เขียนคำอธิบายเพิ่มอีก

ดังนั้น อย่าคิดว่า ทำแค่อย่างเดียวจะพอ เพราะแต่ละคนมีพื้นฐานความเข้าใจไม่เหมือนกัน

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

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

หลังจากนั้นก็จะมีลูกศรชี้ให้คลิกที่แปลงผัก พร้อมคำอธิบายเช่นเดิม

จากนั้นก็บอกให้ปลูกผัก

แล้วก็มีลูกศรมาให้คลิกที่แปลงปลูกพร้อมคำอธิบาย

ก็จะมีหน้าต่างนี้เด้งขึ้นมา อันนี้โดยส่วนตัวผมไม่ค่อยชอบเท่าไร เพราะคำว่า Market มันยังเด่นไม่พอเลยไม่รู้ว่าอันนี้มันหน้าต่างอะไร

ถ้าเป็นผม ผมจะทำให้ฉากหลังจางไปด้วย คนจะได้รู้ว่า ไม่ต้องสนด้านหลังนะให้สนแต่ด้านหน้า

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

หลังจากนั้นเราคลิกที่แปลงผักแล้ว มันก็จะบอกว่าเรา…Level up แล้ว

ณ จุดนี้ เกมทำให้ผมรู้สึกว่า ผมได้ทำอะไรซักอย่างสำเ้ร็จ มันเหมือนเป็นรางวัลที่ได้รับจากการทำตาม tutorial ซึ่งตัว tutorial เองก็ง่ายมาก

แม้จะเป็นรางวัลเล็กๆ น้อยๆ แต่มันก็ทำให้คนเล่นรู้สึกดีกับเกมนี้ ว่า “เออ มันก็ไม่ได้เล่นยากนะ”

ถือว่าเป็นการสร้างความประทับใจวิธีหนึ่ง

ก็ถือเป็นอันสิ้นสุด อันนี้ก็บอกให้ผมมาเล่นต่อนะพรุ่งนี้

การที่จะบอกให้เรามาเล่นต่อพรุ่งนี้ มันก็ต้องมีสาเหตุ ถ้าบอกว่า “มาเล่นอีกล่ะ” เฉยๆ มันก็ไม่น่าดึงดูดใจเท่าไร

Farmville ใช้วิธี “ให้กลับมาเก็บผักที่ปลูกไว้พรุ่งนี้”

วิธีนี้คือสร้างให้เรามีความผูกพันธ์กับเกมก่อน คือเรามีแปลงผักที่เป็น “ของเรา” ถ้าเรารู้สึกว่าแปลงผักนี้เป็นของเรา แน่นอนว่าเราต้องกลับมาดูแลมัน

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

ทำอะไรก็แล้วแต่ อย่าลืม “User experience” นะครับ

Wikipedia Usability Initiative #3 ผลลัพท์ของ Usability testing

หลังจากตอนที่แล้วเราได้คนมาทำ usability testing แล้ว ตอนนี้จะพูดถึงผลลัพท์ที่ได้จากการทำ usability testing ของ wikipedia

จุดประสงค์ของ usability initiative ครั้งนี้คือการทำให้คนสามารถแก้ไขบทความบน wikipedia ง่ายขึ้น สำหรับผลลัพท์สรุปสั้นๆ ก่อนลงรายละเอียดคือ ผู้ใช้ที่มีอายุมากกว่า 45 ส่วนใหญ่จะไม่กล้าทำอะไรมากเพราะกลัวว่าจะทำให้ระบบของ wikipedia พัง…

ฟังแล้วก็คล้ายๆ แม่ของผมที่บอกว่า ไม่กล้าเปิดเครื่องคอม กลัวกดผิดแล้วเครื่องคอมพัง

ขอเอาความรู้สึกของคนที่มาทดสอบละกันนะครับ ว่าเค้ารู้สึกยังไงบ้าง

รู้สึกว่าตัวเองโง่

การแก้ไขบทความใน wikipedia จะต้องใช้ syntax พิเศษ เช่น การทำให้ตัวหนา, การย่อหน้า ซึ่งสิ่งเหล่านี้ทำให้คนใช้รู้สึกว่ามันใช้ยาก ไม่คุ้นเคย รู้สึกเหมือนตัวเองกำลังเขียนโปรแกรมอะไรอยู่ก็ไม่รู้ คนส่วนใหญ่คาดหวังว่าจะได้เจอวิธีการแก้ไขบทความแบบ microsoft word

นอกจากนี้ icon มากมายที่อยู่บนเมนูก็ไม่ได้ทำให้คนใช้เข้าใจ แม้ว่าแต่ละ icon จะมี tooltip แล้วก็ตามแต่ก็ไม่มีคนยอมใช้ icon อยู่ดี นอกจาก icon “Bold” ซึ่งเป็นรูปตัว B ที่คนกล้าใช้ (ผมเดาว่า icon ตัว B มันเป็น icon ตัวเดียวกับ icon ใน microsoft word)

สรุปประเด็นนี้ได้ว่า

  • Expertise – คนใช้ต้องมีความรู้
  • Level of comfort – สิ่งอำนวยความสะดวกไม่มากพอ และใช้ยาก
  • Lack of consistency – ทำแต่ละอย่างแล้วได้ผลลัพท์ไม่แน่นอน คนใช้ทำผิดพลาดได้่ง่าย
  • Conflicting messages – ใช้คำอธิบายไม่ดีพอ
  • 10 ways to do 1 thing – สามารถทำสิ่งเดียวได้หลายวิธีเกินไป มี 10 วิธีที่จะทำสิ่งเดียวกัน

รู้สึกว่า “มันมากเกินไป”

หลายเสียงบอกว่า

“มีข้อมูลให้อ่านเยอะเกินไป”

“ก็รู้ว่ามี help แต่ขี้เกียจอ่าน”

“แล้วถ้าเขียนไปแล้วมันผิดล่ะ ทำไง? มีคนอ่านใน internet ตั้งเยอะ”

มีหลายคนเคยบอกว่า UI ที่ีดี ไม่ต้องการ help เยอะๆ และจากการทดสอบครั้งนี้ก็เห็นได้ชัดเลยว่า “ไม่มีใครต้องการอ่าน help ที่ยาวเกินไป” ดังนั้นถ้าต้องอ่าน help เกิน 5 นาที เพื่อที่จะใช้เว็บของคุณ…

ขอให้ทำใจได้เลยว่าเว็บคุณไม่มีคนใช้แน่นอน

ชอบที่จะเรียนรู้จากตัวอย่างมากกว่าการอ่าน help

wikipedia ขอให้คนลองแก้ไข article ต่างๆ

wikipedia คาดหวังว่าคนเหล่านี้จะเปิด help เพื่อดูวิธีการแก้ไข แต่คนเหล่านั้นกลับไปหาตัวอย่างที่ทำในสิ่งเหล่านั้นแล้วคัดลอกเอาแทน สรุปจุดนี้ก็คือ คนชอบดูตัวอย่างแล้ว copy มากกว่าการอ่าน help แล้วเริ่มต้นทำเอง

อันนี้เป็นคร่าวๆ นะครับ เข้าไปดูแบบละเอียดได้ ที่นี่

มีอีกอันนึงที่น่าสนใจมากแต่ wikipedia ไม่ได้จัดไว้เป็นหัวข้อ สิ่งนั้นคือ

“ถ้าคน search แล้วไม่เจอใน wikipedia คนจะหนีไปใช้ google ทันที!”

Wikipedia Usability Initiative #2 ภาคหาคน

หลังจากเราเข้าใจถึงวิธีการทำ usability testing คร่าวๆ จาก ภาค 1 แล้ว วันนี้เราจะมาต่อกันในรายละเอียดวิธีการหาคนมาทดสอบที่ Wikipedia ใช้ Continue reading

Wikipedia Usability Initiative

หลายๆ คนอาจจะได้ข่าวมาแล้วว่า wikipedia กำลังทดสอบหน้าเว็บใหม่ที่ได้รับการออกแบบมาเพื่อให้คนใช้ได้ง่ายขึ้น

ว่าง่ายๆ ก็คือทำให้ Usability ของ wikipedia ดีขึ้นนั่นเอง Continue reading

ความเป็นอันหนึ่งอันเดียวกัน (เอกภาพ)

ช่วงนี้ผมเข้าไปเล่นในบอร์ด SEO (http://www.thaiseoboard.com) ค่อนข้างเยอะ ได้เห็น website ที่หลายๆ คนทำออกมาให้เพื่อนๆ ช่วย review มากมาย ผมก็ไปช่วย review ด้วย

Continue reading

inspireUX – เว็บรวมคำคมเจ๋งๆ เกี่ยวกับ design

วันนี้มาแนะนำ website สุดเท่ห์ของเมืองนอกที่เค้ารวบรวม quote เจ๋งๆ เกี่ยวกับ design experience เอาไว้

เว็บนี้ชื่อว่า inspireUX Continue reading