Bộ câu hỏi giúp hoàn thiện đặc tả của dự án phía Frontend

Đây cũng là các chú ý khi thiết kế UI/UX hay làm detail design.

• Câu hỏi đầu tiên và cũng là quan trọng nhất: App phục vụ ai, họ có thói quen gì?
• Các item trên màn hình đã hoàn thiện tính năng của App chưa?
• Mỗi item đều phải có 1 sự kiện (event) kèm theo. Nếu có 2 item cùng có 1 event thì liệu có làm cho tính năng tiện hơn không?

Các input item

• validation (tính hợp lệ) là gì?
  • text tương ứng với từng trường hợp invalid (không hợp lệ) là gì?
  • có cần đánh dấu các trường bắt buộc phải nhập không?
  • có disable submit button cho tới khi mọi trường input đã hợp lệ không?
  • Mỗi trường đều nên có giới hạn số lượng ký tự nhập vào.
  • Nếu là nhập số thì chỉ nên cho nhập số thôi để tránh user mất thời gian nếu nhập sai.
  • Nếu là nhập thời gian (date/time) thì chỉ nên cho nhập bằng datepicker thôi cũng để tránh user mất thời gian nếu nhập sai.
  • Nếu là khoảng thời gian thì nên dùng range datepicker vì nó đã có sẵn ràng buộc ngày nhập trước là quá khứ của ngày nhập sau.
• giá trị mặc định là gì?
• Nếu các trường input dài và nhiều thì có cần xác nhận trước khi clear hết data đã nhập không?
• có cần placeholder để gợi ý hoặc làm ví dụ cho user dễ kiểu không?
• Input phía sau bị ràng buộc bởi input trước, ví dụ nhập hoặc lựa chọn field A mà field B bị ẩn, field C hiện ra thì nên để field A (field quyết định) là checkbox hoặc select box. Cá nhân mình thấy nên để là checkbox hơn là select box cho tường minh.
• Trong source code, các input có giới hạn số lượng giá trị ví dụ như status: start / running / end thì nên để kiểm Enum thay vì string hoặc number…

Giá trị output hoặc thông tin hiển thị

• Nếu gọi API thì nên show ra thông báo kết quả call API.
• Khi không có thông tin thì mess text là gì? không nên để trống vì nhầm với trường hợp data là rỗng (null).
• Định dạng date/time phải nhất quán, ví dụ DD-MM-YY.
• Con số thì nên làm tròn lên < 9999, ví dụ 2000 tỷ thay vì hiển thị là 2 000 000 000.
• Dãy số dài thì nên chia tách ra mỗi 3 chữ số cho dễ đọc. Ví dụ thay vì hiển thị số điện thoại 123456789 thì nên hiển thị là 123 456 789 mặc dù data API trả về kết của là 123456789.
• Hạn chế dùng text, nên dùng icon, biểu đồ giúp user dễ nắm bắt thông tin hơn.

Về theme / design guidelines

• Đã thống nhất màu sắc, góc cạnh, khoảng cách giữa các component chưa? Ví dụ nếu dùng góc cạnh là bo tròn thì nên để các component khác cũng là bo tròn.
• 1 bộ mã màu nên có số lượng nhỏ hơn 5 màu và khi nhìn vào phải hài hòa với nhau.
• Nên có animation để user dễ theo dõi sự thay đổi. Animation nên chung 1 duration (delay) và kiểu chuyển động (trong CSS là transition-timing-function). Ví dụ đều có duration là 512 milliseconds và kiểu chuyển động là tuyến tính (linear).
• Bất kể tiến trình nào đó diễn ra đều cần animation bắt đầu, running và kết thúc.
• Component nào loading thì chỉ component đó hiển thị là loading thôi.
• Khi 1 tiến trình đang diễn ra như call API thì nên disable các item khác để tránh các bug không đáng có.

Mật độ hiển thị

• Càng hiển thị ít càng tốt, dựa theo nguyên tắc tối giản hóa giúp tăng hiệu quả công việc khi user có thể focus vào tính năng cần.
• Nếu số lượng item lớn hơn 7 items thì có thể chia ra các group khác nhau, các dropdown, các màn hình khác nhau.
• Trong hiển thị danh sách:
  • Hạn chế dùng phân trang dạng button, ví dụ trang 1 thì có button 1, trang 2 thì có button 2. Vì người dùng rất lười nên họ chỉ muốn scroll thôi.
  • Nên dùng lazy load và Infinite Scroll để tăng hiệu năng hiển thị.
  • Có cần cho thêm hiệu ứng animation khi kéo xuống cuối trang hay đầu trang không?

Hiển thị lượng lớn data

• Có cần dùng Preloading không? Preloading là việc loading data trước và ngầm thực hiện trong background để user không phải đợi quá lâu.

Tác giả: Lưu Vĩnh Lộc