26/10/2011 14:44:43 PM

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

(Lượt xem: 2906)
Đã 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Đã 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:
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.
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.
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.

Những thông tin trên có lẽ đã mang lại cho bạn phần nào những kiến thức thiết kế web, để làm những giao dien web thật đep.Admini sẽ cố gắng mang lại nhiều bài viết hay hơn nữa.
Chúc các bạn thành công
  • Mẫu giao diện web thiết kế bởi Topweb
Tài nguyên





Xem tất cả
Tư vấn khách hàng
Điện thoại để được tư vấn tốt nhất
0973668377