IA (Information Architecture - IA) là một kế hoạch chi tiết của cấu trúc thiết kế website được tạo từ sơ đồ task flow (chuỗi di chuyển và tương tác chung) và wireframe (cấu trúc). Thông tin, nội dung sản phẩm sẽ được ghi lại chi tiết trong giai đoạn nghiên cứu. Tuy nhiên, chúng ta vẫn cần sự trợ giúp trong việc lọc và sắp xếp lượng dữ liệu thu được. Vậy nên, MangoAds xin giới thiệu đến bạn các kỹ thuật giúp xây dựng IA trong phát triển website (website development) trong bài viết dưới đây.

Bản đồ thực tế (Reality mapping)

Reality mapping là một kỹ thuật giúp bạn hiểu và ghi chép lại các task flow hiện có của một website, hay ứng dụng. Nó khá giống việc phân loại thẻ, nhưng cung cấp rõ ràng, chi tiết hơn.

Mục đích của việc này nhằm tổng hợp các cấu trúc của sản phẩm. Trong reality mapping, bạn nên ghi lại các bước cần làm để hoàn thành sản phẩm, các ghi chú, ý tưởng mới,...

Reality mapping được tạo ra nhằm giúp bạn hiểu về website mà khách hàng yêu cầu thiết kế lại. Bạn ghi lại nội dung phục vụ cho các mục đích khác nhau. Từ công việc này, sẽ giúp bạn dễ dàng hơn trong việc tạo wireframe cho website.

Kỹ thuật task flow

Có nhiều thể loại của biểu đồ task flow, dù vậy, chúng đều có cùng mục tiêu cốt lõi là phác thảo lại reality mapping thành một quá trình. Dưới đây là các kỹ thuật task flow thường được dùng.

Sơ đồ chi tiết trang

Sơ đồ này sẽ phác thảo lại từng bước cần làm khi bạn thực hiện một nhiệm vụ trên website. Khi vẽ sơ đồ chi tiết trang, bạn cần sử dụng những khối hình khác nhau và các ký hiệu được thống nhất từ trước để giải thích các bước và nếu ra những lựa chọn người dùng rồi lọc ra.

Sơ đồ sitemap

Sơ đồ sitemap đơn giản hơn, chỉ sử dụng các ô hình chữ nhật và các mũi tên để thể hiện những lựa chọn của người dùng, khi họ trải nghiệm trên website. Đây là phương pháp thường được sử dụng nhất trong kỹ thuật task flow.

Sơ đồ task flow dựa trên đối tượng khách hàng

Phác thảo task flow dựa trên nhóm đối tượng khách hàng đã được xác định sẵn, sẽ giúp bạn có được nhiều thông tin hơn về trải nghiệm người dùng. Họ mong muốn gì khi truy cập vào website của bạn, và thực hiện những tác vụ nào đó.

Để tạo sơ đồ này, bạn cần gán cho mỗi đối tượng một màu sắc khác nhau để phân biệt các thao tác mà họ thực hiện trên website của bạn. Sau đó, minh hoạ hoạt động của họ bằng sơ đồ sitemap.

Bản đồ tương tác

Khác với các phương pháp trên, bản đồ tương tác được thể hiện bằng các bức ảnh chụp màn hình, các mockup (file hình ảnh được thiết kế sẵn) hoặc wireframe.

Kỹ thuật này thường được dùng để ghi nhận layout của website khi thực hiện thiết kế lại (web redesign). Chi tiết thêm vào có thể giúp phác thảo một nhóm các tương tác cơ bản trước để mọi người có thể dễ dàng hiểu được ngay khi nhìn vào bản đồ của bạn.

Bản prototype

Prototype là một dạng cơ chế quan trọng để thực hiện mô hình OOP của Javascript. Đây là phương pháp hiệu quả và tiết kiệm dùng để kiểm tra các wireframe. Để thực hiện, bạn cần in các wireframe ra giấy và phát cho tester dùng thử các tính năng của chúng, như thể họ đang sử dụng sản phẩm thực thụ vậy.

Lợi ích của kỹ thuật này là bạn có thể trực tiếp lấy được ý kiến của người dùng, bằng việc cho phép họ gạch bỏ hoặc thêm ý kiến trên bản prototype đã được phát. Tuy nhiên, việc sử dụng phương pháp này nên được áp dụng với các website nhỏ, ít thao tác và ít tương tác phức tạp để dễ quản lý các bản in hơn.

Đối với các website phức tạp chứa nhiều thao tác và lựa chọn, bạn nên sử dụng các ứng dụng tạo wireframe như Axure, Omnigraffle, và Visio để có thể thêm link vào bất kỳ website nào. Với các ứng dụng này, khi người dùng click vào một tác vụ nào đó, họ sẽ được di chuyển đến trang đó và trải nghiệm. Dù việc này không dễ ghi chú như trên bản mẫu giấy, nhưng có thể giúp bạn dễ quản lý tài liệu hơn.

Kết luận

Áp dụng các kỹ thuật này vào trong thiết kế website sẽ giúp bạn dễ dàng hình dung được bức tranh tổng quát về những việc cần làm cho website đó. Tùy từng dạng website/ ứng dụng cũng như độ phức tạp của chúng để chọn một kỹ thuật phù hợp. Hy vọng những kỹ thuật mà MangoAds chia sẻ trên đây sẽ giúp ích cho bạn khi thực hiện phát triển website (website development).