Dịch vụ thiết kế UI/UX cho phần mềm, website và app

Trong báo giá, hai chữ UI và UX hay bị gộp thành "thiết kế giao diện". Tách ra thì dễ thấy vì sao có dự án đẹp mà không ai muốn dùng.

Vì sửa luồng muộn tốn hơn sửa màu, ALODEV làm UX trước và chốt bằng khung trang chưa tô màu. Chỉ khi người dùng thật đã đi thử luồng trên khung trang, phần UI mới bắt đầu.

Website được mở vài phút bởi người lạ; phần mềm quản lý được mở tám tiếng mỗi ngày bởi cùng một nhân viên. Hai loại cần hai cách nghĩ khác nhau.

• Mật độ thông tin: nhân viên cần thấy nhiều dòng dữ liệu cùng lúc, không phải một thẻ lớn mỗi màn hình.
• Thao tác lặp lại: việc làm 50 lần mỗi ngày phải xong trong một hai lần bấm, có phím tắt, không có hộp thoại xác nhận thừa.
• Trạng thái rõ bằng biểu tượng và màu: chờ duyệt, đã duyệt, quá hạn nhìn là biết, không phải đọc chữ.
• Phân quyền hiện ra trên giao diện: người không có quyền không thấy nút, thay vì bấm rồi mới báo lỗi.
• Bảng dữ liệu lọc, sắp xếp, xuất Excel được, vì đó là nơi người dùng sống.

Một luật ALODEV học từ chính phần mềm nội bộ của mình: đặt biểu tượng ở cấp nhóm, không ở từng mục. Một danh mục 74 hạng mục mỗi mục một biểu tượng biến thành giấy dán tường; chuyển biểu tượng lên cấp nhóm và đưa mô tả dài vào phần xem thêm, chữ trên màn hình giảm từ 1.030 xuống 543 từ mà ô tìm kiếm vẫn tìm theo mô tả.

Bản vẽ đẹp trên màn hình của người thiết kế không có nghĩa là đẹp trên màn hình của người dùng. Hai lỗi ALODEV đã gặp và từ đó đổi cách làm:

Chữ nhỏ vì kiểm sai kích thước màn hình

Người duyệt giao diện của ALODEV dùng màn hình rộng 2560 điểm ảnh, trong khi bản chụp kiểm tra lại ở 1512. Cỡ chữ đúng trên bản chụp nhưng nhỏ trên màn hình thật. Từ đó mọi trang được chụp kiểm ở hai đầu: 390 (điện thoại) và 2560 (màn hình lớn), và cỡ chữ, khoảng cách co giãn theo độ rộng màn hình thay vì cố định.

Giao diện cũ đè lên giao diện mới

Ngày 17/09/2026, khi đổi bộ chữ cho website, đo lại thì 267 trên 267 thẻ chữ của một trang vẫn dùng bộ chữ cũ, ô nhập bị ép cao 70 điểm ảnh và in hoa, chữ gợi ý 12 điểm ảnh trong khi chữ nhập 20. Nhìn bằng mắt không thấy hết. Từ đó giao diện được nghiệm thu bằng cách đo kiểu chữ, cỡ chữ thực tế trên trình duyệt, không bằng ảnh chụp.

Bộ kiểm hiện tại của website alodev.vn chạy trên toàn bộ trang trong sơ đồ trang ở cả hai độ rộng; lần chạy 26/09/2026 trên 353 trang ra 0 trang tràn ngang, 0 ảnh hỏng, mỗi trang đúng một tiêu đề H1. Dự án UI/UX của khách được nghiệm thu bằng cùng cách: danh sách màn hình, danh sách độ rộng, kết quả đo.

Khả năng tiếp cận không chỉ dành cho người khuyết tật. Nhân viên lớn tuổi, người dùng dưới nắng, người cầm điện thoại một tay đều hưởng lợi. ALODEV dùng các mốc đo được của chuẩn WCAG 2.2 do W3C công bố:

• Độ tương phản chữ với nền tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (tiêu chí 1.4.3).
• Vùng bấm đủ lớn cho ngón tay, không đặt hai nút nguy hiểm sát nhau.
• Không dùng màu làm tín hiệu duy nhất: trạng thái có cả biểu tượng, để người mù màu vẫn phân biệt được.
• Dùng được bằng bàn phím, có viền rõ khi chọn ô nhập.
• Bộ chữ vẽ đầy đủ dấu tiếng Việt, dấu của chữ in hoa không đâm vào dòng trên.

Website alodev.vn dùng bộ chữ Be Vietnam Pro, giấy phép SIL Open Font License, được vẽ riêng cho tiếng Việt. Khi chọn bộ chữ cho khách, ALODEV kiểm cả giấy phép: một bộ chữ thương mại không có giấy phép là rủi ro pháp lý nằm im trong sản phẩm.

Muốn tự kiểm độ tương phản của một cặp màu, dùng công cụ Màu sắc và tương phản trên trang công cụ của ALODEV.

Phần mềm lớn dần theo năm; nếu mỗi màn hình tự chọn màu và cỡ chữ, sau một năm sẽ có năm kiểu nút khác nhau. Hệ thống thiết kế là bộ quy ước và thành phần dùng chung giữ cho điều đó không xảy ra.

Khi hệ thống thiết kế nằm trong mã nguồn chứ không chỉ trong tệp vẽ, đổi màu nhấn hay chế độ nền tối chỉ là sửa một chỗ. Đó là lý do ALODEV bàn giao cả tệp thiết kế lẫn bộ thành phần đã lập trình.

Nhiều dự án UI/UX không bắt đầu từ trang trắng mà từ một phần mềm đang dùng bị chê khó dùng. Cách làm an toàn:

1. Đo hiện trạng: màn nào được mở nhiều nhất, thao tác nào hay bị làm sai, người dùng phàn nàn điều gì.
2. Sửa màn dùng nhiều nhất trước, giữ nguyên dữ liệu và chức năng.
3. Đưa bản mới cho một nhóm nhỏ dùng thử song song với bản cũ.
4. Giữ phong cách đã chốt: nâng cấp là sửa chỗ khó dùng và đưa màn cũ về cùng một phong cách, không đổi toàn bộ nhận diện khi chưa có quyết định.

Mọi thay đổi giao diện chỉ lên bản thật sau khi người có quyền phía doanh nghiệp đã duyệt trên bản thử, và bản cũ luôn lùi lại được bằng một lệnh.