สัปดาห์ที่ 1 แนะนำรายวิชาและหลักการออกแบบ UI/UX

สไลด์บทเรียน

วัตถุประสงค์

1. อธิบายภาพรวมรายวิชา Front-end Development และแนวทางการเรียนแบบลงมือปฏิบัติได้
2. อธิบายบทบาทของ Front-end Developer ในการเชื่อม UI, UX, code และข้อมูลได้
3. แยกความหมายของ UI, UX, Usability, Information Architecture, Wireframe และ User Flow ได้
4. วิเคราะห์หน้าเว็บตัวอย่างและออกแบบ wireframe เบื้องต้นได้
5. ตรวจแนวคิด Accessibility เบื้องต้นและใช้ AI ช่วยวิเคราะห์งานออกแบบอย่างรับผิดชอบได้

ภาพรวมบทเรียน

บทนี้เป็นจุดเริ่มต้นของรายวิชา Front-end Development ผู้เรียนจะมองเว็บในฐานะ ประสบการณ์ใช้งาน ไม่ใช่เพียงหน้า HTML ที่แสดงข้อมูล Front-end ที่ดีต้องรวมความเข้าใจผู้ใช้ การจัดโครงสร้างข้อมูล การออกแบบหน้าจอ การเขียนโค้ด และการสื่อสารกับระบบหลังบ้านเข้าด้วยกัน

คำสำคัญของบทเรียน

• UI (User Interface): สิ่งที่ผู้ใช้มองเห็นและโต้ตอบ เช่น ปุ่ม ฟอร์ม เมนู สี ตัวอักษร และ layout
• UX (User Experience): ประสบการณ์รวมของผู้ใช้ตั้งแต่เริ่มเข้าระบบจนทำงานสำเร็จ
• Usability: ระดับความง่าย ชัดเจน และมีประสิทธิภาพของการใช้งาน
• Information Architecture (IA): การจัดโครงสร้างข้อมูลให้ค้นหา เข้าใจ และใช้งานได้ง่าย
• Wireframe: แบบร่างหน้าจอที่เน้นโครงสร้างและลำดับข้อมูลก่อนลงรายละเอียดภาพ
• User Flow: เส้นทางที่ผู้ใช้เดินผ่านระบบเพื่อทำงานหนึ่งให้สำเร็จ
• Accessibility: การออกแบบให้ผู้ใช้หลากหลายกลุ่มเข้าถึงและใช้งานเว็บได้

1. ภาพรวมรายวิชา Front-end Development

รายวิชานี้เริ่มจากการเข้าใจผู้ใช้และการออกแบบหน้าจอ จากนั้นค่อยต่อยอดสู่ HTML, CSS, JavaScript, framework, API integration, responsive design, testing และการนำเสนอ project

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#83a598',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[UI/UX
เข้าใจผู้ใช้] --> B[HTML
โครงสร้าง]
  B --> C[CSS
รูปแบบและ Layout]
  C --> D[JavaScript
Interaction]
  D --> E[Framework
โครงสร้างแอป]
  E --> F[API Integration
เชื่อมข้อมูล]
  F --> G[Front-end Project
ผลงานรวม]

2. บทบาทของ Front-end Developer

Front-end Developer พัฒนาส่วนของเว็บที่ผู้ใช้เห็น ใช้งาน และโต้ตอบโดยตรง งานนี้ไม่ใช่เพียงทำหน้าเว็บให้สวย แต่ต้องทำให้เว็บเข้าใจง่าย ใช้งานได้จริง โหลดเหมาะสม รองรับหลายหน้าจอ และเชื่อมต่อข้อมูลจาก API ได้ถูกต้อง

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#b8bb26',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[User
ผู้ใช้] --> B[Front-end UI
หน้าจอ]
  B --> C[Front-end Logic
ตรรกะฝั่งผู้ใช้]
  C --> D[Back-end API
บริการข้อมูล]
  D --> E[(Data
ข้อมูล)]
  E --> D
  D --> C

งานหลักของ Front-end Developer

1. แปลง requirement และ design ให้เป็นหน้าเว็บที่ใช้งานได้จริง
2. สร้างโครงสร้างด้วย HTML และใช้ semantic tag อย่างเหมาะสม
3. จัด layout สี ตัวอักษร ระยะห่าง และ responsive ด้วย CSS
4. เพิ่ม interaction ด้วย JavaScript
5. เชื่อมต่อข้อมูลจาก API
6. ตรวจ responsive, accessibility, performance และ browser compatibility
7. ทำงานร่วมกับ designer, back-end developer และผู้ใช้

3. UI, UX และ Usability

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

หลักการ Usability เบื้องต้น

4. Information Architecture

Information Architecture หรือ IA คือการจัดโครงสร้างข้อมูลให้ผู้ใช้ค้นหา เข้าใจ และใช้งานได้ง่าย หาก IA ไม่ดี ต่อให้ UI สวย ผู้ใช้ก็ยังหลงทางหรือหาข้อมูลไม่เจอ

คำถามที่ใช้จัด IA

1. ข้อมูลใดสำคัญที่สุด
2. ผู้ใช้ควรเห็นอะไรเป็นอันดับแรก
3. ข้อมูลใดควรอยู่กลุ่มเดียวกัน
4. เมนูหลักควรมีกี่รายการ
5. ผู้ใช้ต้องผ่านกี่ขั้นตอนจึงถึงเป้าหมาย

Portfolio Website
  Home
  About
  Skills
  Projects
    Project Detail
  Contact

5. Wireframe และ User Flow

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

+----------------------------------+
| Header / Logo / Navigation       |
+----------------------------------+
| Hero: ชื่อและคำอธิบายสั้น       |
| [ดูผลงาน] [ติดต่อ]              |
+----------------------------------+
| About / Skills                   |
+----------------------------------+
| Project Cards                    |
+----------------------------------+
| Contact Form                     |
+----------------------------------+

%%{init: {'theme': 'base', 'themeVariables': {
  'background': '#282828',
  'primaryColor': '#3c3836',
  'primaryTextColor': '#fbf1c7',
  'primaryBorderColor': '#fabd2f',
  'lineColor': '#d3869b',
  'secondaryColor': '#504945',
  'tertiaryColor': '#665c54',
  'fontFamily': 'Arial'
}}}%%
flowchart LR
  A[Need
ต้องการติดต่อ] --> B[Home
เข้า Portfolio]
  B --> C[Contact Menu
กดเมนู Contact]
  C --> D[Form
กรอกฟอร์ม]
  D --> E[Submit
กดส่ง]
  E --> F[Feedback
เห็นข้อความสำเร็จ]

6. Accessibility เบื้องต้น

Accessibility คือการออกแบบและพัฒนาเว็บให้คนหลากหลายกลุ่มใช้งานได้ รวมถึงผู้ใช้ที่มีข้อจำกัดด้านการมองเห็น การได้ยิน การเคลื่อนไหว การรับรู้ หรืออยู่ในสภาพแวดล้อมจำกัด เช่น มือถือกลางแดด อินเทอร์เน็ตช้า หรือใช้ keyboard แทน mouse

แนวทางพื้นฐาน

1. ใช้ semantic HTML เช่น button, nav, main, label
2. รูปภาพที่มีความหมายควรมี alt
3. ข้อความกับพื้นหลังควรมี contrast เพียงพอ
4. ปุ่มและ link ควรมีข้อความที่เข้าใจได้
5. Form input ควรมี label
6. ใช้งานด้วย keyboard ได้
7. ไม่ใช้สีเพียงอย่างเดียวเพื่อสื่อความหมาย

<a href="project.html">ดูรายละเอียดโครงการ Portfolio</a>

<label for="email">อีเมล</label>
<input id="email" name="email" type="email">

7. การประเมิน UX แบบง่ายด้วยคะแนนถ่วงน้ำหนัก

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

• S คือ คะแนน UX รวม
• C คือ คะแนนความชัดเจนของเนื้อหาและปุ่ม
• F คือ คะแนนความลื่นไหลของ user flow
• A คือ คะแนน accessibility เบื้องต้น
• E คือ คะแนนประสิทธิภาพและความรวดเร็วในการทำงาน

8. การใช้ AI ช่วยเรียนรู้และวิเคราะห์งานออกแบบ

AI ช่วยอธิบายแนวคิด UI/UX ตั้ง checklist ให้ feedback ต่อ wireframe เปรียบเทียบ layout และช่วยตั้งคำถาม usability ได้ แต่ต้องใช้เป็นผู้ช่วยคิด ไม่ใช่ผู้ตัดสินใจแทนทั้งหมด

ช่วยวิเคราะห์หน้าเว็บ portfolio นี้ในมุม UI/UX โดยดูจาก
1. ความชัดเจนของเป้าหมายหน้าเว็บ
2. ลำดับข้อมูล
3. ปุ่มหรือ action สำคัญ
4. accessibility เบื้องต้น
5. จุดที่ควรปรับปรุง

ข้อควรระวัง

1. ไม่ส่งข้อมูลส่วนบุคคลหรือข้อมูลลับเข้า AI
2. ตรวจคำตอบกับหลักการที่เชื่อถือได้
3. ไม่คัดลอกคำตอบโดยไม่เข้าใจ
4. ใช้ AI เพื่อช่วยตั้งคำถามและหาทางเลือก ไม่ใช่เพื่อหลีกเลี่ยงการคิดเอง

Checklist ก่อนส่งงาน UI/UX

กิจกรรมในชั้นเรียน

วิเคราะห์เว็บไซต์ 1 เว็บไซต์ โดยระบุจุดเด่น จุดที่ทำให้ผู้ใช้สับสน และออกแบบ wireframe ใหม่ 1 หน้าจอ พร้อม user flow สำหรับงานสำคัญ 1 flow

ศึกษาค้นคว้านอกเวลา

เลือกเว็บแอปพลิเคชันที่ใช้งานประจำ แล้วสรุปว่าองค์ประกอบใดทำให้ใช้งานง่ายหรือยาก โดยใช้หัวข้อ UI, UX, IA, accessibility และ feedback ของระบบ

คำถามทบทวน

1. UI และ UX แตกต่างกันอย่างไร
2. Wireframe ช่วยลดปัญหาระหว่างออกแบบและพัฒนาได้อย่างไร
3. Front-end Developer ควรสนใจ Accessibility เพราะอะไร
4. Information Architecture ส่งผลต่อการใช้งานเว็บอย่างไร
5. ควรใช้ AI ช่วยวิเคราะห์งานออกแบบอย่างไรให้รับผิดชอบ

กลับรายวิชา