Design

14 ศัพท์ใช้บ่อย! ในการทำงาน UX UI Designer

UX UI Designer ห้ามพลาด! 14 ศัพท์ใช้บ่อยในการทำงานสายนี้ | Skooldio Blog

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

Design Thinking

คือกระบวนการในการคิดวิเคราะห์ เพื่อเข้าใจปัญหา (pain point) ของลูกค้า รวมไปถึงการคิดแก้ไขปัญหาและพัฒนาผลิตภัณฑ์ เพื่อตอบสนองความต้องการของผู้ใช้งานให้ตรงจุดมากที่สุด ซึ่งมีองค์ประกอบหลัก 5 ขั้นตอน โดยเริ่มจาก “Empathize” คือการเข้าใจผู้ใช้งาน อะไรคือปัญหาที่มีอยู่ อาจจะใช้วิธีการสัมภาษณ์ เพื่อเก็บ insight ของผู้ใช้งาน

หลังจากนั้นจะเข้าสู่กระบวนการ “Define” โดยคัดกรองวิเคราะห์ปัญหาทั้งหมด เพื่อให้ได้ปัญหาที่ชัดเจนยิ่งขึ้น เพื่อนำไปใช้ในขั้นตอน “Ideate” หรือระดมความคิด หาวิธีการแก้ไขปัญหาให้ได้มากที่สุด หลังจากที่เราได้แนวทางในการแก้ไขปัญหาแล้ว ขั้นตอนต่อไปคือการทำ “Prototype” และ “Test” ในขั้นตอนนี้จะทำแนวทางการแก้ไข มาทำเป็นผลิตภัณฑ์จำลอง เพื่อใช้ในการทดสอบกับผู้ใช้งานจริง และนำข้อเสนอแนะและข้อบกพร่อง ต่างๆมาปรับเปลี่ยน เพื่อให้ได้ผลิตภัณฑ์ที่ตอบโจทย์ผู้ใช้งานให้ได้มากที่สุด

UX UI Designer ห้ามพลาด! 14 ศัพท์ใช้บ่อยในการทำงานสายนี้ | Skooldio Blog

source: maqe.com

เรียกได้ว่า Design Thinking หรือ Human Centered Design นั้นเกี่ยวข้องกับการทำงาน UX, UI โดยตรง อ่านเพิ่มเติมได้ที่ Service Design, Design Thinking, UX, UI กับจุดเชื่อมโยงที่เรียกว่า Human Centred Design 

Product Market Fit 

Product Market Fit ในนิยามของ Marc Andreessen คือจุดที่เรามีผลิตภัณฑ์ที่ดีมากๆ อยู่ในตลาดที่ใหญ่มากพอ ซึ่งจะแบ่งเป็น 2 พาร์ทหลักๆ ได้แก่ Market และ Product ในส่วนของ Market หรือ Problem space คือการกำหนดกลุ่มเป้าหมายของลูกค้า การเข้าใจลูกค้าและ pain point ต่างๆ เพื่อจะได้รู้ความต้องการของลูกค้าที่ยังไม่ถูกเติมเต็ม (Unmet need)

อีกส่วนหนึ่งคือ Product หรือ เรียกว่า Solution space คือการเข้าใจตัวเองหรือบริษัท ทั้งเรื่องเป้าหมาย จุดแข็งและความถนัด (Value proposition) แล้วจึงสะท้อนกลับมาว่าเราสามารถตอบโจทย์ลูกค้าได้ด้วยอะไรบ้าง ซึ่ง Product Market Fit คือการนำ 2 ส่วนนี้มาเชื่อมเข้าหากันนั่นเอง

Usability 

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

โดยการที่จะมี Usability ที่ดี ต้องมี 5 องค์ประกอบหลัก ได้แก่

  • Effectiveness : ความสามารถในการรู้ว่าควรใช้งานอย่างไรและมีความแม่นยำ
  • Efficiency : มีการใช้งานง่ายและรวดเร็ว
  • Engagement : ผู้ใช้งานมีประสบการณ์ทีดีต่อหน้าเว็บไซต์
  • Error Tolerance : มีข้อผิดพลาด หรือ error ให้น้อยที่สุด หรือถ้าหากผู้ใช้งานเจอข้อผิดพลาด ก็สามารถแก้ไขเองได้ง่ายและรวดเร็ว
  • Easy to learn : ทำให้เกิดการเรียนรู้ได้ง่าย และง่ายยิ่งขึ้นเมื่อผู้ใช้งานได้กลับมาใช้อีกครั้งในอนาคต 

ในหลักการออกแบบ Usability Heuristics ที่ตั้งขึ้นโดย Nielsen Norman Group นั้นมีเรื่อง Recognition Rather than Recall ที่เป็น 1 ในเทคนิคที่นำมาประยุกต์ใช้ได้และถูกนำกลับมาพูดถึงบ่อยครั้งกับการออกแบบ Digital Product ในปัจจุบัน 

Front-end

Front-end หรือที่นิยมเรียกกันว่า “หน้าบ้าน” เป็นส่วนที่ติดต่อกับผู้ใช้งานเป็นหลัก เช่น หน้าเว็บไซต์ รวมไปถึง เนื้อหาต่างๆ รูปภาพ ลิงก์ และทุกส่วนที่ผู้ใช้งานสามารถเห็นได้ โดย front-end มีความสำคัญในการดึงดูดผู้ใช้งาน หลักๆจะดูแลทั้งความสวยงาม และการทำให้ผู้ใช้งานเข้าใจง่าย คนที่ทำงานเกี่ยวข้องด้านนี้ ได้แก่ Graphic Designer, UI Designer, Web Designer, Web Developer (ทักษะที่เกี่ยวข้องกับ Front-end)

Back-end

Back-end หรือที่รู้จักกันในอีกชื่อว่า “หลังบ้าน” โดยมีหน้าที่หลักๆคือ การดูระบบหลังบ้านของเว็บไซต์ เช่น การเขียนโค้ด โครงสร้างเว็บไซต์ และ การจัดการ database การเก็บข้อมูลต่างๆ ของเว็บไซต์ทั้งหมด เป็นส่วนที่ต้องให้ความสำคัญมากในการรักษาความปลอดภัยของข้อมูลต่างๆ ที่เกียวข้อง เช่น username password ซึ่ง Back-end กับ Front-end  จะทำงานร่วมกัน หาก Front-end มีปัญหา เช่น เกิดการแสดงผลช้าหรือผิดพลาด Back-end จะเข้ามาช่วยแก้ปัญหาให้นั่นเอง

Wireframe

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

โดยหลักๆ จะแบ่งออกเป็น 3 ประเภท

  • Low-fidelity wireframes คือ การออกแบบให้เห็นภาพรวมคร่าวๆ มีองค์ประกอบต่างๆ โดยเน้นการกำหนดลำดับการใช้ของผู้ใช้งาน (the user flow) โดยยังไม่ต้องคำนึกถึง ขนาดหรือสเกลแบบละเอียด 
  • Mid-fidelity wireframes คือ การลงรายละเอียดที่มากขึ้น มีการวาง layout ที่ชัดเจน ฟ้อนและองค์ประกอบละเอียดขึ้น เพื่อบ่งบอก feature ต่างๆในหน้าแอปพลิเคชันหรือเว็บไซต์
  • High-fidelity wireframes คือ การใส่รายละเอียดทุกอย่างที่มี รวมไปถึงการใช้รูปภาพ ข้อความ และสีสัน ให้ใกล้เคียงกับของจริงมากที่สุด 

Prototype

ก่อนที่จะให้ developer เขียนโปรแกรมหรือโค้ดในการทำเว็บไซต์และแอปพลิเคชัน ส่วนมากจะมีการทำแบบจำลองการใช้งานหน้าเว็บไซต์และแอปพลิเคชัน หรือการทำ Prototype ขึ้นมา เพื่อทดสอบการใช้งานโดยให้ผู้ใช้งานลองใช้จริงๆ (Usability Testing) และนำ feedback และปัญหาที่พบมาแก้ไขและปรับปรุง ก่อนจะเข้าสู่กระบวนการต่อไป โดย Prototype ที่ใช้ในการทดสอบนี้ ควรมีฟังชั่นการใช้งานที่เหมือนจริงมากที่สุด เช่น สามารถคลิ๊กเพื่อเชื่อมจากหน้าหนึ่งไปยังอีกหน้าหนึ่งได้

A/B Testing

เป็นหนึ่งในกระบวนการทดสอบผลิตภัณฑ์หรือแม้กระทั่งการกระทำต่างๆ บนเว็บไซต์ เช่น ทดสอบการเรียงลำดับเนื้อหา, ทดสอบการใช้คำบนหน้าเว็บไซต์, ทดสอบ feature ต่างๆ เป็นต้น โดยจะทำการสร้างผลิตภัณฑ์หรือหน้าตาเว็บไซต์ขึ้นมา 2 แบบขึ้นไป แล้วทดลองให้กลุ่มคนที่มีความชอบคล้ายกัน ได้ทดลองใช้ทั้ง 2 แบบ เพื่อดูผลตอบรับว่าแบบไหนที่ผู้ใช้งานชอบมากที่สุด หรือเพื่อดูว่าแบบไหนช่วยให้เกิด conversion สูงที่สุด ซึ่งแบบที่มีประสิทธิภาพดีกว่าจะนำไปพัฒนาต่อ ส่วนอีกแบบจะหยุดการใช้งานทันที การทำ A/B Testing ยังช่วยให้ประหยัดเวลาและช่วยให้บริษัทได้ใช้งบประมาณได้อย่างมีประสิทธิภาพมากขึ้น

Grid System 

Grid system คือการทำเส้นแนวตั้งและแนวนอนมารวมกันเป็นโครงสร้าง โดยถูกใช้ในการจัดองค์ประกอบงานออกแบบ รวมไปถึงการดีไซน์เว็ปไซต์และแอปพลิเคชัน ให้มีความสมดุลของ layout (Balance) และช่วยให้ User interface มีความเป็นระบบระเบียบต่อเนื่องกัน (Consistency) นอกจากนี้ยังช่วยในการจัดลำดับความสำคัญขององค์ประกอบของเว็ปไซต์และแอปพลิเคชัน เช่นการปรับขนาดตามความสำคัญ

Card Sorting

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

Persona

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

Service design 

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

Responsive Web Design

หลายคนอาจเคยเข้าเว็บไซต์ในมือถือ แต่ต้องคอยต้องซูมเข้าซูมออก เลื่อนซ้ายเลื่อนขวา เพราะขนาดความกว้างของเว็บไซต์นั้นใหญ่เกินไป  นั้นเป็นเพราะว่าเว็บไซต์นั้นไม่ใช่ “Responsive Web Design” นั่นเอง ซึ่งคือเทคนิคในการออกแบบเว็บไซต์แบบใหม่ โดยจะมีการปรับเปลี่ยนขนาดของเว็บไซต์ ให้เหมาะสบกับการแสดงผลบนหน้าจอขนาดต่างๆ และความละเอียดของหน้าจอในอุปกรณ์ที่แตกต่างกัน เช่น คอมพิวเตอร์ โน้ตบุ๊ค โทรศัพท์มือถือ แท็บเล็ต เป็นต้น เพื่อให้การแสดงผลบนหน้าจอที่แตกต่างกันมีประสิทธิภาพมากขึ้น

Call To Action (CTA)

คือการช่วยกระตุ้นความรู้สึกและการตัดสินใจให้ผู้ที่เข้ามาในเว็บไซต์ได้ take action บางอย่าง โดยส่วนมากจะอยู่ในรูปของ ปุ่มต่างๆ กล่องข้อความ banner หรือการกรอกฟอร์ม เช่น สั่งซื้อเลย ดาวน์โหลดเลย ลงทะเบียนเข้าร่วม กดเพื่อดูรายละเอียด เป็นต้น โดยมีเป้าหมายในการปิดการขาย เพิ่ม engagement เก็บ lead รวมไปถึงเพิ่มการ subscription และจุดประสงค์อื่นๆ ขึ้นอยู่กับประเภทของเว็บไซต์

สำหรับใครที่กำลังย้ายสายงาน หรือกำลังเริ่มต้นในสายงานนี้ การรู้คำศัพท์ต่างๆ เหล่านี้ น่าจะได้เปรียบกว่าคนอื่นๆ แน่นอน แล้วสายอาชีพนี้ต้องทำงานกับใครในมุมไหนบ้าง อ่านต่อได้ที่ รู้จัก 5 ตำแหน่งที่ UX Designer ต้องทำงานด้วย


สุดท้าย UX/ UI Design Bootcamp หลักสูตร 6 สัปดาห์ ที่จะทำให้คุณเข้าใจการทำ User Experience และ User Interface แบบครบทุกหัวข้อที่สำคัญกับผู้เชี่ยวชาญระดับประเทศ เปิดรับสมัครแล้ววันนี้

UX/ UI Design Bootcamp หลักสูตร 6 สัปดาห์ ที่จะทำให้คุณเข้าใจการทำ User Experience และ User Interface แบบครบทุกหัวข้อที่สำคัญกับผู้เชี่ยวชาญระดับประเทศ | Skooldio Blog

Praewnapa Chaisaengjan
Marketing Intern

    You may also like

    UX Writing คืออะไร
    Design

    ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

    UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
    Behavioural Science คืออะไร
    Business

    Behavioural Science คืออะไร มารู้จักกับเครื่องมือออกแบบพฤติกรรมกันดีกว่า

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

    More in:Design

    Web Design Font Pairing Design

    เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

    หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
    ui-design-Cover Design

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

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

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

    ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
    Business

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

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

    Comments are closed.