Đã 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
Phụ mục
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.
4. Quảng cáo các tính năng của site
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
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.
13. Tự động focus vào các chỗ nhập liệu
Rất hữu ích khi website của bạn có các form nhập liệu, việc focus luôn vào các nội dung nhập liệu này sẽ giúp người dùng dễ dàng thao tác.
Một số casestudy trên outlawdesignblog để bạn tham khảo: