đề tài thiết kế giao diện website và mobile cửa hàng bán thức ăn bằng công cụ figma

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 (8.89 MB, 145 trang )

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

<b>TRƯỜNG ĐẠI HỌC SÀI GÒN</b>

<b>THIẾT KẾ GIAO DIỆN</b>

<b>GV: THẦY PHẠM THI VƯƠNG</b>

<b>ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE VÀMOBILE CỬA HÀNG BÁN THỨC ĂN BẰNG</b>

<b>CÔNG CỤ FIGMAThành viên nhóm 4:</b>

3121410138 Nguyễn Zi Đan3120410251 Lê Duy Khơi3120410350 Đào Phúc Nguyên

3120410235 Nguyễn Huỳnh Bảo Khang

Hồ Chí Minh,Ngày 23 Tháng 4 Năm 2024

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

<b>1. Giới thiệu về Figma...6</b>

<b>2. Những tính năng nổi bật của phần mềm Figma:...6</b>

<b>2.1 Published prototype for feedback...6</b>

<b>2.7 Sao chép các yếu tố thiết kế từ những bề mặt đã vẽ...9</b>

<b>3. Tìm hiểu về các khái niệm cơ bản trong figma...10</b>

<b>III. CHUẨN BỊ VÀ PHÂN TÍCH YÊU CẦU...11</b>

<b>1. Xác định mục tiêu thiết kế:...11</b>

<b>1.3 Hiển thị thông tin đầy đủ:...15</b>

<b>1.4 Tạo dựng CTA (Call to Action):...16</b>

<b>1.5 Tối ưu hóa cho thiết bị di động:...18</b>

<b>1.6 Tạo dựng sự tin tưởng:...20</b>

<b>1.7 Tạo cảm giác thân thiện:...21</b>

<b>2. Nghiên cứu và phân tích đối tượng sử dụng...23</b>

<b>2.2 Phân loại theo sở thích thời trang:...24</b>

<b>3. Thu thập yêu cầu từ khách hàng hoặc nhóm dự án...25</b>

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

<b>4. Lập kế hoạch thiết kế giao diện...25</b>

<b>4.1 Xác định mục tiêu thiết kế:...25</b>

<b>4.2 Nghiên cứu thị trường:...26</b>

<b>4.3 Lập sơ đồ trang web:...27</b>

<b>4.4 Thiết kế giao diện:...28</b>

<b>4.5 Kiểm tra và hoàn thiện:...28</b>

<b>IV. THIẾT KẾ GIAO DIỆN...30</b>

<b>1. Sơ đồ usecase tổng quát và đặc tả usecase cho từng màn hình phía ngườidùng (client)...30</b>

<b>2.6 Màn hình trang quên mật khẩu...49</b>

<b>2.7 Màn hình trang thiết lập lại mật khẩu...50</b>

<b>2.15 Màn hình trang giao diện thanh tốn...68</b>

<b>2.16 Màn hình trang thông tin cá nhân...70</b>

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

<b>2.17 Màn hình trang chi tiết đơn hàng...71</b>

<b>3. Sơ đồ usecase tổng qt và đặc tả usecase cho từng màn hình phía ngườiquản trị (admin)...74</b>

<b>5.9 Màn hình trang xem chi tiết sản phẩm đã mua...132</b>

<b>5.10 Màn hình trang thơng tin cá nhân...134</b>

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

<b>2. Thu thập phản hồi từ người dùng...143VII. KẾT LUẬN VÀ TỔNG KẾT...144VIII. TÀI LIỆU THAM KHẢO...145</b>

<b>I. GIỚI THIỆU</b>

<b>1.Mục đích và lý do chọn Figma</b>

Figma là một cơng cụ thiết kế giao diện và trải nghiệm người dùng (UI/UX) hoạtđộng dựa trên nền tảng web. Nó được thiết kế dành riêng cho việc tạo giao diệnngười dùng và trải nghiệm người dùng.

Mục đích là được sử dụng để thiết kế và phát triển sản phẩm số, bao gồm tạo giaodiện người dùng, mockup, prototype và tài liệu thiết kế. Nó cung cấp một mơitrường làm việc thời gian thực, hỗ trợ cộng tác, phản hồi và truy cập từ xa, giúptăng cường hiệu quả và đồng bộ trong quá trình làm việc.

Phạm vi của báo cáo về Figma sẽ tập trung vào những điểm sau:

+ Giới thiệu Figma: Tóm tắt về cơng cụ, bao gồm tính năng chính và mục đích sửdụng.

+ Ưu điểm của Figma: Liệt kê các lợi ích và tiện ích của Figma trong quá trìnhthiết kế và phát triển sản phẩm số.

+ Ứng dụng thực tiễn: Mô tả cách Figma được sử dụng để thiết kế UI/UX, tạomockup và prototype.

+ Hợp tác và linh hoạt: Đánh giá khả năng cộng tác và linh hoạt của Figma, baogồm tính năng làm việc thời gian thực và truy cập từ xa.

+ Tương lai và xu hướng: Phân tích tương lai của Figma và cách nó có thể ứng phóvới xu hướng mới trong thiết kế sản phẩm.

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

<b>II. KHÁM PHÁ FIGMA</b>

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

Figma là một công cụ thiết kế đồ họa và giao diện người dùng (UI) dựa trên web,được phát triển để hỗ trợ quy trình thiết kế và phát triển sản phẩm số. Nó nổi tiếngvới tính linh hoạt, khả năng cộng tác thời gian thực và truy cập từ xa.

Với Figma, người dùng có thể tạo ra các bản vẽ, mockup và prototype của sảnphẩm một cách dễ dàng và linh hoạt. Giao diện trực quan và tích hợp các tính năngmạnh mẽ như làm việc đồng thời, phản hồi thời gian thực và tính tương thích đanền tảng đã giúp Figma trở thành lựa chọn phổ biến cho các nhóm thiết kế và pháttriển trên toàn thế giới.

Với việc hoạt động trên nền tảng web, Figma cung cấp sự linh hoạt và tiện lợi chocác nhóm làm việc phân tán, cho phép họ truy cập và làm việc trên các thiết bịkhác nhau từ bất kỳ đâu có kết nối internet. Điều này giúp tăng cường sự hợp tácvà trao đổi ý tưởng giữa các thành viên trong nhóm một cách hiệu quả.

<b>2. Những tính năng nổi bật của phần mềm Figma:</b>

<b>2.1 Published prototype for feedback</b>

Là quá trình xuất bản một bản thử nghiệm hoặc một phiên bản tương tác của thiếtkế (prototype) trong Figma để nhận phản hồi từ người dùng hoặc đồng nghiệp.Khi đã hoàn thành việc tạo prototype trong Figma, ta có thể chia sẻ nó với nhữngngười khác bằng cách xuất bản và cung cấp một liên kết hoặc URL. Những ngườikhác có thể truy cập vào liên kết này và xem prototype, tương tác với nó và để lạinhận xét hoặc phản hồi trực tiếp trên các phần của prototype.

Điều này giúp thu thập ý kiến từ người dùng cuối và đồng nghiệp để cải thiện vàhoàn thiện thiết kế.

Trong Figma, có nhiều bộ dụng cụ (toolkit) được cung cấp để hỗ trợ việc thiết kếgiao diện người dùng (UI) và trải nghiệm người dùng (UX). Dưới đây là một số bộdụng cụ UX phổ biến có thể sử dụng:

+ Figma's built-in UI Kits: Figma cung cấp một số UI Kits tích hợp sẵn, bao gồmMaterial Design, iOS, và các bộ UI kit khác, giúp bắt đầu nhanh chóng với các yếutố thiết kế tiêu chuẩn của hệ điều hành hoặc nền tảng cụ thể.

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

+ Community UI Kits: Cộng đồng Figma cung cấp nhiều bộ dụng cụ khác nhauđược tạo ra bởi cộng đồng người dùng, chứa các yếu tố UI/UX phổ biến, biểu mẫu,biểu đồ và nhiều hơn nữa.

+ Wireframe Kits: Có các bộ dụng cụ wireframe sẵn có trong Figma, giúp nhanhchóng bố cục và thiết kế các khung trang ban đầu của sản phẩm một cách dễ dàngvà nhanh chóng.

+ Icon Sets: Figma cung cấp một loạt các bộ biểu tượng (icon sets) cho các dự ánthiết kế, bao gồm cả các biểu tượng vector và biểu tượng raster, giúp tạo ra giaodiện hấp dẫn và chuyên nghiệp.

+ Component Libraries: Có thể tạo và quản lý các thư viện thành phần trongFigma, cho phép tái sử dụng các thành phần giao diện và phát triển hệ thống thiếtkế nhất quán.

+ Plug-ins: Ngoài các bộ dụng cụ tích hợp sẵn, có nhiều plug-in được phát triểnbởi cộng đồng hoặc bên thứ ba trong Figma, cung cấp các tính năng mở rộng vàcác bộ dụng cụ bổ sung cho quy trình làm việc.

Các bộ dụng cụ này giúp tăng cường quy trình thiết kế trong Figma bằng cáchcung cấp các yếu tố và công cụ phổ biến, giúp tiết kiệm thời gian và tối ưu hóahiệu suất.

Tóm lại, Repeat Grid trong Figma là một tính năng mạnh mẽ giúp tăng cường hiệusuất và linh hoạt trong quá trình thiết kế giao diện người dùng bằng cách tự độngtạo và điều chỉnh các lưới lặp lại của các yếu tố giao diện.

<b>2.4 Các biểu tượng</b>

Trong Figma, có thể truy cập vào nhiều bộ biểu tượng (icon sets) khác nhau để sửdụng trong thiết kế. Dưới đây là một số nguồn tài nguyên biểu tượng phổ biến màcó thể sử dụng:

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

+ Icon Sets tích hợp sẵn: Figma cung cấp một số bộ biểu tượng được tích hợp sẵnnhư Font Awesome, Material Design Icons, Feather Icons và nhiều hơn nữa. Bạncó thể truy cập chúng bằng cách sử dụng công cụ "Insert" và tìm kiếm trong"Icons" hoặc "Community" tabs.

+ Community Libraries: Cộng đồng Figma thường chia sẻ các bộ biểu tượng tự domà có thể sử dụng. Truy cập vào tab "Community" trong thư viện tài nguyênFigma để tìm kiếm và sử dụng các bộ biểu tượng được chia sẻ bởi người dùngkhác.

+ Plug-ins: Có một số plug-in trong Figma cung cấp các bộ biểu tượng mở rộng,cho phép tìm kiếm và chèn biểu tượng từ các nguồn ngoại lệ như Unsplash hoặcFlaticon.

+ Thư viện Tùy chỉnh: Có thể tạo và quản lý các thư viện biểu tượng tùy chỉnh củariêng trong Figma. Điều này cho phép tái sử dụng các biểu tượng cá nhân hoặc củadoanh nghiệp trong nhiều dự án khác nhau.

<b>2.5 Thư viện Creative Cloud</b>

Hiện tại, khơng có một "Thư viện Creative Cloud" được tích hợp trực tiếp trongFigma. Tuy nhiên, vẫn có thể sử dụng tài nguyên từ Creative Cloud trong Figmathông qua các cách sau:

+ Import từ Creative Cloud Libraries: Nếu đã tạo các tài nguyên trong CreativeCloud Libraries (ví dụ: từ Adobe Illustrator hoặc Adobe Photoshop), ta có thểimport chúng vào Figma bằng cách tải xuống và sau đó kéo và thả chúng vàoFigma.

+ Sử dụng Plugin Adobe XD to Figma: Plugin này cho phép chuyển đổi các filethiết kế từ Adobe XD sang Figma một cách dễ dàng. Bằng cách này, có thể sửdụng các tài nguyên từ Creative Cloud trực tiếp trong Figma.

+ Tải tài nguyên từ Adobe Stock hoặc Creative Cloud Market: Ta có thể tải tàinguyên như hình ảnh, biểu tượng và các tệp PSD từ Adobe Stock hoặc CreativeCloud Market, sau đó sử dụng chúng trong Figma như bất kỳ tài nguyên nào khác.Mặc dù khơng có tích hợp trực tiếp, nhưng những cách trên vẫn cho phép bạn sửdụng tài nguyên từ Creative Cloud trong quá trình thiết kế của mình trong Figma.

<b>2.6 Prototype</b>

Trong Figma, có thể tạo prototype để hiển thị cách các màn hình và yếu tố tươngtác của thiết kế hoạt động. Đây là cách tạo prototype trong Figma:

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

+ Tạo các Màn hình (Frames): Bắt đầu bằng việc tạo các màn hình (frames) chocác trang và trạng thái khác nhau của ứng dụng hoặc trang web. Mỗi màn hình sẽđại diện cho một trang hoặc một phần của trang.

+ Thêm Các Liên kết Tương tác: Chọn yếu tố hoặc đối tượng muốn thêm liên kếttương tác. Các yếu tố này có thể là nút, biểu mẫu, hoặc bất kỳ yếu tố nào muốnngười dùng có thể tương tác với.

+ Tạo Liên kết: Khi đã chọn yếu tố, sử dụng công cụ "Prototype" để tạo liên kết tớicác màn hình khác. Bạn có thể kéo dây nối từ yếu tố này đến màn hình mục tiêuhoặc thậm chí là các trạng thái khác của cùng một màn hình.

+ Thiết lập Tương tác: Đối với mỗi liên kết, có thể thiết lập các tùy chọn tương tácnhư chuyển đổi, trượt hoặc hiệu ứng.

+ Xem Trước và Kiểm Tra: Khi đã hồn thành, sử dụng tính năng "Play" để xemtrước prototype của bạn. Ta cũng có thể chia sẻ liên kết với người khác để họ cóthể xem trước và kiểm tra.

+ Thu thập Phản hồi và Cải thiện: Sau khi chia sẻ prototype, thu thập phản hồi từngười dùng và đồng nghiệp. Dựa trên phản hồi này, ta có thể cải thiện và điềuchỉnh prototype của mình để tạo ra một trải nghiệm người dùng tốt hơn.

Tóm lại, việc tạo prototype trong Figma giúp trình bày và kiểm tra ý tưởng mộtcách hiệu quả, từ đó tạo ra sản phẩm cuối cùng tốt nhất có thể.

<b>2.7 Sao chép các yếu tố thiết kế từ những bề mặt đã vẽ</b>

Để sao chép các yếu tố thiết kế từ các bề mặt đã vẽ trong Figma, có thể tuân theocác bước sau:

+ Chọn Các Yếu Tố: Bắt đầu bằng cách chọn các yếu tố thiết kế mà bạn muốn saochép từ các bề mặt đã vẽ. Bạn có thể chọn nhiều yếu tố bằng cách giữ phím Shifthoặc Command (Ctrl trên Windows) và nhấp chuột vào từng yếu tố.

+ Sao Chép: Sau khi chọn yếu tố, sử dụng lệnh sao chép bằng cách nhấn tổ hợpphím Command + C trên Mac hoặc Ctrl + C trên Windows, hoặc nhấp chuột phảivà chọn "Copy" từ menu ngữ cảnh.

+ Dán vào Bề Mặt Khác: Tiếp theo, chọn bề mặt mà bạn muốn dán các yếu tố đãsao chép. Sau đó, sử dụng lệnh dán bằng cách nhấn tổ hợp phím Command + Vtrên Mac hoặc Ctrl + V trên Windows, hoặc nhấp chuột phải và chọn "Paste" từmenu ngữ cảnh.

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

+ Tùy chỉnh và Điều chỉnh: Các yếu tố đã được sao chép sẽ được dán vào bề mặtmới. Bạn có thể điều chỉnh vị trí, kích thước và các thuộc tính khác của chúng theoý muốn.

Bằng cách này, bạn có thể dễ dàng sao chép các yếu tố thiết kế từ các bề mặt đã vẽvà tái sử dụng chúng trong các phần khác của dự án của mình trong Figma.

Để xuất nội dung từ Figma, có thể tuân theo các bước sau:

+ Chọn Nội dung cần Xuất: Bắt đầu bằng cách chọn các yếu tố, màn hình hoặc cảdự án mà muốn xuất.

+ Sử dụng Tùy chọn Export: Sau khi đã chọn nội dung cần xuất, điều hướng đếnmenu hoặc thanh cơng cụ và tìm tùy chọn "Export". Ta có thể thấy biểu tượng xuấthiện trên thanh công cụ hoặc trong menu "File".

+ Chọn Định dạng và Cài đặt: Khi nhấp vào tùy chọn Export, một cửa sổ hoặcthanh bên xuất hiện, cho phép chọn định dạng xuất (như PNG, JPG, SVG, PDF) vàcài đặt khác như độ phân giải và chất lượng.

+ Xác định Vị trí Lưu trữ: Tiếp theo, hãy chọn nơi muốn lưu trữ tệp xuất và đặt têncho tệp nếu cần thiết.

+ Xuất Nội dung: Sau khi đã chọn định dạng và vị trí lưu trữ, nhấp vào nút"Export" hoặc tương tự để bắt đầu quá trình xuất.

+ Kiểm tra và Lưu trữ: Kiểm tra tệp xuất để đảm bảo nó phù hợp với yêu cầu, sauđó lưu trữ hoặc chia sẻ tệp theo nhu cầu.

Bằng cách này, có thể dễ dàng xuất nội dung từ Figma và sử dụng nó cho các mụcđích ngồi thiết kế như in ấn, chia sẻ trên web, hoặc tích hợp vào các cơng cụ khác.

<b>3. Tìm hiểu về các khái niệm cơ bản trong figma</b>

Một số khái niệm cơ bản trong Figma:

+ Frames (Khung): Frames là các vùng làm việc trong Figma, chứa các yếu tố thiếtkế như hình ảnh, văn bản, biểu đồ và nhiều hơn nữa. Mỗi Frame có thể đại diệncho một màn hình hoặc một phần của giao diện người dùng.

+ Layers (Lớp): Layers là các thành phần cơ bản của các yếu tố trong Figma, chophép tổ chức và quản lý các yếu tố trên màn hình. Các yếu tố được sắp xếp theolớp trong cửa sổ Layer, giúp dễ dàng tìm và chỉnh sửa chúng.

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

+ Components (Thành phần): Components là các yếu tố được tái sử dụng trongFigma, giúp tạo ra các thiết kế nhất quán và dễ dàng cập nhật. Khi tạo mộtComponent và sử dụng nó trong các Frame khác, bất kỳ thay đổi nào thực hiện trênComponent gốc cũng sẽ tự động áp dụng cho tất cả các thể hiện của Componentđó.

+ Instances (Thể hiện): Instances là các phiên bản cụ thể của một Component. Tacó thể tạo nhiều Instances từ một Component và tùy chỉnh chúng mà không ảnhhưởng đến Component gốc.

+ Styles (Kiểu dáng): Styles là các thuộc tính được áp dụng cho văn bản và hìnhảnh trong Figma, bao gồm kiểu chữ, màu sắc, kích thước và nhiều hơn nữa. Bằngcách sử dụng Styles, có thể duy trì nhất quán và dễ dàng thay đổi các yếu tố thiếtkế trong toàn bộ dự án.

+ Prototyping (Tạo Prototype): Prototyping là quá trình tạo ra các liên kết tươngtác giữa các màn hình và yếu tố trong Figma, cho phép thử nghiệm và hiển thị cáchsản phẩm hoạt động.

<b>III. CHUẨN BỊ VÀ PHÂN TÍCH YÊU CẦU</b>

<b>1. Xác định mục tiêu thiết kế: 1.1 Giao diện bắt mắt:</b>

Giao diện bắt mắt là một giao diện mà thu hút và giữ chú ý của người dùng ngay từcái nhìn đầu tiên. Nó kết hợp sự sáng tạo trong việc sắp xếp, màu sắc, hình ảnh vàcác yếu tố thiết kế khác để tạo ra một trải nghiệm thú vị và hấp dẫn. Giao diện bắtmắt thường có độ sáng, màu sắc phong phú và sử dụng các yếu tố thiết kế như hìnhảnh chất lượng cao, phơng chữ hấp dẫn và hiệu ứng đặc biệt để làm nổi bật nộidung và thu hút sự chú ý của người dùng.

- Sử dụng bố cục hợp lý:

+ Bố cục là cách các yếu tố trên giao diện được sắp xếp.

+ Một bố cục hợp lý sẽ giúp người dùng dễ dàng tìm kiếm thông tin và thực hiệncác hành động mong muốn.

+ Chúng ta nên sử dụng các nguyên tắc thiết kế như cân bằng, tỷ lệ và sự tươngphản để tạo ra một bố cục hợp lý.

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

- Sử dụng màu sắc phù hợp:

+ Màu sắc có thể tác động đến cảm xúc và hành vi của người dùng.

+ Chúng ta nên chọn những màu sắc phù hợp với thương hiệu và đối tượng mụctiêu của chúng ta.

+ Chúng ta cũng nên sử dụng màu sắc một cách nhất qn để tạo ra giao diện hàihịa.

- Sử dụng hình ảnh và video chất lượng cao:

+ Hình ảnh và video có thể thu hút sự chú ý của người dùng và giúp truyền tảithông tin một cách hiệu quả.

+ Chúng ta nên sử dụng hình ảnh và video chất lượng cao, có liên quan đến nộidung của trang web hoặc ứng dụng.

- Sử dụng phông chữ dễ đọc:

+ Phông chữ là yếu tố quan trọng ảnh hưởng đến khả năng đọc của người dùng.+ Chúng ta nên chọn phông chữ dễ đọc, có kích thước phù hợp và phù hợp vớiphong cách của giao diện.

- Sử dụng khoảng trắng một cách hiệu quả:

+ Khoảng trắng là khoảng trống giữa các yếu tố trên giao diện.

+ Việc sử dụng khoảng trắng một cách hiệu quả có thể giúp tạo ra giao diện thốngmát và dễ nhìn.

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

- Đảm bảo giao diện thân thiện với thiết bị di động:

+ Ngày càng nhiều người sử dụng thiết bị di động để truy cập internet.

+ Do đó, chúng ta cần đảm bảo rằng giao diện của mình thân thiện với thiết bị diđộng và có thể hiển thị tốt trên các màn hình có kích thước khác nhau.

- Kiểm tra giao diện trên nhiều trình duyệt và thiết bị:

+ Điều quan trọng là phải kiểm tra giao diện của mình trên nhiều trình duyệt vàthiết bị khác nhau để đảm bảo rằng nó hiển thị chính xác.

+ Chúng ta có thể sử dụng các công cụ như BrowserStack và Responsinator đểkiểm tra giao diện của mình.

- Thu thập phản hồi từ người dùng:

+ Cách tốt nhất để biết liệu giao diện của Chúng ta có bắt mắt hay khơng là thuthập phản hồi từ người dùng.

+ Chúng ta có thể thực hiện khảo sát, phỏng vấn hoặc thử nghiệm người dùng đểthu thập phản hồi.

- Cập nhật giao diện thường xuyên:

+ Xu hướng thiết kế thay đổi theo thời gian.

+ Do đó, Chúng ta cần cập nhật giao diện của mình thường xun để đảm bảo rằngnó ln bắt mắt và thu hút người dùng.

Bố cục khoa học trong thiết kế giao diện là việc sắp xếp các yếu tố trên giao diệnmột cách hợp lý, logic và khoa học để giúp người dùng dễ dàng tìm kiếm thông tin,thực hiện các hành động mong muốn và có trải nghiệm tốt nhất khi sử dụng.

Nguyên tắc cơ bản của bố cục khoa học:

- Sự cân bằng: Các yếu tố trên giao diện cần được sắp xếp một cách cân bằng đểtạo ra cảm giác hài hòa và dễ chịu cho mắt.

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

- Tỷ lệ: Các yếu tố trên giao diện cần có tỷ lệ phù hợp với nhau và với tổng thểgiao diện.

- Sự tương phản: Các yếu tố trên giao diện cần có sự tương phản đủ để tạo ra sựnổi bật và giúp người dùng dễ dàng phân biệt các yếu tố khác nhau.

- Sự lặp lại: Việc sử dụng các yếu tố lặp đi lặp lại có thể giúp tạo ra sự thống nhấtvà dễ nhận biết cho giao diện.

- Sự phân cấp: Các yếu tố trên giao diện cần được sắp xếp theo thứ tự tầm quantrọng để giúp người dùng dễ dàng tập trung vào những thông tin quan trọng nhất.- Sự rõ ràng: Giao diện cần phải rõ ràng và dễ hiểu để người dùng có thể dễ dàngtìm kiếm thơng tin và thực hiện các hành động mong muốn.

- Sự nhất quán: Giao diện cần phải nhất quán về phong cách, bố cục và cách sửdụng các yếu tố để tạo ra trải nghiệm người dùng tốt nhất.

Áp dụng bố cục khoa học trong thiết kế giao diện:

- Sử dụng lưới bố cục: Lưới bố cục là một cơng cụ hữu ích giúp Chúng ta sắp xếpcác yếu tố trên giao diện một cách khoa học và hợp lý.

- Sử dụng các nguyên tắc Gestalt: Các nguyên tắc Gestalt là một tập hợp các quytắc tâm lý giúp Chúng ta sắp xếp các yếu tố trên giao diện để tạo ra sự nhận biết vàhiểu biết tốt hơn cho người dùng.

- Sử dụng các yếu tố trực quan: Các yếu tố trực quan như đường nét, hình dạng vàmàu sắc có thể giúp Chúng ta hướng dẫn sự chú ý của người dùng đến nhữngthông tin quan trọng.

- Sử dụng khoảng trắng: Khoảng trắng là khoảng trống giữa các yếu tố trên giaodiện. Việc sử dụng khoảng trắng một cách hiệu quả có thể giúp tạo ra giao diệnthống mát và dễ nhìn.

- Kiểm tra giao diện trên nhiều thiết bị: Điều quan trọng là phải kiểm tra giao diệncủa Chúng ta trên nhiều thiết bị khác nhau để đảm bảo rằng nó hiển thị chính xácvà khoa học trên mọi màn hình.

Lợi ích của việc sử dụng bố cục khoa học:

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

- Tăng khả năng sử dụng: Bố cục khoa học giúp người dùng dễ dàng tìm kiếmthơng tin, thực hiện các hành động mong muốn và có trải nghiệm tốt nhất khi sửdụng.

- Tăng tỷ lệ chuyển đổi: Bố cục khoa học có thể giúp tăng tỷ lệ chuyển đổi bằngcách thu hút sự chú ý của người dùng đến những hành động quan trọng.

- Tăng sự hài lòng của khách hàng: Bố cục khoa học có thể giúp tăng sự hài lòngcủa khách hàng bằng cách mang lại trải nghiệm người dùng tốt hơn.

Kết luận: Bố cục khoa học là yếu tố quan trọng trong thiết kế giao diện. Việc sửdụng bố cục khoa học có thể giúp Chúng ta tạo ra giao diện dễ sử dụng, thu hút vàhiệu quả.

<b>1.3 Hiển thị thông tin đầy đủ:</b>

Hiển thị thông tin đầy đủ trong thiết kế giao diện là việc cung cấp cho người dùngtất cả các thông tin cần thiết để họ có thể dễ dàng hiểu và thực hiện các hành độngmong muốn. Điều này có nghĩa là:

- Xác định đối tượng mục tiêu: Chúng ta cần phải hiểu rõ đối tượng mục tiêu củamình là ai và họ cần thơng tin gì.

- Xác định thơng tin cần thiết: Chúng ta cần phải xác định những thông tin cầnthiết mà đối tượng mục tiêu của Chúng ta cần để thực hiện các hành động mongmuốn.

- Sắp xếp thông tin một cách hợp lý: Chúng ta cần phải sắp xếp thông tin một cáchhợp lý để người dùng có thể dễ dàng tìm kiếm và hiểu.

- Sử dụng ngơn ngữ rõ ràng và súc tích: Chúng ta cần phải sử dụng ngơn ngữ rõràng, súc tích và dễ hiểu để người dùng có thể dễ dàng đọc và hiểu thơng tin.

- Sử dụng các yếu tố trực quan: Chúng ta có thể sử dụng các yếu tố trực quan nhưhình ảnh, biểu tượng và đồ thị để giúp người dùng dễ dàng hiểu thông tin.

- Cung cấp các tùy chọn hỗ trợ: Chúng ta cần phải cung cấp các tùy chọn hỗ trợ đểngười dùng có thể dễ dàng được trợ giúp nếu họ gặp khó khăn khi tìm kiếm hoặchiểu thơng tin.

Để có thể hiện thị thơng tin đầy đủ chúng ta cần phải:

- Sử dụng phân cấp thông tin: Sử dụng các kỹ thuật phân cấp thông tin như sửdụng kích thước phơng chữ, màu sắc và khoảng trắng để làm nổi bật thông tin quan

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

- Sử dụng danh sách và bảng: Danh sách và bảng là những cách hiệu quả để hiểnthị nhiều thơng tin một cách có tổ chức.

- Sử dụng các yếu tố tương tác: Sử dụng các yếu tố tương tác như accordion và tabđể giúp người dùng dễ dàng truy cập nhiều thông tin.

- Cung cấp các tùy chọn lọc và tìm kiếm: Cung cấp các tùy chọn lọc và tìm kiếmđể giúp người dùng dễ dàng tìm kiếm thông tin cụ thể mà họ cần.

- Sử dụng các chú thích và lời giải thích: Cung cấp các chú thích và lời giải thíchđể giúp người dùng hiểu các thông tin phức tạp.

- Kiểm tra khả năng sử dụng: Kiểm tra khả năng sử dụng giao diện của mình vớingười dùng thực tế để đảm bảo rằng họ có thể dễ dàng tìm kiếm và hiểu thơng tin.

<b>1.4 Tạo dựng CTA (Call to Action):</b>

Call to Action (CTA), hay còn gọi là lời kêu gọi hành động, là một yếu tố quantrọng trong thiết kế giao diện có vai trị thúc đẩy người dùng thực hiện một hànhđộng cụ thể, mong muốn. CTA thường được thể hiện dưới dạng nút, văn bản hoặchình ảnh nổi bật, thu hút sự chú ý của người dùng và khuyến khích họ thực hiệnhành động như:

- Mua hàng: CTA "Mua ngay", "Đặt hàng", "Thêm vào giỏ hàng"- Đăng ký: CTA "Đăng ký", "Đăng ký miễn phí", "Tham gia ngay"- Tải xuống: CTA "Tải xuống", "Tải miễn phí", "Dùng thử miễn phí"- Liên hệ: CTA "Liên hệ ngay", "Gọi điện", "Gửi email"

- Tìm hiểu thêm: CTA "Xem thêm", "Đọc chi tiết", "Khám phá ngay"

Mục tiêu của CTA:

- Tăng tỷ lệ chuyển đổi: CTA hiệu quả sẽ khuyến khích người dùng thực hiện hànhđộng mong muốn, dẫn đến tăng tỷ lệ chuyển đổi cho website, ứng dụng hoặc chiếndịch marketing.

- Thu hút sự chú ý: CTA nổi bật sẽ thu hút sự chú ý của người dùng và khiến họtập trung vào hành động mong muốn.

- Tạo cảm giác cấp bách: CTA sử dụng ngôn ngữ tạo cảm giác cấp bách sẽ thúcđẩy người dùng hành động ngay lập tức.

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

- Làm rõ hành động mong muốn: CTA rõ ràng sẽ giúp người dùng hiểu hành độngcần thực hiện và dễ dàng thực hiện hơn.

Nguyên tắc thiết kế CTA hiệu quả:

- Nổi bật: CTA cần được thiết kế nổi bật so với các yếu tố khác trên giao diện đểthu hút sự chú ý của người dùng.

- Sử dụng ngôn ngữ mạnh mẽ: CTA cần sử dụng ngơn ngữ mạnh mẽ, khuyến khíchhành động và tạo cảm giác cấp bách.

- Rõ ràng và súc tích: CTA cần rõ ràng, súc tích và dễ hiểu để người dùng biết họcần thực hiện hành động gì.

- Dễ dàng thực hiện: CTA cần được thiết kế dễ dàng thực hiện, chẳng hạn như nútbấm lớn, dễ bấm.

- Kiểm tra A/B: Nên kiểm tra A/B các phiên bản CTA khác nhau để tìm ra phiênbản hiệu quả nhất.

Vị trí đặt CTA: Vị trí đặt CTA cũng ảnh hưởng đến hiệu quả của nó. Một số vị tríđặt CTA hiệu quả thường là:

- Gần đầu trang: Vị trí này giúp CTA thu hút sự chú ý của người dùng ngay khi họtruy cập trang.

- Cuối nội dung: Vị trí này giúp CTA tóm tắt hành động mong muốn sau khi ngườidùng đã đọc nội dung.

- Bên cạnh sản phẩm hoặc dịch vụ: Vị trí này giúp CTA dễ dàng nhìn thấy khingười dùng đang xem xét mua sản phẩm hoặc dịch vụ.

- Trong email: CTA trong email có thể khuyến khích người dùng truy cập websitehoặc thực hiện hành động khác.

Bằng cách thiết kế CTA hiệu quả và đặt CTA ở vị trí phù hợp, chúng ta có thể thúcđẩy người dùng thực hiện hành động mong muốn và đạt được mục tiêu kinh doanh.

Ngoài ra, chúng ta cũng cần lưu ý một số yếu tố khác khi thiết kế CTA như:

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

- Màu sắc: Màu sắc của CTA cần phù hợp với thương hiệu và thu hút sự chú ý củangười dùng.

- Kích thước: Kích thước của CTA cần đủ lớn để dễ nhìn thấy và dễ bấm.

- Kiểu chữ: Kiểu chữ của CTA cần dễ đọc và phù hợp với phong cách chung củagiao diện.

- Hình ảnh: Chúng ta có thể sử dụng hình ảnh để thu hút sự chú ý và tăng hiệu quảcủa CTA.

<b>1.5 Tối ưu hóa cho thiết bị di động:</b>

Tối ưu hóa cho thiết bị di động (mobile-first) là phương pháp thiết kế giao diện tậptrung vào việc hiển thị và trải nghiệm người dùng tốt nhất trên các thiết bị di độngnhư điện thoại thông minh và máy tính bảng.

Lý do cần tối ưu hóa giao diện cho thiết bị di động:

- Xu hướng sử dụng thiết bị di động ngày càng tăng: Ngày nay, Theo thống kê củaStatcounter, tính đến tháng 4 năm 2024, lưu lượng truy cập web từ thiết bị di độngđã vượt qua lưu lượng truy cập từ máy tính để bàn.

- Cải thiện trải nghiệm người dùng: Giao diện được tối ưu hóa cho thiết bị di độngsẽ giúp người dùng dễ dàng tìm kiếm thơng tin, thực hiện các hành động mongmuốn và có trải nghiệm tốt nhất khi sử dụng website hoặc ứng dụng trên thiết bị diđộng.

- Tăng tỷ lệ chuyển đổi: Giao diện di động hiệu quả sẽ khuyến khích người dùngthực hiện hành động mong muốn, dẫn đến tăng tỷ lệ chuyển đổi cho website, ứngdụng hoặc chiến dịch marketing.

- Tăng thứ hạng SEO: Google ưu tiên các website thân thiện với thiết bị di độngtrong kết quả tìm kiếm.

Ngun tắc tối ưu hóa giao diện cho thiết bị di động:

- Thiết kế giao diện đáp ứng: Giao diện đáp ứng sẽ tự động điều chỉnh kích thướcvà bố cục để phù hợp với mọi kích thước màn hình.

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

- Sử dụng phơng chữ dễ đọc: Sử dụng phông chữ đủ lớn và dễ đọc trên màn hình diđộng.

- Sử dụng hình ảnh và video có kích thước phù hợp: Nén hình ảnh và video đểgiảm thời gian tải trang và tiết kiệm dung lượng.

- Sử dụng các nút bấm và liên kết lớn: Nút bấm và liên kết cần đủ lớn để dễ dàngbấm bằng ngón tay.

Loại bỏ các yếu tố khơng cần thiết: Loại bỏ các yếu tố không cần thiết trên giaodiện di động để tiết kiệm không gian và tăng tốc độ tải trang.

- Kiểm tra giao diện trên nhiều thiết bị di động: Kiểm tra giao diện trên nhiều thiếtbị di động khác nhau để đảm bảo rằng nó hiển thị chính xác trên mọi màn hình.

Một số yếu tố khác cần lưu ý khi tối ưu hóa giao diện cho thiết bị di động như:- Tốc độ tải trang: Tốc độ tải trang là yếu tố quan trọng ảnh hưởng đến trải nghiệmngười dùng trên thiết bị di động. Chúng ta cần tối ưu hóa tốc độ tải trang để đảmbảo rằng website hoặc ứng dụng của chúng ta tải nhanh trên mọi mạng di động.- Khả năng sử dụng: Giao diện di động cần dễ sử dụng và điều hướng để ngườidùng có thể dễ dàng tìm kiếm thông tin và thực hiện các hành động mong muốn.- Tính tương thích: Giao diện di động cần tương thích với nhiều trình duyệt diđộng và hệ điều hành khác nhau.

<b>1.6 Tạo dựng sự tin tưởng:</b>

Tạo dựng sự tin tưởng là một yếu tố quan trọng trong thiết kế giao diện, giúp ngườidùng cảm thấy an toàn và tin tưởng khi sử dụng website, ứng dụng hoặc dịch vụcủa chúng ta. Khi người dùng tin tưởng giao diện, họ sẽ có nhiều khả năng thựchiện các hành động mong muốn như mua hàng, đăng ký hoặc cung cấp thông tin cánhân.

Dưới đây là một số yếu tố quan trọng giúp tạo dựng sự tin tưởng trong thiết kế giaodiện:

- Sử dụng thiết kế chuyên nghiệp và nhất quán:

+ Giao diện cần được thiết kế một cách chuyên nghiệp, đẹp mắt và nhất quán vớithương hiệu của chúng ta.

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

+ Sử dụng các yếu tố thiết kế như màu sắc, phơng chữ, hình ảnh và bố cục mộtcách hài hịa và dễ nhìn.

+ Tránh sử dụng các thiết kế q lịe loẹt, rườm rà hoặc khó sử dụng.

- Cung cấp thơng tin đầy đủ và chính xác:

+ Cung cấp đầy đủ thông tin về website, ứng dụng hoặc dịch vụ của mình, baogồm thơng tin về sản phẩm, dịch vụ, giá cả, điều khoản và chính sách.

+ Đảm bảo rằng thơng tin được cung cấp chính xác, cập nhật và dễ hiểu.+ Tránh sử dụng ngôn ngữ mơ hồ, gây hiểu lầm hoặc lừa đảo.

- Bảo mật thông tin người dùng:

+ Sử dụng các biện pháp bảo mật tiên tiến để bảo vệ thông tin cá nhân của ngườidùng.

+ Cho người dùng biết cách thông tin của họ được thu thập, sử dụng và bảo vệ.+ Cung cấp cho người dùng quyền kiểm sốt đối với thơng tin cá nhân của họ.

+ Tạo dựng một cộng đồng trực tuyến cho người dùng của chúng ta.

+ Trả lời các phản hồi và ý kiến của người dùng một cách cởi mở và minh bạch.

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

- Lưu ý một số yếu tố khác như:

+ Minh bạch: Cung cấp thông tin rõ ràng và minh bạch về website, ứng dụng hoặcdịch vụ của chúng ta.

+ Trách nhiệm: Chịu trách nhiệm về các hành động và lời hứa của mình.+ Tơn trọng: Tơn trọng người dùng và quyền riêng tư của họ.

+ Công bằng: Đảm bảo rằng tất cả người dùng được đối xử cơng bằng và bìnhđẳng.

<b>1.7 Tạo cảm giác thân thiện:</b>

Tạo cảm giác thân thiện trong thiết kế giao diện là việc sử dụng các yếu tố thiết kếđể tạo ra một mơi trường chào đón, thoải mái và dễ tiếp cận cho người dùng. Khingười dùng cảm thấy giao diện thân thiện, họ sẽ có nhiều khả năng gắn kết vớithương hiệu của chúng ta và sử dụng website, ứng dụng hoặc dịch vụ của chúng tanhiều hơn.

Những yếu tố quan trọng giúp tạo cảm giác thân thiện trong thiết kế giao diện:- Sử dụng màu sắc và hình ảnh ấm áp, vui tươi:

+ Sử dụng những màu sắc sáng sủa, vui tươi và ấm áp để tạo ra một bầu khơng khíthân thiện và chào đón.

+ Tránh sử dụng những màu sắc quá tối tăm, ảm đạm hoặc chói chang.

+ Sử dụng hình ảnh chất lượng cao, thể hiện sự vui vẻ, lạc quan và gần gũi vớingười dùng.

- Sử dụng ngôn ngữ đơn giản, dễ hiểu:

+ Sử dụng ngôn ngữ đơn giản, dễ hiểu và phù hợp với đối tượng mục tiêu củachúng ta.

+ Tránh sử dụng ngôn ngữ chuyên ngành, biệt ngữ hoặc ngơn ngữ khó hiểu.+ Sử dụng giọng điệu thân thiện, cởi mở và gần gũi với người dùng.

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

- Thiết kế giao diện đơn giản, dễ sử dụng:

+ Thiết kế giao diện đơn giản, dễ sử dụng và dễ điều hướng.

+ Tránh sử dụng quá nhiều yếu tố thiết kế rườm rà, phức tạp hoặc khó sử dụng.+ Sắp xếp các yếu tố thiết kế một cách khoa học và logic để người dùng dễ dàngtìm kiếm thông tin và thực hiện các hành động mong muốn.

- Thể hiện sự quan tâm đến người dùng:

+ Thể hiện sự quan tâm đến người dùng bằng cách sử dụng các lời chào, lời cảmơn và lời xin lỗi.

+ Cung cấp hỗ trợ khách hàng tốt để giúp người dùng giải quyết các vấn đề và sửdụng giao diện một cách hiệu quả.

+ Tạo dựng một cộng đồng trực tuyến cho người dùng để họ có thể tương tác vàchia sẻ ý kiến của họ.

<b>2. Nghiên cứu và phân tích đối tượng sử dụng2.1 Theo độ tuổi</b>

Nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi là một bước quan trọngtrong thiết kế giao diện giúp chúng ta hiểu rõ hơn về nhu cầu, sở thích và hành vicủa người dùng ở các độ tuổi khác nhau. Từ đó, chúng ta có thể thiết kế giao diện

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

phù hợp, đáp ứng nhu cầu của từng nhóm đối tượng mục tiêu, tăng hiệu quả sửdụng và thu hút người dùng.

Lợi ích của việc nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi:

- Hiểu rõ nhu cầu và sở thích của người dùng: Mỗi độ tuổi có những nhu cầu, sởthích và hành vi sử dụng khác nhau. Việc nghiên cứu và phân tích sẽ giúp chúng tahiểu rõ những điểm khác biệt này và thiết kế giao diện phù hợp với từng nhóm đốitượng mục tiêu.

- Tăng hiệu quả sử dụng: Giao diện được thiết kế phù hợp với nhu cầu và sở thíchcủa người dùng sẽ giúp họ dễ dàng sử dụng, tìm kiếm thơng tin và thực hiện cáchành động mong muốn, từ đó tăng hiệu quả sử dụng.

- Thu hút người dùng: Giao diện hấp dẫn và đáp ứng nhu cầu của người dùng sẽthu hút họ sử dụng website, ứng dụng hoặc dịch vụ của chúng ta nhiều hơn.

- Tăng tỷ lệ chuyển đổi: Giao diện dễ sử dụng và thu hút sẽ khuyến khích ngườidùng thực hiện các hành động mong muốn như mua hàng, đăng ký hoặc cung cấpthơng tin cá nhân, từ đó tăng tỷ lệ chuyển đổi.

Phương pháp nghiên cứu và phân tích đối tượng sử dụng theo độ tuổi:

- Khảo sát: Khảo sát là phương pháp phổ biến nhất để thu thập dữ liệu về nhu cầu,sở thích và hành vi của người dùng. Chúng ta có thể thực hiện khảo sát trực tuyến,qua email, qua điện thoại hoặc phỏng vấn trực tiếp.

- Phân tích dữ liệu: Phân tích dữ liệu sử dụng website, ứng dụng hoặc dịch vụ củachúng ta có thể cung cấp cho chúng ta thông tin chi tiết về hành vi của người dùngở các độ tuổi khác nhau.

- Nhóm tập trung: Nhóm tập trung là một phương pháp hiệu quả để thu thập ý kiếnvà phản hồi của người dùng về giao diện của chúng ta.

- Nghiên cứu trực tuyến: Nghiên cứu trực tuyến có thể giúp chúng ta tìm hiểu vềxu hướng sử dụng internet và hành vi của người dùng ở các độ tuổi khác nhau.

<b>2.2 Phân loại theo sở thích thời trang:</b>

Nghiên cứu và phân tích đối tượng sử dụng theo sở thích thời trang trong thiết kếgiao diện là quá trình thu thập và phân tích thơng tin về sở thích, xu hướng thời

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

trang của người dùng để từ đó thiết kế giao diện phù hợp, thu hút và giữ chânngười dùng. Việc phân tích theo sở thích thời trang giúp chúng ta hiểu rõ hơn vềphong cách, gu thẩm mỹ, thói quen mua sắm và hành vi sử dụng của các nhóm đốitượng mục tiêu khác nhau, từ đó đưa ra những quyết định sáng suốt trong thiết kếgiao diện.

Lợi ích:

- Hiểu rõ nhu cầu và sở thích của người dùng: Mỗi nhóm đối tượng có sở thích thờitrang khác nhau, từ đó có những nhu cầu và mong muốn riêng khi sử dụng website,ứng dụng hoặc dịch vụ liên quan đến thời trang. Việc nghiên cứu và phân tích sẽgiúp chúng ta hiểu rõ những nhu cầu này và thiết kế giao diện phù hợp, đáp ứngmong muốn của từng nhóm đối tượng mục tiêu.

- Tăng hiệu quả sử dụng: Giao diện được thiết kế phù hợp với sở thích thời trangcủa người dùng sẽ giúp họ dễ dàng tìm kiếm thơng tin, mua sắm sản phẩm và trảinghiệm dịch vụ một cách hiệu quả, từ đó tăng tỷ lệ chuyển đổi và thu hút kháchhàng tiềm năng.

- Tăng khả năng nhận diện thương hiệu: Giao diện mang đậm phong cách thờitrang phù hợp với đối tượng mục tiêu sẽ giúp tạo dựng hình ảnh thương hiệu độcđáo và ấn tượng, thu hút sự chú ý và ghi nhớ của người dùng.

- Tăng lợi thế cạnh tranh: Việc phân tích đối thủ cạnh tranh và xu hướng thị trườngthời trang sẽ giúp chúng ta thiết kế giao diện vượt trội, tạo sự khác biệt và thu hútngười dùng hiệu quả hơn.

- Ứng dụng mua sắm trực tuyến: Ứng dụng mua sắm trực tuyến cần nghiên cứuthói quen mua sắm và hành vi sử dụng của người dùng theo sở thích thời trangkhác nhau để tối ưu hóa trải nghiệm mua sắm. Ví dụ, ứng dụng mua sắm dành.

<b>3. Thu thập yêu cầu từ khách hàng hoặc nhóm dự án</b>

Thu thập yêu cầu là bước quan trọng đầu tiên trong quy trình thiết kế giao diện,giúp chúng ta xác định rõ mục tiêu, mong muốn và nhu cầu của khách hàng hoặcnhóm dự án đối với giao diện. Từ đó, chúng ta có thể đưa ra phương án thiết kếphù hợp, đáp ứng đầy đủ yêu cầu và đảm bảo sự hài lịng của khách hàng.

Mục đích của việc thu thập yêu cầu:

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

- Hiểu rõ mục tiêu và mong muốn của khách hàng: Việc thu thập yêu cầu giúpchúng ta hiểu rõ mục tiêu mà khách hàng muốn đạt được với giao diện, từ đó đưara giải pháp thiết kế phù hợp.

- Xác định rõ nhu cầu của người dùng: Nhu cầu của người dùng là yếu tố then chốtảnh hưởng đến thiết kế giao diện. Việc thu thập yêu cầu giúp chúng ta xác định rõnhu cầu của người dùng, từ đó thiết kế giao diện dễ sử dụng, đáp ứng nhu cầu củahọ.

- Tránh những hiểu lầm và sai sót: Việc thu thập yêu cầu một cách cẩn thận và chitiết sẽ giúp tránh những hiểu lầm và sai sót trong q trình thiết kế, tiết kiệm thờigian và chi phí cho dự án.

- Tăng cường sự tham gia của khách hàng: Việc thu thập yêu cầu giúp khách hàngtham gia vào quá trình thiết kế ngay từ đầu, từ đó tăng cường sự tin tưởng và hàilòng của họ đối với sản phẩm cuối cùng.

<b>4. Lập kế hoạch thiết kế giao diện4.1 Xác định mục tiêu thiết kế:</b>

Xác định mục tiêu thiết kế là bước quan trọng đầu tiên trong quy trình thiết kế giaodiện, giúp chúng ta xác định rõ ràng những gì mình muốn đạt được với giao diện.Mục tiêu thiết kế rõ ràng sẽ giúp chúng ta đưa ra những quyết định sáng suốt trongsuốt quá trình thiết kế, từ đó tạo ra giao diện hiệu quả, đáp ứng nhu cầu của ngườidùng và đạt được mục tiêu kinh doanh.

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

- Ưu tiên mục tiêu thiết kế: Ưu tiên các mục tiêu thiết kế quan trọng nhất để đảmbảo chúng ta tập trung vào những yếu tố thiết yếu nhất.

<b>4.2 Nghiên cứu thị trường:</b>

Nghiên cứu thị trường trong thiết kế giao diện là quá trình thu thập và phân tíchthơng tin về thị trường, đối thủ cạnh tranh và người dùng mục tiêu để đưa ra nhữngquyết định sáng suốt trong thiết kế. Việc nghiên cứu thị trường giúp chúng ta hiểurõ xu hướng thị trường, nhu cầu của người dùng và chiến lược của đối thủ cạnhtranh, từ đó thiết kế giao diện hiệu quả, đáp ứng nhu cầu thị trường và thu hútngười dùng.

Phương pháp nghiên cứu thị trường trong thiết kế giao diện:

- Nghiên cứu định tính: Nghiên cứu định tính thu thập dữ liệu phi số lượng như ýkiến, cảm xúc và hành vi của người dùng. Các phương pháp nghiên cứu định tínhphổ biến bao gồm phỏng vấn, nhóm thảo luận, quan sát hành vi người dùng và thửnghiệm người dùng.

- Nghiên cứu định lượng: Nghiên cứu định lượng thu thập dữ liệu số lượng như sốliệu thống kê, tỷ lệ và xu hướng thị trường. Các phương pháp nghiên cứu địnhlượng phổ biến bao gồm khảo sát, phân tích dữ liệu web và phân tích xu hướng thịtrường.

- Nghiên cứu sơ cấp: Nghiên cứu sơ cấp thu thập dữ liệu mới từ nguồn chính. Cácphương pháp nghiên cứu sơ cấp phổ biến bao gồm phỏng vấn, nhóm thảo luận,quan sát hành vi người dùng và thử nghiệm người dùng.

- Nghiên cứu thứ cấp: Nghiên cứu thứ cấp thu thập dữ liệu đã có sẵn từ các nguồnkhác như báo cáo thị trường, bài viết nghiên cứu và dữ liệu thống kê chính phủ.

<b>4.3 Lập sơ đồ trang web:</b>

Lập sơ đồ trang web (hay cịn gọi là Sitemap) là một cơng cụ quan trọng trong thiếtkế giao diện, giúp chúng ta tổ chức và thể hiện cấu trúc của website một cách trựcquan. Sitemap giống như bản đồ thu nhỏ của website, liệt kê tất cả các trang vàmối quan hệ giữa chúng.

Lợi ích của việc lập sơ đồ trang web:

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

- Hiểu rõ cấu trúc website: Sitemap giúp chúng ta hiểu rõ cấu trúc website, xácđịnh các trang quan trọng và mối quan hệ giữa các trang.

- Tăng khả năng truy cập: Sitemap giúp các công cụ tìm kiếm như Google dễ dàngkhám phá và lập chỉ mục tất cả các trang trên website của chúng ta, từ đó tăng khảnăng truy cập website.

- Cải thiện trải nghiệm người dùng: Sitemap giúp người dùng dễ dàng điều hướngwebsite và tìm kiếm thơng tin họ cần.

- Xác định lỗi website: Sitemap có thể giúp chúng ta xác định các lỗi website nhưliên kết bị hỏng hoặc trang web bị thiếu.

- Giao tiếp hiệu quả: Sitemap là một công cụ giao tiếp hiệu quả giúp chúng ta chiasẻ cấu trúc website với các bên liên quan trong dự án.

Cách lập sơ đồ trang web:

- Xác định các trang trên website của chúng ta: Bắt đầu bằng cách xác định tất cảcác trang trên website của chúng ta. Bao gồm cả các trang chính, trang con, trangblog, trang sản phẩm,...

- Sắp xếp các trang theo phân cấp: Sắp xếp các trang theo phân cấp, bắt đầu từtrang chủ và đi xuống các trang con.

- Xác định mối quan hệ giữa các trang: Xác định mối quan hệ giữa các trang, ví dụnhư trang nào liên kết đến trang nào.

Cơng cụ trực tuyến: Có nhiều cơng cụ trực tuyến miễn phí và trả phí có thể giúpchúng ta tạo Sitemap XML và Sitemap HTML. Một số công cụ phổ biến bao gồmGoogle Search Console, Screaming Frog SEO Spider và DYNO SitemapGenerator.

<b>4.4 Thiết kế giao diện:</b>

Thiết kế giao diện, hay còn gọi là UI Design (User Interface Design), là quá trìnhthiết kế các yếu tố trực quan và tương tác của một sản phẩm kỹ thuật số nhưwebsite, ứng dụng di động, phần mềm máy tính, v.v. Mục tiêu của thiết kế giaodiện là tạo ra giao diện dễ sử dụng, đẹp mắt, mang lại trải nghiệm tốt nhất chongười dùng và đáp ứng các mục tiêu kinh doanh của sản phẩm.

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

Một số yếu tố quan trọng trong thiết kế giao diện:

- Khả năng sử dụng: Giao diện cần dễ sử dụng, dễ hiểu và dễ điều hướng để ngườidùng có thể dễ dàng tìm kiếm thơng tin, thực hiện các hành động mong muốn vàhoàn thành nhiệm vụ một cách hiệu quả.

- Tính thẩm mỹ: Giao diện cần đẹp mắt, thu hút và mang lại trải nghiệm tốt chongười dùng.

- Sự nhất quán: Giao diện cần nhất quán trong thiết kế, bố cục, màu sắc, phôngchữ,... để tạo cảm giác chuyên nghiệp và dễ sử dụng.

- Phản hồi: Giao diện cần phản hồi nhanh chóng và chính xác với các hành độngcủa người dùng.

- Tiếp cận: Giao diện cần dễ tiếp cận với tất cả người dùng, bao gồm cả ngườikhuyết tật.

<b>4.5 Kiểm tra và hoàn thiện:</b>

Kiểm tra và hoàn thiện là bước quan trọng cuối cùng trong quy trình thiết kế giaodiện, nhằm đảm bảo giao diện hoạt động hiệu quả, đáp ứng nhu cầu của ngườidùng và đạt được mục tiêu kinh doanh.

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

+ Sửa lỗi một cách cẩn thận và chính xác.

+ Thử nghiệm lại giao diện sau khi sửa lỗi để đảm bảo lỗi đã được khắc phục.

- Hoàn thiện giao diện:

+ Hồn thiện các chi tiết cịn thiếu trong giao diện.

+ Đảm bảo giao diện nhất quán và đồng đều trên tất cả các trang.+ Tối ưu hóa giao diện cho hiệu suất tốt nhất.

- Triển khai giao diện:

+ Triển khai giao diện vào sản phẩm kỹ thuật số.+ Theo dõi hiệu quả của giao diện sau khi triển khai.+ Thu thập phản hồi của người dùng sau khi triển khai.

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

<b>IV. THIẾT KẾ GIAO DIỆN</b>

<b>1. Sơ đồ usecase tổng quát và đặc tả usecase cho từngmàn hình phía người dùng (client)</b>

<i>Sơ đồ usecase tổng quát của khách hàng</i>

Name Đăng nhập Code Usecase01

Description Chức năng được dùng cho việc đăng nhập vào hệ thống đểsử dụng các chức năng quản lý của người dùng.

Actor Khách hàng Trigger Người dùng đăng nhập khi chọnvào biểu tượng người dùng trênthanh header.

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

Pre-condition Người dùng chưa đăng nhập tài khoản vào hệ thống.

Post-condition -Nếu đăng nhập thành công: hệ thống sẽ chuyển sang trangtrang chủ sau khi đăng nhập.

-Nếu đăng nhập thất bại sẽ thông báo “Tài khoản khơng tồntại” và giữ ngun trạng thái màn hình đăng nhập.

-Không kết nối được hệ thống-Mất kết nối internet

1. Hệ thống hiển thị giao diện đăng nhập.

2. Người dùng nhập vào tên tài khoản và mật khẩu.3. Người dùng nhấn nút “Đăng nhập”.

4. Hệ thống kiểm tra tài khoản và mật khẩu đăng nhậpvà cho phép đăng nhập vào hệ thống.

-Tại bước 4 kiểm tra tài khoản không tồn tại trong hệ thốngthì thơng báo “Tài khoản khơng tồn tại”

Name Đăng xuất Code Usecase02

Description Chức năng được người dùng cho việc đăng xuất khỏi hệthống khi người dùng khơng có nhu cầu sử dụng

Actor Khách hàng Trigger Người dùng đăng xuất khi nhấnvào biểu tượng người dùng trênthanh header sau đó chọn đăngxuất.

Pre-condition Người dùng đã đăng nhập tài khoản vào hệ thống

Post-condition Đăng xuất thành công: hệ thống sẽ chuyển sang màn hìnhhome trước khi đăng nhập.

-Khơng kết nối được hệ thống-Mất kết nối internet

1. Người dùng đang ở cửa sổ bất kỳ khi đang đăng nhậptrong hệ thống và nhấn vào nút “Đăng xuất”.

2. Hệ thống sẽ thốt ra màn hình trang chủ trước khi

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

đăng nhập.Alternative

Khơng có

Name Đăng ký Code Usecase03

Description Chức năng được dùng cho việc đăng ký tài khoản để muahàng

Actor Khách hàng Trigger Người dùng chọn đăng ký trongphần “Đăng ký” trong trang ĐăngNhập.

Pre-condition Người dùng chưa có tài khoản.

Post-condition Đăng ký thành cơng: hệ thống sẽ chuyển sang màn hìnhđăng nhập.

-Khơng kết nối được hệ thống-Mất kết nối internet

1. Hệ thống hiển thị giao diện đăng nhập2. Người dùng chọn vào đăng ký

3. Hệ thống hiển thị giao diện đăng ký

4. Người dùng nhập đầy đủ thông tin và nhấn nút “Đăngký”.

5. Hệ thống kiểm tra tài khoản và mật khẩu và thông báođăng ký tài khoản thành công

-Tại bước 3 kiểm tra thơng tin nếu tài khoản đã có trong cơ sởdữ liệu thì thơng báo “Tài khoản đã tồn tại” và giữ nguyên mànhình đăng ký.

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

Name Quên mậtkhẩu

Pre-condition Người dùng đã đăng ký tài khoản với hệ thống.

Post-condition Khôi phục mật khẩu thành cơng: hệ thống sẽ chuyển sangmàn hình đăng nhập.

-Không kết nối được hệ thống-Mất kết nối internet

1. Hê thống hiển thị giao diện đăng nhập

2. Người dùng chọn vào quên mật khẩu3. Hệ thống hiển thị giao diện quên mật khẩu

4. Người dùng nhập email (tài khoản) đã đăng ký tàikhoản.

5. Người dùng chọn vào nút khôi phục

6. Hệ thống hiển thị giao diện khôi phục mật khẩu.

7. Người dùng nhập đầy đủ thông tin sau đó nhấn nútkhơi phục

8. Hệ thống thơng báo khơi phục mật khẩu thành cơngvà chuyển sang màn hình đăng nhập.

-Tại bước 4 người dùng nhập sai thông tin email (tài khoản) đãđăng ký thì người dùng sẽ khơng nhận được mã OTP xác thựccủa hệ thống.

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

<b>1.2.5 Xem thông tin cá nhân</b>

Name Thông tin cánhân

Pre-condition Người dùng đã đăng nhập tài khoản với hệ thống.

Post-condition Chọn thông tin : hệ thống sẽ chuyển sang màn hình xemthông tin tài khoản.

-Không kết nối được hệ thống-Mất kết nối internet

1. Hệ thống hiển thị thông tin tài khoản đang đăng nhập vàohệ thống

2. Người dùng xem hoặc thay đổi thông tin cá nhân3. Nhập đầy đủ thông cần thay đổi

4. Nhấn váo nút Save

5. Hệ thống sẽ thông báo thay đổi thông tin thành công vàgiữ nguyên màn hình thơng tin tài khoản.

Khơng có

Name Thêm sảnphẩm vàogiỏ hàng

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

đó chọn mua sản phẩm sẽ hiệnthông tin chi tiết của sản phẩm rồinhấn vào nút thêm vào giỏ hàng. Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.Post-condition Thêm sản phẩm vào giỏ hàng thành công : hệ thống sẽ

chuyển sang màn hình giỏ hàng và sản phẩm vừa mới muasẽ cập nhật trong giỏ hàng.

-Không kết nối được hệ thống.-Mất kết nối internet.

1. Hệ thống hiển thị giao diện trang cửa hàng.2. Chọn sản phẩm cần thêm và nhấn dấu + .

3. Hệ thống sẽ hiển thị trang chi tiết sản phẩm sau đó chọnsố lượng và nhấn nút thêm vào giỏ hàng.

4. Hệ thống sẽ hiển thị trang giỏ hàng và cập nhật sản phẩmtrong giỏ hàng.

Không có

Name Tìm kiếmsản phẩm

Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.Post-condition - Tìm kiếm sản phẩm thành cơng : nếu tìm kiếm sản phẩm

thành cơng thì hệ thống sẽ chuyển sang giao diện sản phẩmtìm được hiển thị màn hình ứng với kết quả tìm kiếm.

- Tìm kiếm sản phẩm thất bại : nếu tìm kiếm sản phẩm

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

khơng có kết quả thì hệ thống sẽ hiển thị “Khơng có kết quảnào”.

-Khơng kết nối được hệ thống.-Mất kết nối internet.

1. Hệ thống hiển thị giao diện trang cửa hàng.

2. Người dùng nhập sản phẩm cần tìm sau đó nhấn nút tìmkiếm

3. Hệ thống hiển thị các sản phẩm theo thơng tin đã nhập.

Khơng có

Name Lọc sảnphẩm

Pre-condition Người đã hoặc chưa đăng nhập tài khoản với hệ thống.

Post-condition - Lọc sản phẩm thành công: hệ thống sẽ hiển thị các các sảnphẩm mà người dùng đã tích chọn.

-Khơng kết nối được hệ thống.-Mất kết nối internet.

1. Hệ thống hiển thị giao diện trang cửa hàng.2. Người dùng tích chọn sản phẩm cần mua.

4. Hệ thống hiển thị các sản phẩm mà người dùng đã tíchchọn.

Khơng có

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

Name Xem chi tiếtsản phẩm

phẩm có trong cửa hàng.Error

-Không kết nối được hệ thống.-Mất kết nối internet.

1. Hệ thống hiển thị giao diện trang cửa hàng.2. Chọn sản phẩm cần xem chi tiết và nhấn dấu + .3. Hệ thống sẽ hiển thị trang chi tiết sản phẩm đó.

Alternativeflow/process

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

1.Người dùng chọn vào biểu tượng giỏ hàng

2.Hệ thống chuyển sang màn hình giỏ hàng và hiểnthị thơng tin sản phẩm đã có trong giỏ hàng.

<b>Luồng con A1: “Người dùng xóa sản phẩm tronggiỏ hàng”</b>

1.Người dùng nhấn nút x vào sản phẩm muốn xóatrong giỏ hàng.

2.Hệ thống thơng báo bạn có chắc chắn muốn xóa sảnphẩm.

3.Người dùng chọn ok.

4.Hệ thống sẽ xóa sản phẩm ra khỏi giỏ hàng.

<b>Luồng con A2: “Người dùng thay đổi số lượng sảnphẩm đã có trong giỏ hàng”</b>

1.Người dùng chọn vào nút tăng giảm số lượng đểthay đổi số lượng sản phẩm trong giỏ hàng.

4.Hệ thống hiển thị thông báo thanh tốn thành cơng.Alternative

Description Chức năng được người dùng xem các đơn hàng đã đặt.

Actor Khách hàng Trigger Người dùng chọn vào biểu tượngngười dùng sau đó chọn vào đơn

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

hàng đã mua để xem những đơnhàng đã đặt

Pre-condition Người đã đăng nhập tài khoản với hệ thống.

Post-condition - Thành Công: hệ thống chuyển sang màn hình đơn hàng đãmua và hiển thị các đơn hàng đã mua.

-Không kết nối được hệ thống.-Mất kết nối internet.

1. Người dùng chọn vào biểu tượng người dùng trênthanh header và sau đó chọn vào đơn hàng đã mua.2. Hê thống hiển thị trang đơn hàng đã mua và hiển thị

các thông tin của đơn hàng đó.

<b>Luồng con A1: “Người dùng chọn xem chi tiết đơnhàng”</b>

1.Người dùng chọn nút xem chi tiết tại đơn hàngmuốn xem chi tiết.

2.Hệ thống hiển thị thông tin chi tiết đơn hàng gồmnhững sản phẩm đã đặt trong đơn hàng đó.

<b>Luồng con A2: “Người dùng chọn hủy đơn hàng”</b>

1.Người dùng chọn nút hủy đơn hàng tại đơn hàngmuốn hủy.

2.Hệ thống thông báo bạn có chắc chắn muốn hủyđơn hàng.

3.Người dùng chọn Hủy.

4. Hệ thống sẽ hủy đơn hàng và lưu thông tin đơnhàng đã hủy vào cơ sở dữ liệu.

 <b>Luồng con A2:</b>

Tại bước 3: Người dùng chọn Không, hệ thống sẽ quay vềmàn hình đơn hàng đã mua.

<b>1.2.12 Về chúng tôi</b>