reveal.js

# สัปดาห์ที่ 1

แนะนำรายวิชาและหลักการออกแบบ UI/UX

---

## เป้าหมาย

- เข้าใจภาพรวม **Front-end Development**
- อธิบายบทบาทของ **Front-end Developer**
- แยก **UI**, **UX** และ **Usability**
- สร้าง **Wireframe** และ **User Flow** เบื้องต้น
- ตรวจ **Accessibility** เบื้องต้น
- ใช้ **AI** เป็นผู้ช่วยคิดอย่างรับผิดชอบ

---

## Learning Path

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
 A[UI/UX ผู้ใช้] --> B[HTML โครงสร้าง]
 B --> C[CSS Layout]
 C --> D[JavaScript Interaction]
 D --> E[Framework แอป]
 E --> F[API ข้อมูล]
 F --> G[Project ผลงาน]
</pre>

---

## ช่วงการเรียน

| ช่วง | สิ่งที่ควรทำได้ |
|---|---|
| UI/UX | วิเคราะห์เว็บและทำ wireframe |
| HTML/CSS | สร้างโครงสร้างและ layout |
| JavaScript | เพิ่ม interaction |
| Framework/API | เชื่อมข้อมูลจริง |
| Project | รวมเป็นผลงาน |

---

## Front-end Role

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
flowchart LR
 A[User ผู้ใช้] --> B[Front-end UI หน้าจอ]
 B --> C[Front-end Logic ตรรกะ]
 C --> D[Back-end API ข้อมูล]
 D --> E[(Data ฐานข้อมูล)]
</pre>

---

## Front-end Developer

1. แปลง requirement และ design เป็นหน้าเว็บ
2. สร้าง HTML structure
3. จัด layout ด้วย CSS
4. เพิ่ม interaction ด้วย JavaScript
5. เชื่อมต่อ API
6. ตรวจ responsive, accessibility และ performance

---

## UI / UX / Usability

| แนวคิด | คำถามหลัก |
|---|---|
| UI | ผู้ใช้เห็นและกดอะไร |
| UX | ผู้ใช้เดินทางผ่านระบบอย่างไร |
| Usability | ผู้ใช้ทำงานสำเร็จง่ายแค่ไหน |

---

## Usability Principles

| หลักการ | ความหมาย |
|---|---|
| Clarity | ชัดเจน |
| Consistency | สม่ำเสมอ |
| Feedback | มีการตอบสนอง |
| Error Prevention | ลดความผิดพลาด |
| Efficiency | ทำงานสำคัญได้เร็ว |

---

## Information Architecture

**IA** คือการจัดโครงสร้างข้อมูลให้ค้นหาและเข้าใจง่าย

```text
Portfolio Website
  Home
  About
  Skills
  Projects
    Project Detail
  Contact
```

---

## IA Checklist

- ข้อมูลสำคัญอยู่ก่อน
- เมนูใช้คำที่ผู้ใช้เข้าใจ
- จัดกลุ่มตามงานของผู้ใช้
- จำกัดจำนวนเมนูหลัก
- ใช้ heading ช่วย scan
- บอกตำแหน่งปัจจุบัน

---

## Wireframe

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

---

## User Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
 A[Need ต้องการติดต่อ] --> B[Home Portfolio]
 B --> C[Contact กดเมนู]
 C --> D[Form กรอกข้อมูล]
 D --> E[Submit กดส่ง]
 E --> F[Feedback สำเร็จ]
</pre>

---

## Wireframe vs User Flow

| หัวข้อ | Wireframe | User Flow |
|---|---|---|
| ตอบคำถาม | หน้าจอมีอะไร | ผู้ใช้เดินทางอย่างไร |
| รูปแบบ | layout | ขั้นตอน |
| ลดปัญหา | ข้อมูลผิดลำดับ | flow ยาวหรือสับสน |

---

## Accessibility

- ใช้ semantic HTML
- รูปภาพสำคัญมี `alt`
- contrast เพียงพอ
- form มี label
- ใช้งานด้วย keyboard ได้
- ไม่ใช้สีอย่างเดียวเพื่อสื่อความหมาย

---

## Accessible Markup

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

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

---

## UX Score

- **S**: คะแนน UX รวม
- **C**: clarity
- **F**: flow
- **A**: accessibility
- **E**: efficiency

---

## ใช้ AI ช่วยวิเคราะห์

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

---

## AI Safety

- ไม่ส่งข้อมูลส่วนบุคคลหรือข้อมูลลับ
- ตรวจคำตอบกับหลักการที่เชื่อถือได้
- ไม่คัดลอกโดยไม่เข้าใจ
- ใช้ AI เป็นผู้ช่วยคิด ไม่ใช่ผู้ตัดสินใจแทนทั้งหมด

---

## Checklist

- เป้าหมายหน้าเว็บชัดเจน
- ระบุผู้ใช้เป้าหมายได้
- เมนูและหัวข้ออ่านเข้าใจง่าย
- มี wireframe
- มี user flow อย่างน้อย 1 flow
- คิดถึง accessibility
- อธิบายเหตุผลของการออกแบบได้

---

## กิจกรรม

วิเคราะห์เว็บไซต์ 1 เว็บไซต์:

1. ระบุจุดเด่น
2. ระบุจุดที่ทำให้ผู้ใช้สับสน
3. ออกแบบ wireframe ใหม่ 1 หน้าจอ
4. วาด user flow สำหรับงานสำคัญ 1 flow

---

## คำถามท้ายบท

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