ทฤษฎี UI อย่าทำให้ฉันคิดมากนะจ๊ะเธอ (Don’t Make Me Think) ตอนที่ 3/3 By uiblogaziner October 14, 20142665 views ShareTweet 0 กฎข้อที่ 3 อย่ามากเกิน (Get rid of half the words on each page, then get rid of half of what’s left) กฏข้อสุดท้ายในการออกแบบ UI ออกจะดูแปลกๆ นะครับ เพราะเป็นการให้เราพิจารณาถึงสิ่งที่เราได้ออกแบบไป และพยายามตัดสิ่งที่เกินความจำเป็นออกไป เช่น เนื้อหาคำพูด ถ้าเราเขียนไปหนึ่งหน้า ก็ต้องพยายามตัดทอนให้เหลือครึ่งหนึ่ง หรือถ้าเราใช้เส้นสีอะไร แทนที่จะเป็นสิ่งที่เป็นประโยชน์แต่กลับเป็นการสร้างสิ่งรบกวนให้กับยูสเซอร์ ก็ลดทอนสิ่งนั้นลงไป มาดูตัวอย่างกันครับ ตัวอย่างแรก ผมเห็นได้ทั่วไปสำหรับเว็บ e-commerce ไทยเรา รูปแบบคือจะใส่ข้อความสาธยายเยอะมาก บอกขั้นตอนการสั่งซื้อ ตั้งแต่หน้าแรก ร่ายยาวมาก กว่าจะเห็นสินค้าจริงก็ล่อไป 4-5 scroll เลยเชียว แบบว่ากลัวยูสเซอร์ไม่ไว้ใจ หรือไม่เข้าใจวิธีการซื้อ หารู้ไม่ว่าถ้าเราทำร้าน e-commerce ตามมาตรฐานแล้ว ก็แถบไม่ต้องบรรยายอะไรมาก แล้วออกแบบให้ระบบรองรับกับเงื่อนไขการสั่งซื้อแบบขายสั่ง ขายปลีกก็ทำได้ ส่วนพวก Banner ก็เล่นละเลงตัวหนังสือนู่นนี่ลงบนภาพ แบบว่าเอาให้ดูเยอะไว้ก่อน จนทำให้ภาพด้านหลังที่อุตส่าห์วาดมาอย่างสวยงามกลายเป็นสิ่งรบกวนสายตา เสียดายผลงาน ทางแก้ไขคือ ตัดคำโฆษณาเวิ่นเว้อ เช่น ‘ปลีกส่ง ราคาเดียว’ ‘ราคาถูกสุดสุด ขายต่อได้กำไร’ ‘พร้อมส่ง ทั้งร้าน’ เพราะข้อมูลพวกนี้ พอลูกค้าเห็นราคาก็จะรู้เองครับว่า ถูกหรือแพง คราวนี้มาดูตัวอย่างแถบเมนูแนวตั้งของเว็บแห่งหนึ่ง ต้นแบบคืออันซ้ายสุด อันถัดมาผมลองตัดเอาเส้นใต้ออกจากลิงค์ แล้วอันสุดท้ายผมก็ทำให้เส้นคั่นจางลง ดูง่ายและสะอาดตาขึ้นเยอะเลยใช่ไหมครับ นี่แหละเวทมนตร์ 😉 เพราะเมนูด้านบนมีการใช้พื้นที่ว่างระหว่างเมนู (white space) เยอะพอแล้ว ดังนั้นแล้วเส้นคั่นแต่ละเมนูจึงสามารถลดทอนความสำคัญลงได้ครับ รวมถึงเส้นใต้ของลิงค์ที่เป็นสไตล์ของเว็บยุค 2000 ก็เอาออกไปซะ รกตาครับ จากนั้นมาดูตัวอย่างเว็บที่ใช้คำฟุ่มเฟือยกันครับ เผอิญผมได้เมลเชิญให้ลองใช้ web app นี้ แล้วเห็นว่าเหมาะกับกฎข้อนี้จริงๆ ครับ ผมแสดงเนื้อหาด้านบนส่วนหนึ่งของเว็บ Kitovu มาดูในภาพรวมก่อนจากภาพด้านบนครับ แล้วเดี๋ยวผมจะเจาะลึกไปในแต่ละส่วน ตรงแรกเลยที่ Header เราจะเห็นเลยว่ามีการใช้ลิงค์ซ้ำกันสองที่ ซึ่งเป็นลิงค์เชิญชวนให้ทดลองใช้งานระบบฟรีเหมือนกัน ผมคิดว่าน่าจะตัดอันที่ดูเด่นน้อยทิ้งไปจะดีกว่า เก็บไว้แค่ปุ่มสีฟ้าเด่นๆ ก็เพียงพอแล้ว ถัดลงมาเป็นแบนเนอร์ บอกว่าเป็นช่วงให้ทดลองใช้งาน โดยมีบางคำตัดทิ้งไปได้ (ที่ผมทำเส้นฆ่าคำทิ้ง) เพราะใช้คำซ้ำแล้วดูไม่ค่อยจำเป็นเท่าไร ส่วนที่ผมทำกรอบสีแดงอันแรก เค้าบอกว่า จะใช้งานได้ต้องสมัครสมาชิก และต้องกด Like ที่ facebook อีก ซึ่งผมมองว่าข้อเรียกร้องข้างหลัง ดูจะขอมากไปหน่อยครับ แล้วก็นะครับ อธิบายมาเยอะแล้วก็พอจะเข้าใจว่าต้องทำอย่างไร ก็ยังมีลิงค์ให้ดูรายละเอียดเพิ่มเติมอีก (กรอบสีแดงอันที่สอง) มันจะมีอะไรต้องอธิบายเยอะขนาดนั้นเชียวหรือเนี่ย ถัดลงมาอีก ประโยครองก็ใช้คำฟุ่มเฟือยอีก ตรง Purpose made ไม่ต้องใช้ก็ได้ เพราะก็เห็นอยู่ว่า ของมันทำขึ้นแล้ว มันต้องมีจุดประสงค์ในการทำ อธิบายมาเลยว่าใช้ทำอะไร แล้วเค้าก็ยังบอกว่า app นี้จะช่วยทีมนู้นนี่ ยกตัวอย่างมาหลายกลุ่มเกิน อาจลองตัดออกไปบ้างสักกลุ่มสองกลุ่ม ในที่นี้ผมตัดเอา agencies ออกไป เพราะมันก็ดูคล้ายๆ กับทีมนั่นแหละ เหลือ 3 กลุ่มเลขมงคง ^^ พอมาถึงคำอธิบาย ก็ดันทำเป็นหัวข้ออีก (A better way to manage client work) ซ้ำกับหัวข้อใหญ่ๆ แบบจังๆ ตัดออกไปได้เลย ไม่ต้องคิดมากครับ -_-! ความจริงตรงเนื้อหาก็สามารถลดทอนคำได้อีก แต่ว่าเดี๋ยวจะเยอะเกิน อธิบายแล้วเข้าตัวเอง ^^ อีกตัวอย่าง เป็นการขจัดสิ่งรบกวนเมื่อยูสเซอร์มีปฏิสัมพันธ์กับ UI ครับ เช่น ในหน้าโรงแรมของเว็บ Agoda ตรงส่วนแสดงรูปภาพโรงแรม พอเปิดมาเราจะเห็นคะแนนรีวิว และคอมเมนต์แบบย่ออยู่บนภาพใช่ไหมครับ พอผมเอาเมาส์ไปวางบนภาพ ข้อมูลเหล่านั้นก็จะหาย แล้วมีปุ่มเลื่อนภาพซ้ายขวาเข้ามาแทน เพราะในสถานะนี้ เราไม่สนใจข้อมูลก่อนหน้าแล้วใช่ไหมครับ ตอนนี้เราอยากดูรูปอื่นมากกว่า ส่วนข้อมูลก่อนนั้นกลายเป็นสิ่งรบกวนแล้ว ดังนั้นจึงควรเอาออกไปนะครับ พอเอาเมาส์ออกไปนอกรูป ก็กลับแสดงข้อมูลเหมือนเดิมอีก ลูกศรเลื่อนภาพก็จะกลายเป็นสิ่งรบกวนแทน เห็นไหมครับ ช่วงจังหวะเวลาหนึ่ง สิ่งหนึ่งเป็นสิ่งที่เราอยากเห็น แต่อีกสิ่งเป็นสิ่งรบกวน พออีกช่วงจังหวะเวลาหนึ่ง สิ่งที่เคยเป็นสิ่งรบกวนกลับกลายเป็นสิ่งที่เราอยากเห็น และสิ่งที่เราอยากเห็นก็กลายเป็นสิ่งรบกวนแทน อีกวิธีที่่ช่วยขจัดสิ่งรบกวนสำหรับ UI ที่เป็น Popup ก็คือ ทำให้พื้นหลัง Popup เป็นสีดำโปร่งใส เพื่อขจัดสิ่งรบกวนด้านหลังออกไป ให้ยูสเซอร์เพ่งความสนใจไปที่ popup ที่กดเปิดขึ้นมา การใช้พื้นหลังโปร่งใสสีดำแทนที่จะเป็นสีทึบก็เพื่อสร้างอารมณ์ในการเปลี่ยนจากสถานะหนึ่งเป็นอีกสถานะหนึ่งที่ดูนุ่มนวลกว่าการใช้สีทึบครับ อันนี้มีเรื่อง emotional design (การออกแบบเชิงอารมณ์) เข้าเกี่ยวข้องด้วย ไว้บทความต่อๆ ไปคงได้มีโอกาสเขียนครับ อีกอย่างคือ การใช้พื้นหลังโปร่งใสทำให้ยูสเซอร์เกิดความรู้สึกว่าสามารถกลับไปสถานะก่อนได้ไม่ยาก เพราะเห็นหน้าเก่าๆ อยู่ด้านหลังนี่เอง การจะใช้พื้นหลังโปร่งใสสีดำหรือไม่ ขึ้นอยู่กับว่าเราต้องการให้ยูสเซอร์สนใจข้อความใน popup มากน้อยแค่ไหน ถ้าเป็นแค่การแจ้งบอกสถานะทั่วไปเวลาทำ action ใดๆ เสร็จ เช่น กดเพิ่มรายการสินค้าลงในตะกร้า ก็ไม่จำเป็นต้องใช้พื้นหลังใด เพียงแค่ขึ้นเป็น popup เล็กๆ ไว้ใกล้ๆ ไอคอนตะกร้าก็เพียงพอแล้วครับ โดยสรุป กฎข้อนี้บอกให้เราพยายามลดสิ่งรบกวนตารบกวนใจออกไปจากหน้าจอ ให้ถูกที่ ถูกเวลา ถูกจังหวะ และถูกสถานะ ขณะยูสเซอร์กำลังทำ action ใดๆ อยู่บนเว็บหรือ application นั่นเองครับ ไม่ใช่เป็นแค่การตัดทอนเนื้อหาออกเท่านั้น เข้าใจตรงกันเนอะ ก็เป็นอันว่าจบแล้วสำหรับกฎครอบจักรวาลเพื่อการออกแบบ UI ที่ดี จำได้ง่าย แต่ต้องอาศัยประสบการณ์เพื่อให้เข้าใจในแต่ละข้ออย่างถ่องแท้จริงๆ นี่แหละครับ กฎจากปรมาจารย์ที่ designer ทุกคนควรยึดเป็นสรณะ (°∀°)b
