psychology ux ui blog cover

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ชวนคุยประเด็นที่น่าสนใจนี้กันกับคุณปุ้ม Head of User Experience Design ที่ Skooldio ที่จะมาเล่าในมุมมองของนักออกแบบที่สนใจศึกษาเรื่องจิตวิทยาและนำมาปรับใช้ในการทำงานด้าน UX UI จริงๆ และเป็นประเด็นที่คุณปุ้มจะนำมาใช้สอนแบบเจาะลึกกับหัวข้อ Interaction Design ใน UX/UI Bootcamp รุ่น2 ที่กำลังจะมาถึงนี้อีกด้วย

psychology ux ui blog cover

จิตวิทยาการออกแบบมีความเกี่ยวข้อง และสำคัญต่อการออกแบบ UX UI อย่างไร

มันคือเรื่องการออกแบบ Interaction (ปฏิสัมพันธ์) ระหว่างมนุษย์กับ Digital Product (เว็บ,แอปฯ) ต่างๆ ว่าเราจะออกแบบอย่างไรให้ User หรือคนที่เข้ามาใช้งานแล้วรู้เรื่อง เพราะเราทุกคนต่างเคยมีประสบการณ์กับการใช้งานบางแอปฯ ที่รู้สึกว่า”ใช้ง่าย” ในขณะที่บางแอปฯ รู้สึกว่า”ใช้ยาก” ซึ่งภาพกว้างๆ มันเกี่ยวข้องกับเรื่องของ Usability Design 

ซึ่งการจะเพิ่ม Usability Design หรือการออกแบบที่ใช้งานง่ายให้มากขึ้นนั้น เราต้องคำนึงถึงการลดการเกิด cognitive load คือ ภาระทางสมอง หรือขอแปลสั้นๆว่าการคิดเยอะ สิ่งที่เห็นแล้วทำให้ต้องตีความ ต้องคิดเยอะ หรือเห็นแล้วเกิดเป็นคำถามในใจว่ามันต้องใช้ยังไงนะ เกิดความงุนงงหรือความสับสน ความคิดเหล่านี้จะทำให้สมองทำงานเยอะ เมื่อสมองทำงานเยอะ ก็ทำให้ User เกิดประสบการณ์ที่ไม่ดี หรือเริ่มรู้สึกว่าสิ่งนี้ใช้งานยาก นั่นเอง (อ่านเพิ่มเติมเกี่ยวกับการออกแบบ UX เพื่อลด Cognitive Load ของผู้ใช้งาน)

ซึ่งการที่ศึกษาเรื่องจิตวิทยาการออกแบบ เพื่อนำมาเป็นส่วนช่วยลดการคิดเยอะของ User เวลาใช้แอป เรามองภาพเป็นสองกลุ่มใหญ่ๆคือ
1. เข้าใจความคิดของมนุษย์ทั่วไป
2. เข้าใจความคิดของกลุ่มเป้าหมาย (Persona)

ซึ่งข้อ 1. จะครอบคลุมมนุษย์ส่วนใหญ่ อย่างเช่น หลักการที่เกี่ยวข้องกับการที่คนตัดสินใจในเรื่องต่างๆ ในชีวิตประจำวัน ซึ่งมนุษย์มีพื้นฐานตรงนี้เหมือนกัน

สมมติให้คนลอง Upload file เข้าระบบ สิ่งที่คนจะคาดหวังที่จะเห็นคือความชัดเจนว่าไฟล์มันโหลดใกล้เสร็จหรือยัง มันโหลดสำเร็จมั้ย เพราะนั่นคือสิ่งที่ทำให้เราในฐานะมนุษย์รู้สึกปลอดภัย หรือรู้สึก secure ซึ่งเป็นความรู้สึกพื้นฐานที่ทำให้มนุษย์อยู่รอดสืบเผ่าพันธุ์มา หรือการที่เราออกแบบโดยใช้ space (พื้นที่ว่าง) เข้ามาเสริมในหน้า UI อย่างพอดี คนมองปุ๊บ สมองก็จะแยกแยะข้อมูลได้ไว คนก็จะรู้สึกว่ามันเป็นระเบียบ แยกข้อมูลได้ง่าย ซึ่งตรงนี้ ไม่ว่าจะเป็นคนเชื้อชาติไหน เพศ วัย อาจคิดและรู้สึกไม่ต่างกันมาก ซึ่งตัวอย่างหลักจิตวิทยาที่เกี่ยวข้องกับเรื่องเหล่านี้ก็ เช่น Heuristic Evaluation และ Gestalt Theory เป็นต้น 

ส่วนข้อ 2. จะทำความเข้าใจกับคนเฉพาะกลุ่มมากขึ้น ตรงนี้เราจะขยับจากคำว่า “มนุษย์” มาเป็น User และ Persona แล้ว เพราะแอปฯ ที่ออกแบบมา เป็นไปได้ยากที่จะให้คนทั้งโลกใช้ได้ง่าย 

สมมติว่าวัยรุ่นไทยใช้ LINE กันทุกวัน รู้สึกว่ามันใช้ง่าย แต่ถ้าให้วัยรุ่นมาจากยุโรปมาลองใช้แอป LINE เป็นครั้งแรกก็อาจจะรู้สึกไม่คุ้นเคยและรู้สึกว่ามันใช้ยาก ฉะนั้น เราต้องเข้าใจประสบการณ์ที่ User ที่เป็น Persona เคยเจอมา แอปฯ ที่เขาเคยใช้มา ความชอบ-ไม่ชอบ ความคุ้นชินของเขาในมุมต่างๆ เป็นต้น เพื่อนำมาเป็นส่วนตัดสินใจในการออกแบบ ตรงนี้ก็จะเกี่ยวกับหลัก Mental Models และก็เป็นเหตุผลที่ว่าทำไม นักออกแบบ UX ควรทำ Usability Test นั่นเอง

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

จำเป็นต้องรู้หลักจิตวิทยาเหล่านี้ลึกแค่ไหน

ถ้าถามว่าเราจะต้องรู้ทฤษฎีแน่นถึงขนาดที่บอกได้หมดว่าการออกแบบมาแบบนี้ แบบนั้น มาจากหลักหรือทฤษฎีอะไรบ้าง ก็อาจจะไม่ต้องขนาดนั้น แต่ในฐานะ UX/UI Designer ถ้าพอรู้ว่ามีหลักจิตวิทยาอะไรบ้างที่อยู่เบื้องหลังหลักการออกแบบที่ดี มันก็จะทำให้เราหลีกเลี่ยงการออกแบบที่ทำให้คิดเยอะได้เลยโดยอัตโนมัติ (เพราะเราเข้าใจ “มนุษย์” แล้ว) และออกแบบได้ตรงใจกลุ่มเป้าหมายมากขึ้น เพราะเราเข้าใจความคิดของเค้า

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

จิตวิทยาการออกแบบอยู่ในกระบวนการไหนของการออกแบบ UX/UI บ้าง?

ถ้าไล่ตามขั้นตอนของการทำ UX UI ก็อาจจะเข้ามาตั้งแต่การทำ Research เลย ตั้งแต่ตอนที่ทำความเข้าใจ User เช่น เขามีความต้องการอะไร ที่ผ่านมาเวลาเจอปัญหาแบบนี้เขาแก้ปัญหาอย่างไร เป็นต้น เรียกได้ว่าเป็นการศึกษา Mental Models ของเขา

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

จนมาเป็นขั้นตอนของการทำ Wireframe และ Interaction กดปุ่มนี้แล้วจะเกิดอะไรขึ้น ถ้ามี Error เกิดขึ้นจะแสดงผลอย่างไร กระบวนการเหล่านี้จะมีเรื่องจิตวิทยามารองรับทั้งหมดเลย เราต้องคิดในทุกมุมว่าตั้งแต่เขาเข้ามาในแอปฯ ใช้งานจนออกจากแอปฯ ไปเขาจะเจออะไรบ้าง และเขาสามารถเข้าใจทุกจุดได้หรือยัง ซึ่งสามารถตรวจสอบได้โดยการทำ Usability Test

แนะนำหลักจิตวิทยาที่น่าสนใจ : Gestalt Theory

Gestalt-Theory

เป็นเรื่องของ Visual Perception คนเห็นอะไร ตีความสิ่งที่เห็นอย่างไร เป็นทฤษฎีที่มีมาตั้งแต่ปี 1914 คือสมองคนเราพอเห็นอะไรแล้วจะตีความไปเลยโดยที่เราไม่รู้ตัว อย่างในรูปตัวอย่างที่เราเห็นสามเหลี่ยมที่ไม่มีจริงอยู่ตรงกลาง ทั้งๆ ที่มันเป็นแค่วงกลมแหว่งสามอันที่ทำองศาพอดีกัน แล้วสมองของเราก็ฟอร์มรูปทรงสามเหลี่ยมกันขึ้นมาเอง

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

10 Usability Heuristics

10-usability-heuristics

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

ยกตัวอย่างบางหลักการในทฤษฎีนี้ เช่น Visibility of System status คือการบอกผู้ใช้งานว่าระบบกำลังทำอะไรอยู่ เกิดอะไรขึ้นบ้าง เช่นถ้าผู้ใช้งานอัปโหลดไฟล์ อาจจะใช้ Progress Bar ช่วยบอกว่าอัปโหลดไปแล้วกี่เปอร์เซ็นต์ ต้องใช้เวลาเท่าไหร่ ถ้าอัปโหลดผ่านอาจจะขึ้นสเตตัสสีเขียว แต่ถ้าไม่ผ่านอาจจะเป็นสเตตัสสีแดง ถ้าไม่มีสิ่งเหล่านี้ผู้ใช้งานก็จะไม่รู้เลยว่าไฟล์โหลดถึงไหนแล้ว เสร็จแล้วหรือยัง (อ่านตัวอย่างเทคนิคการใช้ Progress Indicator ในงาน UX/UI)

10-usability-heuristics

หรืออย่างหลักการ Match Between the System and the Real World ที่ยกตัวอย่างไปก่อนหน้านี้ ถ้าเราจะออกแบบเว็บหรือแอปฯ ที่คนไม่คุ้นชินกับการใช้งานมาก่อน อาจต้องจำลองประสบการณ์จากโลกจริง เช่นเว็บ E-Commerce ในยุคแรกที่ใช้ไอคอนรถเข็นกับปุ่ม add to cart จำลองการหยิบสินค้าใส่รถเข็นในร้านค้าจริง

ตอนที่เรากรอกเลขบัตรเครดิตในแอปฯ ก็มีหลักการ Error Prevention แบ่งช่องกรอกตัวเลขเป็นสี่ช่องแทนที่จะให้กรอกแค่ช่องเดียว ซึ่งก็ช่วยลดความผิดพลาดได้มาก เป็นต้น

Mental Models

mental model

การที่ User ตีความหรือเดาว่าเว็บหรือแอปของเราน่าจะใช้งานยังไง โดยที่ User จะเหมือนมีภาพในหัวของตัวเองที่อิงมาจากประสบการณ์ที่เคยเจอมาก่อนหน้านี้ จากการที่เคยใช้งานอะไรมาก่อน หรือแม้กระทั่งเบื้องหลังทางเชื้อชาติ ความเชื่อ และวัฒนธรรม ในทางกลับกันฝั่ง UX/UI Designer ก็จะมี Mental Model ของตัวเองเหมือนกันจากประสบกาารณ์ที่เคยทำงานออกแบบมา ดังนั้นโจทย์สำหรับนักออกแบบคือต้องทำอย่างไรถึงจะปิดช่องว่างระหว่างความเข้าใจของ User กับการใช้งาน Product ซึ่งจะทำได้โดยการเริ่มทำความเข้าใจ Mental Model ของ User ก่อน (อ่านเพิ่มเติมเรื่อง Mental Model ในการออกแบบ UX/UI)

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

แน่นอนว่ามันต้องพอมีวิธีอยู่บ้าง ไม่เช่นนั้นโลกเราจะมีแต่แอปเดิมๆซ้ำๆ ตลอดไป หรือไม่เช่นนั้น เราอาจจะไม่มีแอปใช้ด้วยซ้ำ แต่โชคดีที่มนุษย์มีการเรียนรู้  เพราะฉะนั้นอย่างแรก กลับมาที่ว่าเราต้องออกแบบให้เข้าใจได้ ถ้าย้อนกลับไปดูหลัก Usability Heuristic ก็จะตรงกับหลัก Match Between the System and the Real World เลย คือสมมติว่าเราออกแบบอะไรบางอย่างที่เป็นดิจิทัล แต่ถ้ามันมีอะไรบางอย่างที่คล้ายกับสิ่งที่อยู่ในโลกความเป็นจริง คนจะเริ่มตีความ ทำความเข้าใจ และหัดใช้งานสิ่งนั้นได้

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

ดังนั้นถ้าพยายามออกแบบสิ่งใหม่ที่ไม่มีในโลกดิจิทัลมาก่อน อาจต้องพยายามจำลองประสบการณ์จากโลกจริงดู

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


สำหรับเหล่า UX/UI Designer ที่เข้ามาอ่านถึงตรงนี้ ทาง Skooldio ขอแนะนำแบบทดสอบวัดความรู้ด้าน User Experience Design หรือใครที่สนใจอยากศึกษาเรื่องนี้เพิ่ม ตอนนี้ Skooldio กำลังมีดีลพิเศษสำหรับแพ็กเกจ The Ultimate Guide to UX/UI Design ซึ่งจะเป็นแพ็กเกจรวม 6 คอร์สที่รวมจะความรู้ที่ UX/UI Designer ควรรู้ ตั้งแต่การหา Insight ของ User รวมไปถึงวิธีการออกแบบเพื่อให้ทุกอย่างลื่นไหล และใช้ง่ายที่สุด


ใน UX/UI Bootcamp จะสอนเรื่องจิตวิทยากับการออกแบบ UX/UI อย่างไรบ้าง

เราจะมาเรียนกันว่าการออกแบบที่ทำให้เกิดการใช้งานง่ายเป็นอย่างไร Usability Design ที่ดีคืออะไร โดยจะใช้หลักการทางจิตวิทยาการออกแบบอย่าง Gestalt Theory, 10 Usability Heuristics และ Mental Model มาเชื่อมโยงกับการออกแบบ UX/UI โดยเฉพาะ ไปจนถึงเรื่องของ Information Architecture หรือการจัดระเบียบข้อมูลในแอปฯ หรือเว็บ ให้คนเข้าถึงได้ง่าย ให้คนเข้ามาอยากหาอะไรก็เจอได้ง่าย 

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

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


สุดท้ายนี้ ใครสนใจอยากได้รับบทความดี ๆ แบบนี้ส่งตรงถึงอีเมลคุณ ลงทะเบียนรับ Skooldio Newsletter ไว้ได้เลยวันนี้! เราจะส่งทุกสาระที่น่าสนใจ ไม่ว่าจะเป็น เครื่องมือที่กำลังฮิต หรือ เทรนด์ที่กำลังเป็นที่นิยม รวมไปถึง คอร์สใหม่ ๆ ที่จะช่วยอัพสกิลคุณในด้านต่าง ๆ ทั้ง Soft Skills และ Hard Skills ตลอดจนโปรโมชั่นต่าง ๆ ที่ไม่ควรพลาด คัดสรรมาเป็นอย่างดี โดยทีมงาน Skooldio!

More in:Design

Comments are closed.