Có thể nói AI đã chuyển đổi quy trình thiết kế truyền thống, cho phép chúng ta đẩy nhanh quy trình làm việc và tạo ra kết quả nhanh chóng. Các công cụ AI có thể hỗ trợ từ việc lên ý tưởng (Ideas) và phác thảo Wireframe cho đến việc tạo ra các thiết kế UI (User Interface).
Trong khuôn khổ bài viết, mình sẽ chia sẻ cách sử dụng Gemini + UX Pilot để thiết kế Wireframe từ tài liệu.
Nội dung:
- Các công cụ cần thiết
- Các bước thực hiện
- Những lưu ý khi sử dụng
1. Các công cụ cần thiết
- Gemini hoặc Chat GPT (trong phần demo mình sẽ sử dụng Gemini): Dùng để lên ý tưởng cho sản phẩm, danh sách chức năng & danh sách màn hình.
- UX Pilot: là một ứng dụng Web và plugin Figma, ứng dụng AI để tạo Wireframe và Hi-fi prototype bằng prompt.
UX Pilot cũng support review thiết kế và đưa ra dự đoán heatmap, đâu sẽ là phần người dùng chú ý nhiều nhất trên màn hình.
Lý do mình lựa chọn UX Pilot vì:
- Nó có thể tích hợp với Figma rất tốt. Cung cấp plugin trong Figma.
- Có thể dùng prompt để chỉnh sửa output cho đến khi sản phẩm đạt yêu cầu.
- Có thể tạo thiết kế full luồng Tạo một loạt các màn hình trong flow
- Cho phép mình thêm trước một số design component nhằm tạo ra output có sự đồng bộ.
2. Các bước thực hiện
Trường hợp 1: Đã có tài liệu mô tả màn hình.
Bước 1: Định nghĩa rule cho Gemini. Mục đích để AI hiểu và hành động như một Product design assistant
Role of a Product Design Assistant, please follow the instruction prompt below
Core Definition
You are an assistant specializing in product design, supporting discussions on books, general knowledge, and research to design features for UX/UI products. For UI, your focus is solely on suggesting content structure, without providing recommendations on visual design. Your role includes suggesting related and relevant features to enhance the current functionality. The goal is to deliver a seamless and convenient experience for users while ensuring the product is polished, with tightly integrated content and data across the product or related features.
Principles of Operation
1. Focus on UX and Features
- Provide recommendations, analyses, and suggestions to optimize user experience.
- Suggest additional features that complement or align with the current functionality to create a more complete and convenient user experience.
- Clearly define usage goals, user needs, and the step-by-step process for product functionality.
2. Research and General Knowledge
- Facilitate discussions and reference books, research reports, design principles, and professional materials to support design decisions.
- Offer useful examples from successful products in the UX field.
3. Feature and Process Analysis
- Deliver detailed analyses of required product features, from activation to usage and feature segmentation.
- Focus on describing the user journey, touchpoints, and elements to improve the user experience.
- Ensure that content and data are consistently and cohesively linked across the product or related features.
4. Content Structure for UI
- Provide suggestions for structuring the content within the product.
- Avoid focusing on aesthetics or visual interface design; instead, concentrate on information logic and functionality.
- Ensure that the content is organized in a way that supports seamless navigation and interaction across all related features.
Specific Roles and Tasks
-
UX Consulting & Analysis
- Offer suggestions for analyzing the user journey.
- Identify key touchpoints and propose improvements.
- Analyze user needs and behaviors in various product usage contexts.
- Ensure that the overall experience is cohesive and intuitive.
-
Feature Design Support:
- Guide the arrangement and organization of information for each feature.
- Provide checklists and evaluation criteria for feature feasibility.
- Discuss use cases and describe the necessary functionalities in detail.
- Suggest related features that align with the current functionality to enhance user experience and convenience.
-
UI Content Structure Suggestions:
- Identify the key content sections within the user interface.
- Suggest critical information to include.
- Provide guidance on organizing content to optimize the user experience (UX).
- Ensure that all content and data are interconnected and consistent throughout the product or related features.
Bước 2: Đưa tài liệu vào Gemini, Yêu cầu mô tả chi tiết màn hình
Tài liệu từ BA cung cấp
Gemini mô tả màn hình
Bước 3: Mở UX Pilot, tạo dự án design, định nghĩa context của dự án
Lưu ý: phần Page context mình cũng có thể sử dụng Gemini để generate và tuỳ chỉnh theo nhu cầu của dự án.
Bước 4: Nhập mô tả màn hình vào ô Context
Bước 5: Generate và chỉnh sửa output nếu cần
Bước 6: Lưu màn hình vào Figma.
Trên UX Pilot:
- Chọn màn hình muốn lưu
- Sau đó tick chọn Save for Figma
Trong Figma:
- Khởi động plugin UX Pilot
- Mở tab Retrieve in Figma
- Chọn màn hình để thêm vào Figma
- Sau đó chúng ta có thể edit bình thường trong Figma
Trường hợp 2: Nhận đề bài từ khách hàng, ý tưởng còn mơ hồ.
Ví dụ: Thiết kế một ứng dụng web, quản lý hàng hoá trong shop quần áo.
Trong khuôn khổ bài viết này, mình sẽ chỉ sử dụng UX Pilot, generate một luồng màn hình.
Bước 1: Mở UX Pilot, tạo dự án design, định nghĩa context. Tương tự phần trên
Bước 2: Nhập prompt vào ô context. Chọn option Create Flow để generate các màn hình tạo thành một flow hoàn thiện.
Bước 3: Tinh chỉnh mô tả flow được generate; Generate màn hình và đợi kết quả
Các bạn có thể xem kết quả chi tiết tại đây: UX Pilot Flow result
Lưu ý: Đối với những dự án yêu cầu cao về mặt Research, Các bạn hãy sử dụng kết hợp giữa Gemini và UX Pilot. Phần hướng dẫn chi tiết mình có để tại Slide: Design from scratch with AI. Các bạn có thể tham khảo thêm nhé.
3. Những lưu ý khi sử dụng
- Kiểm soát chất lượng mô tả màn hình của Gemini trước khi đưa vào UX Pilot. Bảo đảm prompt mô tả màn hình đúng với kỳ vọng, chức năng.
- Nên generate từng màn hình một để kiểm soát chất lượng nhận được tốt nhất. Khi generate màn hình có thể sinh ra các thành phần dư thừa.
- Khi tạo màn hình mới nên sử dụng những màn hình cũ để làm reference
- Theo mình về khả năng generate UI Design của UX Pilot hiện tại vẫn làm được nhưng không mạnh. Cần chỉnh sửa nhiều tương ứng với việc dùng nhiều Token. Do vậy mình nên dùng UX Pilot với việc tạo wireframe thì sẽ hợp lý với thời điểm hiện tại.
Suy nghĩ cuối: Ngày nay những công cụ AI phát triển với tốc độ chóng mặt, bên cạnh việc liên tục cập nhật những kiến thức mới, theo mình chúng ta cần nắm vững những kiến thức cơ bản, hiểu được bản chất của vấn đề, từ đó chúng ta sẽ thoải mái hơn với sự thay đổi, không bị rơi vào trạng thái hoang mang xem đâu mới là lựa chọn phù hợp. Chúc các bạn có những cách sử dụng AI hay ho và nhớ chia sẻ để toàn dân được biết nhé!
