10 điều mọi nhà thiết kế cần biết về biểu mẫu

Tác Giả: Lewis Jackson
Ngày Sáng TạO: 6 Có Thể 2021
CậP NhậT Ngày Tháng: 15 Có Thể 2024
Anonim
10 kỹ năng quan trọng trong Excel nhất định bạn phải biết
Băng Hình: 10 kỹ năng quan trọng trong Excel nhất định bạn phải biết

NộI Dung

Biểu mẫu, không có gì nhiều nhà thiết kế ghét hơn biểu mẫu. Họ không nhất thiết phải phát huy hết khả năng sáng tạo hay sao? Có lẽ đã đến lúc chúng ta xem xét lại biểu mẫu và hiểu rằng biểu mẫu, về cơ bản nhất, là cuộc trò chuyện giữa người dùng và phần mềm.

Quên điểm và nhấp chuột, biểu mẫu đại diện cho sự tương tác phong phú nhất mà chúng ta với tư cách là nhà thiết kế kỹ thuật số sẽ phải đối mặt. Lần tới khi một biểu mẫu xuất hiện theo cách của bạn, đừng nghĩ rằng vấn đề chỉ là áp dụng một số hiệu ứng CSS đẹp mắt hoặc thêm một đoạn jQuery đẹp mắt. Có nhiều chiều sâu hơn để thiết kế biểu mẫu.

Tôi đã người dùng thử nghiệm hàng trăm biểu mẫu và thiết kế một số biểu mẫu phức tạp cho các công ty bảo hiểm, tương tác đặt phòng kỳ nghỉ và nhiều biểu mẫu khác. Rất có thể bạn đã sử dụng một trong các biểu mẫu của tôi trong vài tháng qua.

Đây là những bài học mà tôi ước mình đã học được trước khi bắt đầu thiết kế biểu mẫu.

1. Không đánh dấu các trường bắt buộc

Bạn biết dấu hoa thị nhỏ biểu thị một trường bắt buộc? Tôi đã thấy lỗi đó nhiều lần trong quá trình kiểm tra người dùng. Theo khái niệm, các trường bắt buộc không có nhiều ý nghĩa, chúng không có giá trị tương đương ngoại tuyến. Chúng tuyệt vời cho các nhà phát triển vì chúng cung cấp một cách tiếp cận màu đen và trắng đẹp để hoàn thành. Trường bắt buộc và dấu hoa thị không thành công vì đó là một hành vi đã học. Hành vi điển hình mà tôi đã thấy trong thử nghiệm người dùng là người dùng hoàn thành biểu mẫu ở trên cùng và hoàn thành khi có điều gì đó ngăn họ hoặc họ nhấn nút.


Giải pháp rất đơn giản, hãy đánh dấu các trường tùy chọn, đánh dấu nơi mà người dùng tốt của chúng ta phải dừng lại và suy nghĩ xem họ có cần hoàn thành trường đó hay không.

2. Không sử dụng máy quay

HTML5 thật tuyệt vời phải không? Nó cung cấp vô số công cụ sáng bóng mới thú vị để chơi cùng. Chúng ta cần suy nghĩ về sự phù hợp của đồ chơi mới của chúng ta. Trường số hiện bao gồm ít mũi tên lên và xuống để cho phép người dùng chuyển qua các số.

Có hai vấn đề ở đây. Thứ nhất, trình duyệt mặc định hiển thị các mũi tên làm cho chúng thực sự nhỏ. Rất khó nhấp chuột và những ngón tay mập mạp trong chúng ta sẽ phải vật lộn trên một chiếc iPhone. Nó được gọi là Fitt’s Law, cái gì càng nhỏ thì càng khó nhấp vào nó.

Nhưng tôi nghe thấy bạn hét lên, bạn chỉ cần nhập số trực tiếp vào trường số. Có, bạn có thể, nhưng hãy nhìn vào màn hình trình duyệt, các mũi tên xoay lên / xuống giống với người bạn đáng tin cậy của chúng ta trong hộp chọn. Người dùng được giới thiệu lần đầu tiên với một con quay sẽ cho rằng nó giống như một hộp chọn lọc, mà họ không thể nhập vào nó.


Lời khuyên của tôi là hãy chuyển hướng rõ ràng cho đến khi chúng trở nên phổ biến hơn hoặc các nhà phát triển trình duyệt sắp xếp thiết kế mặc định ra ngoài.

3. Chỉ có một loại nút hoặc tốt hơn vẫn chỉ có một nút cho mỗi biểu mẫu

Có một nguyên tắc tâm lý học ít được biết đến được gọi là Luật Hick. Hick’s Law cho biết chúng tôi càng được cung cấp nhiều lựa chọn thì càng khó đưa ra lựa chọn. Tôi biết không phải khoa học tên lửa, mà là một quy tắc đáng ghi nhớ.

Bạn có thể giúp người dùng tốt của mình bằng cách giúp họ đưa ra lựa chọn. Bằng cách làm cho tất cả các nút chính có một màu và chỉ có một trong số chúng trên mỗi trang giúp lựa chọn dễ dàng hơn. Nút nào tôi nên nhấn? Ồ, thật dễ dàng, đó là một chiếc màu lớn.

4. Trường phân đoạn

Tôi đã nghiên cứu khoa học thần kinh trong một kiếp trước và vì vậy đã nghiên cứu tâm lý của trí nhớ - cụ thể là trí nhớ ngắn hạn hoặc trí nhớ làm việc. Bây giờ trước khi bạn nói điều đó; không, dung lượng bộ nhớ ngắn hạn không phải là 7 +/- 2, 4 +/- 1 hoặc ở con người có thể nói ba đến năm phần. Chúng ta là con người rất giỏi trong việc đánh giá các kích thích thị giác, hạn chế là chúng ta giỏi hơn khi số lượng càng nhỏ. Chia nhỏ biểu mẫu thành các nhóm nhỏ hơn giúp việc đánh giá dễ dàng hơn, vì thông thường những gì người dùng phải nhập vào biểu mẫu đến từ trí nhớ của họ.


Đảm bảo rằng các nhóm trường của bạn có độ dài khoảng bốn trường.

5. Nghĩ tại sao bạn hỏi điều gì đó và cảm giác của nó đối với người dùng

Đây có lẽ là lời khuyên thẳng thắn nhất mà tôi đưa ra nhưng thường ít được sử dụng nhất.

Hãy thực hiện những điều sau:

Câu hỏi mọi câu hỏi bạn hỏi. Có cần thiết không? Bạn cảm thấy thế nào khi được hỏi điều này?

Thông thường, doanh nghiệp cần đặt câu hỏi và chúng tôi với tư cách là nhà thiết kế có thể tranh luận về sự cần thiết cho đến khi chúng tôi xanh mặt. Câu hỏi phải được hỏi. Khi hiểu được nhu cầu kinh doanh đối với dữ liệu này, chúng tôi thường có thể thỏa hiệp.

Chúng tôi có thể trợ giúp bằng cách cho người dùng tốt của chúng tôi biết lý do tại sao chúng tôi cần đặt câu hỏi đó. Đảm bảo về việc sử dụng và chia sẻ dữ liệu đó và nói chung là tốt.

Lấy ví dụ của chúng tôi một lần nữa:

Đó vẫn là một câu hỏi hóc búa nhưng hy vọng chúng ta đã làm ngọt viên thuốc.

6. Ngày là những cô gái nhỏ bé bỏng

Bước vào cuộc hẹn hò có thể là một thách thức thực sự và bạn có thể tránh được một số cạm bẫy. Vấn đề lớn nhất duy nhất là xử lý lỗi.

Cách tiếp cận đơn giản nhất là khởi chạy lịch. Điều đáng chú ý là các tuần bắt đầu vào Thứ Hai ở Vương quốc Anh và Chủ Nhật ở Hoa Kỳ. Nếu người dùng của bạn không tập trung, họ có thể chọn Chủ nhật khi họ muốn nói là Thứ Hai.

Cũng cần đề cập đến các định dạng ngày quốc tế. Hoa Kỳ đặt tháng đầu tiên, ở Nhật Bản là năm đầu tiên. Vì vậy, một ngày như 4/5/12 có thể được hiểu theo ba cách.

Đó là lý do tại sao tốt nhất là sử dụng các hộp chọn lọc.

7. Hình thức như thủ công của nhà phát triển

Biểu mẫu là thủ công cho các nhà phát triển cũng như các nhà thiết kế. Hiểu được những sai lầm có thể mắc phải khi nhập dữ liệu và thiết kế mã back-end của bạn để đối phó là một thách thức.

Đây là một đơn giản. Nhập giá trị tiền tệ. Những sai lầm mà người dùng có thể mắc phải là rất lớn. Việc buộc phải đáp ứng các định dạng dữ liệu mà người dùng phải đáp ứng là điều khó chịu đối với người dùng của bạn và hãy đối mặt với điều đó, phía nhà phát triển có một chút lười biếng.

Thử thách nào tốt hơn cho một nhà phát triển so với việc xây dựng một biểu mẫu chống đạn.

8. Không sử dụng cột trong biểu mẫu

Vấn đề lớn trong việc sử dụng các cột trong biểu mẫu là dòng chảy. Chúng tôi bắt đầu một biểu mẫu ở trên cùng và kết thúc ở dưới cùng. Trong việc giới thiệu các cột, luồng của biểu mẫu có thể bị phá vỡ.

Đừng cho rằng người dùng lướt qua các biểu mẫu và do đó, tiêu điểm là cách điều hướng biểu mẫu trong các cột. Thật hiếm khi tôi thấy điều đó trong thử nghiệm của người dùng. Hầu hết thời gian chúng ta thấy nhập thông tin chi tiết, hãy nhấp chuột / bàn di chuột / ngón tay vào trường tiếp theo, sau đó nhập thông tin chi tiết, v.v.

9. Không sử dụng hai trường khi một trường sẽ làm

Hầu hết mọi người không phải là người đánh máy cảm ứng. Trong thử nghiệm người dùng, chúng tôi thấy mọi người nhìn vào bàn phím khi họ nhập.

Khi nhập số điện thoại tách trường biểu mẫu, hãy nói thêm mã vùng và số, sẽ gây ra các vấn đề thực sự. Người dùng không thấy hoặc thực sự nhớ rằng có hai trường, vì vậy hãy nhập số đầy đủ vào trường đầu tiên, tệ hơn nếu trường bị giới hạn ở một số ký tự nhất định.

Chỉ sử dụng một trường cho số điện thoại, điều này cũng đúng cho số nhà / đường phố - chỉ sử dụng một hộp nhập văn bản.

10. Hãy tử tế

Bạn sẽ ngạc nhiên về số lượng thông báo lỗi khá thô lỗ hiện có.

Đây là một ví dụ về một ví dụ mà tôi đã xem gần đây.

Thực tế là họ đang gợi ý rằng bạn sẵn sàng nhập một cuộc hẹn hò trong tương lai và sau đó là một câu trả lời khá khó chịu, tốt, điều đó không được tốt đẹp cho lắm.

Một lần nữa hãy đặt mình vào vị trí của người dùng, bạn sẽ cảm thấy thế nào khi gặp lỗi này? Bực mình? Thậm chí có thể tệ hơn. Tốt là dễ dàng.

Tôi đã sản xuất một tờ giấy ghi sổ ghi chép / giường cũi có thể tải xuống để giúp bạn thiết kế các biểu mẫu tốt hơn. Nó bao gồm nhiều cách thực hành tốt nhất khác để thiết kế các biểu mẫu tốt hơn.

Chia Sẻ
MapBox: đối thủ mã nguồn mở của Google Maps
Hơn NữA

MapBox: đối thủ mã nguồn mở của Google Maps

MapBox là một trang web tuyệt vời để thiết kế và xuất bản bản đồ. Nó cung cấp các công cụ khác nhau để tạo kiểu và triển khai chúng cũng như cung cấp dịch vụ lư...
Các bang của Mỹ được tái tạo trong cát và muối
Hơn NữA

Các bang của Mỹ được tái tạo trong cát và muối

Chúng tôi yêu Kyle Bean tại Creative Bloq. Được biết đến với những áng tạo thực ự độc đáo và ấn tượng của anh ấy, chúng tôi luôn hào hứng khi xem nhữn...
6 điều mới mà mọi nhà thiết kế web nên sở hữu
Hơn NữA

6 điều mới mà mọi nhà thiết kế web nên sở hữu

Có một ít tiền đốt một lỗ trong túi của bạn? au một ngày vất vả vật lộn với thiết kế web đáp ứng và các chủ đề Drupal, thật tuyệt khi tự thưởng cho mình điều đ&...