Là một UI UX designer, có lẽ bạn đã có những kỹ năng dưới đây. Tuy nhiên, bạn hãy đọc lại bài này xem mình đã thật sự nắm vững và áp dụng một cách tốt nhất vào công việc của mình? Không chỉ là những kỹ thuật như sắp xếp đối tượng, sử dụng màu, font chữ… bài viết còn đề cập đến những kỹ năng khác như viết mô tả UX, kiểm thử, cách rèn luyện để trở nên một UI UX designer hoàn thiện hơn.
1. Cách sắp xếp các đối tượng đúng cách
Tuân theo quy ước về khoảng cách mang lại sự đồng nhất cho các thiết kế và nhất quán trong khi cộng tác với các nhà thiết kế khác.
Có hai phương pháp mà các nhà thiết kế thường dựa vào để xác định chính xác các không gian trên trang. Các hệ thống khoảng cách phổ biến nhất là Hard grid (còn gọi là baseline grid) hoặc Soft grid.
Hard grids căn chỉnh nội dung thành một lưới dọc cố định và Soft grids xác định không gian giữa các mục trên trang.
Tại sao sử dụng Hard grid? Đối số để sử dụng Hard Grid (8px hoặc 4px) là bằng cách sử dụng các hộp nền trong suốt, sau đó nhóm chúng với các phần tử nền trước; dễ dàng hơn để theo dõi lợi nhuận và phần đệm trên cơ sở từng yếu tố. Sau đó, chúng ta có thể gắn các containers vào grid như các mảnh ghép.
Tại sao sử dụng Soft grid? Lập luận cho việc sử dụng Soft Grid là khi một giao diện được phát triển, các ngôn ngữ lập trình không sử dụng loại cấu trúc lưới đó, do đó, lưới không liên quan. Soft grid ít hạn chế hơn đối với các nhà thiết kế và yêu cầu ít tẻ nhạt hơn.
Tại sao phải thiết kế với khoảng cách theo gia số 8? Cho dù đó là soft grid hay hard grid, tiêu chuẩn là thiết kế các phần tử không gian sử dụng 4 hoặc 8 px.
Sử dụng số 8 kỳ diệu vì nó hiển thị các số lẻ đúng cách. Ví dụ: trái ngược với 5, trên thiết bị có độ phân giải 1,5x, các số lẻ sẽ không hiển thị chính xác.
Ngoài ra, phần lớn kích thước màn hình hiện đại chia hết cho 8, giúp việc căn chỉnh thiết kế phù hợp trên các thiết bị đó trở nên đơn giản.
2. Cách chọn bảng màu hoàn hảo
Chủ đề màu sắc có nghĩa là phải hài hòa, dễ tiếp cận và giúp phân biệt các phần tử và bề mặt giao diện người dùng với nhau.
Đây là quy trình 4 bước giúp tạo bảng màu sạch và thẩm mỹ:
- Chọn màu thương hiệu. Bắt đầu với màu chính mà bạn xác định dựa trên thương hiệu, sở thích cá nhân (nếu đó là một dự án phụ), nghiên cứu tâm lý về màu sắc.
- Chọn màu hệ thống. Xác định màu cho các yếu tố khác nhau như nền, văn bản, lỗi, thành công, v.v.
- Tạo bảng màu từ các màu cơ bản. Khi đã chọn các màu cơ bản cho thương hiệu và giao diện người dùng, tiếp tục đặt các màu vào công cụ màu của Google (gần dưới cùng) để có được các sắc thái khác nhau của màu đó.
- Đảm bảo khả năng tiếp cận. Nguyên tắc Hỗ trợ Tiếp cận Nội dung Web ( Web Content Accessibility Guidelines ) đề xuất tỷ lệ tương phản màu ít nhất là 4,5: 1 giữa tất cả văn bản và nền. Tải plugin Stark để kiểm tra được các bảng màu.
3. Cách tạo tỷ lệ kiểu chữ
Kiểu chữ khi được sử dụng hiệu quả, nó có thể nâng cao khả năng sử dụng bằng cách cải thiện khả năng đọc, khả năng truy cập và phân cấp trong một giao diện.
Nếu bạn không muốn tạo nguyên tắc về kiểu chữ từ đầu, hãy thử Material type scale generator để tạo kích thước phông chữ cho các đoạn văn, tiêu đề, buttons, v.v. Để tạo các nguyên tắc về tỷ lệ loại cho một dự án giao diện người dùng, thực hiện như sau:
- Chọn một font chữ để làm việc. Để có được phông chữ UI chất lượng cao bạn có thể tham khảo Google fonts hoặc Adobe fonts
- Tránh nhiều hơn 2 kiểu chữ. Thay vì giới thiệu các phông chữ mới cho giao diện, hãy sử dụng các font tương tự nhau. Fonts của cùng một nhóm được thiết kế để hoạt động cùng nhau, vì vậy chúng linh hoạt và nhất quán.
- Thiết lập kích thước font cơ sở. Thiết lập loại được sử dụng phổ biến nhất cho nội dung và xác định chiều cao dòng phù hợp.
- Chiều cao giữa các dòng. Một nguyên tắc chung là chiều cao dòng phải bằng cỡ chữ 1,5x.
- Xác định thang điểm. Thang đo cung cấp tính nhất quán, nhịp điệu và thứ bậc vì chúng có thể dự đoán được. Để đặt tỷ lệ kiểu cho h1, h2, h3, body, captions, buttons, v.v., Cần một giá trị tỷ lệ nhân với kích thước font cơ sở. Các tỷ lệ phổ biến là 1.250x, 1.414x, 1.5x, 1.618x.
- Thử nghiệm cân trên các thiết bị. Thử nghiệm phông chữ với các tỷ lệ khác nhau trên nhiều kích thước thiết bị để quyết định giá trị phù hợp.
Có thể bạn muốn tìm hiểu thêm:
- 10 bước trong quy trình tuyển dụng UX Designer
- Thư xin việc (Cover letter) UX Designer – Những mẹo và mẫu hay nhất có thể giúp bạn tìm được việc thiết kế UX
4. Cách tạo case study hoàn hảo
Sau đây là format tham khảo để tạo case studies:
Giới thiệu
- Tổng quát. Đưa ra mô tả cấp cao về dự án.
- Khách hàng. Khách hàng là ai? Giải pháp cho ai?
- Vai trò. Vai trò của bạn trong dự án là gì? (ví dụ là Trưởng nhóm thiết kế UX)
- Thời lượng. Dự án kéo dài bao lâu?
- Công cụ. Liệt kê các công cụ bạn đã sử dụng cho dự án. (ví dụ như XD, Whimsical,)
Xác định vấn đề
- Giả thuyết. Nêu vấn đề đã được giả thuyết và bắt đầu dự án.
- Tạo báo cáo vấn đề. Trong vòng một câu, hãy tóm tắt vấn đề bạn muốn giải quyết với thiết kế của mình.
- Khám phá. Đây là xác nhận ban đầu cho giả thuyết. Trong giai đoạn khám phá, nghiên cứu vấn đề của mình và tìm ra các giải pháp hiện có và các cơ hội có thể để cải thiện.
Thử nghiệm
- Các cuộc phỏng vấn. Giả sử đã có những cơ hội tiềm năng được phát hiện trong giai đoạn khám phá, thì bây giờ sẽ là lúc bạn nên phỏng vấn những khách hàng tiềm năng. Phác thảo số lượng người được phỏng vấn hoặc khảo sát, độ tuổi (nếu có), giới tính (nếu có) và thời lượng phỏng vấn.
- Mục tiêu. Cho biết những khám phá khác nhau đã cố gắng thực hiện trong các cuộc phỏng vấn.
Chỉ số đo lường & Cơ hội
- Bản đồ hành trình (Journey map). Bản đồ hành trình sẽ giúp khám phá những thông tin chi tiết này để điều chỉnh sự hiểu biết của bạn về những vấn đề khó khăn của người dùng. Trong bản đồ hành trình, hãy nhớ phác thảo các cơ hội trong hành trình của người dùng.
- Những cơ hội. Thông qua khám phá, nghiên cứu và phỏng vấn, sẽ phát hiện ra nhiều cơ hội tiềm năng cho sản phẩm của mình. Vạch ra 3 cơ hội chính mà thiết kế của bạn có thể giúp giải quyết.
Giải pháp
- Nêu giải pháp. Đưa ra giải pháp nêu rõ cách thiết kế sẽ giải quyết các vấn đề cốt lõi mà mọi người đang gặp phải.
Thiết kế
- Nguyên tắc thiết kế. Những nguyên tắc nào hướng dẫn các quyết định thiết kế?
- MVP. Chỉ ra giải pháp khả thi tối thiểu mà bạn đã tạo ra để giải quyết các vấn đề và cơ hội nói trên.
- Thu thập thông tin phản hồi. Bạn thu thập phản hồi về MVP như thế nào? (tức là thử nghiệm người dùng, hotjar, google analytics, khảo sát, v.v.)
- Kiểm tra thông tin chi tiết. Mô tả những phát hiện sau quá trình thử nghiệm thiết kế của bạn. Bao gồm cả báo giá từ người dùng.
- Lặp lại phản hồi. Quá trình thiết kế vốn dĩ lặp đi lặp lại và liên tục, vì vậy bạn nên kết thúc các nghiên cứu điển hình của mình bằng các thiết kế cập nhật dựa trên phản hồi ban đầu và đề cập đến các tính năng của lộ trình cho tương lai.
Kết luận
Tổng hợp những phát hiện, thách thức, trích dẫn của khách hàng và các ghi chú khác của bạn để tổng hợp tất cả lại với nhau.
5. Cách viết bản mô tả UX hiệu quả
Trong thế giới hoàn hảo, viết UX là nhiệm vụ của những người viết UX chuyên nghiệp. Tuy nhiên, các công ty thường dựa vào đội UX của họ để truyền tải thông điệp rõ ràng thay vì thuê người viết UX. Nếu nhóm của bạn có người viết UX, thật tuyệt! Nếu không, hãy xem một số mẹo bạn có thể sử dụng để truyền tải thông điệp rõ ràng đến người dùng. Nó cũng giúp bạn nâng cao kỹ năng của một UI UX designer.
- Viết tất cả các bản mô tả cùng một lúc. Bạn có thể dễ dàng viết bản sao trong khi thiết kế sản phẩm, nhưng điều này thường có thể dẫn đến các tông màu hỗn hợp và thiếu sự gắn kết trong thông điệp. Tạo một tài liệu cho tất cả các cảnh báo, tin nhắn, phương thức, văn bản giải thích, v.v.
- Giữ nó ngắn và ngọt ngào. Bản sao UX có khả năng bị loại bỏ dễ dàng bằng cách kiểm tra nhanh. Thay vì nói: “Chỉ thành viên Cao cấp mới có quyền truy cập vào tính năng này”, hãy nói “Tham gia trả phí để truy cập” sẽ ngắn gọn và đi vào trọng tâm.
- Giữ nó nhất quán. Khi giao tiếp với người dùng, hãy đảm bảo vẫn ở ngôi thứ nhất hoặc thứ hai, tùy theo người nào được chọn. Vì vậy, thay vì “chỉnh sửa vị trí của bạn trong tài khoản của tôi”, hãy nói “chỉnh sửa vị trí của bạn trong tài khoản của bạn”.
- Tránh thuật ngữ. Trừ khi là bạn đang thiết kế một ứng dụng cho các chuyên gia. Tránh các thuật ngữ dành riêng cho ngành như “buffering” hoặc “configuring”.
- Viết ở thì hiện tại. Thay vì nói: “tin nhắn đã được gửi”, hãy nói “tin nhắn vừa được gửi”.
- Bắt đầu với mục tiêu. Khi một cụm từ mô tả một mục tiêu và hành động cần thiết để đạt được, hãy bắt đầu câu bằng mục tiêu. Thay vì nói: “Kéo ảnh vào icon thùng rác để xóa ảnh khỏi album này”, hãy nói, “Để xóa ảnh khỏi album này, hãy kéo ảnh vào icon thùng rác.”
6. Làm sao để đưa ra các phản hồi về thiết kế
Đưa ra phản hồi mang tính xây dựng và phản hồi lại những phản hồi ít mang tính xây dựng là một kỹ năng quan trọng.
Bạn có thể tham khảo một số cách sau:
- Phải rõ ràng và cụ thể. “Hình ảnh bạn sử dụng trên trang careers không phản ánh rõ văn hóa của chúng tôi. Hãy thể hiện một hình ảnh vui tươi và thoải mái để kết nối tốt hơn với các ứng viên mà chúng tôi hy vọng sẽ thu hút ” nghe có vẻ cụ thể và rõ ràng hơn chỉ là câu phản hồi “hãy làm cho nó nổi bật”.
- Trình bày với nhà thiết kế vấn đề, không chỉ giải pháp. Mới đầu, có thể biết giải pháp và yêu cầu nhà thiết kế “thay vào đó hãy sử dụng hình ảnh này cho trang nghề nghiệp”. Tuy nhiên, khi chúng tôi bắt đầu bằng cách trình bày vấn đề, nhà thiết kế có thể hiểu tại sao chúng tôi muốn thay đổi đồ họa và có thể đề xuất những ý tưởng mà chúng tôi có thể chưa xem xét.
- Đưa ra các ví dụ chất lượng. Việc chia sẻ các patterns từ các công ty hoặc thiết kế khác trong danh mục đầu tư luôn hữu ích. Không phải vì nhà thiết kế nên sao chép những thứ này, nhưng nó có thể là một tài liệu tham khảo hữu ích về cách cải thiện thiết kế.
- Đừng quên những lời khen ngợi. Khi các nhà thiết kế nhận được một danh sách các nhận xét, sửa đổi, các vấn đề, v.v. có thể khiến bạn nản lòng. Đảm bảo cân bằng phản hồi bằng cách đưa ra các phần của trải nghiệm đang hoạt động thực sự tốt. Ví dụ: “Tôi thực sự thích cách bạn bố trí màn hình welcome. Tuy nhiên, phải mất một giây để nhận thấy button đăng nhập ở trên cùng. Có thể làm cho button đó nổi bật hơn không? ”
7. Lên kế hoạch testing khả năng sử dụng từ xa
Nhiều phương pháp kiểm tra người dùng khác nhau có thể được sử dụng để thu thập các trải nghiệm. Một số thử nghiệm phổ biến là usability testing, card sorting, tree testing, a/b testing và khảo sát phản hồi. Để hiểu các tùy chọn khác nhau để kiểm tra, bạn có thể tham khảo thêm Quantitative User-Research Methodologies: An Overview
Trong ví dụ dưới đây, chúng ta hãy xem một biểu mẫu có thể được dùng để thực hiện việc kiểm tra chất lượng.
Xác định mục tiêu
Bước đầu tiên trong việc lên kế hoạch test người dùng từ xa là xác định những gì bạn hy vọng đạt được từ thử nghiệm. Đưa ra mục tiêu rõ ràng trước khi bắt đầu.
Đơn giản như “khám phá xem quy trình giới thiệu có phải là trải nghiệm tốt nhất để giới thiệu người dùng mới hay không.”
1. Giả thuyết
Cũng giống như những thí nghiệm khoa học ở trường trung học cơ sở, bạn nên chuẩn bị một giả thuyết. Tiếp tục với ví dụ, giả thuyết “người dùng đánh giá cao trải nghiệm liền mạch khi chào đón họ vào ứng dụng và giải thích các tính năng thay vì tự khám phá”.
2. Câu hỏi sàng lọc
Các câu hỏi sàng lọc được hỏi cho những người tham gia tiềm năng để đảm bảo họ phù hợp với bài kiểm tra.
Ví dụ: nếu chúng tôi đang thử nghiệm một ứng dụng tập luyện, thì chúng tôi có thể muốn hỏi những câu hỏi như “hiện tại bạn có sử dụng bất kỳ ứng dụng tập luyện nào không?” hoặc “bạn có tập thể dục thường xuyên không?” Nếu người thử nghiệm trả lời không cho những câu hỏi này, họ sẽ không phù hợp và sẽ không tiếp tục thử nghiệm nữa.
3. Các tình huống
Trong bước này, cần xác định các tình huống khác nhau mà người thử nghiệm sẽ trải qua để giúp khám phá thông tin chi tiết. Ví dụ: một tình huống có thể đang thử nghiệm ứng dụng với tư cách là người dùng mới không có trải nghiệm giới thiệu, tự khám phá các tính năng của họ. Một tình huống khác có thể là thử nghiệm trải nghiệm tích hợp giúp mở ra người dùng mới thông qua ứng dụng và giải thích các tính năng.
4. Nhiệm vụ và câu hỏi cho từng tình huống
- Ban đầu – Thu thập kỳ vọng của người thử nghiệm và giải thích tình huống.
- Câu hỏi & nhiệm vụ – Giải thích các nhiệm vụ cần hoàn thành và xác định các câu hỏi sẽ được hỏi trong suốt bài kiểm tra.
- Câu hỏi cuối cùng – Hỏi trải nghiệm như thế nào so với mong đợi của họ. Nó có thể hữu ích để biết những gì họ thích, không thích.
5. Bảng câu hỏi cuối cùng
Thu thập những suy nghĩ cuối cùng và đặt bất kỳ câu hỏi cuối cùng nào để gắn kết tất cả các tình huống lại với nhau. Họ thích lựa chọn nào hơn? Bạn đánh giá thế nào về từng trải nghiệm trên thang điểm từ 1–5? Đảm bảo hiển thị lại hình ảnh để nhắc người thử nghiệm về từng tình huống.
6. Kết quả
Dưới đây là một số mẹo để thu thập kết quả tốt nhất từ thử nghiệm người dùng từ xa:
- Không phải tất cả người dùng đều am hiểu công nghệ, vì vậy điều quan trọng là phải tạo các thử nghiệm không yêu cầu các tác vụ quá phức tạp.
- Đặt câu hỏi sàng lọc chi tiết để đảm bảo có được người thử nghiệm phù hợp. Hoặc tốt hơn, tuyển dụng người dùng hoặc khách hàng mục tiêu của chính công ty.
- Luôn sử dụng cụm từ đơn giản, dễ hiểu, hạn chế sử dụng các cụm từ thuật ngữ kỹ thuật.
- Theo Neilson Norman Group,, chỉ cần kiểm tra 5 người dùng để phát hiện ra 85% các vấn đề về khả năng sử dụng.
8. Cách thiết kế để phát triển
Khi thiết kế để phát triển, có những cân nhắc, ràng buộc và thực tiễn tốt nhất mà chúng ta cần lưu ý trong suốt quá trình. Một số bước để đảm bảo việc chuyển giao liên tục và dễ dàng hơn cho các developers:
- Xem xét các mẫu có thể tái sử dụng trừ khi các thiết kế độc đáo thêm giá trị thực. Trong quá trình thiết kế, chúng ta nên kiểm tra thiết kế của mình khi giới thiệu các quy ước, phần tử, animations, v.v. Nếu những bổ sung này không mang lại giá trị bổ sung cho người dùng, thì chúng nên được xem xét lại. Các yếu tố này bao gồm; buttons, inputs, screen layouts, flows, v.v., nên được sử dụng lại càng nhiều càng tốt để có tính nhất quán và tiết kiệm thời gian.
- Tận dụng các công cụ cộng tác như Zeplin để có các đoạn mã, kiểm tra, tải xuống nội dung dễ dàng. Figma, InVision, Adobe hoặc Marvel cũng sẽ hoạt động tốt.
- Tránh giới thiệu các tính năng mới, không cần thiết. Không giới thiệu các tính năng sẽ làm phức tạp quá trình phát triển trong khi không mang lại giá trị bổ sung cho ứng dụng. Tập trung vào mục tiêu kinh doanh, nhu cầu của người dùng, phạm vi dự án, dòng thời gian và cách sản phẩm được phát triển sẽ giúp ưu tiên những tính năng nào cần thiết.
- Sắp xếp tất cả các màn hình thành các phần trong Zeplin và tệp thiết kế.
- Đặt tên cho tất cả các bảng vẽ theo thứ tự và thích hợp để dễ khám phá và hiểu.
- Đánh assets để export.
- Duy trì một kho lưu trữ các màn hình cũ và đảm bảo tất cả các màn hình mới đều được cập nhật.
9. Cách tạo low fidelity wireframes
Wireframing với một công cụ như Whimsical nhanh hơn và nhẹ hơn để đưa các ý tưởng lại với nhau và có được cảm giác về bố cục và hệ thống phân cấp trong thiết kế. Thật khó để yêu một thiết kế khi nó chỉ là một wireframe.
Whimsical có predefined guard rails được xác định trước giúp dễ dàng thêm các thành phần và xác định hệ thống phân cấp, bố cục và nội dung của màn hình – nhưng không bị phân tâm bởi các chi tiết nhỏ. Giúp bắt kịp với màu sắc, chọn kiểu chữ, thêm biểu tượng, v.v.
Sự đơn giản sẽ giúp bạn tập trung vào trải nghiệm tổng thể và không bị rối bởi những chi tiết nhỏ như khoảng cách và màu sắc.
Bạn có thể xe thêm về low fidelity trong bài viết này: Những câu hỏi giúp bạn thành công khi phỏng vấn vị trí UX Designer
10. Làm sao để trở thành designer giỏi hơn mỗi ngày
Sẽ luôn có các xu hướng mới, công cụ, thư viện thiết kế, startups, cập nhật sản phẩm và tất cả những thứ khác chắc chắn sẽ giúp bạn trở thành nhà thiết kế UI UX giỏi hơn.
Dưới đây là một số điều bạn nên làm để cải thiện kỹ năng thiết kế của mình hàng ngày:
- Các dự án phụ. Các dự án phụ giúp bạn phát hiện ra sở thích của mình đối với sản phẩm thiết kế ngay từ đầu. Nếu chỉ dựa vào công việc thiết kế chính tại công ty, thì bạn đang hạn chế tiềm năng phát triển của mình. Nếu bạn có thời gian rảnh vào các buổi tối và cuối tuần, hãy thử bắt tay vào một ý tưởng mà bạn thấy hứng thú. Các dự án phụ rất có ích cho profiles cá nhân và giúp bạn làm việc theo đam mê mà không liên quan tới yêu cầu của khách hàng.
- Chú ý. Trong quá trình trải nghiệm các thiết kế tốt từ các thương hiệu và sản phẩm lâu đời, bạn nên chú ý và ghi chép lại sẽ giúp ích cho tài liệu tham khảo sau này của mình.
- Phỏng vấn. Ngay cả khi bạn hài lòng với công việc của mình. Phỏng vấn tại các công ty khác có thể tiết lộ rất nhiều về những lỗ hổng trong kiến thức của chính bạn hoặc những kỹ năng hiện đang được yêu cầu. Thử thách thiết kế cũng có thể là một bài tập tuyệt vời giúp bạn rèn luyện kỹ năng sáng tạo.
- Đọc tài liệu hệ thống thiết kế. Đọc tài liệu thiết kế từ các hệ thống thiết kế phổ biến là một cách tuyệt vời để có thêm kiến thức chiến thuật UI / UX. Một số hệ thống thiết kế yêu thích bạn có thể tham khảo đó là IBM Carbon, Zendesk Garden, Workday Canvas, Atlassian, và Material .
Bài gốc được đăng trên uxdesign của Danny Sapio. Bạn cũng có thể tìm nhiều bài viết bổ ích của cùng tác giả vể UI UX design trên Medium
Bạn có biết?
tham gia cộng đồng ITguru trên Linkedin, Facebook và các kênh mạng xã hội khác có thể giúp bạn nhanh chóng tìm được những chủ đề phát triển nghề nghiệp và cập nhật thông tin về việc làm IT mới nhất
Linkedin Page:
Facebook Group:
cơ hội việc làm IT : ITguru.vn
