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.

• Người dùng đánh giá cao chất lượng và uy tín. Nếu một trang cung cấp cho người dùng nội dung chất lượng cao, họ sẵn sàng đánh đổi nội dung bằng quảng cáo và thiết kế của trang. Đây là lý do tại sao các trang web không được thiết kế tốt với nội dung chất lượng cao lại thu được nhiều lưu lượng truy cập trong nhiều năm. Nội dung quan trọng hơn thiết kế hỗ trợ nó.
• Người dùng không đọc, họ quét. Phân tích một trang web, người dùng tìm kiếm một số điểm cố định hoặc điểm neo sẽ hướng dẫn họ thông qua nội dung của trang.

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 thiếu kiên nhẫn và đòi hỏi sự hài lòng ngay lập tức. Nguyên tắc rất đơn giản: Nếu một trang web không thể đáp ứng mong đợi của người dùng, thì nhà thiết kế đã không hoàn thành công việc của mình và công ty sẽ thua lỗ. Tải trọng nhận thức càng cao và điều hướng càng ít trực quan thì người dùng càng sẵn sàng rời khỏi trang web và tìm kiếm các lựa chọn thay thế. [JN / DWU]
• Người dùng không đưa ra lựa chọn tối ưu. Người dùng không tìm kiếm cách nhanh nhất để tìm thấy thông tin mà họ đang tìm kiếm. Họ cũng không quét trang web theo kiểu tuyến tính, đi tuần tự từ phần trang web này sang phần trang web khác. Thay vào đó, người dùng hài lòng; họ chọn phương án hợp lý đầu tiên. Ngay khi họ tìm thấy một liên kết có vẻ như có thể dẫn đến mục tiêu, rất có thể họ sẽ nhấp vào liên kết đó ngay lập tức. Tối ưu hóa rất khó và mất nhiều thời gian. Thỏa mãn là hiệu quả hơn.

• Luồng đọc tuần tự không hoạt động trên Web. Ảnh chụp màn hình bên phải trên hình ảnh ở dưới cùng mô tả đường dẫn quét của một trang nhất định.
• Người dùng làm theo trực giác của họ. Trong hầu hết các trường hợp, người dùng sẽ hiểu nhầm thay vì đọc thông tin mà nhà thiết kế đã cung cấp. Theo Steve Krug, lý do cơ bản cho điều đó là người dùng không quan tâm. “Nếu chúng tôi tìm thấy thứ gì đó hiệu quả, chúng tôi sẽ gắn bó với nó. Đối với chúng tôi, việc chúng tôi hiểu mọi thứ hoạt động như thế nào cũng không thành vấn đề, miễn là chúng tôi có thể sử dụng chúng. Nếu khán giả của bạn hành động như thể bạn đang thiết kế biển quảng cáo, thì hãy thiết kế những biển quảng cáo tuyệt vời.”
• Người dùng muốn có quyền kiểm soát. Người dùng muốn có thể kiểm soát trình duyệt của họ và dựa vào việc trình bày dữ liệu nhất quán trên toàn bộ trang web. Ví dụ. họ không muốn các cửa sổ mới bất ngờ bật lên và họ muốn có thể quay lại trang web mà họ đã truy cập trước đó bằng nút “Quay lại”: do đó, tốt nhất là không bao giờ mở liên kết trong các cửa sổ trình duyệt mới.

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à

• Sử dụng các cụm từ ngắn gọn và súc tích (đi vào vấn đề càng nhanh càng tốt),
• Sử dụng bố cục có thể quét được (phân loại nội dung, sử dụng nhiều cấp tiêu đề, sử dụng các yếu tố trực quan và danh sách có dấu đầu dòng để phá vỡ dòng chảy của các khối văn bản thống nhất),
• Sử dụng ngôn ngữ đơn giản và khách quan (khuyến mại không cần phải giống như quảng cáo; cung cấp cho người dùng của bạn một số lý do hợp lý và khách quan tại sao họ nên sử dụng dịch vụ của bạn hoặc ở lại trang web của bạn)

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 Tạo website đơn giản

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.

• Tổ chức: cung cấp cho người dùng cấu trúc khái niệm rõ ràng và nhất quán. Tính nhất quán, bố cục màn hình, mối quan hệ và khả năng điều hướng là những khái niệm quan trọng của tổ chức. Các quy ước và quy tắc giống nhau nên được áp dụng cho tất cả các phần tử.
• Tiết kiệm: làm được nhiều nhất với ít tín hiệu và yếu tố hình ảnh nhất. Bốn điểm chính cần được xem xét: đơn giản, rõ ràng, khác biệt và nhấn mạnh. Sự đơn giản chỉ bao gồm các yếu tố quan trọng nhất để giao tiếp. Rõ ràng: tất cả các thành phần nên được thiết kế để ý nghĩa của chúng không mơ hồ. Tính khác biệt: các thuộc tính quan trọng của các yếu tố cần thiết phải được phân biệt. Nhấn mạnh: các yếu tố quan trọng nhất nên được nhận thức dễ dàng.
• Giao tiếp: kết hợp bản trình bày với khả năng của người dùng. Giao diện người dùng phải giữ sự cân bằng về mức độ dễ đọc, dễ đọc, kiểu chữ, biểu tượng, nhiều chế độ xem và màu sắc hoặc kết cấu để giao tiếp thành công. Sử dụng tối đa 3 kiểu chữ với kích thước tối đa 3 điểm — tối đa 18 từ hoặc 50-80 ký tự trên mỗi dòng văn bản.

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ớ:

• Theo Steve Krug, thử nghiệm một người dùng tốt hơn 100% so với không thử nghiệm và thử nghiệm một người dùng sớm trong dự án tốt hơn so với thử nghiệm 50 người dùng gần cuối. Theo luật đầu tiên của Boehm, các lỗi thường xảy ra nhất trong các yêu cầu và hoạt động thiết kế và càng bị loại bỏ càng tốn kém.
• kiểm thử là một quá trình lặp đi lặp lại. Điều đó có nghĩa là bạn thiết kế một cái gì đó, kiểm tra nó, sửa chữa nó và sau đó kiểm tra lại nó. Có thể có những vấn đề chưa được tìm thấy trong vòng đầu tiên vì người dùng thực tế đã bị chặn bởi các vấn đề khác.
• kiểm tra khả năng sử dụng luôn tạo ra kết quả hữu ích. Hoặc là bạn sẽ được chỉ ra những vấn đề bạn gặp phải hoặc bạn sẽ được chỉ ra là không có lỗi thiết kế chính nào, trong cả hai trường hợp, đây là một cái nhìn sâu sắc hữu ích cho dự án của bạn.
• theo luật của Weinberg, một nhà phát triển không phù hợp để kiểm tra mã của anh ấy hoặc cô ấy. Điều này cũng áp dụng cho các nhà thiết kế. Sau khi bạn đã làm việc trên một trang web trong vài tuần, bạn không thể quan sát nó từ một góc độ mới nữa. Bạn biết nó được xây dựng như thế nào và do đó bạn biết chính xác nó hoạt động như thế nào — bạn có sự khôn ngoan mà những người kiểm tra độc lập và khách truy cập trang web của bạn sẽ không có.

Đ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.