10 nguyên tắc thiết kế web hiệu quả

Bài này của Vitaly Fried man, hi vọng đây sẽ là một tài liệu tham khảo hay cho các bạn.

Usability (khả năng sử dụng) và những tiện ích không phải là những hình ảnh, những thiết kế trực quan, nhưng chúng quyết định sự thành công hay là thất bại của một trang web. Việc nghiên cứu cách người dùng tiếp cận với trang web là một phương pháp giúp nhà thiết kế web hiểu được người dùng và mang lại những định hướng có lợi trong thiết kế web.
Chúng ta sẽ không thảo luận chi tiết cách thực hiện (ví dụ: cách đặt các menu, box ở đâu và như thế nào). Chúng ta chỉ tập trung vào những nguyên tắc cơ bản, phương pháp chuẩn đoán và tiếp cận cho thiết kế web hiệu quả. Những phương pháp này nếu sử dụng đúng cách sẽ giúp chúng ta có những quyết định tinh tế hơn trong thiết kế và đơn giản hóa quá trình trình bày thông tin.

Để hiểu đúng những nguyên tắc, chúng ta cần hiểu rõ cách tương tác giữa người dùng và giao diện web, người dùng sẽ nghĩ gì và sẽ tương tác với giao diện web ra sao?

Người sử dụng nghĩ như thế nào?

Về cơ bản, thói quen người sử dụng web không khác gì so với thói quen người mua hàng. Người dùng chỉ liếc sơ qua từng trang, các đoạn text, click vào link đầu tiên mà link đó trùng khớp hoặc gần với những quan tâm hiện tại của họ. Trong thực tế, họ thậm chí không nhìn những phần chiếm diện tích lớn trong trang.

Hầu hết người dùng tìm kiếm cái gì đó thú vị (hay hữu ích) và có thể click được, ngay sau khi một số thứ có triển vọng được tìm thấy, người dùng nhấp chuột. Nếu trang mới không đáp ứng mong đợi của người sử dụng, nút Back đượ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 trang web cung cấp những nội dung có chất lượng cao, họ sẵn sàng thỏa hiệp với các nội dung quảng cáo và thiết kế của trang web. Đây là lý do tại sao không phải chỉ những website đẹp với nội dung tốt được nhiều người dùng ghé thăm nhiều. Nội dung là yếu tố quan trọng hơn nhiều so với thiết kế hỗ trợ cho chúng.

Người dùng không đọc, họ chỉ lướt trang web. Phân tích một trang web, người dùng chỉ tìm kiếm những điểm neo cố định mà có thể hướng dẫn họ xuyên xuốt nội dung trang.

Người sử dụng không đọc, họ chỉ quét. Lưu ý những điểm “nóng” đột ngột ở giữa các khu vực. Đây là những điểm người dùng thường đọc trong quá trình quét màn hình.

Người dùng thiếu kiên nhẫn và luôn đòi hỏi những sự hài lòng tức thời. Một nguyên tắc rất đơn giản, nếu một website không đáp ứng những mong đợi của người dùng, nhà thiết kế đã thất bại và công ty sẽ không thu được lợi nhuận. Những trang web có tốc độ download và trực quan hơn sẽ là những định hướng mới cho người dùng. Họ sẽ sẵn sàng rời trang web này để tìm kiếm những trang web khác tốt hơn.

Người dùng không chọn những chọn lựa tối ưu nhất. Người dùng không tìm kiếm cách nhanh nhất để tìm những thông tin mà họ đang cần tìm. Họ không quét trang web một cách tuyến tính, hoặc không đi theo trình tự từ phần này đến phần khác. Thay vào đó, họ chọn những lựa chọn hợp lý. Ngay sau khi họ tìm thấy một liên kết mà có vẻ như nó có thể dẫn đến mục tiêu, đây một cơ hội rất tốt mà họ sẽ ngay lập tức nhấp chuột. Tối ưu hóa là khó khăn và phải mất một thời gian dài. Chọn những lựa chọn hợp lý thì hiệu quả hơn.

Người dùng tuân theo những trực quan của họ. Trong tất cả các trường hợp, người dùng thường lúng túng thay vì đọc những thông tin mà nhà thiết kế đã cung cấp. Theo Steve Krug, nguyên nhân cơ bản là người dùng không quan tâm.”Nếu chúng tôi tìm kiếm thứ gì đó mà có thể hoạt động được, chúng tôi sẽ làm theo nó. Không quan trọng là chúng tôi hiểu nó như thế nào, miễn là chúng tôi có thể sử dụng được. Nếu khách hàng của bạn hành động như cách mà bạn thiết kế bảng quảng cáo, thì đó là một quảng cáo tuyệt vời nhất”.

Người dùng không kiểm soát được bản thân. Người dùng muốn kiểm soát trình duyệt web và đáp lại giữ liệu tồn tại trên web, ví dụ, họ không muốn một của sổ mới đột ngột hiện lên và họ muốn quay trở lại trang trước với nút “back”. Vì thế đó là một cách thực tập tốt để ko mở link trên trong một trình duyệt web mới.

1.ĐỪNG LÀM CHO NGƯỜI DÙNG PHẢI SUY NGHĨ

Theo định luật của Krug về khả năng dễ sử dụng (usability), những trang web nên hiển thị rõ ràng và tự giải thích. Khi tạo một trang web, công việc của bạn là phải loại bỏ tất cả các câu hỏi, những quyết định mà người dùng phải suy nghĩa, xem xét những ưu khuyết điểm và phải lựa chọn.

Nếu những định hướng và thông tin trang web không trực quan, số lượng câu hỏi sẽ tăng lên và điều này gây cản trở cho người dùng hiểu rõ cách sử dụng hệ thống nhiều thế nào, làm sao đi từ đến A đến điểm B. Một cấu trúc rõ ràng, những đầu mối trực quan, những đường link dễ nhận diện sẽ giúp người dùng tìm ra đường dẫn đi đến nơi mà họ cần tìm.

Chúng ta hãy xem một ví dụ. Beyondis.co.uk có ba lời phát biểu là “beyond channels, beyond products, beyond distribution”. Có nghĩa là gì? Khi người dùng có xu hướng khám phá các trang web theo mô hình “F” ba lời phát biểu trên sẽ là những yếu tố mà người sử dụng  thấy đầu tiên.

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

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

Bằn cách giảm tải những nhận thức, bạn sẽ giúp người dùng dễ nắm bắt được thông tin chứa đựng bên trong nó. Một khi bạn đạt đến điều này, bạn có thể biết được tại sao hệ thống này hữu dụng, và bằng cách nào 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 kiếm đường dẫn cụ thể nào.

2.ĐỪNG LÃNG PHÍ SỰ KIÊN NHẪN CỦA NGƯỜI DÙNG

Trong một số dự án khi bạn định cung cấp cho khách hàng một số dịch vụ hoặc công cụ, hãy cố gắng giảm yêu cầu đến mức tối thiểu. Càng ít lệnh được yêu cầu khách hàng test dịch vụ, bạn sẽ có càng nhiều khách hàng ngẫu nhiên vào trang web của bạn và thử test dịch vụ của bạn. Khách hàng đầu tiên sẽ sẵn sàng dùng dịch vụ của này mà không phải điền một form với các thông tin tài khoản (có thể họ ko sử dụng trong tương lai). Hãy để khách hàng khám phá ra và tìm ra dịch vụ của bạn mà không cần phải ép buôc họ cung cấp bất kỳ giữ liệu cá nhân nào. Đó không phải là điều chính đáng khi ép ai đó nhập địa chỉ email để test bất kỳ tính năng nào.

Theo Ryan Singer-nhà phát triển 37 ký hiệu cho biết, người sử dụng sẽ không sẵn lòng cung cấp địa chỉ mail nếu họ được hỏi sau khi thấy được những tính năng mới, vì thế họ có thể hình dung cái mà họ nhận được.

Stikkit là một ví dụ hoàn hảo cho một dịch vụ thân thiện nơi mà gần như không đòi hỏi gì từ khách hàng. Đây chính là điều bạn muốn người dùng cảm nhận từ trang web của bạn.

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 30s- với một form theo chiều ngang, người dùng không cần phải lăn chuột.

Việc loại bỏ những rào cản rất hiệu quả, không nên yêu cầu đăng ký hoặc phải đăng ký đầu tiên. Việc đăng ký là một cản trở làm giảm lượng truy cập.

3.QUẢN LÝ SỰ TẬP TRUNG CỦA NGƯỜI DÙNG

Các trang web thường cung cấp cả nội dung tĩnh lẫn động, một vài khía cạnh giao diện người dùng thu hút sự chú ý hơn so với những thành phần khác trong web. Hiển nhiên, hình ảnh thường bắt mắt hơn nội dung – giống như những câu in đậm thường dễ gây chú ý hơn những câu viết thường.

Mắt người là một thiết bị phi tuyến tính, người dùng tức thì nhận ra ngay lập tức các góc cạnh, mô hình và những yếu tố chuyển động. Đây là lý do tại sao những quảng cáo dựa trên phần video cực kỳ gây khó chịu và làm mất tập trung nhưng ở khía cạnh tiếp thị thì nó đã thành công trong việc gây chú ý cho người dùng.

Humanized.com là sử dụng nguyên tắc tập trung một cách hoàn hảo. Yếu tố duy nhất ảnh hưởng trực tiếp đến người dùng là từ “free” (rất hiệu quả và cuốn hút), tuy nhiên nó vẫn chứa đựng thông tin và ko gây náo động trang web. Những gợi ý tinh tế cung cấp đủ thông tin cho người dùng cách tìm ra nhiều sản phẩm của “free” hơn.

Tập trung sự chú ý người dùng bằng những yếu tố trực quan giup người dùng có thể biết được cách đi từ điểm A đến điểm B mà không cần phải suy nghĩ nhiều. Càng ít câu hỏi được đặt ra, những cảm giác định hướng và độ tin cậy về trang web đó càng nhiều.

4. PHÁT HUY TÍNH NHỮNG TÍNH NĂNG

Những trang web hiện đại thường chỉ ra những phương pháp tiếp cận trực quan hấp dẫn từ 1-2-3 bước, với những nút nhấn lớn trực quan. Nhưng từ quan điểm thiết kế, những yếu tố này thực sự không phải là điều tệ hại. Ngược lại, đây là những phần hướng dẫn cực kỳ hiệu quả giúp cho người dùng hiểu được nội dung web theo một cách đơn giản và thân thiện.


Dibusoft.com kết hợp thiết kế lôi cuốn và cấu trúc rõ ràng, trang web này có 9 nút định vị rất dễ nhìn.

Hãy để cho người dùng thấy được những chức năng có sẵn là một nguyên tắc cơ bản cho việc thiết kế giao diện web. Không quan trọng là nó đặt hiệu quả như thế nào, điều quan trọng là nội dung nào dễ hiểu và người dùng có thể cảm nhận theo cách mà họ tương tác với trang web.

5. SỬ DỤNG CÁCH VIẾT HIỆU QUẢ:

WEB khác với việc in ấn, việc điều chỉnh kiểu viết theo sở thích của người dùng và thói quen sử dụng trình duyệt web là thiết yếu. Những phần quảng cáo sẽ không được đọc nhiều, những đoạn text dài mà không có hình ảnh, từ khóa (được in đậm, nghiêng) đi kèm sẽ được bỏ qua, những ngôn từ cường điệu cũng sẽ được bỏ qua.

Đề cập về kinh doanh. Tránh dùng những cái tên dễ thương và thông minh, trong market – nên dùng tên thuyết phục, công ty -nên dùng tên cụ thể. Ví dụ, nếu bạn mô tả một dịch vụ và muốn người dùng tạo một tài khoản, từ”sign up” thì tốt hơn là dùng từ”start now!”


Eleven2.com không dùng từ dễ thương hay cường điệu. Thay vào đó là giá của sản phẩm, cái mà người dùng muốn tìm kiếm.

Một giải pháp tối ưu để tạo ra những lời phát biểu có hiệu quả là:

  1. Dùng những cụm từ ngắn và chính xác.
  2. Dùng những layout dễ quét (phân loại nội dụng, sử dụng multiple header level, sử dụng những yếu tố trực quan và những nút nhấn trực quan).
  3. Dùng những ngôn ngữ khách quan dễ hiểu (một khuyến mãi mà ko cần phải có âm thanh quảng cáo, cung cấp cho người dùng những lý do hợp lý và mục đích tại sao họ nên sử dụng trang web của bạn).

6.PHÁT HUY TÍNH ĐƠN GIẢN

“ Keep it simple”- nguyên tắc KIS là một nguyên tắc cơ bản trong thiết kế. Người dùng rất hiếm khi thích thú với thiết kế; hơn nữa, hầu hết tất cả các trường hợp, họ chỉ tìm kiếm nội dung hơn là hình thức thiết kế. Cố gắng phát huy tính đơn giản thay vì làm làm cho nó phức tạp hơn.

Crcbus giúp người dùng có một cái nhìn rõ ràng và đơn giản. Bạn chắc hẳn sẽ không có khái niệm nào đây là trang web nói về người Ý, tuy nhiên bạn có thể dễ dàng nhận biết những nút định vị, header, nội dung, phần footer. Lưu ý rằng, ngay cả những icons cũng thể hiện thông tin rõ ràng. Một khi biểu tượng được quét, các thông tin bổ sung được cung cấp.

Từ quan điểm của người nhìn, thiết kế tối ưu nhất là thiết kế chỉ đơn thuần là text, mà không có bất kỳ các loại quảng cáo nào và những khối nội dung phù hợp với những thắc mắc của người dùng. Đây là một lý do tại sao những kiểu giao diện web thiết kế dạng in ấn kiểu thân thiện với người dùng lại rất quan trọng đối với người dùng thường xuyên sử dụng web.

Finch hiển thị thông tin rõ ràng, giúp người dùng có những chọn lựa mà rõ ràng.

7. ĐỪNG E NGẠI VỚI NHỮNG KHOẢNG TRẮNG TRONG THIẾT KẾ

Thực sự rất khó để ước tính tầm quan trọng của khoảng trắng. Nó không chỉ giúp giảm tải lượng thông tin mà còn giúp dễ cảm nhận thông tin trên màn hình. Khi một người dùng lần đầu tiên tiếp cận với layout web. Điều đầu tiên là anh ấy/cô ấy cố gắng quét thông tin và chia nội dung thành những phần nhỏ để dễ tiêu hóa.

Những cấu trúc phức tạp thì khó đọc, khó quét, khó phân tích. Nếu bạn có một chọn lựa giữa việc tách các yêu tố thiết kế bằng những đường line hoặc bằng những khoảng trắng, thì việc sử dụng khoảng trắng là hiệu quả hơn. Cấu trúc phân cấp giảm mức độ phức tạp (quy luật của Simon): Nếu bạn càng cung cấp cho người dùng một hệ thống phân cấp trực quan hơn, nội dung thông tin sẽ càng dễ dàng truyền tải hơn.


Cameron.io use dụng mảng trắng như một yếu tố cơ bản trong thiết kế. Đây là một bố cục tốt mà nội dung rất dễ đọc.

8. SỬ DỤNG HIỆU QUẢ NHỮNG “NGÔN NGỮ NHÌN THẤY ĐƯỢC”

Trong 1 bài báo viết về cách truyền tải thông tin hiệu quả bằng hình ảnh, Aaron Marcuis tuyên bố có ba yếu tố chính trong việc sử dụng “ngôn ngữ nhìn thấy được” – ngôn ngữ mà người dùng có thể nhìn thấy được trên màn hình.

  • Tổ chức: cung cấp cho người dùng một cấu trúc rõ ràng và nhất quán. Tính nhất quán, cách bố trí màn hình, các mối liên hệ và các dạng định hướng là những khái niệm quan trọng trong tổ chứa thông tin. Những quy tắc và quy ước tương tự nên được áp dụng các yếu tố trên.
  • Tiết kiệm: hãy làm nhiều nhất với ít nhất các tính hiệu và yếu tố thị giác. Có bốn điểm chính cần lưu ý: tính đơn giản, tính rõ ràng, đọ khác biệt và độ nhấn mạnh. Tính đơn giản bao gồm các yếu tố quan trọng nhất trong việc truyền tải thông tin. Tính rõ ràng: gồm các thành phần có thể thiết kế mà không gây mơ hồ cho người dùng. Tính khác biệt: gồm các thuộc tính quan trọng có thể tạo nên sự khác biệt. Tính nhấn mạnh: là yếu tố quan trọng nhất giúp người dùng cảm nhận dễ dàng nhất.
  • Giao tiếp: cách trình bày phù hợp với khả năng của người dùng. Giao diện người dùng cần phải có được yếu tố rõ ràng, dễ đọc, kiểu chữ, các biểu tượng, quan điểm, màu sắc, texture. Sử dụng nhiều nhất 3 loại typeface trong thiết kế ở ba kích thước font.

9. NHỮNG QUY ƯỚC

Những thiết kế theo lối truyền thống không mang lại một trang web nhàm chán. Trong thiết kế, những kiểu thiết kế truyền thống rất hữu ích. Nó không khác gì với đời sống bình thường nơi mà chúng ta quen với việc sử dụng những nguyên tắc, cách tổ chức giữ liệu, cách thức,…

10. KIỂM TRA SỚM VÀ THƯỜNG XUYÊN

Một nguyên tắc gọi là TETO được áp dụng cho bất kỳ 1 trang web nào khi kiểm tra khả năng có thể sử dụng (usability) được cung cấp bởi những kiến thức quan trọng vào những vấn đề quan trọng và các vấn đề liên quan đến cách bố trí trước một layout.
Đây là những yếu tố quan trọng cần nắm rõ:

  1. Theo Steve Krug, kiểm tra thử 1 người sử dụng hơn là không kiểm tra người nào. Theo định luật của Boehm, các lỗi thường xuất hiện thường xuyên xuốt quá trình yêu cầu và các hoạt động thiết kế và thường tốn chi phí nhiều hơn nếu tìm ra chúng ta tìm ra lỗi đó sau này.
  2. Thử nghiệm là một quá trình lập đi lập lại. Điều này có nghĩa là khi bạn thiết kế một cái gì đó, thử nghiệm nó, sửa chữa nó, sau đó thủ nghiệm lại. Có thể ban đầu, vấn đề sẽ không được tìm ra bởi nó bị chặn bởi các yếu tố khác.
  3. Kiểm tra khả năng sử dụng luôn luôn tạo ra kết quả hữu ích. Hoặc là bạn sẽ được chỉ ra các vấn đề bạn có hoặc bạn sẽ được chỉ ra trường hợp không có lỗi trong thiết kế. Cả hai trường hợp một đều có cái nhìn hữu ích cho các dự án của bạn.
  4. Theo quy luật của Weinberg, nhà phát triển web không cần phải chỉnh sửa lại code. Sau khi bạn làm trang web trong một vài tuần, ban không thể quan sát chúng từ những khía cạnh mới hơn. Bạn biết rằng nó được xây dựng và vì thế bạn biết chính xác nó hoạt động như thế nào. Bạn nên hỏi ý kiến những người chưa từng vào trang web của bạn.

Các nguồn tham khảo khác:

http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html

http://nibis.ni.schule.de/~lepke/homepage/webdesign/webdesign.html

http://nibis.ni.schule.de/~lepke/homepage/webdesign/webdesign.html

http://www.macgregor.net/speaking/digitaleve/UID.swf

Nguồn: smashingmagazine

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: