(Tiểu luận) báo cáo đồ án môn thiết kế giao diện người dùng đề tài website phụ kiện điện thoại

IE106 – Thiết kế Giao diện Người dùngChương 1: Quy trình khảo sát phần mềm Chương 2: Thiết kế phác thảo giao diện Chương 3: Giao diện website hoàn chỉnh Chương 4: Tương tác giao diện Chư

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KĨ THUẬT THÔNG TIN

BÁO CÁO ĐỒ ÁN

MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Đề tài: Website phụ kiện điện thoại

IE106 – Thiết kế Giao diện Người dùng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

……., ngày…… tháng……năm 20…

Người nhận xét

(Ký tên và ghi rõ họ tên)

IE106 – Thiết kế Giao diện Người dùng

BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN:

Bảng 1: Bảng phân công, đánh giá thành viên

Họ và tên MSSV Phân công

Tuần 1: Làm nhữngcông việc gì?

Tuần 2: …

Đánh giáTuần 1: Hoàn thành công việc được giao hay không? Có khuyết điểm gì trong làm việc nhóm hay không? Đánh giá từ nhóm cho bạn, Tuần 2: …

IE106 – Thiết kế Giao diện Người dùng

Chương 1: Quy trình khảo sát phần mềm

Chương 2: Thiết kế phác thảo giao diện

Chương 3: Giao diện website hoàn chỉnh

Chương 4: Tương tác giao diện

Chương 5: Kết luận

IE106 – Thiết kế Giao diện Người dùng

DANH MỤC CÁC BẢNG, HÌNH ẢNH

Danh mục các bảng:

Bảng 1: Bảng phân công, đánh giá thành viên……… 03

Danh mục hình ảnh: Hình 1.1: Phiếu khảo sát hiện trạng nghe nhạc 10

Hình 1.2: Mục đích nghe nhạc của người dùng 10

Hình 1.3: Những nền tảng mà người dùng hay tương tác 10

Hình 1.4: Những yêu cầu về ứng dụng nghe nhạc (Mobile) 11

Hình 1.5: Những yêu cầu về một website nghe nhạc (website) 11

Hình 2.1: Bản phác thảo thử nghiệm 31

Hình 2.2: Yêu cầu của người dùng về website nghe nhạc 31

Hình 2.3: Thiết kế phẳng tối giản 32

Hình 2.4: Ví dụ về menu ẩn 33

Hình 2.5: Cuộn trang để di chuyển đến các mục khác 33

IE106 – Thiết kế Giao diện Người dùng

MỤC LỤC

LỜI MỞ ĐẦU 4

DANH MỤC CÁC BẢNG, HÌNH ẢNH 5

Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 7

1.1Khảo sát yêu cầu khách hàng và phân tích yêu cầu 7

1.1.1 Khảo sát yêu cầu: 7

1.1.2 Phân tích yêu cầu và đề xuất giải pháp 7

1.2Tìm hiểu, nghiên cứu ứng dụng liên quan 7

1.2.1 Ứng dụng 1 7

1.2.2 Ứng dụng 2 7

1.3Rút ra kinh nghiệm 7

Chương 2: PHÁC THẢO GIAO DIỆN 8

2.1Bản phác thảo… 8

2.2Bản phác thảo website …… 8

Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 9

3.1Giao diêni website … 9

3.2……… 9

Chương 4: TƯƠNG TÁC GIAO DIỆN 10

4.1Tương tác giao diện 10

4.2Tạo tương tác ………… 10

Chương 5: KẾT LUẬN 11

5.1Ưu điểm 11

5.2Nhược điểm 11

5.3Hướng phát triển 11

TÀI LIỆU THAM KHẢO 12

PHỤ LỤC (nếu có) 12

IE106 – Thiết kế Giao diện Người dùng

IE106 – Thiết kế Giao diện Người dùng

phân tích yêu cầu

1.1.1 Khảo sát yêu cầu:

Link khảo sát:

https://docs.google.com/forms/d/e/1FAIpQLSc8BACagHsME474rN5mBkbPl5Boh3HQ nKzW8wo0YXXph787mw/viewform?fbclid=IwAR3E4lz3IEFR9xiZdhKpnMcc1Ip0- wNNf5x3YGCsPlrIB89EHpfPjHZ1CT8

Sau khi hoàn thành khảo sát với, nhóm em đã có phản hồi tích cực sau về phía người dùng, cụ thể một số khảo sát nổi bật như:

Các trang web khách hàng thường hay mua

Hình 1.1: Các trang web khách hàng thường ghé thăm

Điều chưa hài lòng của khách hàng khi xem các trang web về phụ kiện

IE106 – Thiết kế Giao diện Người dùng

Hình 1.2: Điểm chưa hài long của khách hàng

1.1.2 Phân tích yêu cầu và đề xuất giải pháp

Khách hàng là những người có cái nhìn tổng quát và rõ ràng nhất về giaodiện cũng như khả năng tương tác với website Đáp ứng những yêu cầu của kháchhàng và giúp cho khách hàng có trải nghiệm dễ dàng, tạo sự thích thú khi sử dụngwebsite để mua hàng

1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan

1.2.1 Điện máy xanh

Ưu Giao diện dạng lưới, dễ sử dụng Các mục

điểm sản phẩm phân chia rõ ràng

Bộ lọc sản phẩm phân chia rất đầy đủ, chi

tiết

Nhược Mục sản phẩm khá to, không thể nhìn được

điểm trọn vẹn sản phẩm ở cả 2 hàng, người mua

khó so sánh sản phẩm ở 2 hàng

Khi di chuyển chuột vào các mục trên thanh

menu không có highlight, khiến người dùng

có thể bấm nhầm

1.2.2 Thế giới di động

Ưu điểm:

Trang chủ

IE106 – Thiết kế Giao diện Người dùng

Tông nền trắng được sử dụng cho toàn bộ cả phần trang chủ: Tổng thể cả

trang rất dễ chịu và thoáng mắt

Đã có giao diện trang chủ mới: Trang web mới của Thế Giới Di Động đã chínhthức thay block article cũ bằng 4 banner ngành hàng mới Cho bạn biết những khuyến mãi mới hấp dẫn nhất, bạn nhấn Xem ngay để biết rõ thông tin chươngtrình

Các chương trình khuyến mãi được thiết kế với tông màu đen và vàng: Bố trí thẩm mỹ và đầy đủ thông tin cần thiết

IE106 – Thiết kế Giao diện Người dùng

Săn sale online cũng sử dụng tông màu vàng làm nền (Mới): Làm nổi bật tổng thể trang màu trắng

Cung cấp đa dạng hệ sản phẩm: Các sản phẩm trong từng chuyên mục được sắp xếpkhá đơn giản và gọn gàng với đầy đủ tên, giá, hình ảnh và xếp hạng của sản phẩm;

có thể nắm đầy đủ các thông tin cơ bản mà không cần nhấp chuột vào

IE106 – Thiết kế Giao diện Người dùng

Trang mua sắm điện thoại

Bộ lọc:

o C1: Được hiển thị cực kỳ chi tiết với toàn bộ các thuộc tính để lọc sản phẩm đã được sắp xếp hết ở trên đầu trang

IE106 – Thiết kế Giao diện Người dùng

C2: Có thể tìm kiếm trong trang bộ lọc và nội dung cũng được hiển đầy

đủ không kém.

Sản phẩm: sản phẩm ở trong trang này cũng được tập trung chính vào phần nhìn nên phần hình ảnh, kích thước tên sản phẩm và giá cũng khá lớn

IE106 – Thiết kế Giao diện Người dùng

Nhược điểm:

Menu dropdown: Không có highlight màu khi lựa chọn các mục, có thể khiến

người dùng không xác định được đúng mục cần tìm Ngoài ra, các danh mục lựa chọn được chia ra quá nhiều, chữ cũng bị nhỏ đi tạo cảm giác khó quan sát

và bị rối khi tìm kiếm

IE106 – Thiết kế Giao diện Người dùng

Chatbox: mất thời gian vì phải điền thông tin trước khi được hỗ trợ

Thông tin sản phẩm: Các thông tin cơ bản sản phẩm được hiện rõ ra mà không

phải nhấn vào sản phẩm đó, tuy nhiên, các sản phẩm đặt quá gần với nhau, cùng vớilượng thông tin sản phẩm nhiều và nhỏ khiến người dùng không thể đọc được rõ cũngnhư so sánh quan sát được ưu,nhược của sản phẩm

IE106 – Thiết kế Giao diện Người dùng

IE106 – Thiết kế Giao diện Người dùng

IE106 – Thiết kế Giao diện Người dùng

Phần Chat với nhân viên, phải điền thông tin xong mới có thể Chat, gây tốn thời gian cho khách hàng

Nhìn chung, Cellphones là một trang web chuyên nghiệp, đầy đủ các tính năng cần

thiết và bố cục khá rõ ràng mà rành mạch Các chức năng tìm kiếm, thanh toán, …giúp khách hàng khá dễ dàng đễ thao tác trên đó

Tạo một giao diện dễ sử dụng cho người dùng

IE106 – Thiết kế Giao diện Người dùng

Hình 2.2: Yêu cầu của người dùng về website nghe nhạc

Từ khảo sát yêu cầu nhóm chúng em phác thảo …

IE106 – Thiết kế Giao diện Người dùng

2.1 Giao diênt website …

………

Hình 3.3: Giao diện website mẫu

………Giao diêni của website được hình thành từ sự kết hợp giữa bốcục website và Themes, nếu bạn thay đổi môti trong hai yếu tố này bạn sẽ nhâni đượcgiao diêni khác………

2.2 ………

………

IE106 – Thiết kế Giao diện Người dùng

3.1 Tương tác giao diện

… tác thông minh với các chuyển động hợp lý và được đánh giá cao vềtrải nghiệm

3.2 Tạo tương tác …………

……….như thực tế

Ví dụ: Tương tác trên giao diện trên trang chủ:

Hình 4.4: Tương tác trên giao diện trên trang chủ

Link thực nghiệm ứng dụng: https………

Nếu không mở thực nghiệm được thì Cô có thể theo dõi video demo của nhóm chúng

em: Link videos:

https://

-IE106 – Thiết kế Giao diện Người dùng

IE106 – Thiết kế Giao diện Người dùng

TÀI LIỆU THAM KHẢO

1. Lê Thị Mỹ, “Ngoại giao Cộng hòa Nhân dân Trung Hoa 30 năm cải cách mở cửa (1978-2008)” Hà Nội: Nxb Khoa học Xã hội, 2007.

2. T Tamminen, “Eutrophication and the Baltic Sea: Studies on Phytoplankton, Bacterioplankton and Pelagic Nutrient Cycles,” PhD thesis, University of Helsinki,

Finland, 1990

3. T Trabasso and E Bouchard, “Teaching readers how to comprehend text

strategically,” in Comprehension instruction: Research-based best practices, C C.

Block and M Pressley, Eds New York: The Guilford Press, 2002, pp 176–200

4. N C Trí, “Nâng cao năng lực cạnh tranh của các doanh nghiệp du lịch thành

phố Hồ Chí Minh đến năm 2020,” Luận án Tiến sĩ kinh tế, Trường Đại học Kinh tế Tp.

HCM, 2011

5. Trần Minh Trí, “Nuôi tôm thẻ chân trắng trải bạt nền đáy,” 2015 [Trực tuyến] Địachỉ: http://thuysanvietnam.com.vn/nuoi-tom-the-chan-trang-trai-bat-nen-day-article- 6651.tsvn [Truy cập lần cuối 21/7/2016]

PHỤ LỤC (nếu có)