จิตวิทยาการออกแบบและประสาทวิทยาศาสตร์ของ Awesome UX

ฟังเวอร์ชั่นเสียงของบทความนี้

มีวิทยาศาสตร์ว่าเหตุใดการออกแบบเฉพาะจึงดึงดูดสายตาคุณและทำให้เลือดไหลเวียนได้

สมองของมนุษย์นั้นเกียจคร้าน มีอคติ และมีแนวโน้มที่จะใช้ทางลัด

การศึกษาประสบการณ์ของผู้ใช้เกี่ยวกับความรู้ความเข้าใจของมนุษย์อาจดูอ่อนล้า ไม่เป็นไปตามหลักวิทยาศาสตร์ และเต็มไปด้วยการสันนิษฐานที่ผิดๆ—อาจเป็นความผิดของสมองที่เกียจคร้าน

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

เข้าสู่ประสาทวิทยา

ในขณะที่วิธีการวิจัย เช่น การสังเกตและการสัมภาษณ์มักต้องการให้นักวิจัย UX และผู้เข้าร่วมต้องเดา เทคโนโลยีสมัยใหม่ เช่น การติดตามดวงตา ช่วยให้นักวิจัยศึกษาปฏิกิริยาและความชอบที่แทบจะมองไม่เห็น

ในกรณีของผลิตภัณฑ์ที่มีการเข้าชมจำนวนมาก รายละเอียดที่ดูเหมือนเล็กน้อย เช่น ความกว้างของปุ่มหรือความคมชัดของสีของข้อความสามารถสร้างความแตกต่างได้หลายล้านดอลลาร์ นั่นเป็นเหตุผลที่ยักษ์ใหญ่ด้านเทคโนโลยีเช่น Facebook และ Google เริ่มใช้เทคนิคทางประสาทวิทยาเพื่อศึกษาว่าผู้คนใช้ผลิตภัณฑ์ของตนอย่างไร

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

จิตวิทยาการออกแบบ คิดเร็ว คิดช้า

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

ฉันอยู่ในที่ที่ "ถูกต้อง" หรือไม่? ฉันควรเชื่อถือไซต์นี้หรือไม่

Javier Bargas-Avila นักวิจัย UX ของ YouTube ระบุในการศึกษาในปี 2012 ว่า ผู้คนสร้างปฏิกิริยาทางสุนทรียะบนหน้าเว็บในช่วง 17 ถึง 50 มิลลิวินาทีแรกหลังการเปิดเผย

เพื่อให้เห็นภาพนั้น ต้องใช้สายตา 300-400 มิลลิวินาทีในการกะพริบตา ผลิตภัณฑ์ของคุณอาจได้รับการพิจารณาคดี การตัดสิน และประโยคทั้งหมดในเวลาน้อยกว่าชั่วพริบตา

การแสดงผลเหล่านี้อาจไม่ได้ลงทะเบียน แต่ส่งผลต่อพฤติกรรม ตัวอย่างเช่น หากไซต์โหลดช้าและสมองอ่านรายการแรกที่โหลดเป็น "นอกหัวข้อ" ผู้ใช้อาจออกจากไซต์ทันทีแทนที่จะรอให้ไซต์โหลด

บริษัทต่างๆ เช่น Facebook ลงทุนทรัพยากรจำนวนมากในการศึกษาลำดับการโหลดขององค์ประกอบ หากมีคนเข้าสู่ระบบ Facebook และไม่เห็นป้ายแจ้งเตือนใด ๆ พวกเขาอาจออกจากระบบทันที หากตราสัญลักษณ์โหลดก่อน พวกเขาอาจรอในขณะที่โหลดฟีดข่าวที่มีเนื้อหามาก

หนังสือ Thinking, Fast and Slow ของ Daniel Kahneman ผู้ได้รับรางวัลโนเบล แบ่งความคิดและการตัดสินใจของมนุษย์ออกเป็นสองระบบเพื่อช่วยแสดงให้เห็นความแตกต่าง

ระบบ 1 : เร็ว อัตโนมัติ บ่อย อารมณ์ โปรเฟสเซอร์ จิตใต้สำนึก

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

ระบบ 2: ช้า, ออกแรง, มีเหตุผล, คำนวณ, มีสติสัมปชัญญะ, ไม่บ่อยนัก

การคิดแบบระบบ 2 เป็นการ วิเคราะห์ และนำไปใช้กับสถานการณ์ที่ซับซ้อนมากขึ้น เช่น การกำหนดพฤติกรรมทางสังคมที่เหมาะสม หรือการเปรียบเทียบผลิตภัณฑ์ 2 รายการที่มีราคาและลักษณะต่างกัน

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

เมื่อตัดสินใจอย่างรวดเร็ว สมองสามารถพึ่งพาแบบแผนหรือ แบบจำลองทางจิต มากเกินไป—รูปแบบที่คุ้นเคยของข้อมูลและปฏิสัมพันธ์ เมื่อการคิดของระบบ 1 มีส่วนร่วม ระบบ 2 จะไม่มีผลบังคับใช้ ผู้คนอาจไม่ได้ตระหนักถึงชวเลขการตัดสินใจของสมอง แต่ส่งผลกระทบอย่างมากต่อพฤติกรรมและการรับรู้ของผลิตภัณฑ์

ศาสตร์แห่งจิตวิทยาในการออกแบบ

สมองของมนุษย์ใช้ออกซิเจนมากถึง 25% ของร่างกาย แม้จะคิดเป็นประมาณ 2% ของมวลทั้งหมด สมองขี้เกียจเป็นกลไกในการเอาชีวิตรอด การ จดจำรูปแบบและทางลัดหมายถึงพลังงานที่ใช้ไปอย่างมีสติในการประมวลผลสถานการณ์ น้อยลง สมองจะระบุสิ่งต่าง ๆ ติดป้ายกำกับและเพิกเฉยต่อสิ่งนั้นจนกว่าจะมีความเกี่ยวข้องอีกครั้ง

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

เทคนิคทางประสาทวิทยาจำนวนหนึ่งเพิ่งเริ่มเข้าสู่การวิจัย UX ซึ่ง ช่วยให้นักวิจัยให้ความกระจ่างเกี่ยวกับสิ่งต่าง ๆ ที่กระตุ้น "การคิดอย่างรวดเร็ว"

สามารถศึกษาความสนใจและการรับรู้ด้วยกล้องติดตามการมอง การตอบสนองทางอารมณ์และความตื่นตัวสามารถกำหนดได้ด้วยเซ็นเซอร์ผิวหนังหรือการวิเคราะห์ใบหน้า การตอบสนองทางไฟฟ้าในสมองสามารถวัดได้ด้วยคลื่นไฟฟ้าสมอง

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

ต่อไปนี้เป็นบทเรียนทั่วไปบางส่วนที่เรียนรู้จากการวิจัยประสบการณ์ผู้ใช้ประสาทวิทยาศาสตร์ที่นักออกแบบสามารถใช้เมื่อออกแบบผลิตภัณฑ์ดิจิทัล

เคล็ดลับจิตวิทยาการออกแบบ #1: ทำให้ง่ายต่อการระบุ

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

บุคคลที่เปิดแอปหรือเว็บไซต์ของคุณต้องการทราบ ก) มีสิ่งที่ฉันกำลังมองหาหรือไม่ และ b) มีคุณภาพสูงหรือไม่? การออกแบบให้เรียบง่าย และรักษาแบรนด์ บริการ และผลิตภัณฑ์ไว้ล่วงหน้าและเป็นศูนย์กลาง ช่วยให้ผู้คนมีทิศทางในตัวเอง

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

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

ได้รับการพิสูจน์ทางวิทยาศาสตร์แล้วว่าการออกแบบที่ดูเรียบง่ายและสะอาดตาทำงานได้ดีกว่า สมองขี้เกียจสามารถเข้าใจจุดประสงค์ของไซต์ได้ทันทีและเข้าใจว่าควรดำเนินการอย่างไร

เคล็ดลับจิตวิทยาการออกแบบ #2: ระบุสิ่งที่กำลังจะเกิดขึ้น

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

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

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

เคล็ดลับจิตวิทยาการออกแบบ #3: จัดระเบียบสำหรับผู้อ่านที่ขี้เกียจ

การศึกษาการติดตามดวงตาสามารถติดตามการจ้องมองของบุคคลเมื่อพวกเขาโต้ตอบกับผลิตภัณฑ์ พวกเขาสามารถสร้างแผนที่ความร้อนที่แสดงระยะเวลาที่ใช้ไปโดยเน้นที่ส่วนหนึ่งของหน้าจอ หรือแผนที่ว่าดวงตากระโดดไปรอบๆ หน้าอย่างไร

เรารู้ว่าในทุกอุตสาหกรรมและประเภทแอป สมองมักจะสแกนหาข้อมูลในรูปแบบ F (หรือรูปแบบ E) บุคคลนั้นดูข้อมูลที่ด้านบน อ่านทางด้านขวา จากนั้นสแกนหน้าเพื่อดูข้อมูลหรือไอคอนที่เกี่ยวข้อง

การทำลายรูปแบบ F เช่น การใส่ข้อมูลสำคัญที่มุมล่างขวาจะทำให้ค้นหาได้ยากขึ้น

ทำให้เชื่องข้อความของคุณ

จากการศึกษาของ Nielsen Norman ที่มีการเปิดดูหน้าเว็บ 45,237 ครั้ง ผู้คนอ่านข้อความเพียง 20% ในหน้าหนึ่งๆ ที่แย่กว่านั้น ในไซต์ที่มีเนื้อหามากกว่านั้น ผู้คนอุทิศเวลาเพียง 4 วินาทีพิเศษสำหรับข้อความเพิ่มเติม 100 คำ

ในโลกที่ผู้คนไม่อ่านคำต่อคำ Nielsen Norman ใช้ หลักเกณฑ์ต่อไปนี้สำหรับข้อความที่สแกน ได้

• คีย์เวิร์ด ที่เน้น
• หัวเรื่องย่อยที่ มีความหมาย
• รายการสัญลักษณ์ แสดง หัวข้อย่อย
• หนึ่งความคิด ต่อย่อหน้า
• พีระมิดแบบกลับหัว— เริ่มด้วยบทสรุป
• นับครึ่งคำ (หรือน้อยกว่า) ของงานเขียนทั่วไป

ทำงานกับป๊อปสีและคอนทราสต์

การจัดระเบียบข้อความและตำแหน่งไม่ใช่ปัจจัยสำคัญเพียงอย่างเดียวในการออกแบบ ทฤษฎีสี น้ำหนัก และคอนทราสต์สามารถนำมาใช้เพื่อดึงดูดความสนใจของผู้ใช้ได้

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

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

ความเปรียบต่างและความส่องสว่างเป็นเพียงก้าวแรก ทฤษฎีสีแนะนำการสร้างสมดุลให้กับสีของผลิตภัณฑ์โดยใช้สีที่โดดเด่น 60% ของเวลา สีรอง 30% และส่วนเน้น 10% รายละเอียดนี้สอดคล้องกับประสาทวิทยาศาสตร์ที่อยู่เบื้องหลังสิ่งที่ดึงดูดสายตา เนื่องจากใช้สีเฉพาะจุดน้อยที่สุด จึงดึงดูดสายตาได้มากที่สุด

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

ตัวออกแบบคุณลักษณะหรือข้อมูลใดๆ ที่ลดลำดับความสำคัญจะช่วยให้ผู้ใช้มุ่งความสนใจไปที่การโต้ตอบหรือข้อมูลที่นำเข้าส่วนใหญ่ได้โดยตรง

เคล็ดลับจิตวิทยาการออกแบบ #4: ตรวจลำไส้

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

การทดสอบ 5 วินาทีเป็นเครื่องมือที่มีประสิทธิภาพในการพิจารณาว่าการออกแบบของคุณเข้าใจได้ทันทีหรือไม่

ในการทดสอบ 5 วินาที ผู้เข้าร่วมจะดูไซต์หรือแอปเป็นเวลา 5 วินาที จากนั้นจึงตอบคำถามเกี่ยวกับเนื้อหาและการออกแบบ ไม่สามารถย้อนกลับไปดูรูปภาพได้ ผู้เข้าร่วมให้ "ความประทับใจ" ซึ่งผู้เข้าร่วมสันนิษฐานว่าเป็นจุดประสงค์และหน้าที่ของผลิตภัณฑ์ และสิ่งที่พวกเขาจะทำหรือที่พวกเขาจะมองหาขั้นตอนต่อไป

ผลิตภัณฑ์ของคุณอาจมีฟังก์ชันทั้งหมดที่ผู้ใช้ของคุณต้องการ แต่ ถ้าสมองขี้เกียจและรักรูปแบบไม่สามารถเข้าใจได้ในทันที มันก็จะเดินหน้าต่อ ไป

นักออกแบบในฐานะ “นักอ่านใจ”

เมื่อเราเรียนรู้เพิ่มเติมเกี่ยวกับจิตวิทยาการออกแบบ สมอง และการรับรู้ บรรทัดฐานการออกแบบจะยังคงเปลี่ยนแปลงไปทั่วทั้งอุตสาหกรรม เธรดที่เชื่อมต่อคือข้อมูล เนื่องจากวิธีการศึกษาประสาทวิทยาศาสตร์และความรู้ความเข้าใจได้รับการปรับปรุง ประเภทและคุณภาพของข้อมูลที่มีสำหรับการออกแบบ UX ก็เช่นกัน

การออกแบบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมไม่ใช่เวทมนตร์ แต่เป็นวิทยาศาสตร์ ประสาทวิทยา.

บทความนี้เขียนขึ้นร่วมกับนักวิจัย UX Caitria O'Neill ซึ่งก่อนหน้านี้อยู่ที่ Facebook ปัจจุบันอยู่ที่ Airbnb และเพื่อนที่ d.school ของ Stanford

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง