Hướng dẫn 4 bước ngữ nghĩa hóa biểu tượng

Icon không phải phụ kiện nhỏ trên màn hình, mà là từ vựng ngắn nhất trong giao diện; Biểu tượng là từ vựng, không phải trang trí nhắc đúng một điều: số ký hiệu phổ quát mà người dùng nhận ra ngay không cần đọc chữ chỉ có khoảng hơn chục cái

Trong môi trường xưởng in, điều này rất rõ. Kính lúp là tìm kiếm, bánh răng là cài đặt, thùng rác là xóa, dấu cộng là thêm mới, X là đóng, ngôi nhà là trang chủ, mũi tên quay lại là trang trước, tam giác phát là bắt đầu. Những cái này như chữ thông dụng, tự đứng một mình được

Rắc rối bắt đầu từ số còn lại. Trái tim, dấu sao, dấu trang sách đều trông giống "lưu yêu thích", nhưng trên các nền tảng khác nhau chúng có thể nghĩa là thích, đánh dấu, hay đọc sau. Chia sẻ cũng không có một ký hiệu duy nhất, Apple hay vẽ hộp với mũi tên hướng lên, Android hay vẽ ba chấm nối nhau. Nếu hệ thống in ấn nhét cả "gửi duyệt", "trả bản", "gửi lại tiền in" vào Icon không có chữ, màn hình tuy gọn nhưng khi có lỗi không ai khen thiết kế đẹp

Iconography (hệ thống biểu tượng) là phương pháp thiết kế dùng một bộ ký hiệu hình ảnh có thể nhận biết để biểu thị chức năng, trạng thái và thao tác; trong tiền in và cổng thông tin khách hàng, nhiệm vụ của nó là giảm đoán mò, không phải tăng gánh nặng thẩm mỹ

Muốn biết Icon có dùng một mình được không, phải hỏi xem người nhìn lần đầu có trả lời cùng một đáp án trong thời gian ngắn không, chứ không phải hỏi nhà thiết kế tự thấy nó có giống không

Tôi hay dùng một cách rất thô nhưng hiệu quả. Lấy Icon ra khỏi ngữ cảnh xung quanh, đưa cho đồng nghiệp hoặc khách hàng xem khoảng 5 giây, hỏi "bấm vào thì chuyện gì xảy ra". Nếu câu trả lời phân tán, thêm chữ vào; nếu câu trả lời tập trung, mới cân nhắc bỏ chữ. Cách này đáng tin hơn ngồi cãi nhau nửa tiếng trong phòng họp

Giao diện in ấn đặc biệt không thể bỏ qua bước này, vì nhiều nút bấm đằng sau là chi phí

・"Xóa file" phải dùng thùng rác và vẫn giữ chữ, tránh khách hàng tưởng chỉ là xóa khỏi danh sách

・"Phê duyệt bản thử" không nên dùng dấu tích đứng một mình, vì dấu tích ở các quy trình khác nhau có thể nghĩa là hoàn thành, thông qua, đã thanh toán hoặc đã đọc

・"Tải lại file" có thể dùng mũi tên kèm "Tải lại file", đừng chỉ để một mũi tên xoay vòng cho người đoán

・"Gửi kiểm tra tiền in" là thao tác trừu tượng không có ký hiệu phổ quát, dùng chữ thẳng là nhanh hơn

Nếu nhóm đang cải tổ cổng báo giá, trang khách hàng nộp bản hay bảng theo dõi đơn nội bộ, nhóm tư vấn Học viện Tri thức Mai Strategy sẽ đề xuất kiểm kê các nút có rủi ro cao trước, rồi mới quyết định Icon nào có thể đứng trần, Icon nào phải đi kèm label

Bảng từ vựng biểu tượng có thể bàn giao là cố định mỗi Icon thành một mục rõ "chức năng, chữ kèm, trạng thái, ngữ cảnh không dùng", chứ không phải ném một đống SVG cho kỹ thuật

Tôi đề xuất xưởng in vừa và nhỏ chỉ cần 4 bước, đừng làm hệ thống thiết kế lớn ngay từ đầu

・1. Liệt kê thao tác tần suất cao: tìm kiếm, thêm mới, xóa, tải xuống, tải lên, quay lại, phê duyệt, trả về, báo giá, thanh toán, theo dõi đơn — bắt đầu từ những chức năng bấm mỗi ngày

・2. Đánh dấu ký hiệu có thể đứng trần: kính lúp, bánh răng, thùng rác, dấu cộng, X, ngôi nhà, quay lại, phát là ứng viên phổ quát, nhưng vẫn cần xem ngữ cảnh sử dụng

・3. Gắn một ký hiệu một thao tác: cây bút nếu nghĩa là chỉnh sửa thì toàn site chỉ nghĩa đó; đừng sang trang khác lấy cây bút để biểu thị ghi chú

・4. Cố định một bộ quy cách hình ảnh: cùng một icon family, cùng một grid, cùng một stroke weight, trộn nhiều độ dày khác nhau trông như trong một catalogue có ba loại font

Điểm mấu chốt không phải làm cho đẹp, mà là để thiết kế, dịch vụ khách hàng, tiền in và kỹ thuật cùng nói một ngôn ngữ. Điều xưởng in sợ nhất không phải vẽ sai một Icon, mà là mỗi phòng ban đều tưởng mình hiểu Icon đó

Ngữ nghĩa biểu tượng ảnh hưởng đến nhận đơn và thời hạn giao hàng, vì khách hàng chọn sai một lần ở trang cổng, đằng sau có thể thành xác nhận của dịch vụ khách hàng, trả bản tiền in, lấy lại lịch và đàm phán lại thời hạn

Nhìn vào quy trình nộp bản thông thường: nếu khách hàng nhìn "Xóa file" thành "Hủy lần tải này", họ có thể nghĩ file vẫn còn trong nháp; nhân viên kinh doanh thấy Icon trạng thái nhưng không biết là "chờ thanh toán" hay "chờ duyệt bản" thì phải gọi thêm một cuộc để hỏi; tiền in dùng Icon gần giống nhau cho "đã phê duyệt" và "đã gửi in", lệnh sản xuất vào nhầm giai đoạn là rất phiền

Đối với xưởng in, nghiệm thu thiết kế Icon không chỉ nhìn màn hình có gọn không, mà phải nhìn quy trình có bớt đoán một lần không. Đây cũng là điều tôi chú ý khi xem sản phẩm SaaS và tự động hóa in ấn: giao diện càng nhỏ, từ vựng càng phải chuẩn. Một Icon trên điện thoại dễ bị hiểu sai hơn một dòng giải thích trên màn hình máy tính

Nếu muốn nối cổng thông tin khách hàng vào quy trình in thương mại tùy chỉnh cao, dịch vụ như MINDS càng cần chia "báo giá, chọn vật liệu, in thử, duyệt bản, gửi in" thành từ vựng rõ ràng, vì mỗi bước đều liên quan đến giấy, gia công, màu sắc và thời hạn

Xưởng in vừa và nhỏ không cần làm lại toàn bộ giao diện, sửa 3 vị trí hay xảy ra lỗi nhất là thấy ngay hiệu quả: nộp bản, duyệt bản, theo dõi đơn

Tôi sẽ chọn trước những chỗ ngày nào cũng có người hỏi, ngày nào cũng có người bấm nhầm. Đừng vội chạy theo một bộ icon đẹp, dọn dẹp trước mấy cái nút mà dịch vụ khách hàng phải giải thích đi giải thích lại

・Trang nộp bản: tải xuống, tải lại, xóa, xem trước phải dùng Icon phổ quát kèm chữ, tránh khách hàng phán đoán sai trong quản lý file

・Trang duyệt bản: phê duyệt, trả về, ghi chú, yêu cầu sửa phải dùng chữ rõ ràng, không để dấu tích và dấu X một mình gánh trách nhiệm quy trình

・Trang theo dõi đơn: chờ báo giá, chờ thanh toán, đang kiểm tra tiền in, đang sản xuất, sẵn sàng giao hàng phải lấy chữ trạng thái làm chính, Icon chỉ hỗ trợ nhận diện

・Thanh công cụ backend: chức năng nội bộ dùng hàng ngày có thể dần dần thu về icon-only, nhưng điều kiện là đào tạo nhân viên mới và SOP đều dùng cùng bộ từ vựng biểu tượng đó

Đơn giản thôi. Chỗ nào bấm nhầm dẫn đến sửa bản, trả về, xếp lại lịch hay khiếu nại thì chữ phải có mặt; chỗ nào chỉ ảnh hưởng tốc độ quét mắt thì Icon có thể từ từ gọn lại

・Icon là từ vựng trong giao diện, nghĩa không ổn định thì đừng để nó đứng một mình

・Ngoài hơn chục ký hiệu phổ quát, phần lớn Icon đều cần label đỡ nghĩa

・Nghiệm thu Icon trong hệ thống tiền in phải nhìn xem khách hàng có bớt đoán một lần không, không phải nhìn màn hình bớt được mấy chữ

・Một ký hiệu chỉ được gắn một thao tác, không thì dịch vụ khách hàng, tiền in, kỹ thuật sẽ mỗi người hiểu một kiểu

・Khi quy trình trừu tượng không có Icon phổ quát, dùng chữ thẳng thường là thiết kế chống lỗi rẻ nhất

Với nhóm sản xuất in ấn và SaaS, bước tiếp theo không phải vẽ thêm Icon, mà là lập một "bảng từ vựng biểu tượng": liệt kê các nút rủi ro cao trong các giai đoạn nộp bản, duyệt bản, theo dõi đơn, thanh toán, gửi in, lần lượt quyết định Icon nào có thể đứng một mình, Icon nào bắt buộc thêm label, Icon nào liên quan đến thao tác không thể hoàn tác. Bảng này sẽ trở thành quy chuẩn thiết kế, đồng thời là tài liệu kịch bản dịch vụ khách hàng, tên biến kỹ thuật và tài liệu đào tạo nhân viên mới

・Biểu tượng là từ vựng, không phải trang trí