Thiết kế giao diện cho điện thoại là sắp xếp nội dung và thao tác sao cho người dùng làm được việc bằng một bàn tay, trên màn hình hẹp, trong hoàn cảnh hay bị gián đoạn: chữ phải đọc được ở khoảng cách tay cầm, nút chính phải nằm trong tầm ngón cái, và mọi thứ quan trọng phải ưu tiên lên trước vì không còn cột bên để chứa.
Với nhiều cửa hàng, quán ăn, phòng khám nhỏ ở Việt Nam, phần lớn khách vào trang web từ điện thoại, qua đường dẫn trên mạng xã hội hoặc tin nhắn. Vậy mà bản thiết kế vẫn thường được vẽ cho màn hình máy tính trước, rồi bản điện thoại "co lại cho vừa". Bài này đi qua cách chọn khung thiết kế, vùng an toàn quanh tai thỏ và thanh điều hướng của máy, vùng ngón cái, các kiểu điều hướng, những bẫy ở ô nhập và bàn phím, cách dùng AI để chuyển một trang máy tính sang điện thoại, và vì sao phải kiểm trên máy thật.
Mobile first nghĩa là gì trong việc thiết kế hằng ngày
Mobile first, thiết kế cho điện thoại trước, không chỉ là thứ tự làm việc mà là cách buộc mình chọn ưu tiên. Trên màn hình máy tính, bạn có thể đặt bốn khối cạnh nhau và tránh được câu hỏi khối nào quan trọng hơn. Trên điện thoại, mọi thứ xếp thành một cột, và khối nào lên trước là một quyết định không né được.
Cách làm thực tế là dựng bố cục điện thoại trước từ danh sách nội dung đã xếp ưu tiên, rồi mới mở rộng ra máy tính bảng và máy tính bằng cách đặt các khối cạnh nhau khi có thêm chỗ. Làm ngược lại, từ máy tính co xuống, thường dẫn tới những lỗi quen thuộc: khối phụ ở cột bên bị đẩy xuống tận cuối trang, menu nhiều tầng bị nhồi vào một nút ba gạch, ảnh ngang to chiếm hết màn hình đầu tiên.
Mobile first cũng không có nghĩa bỏ quên máy tính. Với những sản phẩm người dùng chủ yếu làm việc trên máy tính, như phần mềm quản lý kho hay bảng điều khiển nội bộ, ưu tiên ngược lại là hợp lý. Câu hỏi đúng là người dùng của sản phẩm này thật sự dùng gì, và nếu khách có số liệu truy cập thì xem tỷ lệ thiết bị trước khi quyết định.
Khung thiết kế, vùng an toàn và màn hình thật
Chọn một khung gốc phổ biến. Phần mềm thiết kế có sẵn khung theo các đời máy. Thường người ta chọn một khung rộng khoảng 360 đến 390 điểm để dựng bản chính, vì đó là nhóm bề rộng nhiều người dùng. Các con số này thay đổi theo đời máy, nên xem số liệu thiết bị của chính khách nếu có.
Kiểm cả màn hình hẹp nhất. Sau khi dựng ở khung chính, thử thu về khoảng 320 điểm, kích thước của những máy nhỏ đời cũ vẫn còn được dùng. Tên sản phẩm dài, nút có chữ dài, bảng giá hai cột là những thứ hay vỡ đầu tiên.
Tôn trọng vùng an toàn. Phần trên cùng có tai thỏ, lỗ camera, thanh trạng thái; phần dưới cùng có thanh vuốt về màn hình chính. Đặt nút quan trọng sát mép dưới dễ bị chạm nhầm vào cử chỉ của hệ điều hành. Phần mềm thiết kế thường có lớp đánh dấu vùng an toàn cho từng khung máy.
Thiết kế cho chiều cao thay đổi. Trên trình duyệt điện thoại, thanh địa chỉ co giãn khi cuộn, và bàn phím chiếm gần nửa màn hình khi nhập liệu. Khối nào cố định ở đáy màn hình phải được kiểm khi bàn phím bật lên.
Ghi rõ cách co giãn. Ghi chú khối nào giãn theo bề ngang, khối nào giữ cố định, chữ xuống dòng hay cắt bớt kèm dấu ba chấm. Lập trình viên không có những thông tin này sẽ phải tự đoán khi màn hình rộng hơn hoặc hẹp hơn khung bạn vẽ.
Vùng ngón cái và vị trí của nút chính
Phần lớn người dùng cầm điện thoại bằng một tay và bấm bằng ngón cái, hoặc đổi qua lại giữa một tay và hai tay tuỳ lúc. Những quan sát được dẫn nhiều, như nghiên cứu của Steven Hoober về cách người dùng cầm điện thoại ngoài đời thực, cho thấy cách cầm thay đổi liên tục và ngón cái là công cụ chính. Hệ quả cho thiết kế: vùng giữa và nửa dưới màn hình dễ với tới, góc trên đối diện bàn tay là xa nhất.
Vì vậy nút hành động chính như thêm vào giỏ, đặt lịch, gửi nên ở nửa dưới, thường là một thanh cố định ở đáy màn hình trên các trang cần thao tác. Những hành động ít dùng hoặc có thể gây hậu quả như xoá, đăng xuất có thể đặt xa hơn, đôi khi đó là một lợi thế vì giảm bấm nhầm.
Đừng biến điều này thành quy tắc cứng. Màn hình ngày càng cao, thói quen cầm cũng khác nhau giữa người trẻ và người lớn tuổi, giữa người thuận tay trái và tay phải. Đặt nút trong vùng dễ với là điểm khởi đầu tốt; xác nhận lại bằng cách tự cầm điện thoại thật bằng một tay và thử, rồi nhờ vài người khác thử.
Khoảng cách giữa các vùng chạm quan trọng không kém kích thước của chúng. Hai nút "huỷ" và "xác nhận" đặt sát nhau ở cỡ vừa đủ vẫn dễ bị bấm nhầm, nhất là khi người dùng đang đi trên xe hay đứng trong hàng chờ.
Chọn kiểu điều hướng cho điện thoại
Không có kiểu điều hướng đúng cho mọi sản phẩm. Bảng dưới so sánh các kiểu phổ biến để bạn chọn theo số mục và tần suất dùng.
| Kiểu điều hướng | Hợp với | Điểm mạnh | Điểm yếu |
|---|---|---|---|
| Thanh điều hướng dưới | Ứng dụng hoặc trang có ba đến năm mục chính người dùng chuyển qua lại thường xuyên | Luôn nhìn thấy, trong tầm ngón cái, biết mình đang ở đâu | Chiếm chỗ cố định, không chứa được nhiều mục |
| Nút menu ba gạch mở ngăn kéo | Trang web nhiều mục nhưng mỗi mục ít dùng | Chứa được nhiều mục, gọn màn hình | Mục bị giấu, người dùng ít khám phá; nút thường ở góc trên khó với |
| Thanh tab trên | Chuyển giữa vài nhóm nội dung cùng cấp trong một màn hình | Rõ ràng, quen thuộc | Ở xa ngón cái, chữ dài khó vừa |
| Kết hợp | Sản phẩm có vài mục chính và nhiều mục phụ | Mục chính ở thanh dưới, mục phụ trong menu | Phải phân loại mục cẩn thận để người dùng không tìm sai chỗ |
Dù chọn kiểu nào, mỗi mục điều hướng nên có nhãn chữ đi kèm icon, và mục đang chọn phải khác biệt rõ ràng không chỉ bằng màu. Với trang web bán hàng nhỏ, một thanh dưới với các mục như trang chủ, danh mục, giỏ hàng, tài khoản thường dễ dùng hơn menu ba gạch chứa mọi thứ.
Ô nhập và bàn phím: những bẫy nhỏ gây bỏ cuộc lớn
Nhập liệu trên điện thoại là việc mệt nhất với người dùng. Vài điểm cần ghi rõ trong bản thiết kế để lập trình viên dựng đúng:
- Bàn phím đúng loại: ô số điện thoại mở bàn phím số, ô email mở bàn phím có ký tự @, ô số tiền mở bàn phím số. Ghi loại bàn phím cạnh từng ô trong bản bàn giao.
- Cỡ chữ trong ô nhập: trên một số trình duyệt di động, chữ trong ô nhỏ hơn khoảng 16 điểm sẽ khiến trang tự phóng to khi người dùng chạm vào, làm lệch bố cục. Đặt cỡ chữ ô nhập đủ lớn ngay từ thiết kế.
- Nhãn luôn hiện: nhãn đặt trên ô, không chỉ dùng chữ gợi ý mờ bên trong vì nó biến mất khi bắt đầu gõ.
- Ít ô nhất có thể: mỗi ô thêm vào là một lý do để bỏ cuộc. Hỏi khách ô nào thật sự cần ở bước này, ô nào hỏi sau.
- Báo lỗi tại chỗ: báo ngay dưới ô sai, giữ nguyên dữ liệu đã nhập, cuộn tới ô lỗi đầu tiên nếu nó nằm ngoài màn hình.
- Nút gửi không bị bàn phím che: kiểm bố cục khi bàn phím mở; nút gửi cố định ở đáy có thể bị đẩy lên hoặc bị che tuỳ cách dựng.
Những điểm này không làm màn hình đẹp hơn trong ảnh trình khách, nhưng quyết định khách có đặt hàng xong hay không. Đó là chỗ người làm đồ hoạ chuyển sang giao diện cần thay đổi thói quen nhìn.
Dùng AI chuyển một trang máy tính sang bản điện thoại
Khi khách đã có trang cho máy tính và muốn làm lại bản điện thoại cho tử tế, AI giúp bạn đi nhanh qua phần phân tích. Quy trình gợi ý:
- Chụp các trang chính trên máy tính, thay dữ liệu khách thật bằng dữ liệu mẫu, bỏ những thông tin kinh doanh chưa công khai.
- Hỏi AI: "Đây là trang chi tiết dịch vụ cho máy tính. Liệt kê các khối nội dung từ trên xuống, từ trái sang phải. Với mỗi khối, đề xuất giữ, rút gọn, gộp hay chuyển xuống dưới khi làm bản điện thoại, kèm lý do ngắn."
- Đối chiếu đề xuất với mục tiêu chính của trang và với những gì khách nói về khách hàng của họ. Gạch những đề xuất không hợp.
- Hỏi tiếp: "Với thứ tự này, người dùng điện thoại cuộn hết màn hình đầu tiên sẽ thấy những gì? Nút hành động chính xuất hiện lần đầu ở đâu?"
- Tự dựng bản điện thoại trong phần mềm thiết kế từ thư viện thành phần, không dùng ảnh AI vẽ bản điện thoại làm bản dựng.
- Mở bản mẫu trên điện thoại thật, kiểm vùng ngón cái, cỡ chữ, ô nhập, rồi điều chỉnh.
AI làm tốt việc liệt kê và đặt câu hỏi; bạn làm việc chọn và dựng. Đừng để bản điện thoại chỉ là bản máy tính xếp chồng các khối lên nhau theo đúng thứ tự cũ.
Kiểm trên máy thật, kể cả máy rẻ
Màn hình phần mềm thiết kế không phải màn hình điện thoại. Trên máy tính, bạn nhìn bản thiết kế phóng to, độ sáng cao, khoảng cách gần, chuột chính xác tới từng điểm ảnh. Trên điện thoại thật, chữ nhỏ hơn bạn tưởng, màu xám nhạt gần như biến mất ngoài trời, và ngón tay to hơn con trỏ chuột rất nhiều.
Hầu hết phần mềm thiết kế có ứng dụng xem bản mẫu trên điện thoại. Dùng nó ở mọi mốc quan trọng, không chỉ lúc cuối. Nếu có thể, kiểm thêm trên một chiếc máy rẻ màn hình nhỏ, độ sáng thấp, vì đó là thiết bị của một phần không nhỏ người dùng. Một chiếc máy cũ để dành riêng cho việc kiểm là khoản đầu tư rẻ mà đáng giá.
Khi kiểm, đặt ra một việc cụ thể và làm từ đầu tới cuối: tìm sản phẩm, thêm vào giỏ, nhập địa chỉ, đặt hàng. Làm khi đang đứng, đang cầm một tay, đang ở chỗ sáng. Ghi lại mọi chỗ phải nheo mắt, phải dùng hai tay hay bấm nhầm. Danh sách đó giá trị hơn mọi nhận xét về thẩm mỹ.
Câu hỏi thường gặp
Thiết kế trang web cho điện thoại có cần bản riêng không hay chỉ cần responsive?
Phần lớn trang web hiện nay dùng một bản co giãn theo màn hình, gọi là responsive, thay vì làm bản riêng. Người thiết kế vẫn cần vẽ bố cục cho ít nhất hai mức, điện thoại và máy tính, và ghi rõ cách các khối sắp xếp lại giữa hai mức đó.
Có nên giấu menu vào nút ba gạch cho gọn không?
Chỉ nên giấu những mục ít dùng. Các mục chính mà người dùng cần thường xuyên nên luôn nhìn thấy, ví dụ trên thanh điều hướng dưới. Giấu mọi thứ vào nút ba gạch làm màn hình gọn nhưng người dùng khó khám phá và phải bấm thêm mỗi lần.
Ảnh trên bản điện thoại có cần cắt khác bản máy tính không?
Thường có. Ảnh ngang rộng trên máy tính khi thu nhỏ cho điện thoại có thể làm chủ thể bé xíu. Chuẩn bị bản cắt dọc hoặc vuông cho điện thoại, ghi rõ điểm cần giữ trong khung, và nhắc lập trình viên dùng ảnh nhẹ cho thiết bị di động.
Có nên làm cử chỉ vuốt cho các thao tác chính không?
Cử chỉ vuốt tiện cho người quen dùng nhưng khó khám phá và khó với người lớn tuổi hoặc người dùng công cụ trợ năng. Nếu dùng, luôn có nút bấm làm được cùng việc đó. Cũng tránh cử chỉ trùng với cử chỉ của hệ điều hành như vuốt từ mép màn hình.
Giao diện điện thoại cho người lớn tuổi cần lưu ý gì thêm?
Chữ thân lớn hơn mức thông thường một chút, nút to và cách xa nhau, ít mục trên mỗi màn hình, nhãn chữ cho mọi icon, đường quay lại luôn rõ. Tránh thông báo tự biến mất nhanh và tránh yêu cầu thao tác giữ lâu hay vuốt nhiều ngón.
AI có tạo được bản mẫu bấm thử trên điện thoại không?
Một số công cụ thiết kế có tính năng AI sinh bản mẫu bấm được từ mô tả hoặc từ các màn hình có sẵn. Kết quả hữu ích cho thảo luận sớm, nhưng cần kiểm lại luồng và kích thước. Tính năng thay đổi nhanh, nên kiểm phiên bản hiện hành của công cụ bạn dùng.