Những nguyên tắc thiết kế web tốt

Khả năng sử dụng và tiện í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 đã được thiết lập 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, nó cũng có thể không tồn tại.

Khả năng sử dụng và tiện í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, nó cũng có thể không tồn tại.

Chúng ta sẽ không thảo luận về chi tiết triển khai thiết kế (ví dụ như nơi đặt hộp tìm kiếm) 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, kinh nghiệm và phương pháp tiếp cận để thiết kế web hiệu quả – các phương pháp tiếp cận, được sử dụng đúng cách, có thể dẫn đến các quyết định thiết kế phức tạp hơn và đơn giản hóa quá trình nhận thức thông tin được trình bày.

Xin lưu ý rằng bạn có thể quan tâm đến các bài viết liên quan đến khả năng sử dụng mà chúng tôi đã xuất bản trước đây:

Nguyên Tắc Thiết Kế Trang Web Tốt Và Hướng Dẫn Thiết Kế Trang Web Hiệu Quả 

Để sử dụng đúng các nguyên tắc, trước tiên chúng ta 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ô hình 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 gần giống với thứ họ đang tìm kiếm. Trên thực tế, có những phần lớ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 sau khi một số ứng viên triển vọng được tìm thấy, người dùng nhấp vào. Nếu trang mới không đáp ứng được mong đợi của người dùng, nút Quay lại được nhấp và quá trình tìm kiếm được tiếp tục.

• Người dùng đánh giá cao về 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 thỏa hiệp nội dung với quảng cáo và thiết kế của trang. Đây là lý do tại sao các trang web được thiết kế không đẹp với nội dung chất lượng cao lại có được rất 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ọ qua nội dung của trang.

• 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 kỳ vọng 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 một cách hiệu quả 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 kém trực quan, 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 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 sau khi họ tìm thấy một liên kết có vẻ như nó có thể dẫn đến mục tiêu, rất có thể nó sẽ được nhấp ngay lập tức. Việ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 lướt qua thay vì đọc thông tin mà nhà thiết kế đã cung cấp. Theo Steve Krug, lý do cơ bản của việc đó là do 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ẽ bám vào nó. Đối với chúng tôi không thành vấn đề nếu chúng tôi hiểu mọi thứ hoạt động như thế nào, miễn là chúng tôi có thể sử dụng chúng. Nếu khán giả của bạn sẽ hành động như bạn đang thiết kế bảng quảng cáo, thì hãy thiết kế những bảng 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ờ xuất hiện và họ muốn có thể quay lại bằng nút “Quay lại” – trở lại trang web mà họ đã từng truy cập trước đó: do đó, bạn không nên 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ĩ  Rằng

Theo định luật đầu tiên về khả năng sử dụng 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 chấm 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à kiến ​​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 hệ thống hoạt động và cách đi từ điểm A đến điểm B. Một cấu trúc rõ ràng, manh mối trực quan vừa phải và dễ dàng nhận ra liên kết có thể giúp người dùng tìm thấy con đường đến mục tiêu của họ.

Hãy xem một ví dụ. Beyondis.co.uk tuyên bố là “vượt ra ngoài các 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 -pattern “F”, ba câu lệnh này sẽ là yếu tố đầu tiên mà người dùng sẽ nhìn thấy trên trang khi nó được tải.

Mặc dù bản thân thiết kế đơn giản và trực quan nhưng để hiểu được nội dung của trang người dùng cần tìm kiếm câu trả lời. Đây là những gì một dấu chấm hỏi không cần thiết . Nhiệm vụ của nhà thiết kế là đảm bảo rằng số lượng dấu 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 hoạt độ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 sẽ giúp khách truy cập dễ dàng nắm bắt ý tưởng đằng sau hệ thống hơn. Khi bạn đã đạt được điều này, bạn có thể thông báo lý do tại sao hệ thống lại 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 cách của họ xung quanh nó.

2. Đừng Phung Phí Sự Kiên Nhẫn Của Người Dùng  #

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 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 yêu cầu hành động để kiểm tra dịch vụ, thì càng có nhiều khả năng khách truy cập ngẫu nhiên thực sự dùng thử. Khách truy cập lần đầu tiên 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 để thử nghiệm tính năng này.

Như Ryan Singer – nhà phát triển của nhóm 37Signals – cho biết, người dùng có thể sẽ háo hức cung cấp địa chỉ email nếu họ được yêu cầu sau khi họ thấy tính năng 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.

Stikkit là một ví dụ hoàn hảo cho một dịch vụ thân thiện với người dùng, hầu như không yêu cầu gì từ khách truy cập, điều này không phô trương và thoải mái. Và đó là những gì bạn muốn người dùng cảm nhận trên trang web của bạn.

Rõ ràng, Mite đòi hỏi nhiều hơn thế. 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, 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ỉ đăng ký người dùng thôi cũng đủ cản trở việc điều hướng của người dùng để cắt giảm lưu lượng truy cập đến.

Hướng dẫn biến cửa hàng Shopify trở thành ứng dụng di động

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, một số khía cạnh của giao diện người dùng thu hút sự chú ý 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 – cũng như các câu được đánh dấu là in đậ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 các cạnh, mẫu và chuyển động ngay lập tức . Đây là lý do tại sao 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 toàn làm tốt công việc 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 tập trung. Yếu tố duy nhất có thể nhìn thấy trực tiếp đối với người dùng là từ “miễn phí” hoạt động hấp dẫn và lôi cuốn, nhưng vẫn bình tĩnh và thuần túy về thông tin. Các gợi ý tinh tế cung cấp cho người dùng đủ thông tin về cách tìm 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 nghĩ đến cách thực hiện. Khách truy cập càng có ít dấu chấm hỏi thì họ càng có ý thức định hướng tốt hơn và họ càng có thể phát triển niềm tin đối với công ty mà trang web đại diện. Nói cách khác: càng ít suy nghĩ cần phải xảy ra ở hậu trường, thì trải nghiệm người dùng càng tốt, vốn là mục tiêu hướng tới khả năng sử dụng ngay từ đầu.

4. Phấn Đấu Để Có Được Tính Năng Phơi Sáng  #

Các thiết kế web hiện đại thường bị chỉ trích do cách tiếp cận của họ hướng dẫn người dùng với 1-2-3 bước thực hiện 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ừ quan điểm thiết kế, những yếu tố này thực sự không phải là một đ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 qua nội dung trang web một 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õ ràng những chức năng 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 bản in, nên cần phải điều chỉnh cách viết phù hợp với sở thích và thói quen duyệt web của người dùng. Bài 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à các 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, những cái tên có tính chất tiếp thị, những cái tên dành riêng cho công ty và những cái tên kỹ thuật không quen thuộc. Ví dụ: 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ý” tốt hơn là “bắt đầu ngay bây giờ!” điều này lại tốt hơn việc “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 (phân loại nội dung, sử dụng nhiều cấp độ tiêu đề, sử dụng các yếu tố hình ảnh và danh sách 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 nghe giống như quảng cáo; hãy 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 Vì Sự Đơ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 đến 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ế. Cố gắng vì sự đơn giản thay vì phức tạp.

Từ 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à điều cần thiết để có trải nghiệm người dùng tốt.

Finch trình bày rõ ràng thông tin về trang web và cung cấp cho khách truy cập nhiều lựa chọn mà không làm chúng quá tải với những nội dung không cần thiết.

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ể cảm nhận được 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 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 có thể tiêu hóa được.

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ó sự 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 có thể nhìn thấy hoặc bởi một số khoảng trắng, thường tốt hơn 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 (Luật của Simon): bạn càng quản lý tốt hơn để cung cấp cho người dùng cảm giác về hệ thống phân cấp trực quan, thì nội dung của bạn sẽ dễ dàng cảm nhận hơn.

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 tốt mang lại cho nội dung một vị trí thống trị mà nó xứng đáng.

8. Giao Tiếp Hiệu Quả Với “Ngôn Ngữ Dễ Thấy”  #

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ữ nhìn thấy” – 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 một 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 : thực hiện nhiều nhất với số lượng tín hiệu và yếu tố hình ảnh ít 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 những yếu tố quan trọng nhất đối với giao tiếp. Sự 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 phân 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 : những yếu tố quan trọng nhất cần được nhận thức một cách dễ dàng.
• Giao tiếp : phù hợp với khả năng của người dùng. Giao diện người dùng phải cân bằng giữa tính dễ đọc, dễ đọc, kiểu chữ, tính 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 tối đa 3 kích thước điểm – tối đa 18 từ hoặc 50-80 ký tự trên mỗi dòng văn bản.

9. Quy Ước Là Bạn Của Chúng Ta  #

Thiết kế thông thường của các phần tử của 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 giảm bớt đường cong học tập, nhu cầu tìm ra cách mọi thứ hoạt động. Ví dụ, 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 đều có các RSS-feed trực quan khác nhau. Điều đó không khác 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í của sản phẩm).

Với các quy ước, bạn có thể đạt được niềm tin, sự tin cậy, độ tin cậy của người dùng và chứng minh uy tín của bạn. Thực hiện theo mong đợi 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.

Ví dụ điển hình từ các phiên về 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, chẳng hạn như 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 bằng 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 thể hiểu một từ của nó.

Steve Krug gợi ý rằng tốt hơn là 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 Sớm, Kiểm Tra 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 sai nguyên nhân. Trong trường hợp thứ hai, cần phải hiểu rằng hầu hết các quyết định thiết kế là cục bộ; điều đó có nghĩa là bạn không thể trả lời một cách phổ biến xem một số bố cục có tốt hơn bố cục khác 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 nào và thử nghiệm một người dùng sớm trong dự án sẽ tốt hơn thử nghiệm 50 người gần cuối. Tuân theo định 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 về sau chúng càng đắt.
• thử nghiệm 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 nó một lần nữa. Có thể có 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.
• các bài kiểm tra khả năng sử dụng luôn tạo ra kết quả hữu ích . Bạn sẽ được chỉ ra những vấn đề mình gặp phải hoặc bạn sẽ được chỉ ra khi không có những sai sót lớn về thiết kế, 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 Weinberg, một nhà phát triển không được thích nghi để kiểm tra mã của họ . Điều này cũng phù hợp với 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 cách nó được xây dựng và do đó bạn biết chính xác nó hoạt động như thế nào – bạn có những người kiểm tra độc lập khôn ngoan và những người 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 thử nghiệm.

BEIT cung cấp dịch vụ bảo trì trang web

 

Nguồn: https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/