Đang tải... (xem toàn văn)
ĐẠI HỌC QUỐC GIA HÀ NỘITRƯỜNG ĐẠI HỌC CÔNG NGHỆ
***
BÁO CÁO CUỐI KỲ
MÔN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
NGÀNH: CÔNG NGHỆ THÔNG TINLớp học phần: INT3115 2
Nhóm 8:
Hoàng Ngọc Dũng - 20020379 Bùi Đình Dương - 20020193 Nguyễn Hoàng Lâm- 20020432 Hoàng Minh Dương - 20020387 Trương Thành Chung - 20020371
HÀ NỘI – 2023
11
Trang 2IV.ĐÁNH GIÁ CỦA CHUYÊN GIA VÀ NGƯỜI DÙNG 28
1.Câu hỏi và đánh giá của người dùng 28
2.Đánh giá của chuyên gia 30
V.CÁC ĐÁNH GIÁ VÀ BÀI HỌC 31
Trang 3I.TỔNG QUAN 1 Giới thiệu
Ứng dụng “ UEvents” được thiết kế nhằm mục đích hỗ trợ sinh viên đăng ký tham dự các sự kiện do trường hoặc các công ty liên kết tổ chức, giúp sinh viên tìm kiếm các cơ hội việc làm hay cơ hội làm mới và phát triển bản thân.
Nhằm mang đến những trải nghiệm tuyệt vời khi sử dụng ứng dụng, giao diện và tính năng dễ sử dụng, thông tin được cập nhật liên tục là mục tiêu mà nhóm hướng tới.
2 Đặt vấn đề
Trong cuộc sống hiện đại ngày nay, internet có mặt hầu hết trong các lĩnh vực của đời sống, và trở thành một phần không thể thiếu trong sự phát triển của các lĩnh vực và sự tiện ích mà nó đem lại cho cuộc sống của mỗi chúng ta Công nghệ làm thay đổi mọi thứ trong cuộc sống của chúng ta theo nhiều hướng, xong lợi ích mà nó đem lại cực kỳ to lớn.
Bạn là sinh viên đang theo học tại trường đại học, tuy nhiên bạn không thể tìm hay đăng ký các sự kiện do trường hoặc các công ty liên kết tổ chức dành cho sinh viên nhằm tìm kiếm các cơ hội phát triển bản thân một cách dễ dàng.
Để đáp ứng được nhu cầu của các sinh viên, app “UEvents” ra đời nhằm phục vụ sinh viên đăng ký sự kiện Bạn chỉ cần có thiết bị di động kết nối internet, “Uevents” chắc chắn sẽ đem đến cho bạn những trải nghiệm thú vị và dễ dàng đăng ký với những sự kiện được cập nhật liên tục, chính xác.
3 Hướng giải quyết
Ứng dụng được xây dựng để đáp ứng được nhu cầu về trải nghiệm và chức năng của người dùng Ứng dụng gồm các giao diện
3
Trang 4- Giao diện tìm kiếm: Gồm các bộ lọc tìm kiếm của sự kiện - Giao diện thông báo: Hiển thị thông báo của các sự kiện - Giao diện tài khoản: Gồm các thông tin của sinh viên như: thông
tin cá nhân, thẻ sự kiện,điểm, …
4 Lớp người dùng hướng đến
Có 1 lớp người dùng cho ứng dụng là lớp người dùng sinh viên: Là những sinh viên đang theo học tại trường đại học có thói quen sử dụng app hoặc web để theo dõi thông tin, có khả năng sử dụng thuần thục các app và web công nghệ và đã có tài khoản do trường cấp.
1.Mô hình Use Case
Trang 5Hình 1: Mô hình Use Case của hệ thống Tham gia các sự kiện.
Nhận thông báo về các sự kiện tham gia hoặc theo dõi Xem thông tin cá nhân của bản thân.
5
Trang 63 Đặc tả Use Case
3.1 Đăng nhập
Tác vụ này giúp người dùng đăng nhập vào hệ thống để có thể thực hiện đầy đủ các chức năng của ứng dụng.
Luồng sự kiện: Tác vụ này bắt đầu khi người dùng mở ứng dụng.
Luồng sự kiện chính:
o Khi mở ứng dụng, màn hình đăng nhập của ứng dụng sẽ tự động hiển thị.
o Ứng dụng hiển thị danh sách các trường thông tin mà người dùng phải điền trên màn hình.
o Người dùng điền các trường thông tin email và mật khẩu và chọn Đăng nhập.
o Hệ thống sẽ kiểm tra email và mật khẩu của người dùng và chuyển về Trang chủ.
Luồng ngoại lệ:
Ở luồng sự kiện chính, nếu người dùng nhập email hoặc mật khẩu không đúng hoặc để trống ít nhất một trường thông tin hệ thống sẽ thông báo “Đăng nhập thất bại”
Yêu cầu đặc biệt: Không
Tiền điều kiện: Người dùng phải truy cập vào ứng dụng Hậu điều kiện: Nếu đăng nhập thành công người dùng sẽ được đưa vào hệ thống, nếu không trạng thái của hệ thống sẽ không thay đổi
Trang 7Mở rộng: Không
Tần suất sử dụng: Bình thường
3.2 Chọn cơ sở
Tác vụ này giúp người dùng tìm kiếm các sự kiện theo từng cơ sở của trường.
Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn chức năng Chọn cơ sở.
Luồng sự kiện chính:
o Tại Trang chủ của ứng dụng, người dùng chọn chức năng Chọn cơ sở để bắt đầu tác vụ.
o Ứng dụng hiển thị danh sách các cơ sở mà người dùng có thể tìm kiếm
o Người dùng chọn cơ sở muốn tìm kiếm.
o Hệ thống sẽ trả về các sự kiện trong cơ sở người dùng vừa chọn.
Luồng ngoại lệ: Không Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập.
Hậu điều kiện: Hệ thống trả về danh sách các sự kiện trong cơ sở.
Mở rộng: Không.
Tần suất sử dụng:Thường xuyên.
7
Trang 83.3 Tìm kiếm sự kiện
Tác vụ này giúp người dùng tìm kiếm các sự kiện theo tên sự kiện.
Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn chức năng Tìm kiếm bên trang Sự kiện.
Luồng sự kiện chính:
o Tại Trang chủ của ứng dụng, người dùng chọn trang Sự kiện rồi tiếp tục chọn chức năng Tìm kiếm để bắt đầu tác vụ.
o Người dùng nhập tên sự kiện muốn tìm kiếm vào thanh tìm kiếm rồi chọn nút tìm kiếm
o Hệ thống sẽ trả về các sự kiện có tên trùng hoặc khá giống với tên sự kiện mà người dùng yêu cầu Luồng ngoại lệ: Không.
Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập Hậu điều kiện: Hệ thống trả về danh sách các sự kiện.
Trang 9Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn chức năng Lọc sự kiện bên trang Sự kiện.
Luồng sự kiện chính:
o Tại Trang chủ của ứng dụng, người dùng chọn trang Sự kiện rồi tiếp tục chọn chức năng Lọc sự kiện để bắt đầu tác vụ.
o Ứng dụng hiển thị danh sách các trường thông tin mà người dùng phải điền trên màn hình
o Người dùng điền các trường thông tin đó rồi xác nhận lọc.
o Hệ thống sẽ tìm kiếm và trả về các sự kiện theo yêu cầu của người dùng.
Luồng ngoại lệ:
Ở luồng sự kiện chính, nếu người dùng để trống tất cả trường thông tin, hệ thống sẽ thông báo “Vui lòng chọn thông tin”.
Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập và nhập ít nhất một trường thông tin.
Hậu điều kiện: Hệ thống trả về danh sách các sự kiện Mở rộng: Không.
Tần suất sử dụng: Bình thường.
3.5 Tham gia sự kiện
9
Trang 10Tác vụ này giúp người dùng tham gia vào sự kiện Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn Tham gia sự kiện tại trang thông tin của sự kiện đó Luồng sự kiện chính:
o Sau khi người dùng chọn một sự kiện mà bản thân muốn tham gia.
o Ứng dụng hiển thị thông tin chi tiết về sự kiện o Người dùng xác nhận tham gia sự kiện.
o Hệ thống ghi nhận người dùng tham gia sự kiện, gửi các thông báo và các hoạt động về cho người dùng Luồng ngoại lệ:
Ở luồng sự kiện chính, nếu sự kiện chưa bắt đầu mà người dùng chọn tham gia thì hệ thống sẽ trả về thông báo “Sự kiện chưa diễn ra”.
Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập.
Hậu điều kiện: Hệ thống ghi nhận người dùng tham gia sự kiện, thông tin chi tết sẽ được gửi đến người dùng qua thông báo.
Mở rộng: Không.
Tần suất sử dụng: Bình thường.
3.6 Thông báo
Trang 11Tác vụ này giúp người dùng nắm bắt các thông tin về sự kiện bản thân tham gia và các sự kiện bản thân theo dõi.
Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn Thống báo.
Luồng sự kiện chính:
o Tại màn hình trang chủ, người dùng chọn trang thông báobáo.
o Ứng dụng hiển thị các thông báo dưới dạng rút gọn o Người dùngxem thông báo chi tiết bằng các nhấp vào
thông báo ấy.
o Hệ thống hiển thị chi tiết thông báo cho người dùng Luồng ngoại lệ: Không.
Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập.
Hậu điều kiện: Hệ thống hiển thị danh sách thông báo Mở rộng: Không.
Tần suất sử dụng: Thường xuyên.
3.7 Trang cá nhân
Tác vụ này giúp người dùng có thể xem lại các thông tin cảu bản thân như các sự kiện đã đăng ký, điểm,
Luồng sự kiện: Tác vụ này bắt đầu khi người dùng chọn trang Cá nhân.
Luồng sự kiện chính: 11
Trang 12o Tại màn hình trang chủ, người dùng chọn trang Cá nhân.
o Ứng dụng hiển thị trang một số thôngg tin người dùng và các công cụ khác như sự kiện đang ký, thẻ sự kiện, điểm,
o Người dùng chọn mục bản thân muốn xem o Hệ thống hiển thị thông tin chi tết về mục đó Luồng ngoại lệ: Không.
Yêu cầu đặc biệt: Không.
Tiền điều kiện: Người dùng phải đăng nhập Hậu điều kiện: Thông tin người dùng và các công cụ Mở rộng: Không.
Tần suất sử dụng: Thường xuyên.
4.Hướng dẫn các tác vụ
4.1 Đăng nhập
Khi khởi động ứng dụng, màn hình Đăng nhập sẽ hiển thị Màn hình Đăng nhập sẽ có 2 trường là Email và mật khẩu Người dùng cần nhập chính xác 2 trường này để đăng nhập vào ứng dụng.
4.2 Chọn cơ sở
Trang 13Tại Trang chủ của ứng dụng, người dùng sẽ thấy thanh Chọn
Sau khi ứng dụng chuyên chuyển đên đếntrang sự kiện, người dùnh sẽ thấy thanh Tìm kiếm.
Người dùng nhập vào tên sự kiện muốn tìm kiếm rồi xác nhận.
4.4 Lọc sự kiện
Tại trang sự kiện, người dùng có thể thấy biểu tượng bên cạnh tên trang Sự kiên.
Sau khi chọn biểu tượng Lọc sự kiện, bảng lọc sự kiện sẽ hiện ra gồm 4 trường: Cơ sở, thời gian, thể loại và phòng ban.
Người dùng cần điền ít nhất một trong 4 trường này rồi xác nhận lọc.
4.5 Tham gia sự kiện
Sau khi tìm kiếm được sự kiện muốn tham gia, người dùng chọn sự kiện này, hệ thống sẽ trả về trang thông tin chi tiết của sự kiện.
13
Trang 14Tại đây, người dùng có thể thấy nút Đăng ký ở cuối trang Người dùng nhấn vào nút này để xác nhận tham gia vào sự kiện.
4.6 Thông báo
Người dùng có thể tìm thấy trang Thông báo có biểu tượng ở thanh công cụ dưới cùng màn hình.
Khi người dùng chọn biểu tượng này, trang Thông báo sẽ hiện ra, người dùng có thể chuyển đổi qua lại giữ thông báo về các sự kiện bản thân tham gia và các sự kiện bản thân theo dõi.
Khi muốn xem chi tiết một thông báo, người dùng chỉ cần chọn vào thông báo đó.
4.7 Trang các nhân
Người dùng có thể tìm thấy Trang cá nhân có biểu tượng ở thanh công cụ dưới cùng màn hình.
Tại đây, người dùng có thể truy cập vào các công cụ: o Thẻ sự kiện: Thẻ dành cho người tham gia sự kiện o Sự kiện đã đang ký: Hiẻn thị các sự kiện mà người
dùng đăng ký tham gia.
o Coin & điểm: Coin và điểm tích lũy đựơc thông qua việc tham gia các sự kiện.
o Check in: Quét mã QR để xác nhận đã tham gia sự kiện.
5 Kịch bản tác vụ
Trang 15Người dùng mở ứng dụng UEvents, màn hình đăng nhập sẽ hiện ra.
Sau khi người dùng nhập đúng email, mật khẩu và nhấn đăng nhập, ứng dụng UEvents sẽ chuyển tới Trang chủ.
Tại trang chủ, ứng dụng sẽ hiển thị các sự kiện sắp diễn ra và các sự kiện nổi bật.
Người dùng chuyển tới trang Sự kiện rồi sử dụng công cụ Lọc sự kiện để tìm một sự kiện thích hợp với bản thân mình.
Sau khi người dùng nhấn vào sự kiện mong muốn, ứng dụng sẽ hiển thị thông tin chi tiết của sự kiện Người dùng có thể chọn Đăng ký để tham gia sự kiện.
Sau khi người dùng Đăng ký sự kiện, các thông tin chi tiết về sự kiện, các hoạt động, thay đổi sẽ luôn được cập nhập về người dùng qua Thông báo.
III HƯỚNG DẪN CÁC TÁC VỤ
1.1 Giao diện khởi động
15
Trang 16Hình 1.1 Giao diện khởi động
Trang 171.2 Giao diện đăng nhập
Hình 1.2 Giao diện đăng nhập
17
Trang 181.3 Giao diện trang chủ
Hình 1.3 Giao diện trang chủ
Trang 191.4 Giao diện tìm kiếm
Hình 1.4 Giao diện tìm kiếm
19
Trang 201.5 Giao diện sự kiện
Trang 211.6 Giao diện lọc sự kiện
Hình 1.6 Giao diện lọc sự kiện
1.7 Giao diện chi tiết sự kiện
Hình 1.7 Giao diện chi tiết sự kiện
21
Trang 221.8 Giao diện thông báo
Hình 1.8 Giao diện thông báo
Trang 231.9 Giao diện thông tin cá nhân
Hình 1.9 Giao diện thông tin cá nhân
23
Trang 241.10 Giao diện sự kiện đăng ký
Hình 1.10 Giao diện sự kiện đăng ký
Trang 251.11 Giao diện thẻ sự kiện
Hình 1.11 Giao diện thẻ sự kiện
25
Trang 261.12 Giao diện điểm & coin
Hình 1.12 Giao diện điểm & coin
Trang 271.13 Giao diện checkin
Hình 1.13 Giao diện checkin
27
Trang 28IV ĐÁNH GIÁ CỦA CHUYÊN GIA VÀ NGƯỜI DÙNG
Bản thiết kế ứng dụng được trình bày với các bạn cùng lớp để lấy ý kiến nhận xét từ các bạn, để giúp team phát triển có thể chỉnh sửa hoàn thiện trước khi đưa ra sản phẩm cuối.
Kết quả nhận được từ người dùng: Đa phần sử dụng khá thích thú, phần lớn đã sử dụng nhanh chóng nhưng vẫn còn một số tồn đọng cần giải quyết (khi số đông suy nghĩ vậy), Và các góp ý được người dùng đưa ra để team phát triển như sau.
1 Câu hỏi và đánh giá của người dùng
a Chức năng tìm kiếm
Bạn thấy chức năng có dễ sử dụng không? Dễ sử dụng ở điểm nào?
Dễ sử dụng, giao diện đơn giản
Trang 29b Chức năng xem sự kiện
c Chức năng thông báo
Bạn thấy chức năng có dễ sử dụng không? Dễ sử dụng ở điểm nào?
Dễ hiểu dễ sử dụng, giao diện hợp
Trang 30d Chức năng checkin
Bạn thấy chức năng có dễ sử dụng không? Dễ sử dụng ở điểm nào?
Dễ hiểu dễ sử dụng, giao diện hợp lý
Bạn thấy chức năng có khó sử dụng không? Khó sử dụng ở điểm nào?
Chức năng không khó sử dụng Bạn thích nhất điều gì về chức năng này? Việc chia làm hai mục làm mới và
theo dõi giúp chức năng rõ ràng hơn.
2 Đánh giá của chuyên gia
Để có được đánh giá chuyên môn cao, nhóm đã trình bày bản thiết kế với những người trong ngành UI/UX và các tiền bối đã qua môn Thiết kế giao diện người dùng trong trường Và nhóm đã tổng hợp lại các đánh giá như sau:
Với một ứng dụng đơn giản, việc sử dụng cỡ chữ vừa là hợp lý, dễ nhìn.
Do ứng dụng khá đơn giản, chưa có nhiều chức năng nên có nhiều khoảng trống trong giao diện chẳng hạn như Giao diện checkin, tuy nhiên với bố cục hợp lý thì đây không phải vấn đề lớn Thêm nữa, có thể ứng dụng sẽ nâng cấp thêm nhiều chức năng.
Trang 31V.CÁC ĐÁNH GIÁ VÀ BÀI HỌC
Sau khi hoàn thành bài tập lớn này, nhóm có các đánh giá, nhận xét tổng quan như sau:
Về ứng dụng:
Font chữ đủ lớn mang đến cảm giác dễ chịu cho người dùng Có độ tương phản màu sắc phù hợp, màu sắc chủ đạo là xanh và trắng nên mang đến cảm giác nhẹ nhàng cho người dùng.
Có nút back ở góc bên trái cho người dùng dễ sử dụng Phần menu ở bên góc dưới dễ sử dụng.
Sử dụng icon phổ biến để người dùng dễ nhận ra ý nghĩa của nó.
Bố cục giao diện được sắp xếp hợp lý và có thể điều khiển tùy biến để phù hợp với bối cảnh sử dụng.
Giao diện đơn giản, sáng sủa.
Ý kiến của các bạn thực sự rất có ích trong quá trình phát triển giao diện để có thể đưa ra các màn hình, các chức năng hướng đến tính dễ dùng.
31
Trang 32Phân chia công việc:
Hoàng Ngọc Dũng- Thi t k và thêm prototype c c màn giao diê n, cho ca s" d#ng t$m ki m s% kiê n, lọc s% kiê n, chọn cơ s(, tham gia s% kiê n
- Làm slide thuy t tr$nh
Bùi Đ$nh Dương - Thi t k c c màn giao diê n cho ca s" d#ng đăng nhâ p, trang c nhân, thông b o