Đăng nhập mẫu đơn là một phần tương tác của web hoặc các trình ứng dụng. Rất nhiều mẫu đơn có một số hiệu ứng nhẹ 3D, trong khi các mẫu đơn khác chỉ gồm các trường nhập dự liệu đơn giản.

 

 

 

4. Form có tính tương tác

Đăng nhập mẫu đơn là một phần tương tác của web hoặc các trình ứng dụng. Rất nhiều mẫu đơn có một số hiệu ứng nhẹ 3D, trong khi các mẫu đơn khác chỉ gồm các trường nhập dự liệu đơn giản.

 

Một yếu tố quan trọng của tính tương tác là mong đợi và thu nhận sự phản hồi. Hãy chắc chắn rằng mẫu đơn của bạn phản hồi được những dữ liệu đăng nhập bằng cách chỉ rõ những trạng thái đang muốn focus và thay đổi trạng thái chuột ngay khi đăng nhập dữ liệu.

 

4.1 GROOVESHARK VIP

 

Trang Grooveshark có kiểu thiết kế tập trung và làm rõ các yếu tố đang tương tác. Bên cạnh đó, phần báo lỗi được hiển thị ngay khi bạn kết thúc nhập thông tin ở mỗi ô.

 

Kiểu thiết kế này giúp người dùng tập trung điền mẫu đơn, sau đó sẽ chuyển qua những phần đăng nhập khác. Điều làm cho loại form này trở này khá thú vị là người dùng sẽ thấy được sự tương tác của form ngay khi họ click vào những trường đăng nhập khác.

 

 

 

 

 

4.2 UNLOCKING

 

Form check out của Unlocking là một ví dụ của một thiết kế đơn giản. Các trường đăng nhập trông rất gọn, khi rê chuột vào vùng đăng nhập, trạng thái ở vùng đăng nhập thay đổi màu giúp người dùng tập trung điền thông tin. Bên cạnh một số trường đăng nhập còn có những lời chú thích.

 

 

 

5. Dòng lệnh kết thúc nội dung form

Một form hiệu quả là một form giúp người dùng thấy được dòng lệnh kết thúc. Nó có thể là nút nhấn “Submit”, một nút xác nhận hoặc là nút “sign-up”.

 

Hãy chắc chắn rằng dòng lệnh ở cuối mẫu đơn được in đậm và thiết kế rõ ràng. Dòng lệnh này có thể là “send email” “Finish signing up” giúp người dùng biết được chính xác nút này sẽ làm nhiệm vụ gì.

 

5.1 SQUARESPACE

 

Form ở trang Squarespace thiết kế khá hiệu quả bởi việc tạo ra sự tương phản màu nền và màu ở trường nhập giữ liệu. Nút xanh đặt bên dưới giúp người dùng tập trung vào việc hoàn thành form đăng ký và kết thúc bằng lệnh “create your website”.

 

Các trường đăng nhập được thiết kế có nhiều khoảng trống lớn giúp người dùng dễ đăng nhập.

 

 

 

 

 

5.2 BLITZ

 

BLITZ có một giải pháp mới trong mẫu đơn liên hệ. Phần bên trái mẫu đơn có ba loại mẫu đơn liên hệ khác nhau: tìm hiểu về doanh nghiệp (Inquire about business), nói”hi” (just say Hi), nộp hồ sơ (CV submission).

 

Ba mẫu đơn này được thiết kế tương tự nhau nhưng nó chỉ khác một số nội dung. Ở đây nhà thiết kế dùng viền đỏ cho các trường đăng nhập sẽ gây nhầm lẫn cho người dùng vì họ sẽ hiểu nhầm đây với các mục thông báo lỗi.

 

 

 

 

 

5.3 CUSTOM BAGS HQ

 

Custom Bags HQ cố gắng kết hợp nhiều loại nội dung trong cùng một bối cảnh. Bên trái bao gồm mục “Contact” và “About us”. Mục “About us” không thực sự giảm đi hay năng cao kinh nghiệm người dùng.

 

Link “About us” này đặt ở đây có vẻ không ổn, ít nhất là ở lần nhìn đầu tiên. Một ý tưởng thú vị: mẫu đơn chứa một hộp checkbook bên dưới hỏi người dùng liệu họ có muốn nhận bản tin thông qua email không. Điều này giúp công ty gởi thông báo đến khách hàng thường xuyên hơn.

 

 

 

6. Form được đặt tên nhãn rõ ràng

Bất cứ sự tương tác nào mà chúng ta khuyến khích làm là ko được đe dọa đến người khác. Đôi khi chúng ta yêu cầu người sử dụng cung cấp thông tin, tuy nhiên họ không chịu cung cấp thông tin.

 

Bước đầu tiên để tránh thất vọng và nhầm lẫn là chúng ta phải dùng ngôn ngữ đơn giản, dễ hiểu, không hoa hòe.

 

6.1 FOUNDATION SIX

 

Foundation Six được đặt tên nhãn khá hiệu quả bởi vì sự sắp xếp quy trình hợp lý và đơn giản hóa những cam kết với người dùng. Nút “Submit” bên dưới khá đơn giản và rõ ràng, không gây nhầm lẫn cho người dùng.

 

Một điểm mạnh của mẫu đơn này là có sự cân bằng giữa các mục có nhiều lựa chọn và các ô điền thông tin.

 

 

 

 

 

6.2 BÄRNT&ÄRNST

 

Bärnt&Ärnst là những nhà thiết kế theo phong cách tối giản, mẫu đơn của trang web này chỉ cung cấp địa chỉ, điện thoại, email và phần viết nội dung của người dùng. Thường thì bạn không cần đòi hỏi nhiều thông tin từ người dùng ở các email ban đầu.

 

 

 

 

 

6.3 STUCK AXIOM

 

Các nhãn trong mẫu đơn Stuck Axiom ngắn gọn và súc tích. Phần câu chú thích “Let us know how you found us, how we can help, and the best way to find you” rõ ràng giúp người dùng dễ dàng hiểu và điền nội dung nhanh chóng.

 

Mẫu đơn dùng viền màu xám ở các trường đăng nhập, nút “submit” dùng màu đỏ (màu của logo công ty) giúp người dùng dễ dàng nhấp chuột ngay sau khi hoàn thành xong nội dung mẫu đơn.

 

 

 

 

 

6.4 SOLID GIANT

 

Với cách ghi nhãn rõ ràng, không quá nhiều tùy chọn hộp checkbox, Solid Giant có thể có được một lượng lớn khách hàng tiềm năng với những yêu cầu cụ thể như: thời gian dự định hoàn thành xong dự án, dịch vụ cung cấp, số tiền đầu tư cho dự án.

 

Nút “Submit” thiết kế đơn giản rõ ràng, đánh dấu kết thúc một đường dẫn trực quan thông qua mẫu đơn. Tất cả các thông tin được mô tả cẩn thận, không gây hiểu nhầm cho người dùng.

 

 

 

 

 

6.5 JOEY RABBITT

 

Mẫu đơn của Joye Rabitt có phần gõ nội dụng chỉ nằm trong khoảng 500 ký tự. Tuy nhiên nếu người dùng muốn gởi mail trực tiếp cho Joey, ở phía bên phải trang có địa chỉ email. Joey cũng cũng cấp những network mà anh ta đang tham gia cũng như địa chỉ làm việc.

 

 

 

 

 

7. Form bao gồm mục có nhiều chọn lựa và mục điền thông tin

Lựa chọn một câu trả lời từ nhiều chọn lựa dễ dàng hơn là mục điền thông tin. Mục điền thông tin đôi khi lại xuất hiện nhiều câu hỏi hơn là câu trả lời, đặc biệt là nếu việc ghi nhãn không rõ ràng và có quá nhiều ô để trống. Người dùng sẽ bị nhầm lẫn bởi các định dạng, loại thông tin yêu cầu và độ chính xác câu trả lời. 

 

Nói chung, mục chọn một trong nhiều chọn lựa thì tốt hơn là mục điền thông tin, đặc biệt là với thông tin làm cho người dùng bối rối như: phạm vi, ngân sách, loại dự án,vvv….

 

Đây chính là lý do tại sao những mẫu đơn đặt hàng thường không yêu cầu bạn phải điền tất cả các mảnh thông tin.

 

7.1 PIEONEERS

 

Pieoneers đặt những trường nhập thông tin chung chung ở cột bên trái trang. Bên phải trang bao gồm những câu hỏi phức tạp hơn được thiết kế theo dạng drop-down như bên dưới, cho phép bạn chọn lựa một trong những option, vì thế không làm cho người dùng lung túng hay do dự vì ít nhất họ sẽ chọn được một câu trả lời phù hợp.

 

 

 

 

 

7.2 INFORMATION HIGHWAYMAN

 

Thông tin Highwayman khéo léo kết hợp mục có nhiều chọn lựa và những mục điền thông tin. Các trường đăng nhập thông tin khá đơn giản bao gồm: tên, địa chỉ email, nhận xét. Những câu hỏi liên quan đến dịch vụ tìm kiếm và ngân sách khá phức tạp. Vì vậy, việc đưa ra những chọn lựa làm đơn giản hóa vấn đề và giải thích cho những gì mà bạn đang muốn hỏi.

 

 

 

 

 

7.3 FACIO DESIGN

 

Loại mẫu đơn của Facio Design‘s có lẽ là loại form khó nhất trong bài viết này, và đúng là như vậy. Việc lựa chọn typeface và kích thước font không hiệu quả vì nó rất khó đọc, đặc biệt là trong Window.

 

Nhà thiết kế này cố gắng bắt chước tạo ra dạng thư viết tay, nhưng ở đây không mang lại kết quả. Có lẽ nếu thiết kế theo một kiểu form đơn giản thì sẽ tốt hơn so với loại form này.

 

Cần lưu ý rằng tuy theo những trường hợp cụ thể, tính thẩm mỹ không hỗ trợ cho chức năng của mẫu đơn.

 

 

 

Kết luận:

Bài viết này bao gồm một vài ví dụ đơn giản giúp bạn thiết kế một dạng web form đẹp. Cần nhớ rằng nên dùng thêm nhiều thời gian cho việc thiết kế những trang web tiếp theo của bạn.

 

Bài viết này có nhiều phương pháp không khó thực hiện và nó có thể dẫn tới việc chuyển đổi cao hơn, nhưng chúng ta thường bỏ quên. Chúng ta thường dùng nhiều thời gian để mở một cánh cửa mà chúng ta quên làm cho cánh cửa được chào đón và hữu ích như chính đường dẫn của nó.

 

 

Bài dịch của bạn Anh Tra Nguyen Kim – Industrial Design Engineering – Korea University of Technology and Education. Nguồn SmashingMagazine.

 

 

Comments

comments