Uncategorized with tags customer oriented, giao diện người dùng, giao diện web, thiết kế web, thiết kế web đẹp, User Interface Design, xây dựng website; giao diện web đẹp 17 June, 2009

Giao diện cho người dùng trong thiết kế web

Đã từ lâu tôi muốn viết về chủ đề này, vì đây là vấn đề mà các web designer và các developer của Việt Nam thường ít chú ý, trong khi ở các công ty dịch vụ web của nước ngoài thường có riêng một bộ phận nghiên cứu về khía cạnh này. Phải hiểu cách người dùng sử dụng web hay truy cập và tương tác với nó như thế nào thì mới có các thiết kế vừa đẹp, vừa sáng tạo mà vẫn thân thiện với người dùng.

Tuy nhiên nhiều khi chúng ta bỏ qua bước đặt địa vị mình vào vị trí người dùng web khi tư duy thiết kế. Điều này có thể là do người thiết kế chưa có nhiều trải nghiệm thực tế nhưng có lẽ thực sự nó bắt nguồn từ tư duy hướng người dùng (customer oriented) của chúng ta còn yếu như trong bất kỳ lĩnh vực nào khác.

Một số cân nhắc khi thiết kế giao diện muốn hướng tới người dùng:

Thiết kế	Ưu điểm	Nhược điểm
Độ sâu của cấu trúc thông tin thấp	Mất ít click chuột để tìm kiếm thông tin	Sẽ mất bình tĩnh, dễ bỏ qua khi tìm kiếm thông tin nếu không phải là người có kiến thức về web
Độ sâu của cấu trúc thông tin cao	Rõ ràng, thuận tiện cho người dùng ít kinh nghiệm	Mất nhiều click chuột để tìm kiếm thông tin
Cỡl font nhỏ	Hiển thị được nhiều thông tin hơn	Khó đọc với một số người dùng
Cỡ font to	Dễ đọc	Hiển thị được ít thông tin hơn
Hộp thả (Drop-down box)	Có thể tiết kiệm không gian khi có nhiều lựa chọn	Ẩn các thông tin với người dùng ít kinh nghiệm
Nút chọn (Radio buttons)	Nhìn thấy tất cả các lựa chọn	Cần nhiều không gian để hiển thị và cũng gây nhiễu với người dùng vì nhiều thồng tin hiển thị
Biểu tượng	Dễ nhận biết một khi đã biết và tạo các hiệu ứng cảm xúc	Cần phải có kinh nghiệm
Đường liên kết text (Text links)	Luôn dễ hiểu	Phải đọc và không nổi bật so với các nội dung text khác
Chữ viết tắt	Tiết kiệm không gian	Cần phải có kinh nghiệm
Toàn văn	Luôn dễ hiểu	Cần nhiều không gian để hiển thị
Phím tắt	Tốc độ cao khi nhập dữ liệu	Cần phải ghi nhớ

Một số tiêu chí để đánh giá một thiết kế giao diện cho người dùng tốt:

1. Dễ dàng ghi nhớ và hiểu được

2. Hiệu quả sử dụng

3. Tần suất lỗi, khả năng khôi phục hay thay đổi khi cần

4. Sự hài lòng của người dùng

Một số kinh nghiệm để thiết kế giao diện người dùng tốt tham khảo trên Smashingdesign:

1. Làm nổi bật những thay đổi quan trọng

Một trong những yếu tố cơ bản của một giao diện người dùng tốt là khả năng nhìn thấy các trạng thái của hệ thống. Người dùng cần phải được thông báo ngay những gì đang diễn ra đằng sau những thao tác của họ cho dù nó có thực sự được như mong muốn của họ hay không. Các ứng dụng web ngày nay sử dụng AJAX cho phép người dùng cập nhật các phần của trang bất kỳ lúc nào mà không phải tải lại toàn bộ trang. AJAX đã mang lại sự đáp ứng tương đối khả năng tương tác với người dùng như các ứng dụng cho máy tính để bàn.

Tuy nhiên, yếu tố động trên có thể khi bạn click vào một nút thì không thấy trang được tải như truyền thống. Vì nhiều website chưa ứng dụng AJAX nên người dùng không chắc chắn lắm điều gì đang diễn ra. Để khắc phục điều này, bạn nên cung cấp các phản hồi trực quan cho mỗi tương tác với website.

Một cách rất hay để làm điều này là dùng các hình ảnh động (animation). Mắt người thường rất nhạy cảm với các chuyển động, đặc biệt khi một phần của trang là tĩnh. Các hình ảnh động này có thể tạo bởi các mã Javascript nhưng lưu ý không nên quá lạm dụng vì có thể giảm tốc độ của trang khi người dùng thực hiện các thao tác.

2. Thiết đặt các phím tắt cho các ứng dụng web

Đây như là một tính năng nâng cao của các ứng dụng web bây giờ như kéo thả, cửa số windows, mang lại cảm giác gần gũi như ứng dụng để bàn, đặc biệt là các thao tác nhập liệu. Một trong những kỹ thuật được dùng là tích hợp phím tắt và điều hướng (navigation) như là các ứng dụng cổ điển để tăng khả năng tương tác cho người dùng.

	function bpload(){

		// put pointers to all images with the class "bpImage" in an array
		imgArr = getElementsByClassName(document.body,"bpImage")
		isLoaded = 1;
	}

	document.onkeypress = function(e) {
		if (!e) e = window.event;

		// Pick up what key was pressed
		key = e.keyCode ? e.keyCode : e.which;

		// 107 is the ASCII code for 'k'
		if(( key == 107 ) && ( isLoaded ) ) {

			// if there are images...
			if ( currImg > 0 ) {

				// decrease the counter for the current image
				currImg--;

				// offsetTop returns the vertical coordinate of the
				// upper-left corner of the image
				// (we are not sure why the script adds 174px. Any idea?)
				window.scrollTo(0,imgArr[currImg].offsetTop+174)

			}
			else {
				if (currImg==0) {
					currImg--;
					window.scrollTo(0,325)
				}
				else
				{
					if (currImg<0) {
						window.scrollTo(0,325)
						}
					}
				}
		}

		if ( ( key == 106 ) && ( isLoaded )) {
			// a similar code snippet for 'j'
			...
		}
	}

}

Nhưng bạn phải chắc chắn rằng là: 1) phím tắt có thể sử dụng được, không xung đột với phím tắt của hệ thống hay các chương trình khác. 2) Chúng có thể sử dụng để tăng hiệu quả của công việc lên. Nếu một người dùng đã thích quản lý công việc của họ bằng ứng dụng của bạn thì họ sẽ không có xu hướng chuyển sang các ứng dụng tương tự khác.

3. Đặt lựa chọn nâng cấp ngay trong trang tài khoản

Nếu ứng dụng của bạn có tính năng đăng ký các lựa chọn sử dụng dịch vụ thì phải đảm bảo bỏ hết việc chia nhỏ các lựa chọn này khi người dùng phải nâng cấp. Hầu hết người dùng có xu hướng lựa chọn gói cơ bản đầu tiên để xem ứng dụng của bạn hoạt động thế nào.Nếu bạn thuyết phục được họ các ứng dụng này đáp ứng được những kỳ vọng của họ, họ sẽ xem xét việc nâng cấp cao hơn. Đó là nhiệm vụ của nhà thiết kế để bảo đảm chuyển đổi này là đơn giản và trực quan nhất có thể.

Thực tế, rất nhiều ứng dụng web đặt lựa chọn cơ bản duy nhát này ở trang tài khoản của khách hàng để họ dễ truy cập.

Lưu ý, điều quan trọng không chỉ của những gói nâng cấp sẵn có , mà còn xác định các gói dịch vụ họ hiện đang sử dụng và các tính năng đang có sẵn của nó.Điều này là quan trọng để cung cấp cho người sử dụng các thông tin chính xác về những gì mà họ có được khi nâng cấp tài khoản của họ.

4. Quảng cáo các tính năng của site

Mặc dù bạn đã tạo ra một trang chi tiết về marketing, liệt kê tất cả các tính năng của ứng dụng, và có phần hướng dân giúp đỡ tương tận trên trang web của bạn, người dùng của bạn không có tất cả thứ đấy. Họ có thể không cần tất cả các tính năng sản phẩm của bạn và sẽ thích các lợi ích nhỏ trong bản thân ứng dụng đó.

Quảng cáo các tính năng của site . Chúng thường được đặt ở bên cạnh và ngoài các chức năng chính. Nếu một người dùng thấy sản phẩm của bạn đáp ứng tối đa nhu cầu của họ thì bạn phải thiết kế chỗ để chỉ ra và đưa cho họ lựa chọn nhanh nhất để nâng cấp.

5. Sử dụng danh sách phân biệt bởi màu sắc trực quan

Một số ứng dụng có chức năng cung cấp nhiều loại nội dung, ví dụ: 1 ứng dụng quản lý dự án sẽ đưa ra các thông báo, công việc, lịch hẹn, file mới nhất ra ngoài trang chủ. Nếu tất cả các nội dung xuất hiện trong cùng một danh sách thì sẽ rất khó phân biệt. Nhiều ứng dụng sử dụng màu sắc để trực quan hóa việc phân biệt trên. Cách đơn giản nhất để thực hiện là đưa nội dung nhãn vào trong ô màu.

Điều quan trọng là không sử dụng các màu sắc khác nhau cho cùng các công việc hoặc tương tự. Các bảng màu này không nên được tạo ngẫu nhiên, nhưng nên chú thích cho người dùng biết ý nghĩa của chúng.

6. Các đề xuất cá nhân hóa

Nhiều ứng dụng cung cấp khả năng cá nhân hóa theo mong muốn người dùng như font chữ, màu sắc, sắp xếp bố cục. Cá nhân hóa làm người dùng cảm thấy thân thiện và họ được chăm sóc hơn.

Cá nhân hóa chắc chắn là cách đơn giản và hiệu quả nhất gắn kết khách hàng với sản phẩm dịch vụ của bạn, nhưng điều quan trọng là hiểu được việc cá nhân hóa này không tính vào chi phí của phần cốt lõi của ứng dụng. Hệ thống của bạn nên đáp ứng sẵn khả năng thực hiện chức năng này. Và cũng quan trọng bạn giúp người dùng khôi phục các thiết đặt trước một cách dễ dàng trong trường hợp họ chưa quen thao tác hay muốn quay lại.

7. Các thông báo trợ giúp được thiết kế thu hút

Mỗi ứng dụng web là khác nhau sẽ có cách thức riêng của mình. Nếu đây là chức năng không phải là rõ ràng ngay lúc đầu, bạn có thể cung cấp cho người dùng các tin nhắn ngắn giúp đỡ để có họ có thể bắt đầu sử dụng. Một điều quan trọng là nếu bạn muốn giúp đỡ những người không chắc chắn những gì họ sẽ làm thì bạn cần để thu hút sự chú ý của họ bằng thông báo này. Một cách để thu hút sự chú ý được thiết kế với các màu sắc đặc trưng như đưa một màu vàng “dính” tin nhắn bên trong để làm nổi bật.

8. Thiết kế các thông bảo phản hồi một cách cẩn thận

Mọi website tốt thường có các form phản hồi. Nó là những thông báo popup khi có lỗi xảy ra hay cảnh báo hoặc có khi chỉ là sau khi thực hiện xong một thao tác. Thiết kế các thông báo một cách chính xác là rất quan trọng bởi vì bạn không muốn người dùng khó chịu hay mất phương hướng khi có vấn đề xảy ra.

Một cách hay có thể làm là đầu tiên sử dụng các màu sắc khác nhau cho các thông báo như tín hiệu giao thông. Thông báo thành công thường là màu xanh, các cảnh báo thường là màu vàng và báo lỗi là màu đỏ. Tiếp theo bạn có thê dụng các biểu tượng riêng cho từng thông báo và các biểu tượng này phải có ý nghĩa mà không cần người dùng phải đọc thông báo. Và cuối cùng phải cho người dùng cách tắt thông báo nếu họ thích quay lại trang ban đầu.

9. Sử dụng thanh điều hướng dạng tab

Rất nhiều website sử dụng kết hợp thanh điều hướng dạng tab làm menu chính. Điều hướng dạng tab với tab đang được lựa chọn liên kết luôn với nội dung của trang không chỉ bắt mắt mà còn thuận tiện cho người dùng.

10. Sử dụng nền xám/ mờ dưới các cửa sổ mở ra

Đối với các nội dung của website không cần mở toàn bộ trang như các form nhập nội dung nhanh mà chỉ cần một cửa sổ popup ở góc trên của trang để người dùng tương tác, thì bạn có thể dụng nền xám cho các nội dung nằm dưới cửa sổ này. Nền xám sẽ làm giảm độ nhiễu của các nội dung bên cạnh cửa sổ và tập trung sự chú ý vào popup đó.

11. Sử dụng Lightboxe và Slideshow cho việc xem ảnh

Khi site của bạn có nhiều ảnh mà người dùng muốn xem, thì hiển thị tất cả các hình ảnh trên trang riêng có thể không phải là cách hiệu quả cho người truy cập và máy chủ của bạn. Người truy cập của bạn sẽ cần phải di chuyển tới lui, và máy chủ của bạn sẽ phải xử lý thêm lượt thao tác. Lightbox và slideshows có thể sử dụng đê hiển thị ảnh mà không cần phải mởi trang mới, nó có thể phóng to hình ảnh như một cửa sổ gắn kèm trang đó, cho phép người dùng tập trung vào hình ảnh trong khi nền mờ đi.

12. Form đăng ký ngắn gọn

Form đăng ký thường là rào cản giữa bạn và khách hàng tiềm năng. Một form quá dài sẽ làm khách hàng tiềm năng của bạn ngại điền vào. Giảm rào cản này bạn nên bỏ các yếu tố không cần thiết ra khỏi form, chỉ giữ lại những gì quan trọng nhất, các lựa chọn khác có thể bổ sung sau khi đã là thành viên.