CTT 534 Thiết kế giao diện LN06 WebUI vi

Thiết kế giao diện Web Nội dung n n n n n 5/24/16 Tính phổ biến quan trọng thiết kế Web Text hypertext Tính tiện dụng giao diện Web Hướng dẫn gợi ý thiết kế giao diện Web Giao diện – Tốt hay xấu? Sự phổ biến Internet n Hiện nay, Internet trở thành hoạt động chủ đạo người dùng máy tính q q q 5/24/16 Năm 2010, người Mỹ trung bình tốn 32h/tháng Internet Người độ tuổi 45-54 tốn 39h/tháng Internet Người Mỹ tốn thời gian Internet xem TV Tầm quan trọng thiết kế Web n Hàng triệu website Internet q q n Mục đích website q q q q q n Và gia tăng hàng ngày, hàng Một số thông dụng, nhiều người truy cập, số hướng tới phận nhỏ người dùng Giao tiếp Giáo dục, thông tin Giao dịch buôn bán trực tuyến Giải trí … Thiết kế web tốt mang lại nhiều lợi nhuận cho đầu tư ban đầu 5/24/16 Tầm quan trọng thiết kế Web (tt) n Hai mục tiêu khó thoái thác việc thiết kế web q n Thỏa mãn nhu cầu người dùng (user satisfaction) mang lại lợi nhuận cho đầu tư (return on investment – ROI) Khả dụng vấn đề có tính định việc thiết kế Web q q q q q q q 5/24/16 Website khó sử dụng – người dùng bỏ Tính đưa ko rõ ràng – bỏ Khó đọc - bỏ Ko hút - bỏ Gây nhàm chán - bỏ Ko hoạt động cách người dùng thường dùng - bỏ Lạc lối - bỏ Source: “User interface design and evaluation”, Debbie Stone et al., 2005 Tầm quan trọng thiết kế Web (tt) n Thống kê việc sử dụng website IBM, ngày 30/08/1999 tờ New York Times q q n "Most popular feature was … search … because people couldn't figure out how to navigate the site." “The second most popular feature was the help button, because the search technology was so ineffective.“ Sau thiết kế lại q q 5/24/16 Tần suất sử dụng nút "help" giảm 84% Doanh số tăng 400% Tầm quan trọng thiết kế Web (tt) n $300 million button, Jared Spool q n http://www.uie.com/articles/three_hund_million_button/ Ông Jakob Nielsen ước tính doanh số tăng 135% tăng 10% chi tiêu cải tiến giao diện q 5/24/16 Dựa theo thông số kinh doanh, lượt truy cập website, suất, việc sử dụng tính Nội dung n n n n n 5/24/16 Tính phổ biến quan trọng thiết kế Web Text hypertext Tính tiện dụng giao diện Web Hướng dẫn gợi ý thiết kế giao diện Web Giao diện – Tốt hay xấu? Text hypertext n Text q q 5/24/16 Người đọc phải đọc trang Page Page Page Page Page n … Cấu trúc thứ tự ý tượng tùy thuộc vào tác giả Text hypertext (tt) n Hypertext q q Một tổ chức động thông tin thông qua liên kết (link) siêu liên kết (hyperlink) Cấu trúc phi tuyến, không n n n Các khối văn liên kết phi tuyến Liên kết trang tạo mạng lưới (network) hay mạng nhện (mesh) Người dùng dựa vào thông tin sẵn có để tự chọn lựa đường External link Homepage -5/24/16 10 Ví dụ Bạn đâu? Bạn làm gì? Bạn qua đâu rồi? Bây bạn làm gì? 5/24/16 39 Tiêu đề link phải có thông tin n Quy tắc – giúp người dùng có đủ thông tin trước hành động 5/24/16 40 Về thành phần đồ họa n Áp dụng nguyên lý thiết kế giao diện q Sử dụng màu cẩn thận n n n q Sử dụng font cẩn thận n n q Không sử dụng font nhỏ, không chuẩn, có cỡ cố định Dùng font có độ tương phản có độ phân giải tốt Hình ảnh/video/animation n n n 5/24/16 Không sử dụng nhiều màu cho văn Không sử dụng màu liên kết không theo chuẩn Font dễ đọc trắng thường ưa dùng Tránh hình ảnh/video/animation mức, ngoại trừ cần thiết để chuyển tải thông điệp Hình ảnh động gây ý, gây tập trung Cải dung lượng để tăng tốc độ 41 Outline n n Prevalence and importance of Web design Text and Hypertext n Web Usability considerations Guidelines and Tips on Web UI design n UI Hall of Fame and Shame n 5/24/16 42 UI Hall of Fame or Shame 5/24/16 43 UI Hall of Fame or Shame 5/24/16 44 UI Hall of Fame or Shame 5/24/16 45 UI Hall of Fame or Shame 5/24/16 46 UI Hall of Fame or Shame Source: http://www.webpagesthatsuck.com 5/24/16 47 UI Hall of Fame or Shame Source: http://www.webpagesthatsuck.com 5/24/16 48 UI Hall of Fame or Shame Source: http://www.webpagesthatsuck.com 5/24/16 49 UI Hall of Fame or Shame 5/24/16 50 UI Hall of Fame or Shame Vì sáng tiếng Việt? “Đoàn đại biểu QH Vương quốc Thái-lan Ngài Sổmsặc Kiệt-sụra-nôn” 5/24/16 51 Videos n Ten must see usability videos q 5/24/16 http://www.usefulusability.com/10-must-see-usabilityvideos/ 52 References n n n n n n n “Designing Web Usability”, Jakob Nielsen, 2004 http://www.w3.org/ http://www.ology.org/tilt/cgh/ http://usableweb.com/ http://usability.gov/ http://www.useit.com/ http://www.webpagesthatsuck.com/ 5/24/16 53 ... dụng – người dùng bỏ Tính đưa ko rõ ràng – bỏ Khó đọc - bỏ Ko hút - bỏ Gây nhàm chán - bỏ Ko hoạt động cách người dùng thường dùng - bỏ Lạc lối - bỏ Source: “User interface design and evaluation”,... progress bar Phân rã service lớn thành nhiều service nhỏ 20 Kiến trúc phát triển ứng dụng Web 5/24/16 21 Kiến trúc thông tin n Kiến trúc thông tin (information architecture) bao gồm vi c tổ chức nội... website thành mục cụ thể vi c tạo giao diện hỗ trợ mục n Phân loại thông tin (information taxonomy) công vi c chủ đạo thiết kế kiến trúc thông tin q 5/24/16 Liên quan đến vi c cấu trúc hóa cách