# 06 — UX/UI

Source: proposal §4.10 and mockup images 8–13 (copied to `assets/ui/`). Mockups are **illustrative concept designs**. Names, numbers and dates in them are sample data.

**Internal design workspace (31 ต.ค. 2569):** [Mockup workspace](17-mockup-workspace.md) adds screen/variant/component artifacts under `mockups/` and Sitemap/Page flow/Screen Listing in the tracker. New wireframes and inferred screen-step/navigation mappings remain proposals; original proposal images below retain their reference status.

## General principles [confirmed in proposal]

- Easy to use, clear information, tailored to the user's role.
- Consistent screen patterns across channels.
- **Responsive design**.
- Role-based menus. Menus differ by education level.
- Accessibility considered.

## Visual language [mockup]

- TNSU logo, top-left. Brand colours: deep navy/blue sidebar and header, with yellow accent on "TNSU".
- Card-based dashboards with pastel icon tiles, KPI cards (value + trend ↑% vs. previous period + "ดูรายละเอียด" link), donut and bar charts.
- Thai UI copy. Buddhist-era dates.
- Bottom tab bar on mobile. Collapsible left sidebar on web.

## Per-channel guidelines and mockup content

### Student Mobile App (TNSU-06): `assets/ui/student-mobile-app.png`
Guideline: focus on frequently used info (timetable, grades, requests, finance, notifications). Menus are specific to education level.
Mockup:
- Profile card: name, student ID, faculty, major, campus, and a "ดูข้อมูลส่วนตัว" link.
- Quick actions: ลงทะเบียนเรียน, ผลการเรียน, ตารางเรียน, ยื่นคำร้อง, ชำระเงิน, เมนูเพิ่มเติม.
- Today's timetable: time, course name and code, room, status chip (กำลังจะเริ่ม / ถัดไป / ภาคบ่าย).
- Summary cards: outstanding fees with due date, latest GPA, request status.
- Banner carousel, then announcements.
- Bottom tabs: หน้าหลัก, การศึกษา, กีฬา, แจ้งเตือน (badge), เพิ่มเติม.

### Parent Mobile App (TNSU-07): `assets/ui/parent-mobile-app.png`
Guideline: make it easy to follow children, including **several children** under granted permissions.
Mockup:
- Greeting, "parent of N students", and a "จัดการข้อมูลผู้ปกครอง" link.
- **Child switcher cards** (school child ม.5/1 and university child ปี 1).
- 12 tiles: ข้อมูลการศึกษา, ผลการเรียน, การเข้าเรียน, การลา, หอพัก, สุขภาพ, กีฬาและการแข่งขัน, ค่าใช้จ่าย, ประกาศ, เอกสาร, ข้อความจากโรงเรียน/มหาวิทยาลัย, เมนูเพิ่มเติม.
- "วันนี้ของลูก" (child's day): classes **and training sessions**.
- Cards: GPA, attendance % (e.g. 19/20 days), fee status.
- Bottom tabs: หน้าหลัก, ข้อมูลบุตรหลาน, กิจกรรม, แจ้งเตือน, เพิ่มเติม.

### Student Web Portal (TNSU-08): `assets/ui/student-web-portal.png`
Guideline: for detail-heavy tasks such as course registration, forms, attachments and reviewing academic records.
Mockup:
- Sidebar: หน้าหลัก, ข้อมูลส่วนตัว, ลงทะเบียนเรียน, ตารางเรียน, ผลการเรียน, คำร้องออนไลน์, การเงินและการชำระเงิน, ทุนการศึกษา / กยศ., กิจกรรมและกีฬา, ประกาศ/ข่าวสาร, เอกสารของฉัน.
- Top cards: registration (ลงทะเบียน / เพิ่ม-ถอน), latest GPA, outstanding balance, my requests.
- Today's timetable, academic calendar, announcements with category tabs (ทั้งหมด / การศึกษา / ทุนการศึกษา / กิจกรรม / กีฬา), and a customisable quick menu (ปรับแต่งเมนู).

### Staff Backoffice (TNSU-09): campus variant, `assets/ui/staff-backoffice-campus.png`
Guideline: menus grouped by function; search, filtering, bulk operations and a queue of pending work.
Mockup (campus, academic officer):
- Global search: "ค้นหานักศึกษา เลขประจำตัว ชื่อ-นามสกุล รายวิชา คำร้อง".
- Unit selector, notifications, user menu.
- Sidebar: หน้าหลัก, ข้อมูลนักศึกษา, รับสมัครและคัดเลือก, ทะเบียนและประมวลผล, หลักสูตรและแผนการเรียน, การเรียนการสอน, ผลการเรียน, คำร้องและเอกสาร, การเงินและค่าธรรมเนียม, ทุนการศึกษา / กยศ., กิจกรรมและศึกษา, หอพัก, นักกีฬาและการแข่งขัน, ศิษย์เก่า, รายงานและสถิติ, ตั้งค่าระบบ.
- KPIs: total students, registered (with %), not registered, average attendance.
- Chart of students by faculty (total vs. registered), donut of registration status.
- Latest requests table with status tabs (ทั้งหมด / รอดำเนินการ / อนุมัติแล้ว / ไม่อนุมัติ), with columns: request no., name, type, date, status, action.
- Activity calendar and today's activities.

### Staff Backoffice: sports-school variant, `assets/ui/staff-backoffice-sports-school.png`
Same layout, but with a **school-specific menu**: ข้อมูลนักเรียน, รับสมัครและคัดเลือก, ทะเบียนและประมวลผล, ตารางเรียน, ผลการเรียน, การเข้าเรียน / การลา, หอพัก, กิจการนักเรียน, นักกีฬาและการฝึกซ้อม, การแข่งขัน, สุขภาพและโภชนาการ, รายงานและสถิติ, ตั้งค่าระบบ.
- Chart of students per grade (ม.1–ม.6).
- Donut of student type: นักเรียนทั่วไป, นักกีฬาความสามารถพิเศษ, ทุนการศึกษา, อื่น ๆ.
- Activities include morning training (ฝึกซ้อมเช้า) and student-affairs meetings.

### Executive Dashboard (TNSU-10): `assets/ui/executive-dashboard.png`
Guideline: KPIs, charts and reports with overview and drill-down by campus, school and period.
Mockup:
- Filters: academic year and semester.
- Sidebar: ภาพรวมทั้งมหาวิทยาลัย, ข้อมูลนักเรียน/นักศึกษา, รับสมัคร, การลงทะเบียน, ผลการเรียน, บุคลากร, งบประมาณและการเงิน, หอพักและสวัสดิการ, กีฬาและกิจกรรมนักศึกษา, รายงานและสถิติ.
- KPI cards: total learners, campus students, school students, staff (each with YoY trend).
- **Thailand map** of units, with tabs for campuses (17) and schools (13) and a ranked table.
- 5-year learner trend (2564–2568), campus vs. school ratio.
- Admission (target vs. applicants), registration status (registered / not / cancelled-suspended), average GPA, graduation rate.
- Budget breakdown (personnel / operating / capital / subsidy), student activities by category, and news.