Sketch, Wireframe, Mockup và Prototype UI/UX trong công việc của BA
Hế lô mọi người, hôm trước bạn mình xem video Sketch UI/UX của mình xong mới ồ lên, hoá ra UI/UX là cái này à, lần trước đi học trung tâm xong thấy mọi người cứ gọi UI/UX nhưng không hình dung được nó là gì. UI/UX được chia làm 4 loại Sketch, Wireframe, Mockup và Prototype, không biết bạn đã phân biệt được và biết mỗi loại dùng khi nào chưa?
Bài viết này mình sẽ đưa định nghĩa sơ lược, cùng ví dụ, hình ảnh và kinh nghiệm của mình khi sử dụng từng loại qua các dự án nhé^^ Đầu tiên, hãy cùng nhau trả lời, UI/UX là gì?
UI là viết tắt của User Interface (giao diện người dùng), UX là User Experience (trải nghiệm người dùng). Hiểu đơn giản, trong công việc của BA, khi tài liệu hoá yêu cầu khách hàng, bạn cần có hình ảnh màn hình ứng dụng sẽ được xây dựng nên, màn hình này là UI/UX.
UI và UX luôn đi cạnh nhau, bởi giao diện màn hình thiết kế có đẹp, có logic, dễ hiểu, dễ sử dụng hay không, sẽ ảnh hưởng đến trải nghiệm người dùng.
UI/UX có 4 loại được sắp xếp theo mức độ phức tạp dần là Sketch, Wireframe, Mockup và Prototype. Trong bài viết này mình đưa màn hình Confluence, giả sử bạn đang cần document để xây dựng Confluence (nếu chưa biết về Confluence, bạn có thể xem bài viết: 6 Lợi ích của Confluence đối với công việc của BA), UI/UX sẽ được thể hiện như sau. 1. Sketch
Sketch là hình vẽ phác hoạ ban đầu bằng giấy bút. Hồi xưa khi khách hàng đưa ra yêu cầu và tụi mình vẫn chưa định hình nên xây dựng màn hình như thế nào, tụi mình ngồi cùng nhau, vẽ lên giấy trước. Đây là bước khi lên ý tưởng màn hình, để mọi người có thể nhanh chóng thảo luận với nhau.
Với Sketch, chúng mình hiểu được sơ lược chức năng, bố cục màn hình. Ví dụ Sketch UI/UX cho Confluence2. Wireframe
Từ cấp độ Wireframe, chúng mình bắt đầu dùng các công cụ hỗ trợ. Wireframe chi tiết hơn Sketch, thể hiện được cấu trúc màn hình: User thao tác ở đâu, các button đặt ở đâu,.... Nhờ Wireframe, đội dự án có thể ước lượng được độ phức tạp của màn hình, khối lượng công việc cần thực hiện để xây dựng màn hình. Wireframe thường vẽ không màu, dưới dạng đen trắng. Ví dụ Wireframe cho Confluence nhé^^ (mình vẽ bằng Balsamiq^^)
Về lý thuyết, Wireframe vẫn là hình thái đơn giản, chủ yếu để thể hiện cấu trúc màn hình, chưa cần chính xác về chi tiết.
Tuy nhiên, với một vài dự án mà mình từng trải qua, khi không có Designer, màn hình mà BA vẽ sẽ là căn cứ cho đội dev, nên tụi mình sẽ chi tiết hết sức có thể. Từng nội dung, button, label, dấu chấm, dấu phẩy, kiểu chữ viết hoa hay viết thường, tụi mình sẽ thể hiện chính xác trên Wireframe.
Thường thì BA sẽ hiểu yêu cầu khách hàng, nhưng so với Designer, tụi mình không chuyên về thiết kế màn hình xinh đẹp, tiện ích cho người dùng. Do vậy, ở cấp độ cao hơn, có Designer, dự án sẽ có Mockup đẹp long lanh. 3. Mockup
Mockup sẽ là phiên bản màu của Wireframe. Các yếu tố chi tiết trên Mockup sẽ là căn cứ chính xác cho đội dev xây dựng và test kiểm định theo, ví dụ như vị trí của các thành phần trên màn hình, cỡ chữ, mã màu,....
Mockup sẽ giúp người dùng dễ dàng hình dung về màn hình được xây dựng, cách người dùng tương tác, bởi màn hình này rất gần với màn hình sẽ được xây dựng trên thực tế. Ví dụ Mockup cho Confluence
(Ví dụ này là Mockup do mình vẽ, không phải designer nên thiết kế vẫn chưa được chuẩn. Mình đưa vào mang tính tham khảo cho các bạn dễ hình dung nha) 4. Prototype
Cấp phức tạp và tốn kém nhất là Prototype. Với Prototype, khách hàng có thể thao tác thật. Ví dụ, bạn có thể click vào button Tạo mới, mở ra màn hình tạo mới. Tiếp đó, bạn có thể nhập thông tin trên màn hình này, ấn Save. Tuy nhiên, đây chỉ là Prototype, nên thực tế dữ liệu không được lưu trữ và các xử lý phức tạp, liên kết dữ liệu chưa được thực hiện.
Loại này thường chỉ được dùng khi khách hàng yêu cầu chứng minh năng lực, được thực hiện cho những màn hình phức tạp.
Tóm tắt nhiêu đây, hi vọng các bạn đã hình dung được về 4 loại UI/UX này. Ai biết gì thêm comment share lại cho mình nha ^^
