Trong phần 1 và phần 2 của chuỗi bài viết về team UX, Careerly đã giới thiệu các vị trí trong một team UX cũng như quy trình UX nói chung, hi vọng đã có thể cho bạn một cái nhìn tổng quan về team UX cũng như công việc của team UX.
Nếu chẳng may bỏ lỡ, các bạn có thể đọc lại các phần trước tại link dưới đây:
- Phần 1: //blog.careerly.vn/blog/nhap-mon-ux-phan-1-team-ux-gom-nhung-ai/
- Phần 2: //blog.careerly.vn/blog/quy-trinh-thiet-ke-ux/
Tiếp nối 2 phần này, trong phần 3 phần cuối của series Nhập môn UX, Careerly xin giới thiệu quy trình của hai nhánh nhỏ hơn trong UX đó là UI Design [User Interface Design] và UX Writing. UI Design và UX Writing là hai yếu tố hiện thực hoá những kiến thức, nghiên cứu, ke được ở giai đoạn UX Design để tạo nên UX tuyệt vời cho sản phẩm cuối cùng đến tay người dùng.
1. Quy trình UI Design
User Interface Design là một nhánh riêng biệt của của UX Design tập trung vào hình thức và bố cục của sản phẩm. Ở trong nhóm này có thể có các vị trí với title như Visual Designer, UI Designer, Digital Designer, UI artist, etc. Tuy title có vẻ khác nhau nhưng thực ra công việc của các vị trí này trong phát triển sản phẩm cũng tương tự như nhau.
Tất cả các màn hình của product, bao gồm các tính năng tương tác lẫn yếu tố visual đều được lên ý tưởng, kế hoạch, phát triển và thực hiện bởi UI Designer. Các nhiệm vụ của Visual Designer gồm:
- Collaborating: Làm việc trực tiếp với UX Designer và Developer để nắm được concept của sản phẩm và đối tượng người dùng sản phẩm nhắm đến trước khi hoàn thành thiết kế.
- Design: Để chuẩn bị cho một thiết kế vừa tương tác ngon vừa mãn nhãn, Visual Designer phải qua các bước từ soạn thảo Style Guide Hướng dẫn về phong cách, thiết kế từng panel, sắp xếp layout cho thiết kế responsive, thiết kế các yếu tố UI nhỏ [như thanh trượt, nút bấm, 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ố UI.
- Prototyping: Thường xuyên kiểm tra các bản prototype để xem nó hiển thị, chuyển động như thế nào và tìm ra lỗi cần sửa.
2. Một ví dụ về quy trình UI như sau:
| Thấu hiểu các insight từ giai đoạn research | Thấu hiểu ảnh hưởng của các insight từ giai đoạn research đến UX, trải nghiệm của người dùng, để có thể tạo ra một sản phẩm lấy người dùng làm trung tâm. | Confluence Trello Slack Bảng/Giấy + Bút | Tài liệu báo cáo kết quả nghiên cứu ở dạng bài thuyết trình được tạo trên Confluence hoặc các công cụ soạn thảo tương tự |
| Tạo cơ sở hạ tầng thông tin [Information Architecture] | Information Architecture [IA] là xương sống tạo bối cảnh định hướng cho sản phẩm. | Sketching Apps Confluence Bảng/Giấy + Bút Giấy nhớ | Visual của IA trên Sketch hoặc các app tương tự |
| Thiết kế Bố cục [Wireframe] | Wireframe giúp cho các team research, design, kỹ thuật có thể hình dung sản phẩm sẽ trông như thế nào. | Sketching Apps Balsamiq Illustrator/Photoshop | Visual của Low Fidelity đến Medium Fidelity Wireframe |
| Sắp xếp các flow trên màn hình | UX flow giúp cho team dễ hiểu được những vấn đề phức tạp như khi sản phẩm được sử dụng bởi nhiều người dùng, trong những bối cảnh [scenario], với những điểm chạm [touchpoint], bằng những phương tiện [medium] khác nhau. | Bảng/Giấy + Bút Sketching Apps Illustrator/Photoshop | Visual của các flow trên màn hình cho mỗi tính năng hoặc bộ phận đó |
| Tạo Prototype nhanh [Rapid Prototype] | Rapid Prototype giúp lên ý tưởng, test ý tưởng đó và nhận feedback sớm nhất có thể từ team nội bộ và phía client [nhà cung cấp hoặc nhà phân phối, v.v trong hoàn cảnh tương ứng] | Sketch với InVision Adobe XD Principle for MacFlinto Framer | Một bản thiết kế prototype thật mà quản lý hoặc khách hàng có thể dùng thử trên thiết bị của họ. |
| Xây dựng và cập nhật một hệ thống thiết kế và kiểm soát các phiên bản của sản phẩm [Design + Version Control System] | Hệ thống thiết kế rất có giá trị với các sản phẩm muốn mở rộng hơn. Nó là cầu nối giữa thiết kế và phát triển sản phẩm. Sau khi sản phẩm ra mắt, hệ thống thiết kế sẽ giúp cập nhật các phiên bản mới của sản phẩm nhanh hơn. | Sketch với Zeplin Abstract | Tạo các bộ phận trong hệ thống thiết kế và luôn tuân theo bản design mới nhất để kiểm soát các phiên bản của sản phẩm. |
| Thiết kế UI | Đây là bước quan trọng vì UI là kết quả cuối cùng mà client và end- user [người dùng cuối] sẽ thấy. | Sketch Adobe XD | Bản UI cuối cùng sẽ được các bộ phận khác trong công ty [đặc biệt là dev] dùng để triển khai phát triển sản phẩm. |
| Thêm Motion Design | Motion Design làm cho trải nghiệm với UI phong phú hơn và tăng sự tương tác của người dùng với sản phẩm. Nó cũng giúp cho bên dev hiểu các hành vi và tương tác của người dùng. | Sketch với InVision MarvelApp Principle for Mac Flinto Adobe XD Protopie | Thêm animation, motion, và interaction vào thiết kế để tạo cảm xúc cho người dùng khi họ tương tác với app. |
| Bàn giao thiết kế | Liên tục làm việc với designer và developer, chứ không phải là bàn giao hết một lần rồi phủi tay. | Zeplin Slack Sympli | Bàn giao thiết kế cho team mobile và frontend để bắt đầu giai đoạn phát triển sản phẩm. |
| Thử nghiệm, cải thiện và cập nhật | 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. | Đã đề cập trong giai đoạn Thử nghiệm UX ở Phần 2 | Hoàn thành thử nghiệm trước và sau thiết kế, tài liệu UX Testing hướng dẫn chi tiết về giai đoạn thử nghiệm. |
3. Quy trình UX Writing
Về cơ bản, UX Writing cung cấp câu trả lời hiệu quả cho những câu hỏi và vấn đề của người dùng.
Câu trả lời cho những câu hỏi sau sẽ xác định định hướng và cách giao tiếp của một brand.
- Dự án/tính năng này là gì?
- Tại sao chúng ta phải làm tính năng này?
- Bạn sẽ làm nó cho ai?
- Ứng dụng trên thị trường của dự án này là gì?
- Kết quả của việc thiết kế là gì [cả về copy và visual]
- Timeline của dự án là gì?
Các bạn có thể đọc lại bài viết giải thích rõ về UX Writing mà Careerly đã đăng tải trước đó tại đây: //blog.careerly.vn/blog/ux-writing-la-gi/
4. Một ví dụ về quy trình UX Writing như sau:
| Wireframe Lên bố cục | Nhận thiết kế bố cục từ UI Designer, xuất các từ khóa.Sau đó tạo các từ khóa [nội dung] mới cần thiết hoặc cập nhật format của các từ khóa có sẵn sao cho phù hợp hơn. | Tất cả nội dung có sẵn trên wireframe đó cần được review, cập nhật với nội dung mới nếu cần.Nội dung cần được cung cấp bằng tất cả các thứ tiếng mà phiên bản hiện tại của app hỗ trợ. |
| Visual Design Thiết kế phần nhìn | Kiểm tra lại xem các nội dung đã được UI Designer thêm vào thiết kế một cách phù hợp hay chưa, nếu chưa thì cần đưa lại thiết kế cho UI Designer để họ cập nhật bản nội dung cuối cùng. | Visual màn hình cuối cùng được thiết kế xong cần tránh mọi lỗi chính tả, nội dung cần là bản cuối cùng cho tất cả các thứ tiếng mà phiên bản hiện tại của app hỗ trợ. Ngôn ngữ dùng trong tất cả các bản cần có giọng điệu nhất quán, quen thuộc với người dùng. |
| Review Đánh giá | Review lại nội dung và cải thiện nếu cần cũng như thống nhất nội dung trên tất cả các platform của sản phẩm. | Nội dung/ngôn ngữ dễ hiểu cho end user. |