4.1 User Flow là gì ?
Có nhiều con đường khác nhau mà người dùng có thể thực hiện khi tương tác với sản phẩm. User Flow là một sơ đồ trực quan, được vẽ ra hoặc được thực hiện bằng kỹ thuật số, mô tả luồng đi người dùng được thực hiện khi sử dụng một ứng dụng hoặc trang web. Được bắt đầu với điểm vào của người tiêu dùng trên sản phẩm, như màn hình onboarding hoặc homepage và kết thúc bằng hành động hoặc kết quả cuối cùng, như mua sản phẩm hoặc đăng ký tài khoản. Việc mô tả quá trình này cho phép ta đánh giá và tối ưu hóa trải nghiệm người dùng và do đó tăng tỷ lệ chuyển đổi của khách hàng.
4.2 Các lợi ích mà User Flow đem lại
• Tạo giao diện trực quan: Lợi ích chính của việc thiết kế một sản phẩm nơi người dùng có nhanh chóng khám phá, sử dụng website, ứng dụng, tăng xác suất người dùng mua hoặc sử dụng sản phẩm. Một lợi ích khác là tăng cường sự dễ dàng di chuyển qua nền tảng, đảm bảo thời gian của người dùng không bị lãng phí khi tìm kiếm những việc cần làm tiếp theo. Tất nhiên, thường có nhiều hơn một tuyến đường mà người dùng có thể đi theo để hoàn thành nhiệm vụ. User Flow mô tả các mẫu có thể này theo cách giúp ta dễ dàng đánh giá hiệu quả của giao diện họ đang tạo.
• Đánh giá các giao diện hiện có: Đối với các sản phẩm đã được sử dụng, User Flow giúp xác định những gì đang hoạt động, những gì không và những lĩnh vực cần cải thiện. Nó giúp xác định lý do tại sao người dùng có thể bị đình trệ tại một thời điểm nhất định và những gì ta có thể làm để khắc phục nó.
• Trình bày sản phẩm của bạn cho khách hàng hoặc đồng nghiệp: User Flow cũng dễ dàng truyền đạt sản phẩm tới các bên liên quan và cung cấp cái nhìn chung về cách giao diện bạn đã tạo
CHƯƠNG 6: DESIGN – THIẾT KẾ ỨNG DỤNG: 1. Design – Thiết kế ứng dụng
Đây có lẽ là giai đoạn thú vị nhất của quá trình phát triển sản phẩm. Là quy trình kế thừa tất cả các dữ liệu, thông tin, kết quả từ 3 quy trình trước (Discover – Difine – Ideate) dần được hình thành và mô tả qua các hình ảnh trực quan. Cái nhìn ban đầu về ứng dụng cơ bản đã được hình thành trong giai đoạn này.
Tuy nhiên, thực hiện UI không phải là gạt bỏ UX sang một bên, mà luôn luôn cần phải hòa hợp giữa 2 yếu tố UX và UI.
Một số phương pháp được sử dụng trong giai doạn này bao gồm: • Low fi wireframes: Khung nguyên mẫu cấp thấp
• High fi wireframes: Khung nguyên mẫu cấp cao • UI Style Guide: Bộ hướng dẫn sử dụng
• Visual Design: Thiết kế trực quan • Propotype: Bản mẫu của ứng dụng
2. Wireframes là gì ?
2.1 Khái niệm về Wireframes ?
Không giống với bản thiết kế kiến trúc, wireframes là một phác thảo khung màn hình hai chiều của trang web hoặc ứng dụng. Wireframes cung cấp một cái nhìn tổng quan rõ ràng về cấu trúc trang, bố cục, kiến trúc thông tin, luồng người dùng , chức năng và các hành vi dự định. Vì wirdframes thường đại diện cho khái niệm sản phẩm ban đầu, kiểu dáng, màu sắc và đồ họa được giữ ở mức tối thiểu. Các khung lưới có thể được vẽ bằng tay hoặc được tạo bằng kỹ thuật số, tùy thuộc vào mức độ chi tiết được yêu cầu.
Wireframing là được sử dụng phổ biến nhất bởi các nhà thiết kế UX. Quá trình này cho phép tất cả các bên liên quan đồng ý về nơi thông tin sẽ được đặt trước khi các nhà phát triển xây dựng giao diện.
2.2 Mục đích của Wireframes là gì ?
• Wireframes giúp ta luôn tập trung vào người dùng: Wireframes được sử dụng hiệu quả như các thiết bị truyền thông, họ tạo điều kiện cho phản hồi từ người dùng, thúc đẩy các cuộc trò chuyện với các bên liên quan và tạo ra ý tưởng giữa các nhà thiết kế. Tiến hành thử nghiệm người dùng trong giai đoạn sơ khai của wireframes giúp ta tiếp nhận được những phản hồi chính xác từ người dùng và xác định vấn đề chính để thiết lập và phát triển sản phẩm.Wireframing là cách hoàn hảo để ta đánh giá cách người dùng sẽ tương tác với giao diện. Bằng cách sử dụng các văn bản như Lorem Ipsum, văn bản giả tiếng Latinh đóng vai trò thay thế cho nội dung trong tương lai, ta có thể hỏi người dùng bằng các câu hỏi như “bạn mong đợi điều gì sẽ
được viết ở đây?’ Những câu trả lời sẽ giúp ta hiểu được những gì cảm thấy trực quan cho người dùng và tạo ra các sản phẩm thoải mái và dễ sử dụng.
• Wireframes làm rõ và xác định các tính năng trang web: Khi
truyền
đạt ý tưởng của ta tới khách hàng, họ có thể không có từ vựng kỹ thuật để theo kịp các thuật ngữ. Các tính năng cụ thể của Wireframing sẽ gợi ý rõ ràng với khách hàng về cách họ sẽ hoạt động. Wireframing cho phép tất cả các bên liên quan đánh giá lượng không gian cần phân bổ cho mỗi tính năng, kết nối kiến trúc thông tin của trang web với thiết kế trực quan của nó và làm rõ chức năng của trang. Xem các tính năng trên wireframes cũng sẽ cho phép ta hình dung cách tất cả chúng hoạt động như thế nào và thậm chí có thể nhắc ta quyết định xóa một số nếu ta cảm thấy chúng không hoạt động tốt với các yếu tố còn lại của trang.
• Wireframes là nhanh chóng và giá thành rẻ: Wireframes cực kỳ rẻ
phác thảo ra một khung dây mà không tốn một xu. Sự phong phú của các công cụ có sẵn có nghĩa làta cũng có thể xây dựng một wireframes kỹ thuật số trong vòng vài phút. Thông thường, khi một sản phẩm dường như quá bóng bẩy, người dùng sẽ ít thành thật về những ấn tượng đầu tiên của họ. Nhưng bằng cách phơi bày cốt lõi của bố cục trang, các lỗ hổng và vấn đề có thể dễ dàng được xác định và khắc phục mà không có bất kỳ chi phí đáng kể nào về thời gian hoặc tiền bạc. Càng về sau trong quá trình thiết kế sản phẩm, càng khó thực hiện các thay đổi!
2.3 Các loại wireframes thường thấy ?
• Low-fidelity wireframes: Các low – fi wireframes là các biểu diễn
trực quan cơ bản của trang web, ứng dụng và thường đóng vai trò là điểm khởi đầu của thiết kế. Như vậy, chúng có xu hướng khá thô, được tạo ra mà không có bất kỳ ý nghĩa nào về tỷ lệ, lưới hoặc độ chính xác pixel. Các khung lưới có độ chính xác thấp bỏ qua bất kỳ chi tiết nào có khả năng gây mất tập trung và chỉ bao gồm các hình ảnh đơn giản, hình dạng khối và giả lập nội dung giả tưởng như văn bản phụ cho nhãn và tiêu đề. Các low - fi wirframes rất hữu ích để bắt đầu các cuộc hội thoại, quyết định bố cục điều hướng và ánh xạ luồng người dùng. Chúng cũng cực kỳ hữu ích khi ta muốn nhanh chóng quyết định hướng bản thiết kế sẽ diễn ra như thế nào.
• Mid-fidelity wireframes: Các khung dây được ít nhất trong ba loại wireframes. Mặc dù chúng vẫn tránh các phiền nhiễu như hình ảnh hoặc kiểu chữ, chi tiết hơn được gán cho các thành phần cụ thể và các tính năng được phân biệt rõ ràng với nhau. Trọng lượng văn bản khác nhau cũng có thể được sử dụng để phân tách các tiêu đề và nội dung cơ thể. Mặc dù vẫn là màu đen và trắng, ta có thể sử dụng các sắc thái khác nhau của màu xám để truyền đạt sự nổi bật về thị giác của các yếu tố riêng lẻ. Mặc dù chúng vẫn có liên quan trong giai đoạn đầu của sản phẩm, các mid – fi wireframes thường được tạo bằng công cụ tạo khung kỹ thuật số.
• High Fidelity Wireframes: Trong trường hợp low - fiwireframes
có độ chính xác thấp có thể bao gồm các bộ đệm văn bản giả Latin và các hộp màu xám được điền 'X' để chỉ ra hình ảnh, các high – fi wireframes có thể bao gồm các hình ảnh đặc trưng thực tế và nội dung bằng văn bản có liên quan. Chi tiết được thêm vào này làm cho high wireframes có độ chính xác cao lý tưởng để khám phá và ghi lại các khái niệm phức tạp như hệ thống menu hoặc bản đồ tương tác. High – fi wireframes nên được lưu cho các giai đoạn sau của chu trình thiết kế của sản phẩm.
3. Thực hành Low – fi wireframes (adsbygoogle = window.adsbygoogle || []).push({});
Sử dụng 2 công cụ chính là bút và giấy để bắt đầu vẽ và hình thánh ý tưởng giao diện cho ứng dụng.
Dựa theo Sitemap và User Flows để xác định các màn hình cần thực hiện
Hình 6.11 Bản low - fi wireframe cho màn hình Thanh toán và Chọn ngày giờ
giao hàng
4. Thực hành High – fi wireframe
Phát triển trên các màn hình low fi wireframe đã thiết kế từ trước thông qua ứng dụng Figma (Một ứng dụng phổ biến trong việc thiết kế giao diện cho website và application).
Hình 6.13 Một số màn hình Hi – fi wireframes được khỏi tạo
Trước khi khởi tạo Hi – fi wireframes, cần thiết kế Grid System (hệ thống khung lưới). Grid System giúp cho giao diện được định hình theo khung lưới đã thiết kế sẵn và cấu trúc thông tin sẽ được tổ chức rõ ràng, ngăn nắp.
Grid Layout dưới đây sẽ được sử dụng xuyen suốt cho toàn bộ quá trình thiết kế từ Wireframes -> Guideline -> Visual Desgin
B1: Khởi tạo một màn hình làm chuẩn. Ở đây ta sẽ chọn kích thước màn
hình Iphone X với kích thước 317x812 pixel.
B2: Tại Layout Grid trên thanh công cụ Design. Chọn biểu tượng + B3: Ta sẽ cài đặt 2 Grid là Grid Columns và Grid Rows với các thông số
Hình 6.14 Thông số Grid Rows
Hình 6.16 Grid Layout của Foam Market
Hình 6.20 Wireframes của các màn hình Sản phẩm
Hình 6.22 Wireframes của các màn hình Kiểm tra thanh toán và Giỏ hàng
Hình 6.24 Wireframes của các màn hình Thanh toán
5. UI Guideline:
5.1 UI Guideline là gì ?
Guideline là các hướng dẫn, nguyên tắc để thực hiện theo đúng tiêu chuẩn và định hướng chung.Trong thiết kế UI, để thiết kế trải nghiệm đúng tiêu chuẩn và nhất quán cho toàn bộ sản phẩm của mình, ta cần tuân theo một vài định luật và guideline cần thiết.
Các guideline UI giải thích về thành phần UI và hiểu rõ hành vi của người dùng bằng cách đưa ra các mẫu ví dụ thực tiễn. Những guideline này thường được định nghĩa ở cấp độ tổ chức và không kém phần hữu ích cho các nhà thiết kế, lập trình viên và người thử nghiệm .
“Guideline là một ngôn ngữ trực quan để truyền thông các mục tiêu thiết kế trong nhóm, điều quan trọng là đảm bảo mọi người đều có thể hiểu và thực hiện việc sử dụng nó. ”- Yuki Gu
Một vài tổ chức nổi tiếng quan tâm đến UX đã xuất bản guideline riêng trên trang web của họ. Điều này rất hữu ích cho các công ty cũng như các cá nhân để tạo ứng dụng và plug-ins. Ngoài ra, bất kỳ ai cũng có thể tùy chỉnh và sử dụng các guideline này theo yêu cầu.
5.2 Phân loại UI Guideline
• Style: Các style (kiểu) của guideline xác định hình thức thị giác của
một tổ chức mà nó trình bày. Mỗi tổ chức đều có kiểu guideline riêng mà họ sử dụng để xây dựng logo, màu sắc, icon và typography.
• Layout: Layout của guideline nhằm xác định cấu trúc tổng thể của giao diện. UI có thể được thiết kế bằng layout lưới hoặc layout danh sách. Phần guideline này cũng chứa hành vi của thiết kế responsive (thiết kế đáp ứng).
• Thành phần UI: Những guideline này cung cấp thông số kỹ thuật và cách sử dụng các thành phần UI hiển thị trên giao diện và tương tác của người dùng với chúng.Các thành phần UI bao gồm các kiểm soát tiêu chuẩn như kiểm soát đầu vào, cửa sổ, hộp thoại, bảng, menu, chế độ xem, thanh cuộn, nút và nhiều mục tương tự khác. • Văn bản: Guideline văn bản bao gồm tone và kiểu văn bản được sử
dụng trên UI. Văn bản phải dễ hiểu đối với các nền văn hóa và người xem khác nhau.Thông số của văn bản như kích thước font chữ, màu sắc và style là một phần của guideline này. Văn bản hiển thị trên UI dưới dạng trường, nhãn, thư và thông tin cho người dùng.
• Tương tác và hành vi: Các loại tương tác (nhấp chuột, cử chỉ, giọng nói) mà người dùng thực hiện với thiết kế, và phản hồi của hệ thống để đáp trả lại các tương tác đều thuộc trong guideline này. • Tài nguyên: Guideline có một tập hợp các tài nguyên có thể được sử dụng khi thiết kế một hệ thống.Các tài nguyên này chứa layout template cho nhiều thiết bị, bộ icon, thư viện font chữ, thành phần UI và bảng màu. (adsbygoogle = window.adsbygoogle || []).push({});
5.3 Thực hành thiết kế UI Guideline5.3.1 Color – Chọn màu sắc 5.3.1 Color – Chọn màu sắc
Hai màu sắc chính (Primary Colors), chủ đạo được lấy trực tiếp từ chính thương hiệu Foam Market.
Không quên đặt tên cho từng màu sắc để dể dàng gọi và sử dụng sau này. Thêm các tông màu thể hiện sắc độ của 2 tông màu chính bằng cách: Thêm
%màu trắng vào 2 tông màu chính là Green Garden và Sand Hill với % màu trắng lần lượt như sau: 80%, 60%, 40%, 20%.
Hình 6.27 Hai màu sắc chủ đạo của Foam Market
Cùng với các màu sắc bổ trợ (Secondaty Colors) khác được lấy cảm hứng từ chính các màu sắc luôn hiện hữu với Foam Market. Màu sắc từ những gian hàng thực phẩm, từ những ánh đèn trang trí và cả màu sắc trên khuôn nông trại của Foam Market.
5.3.2 Typographys
Chọn font chữ cho ứng dụng, với một phong cách trẻ trung, hiện đại mà Foam Market muốn hướng tới.
Font chữ mà ta sẽ lựa chọn là: SF Pro Display
Hình 6.30 SF Pro Display và các định dạng của nó được sử dụng trong ứng
5.3.3 Xây dựng các UI Component cơ bản.
Thiết kế các component cơ bản như: Button, Navigation, Tab bar, Input field,… theo các thông số kích thước như sau:
Hình 6.35 Một số thành phần cơ bản khác
Sau khi đã thiết kế được các thành phần cơ bản trên, sắp xếp nội dung – hoàn thành giao diện sản phẩm.
CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 1. Tổng kết và hạn chế:
Qua quá trình thực hiện phân tích và thiết kế cho ứng dụng Foam, đã phần