Suy ngẫm về cách chỉ dẫn người dùng hiệu quả – P.1: Placeholder

Share

Chia sẻ của một nhà thiết kế trải nghiệm người dùng tại một công ty game. 

Placeholder là thông điệp được hiển thị trong input field, nhằm cho người dùng biết họ cần nhập thông tin gì và cần lựa chọn hành động gì. Trong quá trình lập kế hoạch cho các dịch vụ, tôi thường xuyên gặp nhiều luồng ý kiến khác nhau về placeholder. Vậy như thế nào mới là một placeholder hiệu quả? Hãy khám phá những trường hợp sử dụng đa dạng của placeholder và tìm ra những tiêu chí của một placeholder hiệu quả trong phần dưới đây.

1. Thể hiện rõ ràng thông tin người dùng cần nhập

Khi viết placeholder cho thanh tìm kiếm, nhiều dịch vụ chỉ để placeholder là Tìm kiếm mà không đề cập đến phạm vi tìm kiếm. Line là một trường hợp như vậy, mặc dù phạm vi tìm kiếm trong ứng dụng nhắn tin trải dài từ tìm tên nhóm chat, tên người tham gia cho đến tìm kiếm trong nội dung trò chuyện. Có thể nói rằng placeholder của Line không thân thiện với người dùng. Instagram cũng chỉ hiện Tìm kiếm, người dùng phải nhập từ khóa trước, sau đó mới biết được phạm vi tìm kiếm thông qua các kết quả được hiển thị. Những placeholder này có thể trở thành yếu tố gây bất tiện cho người dùng chưa quen thuộc với ứng dụng, vì họ không thể đoán biết được phạm vi tìm kiếm và phải suy nghĩ xem nên nhập từ khóa gì.

So sánh cách cung cấp thông tin tìm kiếm của Line (trái) và Instagram (phải)

Tuy nhiên, không phải cứ thể hiện phạm vi tìm kiếm là sẽ giúp ích được cho người dùng. Thanh tìm kiếm của Interpark Ticket (một dịch vụ hỗ trợ đặt vé trực tuyến cho các buổi biểu diễn âm nhạc, kịch, thể thao, v.v tại Hàn Quốc) có placeholder là Tên vé, tên diễn viên, ga tàu điện, tuy nhiên trên thực tế, từ khóa về ga tàu điện có thể khiến việc tìm kiếm buổi biểu diễn trở nên khó khăn hơn. Những người dùng thực hiện thao tác tìm kiếm trong ứng dụng này đa phần là vì một buổi diễn hay diễn viên cụ thể nào đó, thật đáng tiếc khi placeholder không truyền tải được chính xác tính năng họ cần. 

Placeholder của Interpark Ticket không đưa ra hướng dẫn chính xác, khiến việc tìm kiếm trở nên khó khăn

2. Cân nhắc vai trò của placeholder

Chèn thông điệp quảng cáo như thế nào?

Một trong những phương pháp được sử dụng gần đây là quảng bá sản phẩm thông qua placeholder, giống như Olive Young. Lợi ích của phương pháp này là thu hút được sự chú ý về một sản phẩm cụ thể ngay cả khi người dùng không tìm kiếm, nhưng vì placeholder sẽ biến mất khi được click nên khó dẫn dắt người dùng đến hành động mua sắm. Thực tế đã có nhiều trường hợp người dùng muốn chuyển đến trang sản phẩm được hiển thị ở placeholder, nhưng khi vừa nhấn vào input field thì placeholder biến mất, người dùng không thể nhớ chính xác tên sản phẩm nên cuối cùng đã từ bỏ ý định mua sắm.  

Ứng dụng tài chính Syrup đã không bỏ qua điểm này. Khi người dùng nhấn vào input field để tìm kiếm, banner kết nối đến dịch vụ được giới thiệu trong placeholder – “Little by Little” ngay lập tức hiện ra bên dưới thanh tìm kiếm. Đây là một ví dụ tốt về việc quảng bá sản phẩm thông qua placeholder và làm nổi bật liên kết đến giai đoạn mua sắm và sử dụng. 

Ví dụ không tốt (Olive Young – trái) và tốt (Syrup – phải) về việc sử dụng placeholder làm thông điệp quảng cáo

Hạn chế thông điệp dài trong không gian có hạn

Trong tất cả các trường hợp cần yêu cầu người dùng nhập liệu, chắc hẳn sẽ có những trường hợp bắt buộc phải viết placeholder dài. Tuy nhiên, rất khó để sử dụng placeholder một cách hiệu quả vì thành phần này sẽ biến mất khi người dùng nhấn hoặc chạm vào field tương ứng. Airbnb đã khắc phục vấn đề này bằng cách hiển thị mặc định một nội dung mẫu (ví dụ như màn hình giới thiệu về địa điểm lưu trú trong ảnh dưới đây) và duy trì hiển thị nó ngay cả khi người dùng chạm vào field. Tuy nhiên, giải pháp này mặc dù đưa ra được chỉ dẫn cho người dùng nhưng lại làm giảm hiệu quả thao tác nhập vì người dùng cần phải xóa nội dung mẫu nói trên trước khi nhập nội dung của mình.

Airbnb nhập sẵn nội dung để nhấn mạnh placeholder

Một giải pháp khác là sử dụng không gian bên ngoài input field để đưa ra chỉ dẫn, ví dụ như Munto. Tuy nhiên, cách này sử dụng thêm không gian bên ngoài nên khó áp dụng được trong trường hợp không đủ không gian. Soomgo lựa chọn phương pháp hiển thị thông báo trong một bottom sheet khi người dùng vừa truy cập vào màn hình soạn thảo. Những cách này vừa giúp thông điệp của placeholder được hiển thị một cách tự nhiên, vừa giúp giảm thiểu sự phiền toái khi phải xóa nội dung do dịch vụ nhập sẵn.

Munto (trái) và Soomgo (phải) sử dụng các không gian bên ngoài input field

3. Hiện thông báo trong không gian có hạn

Hạn chế lặp lại label trong placeholder

Mặc dù placeholder không phải một yếu tố bắt buộc, chúng ta thường xuyên thấy những trường hợp sử dụng placeholder trùng với label, chẳng hạn như Epostbank trong hình dưới đây. Có thể thấy rằng, trong những trường hợp người dùng không gặp khó khăn gì ngay cả khi không có placeholder, việc sử dụng placeholder sẽ là không cần thiết và không hiệu quả. Bên cạnh đó, việc dùng placeholder thay thế cho label như Naver cũng không phải một ý hay, vì sự thiếu vắng label có thể khiến người dùng bối rối trong trường hợp cần nhập nhiều thông tin hoặc nhập thông tin không quen thuộc.

Hiệu quả của placeholder giảm sút khi bị trùng lặp: Epostbank (trái) và Naver (phải)

Phương pháp tôi muốn đề xuất chính là cách làm của KB Card. Khi người dùng chạm vào input field, placeholder sẽ trở thành label. Sau đó, ở vị trí placeholder sẽ hiện ra gợi ý cách nhập thông tin. Đây là một mũi tên trúng hai đích, vừa giúp người dùng không phải ghi nhớ đang nhập thông tin cho phần nào, vừa cung cấp gợi ý cho họ nhập đúng.

Màn hình trước và sau khi chạm vào field nhập mật khẩu thẻ trong ứng dụng KB Card

Hướng dẫn chính xác khi đưa ra chỉ dẫn nhập liệu

Khi yêu cầu người dùng nhập số tài khoản hay số điện thoại, dịch vụ có thể thông báo cho người dùng biết chỉ cần nhập số và không cần ký tự gạch nối (-) thông qua placeholder (chú thích: số điện thoại và số tài khoản ngân hàng tại Hàn Quốc thường có dấu gạch nối phân cách). Cách làm này thân thiện với người dùng hơn so với việc kiểm tra tính hợp lệ sau khi người dùng đã nhập cả ký tự gạch nối, nhưng mục đích chính ở đây lại là ngầm yêu cầu người dùng chú ý khi nhập dữ liệu. Ngược lại, Naver Pay chỉ hiển thị những phím số khi người dùng chạm vào field, nhờ đó có thể ngăn chặn được tình huống người dùng nhập sai ngay cả khi không sử dụng placeholder. 

Khác với Pass (trái), Naver (phải) ngăn chặn tình huống người dùng nhập sai ngay cả khi không sử dụng placeholder

Vai trò đúng đắn của placeholder

Trong quá trình thực hiện bài viết này, tôi nhận thấy có nhiều dịch vụ không suy nghĩ về tầm quan trọng của placeholder. Khi thấy những dịch vụ sử dụng placeholder một cách không hiệu quả, tôi thường nghĩ rằng “Sự dũng cảm để quyết định bỏ placeholder trong những trường hợp không thực sự cần thiết cũng rất quan trọng”.

Ấn tượng của người dùng về dịch vụ có thể phụ thuộc vào việc dịch vụ cung cấp các placeholder theo cách nào và với những thông điệp như thế nào. Do đó, nếu bạn là người làm dịch vụ, hãy kiểm tra lại các placeholder theo góc nhìn của người dùng và suy nghĩ xem họ sẽ cần sự trợ giúp nào trong những trường hợp cụ thể. Hãy suy ngẫm lại về các placeholder để đảm bảo chúng thực hiện đúng vai trò bổ trợ của mình. 

Đọc thêm: Cách viết microcopy hướng đến người dùng trong placeholder


The original article: 효율적인 안내 제공에 대한 고민: ①플레이스홀더
Images: captured by the author, translated by Metacoders
The translated article above belongs to the author 만두님 and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.