กฎของ UX

 (lawsofux.com)
16 คะแนน โดย GN⁺ 4 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • รวบรวมกฎที่เกี่ยวข้องกับ การใช้งานของงานออกแบบ และ จิตวิทยาการรับรู้ พร้อมคำจำกัดความสั้น ๆ เพื่อจัดแนวคิดที่มีอิทธิพลต่อวิธีที่ผู้ใช้เข้าใจและใช้งานอินเทอร์เฟซไว้ในที่เดียว
  • ในด้านการเลือกและการตัดสินใจ แนวคิดอย่าง Hick’s Law และ Cognitive Load แสดงให้เห็นว่าจำนวนตัวเลือก ความซับซ้อน และปริมาณทรัพยากรทางจิต เชื่อมโยงโดยตรงกับการตัดสินใจและความเร็วในการโต้ตอบของผู้ใช้
  • ในด้านการรับรู้ทางสายตาและการจัดระเบียบข้อมูล แนวคิดอย่าง Law of Proximity และ Law of Similarity อธิบายว่าความใกล้เคียง ความคล้ายคลึง ความเชื่อมโยง และขอบเขตร่วม ทำให้ผู้ใช้รับรู้องค์ประกอบเป็นกลุ่มเดียวกัน
  • ในด้านปฏิสัมพันธ์และพฤติกรรม มีการกล่าวถึงเกณฑ์ที่ส่งผลต่อประสิทธิภาพการควบคุมและเวลาในการเข้าถึงเป้าหมาย เช่น การตอบสนองต่ำกว่า 400ms ตาม Doherty Threshold และความสัมพันธ์ของระยะทางกับขนาดตาม Fitts’s Law
  • ครอบคลุมไปถึงด้านความจำและประสบการณ์ด้วย โดยนำเสนอกฎอย่าง Peak-End Rule และ Zeigarnik Effect ร่วมกัน เพื่อเป็นกรอบคิดที่ใช้ซ้ำได้อย่างกว้างขวางในงานออกแบบ UX โดยรวม

โครงสร้างของกฎ UX

  • Laws of UX รวบรวมกฎที่เกี่ยวข้องกับ การใช้งานของงานออกแบบ และ จิตวิทยาการรับรู้ แต่ละข้อพร้อมคำจำกัดความสั้น ๆ
  • แต่ละรายการเชื่อมไปยังหน้าของกฎแต่ละข้อ และถูกจัดกลุ่มเป็นแนวคิดที่มีอิทธิพลต่อวิธีที่ผู้ใช้เข้าใจและใช้งานอินเทอร์เฟซ
  • ครอบคลุมหัวข้อที่ถูกพูดถึงบ่อยในงานออกแบบ UX อย่างกว้างขวาง เช่น การเลือก ความจำ ความสนใจ การมุ่งสู่เป้าหมาย และการจัดกลุ่มทางสายตา

กฎสำคัญ

  • การรับรู้และการตัดสินใจ

    • Choice Overload: เมื่อมีตัวเลือกจำนวนมาก ความรู้สึก ท่วมท้น จะเพิ่มขึ้น และมักใช้ในความหมายใกล้เคียงกับ paradox of choice
    • Cognitive Bias: ความเอนเอียงทางความคิด ซึ่งเป็นความผิดพลาดเชิงระบบในการคิด ส่งผลต่อการรับรู้โลกและความสามารถในการตัดสินใจ
    • Cognitive Load: หมายถึง ปริมาณทรัพยากรทางจิต ที่ต้องใช้ในการทำความเข้าใจและโต้ตอบกับอินเทอร์เฟซ
    • Hick’s Law: เวลาที่ใช้ในการตัดสินใจจะเพิ่มขึ้นเมื่อ จำนวนตัวเลือกและความซับซ้อน เพิ่มขึ้น
    • Mental Model: คือ แบบจำลองภายใน ที่สรุปสิ่งที่ผู้ใช้เชื่อว่าตนเข้าใจเกี่ยวกับระบบและวิธีการทำงานของมัน
    • Miller’s Law: โดยเฉลี่ยแล้ว มนุษย์สามารถเก็บข้อมูลในความจำขณะทำงานได้เพียงประมาณ 7 ± 2 รายการ
    • Occam’s Razor: ในบรรดาสมมติฐานที่ทำนายได้ดีพอ ๆ กัน ให้เลือกข้อที่มี สมมติฐานน้อยที่สุด
    • Tesler’s Law: ทุกระบบจะยังคงมี ระดับของความซับซ้อน ที่ไม่อาจลดลงได้
    • Working Memory: คือ ระบบการรับรู้ ที่ใช้เก็บและจัดการข้อมูลชั่วคราวซึ่งจำเป็นต่อการทำงาน

  • การรับรู้ทางสายตาและการจัดระเบียบข้อมูล

    • Aesthetic-Usability Effect: ผู้ใช้มีแนวโน้มจะมองว่า งานออกแบบที่ดึงดูดสายตากว่า ใช้งานง่ายกว่า
    • Chunking: คือกระบวนการแบ่งข้อมูลเป็นชิ้นย่อย แล้วจัดกลุ่มใหม่เป็น หน่วยที่มีความหมาย
    • Law of Common Region: องค์ประกอบที่ใช้ขอบเขตร่วมกันอย่างชัดเจนจะถูกรับรู้ว่าเป็น กลุ่ม เดียวกัน
    • Law of Proximity: วัตถุที่อยู่ใกล้กันจะถูกรับรู้ว่าเป็นสิ่งที่ถูกจัดไว้ด้วยกัน
    • Law of Prägnanz: ภาพที่กำกวมหรือซับซ้อนจะถูกตีความเป็น รูปแบบที่เรียบง่ายที่สุด
    • Law of Similarity: องค์ประกอบที่คล้ายกัน แม้อยู่ห่างกัน ก็มีแนวโน้มจะถูกรับรู้ว่าเป็นภาพ รูปทรง หรือกลุ่มเดียวกัน
    • Law of Uniform Connectedness: องค์ประกอบที่เชื่อมต่อกันทางสายตาจะดูมีความเกี่ยวข้องกันมากกว่าองค์ประกอบที่ไม่เชื่อมต่อกัน
    • Von Restorff Effect: ในกลุ่มของวัตถุที่คล้ายกัน สิ่งที่แตกต่างออกมา จะถูกจดจำได้ดีที่สุด

  • ปฏิสัมพันธ์และพฤติกรรม

    • Doherty Threshold: หากคอมพิวเตอร์และผู้ใช้โต้ตอบกันด้วยความเร็ว ต่ำกว่า 400ms โดยไม่ต้องรอกัน จะช่วยเพิ่มผลิตภาพได้อย่างมาก
    • Fitts’s Law: เวลาที่ใช้ในการเข้าถึงเป้าหมายเป็นฟังก์ชันของ ระยะทางและขนาด
    • Flow: คือสภาวะทางจิตที่จดจ่อกับกิจกรรมอย่างสมบูรณ์ พร้อมด้วยพลัง สมาธิ การมีส่วนร่วมอย่างลึกซึ้ง และความเพลิดเพลิน
    • Goal-Gradient Effect: ยิ่งเข้าใกล้เป้าหมายมากขึ้น ก็ยิ่งมีแนวโน้มจะพยายามมุ่งไปสู่เป้าหมายนั้นมากขึ้น
    • Jakob’s Law: ผู้ใช้ใช้เวลาส่วนใหญ่อยู่กับเว็บไซต์อื่น ดังนั้นจึงชอบให้เว็บไซต์ทำงานใน ลักษณะที่คล้ายกัน กับไซต์ที่คุ้นเคยอยู่แล้ว
    • Paradox of the Active User: ผู้ใช้มักเริ่มใช้งานซอฟต์แวร์ทันทีโดยไม่อ่านคู่มือ
    • Parkinson’s Law: งานใด ๆ จะขยายตัวจนใช้เวลาที่มีอยู่ทั้งหมด
    • Postel’s Law: จง ยืดหยุ่น กับข้อมูลนำเข้า และเข้มงวดกับข้อมูลส่งออก
    • Selective Attention: ท่ามกลางสิ่งเร้าหลายอย่างในสภาพแวดล้อม ผู้คนมักโฟกัสเฉพาะ บางส่วนที่เกี่ยวข้องกับเป้าหมาย เท่านั้น

  • ความจำและประสบการณ์

    • Pareto Principle: ในหลายเหตุการณ์ ผลลัพธ์ประมาณ 80% มาจากสาเหตุ 20%
    • Peak-End Rule: ผู้คนตัดสินประสบการณ์จาก ความรู้สึกในช่วงพีกและตอนจบ มากกว่าผลรวมทั้งหมดหรือค่าเฉลี่ยของประสบการณ์
    • Serial Position Effect: ผู้คนมีแนวโน้มจะจำรายการแรกและรายการสุดท้ายในชุดข้อมูลต่อเนื่องได้ดีที่สุด
    • Zeigarnik Effect: ผู้คนจะจำ งานที่ยังไม่เสร็จหรือถูกขัดจังหวะ ได้ดีกว่างานที่เสร็จสมบูรณ์

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 4 시간 전
ความคิดเห็นจาก Hacker News

  • อันนี้เป็นสิ่งที่กลับมาดูซ้ำบ่อยมาก ชอบทั้ง งานออกแบบแบบโปสเตอร์ และก็ยังทึ่งเสมอว่ากฎหลายข้อแบบนี้มาจากข้อมูลและงานวิจัยของ Nielsen Norman Group ที่สั่งสมมานาน
    มีแนวคิด UX ที่ถูกตั้งชื่อไว้เยอะเหมือนกัน เช่น Jakob's Law หรือ Norman Door และวงการ UX ก็ได้รับอิทธิพลจากกลุ่มผู้สังเกตการณ์เล็ก ๆ กลุ่มนี้อย่างมาก
    แต่ส่วนตัวคิดว่าทฤษฎี UX/HCI สมัยใหม่ เองก็เริ่มถูกฉุดรั้งด้วยกฎนุ่ม ๆ แบบนี้มากขึ้นเหมือนกัน โดยเฉพาะการเหมารวมกฎที่เห็นจากพฤติกรรมผู้ใช้ใน สื่อที่ไม่มีปฏิสัมพันธ์ อย่างพวกงานกระจายเสียงมากเกินไป

  • หน้าซีรีส์ก่อนหน้านี้ดีนะ แต่รอบนี้ดู ขาดความตั้งใจ ไปหน่อย
    อย่างเช่นเอา Cognitive Bias มานิยามแบบพจนานุกรมแล้วโพสต์เป็น ‘กฎ’ ทั้งที่มันก็ไม่ใช่กฎ และในรูปแบบนั้นก็ไม่ใช่แนวคิดที่เอาไปใช้จริงได้ด้วย
    เลยให้ความรู้สึกเหมือนเป็นการรวบคำศัพท์ไม่กี่คำมาแปะคำนิยามแล้วจับมัดขายแบบ ทำไว้ขายโปสเตอร์ มากกว่าจะเป็นชุดกฎที่นักออกแบบ UI หรือดีเวลอปเปอร์เอาไปใช้ได้

  • ของแบบนี้ก็ดี และแน่นอนว่ามันไม่ใช่ กฎตายตัวที่เปลี่ยนไม่ได้
    ผมไม่ได้เป็นดีไซเนอร์สายดั้งเดิม เลยรู้สึกว่าพวกชุด best practice หรือชุดกฎแบบนี้มีประโยชน์มาก เป็นจุดเริ่มต้นที่ดีมากสำหรับให้ AI ช่วยตรวจทีเดียวในระดับหน้าจอ สำหรับกฎที่เราเก็บไว้ในหัวตลอดได้ยาก
    ส่วนตัวมองว่าเหมือนคีย์ลัดจัดรูปแบบซอร์สโค้ด เวลาเราสร้างซอฟต์แวร์ธุรกิจ ก็ใช้ชุดกฎพวกนี้เป็นเวิร์กโฟลว์ลัดสำหรับ sanity check ได้ค่อนข้างดี
    ผมลองดาวน์โหลดทั้ง ภาพหน้าจอ UX Laws และภาพหน้าจอแดชบอร์ด แล้วสั่งให้ ChatGPT กับ Claude รีวิวตามกฎเหล่านั้น พร้อมทำม็อกอัปใหม่ที่สะท้อนคำแนะนำออกมา
    Project 1: CMMS Dashboard For Maintenance
    Dashboard old: https://imgur.com/a/R3wrMpr
    Dashboard new (Claude): https://imgur.com/a/cYq4gE8
    Project 2: แอปพยากรณ์คลื่นของ https://swellslots.com
    Forecast old: https://imgur.com/a/W3daZrP
    Forecast new: https://imgur.com/a/kNi2Nvg

    • อย่างน้อย Project 1 ผมว่าของเดิมดูดีกว่าแดชบอร์ดใหม่
      ปัญหาของชุดกฎที่ขัดกันเองแบบนี้คือ นักออกแบบที่เก่งจะ ตัดสินตามสัญชาตญาณให้เหมาะกับบริบท ว่าควรเมินกฎไหนและใช้กฎไหน
    • โปรเจ็กต์แรกนี่แดชบอร์ดเดิมดูเหมือน หน้าจอผู้ดูแลระบบสำหรับรายงาน แต่แดชบอร์ดใหม่ดูเหมือน หน้าจอของผู้ปฏิบัติงาน ที่ใช้จัดการตั๋วงานจริงมากกว่า
      เลยสงสัยว่าในพรอมป์ใส่เป้าหมายหรือบทบาทไว้ชัดเจนไหม หรือปล่อยกว้าง ๆ แล้วให้มันรันไปเอง
    • ในสหราชอาณาจักรเปิดรูปไม่ได้ เพราะ Imgur ถูกจำกัดการเข้าถึง

  • กฎข้อ 0 คืออย่าทำให้ UI element ที่ผมกำลังจะคลิกเกิด reflow หรือขยับไปมา

    • อันนี้ทำคนคลั่งได้จริง ๆ ผมสงสัยมาตลอดว่าถ้า UX หรือฝั่งฟรอนต์เอนด์ไม่จริงจังกับเรื่องนี้ ระดับ OS หรือเบราว์เซอร์พอจะตามสถานะที่คลิกได้เมื่อ 20ms ก่อนหน้า ตามความเร็วการตอบสนองของผู้ใช้ แล้วทำให้สิ่งที่ผมกดเป็นสิ่งเดียวกับที่สมองผมรับรู้ได้ไหม
      แน่นอนว่าทางแก้ที่ดีกว่าคือให้นักพัฒนาและนักออกแบบมี ความเป็นช่างฝีมือ และความภูมิใจกับรายละเอียดพวกนี้ พอดูอินเทอร์เฟซที่แย่ที่สุด มักเหมือนทดสอบกันแค่ในสภาพแวดล้อมที่เชื่อมกับแบ็กเอนด์ด้วย กิกะบิต เลยพลาดปัญหาแบบนี้ไป
    • น่าเหลือเชื่อที่ปัญหานี้ยังหลุดเข้าไปอยู่ใน แอป Photos บน iOS
      ถ้าบริษัทที่ถูกมองเป็นสัญลักษณ์ของงานออกแบบยังพลาดพื้นฐานข้อนี้ แปลว่ามีบางอย่างผิดหนักในวงการ
    • Google Search แย่เป็นพิเศษ พวก People also ask ที่ไม่จำเป็นกับคำตอบ Gemini ที่กว่าจะสร้างเสร็จก็นาน ดันคอนเทนต์ทั้งหมดให้เลื่อนลงไปหมด
    • และก็ไม่ควรทำให้เสียสมาธิด้วย กราฟิกตกแต่ง ที่ไม่จำเป็นและไม่เกี่ยวข้อง

  • ผมว่าอันนี้เป็นชุดข้อมูลที่ยอดเยี่ยม
    แต่ดูข้อ 2 คือ Choice Overload ที่บอกว่าถ้ามีตัวเลือกมากเกินไปคนจะรู้สึกท่วมท้น ทว่าบนหน้าเดียวกันกลับฝังกฎทั้ง 30 ข้อไว้เป็นข้อความทั้งหมด และครึ่งหนึ่งของพื้นที่ภาพยังถูกกินไปด้วย รูปที่ไม่เกี่ยวข้อง 30 รูป
    มันสวยนะ แต่ไม่ใช่ โครงสร้างที่เหมาะกับการเรียนรู้

  • ถ้าโต้ตอบกันได้เร็วกว่า 400ms แบบ Doherty Threshold จนคอมพิวเตอร์กับผู้ใช้ไม่ต้องรอกัน ผลิตภาพจะดีขึ้นมาก
    เพราะแบบนั้นเวลาผมเขียนโปรแกรมจึงชอบโมเดลเล็กมากกว่าเยอะ ความเร็วพอมันสูงพอ เวิร์กโฟลว์ก็ยังคง ความเป็นเรียลไทม์ เอาไว้ได้
    แบบนั้นคุณจะย่อยงานเป็นชิ้นเล็กลงและคอยตรวจสอบไปเรื่อย ๆ ทำให้ยังมีส่วนร่วมเชิงรุก และ mental model ก็ไม่หลุด
    ก่อนหน้านี้ผมเคยลองให้ทั้งโมเดลใหญ่กับโมเดลเล็กทำงานแก้โค้ดง่าย ๆ 3 อย่าง ผลคือทั้งคู่ทำสำเร็จ แต่โมเดลใหญ่ช้ากว่า 3 เท่า และแพงกว่า 10 เท่า
    ตั้งแต่นั้นมาเกณฑ์ Best Model ของผมก็เปลี่ยนจากตัวที่คะแนนเบนช์มาร์กอันดับหนึ่ง ไปเป็นโมเดลที่เล็ก เร็ว ถูก และทำงานจริงได้อย่างเสถียรที่สุด

  • น่าจะเพิ่มเรื่อง ความคงเส้นคงวา ด้วย ไม่ควรเปลี่ยนไปเรื่อย ๆ เพียงเพื่อจะเปลี่ยน หรือเพราะวิ่งตามกระแสใหม่

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

  • ตอนรีดีไซน์ แพลตฟอร์ม e-commerce รายใหญ่แห่งหนึ่งในเอเชีย ผมก็ใช้กฎหลายข้อจากที่นี่กับ กลยุทธ์ UX จริง ๆ

  • ขอบคุณที่แชร์นะ ผมทำงานสาย full stack มาเกือบ 10 ปี ตอนนี้เพิ่งเริ่มลงลึกกับ UI มากขึ้น ส่วน UX ยังอยู่ระดับแค่แตะผิว ๆ
    นอกเรื่องนิดหน่อย แต่อยากรู้ว่ามีแหล่งที่รวบรวม UI pattern ที่ใช้บ่อยบนมือถือหรือเว็บแอปไหม เช่น hamburger menu, toast notification อะไรพวกนี้
    ผมกำลังหาเว็บที่จัดหมวดหมู่เป็นระบบ ครอบคลุมกว้าง และมี ตัวอย่างภาพ ด้วย

    • ตอนเรียนวิชา UI ที่มหาวิทยาลัยราวปี 2009 เคยใช้หนังสือของ Jennifer Tidwell ซึ่งตรงกับสิ่งที่คุณกำลังหาค่อนข้างเป๊ะ
      ตอนนั้นยังเป็นยุคต้น ๆ ของสมาร์ตโฟนเลยมีเนื้อหามือถือไม่มาก แต่ฉบับล่าสุดน่าจะครอบคลุมมือถือเยอะขึ้นแล้ว
      https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/
    • ลองไล่ดูคอมโพเนนต์ไลบรารีอย่าง shadcn, coss, base ui เฉย ๆ ก็ช่วยเรียนรู้ได้ดีเหมือนกัน