(BÁO CÁO MÔN HỌC THỰC HÀNH CHUYÊN SÂU) NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP TRONG THIẾT KẾ ỨNG DỤNG DI ĐỘNG VÀ ÁP DỤNG VÀO THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG

Báo cáo môn học THỰC HÀNH CHUYÊN SÂU | KHOA ĐA PHƯƠNG TIỆN| HỌC VIỆN BƯU CHÍNH VIỄN THÔNG (PTIT) Báo cáo này phù hợp với các bạn đang theo học chuyên ngành thiết kế UIUX tại các trường đại học hoặc các trung tâm dạy thiết kế nói chung và thiết kế UIUX nói riêng. Đây là một sản phẩm rất tâm đắc và giúp mình đạt được A+ cho môn học này. NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP TRONG THIẾT KẾ ỨNG DỤNG DI ĐỘNG VÀ ÁP DỤNG VÀO THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG TRỢ LÝ MẸ BẦU) Báo cáo là một sản phẩm trong lĩnh vực thiết kế UIUX, vận dụng một phần kiến thức lý thuyết và áp dụng vào triển khai sản phẩm cụ thể.

TỔNG QUAN LÝ THUYẾT

TỔNG QUAN THIẾT KẾ UI

1 UI là gì ? Thiết kế UI là gì ?

UI (User Interface) – Giao diện người dùng là các điểm tương tác giữa người dùng và sản phẩm [2]

Giao diện người dùng (UI) là lớp giao diện đồ họa kết nối con người với máy móc, từ máy tính và điện thoại thông minh đến trang web và TV Hiểu một cách đơn giản, UI bao gồm tất cả những gì người dùng có thể nhìn thấy trên màn hình: màu sắc, bố cục và cách sắp xếp các yếu tố, loại font chữ được sử dụng trên website hoặc ứng dụng, cũng như hình ảnh và đồ họa có sức hút Nói cách khác, UI chính là tập hợp các yếu tố hiển thị trên giao diện người dùng, hình thành trải nghiệm trực quan và dễ sử dụng cho người dùng.

Thiết kế UI (thiết kế giao diện người dùng) là quá trình các nhà thiết kế xây dựng toàn bộ giao diện người dùng, và nó được chia thành hai yếu tố riêng biệt: thứ nhất là cách người dùng tương tác với giao diện, thứ hai là cách giao diện trông như thế nào.

Tầm quan trọng của UI

UI có vai trò quan trọng trong sự thành công của sản phẩm Mục đích của thiết kế UI là làm cho tương tác của người dùng với sản phẩm hiệu quả và đơn giản nhất có thể Thiết kế UI nhằm quản lý cách người dùng tiếp nhận và điều hướng thông qua giao diện của sản phẩm Một thiết kế UI tốt cung cấp cho người dùng chính xác những gì họ cần làm theo cách nhanh chóng và dễ dàng nhất, đồng thời giúp sản phẩm tạo ấn tượng tốt, nâng cao uy tín thương hiệu, và giúp người dùng dễ dàng tiếp cận thông tin, từ đó thúc đẩy khách hàng thực hiện các chuyển đổi như quyết định mua hàng, sử dụng dịch vụ, liên hệ hoặc để lại thông tin… [5]

Một sản phẩm website/app có giao diện thiết kế bắt mắt, màu sắc bắt mắt sẽ thu hút người dùng hơn rất nhiều bởi chẳng ai muốn dùng một sản phẩm có giao diện tẻ nhạt, buồn chán

2 Quy trình thiết kế UI (UI Design Process)

● Giai đoạn 1: Kết hợp (Collaborating)

Ở giai đoạn này, nhà thiết kế làm việc trực tiếp với UX Designer và Developer (lập trình viên) để nắm bắt khái niệm sản phẩm và đối tượng người dùng mà sản phẩm nhắm đến trước khi hoàn thiện thiết kế Việc đồng bộ giữa ý tưởng thiết kế, trải nghiệm người dùng và yêu cầu kỹ thuật giúp định hình sản phẩm ngay từ đầu Kết quả là bản thiết kế phản ánh đúng mục tiêu người dùng và khả năng triển khai của đội ngũ phát triển, từ đó tăng hiệu quả và tối ưu hóa quy trình làm việc.

● Giai đoạn 2: Thiết kế (Design) Để chuẩn bị cho một thiết kế vừa tương tác “tốt” vừa “mãn nhãn”, UI Designer phải qua các bước từ tạo kiến trúc thông tin, soạn thảo Style Guide – Hướng dẫn về phong cách, thiết kế từng panel (bảng điều khiển) , sắp xếp layout (trang) cho thiết kế tương thích (responsive), thiết kế các yếu tố UI nhỏ (như thanh trượt, nút bấm,

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 3 icon,…), tạo một hệ thống thiết kế (design system), và tăng tính tương tác cho từng yếu tố

● Giai đoạn 3: Lên mẫu thử (Prototyping)

Thường xuyên kiểm tra các bản prototype để đánh giá hiển thị và động tác, từ đó phát hiện và sửa các lỗi cần thiết Sau khi hoàn thiện thiết kế, UI Designer sẽ bàn giao thiết kế cho đội ngũ lập trình để bắt đầu giai đoạn phát triển sản phẩm [7]

● Giai đoạn 4: Thử nghiệm, cải thiện và cập nhật Ở giai đoạn này UI Designer sẽ phải liên tục cải thiện sản phẩm cho phù hợp với nhu cầu, vấn đề, hành vi hay kì vọng liên tục thay đổi của người dùng để sản phẩm ngày càng hoàn thiện [7]

3 Nguyên lý thiết kế UI

3.1 Bộ nguyên lý DOET Đây là bộ nguyên lý được tạo ra bởi nhà khoa học Donald A Norman trong lúc ông nghiên cứu về vấn đề tương tác giữa con người với máy tính trong dự án gọi là "Design of Everyday Things" - DOET (tạm dịch: thiết kế cho những thứ được dùng hằng ngày) [6] Nó được sử dụng để các nhà thiết kế tích hợp và đánh giá xem giao diện của mình có thực sự hữu ích và giúp cho việc tương tác giữa người với máy tính dễ dàng hơn hay không Nó bao gồm những yếu tố sau:

- Hoàn tất những yêu cầu từ phía người dùng

- Sử dụng cả “Knowledge in the Head" và “Knowledge in the World

- Đơn giản hóa tác vụ của người dùng

- Làm mọi thứ rõ ràng nhất có thể

- Thu hẹp khoảng cách thực thi và khoảng cách đánh giá

- Sắp xếp một cách đúng đắn

- Khai thác sức mạnh từ biện pháp hạn chế

- Thiết kế phải tính đến lỗi

- Chuẩn hóa khi cần thiết

Jakob Nielsen năm 1995 ra mắt một tập các nguyên lý mà ông đã nghiên cứu, còn được gọi là heuristic, là một số nguyên tắc thiết kế được công nhận nhất Các nguyên tắc là quy tắc của ngón tay cái thay vì các hướng dẫn sử dụng cụ thể Những nguyên tắc này đã được chứng minh rằng sẽ đem lại kết quả tố cho thiết kế [6] Về cơ bản thì 10 điều do Nielsen đưa ra cũng khá giống với bộ DOET nói trên, chỉ khác một chút về cách diễn đạt và cách người ta đánh giá nó

Bộ nguyên lý này bao gồm các nguyên tắc cơ bản sau:

- Luôn hiện rõ trạng thái của hệ thống

[Họ và tên: Nguyễn Thị Hậu| Lớp: D18TKDPT2] 4

- Làm giao diện giống với hiện thực đời sống

- Cho người dùng kiểm soát và sự tự do

- Đề cao sự thống nhất

- Cung cấp sự linh hoạt cho người sùng

- Giảm tải những gì người dùng cần phải nhớ

- Giao diện phải có tính thẩm mỹ và tính liên quan

- Giúp người dùng xác định và khắc phục lỗi xảy ra

- Cung cấp sự trợ giúp, tài liệu hướng dẫn người dùng

TỔNG QUAN THIẾT KẾ ĐỐI VỚI ỨNG DỤNG DI ĐỘNG (MOBILE APP)

1 Ứng dụng di động (Mobile app) là gì? Ứng dụng di động hay mobile app được định nghĩa là các chương trình phần mềm được thiết kế dành riêng cho điện thoại di động Ứng dụng được biển đổi tùy thuộc vào chức năng giải trí, mua sắm hay xem tin tức,… Thiết kế ứng dụng trên di động là sử dụng ngôn ngữ lập trình để thiết kế và phát triển ra một ứng dụng nhằm gia tăng tiện ích cho thiết bị di động đến mức tốt nhất Và tùy mục đích khác nhau mà ứng dụng sẽ có những tính năng riêng biệt

Hình 1 3 Hình ảnh về giao diện ứng dụng di động

2 Lợi ích của thiết kế ứng dụng di động Ứng dụng hiện nay thường được thiết kế cho hai hệ điều hành được sử dụng phổ biến là Android và iOS Việc phát triển ứng dụng sẽ thỏa mãn được nhu cầu của người dùng, từ đó giúp phát triển việc kinh doanh của doanh nghiệp

 So sánh hệ điều hành Android và iOS

Hình 1 4 So sánh hệ điều hành Android và iOS

Android iOS Ưu điểm + Ở Châu Á, số lượng người dùng iOS ít hơn người dùng Android nên ứng dụng chạy trên Android thu được nhiều phản hồi hơn chạy trên iOS

+ Mỗi lần tải App trên Android xuống thường tốn ít chi phí hơn khi tải App trên iOS xuống

+ Mobile app trên Android không cần phải cập nhật thường xuyên như trên IOS, giúp góp phần giảm chi phí bảo trì

+ Phần mềm ứng dụng chạy trên iOS được xây dựng nhanh hơn và giá thành thiết kế rẻ hơn các ứng dụng chạy trên Android

Các ứng dụng trả phí trên cửa hàng ứng dụng dễ kiếm được doanh thu hơn vì người dùng điện thoại thuộc hệ điều hành này có xu hướng bỏ tiền mua ứng dụng Điều này làm cho mô hình kinh doanh dựa trên phí tải xuống và mua ứng dụng trở nên hấp dẫn, đồng thời tối ưu nội dung với từ khóa SEO liên quan như "ứng dụng trả phí", "cửa hàng ứng dụng" và "chi tiêu của người dùng di động" giúp tăng khả năng tiếp cận và chuyển đổi người dùng mục tiêu.

+ Nguyên tắc của cửa hàng ứng dụng iOS có nhiều nguyên tắc nghiêm ngặt nhằm đảm bảo chất lượng App

+ App chạy trên iOS dễ sử dụng hơn bởi ít gặp sự cố phần mềm hơn

+ Thiết kế ứng dụng Android mất nhiều thời gian nghiên cứu vì ứng dụng đó phải vận hành trên nhiều loại thiết bị với kích cỡ, hiệu suất và độ phân giải màn hình khác nhau

+ Chi phí lưu trữ ứng dụng trên App Store khoảng gần 200$

+ Các quy định nghiêm ngặt của Apple khiến quá trình phê duyệt từ kho ứng dụng khó

+ Quá trình phát triển ứng dụng Android mất nhiều thời gian hơn iOS

+ Ở Châu Á, người dùng Android chiếm số lượng nhiều hơn iOS

Thiết kế ứng dụng di động không chỉ bắt kịp xu hướng chung, đáp ứng nhu cầu hiện đại của xã hội mà còn tạo ra nhiều lợi ích ưu việt khác cho các doanh nghiệp Có thể kể đến như: Tạo nên ứng dụng riêng cho doanh nghiệp chất lượng, có thể hỗ trợ đem đến lợi nhuận cao, gia tăng việc tiêu thụ sản phẩm; thu hút được nhiều khách hàng tiềm năng; đơn giản hóa việc quảng cáo, tiết kiệm chi phí; là kênh tiếp thị, quảng cáo cực kỳ hiệu quả qua ứng dụng di động; đưa sản phẩm đến gần hơn với khách hàng, giúp họ dễ dàng tìm hiểu sản phẩm từ nhiều nguồn thông tin

3 Quy trình thiết kế giao diện ứng dụng di động?

Thông thường, quá trình tạo ra một mobile app bao gồm 4 bước sau:

Bước 1: Xác định yêu cầu của ứng dụng bằng cách phân tích ba yếu tố chính: đối tượng mục tiêu sẽ sử dụng ứng dụng; ngữ cảnh sử dụng mà người dùng sẽ tiếp cận sản phẩm; và những hoạt động của người dùng với ứng dụng Việc xác định đối tượng mục tiêu giúp hiểu rõ nhu cầu, hành vi và mong đợi của người dùng; nhận diện ngữ cảnh sử dụng đảm bảo giải pháp phù hợp với môi trường và tình huống thực tế; xác định các hoạt động của người dùng với ứng dụng cho phép xác định các chức năng cốt lõi và trải nghiệm người dùng cần thiết Kết quả của bước này sẽ làm cơ sở cho thiết kế và tối ưu hóa nội dung, chức năng và SEO cho bài viết liên quan đến ứng dụng.

• Bước 2: Thiết kế phác thảo o Xây dựng thiết kế phác thảo cho ứng dụng: Các chức năng của ứng dụng và cách thức nó hoạt động

• Bước 3: Xây dựng bản mẫu o Xây dựng bản dùng thử để người dùng trải nghiệm, hiểu ứng dụng

• Bước 4: Đánh giá o Đánh giá ứng dụng sau mỗi bước thực hiện để xem ứng dụng có đạt mục tiêu hay không

4 Các nguyên tắc thiết kế giao diện ứng dụng di động

Thực tế là có khoảng 3,8 tỷ người dùng điện thoại thông minh trên toàn thế giới có nghĩa là việc tối ưu hóa trang web của bạn để sử dụng trên thiết bị di động là rất quan trọng

Thiết kế web di động là quá trình tối ưu hóa trải nghiệm người dùng trên các thiết bị di động, tập trung vào việc tạo một thiết kế ưu tiên cho di động—nghĩa là bắt đầu từ nền tảng di động và sau đó mở rộng cho các kích thước màn hình lớn hơn bằng nguyên tắc thiết kế đáp ứng và phương pháp mobile-first Mục tiêu là đảm bảo tốc độ tải trang nhanh, khả năng đọc và tương tác dễ dàng, cùng điều hướng mạch lạc trên mọi thiết bị, từ đó cải thiện hiệu suất SEO bằng cách tối ưu từ khóa, cấu trúc nội dung và thẻ tiêu đề phù hợp.

Nguyễn Thị Hậu, lớp D18TKDPT2, đề xuất tiếp cận thiết kế theo hướng di động trước với 7 nền tảng di động khác nhau và tối ưu hóa nội dung cho màn hình nhỏ nhất có thể, sau đó điều chỉnh và mở rộng giao diện cho các kích thước màn hình lớn hơn như máy tính bảng hoặc máy tính để bàn để đảm bảo trải nghiệm người dùng nhất quán trên mọi thiết bị.

Bố cục đáp ứng là bố cục tự động điều chỉnh theo kích thước thiết bị của người dùng Khi màn hình hiển thị càng nhiều thông tin hơn, người dùng càng có thể xem nhiều nội dung tại cùng một thời điểm Do đó, ngay cả nội dung hoặc chức năng hấp dẫn nhất trên trang web cũng vô ích nếu khách truy cập không thể tìm thấy trang của bạn trong kết quả tìm kiếm.

Một số nguyên tắc khi thiết kế ứng dụng di động nhà thiết kế cần nhớ:

4.1 Nguyên tắc cấu trúc (The Structure Principle)

Nguyên tắc cấu trúc liên quan đến cấu trúc giao diện người dùng tổng thể

Thiết kế giao diện ứng dụng nên tổ chức giao diện người dùng một cách có mục đích, có ý nghĩa và hữu ích dựa trên các mô hình rõ ràng, nhất quán, dễ thấy và dễ nhận biết đối với người dùng

Theo nguyên tắc này, nhà thiết kế nên sắp xếp các yếu tố liên quan lại với nhau và tách riêng những yếu tố không liên quan, giúp người dùng dễ nhận diện và phân biệt các thứ khác nhau Bằng cách này, những nội dung tương tự được gom thành một nhóm thống nhất, tối ưu hóa khả năng tìm kiếm trên trang và cải thiện trải nghiệm người dùng.

Dưới đây là một vài điều cần nhớ khi thiết kế ứng dụng di động:

- Hãy chọn lọc về thông tin muốn hiển thị

- Chỉ cung cấp thông tin mà người dùng cần hoàn thành nhiệm vụ của họ

- Giữ thông tin quan trọng và các nút gọi để hành động chính và trung tâm

- Lý tưởng nhất, người dùng nên tìm những gì họ đang tìm kiếm ngay khi họ hạ cánh trên trang chủ

- Phân phối điều hướng từ nội dung

- Thiết kế điều hướng trang web sẽ giúp người dùng phát hiện menu

- Sử dụng khoảng trắng để phân tách trực quan nội dung và tùy chọn điều hướng

4.2 Nguyên tắc đơn giản (The Simple Principle)

Thiết kế giao diện mobile nên tối giản để các thao tác thông thường diễn ra dễ dàng, giao tiếp rõ ràng và dùng ngôn ngữ dễ hiểu với người dùng Đồng thời, tích hợp các phím tắt hữu ích sẽ nâng cao trải nghiệm người dùng và rút ngắn thời gian thực hiện các hành động trên ứng dụng.

Thiết kế tối ưu các yếu tố trên giao diện bằng cách loại bỏ những yếu tố thừa và không cần thiết, giúp giao diện trở nên gọn gàng, trực quan và dễ sử dụng Giữ thiết kế tinh gọn và chắt lọc, duy trì những gì quan trọng nhất và tinh túy nhất đối với người dùng để nâng cao trải nghiệm và tăng hiệu quả tương tác Bố cục được cân bằng, nội dung được sắp xếp hợp lý, các yếu tố thiết kế được tối ưu hóa cho tốc độ và sự trực quan, từ đó cải thiện khả năng tìm kiếm thông tin và hỗ trợ SEO cho trang web.

Hình 1 5 Giao diện đơn giản của ứng dụng BCJ

4.3 Nguyên tắc hiển thị (The Visibility Principle)

NGHIÊN CỨU LÝ THUYẾT VỀ PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG (MOBILE APP)

THIẾT KẾ GIAO DIỆN ỨNG DỤNG DI ĐỘNG (MOBILE APP)

Để thiết kế một ứng dụng di động thành công, đặc biệt là thiết kế giao diện người dùng, việc áp dụng các nguyên tắc và nguyên lý thiết kế là vô cùng cần thiết Trong đó, tầm quan trọng của phân cấp thị giác đóng vai trò then chốt giúp người dùng dễ quan sát, hiểu nội dung và tương tác hiệu quả Việc tổ chức bố cục, kích thước và độ nổi bật của các yếu tố UI theo cấp bậc thị giác sẽ làm cho giao diện trực quan, dễ sử dụng và nâng cao trải nghiệm người dùng, từ đó cải thiện hiệu suất và thành công của ứng dụng.

1 Phân cấp thị giác trong thiết kế ứng dụng di động

1.1 Phân cấp thị giác là gì?

Hình 1 10 Hình ảnh minh họa về phân cấp thị giác trong thiết kế

Phân cấp thị giác (Visual Hierarchy) là cách thông tin được cấu trúc và ưu tiên trong một thiết kế

Hệ thống phân cấp thị giác là một kỹ thuật cốt lõi trong quy trình thiết kế, bắt nguồn từ nguyên lý của tâm lý học Gestalt Phương pháp này xem xét nhận thức thị giác của người dùng về các yếu tố liên quan đến nhau và chỉ ra cách mọi người có xu hướng nhóm các yếu tố hình ảnh thành các khối có ý nghĩa Áp dụng phân cấp thị giác giúp xác định mức độ ưu tiên của các yếu tố và hướng mắt người xem tới những thành phần quan trọng, từ đó cải thiện truyền đạt thông điệp và tối ưu hóa trải nghiệm người dùng trong thiết kế.

Trong thiết kế giao diện người dùng, hệ thống phân cấp thị giác trình bày nội dung sản phẩm theo thứ tự quan trọng, giúp người dùng nhận diện và hiểu được tầm quan trọng của từng yếu tố một cách nhanh chóng Hệ thống này sắp xếp các thành phần UI sao cho não bộ có thể phân biệt các đối tượng dựa trên sự khác biệt về thể chất như kích thước, màu sắc, độ tương phản và kiểu dáng, từ đó cải thiện trải nghiệm người dùng và hiệu quả tương tác Việc tối ưu hóa phân cấp thị giác không chỉ làm nổi bật các yếu tố hữu ích nhất mà còn hỗ trợ người dùng định hướng và đưa ra quyết định một cách trực quan và nhanh chóng.

Hình 1 11 Một website khi không có hệ thống phân cấp thị giác

Có một sự thật là người dùng không bắt đầu đọc tất cả nội dung, họ bắt đầu với việc quét nội dung [9]

Ví dụ: khi người đọc xem một bài viết trên web, họ sẽ trông thấy tiêu đề chính trước, rồi lần lượt các tiêu đề phụ và sau đó mới xem các mục chi tiết Với cách bố trí này, người dùng có thể nhanh chóng quét tiêu đề chính và tiêu đề phụ để nắm được cấu trúc nội dung và quyết định có nên đọc tiếp hay không Để tối ưu SEO, hãy duy trì hệ thống tiêu đề rõ ràng: H1 cho tiêu đề chính, H2 cho các tiêu đề phụ và H3 cho các mục con, đồng thời tích hợp từ khóa một cách tự nhiên vào các tiêu đề và phần quan trọng, giúp người đọc và công cụ tìm kiếm hiểu đúng nội dung và tăng khả năng hiển thị trên kết quả tìm kiếm.

Tiêu đề chính và tiêu đề phụ được thiết kế đúng cách sẽ cho người đọc biết cấu trúc và nội dung bài viết, là yếu tố thuyết phục để họ đọc thêm Người đọc thường đánh giá bài viết dựa trên mức độ hữu ích và sự thú vị của nội dung, chứ không chỉ cố gắng đọc toàn bộ văn bản Ngược lại, khi thấy một văn bản khổng lồ và dài, họ sẽ sợ mất thời gian và tự hỏi mất bao lâu để đọc, đồng thời phân vân xem bài viết có đáng đầu tư công sức hay không.

Hình 1 12 Một ứng dụng di động có áp dụng phân cấp thị giác

Visual hierarchy guides how the experience is presented, directing user attention through the page layout If visitors struggle to know where to look on a page, it's likely the layout lacks a clear visual hierarchy.

Hệ thống phân cấp thị giác là công cụ thiết yếu trong thiết kế nhằm xếp hạng và định hướng sự chú ý của người dùng theo thứ tự mong muốn Bằng việc áp dụng các nguyên tắc như độ tương phản, tỷ lệ, cân bằng, khoảng trắng và nhấn mạnh, người thiết kế có thể đặt từng yếu tố ở vị trí hợp lý, giúp các yếu tố quan trọng nhất nổi bật và cải thiện trải nghiệm người dùng trên giao diện hoặc trang web, từ đó tối ưu hóa bố cục và hiệu quả SEO.

1.2 Tại sao phân cấp thị giác lại quan trọng trong thiết kế ứng dụng di động?

Hệ thống phân cấp thị giác ở cấp độ cơ bản hướng dẫn người xem qua nội dung được trình bày, báo hiệu nội dung nào là quan trọng nhất, cách các phần hoặc danh mục liên quan được tổ chức và nội dung nào nên được tập trung ngay lần đầu Dù nội dung ở dạng văn bản, hình ảnh, video hay bất kỳ định dạng nào, việc tạo mối quan hệ trực quan giữa các phần giúp người xem nắm bắt cách diễn giải thông tin Nhờ tăng khả năng hiểu và hướng dẫn người dùng tiêu thụ nội dung, thông điệp thiết kế được củng cố; ngược lại, thiếu hệ thống phân cấp thị giác sẽ khiến thông tin trở nên rối và khó nắm bắt.

Trong thiết kế giao diện người dùng, hệ thống phân cấp thị giác hiệu quả đóng vai trò then chốt trong việc thông báo, tạo ấn tượng và thuyết phục người dùng Bằng cách sắp xếp các yếu tố trực quan một cách logic và nhất quán, nó đáp ứng kỳ vọng của người dùng về vẻ ngoài và cảm nhận của giao diện Việc tối ưu hóa phân cấp thị giác không chỉ nâng cao khả năng nhận diện mà còn cải thiện trải nghiệm người dùng bằng cách hướng sự chú ý tới các yếu tố quan trọng nhất và tăng tính trực quan của sản phẩm.

Vì vậy, đối với ứng dụng di động để thành công, điều quan trọng là cấu trúc các trang hoặc màn hình của nó để giảm thiểu sự không chắc chắn của người dùng, thể hiện sự đồng cảm tối đa với họ và cung cấp cho họ một cái gì đó dễ chịu để xem

Việc tạo ra phân cấp thị giác đúng sẽ giúp người dùng dễ dàng quét những nội dung chính hoặc những điểm quan trọng mà thiết kế muốn truyền tải Ngoài ra, hệ thống phân cấp thị giác còn thể hiện tầm quan trọng của hệ thống thông tin

Nội dung là một phần quan trọng của bất kỳ thiết kế UI nào Đó là lý do tại sao thứ bậc phân cấp thị giác thường phụ thuộc nhiều vào kiểu chữ Các chuyên gia thiết kế nhấn mạnh tầm quan trọng của việc trình bày thiết kế bằng cách tạo một hệ thống phân cấp trực quan riêng gọi là hệ thống phân cấp typographic [10]

Hệ thống này được thiết kế để tổ chức nội dung một cách tối ưu nhằm cải thiện nhận thức của người dùng Các nhà thiết kế điều chỉnh và kết hợp phông chữ nhằm tạo sự tương phản giữa các yếu tố có ý nghĩa nhất và những điểm nổi bật, đồng thời chú ý đến thứ tự thông tin văn bản Các phông chữ được chỉnh sửa bằng cách điều chỉnh kích thước, màu sắc và mức liên kết giữa các yếu tố văn bản để tăng cường khả năng đọc hiểu và dẫn dắt người đọc đến nội dung cốt lõi.

Hình 1 13 Hệ thống phân cấp chữ trên một trang

Hệ thống phân cấp typographic bao gồm các yếu tố khác nhau của nội dung: tiêu đề, tiêu đề phụ, các yếu tố kêu gọi để hành động, chú thích và một số yếu tố khác [13] Điều quan trọng là sử dụng các kiểu chữ và trọng lượng khác nhau để tạo ra các yếu tố văn bản quan trọng hơn nổi bật hơn Để xây dựng một hệ thống phân cấp trực quan hiệu quả, tất cả yếu tố cần được phân đoạn thành các cấp độ khác nhau

Phần sơ cấp là nội dung lớn nhất, được xây dựng dựa trên tiêu đề nhằm nhanh chóng cung cấp thông tin cốt lõi cho người dùng và thu hút sự chú ý đến sản phẩm Mục tiêu của sơ cấp là nắm bắt nhu cầu của độc giả, trình bày giá trị cốt lõi và giải pháp mà sản phẩm mang lại, từ đó dẫn dắt người đọc thực hiện hành động và tăng khả năng chuyển đổi Để tối ưu SEO, nội dung sơ cấp cần rõ ràng, súc tích, lồng ghép tự nhiên từ khóa chính, mô tả lợi ích nổi bật và kêu gọi hành động mạnh mẽ.

NGHIÊN CỨU ỨNG DỤNG “TRỢ LÝ MẸ BẦU”

Giới thiệu ứng dụng

Hình 2 1 Ứng dụng “Trợ lý mẹ bầu” hiển thị trên Appstore

• Trợ lý mẹ bầu là ứng dụng di động hoạt động trên hệ điều hành iOS

Ứng dụng ra đời nhằm cung cấp đầy đủ thông tin và kiến thức thiết yếu về thai kỳ, chăm sóc bé và mẹ, được tổng hợp từ nguồn tài liệu chất lượng và đội ngũ bác sĩ có chuyên môn và thâm niên trong nghề, đảm bảo thông tin đáng tin cậy Nội dung được trình bày rõ ràng, dễ hiểu và cập nhật liên tục để người dùng nắm bắt các giai đoạn thai kỳ, chế độ dinh dưỡng và chăm sóc sức khỏe một cách toàn diện Ứng dụng còn tạo không gian chia sẻ, giao lưu cho các mẹ bầu, giúp họ kết nối, trao đổi kinh nghiệm và nhận sự hỗ trợ từ cộng đồng trong quá trình chuẩn bị và mang thai Với mục tiêu trở thành nguồn thông tin hữu ích và địa chỉ tin cậy cho bà bầu và gia đình, ứng dụng hướng tới tối ưu hóa trải nghiệm người dùng và đáp ứng nhu cầu sức khỏe sinh sản ngày càng cao.

Ứng dụng cung cấp nhiều tính năng hữu ích, bao gồm tự động tính ngày dự sinh, số tuần thai và số tháng thai kỳ; diễn đàn trao đổi kiến thức và hỗ trợ nhau cho các mẹ bầu; tư vấn đồ sơ sinh cần mua và mang đi khi sinh; gợi ý tên hay cho bé; và danh sách bác sĩ uy tín tại các thành phố lớn như Hà Nội, Hồ Chí Minh và Đà Nẵng.

Hiện trạng của ứng dụng

Trợ lý mẹ bầu là một ứng dụng còn tồn tại nhiều nhược điểm, nhưng trong phạm vi đề tài này tôi sẽ tập trung phân tích những ưu, nhược điểm của thiết kế giao diện và đề xuất các giải pháp khắc phục dựa trên lý thuyết hệ thống phân cấp thị giác trong thiết kế ứng dụng di động Bài viết làm rõ cách bố trí thông tin, màu sắc, tương tác và cấu trúc nội dung ảnh hưởng trực tiếp đến trải nghiệm người dùng, từ đó gợi ý các biện pháp tối ưu hóa bố cục, nhấn mạnh các yếu tố quan trọng và nâng cao khả năng tiếp cận trên nền tảng di động.

2.1 Ưu điểm Ứng dụng có giao diện rõ ràng, có ứng dụng hệ thống phân cấp thị giác, cụ thể:

• Có sự phân cấp thông tin trong ứng dụng, các thông tin được tổ chức, sắp xếp có mục đích:

Trang "Thông tin dự sinh" và "Trang chủ" của ứng dụng được trình bày với nội dung tách thành từng dòng rõ ràng, căn lề trái nhằm thống nhất bố cục và giúp người dùng không bị bối rối khi lần đầu làm quen Những thông tin quan trọng như "Dự sinh", "tuổi thai" và "kỳ kinh cuối" được in đậm nhằm nhận diện nhanh trên màn hình Thêm vào đó, việc thay đổi màu sắc, đặc biệt là màu đỏ, ở các mục "Thêm chỉ số thai nhi" giúp nhấn mạnh những chỉ số cần chú ý và tăng cường trải nghiệm người dùng khi theo dõi thai kỳ.

Việc hiển thị số ngày còn lại của thai kỳ thu hút sự chú ý của người dùng, và việc sử dụng thống nhất hai loại phông chữ sẽ mang lại giao diện đơn giản, nhất quán cho ứng dụng.

• Ứng dụng tạo được sự liên tục trong phân cấp thị giác khi tận dụng được yếu tố hình khối, sự tương đồng:

Trang chủ của ứng dụng được bố trí với các tính năng sắp xếp thành hai hàng dọc và căn giữa màn hình, giúp hướng mắt người dùng xuyên suốt thiết kế và tăng khả năng đọc hiểu nội dung Đồng thời, các icon được thiết kế theo phong cách LinER và sử dụng thống nhất, mang lại sự nhất quán về thẩm mỹ và tăng nhận diện thương hiệu cho toàn bộ giao diện.

Hình 2 4 Một số trang chức năng của ứng dụng

Trong thiết kế ứng dụng di động, yếu tố tương phản trong phân cấp thị giác chưa được áp dụng triệt để; màu sắc là cách nhanh nhất để tạo sự nổi bật và nhấn mạnh nội dung chính, vì vậy độ tương phản sắc nét giữa các vùng nội dung có thể nâng cao tính trực quan cho người dùng Hiện tại, ứng dụng vẫn chỉ sử dụng chủ yếu màu xanh lá cây, kết hợp với một chút trắng và hồng ở các nút, khiến cho sự chuyển màu giữa các phần rất ít và giao diện trở nên kém thu hút Các nút chưa tạo được điểm nhấn và dễ bị chìm trên màn hình Việc lựa chọn màu xanh lá cây làm màu chủ đạo cho một ứng dụng dành cho mẹ bầu cũng chưa thực sự phù hợp, vì màu xanh lá cây gợi cảm giác an toàn và thiên về tự nhiên, thay vì nhấn mạnh thông điệp mục tiêu của ứng dụng Để cải thiện, cần tăng cường phân cấp thị giác bằng cách sử dụng bảng màu đa dạng hơn, tăng độ tương phản giữa các phần nội dung và nút, và điều chỉnh cách áp dụng màu sắc để làm nổi bật nội dung chính, từ đó cải thiện trải nghiệm người dùng và tính thẩm mỹ tổng thể của ứng dụng.

Hình 2 5 Một số trang chức năng khác của ứng dụng thiếu sụ tương phản

• Ứng dụng vẫn còn thiếu sự tương đồng về hình ảnh trong trong cách trình bày danh mục tính năng và thiếu không gian âm cho ứng dụng:

Những trang này sử dụng đồng nhất một hình nền cho ứng dụng và lẫn lộn giữa hình ảnh thật và icon để thể hiện các tính năng, làm cho giao diện trở nên lộn xộn, thiếu sự chuyên nghiệp và đồng bộ Yếu tố không gian bị triệt tiêu khi các nút chức năng được bố trí quá lớn, dễ hòa vào nền và thiếu điểm nhấn, khiến người dùng phải lướt nhiều lần để xem và chọn nút Thiếu khoảng trắng khiến mắt người dùng mỏi mệt và trải nghiệm sử dụng không được thư giãn.

Thiếu phân cấp nội dung trên một số trang của ứng dụng, đặc biệt ở chức năng Thai kỳ, khi lượng chữ quá lớn đi kèm với ít hình ảnh minh họa và thiếu khoảng trống nghỉ mắt Sự trình bày này khiến người dùng dễ mệt mỏi khi đọc lâu và làm giảm chất lượng trải nghiệm Để tối ưu SEO và cải thiện trải nghiệm, cần sắp xếp lại nội dung với tiêu đề phụ rõ ràng, bổ sung hình ảnh minh họa liên quan và tăng khoảng cách giữa các đoạn, giúp người đọc nắm bắt thông tin nhanh chóng và dễ dàng hơn.

Hình 2 7 Trang “Thai kỳ” của ứng dụng

Hệ thống lưới chưa được áp dụng đầy đủ trong thiết kế giao diện ứng dụng, khiến người dùng khó nhận biết liệu ứng dụng có tuân thủ nguyên tắc lưới hay không Các trang bố trí thiếu sự quy chuẩn và căn gióng, dẫn tới thiếu thống nhất và không rõ ràng trên giao diện Chính điều này làm giảm trải nghiệm người dùng và sự nhất quán của thương hiệu khi người dùng tương tác với ứng dụng Việc áp dụng hệ thống lưới một cách đồng bộ sẽ tăng tính nhất quán, nâng cao thẩm mỹ và sự dễ dàng tiếp cận cho người dùng.

Ngoài những lỗi liên quan đến phân cấp thị giác, ứng dụng còn gặp rất nhiều những lỗi khác trong thiết kế giao diện di động:

Thiếu phần giới thiệu và hướng dẫn sử dụng cho người dùng mới là một bất cập đáng lưu ý của ứng dụng Ngay trang mở đầu, người dùng chỉ thấy một thông báo yêu cầu cho phép gửi thông báo mà chưa có lời giới thiệu về ứng dụng hoặc hướng dẫn sử dụng ban đầu Thiếu onboarding khiến người dùng mới, đặc biệt những người có trình độ công nghệ thấp, có thể cảm thấy lúng túng và gặp khó khăn khi làm quen với ứng dụng lần đầu Cân nhắc bổ sung phần giới thiệu ngắn gọn, hướng dẫn sử dụng cơ bản và các bước thao tác thiết yếu ngay từ đầu để cải thiện trải nghiệm người dùng, tăng khả năng tiếp nhận công nghệ và tối ưu hóa sự chuyển đổi trên ứng dụng.

Hình 2 8 Trang đầu tiên khi người dùng bắt đầu sử dụng ứng dụng

• Giao diện ứng dụng khá đơn giản, có sự lặp lại nhiều dễ gây cảm giác nhàm chán cho người dùng:

Việc lặp lại hình nền và chủ đạo là màu xanh lá khiến ứng dụng trở nên nhạt nhòa, thiếu điểm nhấn và không tạo được sự gần gũi thực sự với người dùng Thiết kế này làm cho trải nghiệm trở nên nhàm chán và khiến nội dung khó đọc khi người dùng tương tác với ứng dụng Nền lặp đi lặp lại có thể làm cho nội dung không nổi bật, ảnh hưởng đến khả năng tiếp cận và trải nghiệm người dùng Để cải thiện trải nghiệm người dùng và tối ưu SEO, cần xem xét điều chỉnh hình nền sang mẫu đơn giản hơn, tăng độ tương phản chữ trên nền và bố trí nội dung rõ ràng để tạo điểm nhấn dễ nhận diện.

So sánh thiết kế giao diện với các ứng dụng đối thủ

Tên ứng dụng Ưu điểm Nhược điểm Kết luận

Hình 2 10 Ứng dụng trợ lý bà bầu

- Giao diện trang chủ đơn giản, nội dung thông tin được phân cấp rõ ràng

Hình 2 11 Trang chủ ứng dụng Trợ lý bà bầu

Các chức năng được phân bổ đều cho mẹ bầu và em bé, được chia thành các trang nhỏ giúp người dùng dễ dàng chọn nội dung mong muốn Yếu tố sự liên tục được áp dụng rất hiệu quả trên hai trang này, mang lại trải nghiệm người dùng mượt mà và nhất quán đồng thời tối ưu SEO bằng cách giữ chân người đọc ở lại trang lâu hơn và dẫn dắt người dùng tới nội dung liên quan một cách trực quan.

- Sử dụng font chữ thiếu điểm nhấn, và không tạo được nhiều sự phân cấp thị giác cho chữ

- Màu sắc của ứng dụng chưa thực sự thân thiện với mẹ bầu

- Các button chức năng chưa tạo được điểm nhấn, sự thu hút với người dùng

Qua việc phân tích ưu, nhược điểm của hai ứng dụng liên quan này, có thể thấy: - Cả hai ứng dụng này đều đã có áp dụng hệ thống phân cấp thị giác trong thiết kế ứng dụng di động, tuy nhiên còn áp dụng chưa triệt để và hiệu quả

- Màu sắc của hai ứng dụng cũng chưa thực sự thân thiện, gần gũi, phù hợp với đối tượng mẹ bầu

- Font chữ sử dụng cũng chưa tạo được điểm nhấn cho ứng dụng

Hình 2 12 Trang “Thai nhi” trong ứng dụng Trợ lý bà bầu

Hình 2 13 Trang “Mẹ bầu” trong ứng dụng Trợ lý bà bầu

- Việc áp dụng lưới Layout margins – Large Gird (Lưới cột rộng) giúp các trang trở lên rõ ràng, sạch sẽ, dễ đọc cho người dùng

- Các khoảng trắng được bố cục hợp lý tạo độ nghỉ cho mắt người dùng

- Các icon được thiết kế đồng bộ, sử dụng một font chữ duy nhất giúp tạo sự thống nhất cho ứng dụng

Hình 2 14 Ứng dụng bà bầu

- Giao diện trang chủ có sự phân cấp thông tin rất rõ ràng, có hình ảnh minh họa liên quan đến mẹ bầu

Hình 2 15 Trang chủ ứng dụng Bà bầu

- Các chức năng cũng được phân bố giành cho từng đối tượn mẹ bầu, em bé giúp người dùng dễ dàng chọn lựa thông tin

- Hệ thống lưới áp dụng trong ứng dụng chưa thực sự rõ ràng

- Font chữ sử dụng chưa thể hiện được sự thân thiện với ứng dụng dành cho mẹ bầu

- Màu sắc chủ đạo là đỏ, xanh lá chưa tực sự phù hợp cho ứng dụng

- Các button tính năng chưa tạo được sự thu hut với người dùng

Hình 2 16 Trang “Thai nhi” trong ứng dụng bà bầu

- Ứng dụng tạo được sự đồng bộ, thống nhất về màu sắc, icon giúp cho ứng dụng trở lên chuyên nghiệp, thân thiện hơn với người dùng

Đề xuất giải pháp khắc phục

Phần thiết kế lại giao diện cho ứng dụng sẽ đi vào giải quyết, khắc phục những nhược điểm còn tồn tại của ứng dụng đồng thời vẫn đảm bảo phát huy nhưng ưu điểm đã có của ứng dụng Đồng thời học hỏi thêm những ưu điểm của các ứng dụng liên quan để hoàn thiện tốt nhất giao diện cho ứng dụng “Trợ lý mẹ bầu” dựa trên lý thuyết nền tảng về phân cấp thị giác, cụ thể:

• Cải thiện trang chủ, làm nổi bật các button chức năng để giúp người dùng dễ dàng chọn lựa

• Thiết kế rút gọn khoảng cách giữa các thành phần trong một trang, tránh để người dùng cuộn quá nhiều trong một lần sử dụng dẫn đến giảm động cơ sử dụng

Thêm các bước hướng dẫn dành cho người dùng mới là cách hiệu quả để giảm bỡ ngỡ khi lần đầu trải nghiệm ứng dụng Khi người dùng nhận được hướng dẫn rõ ràng, hành động thực hiện sẽ trở nên dễ dàng hơn và họ sẽ có cảm giác thân thiện với giao diện cũng như các tính năng của ứng dụng, từ đó nâng cao trải nghiệm người dùng Việc onboarding chi tiết giúp tăng sự tự tin của người dùng, khuyến khích họ khám phá các chức năng tiếp theo và giảm tỷ lệ thoát trong lần dùng đầu tiên Nhờ đó, ứng dụng có thể tăng tỷ lệ chuyển đổi và giữ chân người dùng lâu dài nhờ ấn tượng tích cực ngay từ những bước đầu làm quen Xây dựng quy trình onboarding rõ ràng, tối ưu cho SEO với các từ khóa liên quan đến hướng dẫn dùng ứng dụng và trải nghiệm người dùng sẽ mang lại lợi ích lớn cho sự thành công của sản phẩm.

Phân cấp nội dung trên các trang có nhiều văn bản bằng cách bố trí rõ ràng và trực quan, làm nổi bật các phần thông tin quan trọng và bố cục hợp lý với tiêu đề phụ thích hợp để người dùng dễ quét nội dung Cách sắp xếp này giúp người dùng không còn cảm thấy mỏi khi tiếp nhận lượng lớn thông tin, cải thiện trải nghiệm người đọc và hỗ trợ SEO nhờ cấu trúc nội dung rõ ràng, các đoạn ngắn và phân chia thông tin một cách hợp lý.

• Thay đổi màu sắc ứng dụng để tăng độ tương phản, sự phù hợp, thân thiện cho ứng dụng, bởi đây là ứng dụng đặc thù cho mẹ bầu

• Rút gọn các bước thực hiện chức năng của ứng dụng để làm đơn giản hóa các bước thực hiện cho người dùng, từ đó tăng động cơ sử dụng ứng dụng

• Đồng bộ các icon, hình ảnh trong các danh mục tính năng của ứng dụng.

Nghiên cứu người dùng

Mẹ bầu là những phụ nữ đang trong quá trình mang thai và có nhu cầu bổ sung kiến thức về mang thai, chăm sóc thai nhi và sự phát triển của thai nhi Họ mong muốn được trao đổi, hỏi đáp và chia sẻ kinh nghiệm với nhau nhằm duy trì một thai kỳ khỏe mạnh.

• Phụ nữ chuẩn bị mang thai: Là đối tượng phụ nữ có dự định sẽ chuẩn bị mang thai, những phụ nữ lần đầu làm mẹ, muốn tìm hiểu kiến thức, kỹ năng cần thiết cho quá trình trước, trong và sau giai đoạn mang bầu sắp tới

• Nhóm 1: Nhóm phụ nữ đã kết hôn và đã, đang hoặc dự định mang bầu, độ tuổi giao động trong khoảng 22 – 37 tuổi Đây là nhóm đối tượng mang thai có kế hoạch hoặc tự nguyện, họ muốn được trang bị những kiến thức cần thiết, chuyên sâu, chính xác về chế độ ăn uống, ngủ nghỉ và các vấn đề khác liên quan đến mẹ bầu và em bé để có một thai kỳ khỏe mạnh cho cả mẹ và em bé

Hình 2 18 Persona nhóm người dùng 1 của ứng dụng o Scenario: Chị Hoài đang mang bầu tháng thứ 3 của thai kỳ, đây là lần đầu tiên chị mang bầu, chị có tâm sự, chia sẻ với các chị đồng nghiệp lớn tuổi hơn trong công ty để xin kinh nghiệm chăm em bé và những điều cần lưu ý trong thai kỳ thì được một chị đồng nghiệp có đã có hai con nhỏ tư vấn sử dụng ứng dụng “Trợ lý mẹ bầu”, chị đã tải thử ngay và trải nghiệm để cập nhật những kiến thức bổ ích trong quá trình mang bầu Đồng thời, ứng dụng còn cho phép chị xem thông tin của các bác sĩ uy tín ở Hà Nội giúp chị có nhiều lựa chọn để có thể gọi điện nhờ bác sĩ tư vấn khi cần thiết

• Nhóm 2: Nhóm phụ nữ chưa kết hôn nhưng có con ngoài ý muốn Đây là nhóm đối tượng tập trung trong độ tuổi 17 – 21 tuổi Bên cạnh một số lượng không nhỏ phụ nữ lựa chọn nạo phá thai thì cũng có rất nhiều phụ nữ trong nhóm tuổi này lựa chọn giữ lại thai nhi Họ là nhóm đối tượng rất trẻ, chưa có kinh nghiệm, kỹ năng sống, tài chính đầy đủ để sẵn sàng làm mẹ Tuy nhiên, khi lựa chọn làm mẹ họ đã chấp nhận những khó khăn trong quá trình mang thai và làm mẹ sau này Họ rất cần sự hỗ trợ về kiến thức, kỹ năng để có một thai kỳ khỏe mạnh cho cả mẹ và em bé và bớt cô đơn, lạc lõng trên hành trình làm mẹ

Hình 2 19 Persona nhóm người dùng 1 của ứng dụng o Scenario: Nga đang mang bầu tháng thứ nhất của thai kỳ, đây là lần đầu tiên Nga mang bầu, Nga rất bối rối và cảm thấy rất khó khăn không biết chia sẻ với ai vì cô vẫn còn giấu bố mẹ chuyện mình có em bé Cô có tìm kiếm trên Appstore một số ứng dụng dành cho mẹ bầu và cô đã chọn sử dụng ứng dụng “Trợ lý mẹ bầu” bởi vì ứng dụng cung cấp kiến thức, lời khuyên hữu ích cho mẹ bầu và em bé trong từng tuần của thai kỳ, đồng thời cho phép cô được chia sẻ với những phụ nữ mang bầu khác và học hỏi kinh nghiệm chăm sóc em bé từ họ

THIẾT KẾ GIAO DIỆN ỨNG DỤNG

Định dạng
Số trang	65
Dung lượng	5,47 MB
File đính kèm	BAO CAO THCS.rar (8 MB)