Web UI design pattern chapter 1 and 4

 Hướng giải quyết: Một số thứ cần chi tiết bao gồm sự chuyển hướng người dùng kể cả phím tắt, nhận đầu vào của người sử dụng, tích hợp các dịch vụ, ứng dụng và hiển thị nội dung...

Môn: Giao Tiếp Người Máy

chapter 1 and 4

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 là một

giải pháp tái sử dụng cho vấn đề phổ biến hiện nay mà bạn

có thể gặp mỗi ngày

 Nên sử dụng các mẫu thiết kế giao diện người dùng như thế

nào?

 Hiện nay có rất nhiều thư viện thiết kế đẹp được xem như các

mẫu mockup, họ cung cấp không có lời giải thích về những vấn

đề và việc thực hiện của các mẫu thiết kế

 Các cách để đánh giá một 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 quyết vấn đề gì?

 Hướng giải quyết: Một số thứ cần chi tiết bao gồm sự chuyển

hướng người dùng ( kể cả phím tắt), nhận đầu vào của người

sử dụng, tích hợp các dịch vụ, ứng dụng và hiển

thị nội dung

 Ví dụ mẫu: Đưa ra một bức ảnh mockup hoặc có thể ghi chú

thêm những điều cần thiết về mẫu thiết kế đó

 Cách sử dụng: (khi nào cần sử dụng?) kiến trúc sản phẩm, bố

trí giao diện, các mẫu đã tồn tại, kiểu người sử dụng và trường hợp sử dụng

Chương 4: Điều hướng (Navigation

 Khái niệm: Điều hướng (Navigation) là tố ưu hóa menu và các

đường liên kết trong website cho thiện cảm với người dùng, tạo điều kiện tốt trong việc tìm kiếm thông tin từ và cho cả google

 Các navigation trong thiết kế website:

 Jump to section:

 Vấn đề: người dùng muốn nhảy qua toàn bộ các phần của ứng

dụng web hoặc nội dung một cách nhanh chóng.

 Giải pháp: Tạo một nút tắt (shortcut) hoặc một điểm nóng để

người dùng có thể thực hiện và đến được phần chứa nội dung

mà họ cần.

 Ví dụ: Người dùng có thể nhấp vào một tab hoặc một nút để di

chuyển đến bất cứ nơi nào trên trang web

 Vấn đề: Người dùng muốn có một ví trí trung tâm để xem hoặc

thực hiện tối đa các hành động hoặc tất cả nội dung để không lãng phí thời gian điều hướng giữa các trang.

 Single-Page Web Apps:

 Giải pháp: Sử dụng kỹ thuật phát triển web hiện đại xây dựng

một ứng dụng trang duy nhất (single-Page) mà không tải lại

chính nó khi người dùng duyệt qua nó

 Ví dụ: Ứng dụng web như Gmail, Twiter, spotify

 Vấn đề: Người dùng muốn biết nội dung nào để xem

 Recommendations: ( sự giới thiệu- truyền cảm hứng cho người

dùng)

 Giải pháp: Hiển thị nội dung được đề xuất và giới thiệu

những điểm khác nhau để giúp người dùng duyệt qua các nội dung của mình trên 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 và tương tác quá khứ của họ với ứng dụng này qua nội dung được đưa lên bởi người dùng

 Related Content

 Vấn đề: Người dùng muốn duyệt lại nội dung tương tự nếu

nội dung hiện tại không chính xác những gì họ muốn tìm

kiếm hoặc muốn xem nhiều nội dung hơn nữa.

 Giải pháp: Hiển thị những nội dung tương tự hoặc có liên

quan đến nội dung mà họ đã xem Giống như

Recommendations, giải pháp này trở thành điều cần thiết

cho mô hình giao diện người dùng(UI pattern) cho các ứng dụng web

 Ví dụ: IMDb, Facebook, New York Times, Airbnb

Trang New York Time: gợi ý nội dung liên quan bằng các đường link liên kết để người dùng có thể click vào xem

 Next Steps

 Vấn đề: Người dùng muốn biết bước tiếp theo để hoàn

thành công việc trên web

 Giải pháp: Cung cấp cho người dùng một danh sách rõ ràng

các bước tiếp theo mà họ cần thực hiện làm phong phú thêm kinh nghiệm cho họ.

 Ví dụ: thegioididong, muachung, linkedIn

Trang muachung.com: họ đưa ra từng bước để thực hiện việc thanh toán đơn hàng

 History / Recently Viewed:

 Ví dụ: Amazon, Google Play Music, Spotify, Facebook

• Trang Amazon: Xem lại lịch sử duyệt web và các chương

trình của người dùng đã xem gần đây để họ có thể lấy lại một cách dễ dàng.

• Trang Facebook: Mục Timeline là điển hình với việc viết các

trạng thái và hình ảnh của người dùng và có thể xem lại bất

cứ lúc nào.

 Vấn đề: Người dùng muốn nhắc lại những gì họ đã tương tác

 Giải pháp: Để người dùng nhận được những hoạt động cuối

cùng khi ho rời đi

 Featured Content

 Ví dụ: Airbnb, Etsy, Facebook, Flickr

• Trang báo Genk.vn: Đưa ra điểm đặc trưng cho bài viết đó là

một tiều đề cho nội dung bài viết

• Trang Facebook: họ liên kết với các trang báo chí để hiển thị

bài viết của mình cùng với tiều đề và hình ảnh để tạo cảm

hứng cho người dùng khi click vào xem

 Vấn đề: Người dùng muốn biết những kiểu nội dung được

tạo ra với các ứng dụng

 Giải pháp: Trình bày điểm đặc biệt cho nội dung của một ứng

dụng hay một vấn đề liên quan.

 Infinite Scroll

 Ví dụ: Pinterest, Facebook, Twitter, Tumblr

Trang Facebook: Có thể xem nội dung hiển thị trên trang mà không cần phải click vào trang tiếp theo (next-page)

 Vấn đề: Người dùng muốn duyệt qua tất cả các nội dung

 Giải pháp: Tự động tải trang nội dung khi người dùng gần

tới phần dưới của trang hiện tại, tạo hiệu ứng một trang cuộn vô hạn Như vậy người dùng không phải chờ sau khi click vào trang kế tiếp

 Walkthroughs & Coach Marks

 Ví dụ: Google+, Slack, Tumblr, Facebook

 Vấn đề: Người dùng muốn biết làm cách nào để sử dụng các

chức năng khác của ứng dụng

 Giải pháp: Thiết kế ra một walkthrough (hướng) hoặc hướng

dẫn, giải thích cách một chức năng hoạt động.

 Overflow Menus

 Ví dụ: Facebook, Spotify, Google, Pinterest

 Vấn đề: Người dùng muốn truy cập nhanh đến các tùy chọn

mà họ có thể thực hiện

 Giải pháp: Ẩn các tùy chọn được thêm trong các nút menu

 Morphing Controls

 Ví dụ: Pinterest, Spotify, Facebook

• Trang Facebook: Sử dụng sử dụng một nút “like/dislike” để

tiết kiệm không gian và cũng như cho biết trạng thái của

người dùng.

 Vấn đề: Người dùng muốn thực hiện các hoạt động khác

nhau nhưng nó bị giới hạn bởi màn hình điều khiển

 Giải pháp: Thay thế các nút và điều khiển on-screens với

chức năng lựa chọn Tùy thuộc vào những gì người dùng đang thực hiện, giao diện người dùng có thể hoàn toàn thay thế với một phần tử khác.

 “Sticky” Fixed Navigation

Ví dụ: Trang Houzz: các thanh menu ở trên đầu website

Vấn đề: Người dùng muốn có quyền truy cập vào các menu bất

cứ lúc nào trên trang web

Giải pháp: Tạo các menu cố định trên đầu, ở dưới hoặc bên

phải, bên trái website khi trang được cuộn giúp người dùng

nhanh chóng truy cập vào các menu đó bất cứ khi nào họ cần.

 Vertical Navigation

 Ví dụ: Facebook, Spotify

Trang Facebook: các nội dung trên trang luôn được hiển thị

ở trung tâm

 Vấn đề: Người dùng cần một cách để điều hướng giữa các

phần khác nhau của ứng dụng nhưng có giới hạn không

gian để hiển thị thông tin.

 Giải pháp: Phần quan trọng của giao diện người dùng có

thể trình bày trong một danh sách, người dùng có thể di

chuyển đến những gì họ muốn, chẳng hạn như một thanh bar hoạt động Thường là các mẫu chuyển hướng nằm

ngang bởi các tab hoặc các nút Chuyển hướng thẳng

đứng(vertical navigation) là một sự phát triển rất ý nghĩa

trong việc thiết kế

 Popovers

 Ví dụ: Facebook, Pinterest

• Trang Facebook: Khi đưa chuột vào link của một nick name

có trên web thì xuất hiện một form thông tin cá nhân của

nick name đó.

 Vấn đề: Người dùng muốn xem thông tin liên quan mà không

mất đi vị trí hiện tại của họ trong giao diện người dùng.

 Giải pháp: Hiển thị thông báo quan trọng và hiện thị thông

tin trong form người dùng đang truy cập

 Slideouts, Sidebars & Drawers

 Ví dụ: Spotify, New York Times, Pinterest, 123phim.com

• Trang 123phim.com : hiển thị ra các liên kết bằng hình ảnh

của các bộ phim có liên quan, người dùng click vào hình ảnh

đó thì website sẽ hiển thị ra thông tin của bộ phim

 Vấn đề: Người dùng cần một cách nào đó để điều hướng các

phần khác nhau mà không phân tâm với lựa chọn cá nhân của mình

 Giải pháp: Là phần thứ cấp của ứng dụng chẳng hạn như

chuyển hướng, chat, cài đặt, hồ sơ cá nhân… được ẩn đi

trong một bảng điều khiển ở dưới phần chính khi nó không được cần đến Khi được truy cập, thường phần chính được

di chuyển sang một bên và hiển thị ra một phần phần riêng biệt từ nội dung chính

 Links to Everything

 Ví dụ: Spotify, Asana, Zing mp3

• Trang Zing mp3: Khi click vào một ca sĩ hay một bài hát thì

website sẽ hiển thị nội dung của bài hát hay ca sĩ đó.

 Vấn đề: Người dùng cần một cách nào đó chắc chắn để điều

hướng các nội dung cảm thấy phân tâm bởi nội dung bổ

sung

 Giải pháp: Hầu hết tất cả nội dung của người dùng trên ứng

dụng đã được liên kết cho phép người dùng tự do khám phá

và tìm kiếm những nội dung chính xác mà họ cần

THANKS FOR WATCHING !