Bỏ qua để đến nội dung

Smart Search Platform - UI Placeholder by Flow

SharedShared Capabilities1.682 words8 min read

activebyDOL Product Design

Purpose

Chuẩn hóa placeholder và UI state của Smart Search theo từng flow/module.
Đảm bảo tone nhất quán nhưng vẫn đúng ngữ cảnh từng trang.
Mapping chi tiết area/page tham chiếu tại ux-patterns/SSP_Area_Positioning_Page_Behavior.md.

1. Global UI State Contract

State	Trigger	Placeholder/Label	UI Blocks	Primary CTA
`closed`	chưa focus	Rotating hint theo module	search bar tối giản	focus/search
`zero-state`	focus + query rỗng	gợi ý hành động theo ngữ cảnh hiện tại	Urgency, Momentum, Insight	chọn 1 quick action
`typing-prefix`	query 1-2 ký tự	”Lệnh phổ biến”	completion list (max 3)	autocomplete
`typing-umbrella`	query tổng quát (`AI`, `làm bài`)	“Danh sách tính năng liên quan”	feature catalogs theo group	mở feature phù hợp
`typing-facet`	query theo loại nội dung (`báo cáo`, `widget`, `checklist`, `popup`)	“Tính năng theo loại nội dung”	facet result list	mở đúng loại tính năng
`typing-semantic`	query >= 3 ký tự	”Kết quả phù hợp”	Hero + grouped results	open/deep-link
`inline-ai`	chọn intent AI	”AI Insight”	summary + widget + CTA handoff	phân tích sâu
`no-result`	không match	”Chưa thấy kết quả phù hợp”	fallback suggestions + AI ask	hỏi AI Tutor
`error`	timeout/system fail	”Có lỗi tạm thời”	safe fallback list	thử lại

2. Placeholder Spec by Module

2.1 Home & Discovery

`home.prelogin_main`

Search bar placeholder:
- Bạn muốn khám phá chương trình hay khóa học phù hợp?
- Tìm nhanh hướng học, chương trình IELTS/SAT/TOEIC hoặc khóa học phù hợp...
Zero-state lanes:
- Khám phá chương trình.
- Khám phá khóa học.
- So sánh lộ trình.
Quick chips:
- Chọn chương trình IELTS.
- Khám phá khóa học.
- So sánh tự học và học theo khóa.

`home.program_landing_prelogin`

Search bar placeholder:
- Tìm nhanh skill, phần chấm bài, hoặc lộ trình của chương trình này...
Quick chips:
- Làm bài vs Kết quả.
- Điểm đa tiêu chí.
- Gợi ý từ vựng.

`home.program_compare_prelogin`

Search bar placeholder:
- So sánh chương trình theo mục tiêu của bạn (IELTS/SAT/TOEIC)...
Quick chips:
- IELTS vs TOEIC.
- SAT vs IELTS.
- Đề xuất phù hợp.

`home.main`

Search bar placeholder:
- Hôm nay bạn muốn học tiếp gì?
- Tìm nhanh bài cần làm, lịch học, hoặc ôn từ vựng...
Zero-state lanes:
- Tiếp tục học.
- Việc cần xử lý 72h.
- Gợi ý từ snapshot CM/LM/VOC.
Quick chips:
- Tiếp tục bài gần nhất.
- Lịch học hôm nay.
- Ôn từ cần học hôm nay.

2.2 Course Management

`course.dashboard`

Search bar placeholder:
- Xử lý việc cần làm hôm nay, tiếp tục bài dở hoặc chuẩn bị lớp tới...
Zero-state lanes:
- Due today/overdue.
- Continue in progress.
- Next class prep.
Quick chips:
- BTVN gần hạn.
- Tiếp tục bài đang làm.
- Chuẩn bị buổi học tới.

`course.schedule_tab`

Search bar placeholder:
- Xem lịch học sắp tới, tài liệu cần xem trước và lịch bù...
Quick chips:
- Buổi học kế tiếp.
- Tài liệu pre-read.
- Đặt lớp bù.

`course.assignment_tab`

Search bar placeholder:
- Tìm bài tập theo hạn nộp, trạng thái và kỹ năng...
Quick chips:
- Bài cần nộp hôm nay.
- Bài quá hạn.
- Chỉ bài bắt buộc.

`course.test_tab`

Search bar placeholder:
- Tìm bài test online/mock/final và mở đúng bài cần làm...
Quick chips:
- Thi thử sắp tới.
- Bài test chưa làm.
- Xem kết quả gần nhất.

`course.detail_tab`

Search bar placeholder:
- Mở nhanh recap, slide, feedback hoặc tab chi tiết trong khóa...
Quick chips:
- Recap buổi gần nhất.
- Slide buổi tới.
- Feedback giáo viên.

`course.ops`

Search bar placeholder:
- Báo nghỉ, đặt lịch bù, xem điểm danh và thao tác lớp học...
Quick chips:
- Báo nghỉ buổi tới.
- Đặt lớp 1-1.
- Xem điểm danh.

`course.ai_insight`

Search bar placeholder:
- AI tổng hợp tiến độ, kế hoạch gỡ bài và chuẩn bị lớp học...
Quick chips:
- Thống kê quá trình (AI).
- Kế hoạch gỡ bài.
- Checklist trước lớp.

`course.guest_overview`

Search bar placeholder:
- Khám phá cách học theo khóa và chọn hướng phù hợp...
Quick chips:
- Xem lộ trình khóa.
- Tư vấn khóa phù hợp.
- So sánh với tự học.

`course.guest_courses_preview`

Search bar placeholder:
- Tìm khóa theo mục tiêu, lịch học, hoặc hình thức học...
Quick chips:
- Khóa mới bắt đầu.
- Lịch buổi tối.
- Khóa online.

`course.guest_course_detail_gate`

Search bar placeholder:
- Mở nhanh thông tin khóa, đăng nhập để xem sâu, hoặc đặt tư vấn...
Quick chips:
- Đăng nhập xem đầy đủ.
- Đặt tư vấn.
- Khóa tương tự.

2.3 Learning Management

`learning.dashboard`

Search bar placeholder:
- Tìm điểm yếu cần luyện, khoảng cách mục tiêu và bài nên làm tiếp...
Zero-state lanes:
- Weakest analysis unit.
- Impact cao trong 30 ngày hoạt động.
- Next best exercise.
Quick chips:
- Đơn vị yếu nhất.
- Thiếu bao nhiêu để đạt mục tiêu.
- Bài nên làm ngay.

`learning.analysis_table`

Search bar placeholder:
- Lọc theo skill/section/domain để thấy nhóm cần luyện gấp...
Quick chips:
- Cần luyện gấp.
- Nên luyện thêm.
- Chỉ nhóm confidence cao.

`learning.goal_panel`

Search bar placeholder:
- Mở nhanh mục tiêu, sửa target và lịch thi theo chương trình...
Quick chips:
- Đổi mục tiêu.
- Sửa lịch thi.
- Xem tiến độ theo goal.

`learning.saved_tab`

Search bar placeholder:
- Tìm bài đã lưu theo trạng thái, kỹ năng hoặc tên bài...
Quick chips:
- Bài đang làm.
- Bài đã làm.
- Áp dụng bộ lọc đã lưu.

`learning.history_tab`

Search bar placeholder:
- Xem lịch sử tuần/tháng/năm và mở lại bài theo ngữ cảnh...
Quick chips:
- Lịch sử 7 ngày.
- Heatmap năm.
- Mở kết quả gần nhất.

`learning.high_attention`

Search bar placeholder:
- Bạn đang cần phục hồi phong độ, bắt đầu kế hoạch học phù hợp ngay...
Quick chips:
- Kế hoạch học.
- Bước ưu tiên hiện tại.
- Bước học thêm.

2.4 Practice Flow

Entry placeholder:
- Tìm bài theo dạng, kỹ năng, hoặc bối cảnh khóa học...
Result placeholder:
- Làm tiếp bài tương tự.
- Ôn lại lỗi vừa sai.
- Gửi gợi ý từ vựng sang sổ từ.
Quick chips:
- Bài đang làm dở.
- Bài cùng dạng.
- Fix Mistakes.

2.5 Vocabulary Management

`vocabulary.dashboard`

Search bar placeholder:
- Ôn từ cần tưới hôm nay, mở list đã lưu hoặc bắt đầu phiên 5 phút...
Zero-state lanes:
- Due words today.
- Mistake-based list.
- Quick open.
Quick chips:
- Ôn 5 từ cần tưới.
- Mở list của tôi.
- Xem vườn cây.

`vocabulary.list_tab`

Search bar placeholder:
- Tìm nhanh danh sách từ theo tên/chủ đề và mở ngay trong tab này...
Quick chips:
- List mới lưu gần đây.
- List từ bài hay sai.
- Tạo list mới.

`vocabulary.garden_tab`

Search bar placeholder:
- Mở vườn cây, lọc cây cần tưới và ôn ngay từ đây...
Quick chips:
- Cây cần tưới.
- Cây sắp héo.
- Thăm vườn của tôi.

`vocabulary.analytics_tab`

Search bar placeholder:
- Xem thống kê tuần/tháng và hiệu suất học từ vựng của bạn...
Quick chips:
- Báo cáo tuần.
- Xu hướng tháng.
- Chủ đề đang tập trung.

`vocabulary.session`

Search bar placeholder:
- Tìm từ trong phiên này hoặc mở nhanh mục tiêu tuần...
Quick chips:
- Từ sai gần đây.
- Đổi mục tiêu tuần.
- Hỏi AI giải thích.

`vocabulary.reminder_center`

Search bar placeholder:
- Thiết lập nhắc ôn và giờ học từ vựng phù hợp lịch của bạn...
Quick chips:
- Nhắc lúc 20:00.
- Bật DND.
- Xem nhắc gần nhất.

3. Visual Rules for Placeholder Blocks

Mỗi state có 1 mục đích hành động rõ, không trộn nhiều thông điệp.
Placeholder text luôn viết theo ngôn ngữ hành động (làm gì ngay bây giờ).
Zero-state luôn có ít nhất 1 item từ context hiện tại.
Empty/no-result state luôn có fallback có thể hành động, không dead-end.

4. Keyboard and Interaction Rules

Cmd/Ctrl + K: mở search tại mọi module đã tích hợp.
Arrow Up/Down: điều hướng.
Enter: thực thi.
Esc: đóng hoặc quay lại list từ inline-ai.

References

Change log

2026-03-18: Bước ưu tiên hiện tại.
2026-02-28: title: “Smart Search Platform - UI Placeholder by Flow”