Cách mọi sản phẩm ChabuLab được làm ra

Đủ đầy, không rườm rà

Tính năng ít người dùng không phải là thừa. Sự lặp lại mới là thừa.

• Giữ một tính năng nếu nó có thể giúp dù chỉ một người và khó tìm ở nơi khác.
• Chỉ bỏ những gì lặp lại vô lý: hai nút làm cùng một việc, một gợi ý hiện hai lần, danh sách trùng nhau, mã không còn dùng.
• Khi một tính năng gây phiền, làm nó gọn lại thay vì gỡ bỏ.

Làm cho cả phần cứng và phần mềm cũ

• Nhận biết thiết bị làm được gì và lùi về cách khác một cách êm ái. Luôn có một con đường chạy được ở mọi nơi.
• Những gì không chạy được trên một thiết bị sẽ hiện ở trạng thái tắt kèm lý do, không bao giờ bị giấu đi.
• Bộ nhớ dùng theo khả năng của thiết bị, và việc nặng sẽ cảnh báo kèm lời khuyên cụ thể trước khi bắt đầu, chứ không phải sau khi treo.

Không bao giờ làm mất công sức người dùng

• Tự lưu ở mọi chỗ mà làm lại mất hơn một chút thời gian.
• Lưu và khôi phục đều an toàn khi lỗi: mở lỗi không bao giờ ghi đè dữ liệu đã lưu.
• Dự án và cài đặt cũ vẫn mở được sau mỗi bản cập nhật. Chúng được chuyển đổi, không bao giờ bị bỏ đi.
• Huỷ một tác vụ không để lại tệp nào dở dang.

Quảng cáo có chừng mực

Một số công cụ và trò chơi miễn phí kiếm tiền từ quảng cáo. Mục tiêu là một sản phẩm cao cấp có quảng cáo, không bao giờ là một trang quảng cáo kèm công cụ.

• Vị trí quảng cáo được tính cùng bố cục, ở những điểm dừng tự nhiên: sau khi có kết quả, giữa các phần, ở màn hình qua màn.
• Tối đa hai quảng cáo trên màn hình điện thoại. Không bao giờ nằm trên công cụ, sát nút bấm, hay trong vùng làm việc hoặc bàn chơi.
• Không cửa sổ bật lên, không đếm ngược trước nội dung, không tự phát âm thanh. Chỗ được giữ sẵn nên không có gì nhảy khi quảng cáo tải.
• Mọi thứ vẫn chạy đầy đủ khi chặn quảng cáo. Quảng cáo có thưởng trong trò chơi luôn là tuỳ chọn, và phần thưởng luôn được trao.

Làm để bền lâu

• Thư viện luôn ở phiên bản ổn định mới nhất, và chỉ dùng thư viện an toàn, được bảo trì tích cực, chạy nhanh.
• Một việc, một cách làm: mã được dùng chung giữa các sản phẩm thay vì sao chép, nên một bản sửa đến mọi sản phẩm cùng lúc.
• Mỗi lần build đều kiểm tra giấy phép của từng thư viện đi kèm theo danh sách cho phép, và công bố thông báo của bên thứ ba.
• Mỗi lỗi đã sửa và mỗi thay đổi rủi ro đều có bài kiểm thử, và việc rà soát tập trung vào điều người dùng cảm nhận: mất công, kết quả hỏng, màn hình đơ.

Bắt đầu từ tham chiếu thật

• Trước mỗi sản phẩm mới, nghiên cứu ba đến sáu sản phẩm thật giải quyết cùng việc, ghi lại điều nên học và điều nên tránh.
• Học cách làm, không lấy bản sắc: không sao chép logo, minh hoạ, màu thương hiệu hay bố cục đặc trưng.
• Hướng hình ảnh đến từ chủ đề của sản phẩm và người dùng nó, không đến từ lựa chọn mặc định.

Hệ thống thiết kế trước mọi màn hình

Một nguồn chuẩn duy nhất, kèm trang tham chiếu hiện mọi thành phần ở mọi trạng thái, cả sáng lẫn tối.

• Màu được đặt tên theo vai trò (nền, chữ, chính, nguy hiểm, viền focus), dùng màu trung tính có sắc độ thay vì xám hay đen thuần.
• Khoảng cách lấy từ một thang 4 pixel. Độ bo góc theo thứ bậc, và các góc lồng nhau luôn song song.
• Nút, ô nhập và ô chọn dùng chung chiều cao, nên một hàng luôn thẳng hàng.
• Màn hình chỉ dùng token và thành phần có sẵn. Thay đổi giao diện đi vào hệ thống, không bao giờ vá lên một chỗ.

Chữ dễ đọc, cả tiếng Việt

• Mỗi phông được thử với một dòng đầy dấu tiếng Việt chồng nhau, ở mọi độ đậm, trước khi chọn. Phông được tự lưu trữ kèm bộ ký tự tiếng Việt.
• Chữ nội dung tối thiểu 16 px trên điện thoại với giãn dòng từ 1,5, để dấu không bao giờ chạm nhau hay bị cắt.
• Mỗi dòng dài 45 đến 75 ký tự; số thay đổi hoặc cần thẳng cột dùng chữ số đều độ rộng.

Màu sắc và độ tương phản

• Chữ đạt độ tương phản 4,5:1; viền điều khiển, vòng focus và biểu tượng mang nghĩa đạt 3:1.
• Màu không bao giờ tự mang nghĩa một mình: luôn có thêm biểu tượng, chữ hoặc hình dạng.

Chuyển động có mục đích

• Chuyển động đáp lại thao tác của bạn: mở, xác nhận, di chuyển. Mỗi trang có một khoảnh khắc được dàn dựng thay vì hiệu ứng khắp nơi.
• Chi tiết nhỏ chuyển động trong 150 đến 250 ms, bảng lớn tới 400 ms, giảm tốc về cuối. Chỉ tạo chuyển động bằng transform và opacity.
• Cài đặt giảm chuyển động luôn được tôn trọng, và minh hoạ lặp lại sẽ dừng khi ra khỏi màn hình.

Không có vẻ rập khuôn

• Những mặc định bị đánh dấu và thay thế: thẻ giống hệt nhau khắp nơi, một độ bo cho mọi thứ, gradient và hiệu ứng kính trang trí, phông chọn theo thói quen, mọi phần hiện ra cùng một kiểu, số liệu giả.

Chữ trên màn hình

• Nhãn mang tính chung, kèm chữ gợi ý: “1 giờ, chuyển bài nhẹ nhàng” với “hợp làm nhạc nền quán café hay học bài”, không phải một cái tên khó hiểu.
• Nút gọi tên hành động, và kết quả dùng cùng động từ: Xuất, rồi Đã xuất.
• Điều khiển bị tắt nói rõ lý do trong một dòng, và cách bật lại. Lỗi hiện ngay chỗ xảy ra, kèm cách sửa.
• Mỗi điều chỉ nói một lần, ở một chỗ.

Không giấu điều quan trọng

• Tính năng chính không bao giờ đòi rê chuột, nhấn giữ, vuốt hay mở menu ẩn. Những chỗ đó chỉ chứa thao tác phụ.
• Mọi cử chỉ đều có nút bấm hiện rõ hoặc phím tắt thay thế.
• Trợ giúp có nhiều lớp: chữ gợi ý, nút thông tin, trạng thái trống kèm mẫu để thử, gợi ý lần đầu, và trang hướng dẫn cho công cụ phức tạp.

Thứ bấm được trông như bấm được

• Nút có đường viền hoặc nền rõ ràng. Nút không viền chỉ xuất hiện ở nơi ngữ cảnh đã nói rõ “đây là nút”, như thanh công cụ hay menu.
• Mỗi khu vực một hành động chính. Hành động xoá bỏ phải xác nhận hoặc hoàn tác được.
• Mọi điều khiển có đủ trạng thái thường, rê chuột, nhấn, focus, tắt và đang tải, và vùng chạm tối thiểu 44 px.

Bố cục theo công việc

• Mọi màn hình chạy tốt trên điện thoại, máy tính bảng và máy tính mà không cần ai nhắc, không phải cuộn ngang.
• Hành động chính luôn trong tầm tay, và thứ bạn cần khi cuộn, như trình phát hay thanh công cụ, nổi lên mà không che nội dung.
• Một hàng điều khiển sắp bị rớt dòng trên điện thoại sẽ chuyển thành một cột có thứ tự.

Cùng trải nghiệm trên mọi thiết bị

Mỗi thành phần thích ứng với cách nhập liệu, còn tính năng, nhãn, thứ tự và kết quả giữ nguyên.

• Ô chọn mở bảng nổi khi dùng chuột và bảng trượt từ dưới lên trên điện thoại.
• Chú thích khi rê chuột trên máy tính trở thành nút thông tin chạm được trên màn hình cảm ứng.
• Mọi điều khiển phải qua một phép thử: dùng bằng một ngón cái có dễ như dùng chuột không?

Dễ tiếp cận và trọn vẹn

• HTML đúng ngữ nghĩa, vòng focus hiện rõ, dùng trọn bằng bàn phím, nút biểu tượng có nhãn, thông báo thay đổi trạng thái, và trang phóng to 200% vẫn ổn.
• Các trạng thái trống, đang tải, lỗi, ngoại tuyến, nội dung rất dài và rất ngắn đều được thiết kế, và rời đi khi chưa lưu sẽ được hỏi trước.

Dùng thử như người mới trước khi phát hành

• Mọi tác vụ chính được làm trọn ở khổ điện thoại và máy tính, bằng ngón cái và bàn phím, trả lời một danh sách câu hỏi cố định như người dùng lần đầu.
• Ảnh chụp ở 390, 820 và 1440 pixel, sáng và tối, tiếng Việt và tiếng Anh, được xem kỹ bằng mắt, phóng to vào khoảng cách và dấu.
• Kiểm tra tự động bao quát độ tương phản, tràn khung và hàng bị rớt dòng, và mỗi phép kiểm tra đều được chứng minh là có thể báo lỗi.

Các cấp bảo mật

Mỗi sản phẩm được xếp cấp khi bắt đầu, và xếp lại khi có tính năng thêm đăng nhập, thanh toán hay quyền điều khiển. Cấp cao nhất áp dụng được sẽ thắng, thứ gì dùng chung tên miền với cấp cao hơn thì chịu cấp đó, và cấu hình triển khai luôn được tính là hạ tầng.

Người dùng: danh tính, dữ liệu, phiên

• Mọi điểm truy cập đọc hay ghi dữ liệu của ai đó đều kiểm tra trên máy chủ rằng người này được phép đụng tới đúng bản ghi đó.
• Vai trò, chủ sở hữu, giá và gói dịch vụ không bao giờ lấy từ yêu cầu gửi lên.
• Phiên dùng cookie bảo mật, chỉ HTTP, được đổi mới khi đăng nhập và kết thúc khi đăng xuất. Số lần đăng nhập bị giới hạn và đường dẫn chỉ dùng một lần.
• Dữ liệu cá nhân không nằm trong nhật ký, đường dẫn hay số liệu phân tích. Phân tích truy cập không dùng cookie.

Tiền: thanh toán, bản quyền, chi phí

• Máy chủ quyết định giá. Số tiền, loại tiền và giảm giá lấy từ dữ liệu máy chủ, không bao giờ từ trình duyệt.
• Thông báo thanh toán được xác minh trước khi trao bất cứ thứ gì, và mỗi đơn hàng chỉ được giao đúng một lần, kể cả khi gửi lại.
• Số máy của bản quyền và số dư thay đổi nguyên khối trong cơ sở dữ liệu nhất quán mạnh. Hoàn tiền thu hồi những gì đã trao.
• Bản tải trả phí dùng đường dẫn có chữ ký, hết hạn nhanh, và dịch vụ trả phí mà khách có thể kích hoạt đều có giới hạn cứng.

Hạ tầng: tài khoản, token, quyền điều khiển

• Không bí mật nào nằm trong kho mã, lịch sử của nó, gói mã phía người dùng, nhật ký hay trang lỗi.
• Token API chỉ giới hạn trong đúng tài khoản, vùng và quyền cần dùng, có hạn dùng khi có thể.
• Bảng điều khiển của chủ sở hữu đăng nhập bằng passkey và kiểm tra mọi yêu cầu trên máy chủ.
• Thứ gì có thể triển khai hay điều khiển máy chỉ nhận các hành động trong danh sách cho phép, ghi nhật ký kiểm tra và có công tắc dừng khẩn cấp.

Rà soát và khắc phục

• Mọi dự án được quét tìm bí mật bị lộ trong toàn bộ lịch sử và tìm thư viện có lỗ hổng. Dự án có tài khoản hay tiền còn được phân tích mã tĩnh.
• Một phát hiện chỉ được tính khi có bằng chứng, và được xác nhận bởi người rà soát khác với người tìm ra.
• Phát hiện nghiêm trọng hoặc cao về người dùng, tiền hay hạ tầng sẽ dừng việc phát hành. Bí mật bị lộ được thay trước tiên, và mỗi bản sửa có bài kiểm thử chống tái phát.