Thiết Kế Giao Diện & Trải Nghiệm Người Dùng (Uxui Design) (Báo Cáo Thực Tập).Doc

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM NGƯỜI DÙNG (UX/UI DESIGN) Công ty thực tập Long Van System Solution Người phụ trách Mentor[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

THIẾT KẾ GIAO DIỆN & TRẢI NGHIỆM

NGƯỜI DÙNG (UX/UI DESIGN)

TP Hồ Chí Minh, tháng 12 năm 2022

Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ NgànhUI/UX Designer tại Việt Nam đã và đang phát triển mạnh mẽ, để hòa nhập với những công tyhàng đầu trên thế giới Bên cạnh với xu thế thời đại, UX/UI cũng đang dần giúp các công ty tạonên những giá trị tốt hơn, hoàn thiện hơn bao giờ hết.

UI (viết tắt của User Interface) dùng để mô tả giao diện người dùng, bao gồm những yếu

tố mà người dùng tiếp xúc với trang web hoặc ứng dụng đó Trong khi đó, UX (viết tắt của UserExperience) chính là trải nghiệm của người dùng Nói cách khác, đây là cách thức mà ngườidùng tương tác với những yếu tố UI được tạo ra Cả hai yếu tố UI UX đều rất quan trọng bởitính tương trợ của chúng sẽ ảnh hưởng trực tiếp tới lên quá trình sử dụng sản phẩm và cảm nhậncủa người dùng Tuy vậy, vai trò của UI UX lại không hề giống nhau trên nhiều khía cạnh, từ cảquá trình phát triển sản phẩm cho tới những nguyên lý, nguyên tắc thiết kế

Sau hơn ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũngnhư muốn được trở thành một Nhà thiết kế giao diện & trải nghiệm người dùng trong một môitrường chuyên nghiệp Vì vậy, em quyết định chọn Long Van System Solution - một môitrường lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Long Van System Solution đã tạo điều kiện cho em

có cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của anh mentor và các anhchị trong team, em đã tiếp thu được những kiến thức quan trọng để có thể làm được một vàicông việc về UX/UI Chân thành cảm ơn anh Mentor và các anh chị khác trong công ty đã bỏ ranhiều thời gian,công sức để hướng dẫn em hoàn thành đợt thực tập này

Đặc biệt cảm ơn anh Phùng Hợp đã training UX/UI, hướng dẫn, giúp đỡ cho em tận tình

cả những khó khăn trong công việc, đến những khó khăn việc làm quen với môi trường mới

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điềukiện em làm bài báo cáo này

<Bùi Minh Thịnh>

<TpHCM, 12/12/2022>

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1: Giới thiêu công ty thực tập 6

1 Giới thiệu công ty Long Van System Solution 6

2 Sản phẩm của công ty 6

3 Văn hoá của công ty 7

4 Một số khách hàng tiêu biểu 7

Chương 2: Nội dung thực tập 9

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 9

2 Nghiên cứu kỹ thuật 9

2.1 Các công cụ quản lý công việc 9

2.2 Tìm hiểu về Figma 10

2.3 Thiết kế giao diện người dùng 11

2.4 Thiết kế trải nghiệm người dùng 12

3 Thực hiện công việc 14

4 Lịch làm việc 14

Chương 3: Chi tiết công việc 15

1 Giao diện máy POS 15

1.1 Yêu cầu 15

1.2 Danh sách giao diện 15

1.3 Thực hiện 17

1.4 Kế hoạch thực hiện 17

1.5 Kết quả đạt được 17

2 Giao diện ứng dụng chấm công 17

2.1 Yêu cầu 17

2.2 Danh sách giao diện 18

2.3 Thực hiện 19

2.4 Kế hoạch thực hiện 19

2.5 Kết quả đạt được 19

Chương 4: Tổng kết 20

1 Kết quả thu được 20

2 Những khó khăn gặp phải trong quá trình thực tập 20

3 Gợi ý cho lộ trình phát triển tương lai 20

4 Cảm nhận về công ty 20

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Long Van System Solution

Công ty Cổ phần Giải pháp Hệ thống Long Vân là một trong những công ty tiênphong ở Việt Nam chuyên phát triển các ứng dụng trên nền tảng công nghệ điện toánđám mây, từ đó cung cấp các giải pháp dịch vụ liên quan cho khách hàng cá nhân vàdoanh nghiệp

Long Vân là đối tác của các nhà cung cấp công nghệ hàng đầu thế giới: NetApp,Vmware, Cisco,… chúng tôi tự tin đem đến cho khách hàng những sản phẩm dịch vụchất lượng cao tạo thành từ những tinh hoa công nghệ trên thế giới

Long Vân hiện với 2 văn phòng chính Nam & Bắc, Trung Tâm Kỹ Thuật, Datacenter, sẵn sàng 24/7/365 trong việc hỗ trợ khách hàng nhanh chóng - nhiệt tình của

bộ phận kỹ thuật, cũng như sự hướng dẫn - tư vấn về dịch vụ một cách chuyênnghiệp của bộ phận kinh doanh, Long Vân hi vọng mang lại cho khách hàng và đốitác sự tin cậy, an tâm và hài lòng nhất, đảm bảo cung cấp cho khách hàng nhữngdịch vụ tốt nhất với chi phí phù hợp theo từng nhu cầu và khả năng của khách hàng

Sứ mệnh của Long Vân là mang đến sự hài lòng cao nhất cho khách hàng, giúpkhách hàng đạt được các mục tiêu kinh doanh bằng cách đưa ra các giải pháp hệthống và phần mềm với công nghệ tiên tiến và ưu việt nhất từ nền tảng Cloud.

Nhờ những thỏa thuận hợp tác với các thương hiệu lớn, Long Vân liên kết đượcnhững thương hiệu lớn trên toàn thế giới với các sản phẩm như Emobi Game,Smedia, Gạch Việt Nhật, Saigon Flea Market,…

3 Văn hoá của công ty

Văn hóa ở Long Vân được xây dựng dựa trên các giá trị cốt lõi như:

- Luôn luôn ủng hộ lẫn nhau và sẵn sàng nỗ lực hơn nữa vì một mục tiêu chungcủa đội / nhóm / công ty

- Ý chí cầu tiến, luôn luôn phấn đầu vì những mục tiêu xa hơn nữa

- Đóng góp phát triển nhóm ngay cả khi không thuộc trách nhiệm của bạn

- Suy nghĩ, quan tâm và hành động của bản thân

Thời gian làm việc từ thứ 2 đến thứ 6 (8h00 – 17h00) Thời gian nghỉ trưa từ 12h00đến 13h00, mọi nhân viên có thể ăn trưa, nghỉ ngơi trước khi bắt đầu công việc vàobuổi chiều Đồ ăn nhẹ, nước uống, trà, cà phê, trái cây được miễn phí cho tất cả nhânviên

Nhân viên sau mỗi ngày làm việc được khuyến khích ghi chú lại thời gian, đầu mụccông việc đã làm trong một ngày trên hệ thống của công ty để đảm bảo dự án đangđược thực hiện một cách tốt nhất

4 Một số khách hàng tiêu biểu

Sứ mệnh của Long Vân là mang đến sự hài lòng cao nhất cho khách hàng, giúp kháchhàng đạt được các mục tiêu kinh doanh bằng cách đưa ra các giải pháp hệ thống và phầnmềm với công nghệ tiên tiến và ưu việt nhất từ nền tảng Cloud Những khách hàng tiêubiểu mà chúng tôi đã và đang phục vụ:

- Emobi Game – Nhà phát triển game hàng đầu Việt Nam.

- Kết quả xổ số - Trang web cung cấp kết quả xổ số với lượng truy cập cao nhất ở

Việt Nam

- Smedia - Công ty truyền thông hàng đầu trong việc cung cấp dịch vụ giá trị gia

tăng trên SMS

- Gạch Việt Nhật – Nhà cung ứng gạch trang trí uy tín và chất lượng

- Saigon Flea Market – Mô hình chợ trời, chợ phiên thành công nhất ở Việt Nam.

- Bóng Đá Net - Một trong những trang tin tức trực truyến về bóng đá uy tín nhất.

- Oxygen - Một trong những nhà cung cấp dịch vụ quảng cáo cho các doanh

nghiệp vừa và nhỏ đáng tin cậy và chuyên nghiệp

Chương 2: Nội dung thực tập

Đợt thực tập với vị trí “UX/UI Designer” nhằm mục đích giúp sinh viên thực tập đượcđào tạo toàn diện về thiết kế trải nghiệm & giao diện người dùng, đồng thời rèn luyện những kỹnăng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được họctập, khám phá và làm việc trong một môi trường phát triển sản phẩm chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triên(như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức củacông ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công tynhư thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong côngviệc…

Kết quả : Hiểu thêm về công ty Long Vân, quá trình thành lập và phát triển Có thêm các

kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có tráchnhiệm hơn

2 Nghiên cứu kỹ thuật

2.1 Các công cụ quản lý công việc

Thời gian : 1 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc để quản

lý các công việc và tác vụ

Trong thời gian này, Mentor đã hướng dẫn thực tập sinh tìm hiểu về các công cụ

sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số đó như Trello –công cụ quản lý tasks dự án, Slack, Skype – công cụ liên lạc và trò chuyện trong quátrình làm việc, Phần mềm nội bộ công ty – công cụ quản lý nội dung công ty và tiến

độ công việc

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên.

Kết quả : Hiểu được cách sử dụng và quy tắc sử dụng công cụ, giúp dễ dàng kết hợp

các công cụ với nhau

2.2 Tìm hiểu về Figma

Thời gian : 7 ngày

Nội dung : Được training về cách sử dụng các tính năng trong công cụ, những kiến

thức quan trọng để tạo ra các hình khối, các frame, các chữ, màu sắc, các thuộc tínhcủa chúng, kết hợp với các widget và plugin để xây dựng các hình theo ý muốn

- Hình khối

Các kiến thức cơ bản về việc tạo ra các hình như hình chữ nhật, hình ellipse, hìnhtam giác, hình ngôi sao, đường thẳng, mũi tên, cách kết hợp giữa chúng thành cácselection để tạo ra một hình mới

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, đúc kết, hệ thống hoá kiến thức đã học

Kết quả :

- Nâng cao kỹ năng thiết kế với Figma

- Ngoài ra còn được biết thêm một số quy tắc trong việc thiết kế sao cho đúngchuẩn, dễ nhìn, tiện lợi để tạo ra

2.3 Thiết kế giao diện người dùng

Nội dung: Các kiến thức cơ bản về thiết kế giao diện người dùng để có thể làm ra các

giao diện trên đa nền tảng thiết bị

- Khái niệm cơ bản về thiết kế giao diện người dùng

Nắm được các khái niệm cơ bản về thiết kế giao diện người dùng, là một quá trìnhkhông thể thiếu để tạo ra sản phẩm mang đến người dùng Các ưu điểm và khuyếtđiểm thường mắc phải khi thiết kế giao diện

- Style Guides

Làm thế nào để có thể truyền thông được thương hiệu của mình đến với ngườidùng Đó chính là Style Guide, thứ tập trung chủ yếu vào phong cách Chúng baogồm màu sắc, font chữ, logo và thuộc tính thương hiệu

- Design System

Design System chủ yếu là bộ sưu tập các quy luật, nguyên tắc, ràng buộc áp dụngtrong thiết kế và code Ba thuộc tính này phục vụ các chức năng riêng biệt, tínhthống nhất và tính hệ thống

- Thiết kế giao diện đa thiết bị

Học cách và quy luật thiết kế trên nhiều thiết bị khác nhau như mobile, tablet,laptop,… Cách áp dụng auto layout và contraints để thiết kế một cách tối ưu nhất,

…

- Sketch

Sketch là bản phác thảo nhanh UI, nhằm ghi lại ý tưởng nhanh về một chức năngnào đó Mục đích của Sketch là để capture nhanh những ý tưởng lúc tư duy mộtmình hoặc đang brainstorm với nhau

- Wireframe

Là bố cục của giao diện người dùng, mặc dù không quá chi tiết nhưng nó thể hiện

rõ được luồng thao tác của người dùng (user flow) và cấu trúc các nhóm thông tin

có trên UI đó

- Mockup

Mockup chi tiết hơn Wireframe về: màu sắc, vị trí field, kích cỡ, hình ảnh, fontchữ, đường kẻ, phân lô, phân luồng, thậm chí là validation của các trường dữ liệu.

- Prototype

Nhìn bên ngoài, Prototype khá giống Mockup Nhưng điều làm Prototype trở nênthú vị hơn là khả năng tương tác của nó Với Prototype, người dùng hoàn toàn cóthể tương tác trực tiếp với nó như: nhấn nút, kéo thả, trượt lên, trượt xuống, mởpopup, Điều này sẽ giúp khách hàng hình dung rõ ràng hơn về sản phẩm mà họ

sẽ nhận được

Thực hiện :

- Tham gia đầy đủ các buổi trainning

- Làm các bài tập thực hành được yêu cầu

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

Kết quả :

- Hiểu được những khái niệm cơ bản về thiết kế giao diện người dùng

- Đã thực hiện được vài giao diện người dùng mẫu trên các trang mạng xã hội

2.4 Thiết kế trải nghiệm người dùng

Nội dung : Các kỹ thuật, quy luật để tạo ra một trải nghiệm tốt khi sử dụng giao diện

của người dùng

- Định nghĩa về Trải nghiệm người dùng:

Thiết kế trải nghiệm người dùng (UXD) là quá trình nâng cao sự hài lòng củangười dùng với sản phẩm bằng cách cải thiện khả năng sử dụng, khả năng truycập và sự hài lòng khi tương tác với sản phẩm

- Tầm quan trọng của thiết kế trải nghiệm người dùng:

Thiết kế trải nghiệm người dùng tốt không chỉ làm nổi bật và nâng tầm sản phẩmcủa bạn, mà nó còn trở thành một phần quan trọng trong việc xây dựng và pháttriển sự tin tưởng của khách hàng

Một sản phẩm tuyệt vời hoặc nội dung hấp dẫn mà không có trải nghiệm ngườidùng hấp dẫn có thể ảnh hưởng đến khả năng đạt được mục tiêu kinh doanh

- Phương pháp tiếp cận tốt nhất để thiết kế trải nghiệm người dùng: Thiết kế lấyngười dùng làm trung tâm (Human – Centered Design - HCD):

Yếu tố chính của sự thành công nằm trong việc bạn đặt người dùng ở trung tâmcủa quá trình thiết kế Cách tiếp cận này cho phép bạn tạo ra các thiết kế sạch sẽ,đơn giản, trực quan, linh hoạt và hấp dẫn, đồng thời cung cấp trải nghiệm tuyệtvời cho người dùng và do đó có thể phân biệt bạn với đối thủ cạnh tranh của bạn.Quy trình thiết kế trải nghiệm người dùng:

- Understand - Hiểu: Để cung cấpmột giải pháp, trước tiên bạn cầnhiểu vấn đề để sau đó có thể giảiquyết vấn đề

- Research - nghiên cứu: Nghiêncứu là chìa khoá quan trọng trongviệc thiết kế trải nghiệm

- Sketch - phác thảo: Vẽ bản phácthảo bằng giấy, các dòng bảngtrắng và các khung hình để chia

sẻ ý tưởng của bạn với các bênliên quan

- Design - thiết kế: Biến các môhình ban đầu và wireframes thànhhình ảnh tuyệt đẹp với theme vàstyle áp dụng cho chúng với cácthông số kỹ thuật

- Implement - thực hiện: Nhómphát triển xây dựng chức năngback-end trước tiên và kết nối nó với giao diện người dùng khi họ nhận được các

- Tạo ra những nội dung theo mẫu như User Stories, Userflow, User Personas,

Kết quả:

- Đã có thể nắm được các kiến thức về thiết kế trải nghiệm người dùng

- Đã có thể tạo ra các User Stories, User Personas, Userflow,… theo các yêu cầu từMentor

3 Thực hiện công việc

Sau hai tháng được training và thực hành, thực tập sinh đã nắm được những kiến thức cơbản về Figma, giao diện & trải nghiệm người dùng Trong giữa tháng thứ hai, trainer đãhướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện các task từ phíacông ty đưa ra

Chi tiết các task sẽ được nói ở phần sau

4 Lịch làm việc

1 - Tìm hiểu về công ty, cách tổ chức của công ty.- Làm quen với các công cụ quản lý trong công ty

- Học cách trao đổi, làm việc qua skype, slack

Anh Phùng Hợp

2 - Tìm hiểu về Figma.- Tìm hiểu cách làm việc với các team khác trong

công ty

Anh Phùng Hợp

3 - Thực hành sử dụng công cụ Figma theo các mẫucó sẵn trên các trang mạng xã hội về thiết kế. Anh Phùng Hợp

4 - Tìếp cận kiến thức về Giao diện người dùng.- Tìếp cận kiến thức về Trải nghiệm người dùng

- Làm quen với các yêu cầu khách hàng giả đình

6 - Thiết kế giao diện máy POS- Đúc kết kinh nghiệm và trình bày ở buổi Meeting Anh Phùng Hợp

7 - Thiết kế giao diện ứng dụng chấm công- Đúc kết kinh nghiệm và trình bày ở buổi Meeting Anh Phùng Hợp

8 - Chuẩn bị tài liệu để báo cáo thực tập

- Tham dự buổi workshop định hướng của công ty Anh Phùng Hợp

trước khi tốt nghiệp.

- Củng cố kiến thức qua đợt thực tập

- Người hướng dẫn đánh giá và nhận xét

- Bản thân rút kinh nghiệm, tự đánh giá và khắcphục khuyết điểm trên những sản phẩm đã tạo ra

- Gửi lời cảm ơn và chia tay quý công ty

Chương 3: Chi tiết công việc

1 Giao diện máy POS

Sản phẩm được thiết kế để giúp cho hoạt động buôn bán Cloud của công ty, được sửdụng bởi những người quản lý hàng trong kho và những người giới thiệu sản phẩm đếnvới khách hàng tại các cửa hàng trực tiếp

1.1 Yêu cầu

- Hoàn thành giao diện trên 2 thiết bị chính là Laptop và Mobile

- Giao diện xác thực tài khoản bao gồm trang Đăng nhập và Quên mật khẩu

- Giao diện Trang chủ giúp điều hướng sang các trang khác

- Giao diện Báo cáo thống kê giúp xem lại doanh thu cửa hàng và thống kê các đơnhàng qua ngày, tháng, năm

- Giao diện Quản lý bán hàng giúp người dùng tìm kiếm các sản phẩm đang cótrong cửa hàng, thêm vào giỏ hàng và tiến hành thanh toán, bên cạnh đó hệ thốngcũng liệt kê các chi tiết thanh toán như phí vận chuyển, phí trước thuế, chiếtkhấu, lưu thông tin của khách hàng đã mua hàng, thanh toán qua QR code,…

- Giao diện Quản lý đơn hàng giúp quản lý các đơn hàng đã được khách hàng đặttrong hệ thống, xem các thông tin, danh sách sản phẩm đã mua trong đơn hàng,tình trạng vận chuyển, ghi chú,…

- Giao diện Quản lý khách hàng giúp xem thông tin của những khách hàng đã muahàng tại cửa hàng để tiện lợi cho những lần mua hàng tiếp theo cũng như thốngkê

1.2 Danh sách giao diện