Báo Cáo Cuối Kỳ Thiết Kế Giao Diện Người Dùng Ứng Dụng “ Uevents”.Pdf

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.7 MB, 32 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>ĐẠI HỌC QUỐC GIA HÀ NỘITRƯỜNG ĐẠI HỌC CÔNG NGHỆ</b>

***

<b>BÁO CÁO CUỐI KỲ</b>

<b>MÔN: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG</b>

<b>NGÀNH: CÔNG NGHỆ THÔNG TINLớp học phần: INT3115 2</b>

Hồng Ngọc Dũng - 20020379 Bùi Đình Dương - 20020193 Nguyễn Hồng Lâm- 20020432 Hoàng Minh Dương - 20020387 Trương Thành Chung - 20020371

<b>HÀ NỘI – 2023</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b><small>IV.ĐÁNH GIÁ CỦA CHUYÊN GIA VÀ NGƯỜI DÙNG...28</small></b>

<b><small>1.Câu hỏi và đánh giá của người dùng...28</small></b>

<b><small>2.Đánh giá của chuyên gia...30</small></b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>I.TỔNG QUAN</b>

<b>1. Giới thiệu</b>

Ứ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.

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.

<b>3. Hướng giải quyết</b>

Ứ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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="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, …

<b>4. Lớp người dùng hướng đến</b>

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.

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<i><b>Hình 1: Mơ hình Use Case của hệ thống</b></i> 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.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

Mở rộng: Khơng

Tần suất sử dụng: Bình thường

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.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Luồ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”.

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Tá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.

<i><b>3.6. Thơng báo</b></i>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Tá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.

<i><b>3.7. Trang cá nhân</b></i>

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: <small>11</small>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

o 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.

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.

<b><small>4.</small>Hướng dẫn các tác vụ</b>

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Tạ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.

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.

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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Tạ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.

<i><b>4.6. Thơng báo</b></i>

Người dùng có thể tìm thấy trang Thơng báo có biểu tượng <small> ở thanh cơng cụ dưới cùng màn hình.</small>

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 đó.

<i><b>4.7. Trang các nhân</b></i>

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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

Ngườ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.

<b>III. HƯỚNG DẪN CÁC TÁC VỤ</b>

1.1. Giao diện khởi động

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

1.2. Giao diện đăng nhập

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

1.3. Giao diện trang chủ

<i><b>Hình 1.3. Giao diện trang chủ</b></i>

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

1.4. Giao diện tìm kiếm

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

1.5. Giao diện sự kiện

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

1.6. Giao diện lọc sự kiện

1.7. Giao diện chi tiết sự kiện

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

1.8. Giao diện thơng báo

<i><b>Hình 1.8. Giao diện thông báo</b></i>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

1.9. Giao diện thông tin cá nhân

<i><b> Hình 1.9. Giao diện thơng tin cá nhân</b></i>

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

1.10. Giao diện sự kiện đăng ký

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

1.11. Giao diện thẻ sự kiện

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

1.12. Giao diện điểm & coin

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

1.13. Giao diện checkin

<i><b>Hình 1.13. Giao diện checkin </b></i>

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>IV. ĐÁNH GIÁ CỦA CHUYÊN GIA VÀ NGƯỜI DÙNG</b>

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 hồ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.

<b>1. Câu hỏi và đánh giá của người dùng</b>

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

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

b. 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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

d. 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.

Để có được đánh giá chun 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.

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

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 q 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.

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

<small>Hồ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</small>

<small>- Làm slide thuy t tr$nh</small>

<small>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</small>

</div>