Web UI design pattern chapter 1 and 4

Môn: Giao Tiếp Người Máy Seminar: Web UI Design Pattern chapter and Mục tiêu: Chương 1: Giới thiệu Chương 4: Điều hướng (Navigation) Chương 1:  Định nghĩa: Một mẫu thiết kế giao diện người dùng giải pháp tái sử dụng cho vấn đề phổ biến mà bạn gặp ngày  Nên sử dụng mẫu thiết kế giao diện người dùng nào?  Hiện có nhiều thư viện thiết kế đẹp xem mẫu mockup, họ cung cấp lời giải thích vấn đề việc thực mẫu thiết kế  Các cách để đánh giá mẫu thiết kế thích hợp với nhu cầu:  Tóm tắt vấn đề: bạn sử dụng để giải vấn đề gì?  Hướng giải quyết: Một số thứ cần chi tiết bao gồm chuyển hướng người dùng ( kể phím tắt), nhận đầu vào người sử dụng, tích hợp dịch vụ, ứng dụng hiển thị nội dung  Ví dụ mẫu: Đưa ảnh mockup ghi thêm điều cần thiết mẫu thiết kế  Cách sử dụng: (khi cần sử dụng?) kiến trúc sản phẩm, bố trí giao diện, mẫu tồn tại, kiểu người sử dụng trường hợp sử dụng Chương 4: Điều hướng (Navigation  Khái niệm: Điều hướng (Navigation) tố ưu hóa menu đường liên kết website cho thiện cảm với người dùng, tạo điều kiện tốt việc tìm kiếm thông tin từ cho google  Các navigation thiết kế website:  Jump to section:  Vấn đề: người dùng muốn nhảy qua toàn phần ứng dụng web nội dung cách nhanh chóng  Giải pháp: Tạo nút tắt (shortcut) điểm nóng để người dùng thực đến phần chứa nội dung mà họ cần  Ví dụ: Người dùng nhấp vào tab nút để di chuyển đến nơi trang web  Single-Page Web Apps:  Vấn đề: Người dùng muốn có ví trí trung tâm để xem thực tối đa hành động tất nội dung để không lãng phí thời gian điều hướng trang  Giải pháp: Sử dụng kỹ thuật phát triển web đại xây dựng ứng dụng trang (single-Page) mà không tải lại người dùng duyệt qua  Ví dụ: Ứng dụng web Gmail, Twiter, spotify  Recommendations: ( giới thiệu- truyền cảm hứng cho người dùng)  Vấn đề: Người dùng muốn biết nội dung để xem  Giải pháp: Hiển thị nội dung đề xuất giới thiệu điểm khác để giúp người dùng duyệt qua nội dung web  Ví dụ: Facebook, Spotify, Amazon, Medium Ứng dụng Facebook:Sử dụng thông tin hồ sơ cá nhân cho người dùng sử dụng tương tác khứ họ với ứng dụng qua nội dung đưa lên người dùng  Walkthroughs & Coach Marks  Vấn đề: Người dùng muốn biết làm cách để sử dụng chức khác ứng dụng  Giải pháp: Thiết kế walkthrough (hướng) hướng dẫn, giải thích cách chức hoạt động  Ví dụ: Google+, Slack, Tumblr, Facebook  Overflow Menus  Vấn đề: Người dùng muốn truy cập nhanh đến tùy chọn mà họ thực  Giải pháp: Ẩn tùy chọn thêm nút menu  Ví dụ: Facebook, Spotify, Google, Pinterest  Morphing Controls  Vấn đề: Người dùng muốn thực hoạt động khác bị giới hạn hình điều khiển  Giải pháp: Thay nút điều khiển on-screens với chức lựa chọn Tùy thuộc vào người dùng thực hiện, giao diện người dùng hoàn toàn thay với phần tử khác  Ví dụ: Pinterest, Spotify, Facebook • Trang Facebook: Sử dụng sử dụng nút “like/dislike” để tiết kiệm không gian cho biết trạng thái người dùng  “Sticky” Fixed Navigation Vấn đề: Người dùng muốn có quyền truy cập vào menu lúc trang web Giải pháp: Tạo menu cố định đầu, bên phải, bên trái website trang cuộn giúp người dùng nhanh chóng truy cập vào menu họ cần Ví dụ: Trang Houzz: menu đầu website  Vertical Navigation  Vấn đề: Người dùng cần cách để điều hướng phần khác ứng dụng có giới hạn không gian để hiển thị thông tin  Giải pháp: Phần quan trọng giao diện người dùng trình bày danh sách, người dùng di chuyển đến họ muốn, chẳng hạn bar hoạt động Thường mẫu chuyển hướng nằm ngang tab nút Chuyển hướng thẳng đứng(vertical navigation) phát triển ý nghĩa việc thiết kế  Ví dụ: Facebook, Spotify Trang Facebook: nội dung trang hiển thị trung tâm  Popovers  Vấn đề: Người dùng muốn xem thông tin liên quan mà không vị trí họ giao diện người dùng  Giải pháp: Hiển thị thông báo quan trọng thị thông tin form người dùng truy cập  Ví dụ: Facebook, Pinterest • Trang Facebook: Khi đưa chuột vào link nick name có web xuất form thông tin cá nhân nick name  Slideouts, Sidebars & Drawers  Vấn đề: Người dùng cần cách để điều hướng phần khác mà không phân tâm với lựa chọn cá nhân  Giải pháp: Là phần thứ cấp ứng dụng chẳng hạn chuyển hướng, chat, cài đặt, hồ sơ cá nhân… ẩn bảng điều khiển phần không cần đến Khi truy cập, thường phần di chuyển sang bên hiển thị phần phần riêng biệt từ nội dung  Ví dụ: Spotify, New York Times, Pinterest, 123phim.com • Trang 123phim.com : hiển thị liên kết hình ảnh phim có liên quan, người dùng click vào hình ảnh website hiển thị thông tin phim  Links to Everything  Vấn đề: Người dùng cần cách chắn để điều hướng nội dung cảm thấy phân tâm nội dung bổ sung  Giải pháp: Hầu hết tất nội dung người dùng ứng dụng liên kết cho phép người dùng tự khám phá tìm kiếm nội dung xác mà họ cần  Ví dụ: Spotify, Asana, Zing mp3 • Trang Zing mp3: Khi click vào ca sĩ hay hát website hiển thị nội dung hát hay ca sĩ THANKS FOR WATCHING ! ...Mục tiêu: Chương 1: Giới thiệu Chương 4: Điều hướng (Navigation) Chương 1:  Định nghĩa: Một mẫu thiết kế giao diện người dùng giải pháp tái... Recommendations, giải pháp trở thành điều cần thiết cho mô hình giao diện người dùng (UI pattern) cho ứng dụng web  Ví dụ: IMDb, Facebook, New York Times, Airbnb Trang New York Time: gợi ý nội... vào menu lúc trang web Giải pháp: Tạo menu cố định đầu, bên phải, bên trái website trang cuộn giúp người dùng nhanh chóng truy cập vào menu họ cần Ví dụ: Trang Houzz: menu đầu website  Vertical