อย่าทำให้ฉันคิดมากนะจ๊ะเธอ (Don't Make Me Think) ตอนที่ 1

ในวงการ User Interface Design คงจะเป็นไปไม่ได้ที่จะไม่กล่าวถึงผู้แต่งหนังสือ Don’t Make Me Think (อย่าทำให้ฉันคิดมากนะจ๊ะเธอ) ซึ่งผมแปลซะเป็นเหมือนชื่อเพลงเลยเนอะ หนังสือเล่มนี้ หัวหน้าผมแนะนำให้รู้จักเป็นครั้งแรก และได้เป็นเหมือนแรงบันดาลใจให้กับผมที่จะอยากเป็น UI designer มืออาชีพตัวจริงเหมือนกับผู้แต่ง – Steve Krug (สตีฟ ครูค)

ด้วยภาษาที่ใช้อธิบายอย่างง่ายๆ พูดตรงไปตรงมา เหน็บแนมนิดๆ จิกเล็กๆ พร้อมภาพตัวอย่างประกอบอย่างละเอียดทำให้หนังสือเล่มนี้เป็นที่โจษจันกันมากในวงการ User Interface Design อาชีพที่ Steve Krug ทำอยู่เป็นอาชีพที่ง่ายๆ สบายๆ (UI consultant, ที่ปรึกษาด้าน User Interface) แต่ต้องใช้ความรู้ระดับเทพ ลูกค้าของเค้าจะเป็นบริษัทต่างๆ มากมายที่มีเว็บไซต์และส่งหน้าเว็บให้เค้าวิจารณ์ในข้อที่ควรปรับปรุง โดยกระบวนหาคำตอบเหล่านี้ก็มีเรื่องการสัมภาษณ์ผู้ใช้งานด้วยวิธีการที่ผมเคยลงไปในบทความตอน รู้จักท่านเซอร์ยูสเซอร์ ครับ ยากนะ ถ้าลองได้ทำดู

หนังสือเล่มนี้ได้พยายามวางกฎหลักการออกแบบ UI กว้างๆ ไว้ 3 ข้อ แต่ละข้อเป็นข้อที่ฟังแล้วมันง่ายเอามากๆ แต่ก็เป็นสิ่งที่คนส่วนใหญ่มักจะทำผิดจริงๆ แล้วก็พอฟังแล้วก็ยังทำผิดอีก มันเป็นเช่นนั้นจริงๆ ครับ

กฎการออกแบบ UI ของ Steve Krug ทีมีอยู่ 3 ข้อ ได้เล่าถึง UI ที่ดีควรมีลักษณะ:

อย่าทำให้ฉันคิด (Don’t make me think)
แต่ละคลิกต้องไม่คิดและไม่ซับซ้อน (It doesn’t matter how many times I have to click, as long as each click is minless, unambiguous choice)
อย่ามากเกิน (Get rid of half the words on each page, then get rid of half of what’s left)

กฎข้อที่ 1 อย่าทำให้ฉันคิด (Don’t make me think)

Steve Krug ได้รับการถามจากผู้อ่านว่า กฎข้อไหนสำคัญที่สุดในการออกแบบ UI แล้วเค้าก็ได้สรุปออกมาเป็นคำตอบเดียวที่ทำให้หลายๆ คนชวนต้องคิดด้วยใจความที่ว่า UI ที่ดีต้องไม่ทำให้ยูสเซอร์คิด แต่คนที่ต้องคิดต้องเป็นคนออกแบบ (เหนื่อย designer ว่างั้นเถอะ)

มาดูตัวอย่าง UI ที่ทำให้เราต้องคิดกัน

ตัวอย่างแรกผมเอามาจากเว็บ set.or.th สำหรับชาวแมงเม่าที่ต้องคอยหาข้อมูลหุ้นอยู่เป็นเนืองนิตย์ ถ้าเป็นยูสเซอร์ที่พึ่งเข้ามาใช้เป็นครั้งแรก คงต้องงงเป็นลำดับอย่างตามในรูปเป็นแน่ว่า ต้องใส่ชื่อหลักทรัพย์ที่ช่องไหนกันแน่เนี่ย สุดท้ายผมคิดว่าหลายคนคงต้องไปคลิกเอาตัวเลือกสุดท้าย (หมายเลย 3) เพราะมันเล่นเขียนซะชัดเจนว่า “ชื่อย่อ”และมีไอคอนแว่นขยายอยู่ข้างหน้าอีก พอคลิกเข้าไปเท่านั้นแหละ ก็ต้องเจอรายชื่อหลักทรัพย์ทั้งหมด แบ่งตามตัวอักษร (หมายเลข 5) ก็พอหาได้อยู่หรอก แต่ก็เสียเวลาไปไม่น้อยเลย

สิ่งที่ยูสเซอร์คาดหวังคือ ใส่ชื่อย่อตรงช่องค้นหา (หมายเลข 2) แล้วปรากฏข้อมูลหุ้นตัวนั้นๆ ออกมาเลย แต่ตรงช่องหมายเลข 2 นี่ซิ ดันไปเขียนเป็นภาษาอังกฤษว่า ‘Get quote’ แม้เลือกดูเป็นภาษาไทยอยู่ก็ตาม อีกทั้งคำศัพท์นี้ดูจะไม่ค่อยคุ้นหูคนไทยเราเท่าไรนัก สรุปว่า ไอ้คำช่วยในช่องค้นหานี่ มันไม่ช่วย แถมยังทำให้เราต้องปวดหมองอีก แปลก็ไม่ออก แปลออกก็ยังงง มันจะ “รับคำอ้างอิง” (แปลตรงๆ เลย) อะไรหรือ งงเอามากๆ ทำให้ยูสเซอร์คิดขนาดนี่ ไม่ดีนะเห็นม่ะ

วิธีแก้ไขก็ง่ายนิดเดียวครับ แค่เปลี่ยนคำ ผมไม่รู้ว่าทำไม web master ของ SET เค้าไม่ทำนะ ถ้าเป็นผม ผมจะทำแบบนี้ครับ

จะเห็นว่าช่องแรกผมแก้คำจาก Google search ให้เป็น ‘ค้นหาข้อมูลหลักทรัพย์‘ ตรงตัว ตรงฟังก์ชันเลยครับ คือ เราจะใส่อะไรลงไปในช่องนี้ก็ได้ แล้วมันจะไปหาข้อมูลทั้งเว็บที่เกี่ยวข้องกับคำค้นนั้นๆ

ต่อไปช่องที่สอง ผมเปลี่ยนจากคำว่า ‘Get Quote’ เป็น ‘ใสชื่อย่อหลักทรัพย์‘ เห็นไหมครับ ตรงๆ เลย คำใบ้ควรเป็นลักษณะข้อมูลที่ต้องการให้ยูสเซอร์กรอก ไม่ใช่คำที่ทำให้ฉงน

ปุ่มสุดท้าย ผมตัดเอาไอคอนแว่นขยายออกไป เพราะเดี๋ยวจะทำให้งง แล้วเพิ่มคำว่า ‘ดู‘ ไปข้างหน้า ถ้ามีพื้นที่อีก ผมจะเขียนไปเต็มๆ ว่า ‘ดูชื่อย่อหลักทรัพย์(ทั้งหมด)‘ การที่ตัดเอาไอคอนออก เพื่อลดความเด่น เพราะผมเชื่อว่า คนส่วนใหญ่จะใช้ฟังก์ชันค้นหาช่องที่ 2 (ใส่ชื่อย่อหลักทรัพย์) มากที่สุด

เว็บ settrade.com ก็เป็นเหมือนกันครับ คำใบ้ในช่องกรอกข้อมูลควรจะใบ้ว่าต้องการให้ยูสเซอร์กรอกข้อมูลประเภทไหน ในที่นี่ก็คือ ตัวย่อของหลักทรัพย์ น่าจะดีกว่าครับ

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

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

งั้นเราดูกันว่า เว็บระดับโลกเค้าทำช่องค้นหากันอย่างไร

เว็บ Barnes & Noble ร้านหนังสือออนไลน์ที่ใหญ่เอามากๆ แต่เดี๋ยวนี้ก็มีสินค้าอย่างอื่นขายเช่นกันครับ แต่สิ่งที่เค้าทำคือ ช่องเลือกประเภทค้นหาสินค้า และตั้งค่าให้ “หนังสือ” เป็นตัวเลือกแรกที่เข้ามาเจอครับ เพราะเค้าขายหนังสือเป็นหลักนี่นา

พอมาดูตัวเลือกที่เค้าให้เราค้นหา มีอะไรบ้างล่ะ

โห! เยอะใช่ไหมครับ แต่ก็เข้าใจได้ไม่ยากว่ามันคือประเภทสินค้านั่นเองครับ ผมยังสามารถเลือกค้นหาจากทุกหมวดหมู่ได้อีกด้วย โดยการเลือกอันแรก ‘All Products’ แต่เห็นไหมครับ ตัวเลือกที่สองที่เป็น Books (หนังสือ) กลับเป็นตัวเลือกเริ่มต้น เพราะเค้าเริ่มต้นและขายหนังสือเป็นหลักไงครับ

พอมาย้อนดู SE-ED ที่มีตัวเลือกให้เราค้นหาหนังสือด้วย ISBN หรือ บาร์โค้ด คิดว่าจะมีสักกี่คนที่จะจำมันได้ แล้วมาค้นหาหรือครับ ร้านหนังสือ ไม่ใช่ห้องสมุดนะครับ อย่าลืมๆ ส่วนตัวเลือกอื่นๆ ก็ดูไม่จำเป็น เพราะหน้าที่ดูว่า คำค้นเป็นชื่อหนังสือ หรือชื่อผู้แต่ง/ ผู้แปล เป็นหน้าที่ของระบบครับ ไม่ควรไปผลักภาระให้กับยูสเซอร์

SE-ED ควรแค่ให้ยูสเซอร์กรอกข้อมูลอะไรก็ได้ลงไปในช่องค้นหา ไม่ว่าจะเป็นชื่อหนังสือ ชื่อผู้แต่ง ปีที่พิมพ์ สำนักพิมพ์ ก็สามารถให้ผลลัพธ์ได้เหมือนอย่างที่ Google ทำ ง่ายๆ ก็คือเอาช่อง search ของ Google มาใช้เลยก็ได้ครับ และนี่อาจเป็นเหตุผลหนึ่งว่าทำไมราคาหุ้น SE-ED ถึงต่ำเตี้ยลงทุกวันๆ (เพราะ UI เว็บมันใช้ไม่ได้น่ะซิครับ)

ส่วนถ้าบริษัทขายสินค้าหลายประเภท ก็หันไปทำเหมือนที่ Barns & Noble หรือ Amazon กำลังทำอยู่ก็ได้ครับ คือ ให้มี dropdown เลือกประเภทสินค้าที่ต้องการค้นหา แต่อย่าลืมที่จะต้องมีตัวเลือก ค้นหาสินค้าทุกประเภท ด้วยนะ เพราะบางทียูสเซอร์อาจขี้เกียจไปเลือกประเภทสินค้า หรือสินค้านั้นๆ ค่อนข้างเจาะจงและง่ายต่อการค้นหาอยู่แล้ว

อีกเรื่องที่อย่าทำให้ user คิดก็คือเรื่อง ไอคอน ภาพด้านบนผมตัดมาจากเว็บ airbnb.com ซึ่งเราสามารถเลือกได้ว่าต้องการที่อยู่เป็นประเภทไหน หากดูแต่ไอคอนเราจะไม่มีทางรู้ได้เลยครับว่ามันคืออะไร ต้องคิดเดาเอา

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

อย่าง interface แท็ป ของ mobile app ถ้าไม่มีข้อความกำกับใต้ไอคอน เราจะไม่มีทางรู้เลยว่า ไอคอนกำลังสื่ออะไรอยู่

ที่เน้นกรณีนี้ เพราะผมชอบเห็นคนพยายามจะ design interface ที่เป็น tab โดยวางข้อความไว้ด้านข้าง ถ้าเว็บนี้ต้องเป็น responsive และต้องใช้งานบนมือถือด้วยแล้ว designer หลายๆ คนก็อาจจะคิดแก้ปัญหาโดยการตัดเอาคำบรรยายไอคอนออก แทนที่จะตัดเอาไอคอนออก และคงข้อความไว้ เพราะไอคอนเดี่ยวๆ ไม่สามารถสื่อความได้หากปราศจากคำ แต่ข้อความสามารถอยู่ได้โดยปราศจากไอคอน

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

มาดูตัวอย่างที่สตีฟ ครูก เค้ายกมาอธิบายกันครับ ตัวอย่างนี้เป็นการทำปุ่มให้เหมือนปุ่มแบบช่องแรก อย่าไปออกแบบเหมือนช่องที่ 2 (เหมือนแค่ป้ายแท็ค) หรือช่องที่ 3 (เหมือนหัวข้อ) นะครับ

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