psychology ux ui blog cover
Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง 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 Bootcamp จะสอนเรื่องจิตวิทยากับการออกแบบ UX/UI อย่างไรบ้าง

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

ux ui bootcamp #2

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

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

You may also like

ui-design-Cover
Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...

More in:Design

Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design มาใช้ในงานออกแบบมากขึ้น? หลายคนอาจคิดว่า Motion มีส่วนแค่ทำให้งานมีความสวยงามมากขึ้น ดู Modern มากขึ้นเท่านั้น ...
progress-indicator Design

รวมเทคนิคใช้ Progress Indicator ออกแบบ UX/UI จากแอปฯ ระดับโลก ไม่ให้ User รู้สึกว่าต้อง ‘รอ’ นานเกินไป ด้วย Motion Design

สิ่งหนึ่งที่ต้องใส่ใจในการออกแบบ UX/UI คือเราอยู่ในยุคที่ User หรือผู้ใช้งานมีความอดทนในการรอน้อยลงทุกวัน ตามกฏของ Doherty Threshold บ่งบอกไว้ว่าผู้ใช้งานจะยังคงจดจ่อและยังไม่ไปไหนถ้าต้องรอไม่เกิน 0.4 วินาที แต่หลายครั้งที่เราอาจมีข้อจำกัดในการทำตามกฏ 0.4 วินาที หากต้องใช้เวลาในการให้ ...

Comments are closed.