Gợi ý Thiết kế UI cho Trang Marketing Hiệu quả
Khởi đầu với Mục tiêu Người dùng
Thiết kế UI hiệu quả bắt đầu từ một mục tiêu người dùng cụ thể, chứ không phải một tập hợp các màu sắc và thành phần hấp dẫn. Đối với một trang đích marketing, mục tiêu có thể là tải xuống một hướng dẫn, đặt lịch tư vấn, hoặc bắt đầu dùng thử miễn phí. Viết một hành động chính trước khi mở công cụ thiết kế, rồi làm cho mọi phần chính hỗ trợ hành động đó. Nếu một trang đang cố gắng bán một khóa học, thu thập đăng ký nhận bản tin và quảng bá năm dịch vụ không liên quan cùng lúc, người dùng có thể gặp khó khăn trong việc hiểu phải làm gì tiếp theo.
Tạo một kịch bản người dùng đơn giản trước khi thiết kế giao diện. Ví dụ, hãy tưởng tượng một khách viếng thăm từ kết quả tìm kiếm về lớp Python cho người mới bắt đầu trên điện thoại di động. Họ cần hiểu được kết quả khóa học, xem lịch trình hoặc giá cả, và tìm nút đăng ký mà không phải cuộn quá nhiều. Kịch bản này cho bạn ưu tiên thực tế cho cấu trúc trang và ngăn không cho các yếu tố trang trí làm sao nhãng khỏi mục tiêu chuyển đổi.
Xây dựng Thứ tự Trình bày Trực quan Rõ Ràng
Thứ tự trực quan cho người dùng biết phải chú ý đến đâu, trước, sau và sau nữa. Sử dụng kích thước, khoảng cách, tương phản, vị trí và trọng lượng để phân biệt tiêu đề, giải thích hỗ trợ, bằng chứng và lời kêu gọi hành động. Một trang marketing hữu ích có thể đặt tiêu đề máy tính để bàn ở 42 pixel phía trên một phần giải thích 18 pixel, tiếp theo là một nút được phân tách rõ ràng. Các giá trị cụ thể có thể thay đổi, nhưng mối quan hệ giữa các yếu tố nên vẫn rõ ràng.
Giới hạn số điểm nh focal cạnh tranh ở mỗi khung nhìn. Nếu tiêu đề, điều hướng, banner quảng cáo, nhận xét và ba nút đều dùng màu mạnh, không cái nào nổi bật như mục tiêu chính. Một màn hình đầu tiên thực tế có thể chứa một tiêu đề, một đoạn ngắn, một nút chính và một hình sản phẩm hỗ trợ. Ở các màn hình nhỏ hơn, hãy kiểm tra xem tiêu đề có xuống dòng thành bốn hoặc năm dòng không; rút ngắn nội dung thường tốt hơn việc giảm cỡ chữ cho đến khi khó đọc.
Chọn Màu với Mục đích
Một bảng màu nhỏ và có chủ đích giúp giao diện dễ quét và dễ bảo trì hơn. Bắt đầu với nền trung tính, màu chữ dễ đọc, một màu thương hiệu chính, và một màu cảnh báo hoặc thành công tùy chọn. Ví dụ, một trang tiếp thị có thể dùng trắng, xám than, xanh đậm cho hành động chính, và màu hổ phách chỉ cho thông báo giới hạn thời gian. Việc dành màu nhấn mạnh nhất cho các yếu tố tương tác giúp người dùng nhận diện nút và liên kết một cách nhất quán.
Kiểm tra độ tương phản thay vì đánh giá màu chỉ dựa vào giao diện trên màn hình của bạn. Văn bản xám sáng có thể trông tinh tế trong tệp thiết kế nhưng có thể trở nên khó đọc trên điện thoại ngoài trời sáng. Thử nghiệm văn bản thân để đọc, nhãn nút, lỗi biểu mẫu và trạng thái vô hiệu hoá riêng biệt vì từng tổ hợp có thể hành xử khác nhau. Tránh dùng màu làm tín hiệu duy nhất; ghép một đường viền form màu đỏ với thông báo lỗi và một biểu tượng hoặc diễn đạt rõ ràng để người dùng không thể phân biệt đỏ và xanh lá nhận được cùng một thông tin.
Thiết kế các Thành phần Nhất quán
Các thành phần có thể tái sử dụng tạo sự nhất quán trên các trang tiếp thị và rút ngắn thời gian cập nhật sau này. Định nghĩa các kiểu chung cho nút, tiêu đề, input, thẻ, điều hướng và khoảng cách trước khi xây dựng hàng chục màn hình. Một nút không nên có bán kính 12 pixel ở một trang và hình chữ nhật sắc cạnh ở trang khác trừ khi sự khác biệt phục vụ mục đích rõ ràng. Sự nhất quán giúp người truy cập tập trung vào ưu đãi thay vì giải thích một giao diện mới ở mỗi phần.
Sử dụng trạng thái thành phần chứ không chỉ vẻ ngoài lý tưởng. Một biểu mẫu đăng ký cần các trạng thái mặc định, được tập trung, đã hoàn thành, không hợp lệ, bị vô hiệu hóa và đang tải. Một nút chính có thể thay đổi từ “Bắt đầu học” sang một chỉ báo đang tải trong quá trình xử lý yêu cầu, nhưng vị trí của nó không được nhảy lên gây click nhầm. Việc đặt tên các token như space-1, space-2 và color-primary cũng giúp dễ dàng bàn giao khi một nhà phát triển triển khai thiết kế trong CSS hoặc một framework front-end.
Làm cho bố cục đáp ứng
Thiết kế giao diện người dùng đáp ứng điều chỉnh cấu trúc, khoảng cách và tương tác cho không gian có sẵn thay vì chỉ phóng to trang desktop. Một phần tính năng có ba cột có thể hoạt động ở rộng 1.200 pixel, trở thành hai cột gần kích thước máy tính bảng, và xếp thành dọc trên điện thoại rộng 390 pixel. Quyết định nội dung nào phải hiển thị vẫn còn, cái nào có thể di chuyển xuống dưới phần nhìn thấy được, và các mục điều hướng nào có thể được đưa vào bảng menu. Những quyết định này nên được đưa ra trước khi bố cục bị phá vỡ, chứ không phải sau khi thử nghiệm cho thấy các yếu tố chồng lên nhau.
Thử nghiệm nội dung thực tế ở tối thiểu ba kích thước viewport, như 1440, 768 và 390 pixel. Sử dụng tên khóa học dài, nhãn nút hai dòng, văn bản dịch và thông báo lỗi biểu mẫu vì nội dung mẫu ngắn có thể che khuất các vấn đề bố cục. Giữ kích thước mục nhắm chạm thoải mái và cách nhau đúng cách; một biểu tượng đóng nhỏ đặt cạnh một mục menu có thể gây nhấp nhầm. Hành vi đáp ứng nên bảo toàn nhiệm vụ của người dùng ngay cả khi bố cục thị giác thay đổi đáng kể.
Cải thiện Biểu mẫu và Lời kêu gọi hành động
Các biểu mẫu thường là bước cuối cùng giữa sự quan tâm tiếp thị và dẫn đến khách hàng tiềm năng hoặc mua hàng, vì vậy mỗi trường nên chứng minh sự hiện diện của nó. Nếu một webinar chỉ cần địa chỉ email và tên đầu, việc yêu cầu số điện thoại, quy mô công ty, chức danh và địa chỉ đầy đủ có thể làm giảm tỷ lệ hoàn tất. Đặt nhãn ở trên trường, đưa ra ví dụ khi định dạng quan trọng và cho biết trường có bắt buộc hay không. Nút có nhãn “Submit” không cung cấp ngữ cảnh nhiều; “Reserve my seat” hoặc “Get the syllabus” mô tả kết quả rõ ràng hơn.
Cung cấp cho người dùng phản hồi ngay lập tức và cụ thể khi có sự cố. Thay vì nói “Input không hợp lệ,” hãy giải thích rằng email cần có định dạng như name@example.com và giữ nguyên giá trị đã nhập. Đối với một mẫu thanh toán hoặc đăng ký, hiển thị tiến trình như “Bước 2 trong 3” để người dùng hiểu còn bao nhiêu công việc. Sau khi gửi, xác nhận điều gì đã xảy ra, giải thích bước tiếp theo và tránh hiển thị thông báo thành công mơ hồ khiến người dùng tự hỏi liệu yêu cầu có được nhận hay không.
Kiểm thử khả năng sử dụng và tỷ lệ chuyển đổi
Giao diện tinh tế vẫn có thể thất bại nếu người dùng không thể hoàn thành nhiệm vụ dự định. Tiến hành một bài kiểm tra khả năng sử dụng nhỏ với một câu gợi ý cụ thể, chẳng hạn như “Tìm lớp JavaScript buổi tối và đăng ký thử một buổi học.” Quan sát xem người tham gia do dự ở đâu, giải thích nhãn sai hoặc sử dụng điều khiển bất ngờ. Các buổi 5 phút với vài người dùng đại diện có thể tiết lộ những vấn đề như liên kết giá không hiển thị hoặc một lời gọi hành động nghe như điều hướng chứ không phải đăng ký.
Sử dụng phân tích và thử nghiệm có kiểm soát để xác thực các quyết định lớn hơn sau khi sửa các vấn đề khả năng sử dụng rõ ràng. Theo dõi các sự kiện như lượt xem trang đích, nhấp CTA, khởi động form, lỗi form và gửi thành công thay vì chỉ xem lưu lượng truy cập tổng. Thử một thay đổi có ý nghĩa duy nhất tại một thời điểm, như form ngắn hơn so với form dài hơn, và xác định thước đo thành công trước khi triển khai. Tỉ lệ nhấp chuột cao hơn không tự động có nghĩa là tốt hơn nếu thiết kế mới tạo ra ít lead đủ điều kiện hoặc nhiều lượt đăng ký bỏ dở hơn.
Bài viết liên quan
Further Reading
Thẻ :
- Marketing
