Thiết kế trang web: 10 nguyên tắc thiết kế web tốt

Khả năng sử dụng và tiện ích, chứ không phải thiết kế trực quan, quyết định sự thành công hay thất bại của một trang web. Vì khách truy cập trang là người duy nhất nhấp chuột và do đó quyết định mọi thứ, nên thiết kế lấy người dùng làm trung tâm đã được thiết lập như một phương pháp tiêu chuẩn để thiết kế web thành công và hướng đến lợi nhuận. Rốt cuộc, nếu người dùng không thể sử dụng một tính năng, thì nó cũng có thể không tồn tại.

Khả năng sử dụng và tiện ích, chứ không phải thiết kế trực quan, quyết định sự thành công hay thất bại của một trang web. Vì khách truy cập trang là người duy nhất nhấp chuột và do đó quyết định mọi thứ, thiết kế lấy người dùng làm trung tâm đã trở thành một cách tiếp cận tiêu chuẩn để thiết kế web thành công và hướng đến lợi nhuận. Rốt cuộc, nếu người dùng không thể sử dụng một tính năng, thì nó cũng có thể không tồn tại.

Chúng tôi sẽ không thảo luận về các chi tiết triển khai thiết kế (ví dụ: hộp tìm kiếm nên được đặt ở đâu) vì nó đã được thực hiện trong một số bài báo; thay vào đó, chúng tôi tập trung vào các nguyên tắc chính, phương pháp phỏng đoán và phương pháp tiếp cận để thiết kế web hiệu quả — phương pháp tiếp cận nếu được sử dụng đúng cách có thể dẫn đến các quyết định thiết kế tinh vi hơn và đơn giản hóa quá trình nhận biết thông tin được trình bày.
Nguyên Tắc Thiết Kế Website Tốt Và Hướng Dẫn Thiết Kế Web Hiệu Quả Để sử dụng các nguyên tắc một cách đúng đắn, trước tiên chúng tôi cần hiểu cách người dùng tương tác với các trang web, cách họ suy nghĩ và các mẫu hành vi cơ bản của người dùng là gì.

Người dùng nghĩ như thế nào?

Về cơ bản, thói quen của người dùng trên Web không khác nhiều so với thói quen của khách hàng trong cửa hàng. Khách truy cập lướt qua từng trang mới, quét một số văn bản và nhấp vào liên kết đầu tiên thu hút sự quan tâm của họ hoặc hơi giống với thứ họ đang tìm kiếm. Trên thực tế, có nhiều phần của trang mà họ thậm chí không nhìn vào.

Hầu hết người dùng tìm kiếm thứ gì đó thú vị (hoặc hữu ích) và có thể nhấp được; ngay khi một số ứng cử viên triển vọng được tìm thấy, người dùng sẽ nhấp vào. Nếu trang mới không đáp ứng mong đợi của người dùng, nút Quay lại sẽ được nhấp và quá trình tìm kiếm được tiếp tục.
Thiết kế website

Người dùng không đọc, họ quét. Lưu ý cách các khu vực "nóng" đột ngột ở giữa các câu. Đây là điển hình cho quá trình quét. Người dùng web

1. Đừng khiến người dùng nghĩ

Theo quy luật về khả năng sử dụng đầu tiên của Krug, trang web phải rõ ràng và dễ hiểu. Khi bạn đang tạo một trang web, công việc của bạn là loại bỏ các dấu hỏi — những quyết định mà người dùng cần đưa ra một cách có ý thức, cân nhắc ưu, nhược điểm và các lựa chọn thay thế.

Nếu điều hướng và cấu trúc trang web không trực quan, số lượng dấu hỏi sẽ tăng lên và khiến người dùng khó hiểu cách thức hoạt động của hệ thống và cách đi từ điểm A đến điểm B. Cấu trúc rõ ràng, đầu mối trực quan vừa phải và dễ nhận biết các liên kết có thể giúp người dùng tìm đường đến mục tiêu của họ.

Hãy xem một ví dụ. Beyondis.co.uk tuyên bố là “ngoài kênh, ngoài sản phẩm, ngoài phân phối”. Nó có nghĩa là gì? Vì người dùng có xu hướng khám phá các trang web theo mẫu “F”, nên ba câu lệnh này sẽ là những yếu tố đầu tiên mà người dùng sẽ thấy trên trang sau khi trang được tải.

Mặc dù bản thân thiết kế rất đơn giản và trực quan, nhưng để hiểu trang nói về nội dung gì, người dùng cần tìm kiếm câu trả lời. Đây là một dấu hỏi không cần thiết là gì. Nhiệm vụ của nhà thiết kế là đảm bảo rằng số lượng dấu chấm hỏi gần bằng 0. Phần giải thích trực quan được đặt ở phía bên tay phải. Chỉ cần trao đổi cả hai khối sẽ tăng khả năng sử dụng.

ExpressionEngine sử dụng cấu trúc giống như Beyondis, nhưng tránh các dấu chấm hỏi không cần thiết. Hơn nữa, khẩu hiệu trở nên hữu dụng khi người dùng được cung cấp các tùy chọn để dùng thử dịch vụ và tải xuống phiên bản miễn phí.

Bằng cách giảm tải nhận thức, bạn giúp khách truy cập nắm bắt ý tưởng đằng sau hệ thống dễ dàng hơn. Khi bạn đã đạt được điều này, bạn có thể truyền đạt lý do tại sao hệ thống này hữu ích và cách người dùng có thể hưởng lợi từ nó. Mọi người sẽ không sử dụng trang web của bạn nếu họ không thể tìm thấy đường đi xung quanh nó.

2. Đừng lãng phí sự kiên nhẫn của người dùng dành cho website

Trong mọi dự án khi bạn định cung cấp cho khách truy cập một số dịch vụ hoặc công cụ, hãy cố gắng giữ cho các yêu cầu người dùng của bạn ở mức tối thiểu. Người dùng càng ít phải thực hiện hành động nào để kiểm tra dịch vụ thì càng có nhiều khả năng một khách truy cập ngẫu nhiên sẽ thực sự dùng thử dịch vụ đó.

Những khách truy cập lần đầu sẵn sàng chơi với dịch vụ, không điền vào các biểu mẫu web dài cho một tài khoản mà họ có thể không bao giờ sử dụng trong tương lai. Cho phép người dùng khám phá trang web và khám phá các dịch vụ của bạn mà không buộc họ phải chia sẻ dữ liệu riêng tư. Không hợp lý khi buộc người dùng nhập địa chỉ email để kiểm tra tính năng này.

Như Ryan Singer — nhà phát triển của nhóm 37Signals — tuyên bố, người dùng có thể sẽ sẵn lòng cung cấp địa chỉ email nếu họ được yêu cầu sau khi họ thấy tính năng này hoạt động, vì vậy họ có một số ý tưởng về những gì họ sẽ nhận được đổi lại.

Rõ ràng, Mite đòi hỏi nhiều hơn. Tuy nhiên, việc đăng ký có thể được thực hiện trong vòng chưa đầy 30 giây — vì biểu mẫu có hướng nằm ngang nên người dùng thậm chí không cần phải cuộn trang.

Lý tưởng nhất là loại bỏ mọi rào cản, không yêu cầu đăng ký hoặc đăng ký trước. Chỉ riêng việc đăng ký người dùng đã đủ gây trở ngại cho việc điều hướng của người dùng để cắt giảm lưu lượng truy cập đến.

3. Quản lý để tập trung sự chú ý của người dùng

Vì các trang web cung cấp cả nội dung tĩnh và động nên một số khía cạnh của giao diện người dùng thu hút sự chú ý nhiều hơn những khía cạnh khác. Rõ ràng, hình ảnh bắt mắt hơn văn bản — giống như các câu được đánh dấu đậm sẽ hấp dẫn hơn văn bản thuần túy.

Mắt người là một thiết bị phi tuyến tính cao và người dùng web có thể nhận ra ngay các cạnh, mẫu và chuyển động. Đây là lý do tại sao các quảng cáo dựa trên video cực kỳ khó chịu và mất tập trung, nhưng từ góc độ tiếp thị, chúng hoàn thành xuất sắc nhiệm vụ thu hút sự chú ý của người dùng.

Nhân bản sử dụng hoàn hảo nguyên tắc tiêu điểm. Yếu tố duy nhất mà người dùng có thể nhìn thấy trực tiếp là từ “miễn phí”, từ này có tác dụng hấp dẫn và thu hút, nhưng vẫn bình tĩnh và thuần túy cung cấp thông tin. Những gợi ý tinh tế cung cấp cho người dùng đủ thông tin về cách tìm hiểu thêm về sản phẩm “miễn phí”.

Tập trung sự chú ý của người dùng vào các khu vực cụ thể của trang web với việc sử dụng vừa phải các yếu tố hình ảnh có thể giúp khách truy cập của bạn đi từ điểm A đến điểm B mà không cần suy nghĩ về cách thực hiện. Khách truy cập càng có ít dấu hỏi, họ càng có định hướng tốt hơn và họ càng có thể tin tưởng hơn vào công ty mà trang web đại diện. Nói cách khác: càng ít phải suy nghĩ đằng sau hậu trường thì trải nghiệm người dùng càng tốt, đó là mục tiêu của khả năng sử dụng ngay từ đầu.


4. Phấn đấu để được tiếp xúc với tính năng

Các thiết kế web hiện đại thường bị chỉ trích do cách tiếp cận hướng dẫn người dùng bằng các bước thực hiện 1-2-3 hấp dẫn trực quan, các nút lớn với hiệu ứng hình ảnh, v.v. Nhưng từ góc độ thiết kế, những yếu tố này thực sự không phải là điều xấu. Ngược lại, những hướng dẫn như vậy cực kỳ hiệu quả vì chúng dẫn dắt khách truy cập thông qua nội dung trang web theo cách rất đơn giản và thân thiện với người dùng.

Dibusoft kết hợp sự hấp dẫn trực quan với cấu trúc trang web rõ ràng. Trang web có 9 tùy chọn điều hướng chính có thể nhìn thấy ngay từ cái nhìn đầu tiên. Tuy nhiên, sự lựa chọn màu sắc có thể quá nhạt.

Để người dùng thấy rõ những chức năng nào có sẵn là nguyên tắc cơ bản của thiết kế giao diện người dùng thành công. Nó không thực sự quan trọng làm thế nào đạt được điều này. Điều quan trọng là nội dung được hiểu rõ và khách truy cập cảm thấy thoải mái với cách họ tương tác với hệ thống.

5. Tận Dụng Cách Viết Hiệu Quả

Vì Web khác với in ấn nên cần phải điều chỉnh phong cách viết cho phù hợp với sở thích và thói quen duyệt web của người dùng. Viết quảng cáo sẽ không được đọc. Các khối văn bản dài không có hình ảnh và từ khóa được đánh dấu in đậm hoặc in nghiêng sẽ bị bỏ qua. Ngôn ngữ phóng đại sẽ bị bỏ qua.

Nói chuyện kinh doanh. Tránh những cái tên dễ thương hoặc thông minh, tên do tiếp thị tạo ra, tên dành riêng cho công ty và tên kỹ thuật không quen thuộc. Chẳng hạn, nếu bạn mô tả một dịch vụ và muốn người dùng tạo tài khoản, thì “đăng ký” sẽ tốt hơn là “bắt đầu ngay bây giờ!” một lần nữa tốt hơn so với "khám phá các dịch vụ của chúng tôi".

Một giải pháp tối ưu để viết hiệu quả là

6. Phấn đấu cho website đơn giản

Nguyên tắc "giữ cho nó đơn giản" (KIS) phải là mục tiêu chính của thiết kế trang web. Người dùng hiếm khi vào một trang web để thưởng thức thiết kế; hơn nữa, trong hầu hết các trường hợp, họ đang tìm kiếm thông tin bất chấp thiết kế. Phấn đấu cho sự đơn giản thay vì phức tạp.

Theo quan điểm của khách truy cập, thiết kế trang web tốt nhất là văn bản thuần túy, không có bất kỳ quảng cáo hoặc khối nội dung nào khác khớp chính xác với truy vấn mà khách truy cập đã sử dụng hoặc nội dung họ đang tìm kiếm. Đây là một trong những lý do tại sao phiên bản in thân thiện với người dùng của các trang web là cần thiết để có trải nghiệm tốt cho người dùng.

7. Đừng sợ khoảng trắng

Trên thực tế, rất khó để đánh giá quá cao tầm quan trọng của khoảng trắng. Nó không chỉ giúp giảm tải nhận thức cho khách truy cập mà còn giúp họ có thể nhận biết thông tin được hiển thị trên màn hình. Khi một khách truy cập mới tiếp cận một bố cục thiết kế, điều đầu tiên họ cố gắng làm là quét trang và chia khu vực nội dung thành các phần thông tin dễ hiểu.

Các cấu trúc phức tạp khó đọc, quét, phân tích và làm việc hơn. Nếu bạn có lựa chọn giữa việc phân tách hai phân đoạn thiết kế bằng một đường kẻ có thể nhìn thấy hoặc bằng một số khoảng trắng, thì tốt hơn hết là sử dụng giải pháp khoảng trắng. Cấu trúc phân cấp làm giảm độ phức tạp (Định luật Simon): bạn càng quản lý tốt để cung cấp cho người dùng cảm giác phân cấp trực quan thì nội dung của bạn càng dễ nhận biết.

Khoảng trắng là tốt. Cameron.io sử dụng khoảng trắng làm yếu tố thiết kế chính. Kết quả là một bố cục có thể quét được dễ dàng mang lại cho nội dung một vị trí thống trị xứng đáng.
Tìm hiểu thêm Bảng giá thiết kế web trọn gói

8. Giao Tiếp Hiệu Quả Với “Ngôn Ngữ Hữu Hình”

Trong bài báo của mình về giao tiếp bằng hình ảnh hiệu quả, Aaron Marcus nêu ba nguyên tắc cơ bản liên quan đến việc sử dụng cái gọi là “ngôn ngữ hiển thị” — nội dung mà người dùng nhìn thấy trên màn hình.

9. Công ước là bạn của chúng ta

Thiết kế thông thường của các yếu tố trang web không dẫn đến một trang web nhàm chán. Trên thực tế, các quy ước rất hữu ích vì chúng làm giảm thời gian học tập, nhu cầu tìm hiểu cách mọi thứ hoạt động.

Chẳng hạn, sẽ là một cơn ác mộng về khả năng sử dụng nếu tất cả các trang web có cách trình bày nguồn cấp RSS trực quan khác nhau. Điều đó không khác lắm so với cuộc sống thường ngày của chúng ta, nơi chúng ta có xu hướng quen với các nguyên tắc cơ bản về cách chúng ta sắp xếp dữ liệu (thư mục) hoặc mua sắm (vị trí sản phẩm).

Với các quy ước, bạn có thể có được sự tự tin, tin tưởng, đáng tin cậy của người dùng và chứng minh uy tín của mình. Làm theo kỳ vọng của người dùng — hiểu những gì họ đang mong đợi từ điều hướng trang web, cấu trúc văn bản, vị trí tìm kiếm, v.v.

Một ví dụ điển hình từ các phiên khả năng sử dụng là dịch trang bằng tiếng Nhật (giả sử người dùng web của bạn không biết tiếng Nhật, ví dụ: với Babelfish) và cung cấp cho người kiểm tra khả năng sử dụng của bạn nhiệm vụ tìm nội dung nào đó trong trang có ngôn ngữ khác. Nếu các quy ước được áp dụng tốt, người dùng sẽ có thể đạt được một mục tiêu không quá cụ thể, ngay cả khi họ không hiểu một từ nào về mục tiêu đó.

Steve Krug gợi ý rằng tốt hơn hết là bạn chỉ nên đổi mới khi bạn biết mình thực sự có ý tưởng tốt hơn, nhưng hãy tận dụng các quy ước khi bạn không có.

10. Kiểm tra web sớm và thường xuyên

Cái gọi là nguyên tắc TETO này nên được áp dụng cho mọi dự án thiết kế web vì các bài kiểm tra khả năng sử dụng thường cung cấp những hiểu biết quan trọng về các vấn đề quan trọng và các vấn đề liên quan đến một bố cục nhất định.

Kiểm tra không quá muộn, không quá ít và không vì những lý do sai lầm. Trong trường hợp sau, cần phải hiểu rằng hầu hết các quyết định thiết kế đều mang tính cục bộ; điều đó có nghĩa là bạn không thể trả lời chung chung liệu một số bố cục có tốt hơn bố cục kia hay không vì bạn cần phân tích nó từ một quan điểm rất cụ thể (xem xét các yêu cầu, các bên liên quan, ngân sách, v.v.).

Một số điểm quan trọng cần ghi nhớ: Điểm mấu chốt: nếu bạn muốn có một trang web tuyệt vời, bạn phải kiểm tra.

0917212969

Zalo

SMS

Viber