Khoảng một năm trước, khi làm việc tại một cơ quan kỹ thuật số, tôi đã được trao giải cho dự án dẫn dắt quá trình thiết kế UX của chúng tôi. Mười hai tháng sau, bài báo này chia sẻ suy nghĩ và kinh nghiệm của tôi về cách tư duy giúp nâng cao hiệu quả trong quá trình thiết kế UX. 

Liên kết Thử thách

Ở nơi tôi làm việc, wireframes đã được tạo ra và sử dụng trên một loạt các dự án. Tất cả các bên liên quan (cả nội bộ lẫn bên ngoài) hiểu được mục đích của wireframes và đánh giá cao giá trị của chúng trong việc định hình và mô hình kinh nghiệm số.

Tuy nhiên, cho đến thời điểm này, thay vì đưa ra một chiến lược để thúc đấy tiến trình, cơ quan đã khuyến khích các nhà thiết kế UX “làm việc theo cách của họ.” Mặc dù với cách này đã giúp các nhà thiết kế UX làm việc với tốc độ nhanh hơn, sử dụng các công cụ ưa thích của họ, tuy nhiên nó đã bắt đầu tạo ra các vấn đề.

Tạo ra liên kết mới

Khi nhóm thảo luận vấn đề này, tôi nhanh chóng lọc ra từng cột mốc quan trọng trong quá trình wireframing trên một bảng. Chúng tôi thảo luận về các cơ hội tăng cường tiềm năng cho từng cột mốc. Để từng cột mốc được chấp nhận, nó phải đáp ứng một trong các tiêu chí sau:

  • Tiết kiệm thời gian thiết kế UX.
  • Cải thiện tính nhất quán của wireframe.
  • Tạo thuận lợi cho việc làm việc nhanh.

Các cải tiến mà chúng tôi đưa ra như sau:

Nguồn: smashingmagazine.com

Tạo liên kết bản tệp Chuẩn

Lợi ích: Tiết kiệm thời gian, cải thiện tính nhất quán.

Bằng cách giới thiệu một tệp mẫu, chúng tôi cảm thấy chúng tôi có thể giúp tiết kiệm thời gian thiết kế UX trong quá trình thiết lập ban đầu của dự án. Tệp mẫu sẽ lưu lại nhà thiết kế UX khỏi phải hoàn thành các tác vụ thông thường đi cùng với việc thiết lập một dự án mới (tạo ra các chế độ xem phản hồi, hệ thống lưới, cấu trúc tài liệu, changelogs, v.v.).

Chúng tôi cũng cảm thấy rằng việc tạo một tệp mẫu sẽ là nền tảng cơ sở hình thành nên tệp dự án tiếp theo. Chúng tôi tin rằng tập tin mẫu sẽ thiết lập một nền móng cơ bản và cấu trúc cho tài liệu wireframe và do đó thúc đẩy tính nhất quán của các dự án.

Một tệp mẫu bao gồm:

Trang giới thiệu

Giải thích các dữ liệu liên quan đến wireframe và giới thiệu changelog.

Chủ phần

Danh sách tất cả các thành phần và trang được nhóm vào các danh mục, có liên kết trực tiếp đến các trang và các thành phần cấp thấp hơn (biển báo, biểu mẫu, v.v …).

Cấu trúc tài liệu

Các thư mục cho từng loại trang wireframe, giúp các bên liên quan dễ dàng phân biệt bố cục trang từ các thành phần và quá trình của người dùng từ sơ đồ trang web.

Các điểm ngắt và hệ thống lưới đặt trước

Thống nhất về một tập hợp các điểm ngắt thông thường cho tệp mẫu của chúng tôi có lẽ là nhiệm vụ khó nhất để hoàn thành. Sau một số cuộc tranh luận kéo dài với nhóm UX và các bên liên quan nội bộ khác, chúng tôi đã đi đến kết luận sau:

  • Mục đích của wireframe là truyền đạt chức năng trang, phân cấp thị giác và tương tác.
  • Các điểm ngắt được trình bày trong các wireframe sẽ chỉ mang tính đại diện, và được xem xét lại trong giai đoạn thiết kế.

Giới thiệu một liên kết ngôn ngữ thiết kế

Lợi ích: Tiết kiệm thời gian, cải thiện tính nhất quán, tạo điều kiện cho việc làm việc nhanh.

Sự nâng cao tiếp theo và quan trọng nhất mà chúng tôi nhận ra là ý tưởng giới thiệu ngôn ngữ thiết kế wireframe của riêng chúng ta.

Các yếu tố điển hình mà bạn mong đợi sẽ thấy trong một ngôn ngữ thiết kế là:

  • Hệ thống lưới
  • Hướng dẫn trợ năng
  • Nguyên tắc thiết kế
  • Typography và biểu tượng
  • Hướng dẫn tương tác
  • Các thành phần UI

Để làm cho các nhà thiết kế UX dễ dàng liên kết với ngôn ngữ thiết kế, chúng tôi muốn biến ngôn ngữ thiết kế của chúng tôi thành một thư viện wireframe. Các nhà thiết kế UX có thể sử dụng khi họ làm việc, cho phép họ tạo ra các wireframes phản ứng nhanh.

LẬP HƯỚNG THIẾT KẾ DỰ ÁN

GIỚI THIỆU LINK

Là một nhóm UX, chúng tôi cần thiết lập một ngôn ngữ thiết kế để chúng tôi có thể làm việc với tốc độ và đảm bảo tính nhất quán của khung dây.

THIẾT BỊ XÂY DỰNG

Sử dụng các trang web:

  • Google
  • BBC
  • IBM

Nguồn: smashingmagazine.com

LÀM VIỆC TRONG NHÓM CÔNG NGHỆ LIÊN KẾT

Một khi bạn đã phác họa từng thành phần, hãy đặt nó lên tường. Khi mọi người đã hoàn thành các thành phần của chúng, hãy dành thời gian để sắp xếp chúng thành các chủ đề phổ biến (Điều hướng, Kinh nghiệm, Chuyển đổi, Duyệt) loại bỏ bất kỳ bản sao nào khi không cần thiết.

REVIEW LINK

Một khi bạn có danh sách các thành phần UI, hãy nhóm lại và tập trung lại vào mỗi mục và lập ra một hệ thống lập trình như:

  • Chúng ta nên sử dụng nó ở đâu?
  • Làm thế nào để nó hoạt động?
  • Nó chứa thông tin gì?
  • Các chức năng, hạn chế và hạn chế chính của nó là gì?
  • Nó sẽ hiện thị như thế nào ở màn hình có kích thước nhỏ hơn?

Vào cuối của hội thảo, bạn sẽ có một danh sách các thành phần UI chung mà bạn có thể sử dụng để xây dựng ngôn ngữ thiết kế của bạn. 

Viết bởi