Microcopy hướng đến người dùng – P.2: Placeholder & Error/Success message

Share

Chia sẻ của một nhà thiết kế sản phẩm ở Woowa Brothers.

Microcopy là tất cả các đoạn chữ hoặc câu văn ngắn (text) hiển thị trên giao diện người dùng. Là những câu và từ ngữ tác động đến trải nghiệm và dẫn dắt người dùng thực hiện hành động, microcopy đóng vai trò quan trọng trong việc giúp người dùng tránh khỏi sự cố và giải quyết những khó khăn họ gặp khi sử dụng dịch vụ. Tiếp theo phần trước về microcopy trong button và loading screen, hãy cùng tìm hiểu về microcopy trong placeholder và error/success message.

Placeholder

Placeholder là từ hoặc câu văn ngắn được sử dụng trong text input field hay select field trong các biểu mẫu. Khi được thiết kế phù hợp, placeholder có thể trở thành trigger (tác nhân kích hoạt) dẫn dắt người dùng điền thông tin trong những trường hợp cần thiết.

1. Đừng viết nếu không có lý do thích hợp

Có nhiều trường hợp người ta viết nội dung của placeholder giống hệt label để lấp đầy trường thông tin trống. Tuy nhiên, chúng ta không được sử dụng placeholder với mục đích chỉ để lấp đầy không gian.

Khi sử dụng placeholder, số lượng chữ trên màn hình sẽ nhiều lên vì cả label và placeholder đều là chữ. Điều này khiến màn hình trở nên chật chội và phức tạp, đồng thời khiến người dùng cảm thấy có vẻ như họ sẽ phải làm rất nhiều việc.

Nếu không có placeholder, input field sẽ trở thành không gian trống và có thể thu hút sự chú ý của người dùng hơn. Theo một nghiên cứu eye tracking, ánh mắt người dùng thường hướng về những trường thông tin trống. Do đó, việc không sử dụng placeholder sẽ hiệu quả hơn trong trường hợp người dùng có thể hiểu rõ về thông tin cần nhập thông qua label và không gặp khó khăn gì khi nhập liệu.

Skyscanner

Skyscanner là ứng dụng hỗ trợ tìm vé máy bay và phòng khách sạn giá rẻ cho khách du lịch.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là màn hình nhập thông tin của khách du lịch, bao gồm 5 trường thông tin cần nhập. Trong cả input field và dropdown box đều không có placeholder. Chỉ dựa vào label, người dùng đã có thể hiểu rõ cần phải nhập thông tin gì trong input field, do đó ứng dụng không cần cung cấp thêm gợi ý nào khác. Màn hình không có placeholder có số lượng chữ ít hơn, do đó ít phức tạp hơn trong mắt người dùng.

2. Hướng dẫn hoặc đưa ra ví dụ

Hãy định hướng hoặc đưa ra ví dụ để người dùng biết họ cần nhập thông tin theo cách nào. Chỉ dẫn hoặc ví dụ cụ thể sẽ dẫn dắt người dùng nhập thông tin theo đúng ý định và mong muốn của người thiết kế dịch vụ. Thêm vào đó, hãy cung cấp các gợi ý nhập liệu để giải quyết các khó khăn của người dùng và khuyến khích họ tham gia vào hành động.

Nếu không có chỉ dẫn hay ví dụ, người dùng có thể mất nhiều thời gian suy nghĩ khi nhập thông tin và cuối cùng quyết định không nhập nữa. Do đó, bạn nên đưa ra chỉ dẫn hoặc ví dụ thông qua placeholder trong những trường hợp cần người dùng suy nghĩ nhiều, trường hợp người dùng gặp khó khăn khi nhập thông tin hay trường hợp nội dung nhập có thể dài ngắn tùy theo từng người. 

Hwahae

Hwahae là một trong những ứng dụng làm đẹp hàng đầu tại Hàn Quốc.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là màn hình đánh giá sản phẩm mỹ phẩm theo các tiêu chí: điểm tốt, điểm chưa tốt và mẹo sử dụng mỹ phẩm trong ứng dụng Hwahae. Thông qua placeholder, Hwahae đã cung cấp cho người dùng chỉ dẫn chi tiết về việc cần soạn nội dung như thế nào, đồng thời thúc đẩy người dùng soạn những nội dung đánh giá có ý nghĩa. 

Tuy nhiên, người dùng sẽ mất thời gian khi đọc những placeholder dài, do đó trong trường hợp này có thể lược bỏ những nội dung đã được đề cập trong tiêu đề menu hoặc label như Vui lòng đánh giá chi tiết sản phẩm bạn đã sử dụng hay Vui lòng cho biết điều bạn cảm thấy đáng tiếc khi sử dụng sản phẩm.

Pinterest

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trong màn hình nhập lời giới thiệu, Pinterest đã đưa ra chỉ dẫn: Hãy chia sẻ về câu chuyện hoặc sản phẩm của doanh nghiệp

Bên cạnh chỉ dẫn còn có một thông điệp thúc đẩy người dùng nhập liệu: Đây là cơ hội tốt để cho cộng đồng biết thêm về bạn. Tuy nhiên, vì câu văn càng ngắn càng dễ đọc và ít tiêu tốn thời gian của người dùng hơn, một câu văn được rút ngắn tối đa như Đây là cơ hội tốt để cộng đồng biết đến bạn sẽ hiệu quả hơn trong trường hợp này.

Toss

Toss là một ứng dụng hỗ trợ chuyển tiền trực tuyến tại Hàn Quốc.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Bên trái là màn hình thiết lập tên hội/nhóm cho chức năng Hãy cùng dành dụm tiền. Nội dung Hội phí du lịch một cách tự nhiên sẽ được hiểu là ví dụ, vậy nên trước đó không cần có từ Ví dụ hay VD. Đây là một ví dụ lược bỏ những chữ không cần thiết để khiến placeholder đơn giản và ngắn gọn hơn.

Bên phải là màn hình tìm kiếm của Toss Invest, cung cấp gợi ý Hãy tìm kiếm OO. Mỗi lần người dùng truy cập màn hình này, ứng dụng sẽ thay đổi từ được lấy làm ví dụ. Các từ có thể chỉ lĩnh vực như game, cà phê hay sản phẩm như Bibigo, Airpod, qua đó cho người dùng biết họ có thể tìm được cả sản phẩm trên Toss Invest. 

3. Cung cấp danh mục (category)

Nếu được cung cấp danh mục tìm kiếm, người dùng sẽ biết được họ có thể tìm những gì, từ đó giảm khả năng nhập sai và dẫn dắt người dùng nhập những từ khóa đa dạng.  

Airbnb

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Khi nhấn vào thanh tìm kiếm, người dùng sẽ được chuyển đến màn hình tìm kiếm. Trên màn hình tìm kiếm, thông tin về các danh mục được hiển thị qua placeholder. Tuy nhiên nếu chỉ có danh sách danh mục thì sẽ gây ra cảm giác cứng nhắc, do đó câu hỏi Bạn sẽ đi du lịch ở đâu? được thêm vào để giúp bầu không khí trở nên dịu dàng và thân thiện hơn.

Tuy nhiên, tôi không chắc liệu những cụm từ như Đâu cũng được / Tuần nào cũng được / Thêm khách mời có thể truyền tải ngay lập tức tính năng của Airbnb hay không. Các từ Điểm đến / Ngày đi / Số người sẽ giúp người dùng hiểu về tính năng chính xác hơn nhiều. 

Yanolja

Yanolja là nền tảng cung cấp thông tin về các dịch vụ lưu trú và du lịch tại Hàn Quốc.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trong màn hình tìm kiếm nơi ở, người dùng biết được họ cần tìm kiếm gì thông qua placeholder. Qua câu Bạn có thể tìm cả nơi có hồ bơi và nhận động vật, người dùng biết được có cả những nơi lưu trú có hồ bơi hay chấp nhận động vật. Bằng việc cung cấp danh sách các danh mục tìm kiếm như thế này, bạn có thể quảng bá sản phẩm hoặc các tính năng mới một cách tự nhiên.

4. Quảng cáo

Bạn cũng có thể chèn quảng cáo trong placeholder. Một cách tự nhiên, người dùng sẽ đọc placeholder khi cần tìm kiếm, do đó placeholder có thể giúp quảng cáo sản phẩm mới và ưu đãi. Đây là cách thường được áp dụng trong các ứng dụng thương mại, trường hợp người dùng đã biết có thể tìm kiếm những gì.

Musinsa

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Placeholder của thanh tìm kiếm cho người dùng biết về ưu đãi, từ đó thúc đẩy họ mua hàng. Lý do có thể chèn quảng cáo trong các ứng dụng thương mại chính là vì người dùng thường đã biết họ có thể tìm kiếm những gì. 

Hwahae

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Hwahae sử dụng placeholder của thanh tìm kiếm để quảng bá sản phẩm. Tuy nhiên, thật đáng tiếc là qua nội dung placeholder, người dùng không thể biết được tại sao sản phẩm lại được quảng bá: liệu đó là sản phẩm được yêu thích nhất hay là sản phẩm mới ra mắt. 

Nếu người dùng nhấn vào icon khi chưa nhập từ khóa tìm kiếm, ứng dụng sẽ chuyển đến trang của thương hiệu. Việc này góp phần tiết kiệm công sức của người dùng, giúp họ không nhất thiết phải nhập từ khóa tìm kiếm. Tuy nhiên thật đáng tiếc vì ứng dụng không đưa ra chỉ dẫn bổ sung mặc dù đây là một trải nghiệm người dùng không quen thuộc.

Error Message

Error Message (thông báo lỗi) là thông điệp cho biết lỗi hay sự cố dẫn đến việc không thể hoàn tất hành động của người dùng. Error Message là một yếu tố quan trọng trong dịch vụ, đóng vai trò giúp đỡ người dùng hoàn thành quy trình khi họ đối mặt với vấn đề.

1. Thông báo rõ ràng nguyên nhân sự cố

Hãy thông báo cho người dùng biết chính xác lý do gây ra tình trạng hiện tại. Lý do này có thể trở thành một gợi ý để họ giải quyết vấn đề. Nếu không đưa ra nguyên nhân mà chỉ hiển thị trạng thái không thể hoàn tất, người dùng sẽ không dễ dàng hiểu được và có thể phát sinh những cảm xúc tiêu cực. Hơn nữa, vì không biết chính xác nguyên nhân thất bại, người dùng có thể thử thực hiện lại hành động và lặp lại các sai lầm. Chính vì vậy, cần phải làm rõ nguyên nhân gây ra vấn đề trong tất cả các thông báo lỗi.

Toss

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Đây là màn hình thông báo chuyển tiền thất bại. Thông điệp Số dư trong tài khoản không đủ vừa cho biết nguyên nhân, vừa gián tiếp thông báo việc chuyển tiền đã thất bại. Việc không sử dụng cách diễn đạt tiêu cực như Chuyển tiền thất bại cũng giúp tối thiểu hóa khả năng gây ra cảm giác tiêu cực ở người dùng.

Daangn Market

Daangn Market là một nền tảng mua bán đồ cũ tại Hàn Quốc.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Lý do không thể nhập số điện thoại được thông báo rõ ràng trong input field. Thay vì chỉ thông báo trạng thái một cách đơn giản như Đây là số điện thoại không khả dụng, việc đưa ra lý do rõ ràng có thể giảm thiểu cảm giác nghi hoặc ở người dùng. Thêm vào đó, thông báo cũng cân nhắc cả trường hợp người dùng sử dụng số điện thoại của người dùng khác. Tuy nhiên, sẽ tốt hơn nữa nếu ứng dụng cho người dùng biết phải truy cập trang nào trong trường hợp cần liên hệ trung tâm chăm sóc khách hàng.

2. Đưa ra cách giải quyết

Thông qua microcopy, hãy cho người dùng biết cách giải quyết vấn đề. Người dùng sẽ không phải suy nghĩ cần làm gì để giải quyết vấn đề nếu họ được cung cấp gợi ý. Do đó, microcopy nên đưa ra cách giải quyết trong trường hợp cần dẫn dắt người dùng hoàn tất quá trình.

Toss Invest

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là màn hình trong Toss Invest khi người dùng không thể mua cổ phần. Ứng dụng cho người dùng biết nguyên nhân gây ra vấn đề qua thông điệp Số dư trong tài khoản không đủ và cách giải quyết nạp tiền vào tài khoản Toss Invest trong mô tả chi tiết. Tuy nhiên, ở đây không nhất thiết phải tính số tiền người dùng còn thiếu, vì sau khi nhấn nút Nạp tiền, người dùng sẽ được chuyển đến màn hình nạp tiền vào tài khoản Toss Invest để có thể giải quyết vấn đề một cách dễ dàng. Thêm vào đó, việc cho biết rằng số tiền dư sẽ được gửi lại vào tài khoản ngân hàng có thể ngay lập tức loại bỏ được nghi ngờ hoặc lo ngại của người dùng. 

3. Thân thiện và không quá cứng nhắc

Đôi khi, lỗi xuất hiện do sự cố của dịch vụ hoặc sơ suất của người dùng, nên người viết thông báo lỗi cần chú ý tránh gây ra cảm giác uy hiếp hay ra lệnh cho người dùng. Bên cạnh đó, nên tránh sử dụng các từ ngữ tiêu cực như lỗi, thất bại hay các thuật ngữ kỹ thuật. Những thông báo lỗi được viết với trọng tâm hướng đến người dùng có thể giảm thiểu những cảm xúc tiêu cực và tạo được ấn tượng dịch vụ thân thiện với người dùng.

My Real Trip

My Real Trip là một nền tảng hỗ trợ so sánh và đặt vé máy bay, chỗ ở, phương tiện di chuyển và các hoạt động du lịch.

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là input field để người dùng nhập nickname. Ứng dụng cho người dùng biết quá trình nhập nickname đã thất bại bằng màu cam trên giao diện và đưa ra cách giải quyết bằng thông báo lỗi Vui lòng nhập nickname. Thông báo lỗi sử dụng từ ngữ cầu khiến Vui lòng thay vì mệnh lệnh và mang đến cảm giác thân thiện, dịu dàng hơn so với câu cùng nghĩa Đây là thông tin bắt buộc.

Success Message

Success Message (thông báo thành công) là thông điệp cho biết hành động của người dùng đã hoàn tất một cách suôn sẻ. Success Message đóng vai trò quan trọng trong việc cung cấp phản hồi liên quan đến hành động của người dùng, đồng thời có thể mang lại trải nghiệm tích cực và thú vị khi được áp dụng tốt.

1. Xác nhận hoàn tất thao tác của người dùng

Hãy xác nhận rằng thao tác của người dùng đã được hoàn thành thông qua microcopy. Nhờ đó, người dùng có thể trực tiếp xác nhận rằng hành động của họ đã hoàn tất và không có sự cố nào phát sinh.  

Toss

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là màn hình thông báo việc chuyển tiền thành công. Bằng một thông điệp đơn giản như Đã gửi OO won cho OO, ứng dụng đã thông báo kết quả của thao tác cho người dùng, từ đó người dùng có thể xác nhận lại một lần nữa xem mình đã chuyển cho ai bao nhiêu tiền.

2. Hãy nói về người dùng thay vì thao tác

Sẽ tốt hơn khi nói về người dùng thay vì luồng chức năng, chẳng hạn như khi người dùng đăng tải ảnh đại diện, hãy dành lời khen Quả là một tấm ảnh đẹp! thay vì thông báo Đã đăng ảnh thành công. Ứng dụng có thể giúp người dùng cảm thấy vui hơn vì câu nói dành cho chính họ, đồng thời tạo dựng mối quan hệ gắn kết hơn với người dùng.

Musinsa

Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders

Trên đây là input field sau khi người dùng nhập nickname thành công. Lời khen Quả là một nickname hay! mang đến cảm giác tự nhiên và giống như đang nói chuyện với người thật hơn thông báo Đây là nickname khả dụng, nhờ đó có thể khiến người dùng cảm thấy vui hơn.

Checklist cho Placeholder & Error/Success message

Để tổng kết bài viết này, dưới đây là danh sách những điều bạn cần lưu ý khi viết placeholder và error/success message.

1. Placeholder

  • Không cần sử dụng thêm placeholder khi người dùng đã hiểu rõ nội dung cần nhập thông qua label và không gặp khó khăn gì khi nhập.
  • Hãy cung cấp hướng dẫn hoặc gợi ý trong những field có nội dung khó hoặc có khả năng người dùng nhập sai ý đồ của dịch vụ.
  • Trường hợp có danh mục tìm kiếm đa dạng, hãy cung cấp hướng dẫn tìm kiếm trong placeholder.

2. Error Message

  • Hãy thông báo rõ ràng nguyên nhân sự cố.
  • Hãy đưa ra cả cách giải quyết để giúp người dùng giải quyết sự cố nhanh chóng hơn.
  • Hãy sử dụng lối nói nhẹ nhàng và không sử dụng những từ ngữ tiêu cực hay thuật ngữ kỹ thuật.

3. Success Message

  • Hãy xác nhận cho người dùng biết thao tác của họ đã hoàn tất.
  • Hãy nói về người dùng – người đã thực hiện thao tác, thay vì chính thao tác.

Placeholder đóng vai trò giúp quá trình nhập liệu của người dùng trở nên dễ dàng, do đó cần đảm bảo nội dung của placeholder được viết một cách phù hợp. Error Message có nhiệm vụ giúp người dùng giải quyết những vấn đề phát sinh để hoàn thành thao tác, còn Success Message giúp người dùng xác nhận lần cuối kết quả thao tác, do đó cần lưu ý thể hiện thông điệp một cách chính xác và rõ ràng, đồng thời vẫn tự nhiên và thân thiện.


The original article: 고객을 위한 마이크로카피: ②플레이스홀더·에러&성공메시지
The translated article above belongs to the author Kim Tae Hee (김태희) and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.