Tối ưu hóa giao diện người dùng

Giao diện người dùng (UI) là thứ rất cụ thể. Đó là nút bấm, form thông tin, màu sắc chữ, kích cỡ hình ảnh… Tối ưu hóa UI là làm nó trở nên cụ thể hơn. Để người dùng chỉ cần nhìn vào giao diện là biết họ đang làm gì, sắp làm gì và muốn làm gì.

Bọn mình đã và đang làm những điều bên dưới. Để blogweb bán hàng của mình trở nên rõ ràng và cụ thể với người dùng.

Người dùng ở đây là khách hàng. Họ càng dễ sử dụng web bao nhiêu, họ càng mua hàng nhanh bấy nhiêu.

Bắt đầu thôi.

Lược dịch từ: goodui.org và congdongisocial.com

Đánh số từng đoạn nội dung

Bài viết của bọn mình vẫn đang cập nhật nên chưa đánh số. Sorry guys.

Mỗi đoạn nội dung nên được đánh số rõ ràng để người dùng dễ theo dõi. Thay vì vài chục đoạn nội dung trải dài, không có thứ tự.

Loại bỏ những từ không cần thiết

Sử dụng những câu ngắn. Từ ngữ đơn giản và dễ hiểu.

idea069

Chừa nhiều khoảng trống hơn

Các khoảng trống giúp nội dung dễ đọc hơn rất nhiều. Không nên để câu chữ trong một trang dính sát nhau, cũng không nên đặt chúng cách xa quá. Chừa khoảng trống vừa đủ. Blog hoặc website của bạn hài hòa hơn rất nhiều.

idea063

Bố cục trang web là một cột thay vì nhiều cột

Bố cục một cột giúp người đọc dễ dàng tập trung vào nội dung theo 1 chiều từ trên xuống dưới. Hãy dẫn dắt họ tới một nút kêu gọi hành động nổi bật ở cuối trang. Bố cục này cực kỳ phù hợp với blog và bọn mình đang áp dụng nè.

Nếu có quá nhiều nội dung, với quá nhiều dạng dữ liệu thì đành giữ bố cục nhiều cột vậy.

Yêu cầu người dùng nhập ít thông tin hơn

Bọn có muốn bỏ thời gian và công sức ra để điền cái form hơn 10 mục bằng cách gõ trên điện thoại không? Đã vậy toàn là những thông tin không quan trọng. Đừng bắt người dùng chịu đựng chuyện đó. Càng ít mục, tỷ lệ chuyển đổi sẽ càng cao.

Nếu là web bán hàng thì form thanh toán chỉ cần 3 mục là đủ. Tên, số điện thoại và địa chỉ.

Bỏ bớt các đường viền để tránh sự phân tâm.

Hãy để người dùng tập trung vào đúng nội dung quan trọng.

Hiển thị các option thay vì ẩn chúng đi

Hãy đơn giản hóa thao tác của người dùng. Đừng bắt họ phải click chuột 2 lần thay vì 1.

web bán hàng, thì khu vực chọn size sản phẩm nên hiển thị hết các size để khách dễ bấm.

Gộp các chức năng tương tự thay vì rải rác khắp nơi

Với những trang dài, bọn mình dễ vô tình tạo ra nhiều mục và nút bấm có chức năng tương tự nhau rải rác toàn trang web. Khách hàng có thể đã thấy chúng. Nhưng khi muốn tìm lại thì không nhớ chính xác chúng ở đâu. Hãy gộp những chức năng tương tự nhau vào một cái thôi.

web bán hàng, hãy để số hotline thật nổi bật ở góc trên. Và lược bỏ hết các nút Chăm sóc khách hàng, Tư vấn, Chat live, Liên hệ với chúng tôi, Tổng đài.

Đưa ra gợi ý thay vì để người dùng tự lựa chọn

Khi đứng trước nhiều sản phẩm, người dùng sẽ rất phân vân khi phải chọn lựa. Việc gợi ý sản phẩm thích hợp nhất cho người dùng lúc này sẽ rất hữu ích.

Nói rõ sản phẩm này dành cho ai thay vì dành cho tất cả mọi người

Bạn đang nhắm mục tiêu đến tất cả mọi người hay đến nhóm đối tượng nhất định? Việc nhắm đúng đối tượng giúp bạn tập trung chăm sóc đúng khách hàngtăng tỉ lệ chốt sale. Vậy hãy nói rõ sản phẩm này dành cho ai để người dùng biết họ có phải đối tượng được chăm sóc hay không. Thay vì tốn thời gian dạo khắp trang web rồi vẫn không biết sản phẩm nào dành cho mình.

web bán hàng của bọn mình, có những mẫu giày dành cho những ngành nghề riêng như “xây dựng”, “cơ khí”. Bọn mình tạo thành những tag sản phẩm thật nổi bật và hiển thị ngay phía trên nút “Mua hàng”.

Cố gắng mở rộng trang thay vì tạo thêm trang

Nếu form ngắn, cứ hiển thị ra để khách hàng điền luôn. Thay vì phải bấm nút để mở ra trang mới.

Để một số thông tin mặc định cho người dùng dễ hình dung

Sử dụng các giá trị mặc định hoặc điền trước form theo kiểu gợi ý sẽ giúp người dùng đỡ mất công nghĩ ngợi và chọn lựa. Càng ít thao tác càng tốt.idea028

Hãy giải thích, không phải ai cũng biết rồi

Một số thông tin bọn mình hiểu khá rõ, vì đã tiếp xúc quen rồi. Nhưng có thể người dùng thì chưa. Nên kèm lời giải thích (nếu cần) đối với một số ô nhập. Đừng dùng placeholder như lời giải thích vì nó sẽ biến mất khi người dùng nhập dữ liệu vào ô. Và lát sau họ chẳng thể nhớ thứ họ đã nhập là gì.

Mỗi khi mình tuyển một bé nhân viên mới. Y như rằng 2 hôm sau lại nhận được câu hỏi: a ơi MST là gì, Slug là gì, Meta Description là gì… Thế là mình quyết định thêm tính năng Xem trước snippet vào trang admin.

idea068

Báo lỗi ngay, thay vì đợi người dùng điền xong form

Để người dùng có thể sửa lỗi ngay lập tức. Còn hơn để họ lụi cụi điền xong form rồi mới thông báo lỗi. Khi đó người dùng phải lọ mọ dò lại toàn bộ form. Nếu đó là form dài thì quả là cực hình. Hãy thông báo lỗi ngay tại ô nhập, khi mắt người dùng vẫn còn đang tập trung ở khu vực đó.

Hiện web bán hàng của bọn mình chưa áp dụng. Cũng may là do form đặt hàng ngắn, chỉ 4 ô: Tên, Số điện thoại, email, địa chỉ.

idea033

Tính toán giúp người dùng

“5 phút trước” sẽ dễ hình dung hơn so với “19:08 13/07/2018”.idea053

Tách nội dung theo cấp bậc rõ ràng

Hệ thống cấp bậc sẽ giúp người dùng dễ dàng phân biệt những nội dung quan trọng với những phần ít quan trọng hơn. Một hệ thống có cấp bậc rõ ràng được nhận biết dựa trên sự khác nhau về việc: căn lề, khoảng cách dòng, cỡ chữ, kích cỡ hình ảnh…idea031

Tăng tốc độ load cho website

Tốc độ load trang càng lâu, thì tỉ lệ bỏ ngang càng lớn. Cách giải quyết ở đây là tăng tốc độ load trang bằng cách tối ưu code và hình ảnh. Hoặc giảm nhận thức về thời gian load trang để khiến người dùng không cảm thấy rằng họ đang chờ quá lâu. Bằng cách hiển thị thanh tiến trình load.idea039

Ký hiệu một cách dễ hiểu

Một icon có thể có rất nhiều ý nghĩa, và nếu đi kèm với từ giải nghĩa, thì người dùng sẽ không cảm thấy mơ hồ. Lấy ví dụ về hình mũi tên đi xuống. Icon nghĩa là dịch chuyển mọi thứ xuống phía dưới, giảm mức độ ưu tiên hay là tải xuống? Icon “x” có nghĩa là xoá, vô hiệu hoá hay đóng lại? Vấn đề đa nghĩa này trở nên càng trầm trọng hơn khi mà người dùng không có nhiều thời gian để tìm hiểu về ý nghĩa của từng icon. Vì vậy, để icon trở nên dễ hiểu hơn, hãy đính thêm một cụm từ giải nghĩa bên cạnh.idea047

Nút “Mua hàng” to

Để người dùng dễ click hơn. Bạn muốn điều đó không? Tất nhiên vẫn duy trì sự cân đối và thẩm mỹ.

idea038

Giao diện Responsive

Hãy đơn giản. Bằng cách trở nên linh hoạt. Nhất là khi người dùng dành thời gian trên điện thoại nhiều hơn máy tính.

idea070

Định giá giúp khách hàng

Ai cũng muốn tìm kiếm mức giá hời. Và ai cũng phi lý trí. Cuốn sách giá 89k thì chỉ tầm tám chục, nhưng 91k thì gần trăm ngàn lận. Tập gym 49k/ngày thì rẻ, chỉ tương đương 1 cốc trà sữa để có body săn chắc trong vài tuần. Nhưng 1triệu rưỡi/tháng thì mắc. Ly cà phê 49k thì rẻ nhưng 49.000VND thì mắc. Bạn biết mình nên làm gì rồi đấy.idea051

Nói rõ quyền lợi của khách hàng

Người dùng có thể vào xem quyền lợi khi mua hàng bằng cách… Cuộn xuống cuối trang, bấm vào link Chính sách bán hàng tại footer.

Hoặc (bọn mình vẫn chưa làm được).

Xem ngay tại nút “Mua hàng”: Miễn phí giao hàng, 100% chính hãng, Đổi trả trong 7 ngày, Bảo hành 6 tháng.

idea050

Nói “Cảm ơn” thay vì “Đơn hàng được tạo thành công”

Lời cảm ơn giúp trải nghiệm của người dùng trở nên gần gũi hơn. Người dùng thấy bạn cảm kích và  thực sự quan tâm đến họ. Lời cảm ơn nên xuất hiện sau khi khách hàng hoàn thành một công việc nào đó, thay vì chỉ thông báo rằng “Bạn đã thành công”.

web bán hàng, bọn mình gửi lời cảm ơn khách hàng đã chọn mua hàng chính hãng từ shop thay cho thông báo “Đơn hàng đã được tạo”.
idea052

Để khách hàng nói về bạn thay vì tự khoe

Hãy show vài lời phản hồi của khách hàng hay đưa ra các thông tin chứng thực rằng những người khác cũng đã dùng sản phẩm của bạn. Cái này gọi là Kiểm chứng xã hội (Social proof). Thấy người khác đang ủng hộ và nói tốt về cửa hàng sẽ giúp người dùng yên tâm quyết định mua hàng.

Trung thực

Hãy trung thực.idea065

Cho thấy lợi ích thay vì những tính năng

Lợi ích là ý tưởng nền tảng. Con người tìm kiếm lợi ích. Mình mua máy khoan bởi vì mình muốn một cái lỗ trên tường. Điều mình quan tâm là chuyện cái máy đó có giúp mình tạo cái lỗ nhanh hơn, ít tốn công hơn, dễ hàng hơn không. Hơn là chuyện cái máy đó có bao nhiêu mã lực, bao nhiêu vòng/giây hay xài điện bao nhiêu volt.

Đặt lợi ích của người dùng lên hàng đầu

Ở web bán hàng, bọn mình vẫn xem sản phẩm trên web là của khách hàng. Nên bạn sẽ thấy “Nhận giày của bạn trong 2h nội thành” thay vì “Giao hàng nhanh trong 2h nội thành”. “Bạn sẽ nhận được hàng trong 2-3 ngày” thay vì “Thời gian giao hàng 2-3 ngày”. Cả khi nói chuyện với khách qua điện thoại hoặc tư vấn trực tiếp cũng thế. Vẫn đang luyện tập. Đôi khi vẫn hay quên.

idea067

Posted in: SEO

One Reply to “Tối ưu hóa giao diện người dùng”

Leave a Reply

Your email address will not be published. Required fields are marked *