UI UX cơ bản dành cho Business Analyst, Product owner.

Một tài liệu mà viết ra như SRS, URD, BRD,..thì không thể thiếu phần mockup. Mô tả tính năng, kiểu dữ liệu thì cần có mockup để minh họa. Việc có mockup sẽ giúp tài liệu trực quan hơn, logic hơn, ngắn gọn và mô tả đúng yêu cầu để phát triển phần mềm tốt hơn. 

Ví dụ: Mình muốn xây dựng một cái ví điện tử thì trong tài liệu xây dựng sẽ không thể thiếu phần mockup được. Vậy quá trình xây dựng ứng dụng sẽ cần trải qua các bước cơ bản sau đây. Đoạn này mình sẽ mô tả về xây dựng mockup, không nói đến các quá trình liên quan khác.

 Về cơ bản quá trình thiết kế một ứng dụng sẽ trải qua các bước sau: 

1. Sketch( phác thảo)

 Đây là bước đầu tiên, về cơ bản nó chỉ là một bản vẽ tự do, có độ xác  thực thấp, mục đích của việc phác thảo chủ yếu để lấy ý tưởng,  brainstorming dự án được thuận lợi hơn. Bước này cần thiết để lấy ý  tưởng và xây dựng thiết kế. Thường vẽ nháp trên giấy, mọi người dễ hình dung và trao đổi. Bản phác thảo này sẽ được lưu lại làm tài liệu cho phần phía sau.

Trong quá trình khơi gợi yêu cầu thì BA, PO thường sẽ ghi chú, phác thảo lại những chi tiết này để làm tài liệu về sau. Các bạn cũng tập có cho mình một quyển sổ nhỏ và một cây bút chì nhé. Sẽ rất hữu ích cho một Business analyst. Việc phác thảo sẽ giúp các BA lấy yêu cầu tốt hơn, có tư liệu để phân tích và đề xuất các giải pháp phù hợp. Bạn có thể phác thảo bằng bút chì, trên giấy hoặc các công cụ như balsamiq, visio. Kinh nghiệm của mình là luôn lưu lại các bản nháp này để làm tư liệu về sau. Theo dõi việc phát triển và thay đổi yêu cầu, 

2. Wireframe

 Bước này giúp xây dựng bộ khung cơ bản của website hoặc ứng dụng. Trên  bản vẽ thể hiện những chức năng chính, chế độ xem và mối quan hệ giữa  các tính năng. Các quyết định về nội dung (nội dung/tính năng) và vị trí đặt trên  trang web hoặc ứng dụng thường được đưa ra trong giai đoạn này. Dưới đây là 1 ví dụ mình vẽ lại một màn hình trên grab cho dễ hình dung. Bạn có thể dùng các công cụ như balsamiq để vẽ được wireframe nhanh chóng. 

 3. Mockup 

Sau khi có bản Wireframe hoàn chỉnh thì sẽ đến bước vẽ mockup, đến bước  này thì hình ảnh của website, ứng dụng sẽ chân thật và rõ hơn. Bản thiết  kế đã có thể có màu sắc, logo thương hiệu, content chính…những thường  là mô hình tĩnh. Về cơ bản BA làm đến bước này là quá tốt, giai đoạn sau chuyển đến các bạn UX or dev. Dưới đây là một bản mockup mà mình đã vẽ để các bạn dễ hình dung. Mình thường sử dụng axure để vẽ mockup.

 4. Prototype 

Đây là thiết kế sát nhất với sản phẩm thực tế được phát triển về tính năng, màu sắc, nội dung và đặc biệt là tính “động”, tức là có thể mô tả thao tác giữa các màn hình như sản phẩm thật. Việc mô tài liệu bằng Prototype cực hữu ích với việc xác định quy trình theo từng bước. Tức là sẽ phản ánh chân thực các bước user cần làm, thể hiện rõ  user journey của sản phẩm. Mình sẽ có bài viết về  User Journey ở bài viết tiếp theo. Prototype là công đoạn thiết kế cần nhiều nhất các kiến thức về UX (user experience). Như các bạn biết công nghệ đã phát triển đến một mức cao mới, phần mềm không chỉ đơn thuần là dùng được mà còn phải dùng ngon, dễ dùng, trải nghiệm dễ chịu, tạo ra sự thỏa mãn cho người sử dụng. UX của phần mềm càng tốt thì sự trung thành của user với sản phẩm càng cao. Hiện tại khá nhiều tools thiết kế mạnh phần prototype này. Mình thiết kế 2 màn hình trên với Axure: Sau đó mình sẽ liên kết giữa 2 màn hình lại, click chọn mua vé xem phim thì sẽ qua màn hình số 2, mô tả cách app hoạt động. Đoạn này có thể được gọi là Prototype. 

Các công cụ hỗ trợ cho Business Analyst, Product Owner thiết kế mockup, prototype phổ biến.

1. Sketch thì sẽ dùng bút chì hoặc bút bi vẽ lên giấy

2. Wireframe thì mình dùng Balsamiq.

3. Mockup, prototype thì có thể xài Figma, XD hoặc Axure. 

Nếu bạn dùng công cụ nào thì cố gắng nắm bắt những tính năng chính của nó để có thể linh hoạt với nhiều trường hợp khác nhau.

Những kiến thức về UI/UX, mockup prototype này rất quan trọng cho các bạn làm BA. Đặc biệt là các bạn làm product, chú trọng

Nếu bạn muốn tìm hiểu thêm về khóa học có thể tham khảo khóa học BA thực chiến TẠI ĐÂY