Tự luyện tập thiết kế UX/UI
Một hệ thống tư duy mạch lạc cùng khả năng vận dụng linh hoạt các công cụ làm việc, không những giúp hoàn thiện toàn vẹn thiết kế, mà còn đảm bảo quá trình thiết kế được diễn ra một cách khoa học.
Sau quá trình tự học đã trải nghiệm, Lance đã đút kết lại thành một lộ trình tương đối tinh gọn. Qua đó, bạn nhanh chóng trang bị được những kỹ năng cần thiết để có thể hoàn thành một nhiệm vụ thiết kế tính năng/chức năng, hoặc cả một dự án sản phẩm ứng dụng.
Trước khi bắt đầu luyện tập, bạn nên biết về 5 kỹ năng chủ chốt của nhà thiết kế UX/UI thường sở hữu. Tất nhiên, tùy ở mỗi công ty, từng vị trí khác nhau sẽ đòi hỏi bạn cần ưu trội năng lực nào, mức độ hiểu sâu khu vực nào nhất.
Nghiên cứu trải nghiệm sử dụng (UX)
Thiết kế giao diện (UI)
Xây dựng thiết kế tương tác/prototype
Content marketing, branding
Lập trình front-end hoặc hiểu biết về ngôn ngữ lập trình
Lộ trình tinh gọn trong 8 bước
Khi đảm nhiệm vai trò trong doanh nghiệp, ngoài tư duy tốt, thiết kế sáng tạo thì khả năng triển khai hiệu quả cũng là yếu tố quyết định năng lực nổi bật của nhà thiết kế.
Một hệ thống tư duy mạch lạc cùng khả năng vận dụng linh hoạt các công cụ làm việc, không những giúp hoàn thiện toàn vẹn thiết kế, mà còn đảm bảo quá trình thiết kế được diễn ra một cách khoa học.
#1. Hiểu về tâm lý học ảnh hưởng đến thiết kế UX
Đọc tài liệu nghiên cứu có liên kết với các nguyên tắc thiết kế ứng dụng. Làm quen với các thuật ngữ, quan điểm và số liệu thống kê về các chỉ số hiệu suất phổ biến.
Nguồn học đa dạng như blog, video, khóa học ngắn miễn phí, hoặc tính phí ở một số kiến thức cao cấp (nhưng bạn có thể bỏ qua vì chưa cấp thiết ở giai đoạn đầu).
Đa phần nguồn tài liệu có nội dung chất lượng cao đều chủ yếu sử dụng tiếng Anh. Dó vậy, mình khuyên bạn nên đạt một trình độ tiếng Anh nhất định ở mức đọc - hiểu ổn. (Có thể kết hợp dùng từ điển trong quá trình và cải thiện sự phụ thuộc này từ từ.)
Ghi chép lại nội dung quan trọng để ôn tập (nên bằng tiếng Anh luôn để làm giàu vốn từ chuyên ngành, đan xen cùng tiếng Việt).
#2. Ứng dụng với các công cụ thiết kế UX phổ biến
Tìm hiểu các mô hình và phương pháp thiết kế UX.
Ngoài hỗ trợ triển khai ý tưởng, ý nghĩa đáng kể nhất là chúng thúc đẩy quá trình hợp tác. Designer cùng các stakeholder có thể thuận tiện trao đổi, diễn giải thông tin một cách xúc tích, đi thẳng vào trọng tâm cần thảo luận và sáng tỏ mọi tiếp cận của vấn đề.
Trong thực tế, các công cụ này được dụng trong nhiều trường hợp với mục đích cụ thể hơn như lưu trữ tài liệu, phân tích, nghiên cứu, phát triển sản phẩm, đối chiếu thiết kế, theo dõi phiên bản, v.v… Một số công cụ được sáng tạo để tập trung khai thác từ hoạt động đội nhóm hoặc tập thể người tham gia nào đó.
Đây là 13 công cụ/mô hình thường được ứng dụng mà mình biết (sắp xếp theo mức độ thông dụng):
User-Flow Chart - Sơ đồ luồng người dùng
User Persona - Khung mô tả chân dung người dùng
User Stories (Map) - Thẻ trình bày góc nhìn của người dùng về việc tương tác/trải nghiệm các chức năng của app
Story Board - Bảng phân cảnh mô phỏng bằng hoạt họa về quá trình tiếp cận và sử dụng app của người dùng
Site Map - Sơ đồ thứ bậc thể hiện mối liên kết giữa các trang của một website/app, bao gồm cấu trúc tính năng con của từng trang nếu có
Mood Board - Bảng nghệ thuật dán ghép các yếu tố thị giác
Empathy Map - Khuôn chỉ dẫn phân loại khía cạnh hiểu biết ta có về người dùng
UX Pyramid - Thước theo dõi UX của thiết kế theo mức độ ưu tiên
User-Centered Design Canvas - Khung chỉ dẫn xác định phương hướng tổ chức thiết kế UX
Design Evaluation Checklist - Bảng liệt kê các vấn đề thiết kế cần đánh giá trước khi được xem là thỏa mãn yêu cầu
Affinity Diagram/Map - Bảng xử lý phân loại thông tin trong quá trình nghiên cứu
Atomic UX Research Canvas - Sơ đồ liên kết để phân tách và quản lý thông tin nghiên cứu
Feature List - Bản kế hoạch bao gồm danh sách các tính năng cho app cần xây dựng và sự phân loại theo mức độ ưu tiên hay mốc thời gian
#3. Nâng cao gu thẩm mỹ
Tham khảo tác phẩm ấn tượng được tán dương bởi cộng đồng để mình học hỏi, tìm cảm hứng, tăng khả năng nhận biết những khuôn mẫu bố cục, và khám phá sở trường thiết kế yêu thích.
Hình ảnh dự án thường được các chuyên gia chia sẻ trên các nền tảng như Dribbble, Behance, Pinterest,…
Hoạt động có vẻ không để lại lợi ích rõ ràng, song thiết kế của bạn của luôn có bản sắc, thể hiện giá trị nghệ thuật riêng. Về lâu dài, điều đó sẽ tiếp cho bạn nguồn năng lượng sáng tạo phong phú, theo đuổi sự nghiệp bền vững. Việc hình thành cho mình một “signature” về phong cách thiết kế là thiết thực không kém.
#4. Sử dụng phần mềm hoàn thiện thiết kế
Làm chủ công cụ triển khai bản thiết kế (tiêu biểu là Figma). Ở bước này, bạn quan tâm 4 mức độ hoàn thiện UI từ thấp đến cao là:
SKETCH < WIREFRAME < MOCKUP < PROTOTYPE
Sketch - bản phác thảo (nên vẽ tay)
Wireframe - bản vẽ khung, độ chân thực thấp hoặc cao
Mockup - bản vẽ giao diện hoàn chỉnh, sẵn sàng để phân phối và triển khai
Prototype - bản demo mô phỏng tương tác, cho phép thử nghiệm tính năng giống như trên app thật (thường được xuất ra dạng video để thuyết trình UX, đánh giá tính khả thi)
Nếu bạn chưa biết sử dụng phần mềm, hãy bắt đầu xem hướng dẫn trên youtube hoặc tài liệu hỗ trợ thông tin cho người mới khá kỳ chi tiết, dễ hiểu của Figma.
Theo đánh giá của mình thì giao diện và logic tính năng của Figma khá trực quan, đơn giản, dễ nắm bắt, chưa kể vận hành khá mượt, không đòi hỏi cấu hình máy cao. Sau 10-20 giờ tìm hiểu và ‘vọc’ là bạn có thể tương đối tạo ra những màn hình ở mức độ wireframe một cách khoa học.
#5. Phân tích - đánh giá
Vận dụng những kiến thức đã tiếp thu để đưa ra bình phẩm về một thiết kế
Bóc tách từng thành phần để phân tích, đánh giá giá trị của thiết kế
Bảo vệ hay diễn giải ý tưởng thiết kế một cách mạch lạc, chặt chẽ, hợp lý
Thuyết trình, thuyết phục trước các stakeholder hay người nghe quan tâm.
Phần này mình không cần nói thêm nhiều do đây là kỹ năng quan trọng dù ở công việc gì của ngành nghề nào. Nó như là “bài tập về nhà'“ mà bạn phải trau dồi và thực hành cả đời khi bước vào một lĩnh vực tri thức cho đến khi thành thục.
Bạn có thể tham khảo mô hình Thang đo Bloom để hiểu các mức độ tư duy, học hỏi.
#6. Hiểu về khái niệm thương hiệu (branding) và hoạt động marketing
Lựa chọn UX Strategy (chiến lược UX) là một trong những nhiệm vụ điển hình đầu tiên của UX designer khi bắt tay vào nghiên cứu cho một dự án ứng dụng mới.
Theo lẽ thường, công việc này vốn tồn tại mơ hồ do bản chất vấn đề nằm ở hình ảnh thương hiệu và chịu trách nhiệm quyết định bởi Brand Owner.
Trải nghiệm sử dụng trên giao diện ứng dụng và trải nghiệm tương tác với thương hiệu có khá nhiều điểm giao thoa. Sau bước tiến phát triển của thế giới UX/UI cũng nhưng marketing hiện đại, người ta khám phá ra nhiều khía cạnh mới trong tâm lý học và dần hợp nhất trải nghiệm trong hành trình khách hàng với các điểm chạm (touchpoint). Một trong số đó là tầm quan trọng của sự đồng bộ của nhận diện thương hiệu từ offline đến hiển thị trên mọi thiết bị.
Yếu tố thị giác hiển nhiên nhất là màu sắc. Ví dụ, màu tím là màu chủ đạo của một thương hiệu, thì màu accent làm điểm nhấn trên giao diện sản phẩm của thương hiệu cũng sẽ sử dụng lại cùng mã màu đó.
Brand Style Guide, Brand Key hay Content Style Guide của phòng ban Brand hay Marketing trong doanh nghiệp, là những công cụ phổ biến để các UX designer dựa vào để triển khai chiến lược UX.
Mặt khác, kiến thức này nhưng ở góc độ kinh doanh sẽ giúp bạn tiếp cận góc nhìn của người dùng trong vai trò là khách mua hàng. Tầm nhìn của bạn sẽ được mở rộng đến toàn cảnh bức tranh vận hành sản phẩm, để từ đó mình có thể hiểu được mục tiêu/ nhu cầu của doanh nghiệp và của cả người dùng.
#7. Nắm quy trình công việc
Bạn nên biết vị trí của mình đứng đâu, có nhiệm vụ gì trong chuỗi giá trị của quá trình phát triển ứng dụng và cách thức hợp tác với lập trình viên.
Mỗi công ty chọn loại quy trình khác nhau, thay đổi theo thời gian dựa trên điều kiện ngoại cảnh, nguồn lực cũng như đòi hỏi của từng dự án cụ thể.
Gợi ý đến bạn một số mô thức quản lý công việc thường gặp hằng ngày của UX/UI designer:
Atomic Design - Phương pháp thiết kế giao diện một cách hệ thống
UI Framework (thư viện UI được lập trình sẵn). VD: tailwindcss.com, ant.design, mui.com
Design Token - Quản lý thành phần UI bằng mã hiệu liên kết
Quản lý UI Component/Library
Quản lý dự án theo Agile (Agile là một cách tư duy, không phải là phương pháp hay framework nào)
#8. Hiểu về các ngôn ngữ lập trình Front-end
Đó là những ngôn ngữ hình thức, mang hệ thống cấu trúc lệnh đằng sau của một giao diện hiển thị trên thiết bị.
Nhà thiết kế cần trang bị kiến thức tương đối để đưa ra quyết định tối ưu, hợp tác hiệu quả với lập trình viên front-end.
Sự hiểu biết sâu ở khu vực này, hay cao hơn là khả năng lập trình, có thể là không tất yếu đòi hỏi khi bạn lựa chọn theo đuổi con đường thiết kế thuần UX.
Nếu bạn đã định hướng sự nghiệp thiên về kỹ thuật thì bạn có thể học tập lập trình front-end cơ bản từ trước hoặc bổ sung thêm sau khi đã am hiểu về UX.
Thiết kế web đáp ứng - Responsive web design (RWD)
Có khả năng thiết kế RWD là một lợi thế cạnh tranh đáng kể. Nó đòi hỏi designer tinh thần sáng tạo đồng thời am hiểu tương đối về kỹ thuật, cách áp dụng UI framework linh hoạt. Mặt khác, sự phổ biến của web-app cũng là lý do thị trường có nhu cầu nhận lực cao về mảng này.
Responsive web có thể xem là một trong những thử thách ‘nhức đầu’ cho UX/UI designer. Với RWD, điển hình là khi xây dựng bố cục trang, tuân thủ một số quy tắc hoặc đôi khi phải thỏa hiệp, bỏ qua hài hòa để giao diện hoạt động ổn định.
Để hoàn thiện GUI theo hướng RWD, ngoài tiêu chí thẩm mỹ, yêu cầu kỹ thuật cần được đảm bảo để hiển thị tốt trên nhiều kích thước màn hình thiết bị cũng như hiệu suất sử dụng cao.
Lưu ý bỏ túi:
Xác định quãng thời gian ngắn cụ thể cho mỗi bước (dưới 1 tháng), và đi theo vòng lặp sau khi kết thúc ở một hoặc hai bước (xoay trở lại với bước trước đó). Mục đích là các kỹ năng của bạn có nhiều cơ hội ôn tập và thực hành kết hợp với các kiến thức mới vừa tiếp thu.
Tùy vào năng lực cá nhân và điều kiện hoàn cảnh của mỗi người, thời gian diễn ra có thể kéo dài từ 5 đến 12 tháng trước khi bạn chính thức được xem là tạm thời tốt nghiệp, đủ kỹ năng hoàn thành yêu cầu công việc theo tiêu chuẩn.
Dành ra tối thiểu từ 10-40 giờ học/ tuần để tránh rơi vào cảm xúc chán nản và cảm nhận rõ tiến độ phát triển của bản thân.
Vào khoảng một đến hai tháng cuối cùng, bạn có bắt đầu xây dựng CV và hoàn chỉnh portfolio với những mẫu thiết kế gần nhất.
Kế hoạch ra đời một dự án hoàn chỉnh, chú trọng thuyết minh ý tưởng, thể hiện quá trình tư duy UX; Và cùng vài UI shot của riêng mình.
Cộng đồng tự học UX: facebook.com/learn.ux
#TuiLaNewbie
Bài viết liên quan:
