Báo cáo thực tập thiết kế giao diện và trải nghiệm người dùng (uiux design)

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 VÀ TRẢI NGHIỆM NGƯỜI DÙNG UI/UX DESIGN Công ty thực tập: Công ty TNHH Tin học Viễn th

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

VÀ TRẢI NGHIỆM NGƯỜI DÙNG

(UI/UX DESIGN)

Công ty thực tập: Công ty TNHH Tin học

Viễn thông Danh Việt chi nhánh tại TP HCM Người phụ trách: Hà Minh Hoàng

Thực tập sinh: Thiều Quang Lâm

TP Hồ Chí Minh, tháng 06 năm 2023

LỜI MỞ ĐẦU

Ngày nay, thiết kế giao diện và trải nghiệm người dùng là một trong những công việc không thể thiếu khi phát triển một sản phẩm công nghệ Việc các website, ứng dụng trên mobile ra đời ngày một nhiều đã thúc đẩy nhu cầu thiết kế một bộ giao diện và trải nghiệm trên sản phẩm được tốt nhất nhằm đảm bảo tính cạnh tranh cũng như giữ chân người dùng sử dụng sản phẩm Từ đó, kích thích sự phát triển của công nghệ thông tin trong nước và thế giới

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ành UI/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 ty hà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ạo nê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 User Experience) 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ười dù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ởi tí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ận củ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ũng như 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ôi trường chuyên nghiệp Vì vậy, em quyết định chọn Công ty TNHH Tin học Viễn thông Danh Việt - một môi trườ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

GVHD: Trần Anh Dũng Thiều Quang Lâm

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ều kiện em làm bài báo cáo này

TP HCM, ngày 28 tháng 6 năm 2023

Thiều Quang Lâm

NHẬN XÉT CỦA KHOA

GVHD: Trần Anh Dũng Thiều Quang Lâm

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

DANH MỤC HÌNH ẢNH 5

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 6

1.1 Giới thiệu Công ty TNHH Thương Mại Tin Học Viễn Thông Danh Việt 6

1.2 Sản phẩm công ty 6

1.3 Lịch làm việc khi thực tập tại công ty 6

CHƯƠNG 2: NỘI DUNG THỰC TẬP 7

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

2.2 Nghiên cứu kỹ thuật 7

2.2.1 Tìm hiểu về công cụ giao tiếp trong công việc 7

2.2.2 Tìm hiểu về công nghệ, kỹ thuật sử dụng trong quá trình làm việc 7

2.2.2.1 Tìm hiểu về Figma 7

2.2.2.2 Tìm hiểu về thiết kế giao diện người dùng 8

2.2.2.3 Tìm hiểu về thiết kế trải nghiệm người dùng 9

2.3 Thực hiện dự án thực tế 10

2.3.1 Quá trình thực hiện 10

2.3.2 Mô tả dự án 11

2.3.3 Kết quả 12

CHƯƠNG 3: TỔNG KẾT 20

3.1 Điểm mạnh 20

3.2 Điểm yếu 20

TÀI LIỆU THAM KHẢO 21

DANH MỤC HÌNH ẢNH

Hình 1 Logo công ty 6

Hình 2 Giao diện khi mở ứng dụng 13

Hình 3 Nhập thông tin cá nhân 14

Hình 4 Giao diện Trang chủ và Nhật ký 15

Hình 5 Giao diện Món ăn và Chế độ ăn 16

Hình 6 Giao diện thêm món ăn vào bữa ăn 16

Hình 7 Giao diện tìm kiếm món ăn 17

Hình 8 Giao diện thêm hoạt động 18

Hình 9 Giao diện ghi lại cân nặng và lượng nước uống hàng ngày 19

Hình 10 Giao diện thêm chi tiết hoạt động 19

CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP

1.1 Giới thiệu Công ty TNHH Thương Mại Tin Học Viễn Thông Danh Việt

Hình 1 Logo công ty

Công ty TNHH Thương Mại Tin Học Viễn Thông Danh Việt (DVIT) được thành lập

từ 16/8/2006 với đội ngũ cán bộ giàu kinh nghiệm, am hiểu về kiến thức chuyên môn, nhiệt tình và luôn tận tâm trong công việc, sẵn sàng mang đến cho khách hàng giải pháp hợp lý nhất

Đội ngũ cán bộ của Danh Việt đã có kinh nghiệm phục vụ hơn 1.000 khách hàng trên toàn quốc: từ Nhà khách VP Quốc Hội đến các bộ ban ngành như: Bộ Y tế, Bộ tài chính,

Bộ Công An, Bộ Tham mưu, Bộ Nội Vụ… Các chi nhánh ngân hàng như VP Bank, VIB Bank, MB Bank, VR Bank… Các công ty chứng khoán như chứng khoán Quốc Gia, chứng khoán Sài Gòn, chứng khoán Mê Kông, chứng khoán Quốc tế… đến các doanh nghiệp và cá nhân trong và ngoài nước

1.2 Sản phẩm công ty

• Phân phối, cung cấp, lắp đặt tổng đài, thiết bị an ninh giám sát, thiết bị viễn thông, thiết bị văn phòng

• Tư vấn lắp đặt, thiết kế, thi công hệ thống an ninh, tin học - viễn thông

• Dịch vụ bảo hành, bảo trì, sửa chữa thiết bị an ninh, viễn thông - thiết bị văn ρhòng

• Ngoài ra, công ty gần đây mở rộng sang lĩnh vực phần mềm, cung cấp ứng dụng di động

1.3 Lịch làm việc khi thực tập tại công ty

Thời gian thực tập: 27/03/2023 – 09/06/2023

Lịch thực tập: thứ hai, thứ tư, và thứ sáu hàng tuần

CHƯƠNG 2: NỘI DUNG THỰC TẬP

2.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, quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty, các phòng ban về IT, HR, Marketing, … Ngoài ra, thực tập sinh còn được giới thiệu về văn hóa làm việc trong công ty như thời gian đi làm, các quy định, cách sử dụng email trong công việc, …

Kết quả: hiểu thêm về công ty Danh Việt, 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ách nhiệm hơn

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

2.2.1 Tìm hiểu về công cụ giao tiếp trong công việc

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

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 Thực tập sinh được hướng dẫn tạo tài khoản và sử dụng Skype, cùng với Google Mail để trao đổi công việc

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.2 Tìm hiểu về công nghệ, kỹ thuật sử dụng trong quá trình làm việc

Nội dung: Tìm hiểu về Figma, quy tắc thiết kế giao diện và trải nghiệm người dùng

2.2.2.1 Tìm hiểu về Figma

Đượ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ính củ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

GVHD: Trần Anh Dũng Thiều Quang Lâm

Thực tập sinh sẽ được hướng dẫn về tư duy màu sắc, cách phối màu với nhau, các thông

số trong màu sắc như saturation, hue, tint, opacity, …

2.2.2.2 Tìm hiểu về thiết kế giao diện người dùng

- 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ình khô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ười dùng

Đó chính là Style Guide, thứ tập trung chủ yếu vào phong cách Chúng bao gồ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ụng trong 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ính thố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ăng nào

đó Mục đích của Sketch là để capture nhanh những ý tưởng lúc tư duy một mình hoặc đang brainstorm với nhau

Nhìn bên ngoài, Prototype khá giống Mockup Nhưng điều làm Prototype trở nên thú

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

2.2.2.3 Tìm hiểu về thiết kế trải nghiệm 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ủa ngườ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 truy cậ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ẩm củ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át triể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ười dù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ấy ngườ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âm củ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

GVHD: Trần Anh Dũng Thiều Quang Lâm

quan, linh hoạt và hấp dẫn, đồng thời cung cấp trải nghiệm tuyệt vờ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ấp một giải pháp, trước tiên bạn cần hiểu vấn đề để sau đó có thể giải quyết vấn đề

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

• Sketch - phác thảo: Vẽ bản phác thảo bằng giấy, các dòng bảng trắng và các khung hình để chia sẻ ý tưởng của bạn với các bên liên quan

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

• Implement - thực hiện: Nhóm phát triển xây dựng chức năng back-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

Chi tiết quá trình thực hiện:

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

hiện dự án như Figma,

Skype, Google Mail

Hà Minh Hoàng

- Trao đổi với khách

hàng, với team dev để

đề xuất tiến độ của dự án

Hà Minh Hoàng Nguyễn Đặng Thanh

- Người dùng có thể đăng nhập/đăng ký tài khoản ngay khi bắt đầu ứng dụng hoặc sau khi đã vào được ứng dụng

GVHD: Trần Anh Dũng Thiều Quang Lâm

- Sau khi đã nhận được lộ trình, người dùng sẽ được vào màn hình chính của ứng dụng Trong màn hình gồm nhiều mục khác nhau như Bữa sáng, Bữa trưa, Bữa tối, Uống nước, Tập luyện, Theo dõi cân nặng

- Đối với các bữa ăn, người dùng có thể lựa chọn món ăn (Dish) hoặc chế độ ăn (Diet) phù hợp với cá nhân theo các lựa chọn có sẵn Người dùng cũng có thể chỉnh sửa các chi tiết như khẩu phần, số lượng món trong một chế độ, … cho phù hợp với nhu cầu cá nhân Nếu không tìm thấy, người dùng cũng có thể tự tạo mới món ăn và chế độ ăn theo sở thích cá nhân

- Người dùng có thể thích món ăn/chế độ ăn và các món ăn/chế độ ăn được yêu thích sẽ xuất hiện ở một mục riêng biệt

- Ngoài món ăn và chế độ ăn, người dùng cũng được điều chỉnh số lượng nước uống mỗi ngày và chế độ tập luyện hàng ngày

- Tất cả các thay đổi về ăn uống và tập luyện sẽ được ghi lại trong nhật ký, bao gồm cả những thông tin chi tiết như số calo trong từng món ăn, số calo tiêu hao khi tập luyện

- Người dùng có thể mở nhật ký theo từng ngày và xem các món ăn, các bài tập luyện đã thực hiện trong ngày hôm đó

- Ngoài theo dõi lượng calo nạp vào và tiêu thụ hằng ngày, người dùng cũng có thể ghi lại cân nặng hàng ngày để theo dõi tiến độ

2.3.3 Kết quả

Một số hình ảnh của ứng dụng:

Hình 2 Giao diện khi mở ứng dụng

GVHD: Trần Anh Dũng Thiều Quang Lâm

Hình 3 Nhập thông tin cá nhân

Hình 4 Giao diện Trang chủ và Nhật ký

GVHD: Trần Anh Dũng Thiều Quang Lâm

Hình 5 Giao diện Món ăn và Chế độ ăn

Hình 6 Giao diện thêm món ăn vào bữa ăn

Hình 7 Giao diện tìm kiếm món ăn

GVHD: Trần Anh Dũng Thiều Quang Lâm

Hình 8 Giao diện thêm hoạt động

Hình 9 Giao diện ghi lại cân nặng và lượng nước uống hàng ngày

Hình 10 Giao diện thêm chi tiết hoạt động

GVHD: Trần Anh Dũng Thiều Quang Lâm

CHƯƠNG 3: TỔNG KẾT

Quãng thời gian thực tập tại Danh Việt đã giúp em cải thiện bản thân rất nhiều trong quy trình làm việc thực tế, tác phong của người kỹ sư phần mềm Được làm việc tại đây, em đã học thêm được kỹ năng mềm sử dụng mail, quản lý ticket, làm việc nhóm, giao tiếp với cấp trên, …

Chỉ trong thời gian hạn chế, em đã hoàn thành dự án cá nhân trong quá trình training với các tính năng, yêu cầu đặt ra ban đầu

Khi tham gia vào dự án thực tế, em cũng hoàn thành tốt các tác vụ đúng hạn và đạt

chất lượng tốt

3.1 Điểm mạnh

- Trải nghiệm quy trình làm việc của một dự án theo mô hình Agile

- Xây dựng giao diện của một ứng dụng di động mang lại giá trị cho người dùng

- Học hỏi và tích lũy thêm nhiều kiến thức không chỉ thuộc mảng UX/UI Design

mà còn về Business Analyst, Development,…

- Hiểu được quy trình, nguyên tắc xây dựng giao diện người dùng theo nguyên tắc Design Thinking đi từ ý tưởng đến việc phân tích rồi đi vào thực hiện đưa ý tưởng thành hiện thực

- Nâng cao tư duy, kỹ năng thiết kế khi tiếp cận nhiều xu hướng và công nghệ mới

- Nâng cao khả năng làm việc nhóm và học được cách quản lý công việc, thời gian

- Kỹ năng giao tiếp với đồng nghiệp và khách hàng, tư duy phản biện, giải quyết vấn đề được nâng cao

3.2 Điểm yếu

- Khó khăn về mặt di chuyển khi công ty có vị trí địa lý xa nơi ở

- Khó khăn trong những ngày đầu làm quen với quy trình làm việc do sinh viên chưa được trải nghiệm môi trường thực tế trước đây

- Khó khăn về mặt giao tiếp, trao đổi công việc vào những ngày đầu do chưa

quen biết được toàn bộ các thành viên của team

- Khó khăn về việc trao đổi dự án trong những ngày đầu với Mentor do sinh viên chưa nắm rõ được quy trình làm việc thực tế của một công ty

TÀI LIỆU THAM KHẢO

• Nguyen N (2022, March 18) Tổng Hợp Nguyên Tắc Vàng Và Xu Hướng

Thiết Kế UI/UX Nổi Bật Bạn Không Nên Bỏ Qua Glints Vietnam Blog

https://www.linkedin.com/pulse/basics-ux-ui-design-principles-chris-• TopDev (2020, October 24) Một số nguyên tắc thiết kế UI/UX website

TopDev https://topdev.vn/blog/mot-so-nguyen-tac-thiet-ke-ui-ux-website/