Chương 6: Chiến lược UX & Views

"Giao diện tốt là giao diện khiến người dùng quên mất họ đang dùng phần mềm."

Người dùng cuối (End-user) không quan tâm Database của bạn chuẩn thế nào. Họ chỉ quan tâm App có Dễ nhìn và Dễ dùng hay không. Chương này sẽ giúp bạn biến những dữ liệu khô khan thành giao diện trực quan, sinh động – và quan trọng hơn, đúng thiết bị – đúng quy trình – đúng cách thao tác.

AppSheet có 3 chế độ hiển thị chính:

• Mobile Mode: Mặc định khi mở trên điện thoại, tối ưu cho thao tác một tay, vuốt – chạm – kéo thả.
• Desktop Mode: Kích hoạt khi trình duyệt rộng ≥ 1024 px, tận dụng không gian ngang để chia cột, mở rộng bảng.
• Tablet Mode: Nằm giữa, vừa đủ rộng để dùng Table nhưng vẫn cần các thao tác cảm ứng.

Nguyên tắc chọn View theo quy trình & thiết bị

Lưu ý: Luôn test ở cả 3 chế độ trước khi release; AppSheet tự động co giãn nhưng bạn phải quyết định cột nào ẩn, trường nào xuống dòng, icon nào thay bằng nút.

6.1 Các loại View cơ bản (View Types)

AppSheet cung cấp khoảng 10 loại View khác nhau. Để dễ nhớ, tôi chia chúng thành 3 nhóm dựa trên mục đích sử dụng:

1. Deck View – “Vua” Mobile

   • Dùng cho danh sách khách hàng, nhân viên, đơn hàng.
   • Trên Desktop: có thể chuyển sang Card List 2–3 cột để khỏi lãng phí không gian.

2. Table View – “Vua” Desktop

   • Hiển thị nhiều cột, sort nhanh, copy/paste dễ.
   • Trên Mobile: nên để Row-height = Large, giới hạn 3–4 cột quan trọng, còn lại ẩn trong Quick-view.

3. Detail View – Nơi bạn “kể chuyện”

   • Có thể chia Tab, chia Section, hoặc dùng HTML/LongText để tạo bản in đẹp, hợp đồng, phiếu giao nhận.
   • Lưu ý: HTML cho phép nhúng CSS inline, ảnh base64, video YouTube, hyperlink tel:, mailto:; nhưng không tính toán được (không dùng trong App Formula) và tăng dung lượng sync nếu dài > 5 ký tự.

4. Form View – 3 kiểu layout

   • Fullscreen (mặc định trên phone): phù hợp nhập liệu dài.
   • Side-panel (Desktop): vừa nhập vừa xem danh sách.
   • Pop-up (Tablet): nhanh, đóng lại ngay khi xong.

5. Gallery View – Lưới ảnh

   • Instagram/Pinterest style.
   • Tốt cho catalog, ảnh thực tế công trình.
   • Trên Desktop: chỉnh Image height = Medium, Columns = auto-fit để không bị giãn.

6. Kanban View – Quy trình kéo-thả

   • Tốt nhất trên Tablet & Desktop (kéo thả dễ).
   • Trên Phone: nên bật Compact cards, giới hạn 3 cột đầu tiên.

7. Calendar & Map

   • Calendar: Phone chỉ nên xem Agenda; Desktop mới bật Month.
   • Map: Phone mở App Google Maps khi tap; Desktop embed trực tiếp.

6.2 Data Type nâng cao cho UX

Mẹo:

• Muốn không nặng App nhưng vẫn nhiều thông tin → dùng Show-column kiểu CONCATENATE() để gom text, ảnh, hyperlink; để ảnh thật trên Google Drive rồi nhúng link https://drive.google.com/uc?export=view&id=....
• Cần in đẹp → tạo cột HTML, dùng <table>, <span style="color:red">, <img width=100%>.
• Cần tính toán động → dùng App Formula bình thường, không nhét vào HTML.

6.3 Format Rules: Nghệ thuật Thị giác (Visual Cues)

Đừng để App của bạn "nhạt nhòa" với màu đen trắng mặc định. Hãy dùng Format Rules để dữ liệu "biết nói".

6.3.1 Các thành phần có thể tùy biến:

• Icon: Thêm biểu tượng trước giá trị (Ví dụ: trước số tiền, trước trạng thái "Hủy").
• Text Color: Đổi màu chữ (Xanh, Đỏ, Vàng).
• Text Style: Bold (Đậm), Italic (Nghiêng), Uppercase (In hoa), Strike (Gạch ngang - dùng cho việc đã xong).
• Text Size: Tăng giảm kích thước chữ (0.5x đến 1.5x) - Dùng để nhấn mạnh key info.

6.3.2 Ví dụ Thực chiến:

1. Deadline Sắp đến:
   • Condition: [Deadline] <= TODAY() + 3
   • Format: Màu cam, Icon ⏰.
2. Công nợ Quá hạn:
   • Condition: AND([TrangThai]="Chưa trả", [HanTra] < TODAY())
   • Format: Màu Đỏ, Bold, Text Size 1.2, Icon .
3. VIP Customer:
   • Condition: [Rank] = "Platinum"
   • Format: Màu Tím, Icon �.

Mẹo: Đừng lạm dụng. Nếu mọi thứ đều Bold và Đỏ, sẽ không còn gì nổi bật nữa. Chỉ highlight những thứ cần Hành động ngay.

6.4 App Settings & Information: Tinh chỉnh Hệ thống

Vào Settings để kiểm soát hành vi chung của App.

6.4.1 Information (Thông tin Ứng dụng)

• Properties:
  • Short Name: Tên ngắn gọn dùng trong URL.
  • Description: Mô tả app (quan trọng khi share cho người mới hay làm tài liệu hướng dẫn).
• Privacy Policy & Terms: Link đến chính sách bảo mật (bắt buộc nếu publish store làm Public App).

6.4.2 Theme & Brand (Giao diện Thương hiệu)

• Primary Color: Chọn đúng màu thương hiệu (Brand Guidelines).
• Logo & Launch Image: Ảnh logo công ty và màn hình chờ khi App đang load.
• Header & Footer: Tùy chọn hiện nút Menu, Search, Sync ở đâu. Chọn "Hide menu button" nếu bạn dùng Bottom Navigation bar để app trông clean hơn.

6.4.3 Views (Cấu hình chung)

• Starting View: Màn hình đầu tiên khi mở App (thường là Dashboard).
• Pull to Refresh: Cho phép vuốt xuống để Sync (Rất nên bật để tạo trải nghiệm Native App).

6.5 Tính năng Mới & Experimental (Preview Feature)

AppSheet liên tục cập nhật. Bạn cần biết các tính năng "Preview" để đi trước thời đại, nhưng cũng cần cẩn thận vì chúng đang thử nghiệm.

Vào Settings > Preview Program để xem (hoặc tìm trong từng mục Settings liên quan).

6.5.1 Desktop Mode (Giao diện Máy tính mới)

• Trước đây: AppSheet trên web trông giống như một cái điện thoại bị kéo giãn (Mobile-blown-up), rất xấu, lãng phí không gian.
• Hiện tại (Desktop Mode): Giao diện tối ưu cho chuột và bàn phím.
  • Các View Table và Deck tự động chia nhiều cột hơn.
  • Dashboard hiển thị full màn hình, không bị bó hẹp.
  • Menu điều hướng chuyển sang bên trái (Side-nav) thay vì Bottom-bar.
• Cách bật: Vào Editor > Settings > Views > General > Bật "Preview new desktop mode".

6.5.2 New Chart Engine (Biểu đồ mới)

• Biểu đồ cũ của Google (Image Charts) khá xấu (render dạng ảnh tĩnh) và không tương tác tốt.
• New Chart: Sử dụng engine đồ họa mới, đẹp hơn, hover chuột hiển thị số liệu chi tiết (Tooltip), hỗ trợ nhiều loại biểu đồ phức tạp hơn.

6.5.3 Mobile Mode & Preview

Bạn có thể xem trước giao diện Mobile ngay trên trình duyệt Editor bằng nút "Mobile Preview" (icon điện thoại) bên phải màn hình.

• Preview as User: Giả lập quyền của user khác để test Security Filter.
• Preview App State: Xem các biến Context (Device, Host) đang chạy thế nào.

Lưu ý: Các tính năng Preview có thể thay đổi hoặc dời vị trí cài đặt. Hãy tham khảo AppSheet Release Notes thường xuyên.

6.6 Thực hành: Tối ưu Trải nghiệm (UX Lab)

Bài tập: Biến danh sách "Cơ hội Bán hàng" (Opportunities) nhàm chán thành một Dashboard sinh động.

1. Format Rules:

   • Tạo Rule "High Value": Nếu [Amount] > 50.000.000, tô màu Xanh lá, Đậm, thêm icon Tiền ($).
   • Tạo Rule "Sắp chốt": Nếu [Stage] = "Negotiation", tô màu Cam, icon Bắt tay (Handshake).

2. Cài đặt Desktop Mode:

   • Vào Settings > Desktop mode (Preview).
   • Mở App trên trình duyệt máy tính để thấy sự khác biệt (Menu bên trái, Table rộng rãi).

3. Information:

   • Vào Info > Properties. Điền mô tả: "Hệ thống CRM quản lý Deal cho Sale Team".
   • Thêm Logo công ty vào phần Theme.

6.7 Tạm kết: UX không chỉ là cái đẹp

Bạn đã đi từ những View cơ bản đến việc tinh chỉnh từng pixel màu sắc và icon.
Sự tỉ mỉ trong Format Rules và Settings chính là yếu tố phân biệt giữa người biết làm App và Chuyên gia UX.

Nhưng UX không chỉ dừng lại ở từng màn hình đơn lẻ. Sếp của bạn cần một cái nhìn toàn cảnh - một nơi mà họ có thể nắm bắt sức khỏe của doanh nghiệp chỉ trong 3 giây: doanh số tuần này, đơn sắp quá hạn. Đó chính là Dashboard tương tác. Hãy cùng tôi sang chương 7 để dựng Dashboard đẳng cấp, nơi dữ liệu không chỉ hiện – mà còn kể chuyện theo thời gian thực.