10 lời khuyên để thiết kế các hình thức hoàn hảo

Bài viết này ban đầu được xuất bản trên onepixelout.com

Biểu mẫu là cổng thông tin giữa người dùng và hệ thống và thường là trọng tâm của trang web. Đăng nhập, đăng ký, cập nhật trạng thái của bạn, nhập thông tin thanh toán và địa chỉ giao hàng - tất cả những điều này được xử lý bằng các biểu mẫu. Đối với các trang web thương mại điện tử, các hình thức được chế tạo tốt có thể tạo ra sự khác biệt.

Theo kinh nghiệm của tôi, việc cải thiện thiết kế của một hình thức thậm chí có thể tăng gấp đôi doanh số của một cửa hàng trực tuyến.

Tôi và tôi rất thích các mẫu thiết kế.

Vì các biểu mẫu là một khía cạnh chức năng của giao diện người dùng, nên có một số quy tắc khi nói đến cách thiết kế chúng. Hôm nay chúng ta sẽ xem xét các mẹo và thực tiễn tốt nhất khi nói đến việc lấy các biểu mẫu để thực hiện tất cả các công việc, vì vậy người dùng không phải làm vậy.

1. Bắt đầu với Đầu vào

Bắt đầu với phần tử biểu mẫu phổ biến nhất: trường nhập văn bản. Nó là thành phần phổ biến nhất của hầu hết các hình thức, vì vậy hãy hiểu đúng và bạn đã đi được nửa đường rồi.

Có 3 yếu tố cơ bản của mọi hình thức nhập: trường văn bản và nhãn và thông báo lỗi. Dù bạn chọn cách nào để thiết kế khối xây dựng cơ bản nhất này, hãy đảm bảo rằng luôn có cách để người dùng biết phần thông tin nào là cần thiết và nếu có lỗi - làm thế nào họ có thể phục hồi từ lỗi đó. Điều này mang lại cho chúng tôi gọn gàng về nơi để đặt nhãn.

Nhãn đi trên đầu trang

Xu hướng đến và đi. Có một xu hướng dựa vào việc sử dụng trình giữ chỗ làm nhãn. Mặc dù sử dụng trình giữ chỗ cho nhãn không nhất thiết là sai, nhưng chúng có một số vấn đề về UX. Vấn đề với điều đó là nếu người dùng chạm vào nó, nhãn sẽ biến mất. Nếu người dùng quay lại biểu mẫu này và đầu vào bị tập trung do lỗi, nhãn cũng sẽ biến mất.

Nhãn cần phải được nhìn thấy mọi lúc. Vì lý do này, nhãn đi đầu.

Tại sao trên cùng và không phải bên trái của trường đầu vào?

Khi nhãn nằm ở bên trái của trường, cái này sẽ cần xếp chồng cái này lên trên cái kia trên thiết bị di động. Hãy nghĩ đến điện thoại di động trước.

hình ảnh từ giphy

Hướng dẫn người dùng nhập thông tin chính xác với trình giữ chỗ và sử dụng nhãn cho mục đích sử dụng của họ.

Đối số khác để đặt các nhãn trên các trường đầu vào của chúng là đầu đọc có một đường thẳng đứng để đọc thông tin, nghiên cứu đã chỉ ra là nhanh hơn so với nhảy từ cột bên trái sang cột bên phải. Vì vậy, làm cho mọi thứ dễ dàng hơn cho người dùng của bạn - một dòng sạch để họ đọc những thứ họ cần nhập để tiến lên với trang web của bạn.

2. Lỗi và cảnh báo

Đối với mỗi trường nhập văn bản tiêu chuẩn, bạn sẽ cần một thông báo lỗi tương ứng. Dưới đây là một số mẹo về thiết kế cho trường hợp lỗi:

Thông báo lỗi có thể đến từ máy khách hoặc máy chủ. Phía khách hàng có thể phát hiện những thứ như khi trường bắt buộc không được điền hoặc khi địa chỉ email có định dạng không chính xác. Phía máy chủ sẽ có thể tìm ra nếu một địa chỉ email hiện đang tồn tại. Biết cái nào là máy khách và cái nào là máy chủ. Các lỗi phía máy khách phải được cung cấp cho người dùng trước khi biểu mẫu được gửi dưới dạng gợi ý. Lỗi phía khách hàng sẽ ngăn người dùng gửi thông tin không chính xác.

Hãy thông minh với các thông báo lỗi.

Khi người dùng mắc lỗi, hãy cung cấp cho họ thông tin về trường nào gây ra lỗi. Để bảo mật, một số nhà phát triển có thể không muốn chỉ định khi đăng nhập cho dù email hoặc mật khẩu bị sai và điều đó hoàn toàn tốt. Nhưng khi người dùng chỉ cần đăng ký email hoặc nhập địa chỉ của họ khi thanh toán, hãy cho họ biết trường nào sai và tại sao.

Mỗi lần bạn thiết kế kiểu nhập văn bản, cũng phải tính đến việc thông báo lỗi sẽ trông như thế nào trước và sau khi người dùng nhấn vào Send Send.

Bao gồm các cảnh báo

Nếu một trường cụ thể yêu cầu một tiêu chí nhất định - ví dụ: mật khẩu cần phải có một số ký tự nhất định và kết hợp cả số và chữ, hãy cho người dùng biết. Bạn có thể bao gồm các cách để hiển thị mật khẩu mạnh như thế nào khi họ nhập mật khẩu. Nó cũng có thể hữu ích để hiển thị nếu một email đã được đăng ký, hoặc tên người dùng đã được sử dụng.

3. Nhóm Thích với Thích

Nhìn trực quan, biểu mẫu sẽ trông gọn gàng hơn khi bạn nhóm thích với lượt thích, nhưng từ quan điểm trải nghiệm người dùng, nó cũng tốt hơn. Hãy suy nghĩ về cách người dùng di động sẽ tương tác với hình thức này. Nếu các trường nhập văn bản cùng nhau, người dùng sẽ phải ở trên bàn phím để hoàn thành các trường.

Nếu bạn đang yêu cầu người dùng chuyển từ các trường nhập văn bản sang thả xuống, sang radio và quay lại các trường nhập văn bản, thì điều này sẽ thay đổi nhiều hơn từ phía người dùng. Hãy suy nghĩ về cách người dùng cầm thiết bị di động của họ và cách điều này có thể giảm ma sát bằng cách nhóm các trường đầu vào tương tự lại với nhau.

4. Nút radio, thả xuống và hộp kiểm

Đôi khi có thể có sự nhầm lẫn khi đến lúc sử dụng các nút radio, thả xuống và hộp kiểm.

Các nút radio là một cách tuyệt vời để hiển thị cho người dùng số lượng câu trả lời thấp. Là người thiết kế, bạn có thể chọn trước một câu trả lời hoặc để trống. Nút radio là lựa chọn tốt nhất khi chỉ có thể chọn một tùy chọn.

Khi có nhiều câu trả lời có thể, việc thả xuống là phù hợp hơn (quy tắc ngón tay cái của tôi là nếu có nhiều hơn 5 hoặc 6). Bạn có thể chọn trước một câu trả lời, hoặc để lại mục trên cùng là Vui lòng chọn Chọn để hướng dẫn người dùng đưa ra lựa chọn.

Hộp kiểm là lựa chọn tốt nhất khi bạn có một hộp duy nhất để đánh dấu (chẳng hạn như các điều khoản và điều kiện) hoặc bạn có nhiều hơn một lựa chọn có thể. Nếu bạn muốn tìm ra email tiếp thị nào để gửi người dùng, một nhóm các hộp kiểm sẽ cho phép bạn thực hiện nhiều lựa chọn.

Sử dụng hộp kiểm thay vì nút radio không nên giới hạn bạn trong các quyết định thiết kế giao diện người dùng của bạn. Là người thiết kế, bạn có rất nhiều sự linh hoạt về cách các yếu tố UI này có thể xuất hiện trên màn hình. Nếu bạn vẫn muốn tạo kiểu hộp kiểm để làm cho chúng trông thú vị hơn, thì điều này không ảnh hưởng đến trải nghiệm người dùng. Thay vì có một danh sách văn bản bên cạnh một vòng tròn nhỏ, bạn có thể làm cho điều này hấp dẫn hơn bằng cách thiết kế các hình ảnh hoặc biểu tượng có thể chọn.

5. Trường hợp có thể, loại bỏ các trường tùy chọn

Nếu mục tiêu kinh doanh là khiến người dùng mua thứ gì đó từ trang web của bạn, thì mục tiêu của bạn là một nhà thiết kế là loại bỏ càng nhiều ma sát càng tốt giữa khách hàng và hệ thống. Loại bỏ các trường không cần thiết sẽ làm cho biểu mẫu xuất hiện như ít hoạt động hơn về phía người dùng.

Điều này rất quan trọng để biết khi thiết kế bất kỳ loại hình thanh toán hoặc địa chỉ giao hàng. Nếu bộ phận tiếp thị muốn tìm hiểu sở thích của khách hàng để họ biết nên gửi email tiếp thị nào, có thể có những cách khác để tìm thông tin này sau khi khách hàng đã mua các mặt hàng của họ (ví dụ: trên trang họ truy cập khi họ xác nhận e-mail").

Luôn tìm cách sáng tạo để chỉ hiển thị số lượng trường tối thiểu. Nếu mục tiêu của bạn là tối ưu hóa để chuyển đổi trên trang web thương mại điện tử, hãy tập trung vào việc giảm thiểu số lượng trường trong các biểu mẫu cho địa chỉ giao hàng và thanh toán. Nếu bạn thiết kế giao diện để đặt chuyến bay, hãy hiển thị cho người dùng số lượng trường tối thiểu họ cần để xem các chuyến bay có sẵn. Khi bạn đã đầu tư người dùng của mình, bạn có thể bắt đầu tìm hiểu thêm thông tin ngoại vi mà họ có thể cần - chẳng hạn như số lượng túi, v.v.

6. Sử dụng Tự động hoàn thành cho các trường dài hơn

Trường tên đường có thể, tùy thuộc vào tên đường, mất nhiều thời gian để nhập - đặc biệt là trên thiết bị di động. Nó có thể khó khăn hơn để gõ chính xác.

Bạn có thể nghĩ về việc kết hợp API Google maps để tự động hoàn thành tên đường phố. Điều này có nghĩa là người dùng chỉ có thể phải nhập một vài ký tự đầu tiên và chọn đúng đường từ danh sách thả xuống của các tên đường có thể. Thậm chí còn có thể tự động điền mã ZIP, chỉ bằng cách đặt tên đường, nhưng chúng ta sẽ thảo luận điều này trong điểm tiếp theo.

7. Sử dụng logic có điều kiện

Có nhiều cách để sử dụng logic để nhập một số thông tin thay mặt người dùng, làm cho cuộc sống của họ dễ dàng hơn một chút.

  • Nếu bạn biết quốc gia người dùng, thiết kế có thể xác định trước các trường bổ sung mà họ có thể cần ('bang' nếu họ ở Hoa Kỳ, 'quận' nếu họ ở Ireland, v.v.)
  • Bạn có thể sử dụng mã bưu điện để điền tên thành phố, tiểu bang hoặc tỉnh.
  • Nếu bạn có quốc gia của họ dựa trên địa chỉ IP, bạn có thể điền mã quốc gia vào trường số điện thoại không?

Nếu bạn sẽ thay mặt người dùng điền vào các trường, hãy luôn cung cấp cho họ cách chỉnh sửa thông tin này. Có thể bạn không đúng.

Ví dụ, bạn có thể sử dụng API Google Maps để lấy tên của đường phố Đức. Khi biết tên đường, bạn cũng có thể lấy mã vùng. Tuy nhiên, một số đường phố ở Đức đủ lớn để trải rộng các mã vùng khác nhau, vì vậy thông tin sẽ bị sai đối với một số ít trường hợp cạnh. Luôn cung cấp cho người dùng tùy chọn chỉnh sửa dữ liệu nếu cần.

Khám phá logic có điều kiện cho mỗi quốc gia trên thế giới sẽ là một khối lượng công việc khổng lồ - vì vậy hãy thông minh với những nỗ lực của bạn. Nhìn vào các quốc gia nơi bạn nhận được nhiều đơn đặt hàng hoặc lưu lượng truy cập nhất và bắt đầu tối ưu hóa cho những quốc gia đầu tiên. Nếu bạn thấy lợi nhuận cao, bạn có thể tiếp tục triển khai logic điều kiện tương tự cho nhiều quốc gia hơn.

8. Nhận thông minh với giữ chỗ

Trước đó chúng tôi đã nói về cách chúng tôi không nên sử dụng trình giữ chỗ làm nhãn trường văn bản, vì nó sẽ biến mất khi người dùng chạm vào nó. Chúng tôi đã không khám phá những cách khác mà giữ chỗ có thể làm cho trải nghiệm người dùng tốt hơn.

Giữ chỗ cung cấp một cơ hội gọn gàng để chỉ cho người dùng cách định dạng thông tin của họ. Số điện thoại là một ví dụ tuyệt vời. Người dùng nên bao gồm mã quốc gia của họ? Hoặc mã vùng?

Khi bạn cần một số điện thoại ở một định dạng nhất định hoặc số thẻ tín dụng để bao gồm dấu gạch ngang, bạn có thể thông báo cho người dùng thông tin này bằng cách cung cấp một ví dụ trong trình giữ chỗ. Đây là một cách tuyệt vời để giảm thiểu các lỗi bằng cách nêu rõ rằng bạn cần mã quốc gia, v.v.

9. Giao tiếp rõ ràng Bước tiếp theo

Làm cho các nút của bạn hoạt động thêm giờ bằng cách truyền đạt những gì sẽ xảy ra tiếp theo. Nếu có thêm một bước để hoàn thành, hãy làm cho người dùng biết điều này.

Thay vì sử dụng dịch vụ của Next Next hoặc hoặc Checkout Checkout, bạn có thể nói rằng Đánh giá đơn hàng Đánh giá trực tuyến hoặc thanh toán ngay bây giờ với Paypal. Thêm một cấp độ giao tiếp khác bằng cách nói cụ thể cho người dùng biết điều gì sẽ xảy ra khi họ chạm vào nó. Nút này sẽ hoàn thành đơn hàng của họ, hoặc họ sẽ có thời gian để xem xét nó? Họ sẽ được đưa đến đăng nhập Paypal?

Luôn tìm cách để làm cho người dùng cảm thấy thoải mái trong quá trình trải nghiệm, đặc biệt nếu nó ảnh hưởng đến số dư ngân hàng của họ.

Tôi vẫn cảm thấy lo lắng mỗi khi tôi sử dụng thanh toán Amazon vì họ không cho tôi biết toàn bộ số tiền bao gồm cả phí vận chuyển cho đến bước cuối cùng. Hãy minh bạch với người dùng của bạn. Thúc đẩy niềm tin bằng cách cung cấp cho họ thông tin họ cần ở mỗi bước và giải thích rõ ràng những gì mong đợi khi họ thực hiện lời kêu gọi hành động.

10. Tiếp tục tìm cách tối ưu hóa

Khi bạn khởi chạy biểu mẫu mới sáng sủa của mình - hãy tiếp tục xem các phân tích. Nếu bạn tìm thấy một số lượng lớn người bị trả lại khi họ nhìn thấy nó, hãy tìm hiểu lý do tại sao. Thực hiện kiểm tra người dùng để xem nơi người dùng của bạn cảm thấy không thoải mái và làm việc để loại bỏ ma sát đó. Là một nhà thiết kế, thường thì công việc của chúng tôi không bao giờ thực sự 'hoàn thành'.

Tóm lại là

Các hình thức đôi khi không phải là một điều rất thú vị để thiết kế, nhưng khi được thực hiện tốt, chúng có thể tạo ra sự khác biệt lớn đối với trải nghiệm người dùng của một trang web hoặc ứng dụng. Thiết kế biểu mẫu của bạn để làm việc chăm chỉ hơn để người dùng không phải làm vậy.

Giao tiếp rõ ràng về lời kêu gọi hành động, đưa ra gợi ý cho người dùng thông qua các cảnh báo và giữ chỗ và cung cấp tự động hoàn tất. Luôn tìm kiếm những cách mới để thực hiện nhiều thao tác nâng vật nặng hơn, vì vậy người dùng có trải nghiệm không ma sát.