Báo cáo môn học thiết kế giao diện Ứng dụng Đọc truyện

Hơn thể nữa, trong quá trình học tập và trao đôi dưới sự hướng dẫn của Cô, chúng em không những đã có được rất nhiều kiến thức bô ích, mà còn được truyền thêm sự say mê và thích thú đối

Fe

BO GIAO DUC VA ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGOẠI NGỮ - TIN HỌC TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

BAO CAO MON HOC THIET KE GIAO DIEN

UNG DUNG DOC TRUYEN

GIANG VIEN HUONG DAN:

ThS Trần Nguyễn Quỳnh Trâm

SINH VIÊN THỰC HIỆN:

Lé Thi Thu Thao — 20DH111870

Tran Nguyén Héng Chi — 20DH112255

Tran Nguyén Kim Ngan — 20DH110947

TP HO CHi MINH — NAM 2022

LOI CAM ON

Đề hoàn thành tốt bài báo cáo này, chúng em xin gửi lời cảm ơn chân thành đến giảng viên, Th.S Trần Nguyễn Quỳnh Trâm, người đã hỗ trợ cho chúng em trong quá trình làm bài Cảm ơn cô đã đưa ra những góp ý giúp chúng em khắc phục yêu điểm và hoàn thành tốt bài làm cũng như nộp đúng thời hạn đã được dé

ra trước đó

Hơn thể nữa, trong quá trình học tập và trao đôi dưới sự hướng dẫn của Cô, chúng em không những đã có được rất nhiều kiến thức bô ích, mà còn được truyền thêm sự say mê và thích thú đối với bộ môn Thiết kế đồ hoa

Mặc dù đã rất cố găng hoàn thiện bài báo cáo với tất cả sự nỗ lực, tuy nhiên,

do còn nhiều hạn chế về mặt thời gian cũng như lượng kiến thức còn hạn chế, báo cáo của chúng em về đề tài: “Đọc truyện” chắc chắn sẽ không thể tránh khỏi những thiếu sót nên chúng em rất mong nhận được những ý kiến đóng góp quý báu của các quý thầy cô để kiến thức của chúng em được hoàn thiện hơn và chúng em có thê làm tốt hơn nữa trong những lần sau

Một lần nữa chúng em xin chân thành cảm ơn cô và luôn mong nhận sự đóng góp của quý thầy cô

Cuối lời, chúng em xin kính chúc quý thầy cô Khoa Công nghệ thông tin luôn

dồi đào sức khỏe và thành công hơn nữa trong sự nghiệp trồng người

Trân trọng!

MUC LUC

LO] CAM ON ooo i

009150 92A ö-ö-ö5- a ii

DANH SACH BANG w ccesesseessessessessesseeeeeseeseeeneeneereateeseciesteeeeeseseeteneeneeeeseeneenee iv

DANH MUC HINH ooo ccccccccecccccececececececeescsesscesetecevecetscensestseteensttetenenetes V

den 0 an 1

Ni ceon9 vịoð in aa naan 1

I WR IS this FOP? oo nr KT ĐH KĐT kh 1

IV Feature List (Product RequiremenfS) ng nh nh ke ni 1

V Competitors and Product lnspiration các c1 cn SH ng rau 1

VI Deliverables LH nhu Hàng kh Hà tk kho 1 1ñ°-‹ ma 2 VIL TIM@LING oo nr er nniieeenniieeerniiiees 2 CHƯƠNG 2 - LẬP KẾ HOẠCH (PLAN) 2 S22 222222221818 ke 3

1 User Centered Business Canvas nh nh HH HH HH HH Ho HH khan 3

2 Nghiên cứu sản phẩm (đối thủ) S2 12112151 1115121 211812111 Hà HH He 4

3 USEr PerSON€S he aiAIA TẢ een nee eey 5

4 M6 HINHAARRR 0 ii 8

VP OPQ ANIZS săố EDA AGA GAHAEE EEE EEE 9

1 Functionality Map cuc nh nh nh ng khe kh tt 9

2 Sil©map ch HH nh kh nh Hà Hà tk kh ke 2115k k ke ha 9 K9 on ñ “-.‹414 ằ 10 III Thiết kế luồng (FlOWS) 221222121221 12111221111122112211121110111011 0101001 xe 14

"Tai or -‹cdcỎcd ằa aaÍiaia 14

2 User S†Orl@S nh HH HH KHE kh ĐK gi EHu 15

3 USEr FIOWS eằe.xỀ a sa =aa ốc 16

CHƯƠNG 3 - NGHIÊN CỨU NGƯỜI DÙNG (DISCOVER) 17

IS ác - na rcniieeriies 17 INe,.- o nh .aa 17

|II Card Sorfting LH n 11 n nh HT TT HH 1111111111511 k tk cha 18

NU —-00- 8.720 7 -P nn nn nn nnn nnn sone 19

CHƯƠNG 4 - PHÁC THẢO WIREFRAME (EXPLORER&DEFINE) 20

I Các luồng Wireframe - L1 121 2121122121211 2122112111111 18t 2H ro tr kg 20

I] Bang Style Quide LH nh nh HH nh ke ky khen duy 23 IN= 5u s0e‹ss‹c- 0 dd ( 23

CHUONG 5 - THIET KE MAU TƯƠNG TÁC (PROTOTYPPE) 25

| Giao diện chính ee ee eee ee ee ier irri erirritriirriitiitvitdvitdrigriigriagennnrnn ss 25

II] Luồng chuyên đôi thông báo c2 21211 11212121121221111 22 81H 2n HH ri 29

| Màn hình dự án Behance - L2 nh nh nh HH nha 30

Il Link dự án Behanece - Q0 22 S1n HE nh nh TT by rêu 30

I Những vấn đề đã làm được - - S 21221111 121111 18121111 1H HH1 He 31

II Những vấn đề chưa làm được S2 2221 1 121112 151111810121 E011 1g Hư 31

II Hướng phát triên S1 22212151 515111 81 1E1 1211111 n2 Han nà HH gi 31

DANH SACH BANG

Bang 1: Bang nghién ciru Chién WC oo cece cceccsceseeeecessesesteevssesvetseteevivereetreesereetes 3 Bang 2: Bang nghiên cứu đối thủ 0021121221 111212 118 H HH HH HH te 4

Bảng 3: Bảng mô hình AARRR Q.0 0220001122011 11 15 01111110111 nn KHE 8 5201e6.0H/30 00 ng -.‹(á 14 Bảng 5: Bảng User Sfories LH nn nh nh HH th tk ha dày 16

DANH MỤC HÌNH

Hình 1: User Persona 1 nh nh nh HH HH TH HH HH HH 5 Hình 2: User Persona 2 Q1 nh nh nh HH HH TH HH HH HH 6 Hinh 3: User Persona «AI 7 Hinh 4: Functionality Map .00c ccc cc cccceccecene cece ces seeeeceteesescesseeeesetesteecteeseeseteeeecias 9 I0: 0 ada{aa ằ 9 n9 ân an da 16 Hinh 7: Bang QUAN SAL alị ằảảằ 17 Hình 8: Bảng khảo sát 000002201111 12 2011111101 111 TH nành ng ke khe 18 Hình 9: Bảng Card Sorfing - -.- L2 01111220111 1n vn ng tk gen khe 18 Hình 10: Bảng Measure & AnalyzZe@ L Q00 0111 HS TH HH TT HH kh ke 19

Hình 11: Ý tưởng -.- St S111 11121521181 1E HH HH ng g HH HH gi 20

Hình 12: Màn hình chờ đăng nhập cho người dùng mới (mobile) 21 Hình 13: Màn hình chọn thẻ loại cho người dùng mới (mobile) . :5: 55: 21 Hình 14: Màn hình trang chủ (mobile) . cece 21220112112 1n kh khe 22 Hình 15: Horizontal & Vertical Scrolling - - - - + 1 2 2211122122 1112115111118 E1 kesre 23 Hình 16: Image Slider/ Scroll - + c1 222220111 1122011 111101 11111 211111 khe 24 Hình 17: Giao diện chính (mobile) .- L Q0 022011112121 11111 1n nh khe 25 Hình 18: Giao diện chính (VWebsife) Q Q00 0222 0nn HH Hn nh nen ke nhe 26 Hình 19: Trang chủ (Mobile} -.-L L2 Q11 TH 2H TS TT ng kn Tnhh kh 27 Hình 20: Trang chủ (VWebsife) Q.0 Q00 ng ng nh hen kh 28

Hình 21: Chuyên đổi thông báo (mobile) . 1 1211212111122 12118 H tràn 29

Hình 22: Dự án trên Behance L LL L HH HH HT TH nh nh HH nu nha 30

CHUONG 1 - HO SO DU AN

| Project Name

THAONGANCHI

Il Project Description

Bạn là người yêu thích truyện Bạn mong muốn có thể đọc truyện ở mọi lúc mọi

nơi khi có thời gian rảnh hoặc muốn xa stress Ung dụng của chúng tôi sẽ đáp ứng

mọi nhu cầu của bạn Ứng dụng cho phép bạn đọc truyện chữ, truyện tranh, ở

bát cứ đâu thông qua Smartphone hoặc Website

Ill Who is this for?

Bát cứ ai có niềm đam mê với sách, truyện hay tiêu thuyết Ứng dụng giúp ban doc

truyện một cách tự do, thoải mái và đặc biệt là không tốn chỉ phí

IV Feature List (Product Requirements)

— Giao diện thân thiện

—_ Đăng ký/ đăng nhập

— Hướng dẫn sử dụng

— Đánh giá từ người dùng

— Không bắt buộc trả phí

— Personalization screen

— App to view starts

V Competitors and Product Inspiration

— Wattpad

— NovelToon

— MangaToon

— POPS

VI Deliverables

Người dùng thử nghiệm:

o_ Có thể:

⁄_ Được đọc 1 bộ truyện VIP khoang 15 chap bát kì khi lần đầu sử dụng app

⁄_ Có thê trải nghiệm không gian và giao diện app

Trang 1

⁄ Được chiêm ngưỡng những nét vẽ siêu đẹp và su chin chu trong công việc thông qua Logo

⁄ Hiệu ứng đẹp mắt được đầu tư từ app

o Không thể:

LÌ Lưu trữ bộ truyện yêu thích khi chưa đăng nhập

[I1 Điểm danh tích tiền khi chưa là thành viên

VII Cost

Có thể lựa chọn trả phí hoặc không:

- _ Đối Với người dùng trả phí:

⁄_ Khi nạp tiền lần đầu sẽ được ưu đãi thưởng thêm thời gian đọc truyện

⁄ Không càn phải làm nhiệm vụ nếu muốn đọc những bộ truyện VIP hoặc có

bản quyên

⁄_ Có thê đọc truyện VIP và được thông báo những chương sách mới cập nhật

ngay khi tác giả vừa đăng

⁄ Có những đặc quyền như sở hữu khung hình đại diện, danh hiệu (mở theo

sự kiện) trong suốt thời gian sử dụng app

-_ Đối Với người dùng không trả phí:

1 Khi muốn đọc truyện VIP/ truyện bản quyền thì phải làm nhiệm vụ được

giao cho Tuy nhiên, nhiệm vụ có giới hạn

¡App hoàn toàn không có quảng cáo nên người dùng có thẻ thoái mái sử

dụng

VIII Timeline

- 10/06/2022: Tao User Personal (Thao)

- _ 28/09/2022: Viết Overview/ Problem (Ngân)

- 29/09/2022: Khảo sát người dùng (Nhóm)

- 04/10/2022: Sitemap/ DesignBrief (Chi)

- 06/10/2022: Lap chién lược (Nhóm)

- 26/10/2022: Tao User Flow/ User Goals (Nhém)

- 17/11/2022: Lap hé so (Ngan)

- 16/11/2022: Hoan thién san pham lan 1 (Chi)

- 17/12/2022: Danh gia, diéu chinh lan cudi (Thao)

- 18/12/2022: Danh gia lan cudi — Ban giao san pham (Nhóm)

Trang 2

| Strategize

CHUONG 2 - LAP KE HOACH (PLAN)

1 User Centered Business Canvas

PROBLEMS, | USERS USER SOLUTION ACQUISITION NEEDS FEARS CHANNELS

Dam mê đọc | Tất cả những | Bị spoil nội | Có nguồn truyện | Các diễn đàn và

truyện, không

muốn chờ đợi

người có đam dung truyện, uy tín, cập nhật hội nhóm online

mê đọc bị quảng cád nhanh, ít quảng | Facebook

những bộ truyện bị

truyện mới ngừng giữa

chừng

SOLUTIONS | ADOPTERS | GOALS PROPOSITION | SOURCES Vẫn tồn tại Thanh thiếu | Đọc truyện | Tạo ra một trang | Lợi nhuận có

quảng cáo để | niên thường | để xả stress,| đọc truyện miễn | được từ ủng hộ và

duytrìiứng |xuyên tiếp | tiết kiệm,ít | phí, sau khi đã có | việc người dùng dụng đọc xúc với công | quảng cáo, | tệp khách hang | đăng kí gói để Sử

truyện nghệ mà quá | để đọc được | đông đảo, thì sẽ | dụng các tính

bận với công | truyện ban | thu phí những năng, nhận thêm việc, học tập | quyền truyện có bản từ quảng cáo

Người đã sử SH truyện mới METRICS

dụng đọc Tải ứng dụng, truyện nhưng đăng ký gói thành

bị quảng cáo

dài

Báng 1: Bóng nghiên cứu chiến loc

Trang 3

2 Nghiên cứu sản phẩm (đối thủ)

Comparison Mê đọc truyện Manga Tool Truyện Full

Login/ Setup

Có liên kết với mạng xã hội khác

Nhanh chóng, có

thể đăng nhập

Dễ thực hiện

truyện rất nhiều

tiện dụng trực tiếp từ Social

NetWork Interaction Tuong tac con Tương tác khá Tương tác phức

cing nhac tron tru tap

Phản lớn các bộ | Mang đậm dấu án | Có chế độ đọc

Social không mắt phí dé | mái, co che do

doc do nha dich | thay doi giao diện

tu dich cho người dùng

lựa chọn Giao diện còn sơ | Giao diện đẹp Giao diện không

Ul sai mat dep mat, qua don

gian

Có sức ảnh hưởng Có sự đầu tưyề | Thu hút được số

sẵn từ Fanpage | giao diện lượng lớn người

việc cập nhật truyện liên tục và

thường xuyên

nên ảnh hưởng | nghiệp, trước khi | truyện từ các nha

Negative

không kiêm tra lại

các trang chưa

dịch/ bị lỗi chưa có sự cho

Báng 2: Bóng nghiên cứu đối thứ

Trang 4

3 User Personas

PROBLEMS Khó tìm được bộ truyện hợp gu và nhanh chán với những

bộ truyện motip cũ dài dòng

GOALS Học hỏi được nhiều thứ từ các bộ truyện

DEMOGRAPHICS

Nữ Hiện đang sinh sống và làm việc tại TP Hồ Chí Minh

Thích xem những bộ truyện tranh nổi tiếng và giành

nhiều thời gian để đọc những bộ truyện mà bản thân tâm đắc

YEN LINH

CHE Tem aan

SHORT DESCRIPTION

Là người tận tâm trong công việc, vô cùng yêu thích truyện tranh

NEEDS Một nơi dễ dàng tìm kiếm những tác truyện đọc tốt hơn

CONTEXT Hết mình vì đam mê

FEARS

Sơ bị lừa đảo do hiện tại có quá nhiều

app đọc truyện và không phân biệt được app nào là app chính thống

Hinh 1: User Persona 1

Trang 5

4 Mô hình AARRR

Business Goals Thước đo (thể hiện sự thành

công) Làm thế nào dé đo lường

Có nhiều người

dùng hơn

T¡ lệ chuyên đi (bao nhiêu

người đăng ký thông tin, bao

nhiêu người nạp tiền, bao nhiêu

người dùng app, .), lượt xem

trang, khách truy cập duy nhát

dia ban — chi nhánh của công truyén

Phân tích dựa trên sự

kiện, nên táng quảng các

Khiến người dùng

gắn bó với app

hơn

T¡ lệ thành công, sự hài lòng

Của người dùng, độ yêu thích

Của người dùng, tính năng người dùng, tỉ lệ rời đi, ưu đãi

trọn gói cho người dùng

Phỏng vần người dùng,

xem thông tin đánh giá,

phân tích dựa trên sự kiện, kiểm tra tính khả

dụng, dựa vào đánh giá

của người dùng, chỉ số

kinh doanh

Người dùng yêu

thích app từ lần đầu sử dụng và

tiếp tục sử dụng

Sau khi hoàn tắt lần đầu dùng

app, bao nhiêu người dùng vẫn

Sử dụng app sau đó, số lượng chia sẻ, gửi lời mời, lặp lại truy

cập, tỉ lệ chuyên đôi, kích

thước số truyện được mua

Phân tích dựa trên sự kiện, theo dõi sự kiện,

chỉ số kinh doanh

App dễ sử dụng Tỉ lệ thành công Kiểm tra tính khả dụng,

dựa vào đánh giá của

người dùng, chỉ só kinh

doanh

Bang 3: Bang mé hinh AARRR

Trang 8

- Những bộ truyện có tác giá nôi tiếng hoặc tác giả bản quyền của công ty TNC

mà được nhiều người yêu thích và đón nhận sẽ phải trả phí các chương/ chap truyện

để có thể đọc TNC cam đoan những bệ truyện các bạn phải bỏ tiền ra để đọc sẽ rất xứng đáng

- Khi các bạn nạp tiền vào TNC thì TNC sẽ tiến hành phan cap cho các bạn Cấp bậc càng cao thì các bạn sẽ có những đặc quyèn riêng, các bạn sẽ có cơ hội quay

giải và nhận những phần quà độc quyền mang tính thương hiệu cực chát đến từ

nha TNC

- Có những bộ truyện sẽ chỉ dành cho VIP Mà đề lên VỊP thì các bạn phải là nạp

tiền, khi là VIP thì TNC sẽ ưu tiên dành cho các bạn những ưu đãi cũng như đặc

quyên chỉ có một không hai mà chỉ riêng các bạn mới có theo tháng hoặc năm, có

thê là thời hạn hoặc là vĩnh viễn

» USER NEEDS

1 Déi nrong muc tiéu cua ban là ai (ví dự: nam và nữ 18 - 50, thu nhép trung bình, dân tóc)?

Ở mọi độ tuôi, không giới hạn Ai cũng có thể đọc và cảm nhận vẻ truyện

2 Bạn cám tháy gì là ba nhu cầu quan trọng nhát cza đố: rơng mực tiêu cửa bạn

vì nó liên quan đến doanh nghiệp ca bạn (ví dự: mua s¿n phđm, dịch vự chăm sóc khách hàng, vv}?

Ba nhu cầu quan trọng nhất của người dùng là nhu cầu giải trí, nhu cầu chăm sóc

khách hàng, nhu cau, nhu cầu thưởng thức

3 Những users có những đặc tính, thông tin nào?

Users mà chúng tôi tiếp xúc qua thì không có những đặc tính hay thông tin cụ thẻ

nào nhưng chủ yếu là thiếu nhi, tính tò mò lớn và những người đã đi làm, thường

xuyên gặp áp lực trong cuộc sống hoặc những người làm nghệ thuật có nhiều sự hiểu thấu và đồng điệu với những con chữ

4 Users cẩn những gì, có những nhu cầu nào, và có mực đích gì?

Users cần một nơi có thê hiểu được những thứ họ mong muốn Họ có nhu cầu giải

tỏa căng thăng, mệt mỏi sau công việc đây áp lực hoặc tìm hiểu ở đâu đó một câu chuyện có thê khiến bản thân vui vẻ Mục đích là khiến những tiêu cực biến mát,

có thẻ kiếm thêm thu nhập trang trải cuộc sống

Trang 12