UI designer คืออะไร? ต่างจาก UX designer อย่างไร มาดูกัน

Natk

ถ้าหาเราลองค้นหาคำว่า “UI Designer” ภาษาไทยหรือตำแหน่งงานนี้ใน Google หลายคนอาจจะสับสนมากกว่าเดิม เพราะว่าหลาย ๆ บริษัทนั้นใช้ชื่อตำแหน่ง UI และ UX มารวมกัน แล้วถ้าแยกออกจากกันล่ะ? ตำแหน่ง UI Designer นั้นทำอะไรกันแน่?

แม้ว่าทั้งสองจะเชื่อมโยงกันอย่างแยกไม่ออก แต่สิ่งสำคัญคือเราต้องทราบก่อนเลยว่าการทำงานสาย UI Designer นั้นคืออาชีพที่จะต้องทำการออกแบบส่วนต่อประสานกับผู้ใช้งาน โดยทำงานกับ Interface เป็นหลัก เป็นอาชีพที่จะต้องเข้าใจเรื่องของเทคโนโลยี, HCI, Ergonomic, UX, ศิลปะ, และความรู้ทางด้าน Business ประกอบกัน

แน่นอนว่าอาชีพนี้มีความทับซ้อนกับเรื่องของ UX อยู่บ้าง แต่ท้ายที่สุดแล้วการออกแบบ UI มาพร้อมกับชุดความรู้และทักษะของตัวเองที่แตกต่างจาก UX อย่างสิ้นเชิงเลยค่ะ

สำหรับใครที่กำลังพิจารณาการทำงานในสายอาชีพ UI, กำลังทำงานในสายนี้อยู่ หรือสนใจอยากเข้ามาทำงาน เรามาลองอ่านข้อมูลตั้งแต่พื้นฐานกันเลยนะคะ

UI Designer คืออะไร? ทำงานอะไรบ้าง?

UI Designer คือผู้ออกแบบ User interface มีหน้าที่ออกแบบ UI หมายถึงการออกแบบภาพ Interface (อินเทอร์เฟซ) ของผลิตภัณฑ์ดิจิทัล เป็นกระบวนการสร้างอินเทอร์เฟซ (เช่น แอปและเว็บไซต์) โดยเน้นที่รูปลักษณ์ สไตล์ และการโต้ตอบ นักออกแบบ UI จะออกแบบการเคลื่อนไหวระหว่างหน้าจอต่าง ๆสร้างองค์ประกอบภาพ และการทำ Prototype แบบจำลองที่อำนวยความสะดวกในการโต้ตอบกับผู้ใช้งาน

แม้ว่าการออกแบบ UI ส่วนใหญ่จะเป็นงานที่เน้นไปที่การออกแบบรูปร่างหน้าตาให้ใช้งานง่ายและสวยงาม (Visual) แต่ว่าในขั้นตอนการทำงานนั้นนักออกแบบ UI จะต้องคำนึงถึงหลายเรื่องประกอบกัน เช่น การวางขนาดของ UI เพื่อให้กดง่าย, การใช้สีเพื่อให้เข้าถึงได้สำหรับคนตาบอดสี (Accessibility design) รวมไปถึงต้องใช้งานง่าย กดง่ายสำหรับ User อีกด้วย (User-friendly interfaces)

นักออกแบบ UI Designer จึงจะต้องเป็นคนที่เข้าใจทุกขั้นตอนกระบวนการออกแบบ ตั้งแต่ขั้นตอนของ UX, การออกแบบหน้าจอ, การออกแบบไอคอน การทำ Prototype และ Interactions รวมไปถึงสร้าง Style guide, design system บนไฟล์ design ที่จะช่วยให้งานของเราออกมามีความสม่ำเสมอ (Consistency) เป็นคนหลักที่จะสื่อสารภาพลักษณ์ขององค์ของของเราผ่านทางงาน Design ออกมาได้ และขั้นตอนสุดท้ายจะต้องเช็คด้วยว่า Product ของเรานั้นสามารถเข้าถึงได้ ครอบคลุมกับผู้ใช้งานทุกแบบทุกเพศทุกวัย

ลองนึกถึงแอปโปรดของคุณ วันที่คุณดาวน์โหลดแอพมาครั้งแรก คุณเองก็ไม่ได้ใช้เวลาหลายชั่วโมงในการเรียนรู้วิธีการใช้งาน แต่คุณสามารถเริ่มต้นใช้งานได้ทันที นั่นก็เป็นเพราะว่า UI Designer ที่เก่งกาจทั้งหลายเหล่านี้สามารถสื่อสารภาพที่เป็นโค้ดให้ออกมาได้ผ่านการนำเสนอในรูปร่างต่าง ๆ เช่น Shape, Pattern, spacing, icon และ colour พร้อมกับ interaction แบบต่าง ๆ ที่ช่วยทำให้ผู้ใช้งานรู้สึกเป็นธรรมชาติ เข้าใจและใช้งานได้ทันที

ความแตกต่างระหว่างตำแหน่ง UI Designer และ UX Designer

การออกแบบ UI (UI Design) และการออกแบบ UX เพื่อประสบการณ์ผู้ใช้ (UX Design) คำสองคำนี้มักใช้สลับกันไปมาได้ เพราะจริงๆแล้วทั้งคู่มีเป้าหมายเดียวกันในการมอบประสบการณ์ที่ดีให้กับผู้ใช้ UI Designer และ UX Designer ต่างก็ทำงานในด้านที่คล้ายกันและทับซ้อนกันเสมอ

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

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

ทั้งสองอาชีพนี้มักจะแยกจากกันไม่ได้ แต่เรามักจะเห็นชื่อตำแหน่งที่ต่างกันนี้ในบริษัทขนาดใหญ่ ที่ต้องการแบ่งแยกทีมออกจากกันโดยชัดเจน

ความแตกต่าง UI designer และ UX designer
ความแตกต่างของ UI designer และ UX designer

สิ่งที่ต้องรู้หากสนใจงานด้าน UI Designer

เหมือนกับอาชีพหลาย ๆ อย่าง การเรียน UI เองก็ต้องการทักษะทั้งฝั่ง Technical skills เพื่อที่จะได้ออกแบบงานได้ นอกจากนั้นยังต้องมี Soft skills ที่จะช่วยให้เราทำงานในองค์กรได้อย่างราบรื่น มาดูกันแบบไว ๆ เลยว่าทักษะหลักนั้นจะต้องมีอะไรบ้าง

Hard skills

Industry-standard Tools

Colour

  • Colour theory
  • HSB
  • HSL
  • Gradient
  • Dark interface/ Light interface
  • Colour contrast

Typography

Accessibility

Grid

  • 4pt grid system
  • 8pt grid system
  • baseline grid
  • etc.

Spacing

  • Ratio eg. Image ratio, Icon ratio etc.
  • White space

Sizing

Visual hierarchy

UI Design patterns

UI components

  • Forms: input, checkbox, toggle etc.

Tech skills

Mobile patterns

  • iOS
  • Android

Icon design

Developer Handoff

Design system

  • Design tokens
  • Documentation writing (Optional)

UX Skills

  • Usability testing
  • UX Methods (ไม่จำเป็นต้องรู้ทั้งหมด แต่ควรรู้ทักษะ UX Research ที่เกี่ยวข้องกับงาน)
  • Content writing (Optional)
  • UX writing (Optional)

Soft skills

  • Strong communication skills – การสื่อสารกับทีม
  • Team player & Collaboration skills
    เพราะงานที่ออกมาจะเป็นงานที่ต้องทำงานร่วมกับทีม UX และ Developer อยู่ตลอดเวลา
ui designer career
ui designer career

งานที่ต้องทำในแต่ละวันมีอะไรบ้าง ?

ตรงส่วนของความรับผิดชอบนี้อาจจะแตกต่างกันไปในแต่ละองค์กร แต่ส่วนใหญ่งานที่ UI จะต้องเจอคือ

  1. ทำงานร่วมกันกับทีม Collaboration ประสานงานกับ UX Designer และ Developer มาประชุมเพื่อออกแบบงาน
  2. Design ออกแบบ UI ทั้งหมดของระบบ บางครั้งอาจจะต้องทำไปจนถึง Icon, Graphic, Animation และอื่น ๆ ประกอบกัน
  3. Design system – ออกแบบ UI จัดวางโครงสร้างของงานให้เป็นระเบียบเรียบร้อย ในที่นี้บางครั้งอาจจะต้องทำไปจนถึงเรื่องของ Design tokens และประสานงานกับ Developer
  4. Prototyping ทำแบบจำลองของงานเพื่อนำงานไปทดสอบใช้กับ Users
    ในที่นี้อาจจะทำทั้ง Low filedity และ High filedity
  5. Handoff – ทำการส่งงานให้กับ Developer
  6. Usability testing – บางครั้ง UI Designer อาจจะต้องไปทำ Test ด้วยเพื่อวัดผลงานออกแบบของเราว่าใช้งานง่ายหรือยาก
  7. สำหรับที่ต่างประเทศ คนที่ทำงานสาย UI Designer จะต้องมีความรู้เรื่องของ Accessibility ด้วย

แนะนำคอร์สเรียน User interface design ออนไลน์

ค่าเรียนออนไลน์จาก Coursera จะอยู่ที่ 1,700 บาท/เดือน พร้อมได้ใบประกาศณียบัตรที่ได้รับการรับรองระดับโลก

User Interface Design Specialization

สอนโดย The University of Minnesota
ความยาวคอร์ส 4 เดือน หากเรียนสัปดาห์ละ 3 ชั่วโมง/ สัปดาห์

Interaction Design Specialization

สอนโดย UC San Diego
ความยาวคอร์ส 10 เดือน หากเรียนสัปดาห์ละ 3 ชั่วโมง/ สัปดาห์

Google UX Design Professional Certificate

สอนโดย Google
ความยาวคอร์ส 6 เดือน หากเรียน 10 ชั่วโมง/สัปดาห์

Learn Figma – UI/UX Design Essential Training

จาก Udemy สอนโดย Caleb Kingston
สอน Figma และวิธีการใช้งานแบบละเอียด สอนปูพื้นเรื่องของการออกแบบ UI และการใช้โปรแกรมยอดนิยมอย่าง Figma
เหมาะสำหรับคนที่เป็น UI Designer และ UX Desingner มือใหม่ที่ยังไม่ถนัดใช้งานโปรแกรมในการออกแบบ เอาไปฝึกมือกันได้ค่ะ

UI Design Handoff to Development. Course for UX/UI Designer

จาก Udemy สอนโดย Christine Vallaure
คอร์สนี้ได้รับการแนะนำมาจากพี่นน Sappawish Siripon แห่ง KBank ผู้ดูแลทีมดีไซน์ที่ทำแอพของ K Plus พี่นนแนะนำว่า “พี่ลองเรียนคอร์สนี้แล้ว ได้เทคนิคมาเยอะมาก”

คอร์สนี้จะเป็นคอร์สสอนวิธีการ Handoff หรือแปลว่า การส่งให้กับทีม Development หลังจากเราออกแบบงานเสร็จเรียบร้อยแล้วนั่นเองค่ะ คอร์สนี้จะสอนวิธีการตัดรูปยังไงให้ใช้งานได้ถูกขนาดบน digital screen, การจัดการกับกริด, ตั้งค่า Grid อย่างไร, ตั้งค่า CSS ของเรายังไงเพื่อให้ Dev สามารถนำไปใช้งานต่อได้ง่าย


สรุป

งานในสาย UI Design นั้นค่อนข้างหลากหลายและกว้างมาก บางบริษัทก็อาจจะต้องการคนที่มีสกิลทั้งสองฝั่งทั้งเรื่องของการออกแบบและเรื่องของ UX Design ดังนั้นการทำงาน UI ให้ออกมาได้ดีนั้นก็จะต้องมีความรู้หลายด้านประกอบกันเลยค่ะ ทั้งฝั่ง Technology และฝั่งของการออกแบบ และการเข้าใจผู้ใช้งานด้วย ทักษะเหล่านี้อยู่ที่การฝึกฝนฝีมือและการทำงาน

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

สุดท้ายนี้ Designil มีสอนตัวต่อตัวสำหรับผู้ที่สนใจงานทางด้านนี้และต้องการย้ายสายงาน สอนกันตั้งแต่เริ่มต้นแบบจับมือทำ ไปจนถึงทำ Resume + Portfolio สำหรับเตรียมตัวสมัครงาน มีงานจริงให้ทำด้วย ถ้าใครสนใจทักมาในเพจได้เลยนะคะ :D

บทความที่เกี่ยวข้อง

Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย เป็นดีไซน์เนอร์มา 12 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด