Phát triển Search Box hoàn hảo: Không dễ như bạn nghĩ

Chia sẻ 36
Phát triển Search Box hoàn hảo: Không dễ như bạn nghĩ

Search box là tổ hợp trường nhập liệu và nút nộp dữ liệu. Nhiều người cho rằng search box không cần thiết kế; dù gì đi nữa, chỉ có hai thành phần đơn giản thôi mà. Tuy nhiên, đây là quan niệm khá sai lầm, trên các trang web nặng content, search box thường là nhân tố thiết kế được sử dụng nhiều nhất. Khi người dùng bắt gặp một trang web khá phức tạp, họ sẽ ngay lập tức tìm đến seach box, phương tiện giúp họ giải quyết như cầu nhanh nhất và ít công sức nhất. Bởi thế, thiết kế và tính khả dụng của search box là một vấn đề không thể xem nhẹ.

Trong bài viết, ta sẽ tìm hiểu cách cải thiện thành phần này để giúp người dùng tìm kiếm nội dung họ cần nhanh và tiện lợi hơn nữa.

Những chuẩn mực phổ biến hiện nay

1. Sử dụng icon kính lúp

Luôn luôn đính kèm search box chung với biểu tượng kính lúp. Icon, theo định nghĩa, là biểu hiện bằng hình ảnh của một vật thể, hành động, hay ý tưởng. Một số icon được đại đa số người dùng công nhận với chức năng nhất định. Icon kính lúp là một trong số đó.

Phát triển Search Box hoàn hảo: Không dễ như bạn nghĩ

2. Hiển thị nổi bật trường tìm kiếm

Nếu tìm kiếm là một trong những tính năng quan trọng trên ứng dụng/website, thì tính năng này càng cần phải nổi bật hơn nữa.

Phát triển Search Box hoàn hảo: Không dễ như bạn nghĩ
Trái: chức năng tìm kiếm bị ẩn sau icon.

Quan trọng là bạn phải hiển thị trường văn bản mở hoàn chỉnh, vì nếu bị ẩn sau icon, người dùng khó có thể nhận biết được và tăng thời gian tương tác (thêm vài lần click/tap):

Không nên dùng tinh giản tối đa cho search vì ngữ cảnh sẽ bị ẩn đi.

3. Cung cấp nút tìm kiếm trong search box

Nút bấm giúp người dùng nhận ra đó là bước tiếp theo để kích hoạt hành động tìm kiếm — ngay cả khi người dùng quyết định thay bằng nút Enter.

Thủ thuật:

  • Canh kích thước của nút bấm cho thật phù hợp, để người dùng không phải “mất sức” canh chỉnh chuột quá chính xác. Khi vực click được lớn hơn, người dùng nhận thấy rõ hơn và click dễ hơn.
  • Cho phép người dùng nộp tìm kiếm bằng nút Enter và cả từ việc click icon. Nhiều người dùng vẫn có thối quen bấm nút để nột dữ liệu tìm kiếm.

4. Đặt search box ở mọi page

Bạn nên luôn luôn tạo điều kiện tiếp cận search box dễ dàng trên mọi page vì nếu người dùng không thể tìm được nội dung họ cần, họ sẽ tìm cách sử dụng thanh search dù họ đang ở đâu trong website đi chăng nữa.

5. Search box đơn giản

Nếu đã thiết kế search box, hãy làm sao cho giống, và càng đơn giản càng tốt. Theo các nghiên cứu về tính khả dụng, mặc định không hiển thị tùy chỉnh cao cấp sẽ khiến search box thân thiện hơn. Các tùy chỉnh tìm kiếm cao cấp (như ví dụ Boolean search query bên dưới) có thể có thể làm rối trí người dùng.

6. Đặt search box ở

Khi người dùng phải đi tìm search box vì chúng chưa được thiết kế nổi bật và dễ nhận biết, bạn đang gặp rắc rối đấy.

Bảng dưới đây được lấy từ một nghiên cứu thực hiện bởi A. Dawn Shaikh và Keisi Lenz: dữ liệu thể hiện vị trí dự đoán của search form trong một đợt khảo sát với 142 đơn vị tham gia. Nghiên cứu chỉ ra vị trí tiện lợi nhất cho người dùng là góc trên cùng bên trái hoặc trên cùng bên phải của mỗi page trong site, nơi mà người dùng có thể dễ dàng tìm được scanning pattern hình chữ F thường thấy.

Số liệu nói lên các khu vực mà người tham gia cho rằng search box nên ở đó. Góc phải trên cùng vẫn là nơi đầu tiên nhiều người tìm đến nhất.

Vì vậy, đặt search box ở góc phải (bên trên) hay ở giữa (bên trên) của bố cục sẽ đảm bảo người dùng tìm được search box rất nhanh chóng.

YouTube, dịch vụ nặng về content, có thanh search ở giữa, phía trên cùng màn hình.

Lời khuyên:

  • Lý tưởng mà nói, search box nên hòa nhập vào thiết kế tổng quan của website, nhưng vẫn có phần nổi bật nào đó khi người dùng cần đến chúng.
  • Bạn càng có nhiều nội dung, bạn càng muốn tính năng search của mình thật nổi bật. Nếu phần search lại là một thành phần quan trọng của site, hãy dùng thật nhiều thủ thuật tương phản để trường nhập liệu và icon nổi bật khỏi background và các thành phần xung quanh.

7. Kích thước đúng cho trường nhập liệu

Thiết kế trường nhập liệu quá ngắn là một trong nhiều lỗi thường gặp ở các designer. Tất nhiên người dùng vẫn có thể gõ truy vấn dài rồi, nhưng chỉ một phần đoạn text này được hiển thị cùng một lúc, điều này dẫn đến tính khả dụng kém, vì người dùng không thể review và dễ dàng chỉnh sửa truy vấn đã nhập. Thật ra, khi search box hiển thị số ký tự giới hạn, người dùng buộc phải sử dụng các truy vấn ngắn, thiếu chính xác (vì truy vấn dài sẽ khó và không tiện lợi khi đọc). Nếu trường nhập liệu được quy định kích thước đúng theo nhập liệu kỳ vọng của người dùng, họ sẽ có thể đọc và diễn giải dễ dàng hơn.

Theo nguyên tắc chung, một trường nhập liệu thường hiểu thị 27 ký tự (đủ sức chứa 90% truy vấn)

Amazon có search box với kích thước khá phù hợp.

Tip: Bạn cũng có thể dùng search box “giãn nở”, tính năng sẽ mở rộng thanh nhập liệu khi lcick vào. Như vậy, bạn có thể tiếp kiệm không gian của màn hình mà vẫn cho người dùng đủ thông tin để tìm và thực hiện truy vấn nhanh chóng.

8. Cơ chế gợi ý tự động

Cơ chế tự động đề nghị giúp người dùng tìm đúng truy vấn bằng cách thử dự đoán dựa trên các ký tự đã nhập. Cơ chế tự đề nghị không nhằm đẩy nhanh tiến độ tìm kiếm, mà mục đích để điều hướng người dùng và giúp họ xây dựng truy vấn tìm kiếm họ mong muốn. Thông thường người dùng rất tệ ở khoảng xây dựng truy vấn tìm kiếm phù hợp: nếu họ không nhận được kết quả lý tưởng trong lần tìm kiếm đầu tiên, những lần tiếp theo cũng hiếm khi nào thành công. Thật ra, họ thường bỏ cuộc ngay. Khi tính năng tự động đề nghị làm việc đúng như mục tiêu, người dùng sẽ được hỗ trợ với những cấu trúc truy vấn tốt và chính xác hơn.

Google Search là một trong rất ít những dịch vụ rất thành thạo thủ thuật này, đã trãi qua vô số lần nghiên cứu và cải tiến từ tận năm 2008. Vì người dùng có khuy hướng tìm kiếm cùng một thứ nhiều hơn một lần, khi nhớ được lịch sử tìm kiếm, Google có thể tạo ra trải nghiệm tiếp kiệm thời gian và tiện lợi vượt trội.

Thủ thuật:

  • Đảm bảo tính năng gợi ý tự động thật hữu ích. Tính năng được thiết kế sơ sài có thể làm người dùng phân tán và rối mắt. Nên bạn cần thêm các tính năng gia tăng như sửa lỗi chính ta, nhận diện từ root, và dự đoán text để cải thiện công cụ.
  • Bạn cần cung cấp gợi ý tự động càng nhanh càng tốt, chẳng hạn như sau khi nhập ký tự thứ ba, để cung cấp giá trị ngay và giảm rắc rối khi người dùng nhập truy vấn.
  • Chung cấp ít hơn 10 đầu mục (và không dùng scroll bar) để người dùng ít “choáng”.
  • Cho phép điều hướng bằng bàn phím cho danh sách gợi. Khi người dùng cuộn xuống qua item cuối cùng, họ sẽ quay trở lại đầu danh sách.
  • Nổi bật sự khác biệt giữa thông tin được nhập và thông tin được gợi ý (ví dụ, input text có độ nặng theo chuẩn, trong khi đó phần giợi ý lại nặng hơn một chút).
Tính năng autocomplete tiếp kiệm thời gian của người dùng và thậm chí còn có thể gợi ý nội dung hoặc cách dùng từ đúng.

9. Nói rõ người dùng có thể tìm kiếm thứ gì

Thủ thuật: Giới hạn gợi ý xuống chỉ có vài từ, nếu không bạn thực tế sẽ tăng “tải nhận thức” đến người dùng.

Phần kết

Tìm kiếm là một hoạt động rất cơ bản và là thành phần quan trọng cho bất cứ site hay ứng dụng nặng về nội dung nào. Ngay cả những thay đổi nhỏ nhất như kích thước trường nhập liệu hay giải thích loại thông tin cần nhập vào trường tìm kiếm có thể gia tăng mạnh mẽ tính khả dụng cùng UX tổng qua.

Phát triển Search Box hoàn hảo: Không dễ như bạn nghĩ
Đánh giá bài viết

tienphamblog

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

All rights reserved Tien Pham Blog