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

    Business

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

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

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

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

    More in:Design

    Business

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

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

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

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

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

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

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

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

    Comments are closed.