สวัสดีครับ ยินดีต้อนรับสู่ Human see design podcast นะครับ คุณอยู่กับ สกล ธีระวรัญญู  วันนี้ก็เป็นวันที่ 23 ตุลาคม วันนี้ก็เป็นวันปิยะมหาราชนะครับ ก็เป็นวันหยุดราชการ  หลายท่านที่ทำราชการก็คงหยุดอยู่กับบ้านพักผ่อนนะครับ ก็มาสบายๆกันนะครับวันนี้

วันนี้จะมา Review หนังสือชื่อ Do not make me think เป็นหนังสือที่ผมได้มานานแล้วแต่เป็นภาษาไทย ผมซื้อผ่านทางคิโนคุนิยะ ชื่อภาษาไทยคือ แค่ต้องคิด ก็ผิดแล้ว ตัวเรื่องก็จะจ่อหัวว่าออกแบบเว๊ปไซด์ และโมไบล์ ให้เข้าใจง่ายๆ และไม่ต้องใช้สมอง หนังสือเล่มนี้เขียนโดย สตีพ คล็อก มีอาชีพเป็น UX เขาเปิดบริษัทที่ชื่อว่า Advanced common sense แค่ชื่อบริษัทเขาก็เก๋ดีนะครับ หนังสือเล่มนี้ถือเป็นเล่มที่ 3 ที่เขา revised 

ในบทแรกเขาจะพูดถึงกฎของ Usability นะครับ Usability หมายถึงสิ่งที่ใช้งานง่าย เข้าใจง่าย ไม่ซับซ้อน อาจจะเป็นการใช้งานผลิตภัณฑ์ เว๊ปไซด์ หรือมือถือก็ได้ เขาบอกว่า  กฎแห่ง usability จะแบ่งแยก เว๊ปดีไซน์ที่ดีออกจากเว๊ปห่วยๆ (อันนี้ผู้แปลเขียนนะครับ) คำว่า do not make me think หรือ อย่าให้ฉันคิดเยอะหมายความว่า เว๊ปเพจจะต้องชัดเจนในตัวเอง self-evidence เข้าใจง่าย Obvisous และสื่อความหมายได้ด้วยตนเองหรือ self-explanatory ไม่ต้องอธิบายมาก

ยกตัวเช่น เวลาคุณเข้าเว๊ปไซด์หรือ app คุณจะเริ่มสงสัยอะไรหลายอย่าง เช่น นี่ใช่เมนูหรือเปล่าหรือว่าอยู่ตรงนั้นกันแน่ รูปนี้คลิ๊กได้หรือเปล่าหรือเป็นไอคอน เห็นไหมครับว่าผู้ใช้เริ่มคิดมากแล้ว แล้วจริงๆ คนเราใช้เว๊ปไซด์กันยังไง ในความเป็นจริงไม่มีใครอ่านเว๊ปไซด์ทั้งหน้า เขาแค่มองมันแบบผ่านๆ ดีไซนเนอร์มักจะให้ข้อมูลมากเกินไป แต่ผู้ใช้ต้องการที่จะบรรลุงาน เช่น อยากซื้อตั๋วออนไลฯ์ก็จะมองแค่การจองตั๋ว เขาเปรียบเทียบว่า สุนัขชื่อจินเจอร์ ได้ยินเจ้านายเรียกและพูดกับมันอย่างเคร่งเครียด แต่สุนัขจะได้ยินคำว่าว บลา บลา บลา จินเจอร์ บลา บลา บลา จินเจอร์ บลา บลา บลา

ในการออกแบบผู้เขียนให้ทิปต่างๆ ดังนี้นะครับ ใช้ประโยชน์จาก conventions คือ รูปแบบข้อตกลงทางความคิดของคนทั่วไป แทนที่จะ Reinvent the wheel เช่น เว๊ปเพจข่าวก็จะมีรูปแบบที่ตายตัว เช่น เป็นคอลัมภ์  

  • สร้างลำดับขั้นในการนำเสนอ (visual hierachy) ในแต่ละเพจ 
  • แบ่งหน้าเพจออกเป็นส่วนๆ ที่สื่อความหมายชัดเจน เช่นใช้การจัดกลุ่ม หรือ คอลัมภ์เข้าด้วยกัน
  • ออกแบบส่วนที่คลิกได้ให้มองเห็นและเข้าใจง่าย
  • กำจัดสิ่งล่อลวงต่างๆ ออกไปให้หมด เช่น พวก Pop-up, animation โฆษณา และความไม่เป็นระเบียบของเพจอาจจะใช้ตารางกริดเข้ามาช่วยจัดองค์ประกอบ
  • ออกแบบหน้าเพจที่เหมาะกับการอ่านแบบผ่านๆ เช่น ใช้ Heading เยอะๆ  แต่ละย่อหน้าสั้น(Paragraph) ใช้การแบ่งหัวข้อ (Bullet) เน้นคำสำคัญ (Highlight)
  • ระบบนำทางเว๊ปไซด์ (Navigation)

ปกติเราจะหาอะไรซักอย่างก็จะมีสองวิธีคือ หาเอง หรือ ถามหาตัวช่วย ถ้าเราหาเองก็หาตามป้ายหรือ ไอคอนนำทางแล้วเข้าใกล้ข้อมูลตามลำดับชั้น เช่น กดปุ่มหาซื้อเครื่องมือช่าง คุณก็กดคำว่าเครื่องมือ แล้วก็ลึกลงไปเป็นตัวเลือก ที่เป็นเครื่องมือไฟฟ้า เครื่องมือใช้แรงมือ และเครื่องขัดกระดาษทราย แต่ถ้าสุดท้ายคุณคลิกต่ไปแล้วไม่เจออะไร ลูกค้าก็จะจากไป ปัญหาส่วนของเว๊ปไซด์คือ ไม่มีการบอกขนาดของเว๊ป เราไม่รู้ว่าข้างในมีจำนวนหน้าอยู่เท่าไหร่ บางทีอาจจะเป็น 50, 1000 หรือ 17,000 หน้า ไม่มีความรู้สึกถึงสถานที่  เช่น ถ้าเราจะหาซื้อของในร้านเซเว่น เราจะรู้ว่าของอยู่ตรงไหนของชั้น แต่บนเว๊ปไซด์ที่เป็นดิจิทัล อาจจะยากที่จะระบุ

เวลาออกแบบไม่ให้คนหลงทางก็ให้นึกถึงป้ายบอกชื่อถนนที่หัวมุม ผมชอบเวลาไปสหรัฐอเมริกา ตรงสื่แยกจะมีป้ายค่อนข้างเคลียร์ว่าอยู่บนถนนอะไร  ป้ายพวกนี้ก็คือ Page name นี่แหละครับ ส่วนหนึ่งที่บอกว่าเราอยู่ที่ไหนก็ใช้คำว่า You are here เหมือนในแผนที่ เราก็จะ Highlight ว่าเราอยู่บนไหนของ Breadcrumbs หรือเส้นทางการเดินทางบนเว๊ป

คราวนี้มาพูดถึงเรื่องการทดสอบ Usability กันนะครับ เขาเสนอแนะว่าทีมงานพัฒนาเว๊ปทุกๆ ทีมจะต้องใช้เวลาเดือนละครั้งในตอนเช้าเพื่อทำการทดสอบ Usabiity เขาอยากให้ทำ Usability แบบ Do-it-yourself ตลอดช่วงของการพัฒนาผลิตภัณฑ์ คราวนี้จะเลือกใครเข้ามาร่วมทดสอบ เราจะเอากลุ่มเป้าหมายดี หรือจะเอาคนทั่วไป ในเริ่มแรกเขาบอกว่าอย่าซีเรียสกับการคัดคน คือถ้าเราหากลุ่มเป้าหมายได้ก็ดี แต่ถ้าไม่ได้ก็ปล่อยให้มันคลาดเคลื่อนบ้างก็ได้