Phân biệt Information Architecture, Menu Structure và Screen List

Share

Khi các công ty lên kế hoạch một dịch vụ họ muốn cung cấp cho khách hàng, họ cần cân nhắc những câu hỏi như Dịch vụ này cần những màn hình nào hay Thông tin của các màn hình (mối quan hệ giữa các màn hình, thuộc tính và chức năng của từng màn hình, v.v) như thế nào. Dựa trên nền tảng là thông tin về các màn hình như thế này, giai đoạn tiếp theo được thực hiện sẽ là thiết kế màn hình, và thông thường Information Architecture (IA – Kiến trúc Thông tin) được xác định trong giai đoạn này. Tuy nhiên, khi tìm kiếm các phương pháp soạn Information Architecture, người lên kế hoạch dự án sẽ thường thấy những tài liệu có tiêu đề và nội dung liên quan đến Menu Structure (Cấu trúc Menu) hay Screen List (Danh mục Màn hình). Chính vì vậy, có nhiều trường hợp suy nghĩ rằng Chỉ cần soạn như tài liệu này là được rồi và cứ vậy soạn ra một tài liệu không hề liên quan đến công việc của mình.

Mặc dù cấu trúc của Information Architecture, Menu Structure và Screen List khá tương tự nhau, mỗi tài liệu lại có mục đích khác nhau. Trong bài đăng này, hãy cùng tìm hiểu và phân biệt mục đích của ba tài liệu cần có trước khi thiết kế màn hình: Information Architecture, Menu Structure và Screen List, để tìm ra tài liệu phù hợp với từng tình huống bạn gặp.

Information Architecture là gì?

Đây là tài liệu thiết kế và xác định cấu trúc thông tin của các màn hình và menu cần thiết khi xây dựng một trang web hay ứng dụng. Thông thường, từ việc cấu trúc thông tin, ta sẽ biết được các luồng màn hình cần thiết để người dùng có thể đi đến một màn hình nào đó. Việc xác định mối liên kết giữa các màn hình và phân loại chúng theo từng nghiệp vụ sẽ mang đến cho bạn một cái nhìn tổng thể về trang web hoặc ứng dụng.

Soạn Information Architecture như thế nào?

IA cho quy trình gia nhập bảo hiểm (Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders)

Độ sâu

Độ sâu màn hình (depth) là trọng tâm của cấu trúc thông tin. Bắt đầu với độ sâu bằng 0 ở màn hình chính, độ sâu 1, 2, 3 sẽ được xác định lần lượt theo các luồng màn hình. Độ sâu càng cao thì người dùng càng cần thực hiện nhiều bước để đạt được mục tiêu cuối cùng. Chính vì vậy, có nhiều lời khuyên rằng không nên làm cho độ sâu có giá trị lớn khi xây dựng dịch vụ. Tuy nhiên, chắc chắn là vẫn có những màn hình ta nhất định phải có.

Hình thức

Hãy phân biệt hình thức các màn hình. Thông thường, chúng ta chia thành các hình thức như trang (page), popup, tab, link, v.v để có thể dễ dàng biết được dịch vụ này cần những loại màn hình nào. 

Xác định những màn hình cần phát triển

Khi xây dựng một dịch vụ mới, bạn cần xác định thứ tự ưu tiên phát triển. Hãy xác định đâu là màn hình cần phát triển và đâu chỉ là màn hình nội dung đơn thuần, rồi định ra thứ tự ưu tiên cho chúng. Việc này sẽ giúp bạn quản lý dự án một cách hiệu quả hơn nhằm đáp ứng thời gian và ngân sách dự kiến.

Ngoài ra

Bạn có thể thêm các điều kiện về màn hình như có cần đăng nhập hay không, có khả năng bị xóa, thay đổi hay có cần thêm màn hình nào hay không, v.v tùy theo mục đích viết IA của mình.

Nên sử dụng Information Architecture khi nào?

  • Khi phát triển dịch vụ phức tạp và cần thể hiện số lượng màn hình lớn
  • Khi cần xác định thứ tự ưu tiên trước giai đoạn thiết kế màn hình trong dự án xây dựng dịch vụ mới
  • Khi các nhà thiết kế và nhà phát triển không thể nắm bắt một cách chính xác mối liên hệ giữa các màn hình cần thiết 

Menu Structure là gì?

Đây là tài liệu thị giác hóa cấu trúc menu, giúp người đọc dễ dàng nắm bắt toàn bộ các menu và dịch vụ được cung cấp trong trang web hoặc ứng dụng. Bạn có thể thấy Menu Structure rất tương tự với tài liệu IA được giới thiệu ở phần trước. Tuy nhiên, khác với IA, Menu Structure được soạn thảo dựa trên đơn vị menu và dịch vụ nên có thể giúp người đọc nắm bắt cấu trúc một cách nhanh chóng và đơn giản hơn. Ví dụ, đối với những trang web hoặc ứng dụng có quy mô lớn, ta có thể gọi những màn hình nhìn thấy được trên sitemap khi mở GNB (Global Navigation bar) là một Menu Structure. 

Soạn Menu Structure như thế nào?

Ví dụ một Menu Structure (Tham khảo menu trang Báo Mới, truy cập ngày 01/08/2022. Các nhãn thêm mới/xóa/chỉnh sửa được đánh dấu ngẫu nhiên)

Độ sâu

Vì đây là tài liệu được soạn dựa trên đơn vị cơ bản là menu hoặc dịch vụ, nên bạn không cần soạn đến cả những màn hình cuối cùng. Hãy lấy trường hợp màn hình đăng nhập làm ví dụ. Khi soạn IA, bạn cần soạn từ khi bắt đầu đăng ký thành viên cho đến bước cuối cùng, từ màn hình quên ID/mật khẩu cho đến khi người dùng tìm lại được ID hoặc thay đổi được mật khẩu. Tuy nhiên, đối với Menu Structure, bạn chỉ cần soạn đến màn hình quên ID/quên mật khẩu và đăng ký thành viên. Thông thường, độ sâu tối đa trong một tài liệu Menu Structure là 3. 

Nhãn 

Việc sử dụng các nhãn (label) với các màu sắc khác nhau theo nhiều trạng thái – chẳng hạn như thêm, xóa, sửa – có thể giúp các bên liên quan hiểu rõ hơn về công việc. Bạn cũng có thể liệt kê và quản lý danh sách các nhãn trong một sheet riêng biệt.

Tham khảo sitemap

Sitemap trang web Báo Mới (truy cập ngày 01/08/2022)

Một trong những Menu Structure chúng ta thường thấy chính là sitemap của các website. Sitemap là màn hình liệt kê tất cả các đường dẫn (link) để người dùng có thể xem tất cả các dịch vụ hoặc tìm thấy dịch vụ cần thiết một cách nhanh chóng. Vì sitemap và Menu Structure giống nhau ở điểm chỉ cần thể hiện đến cấp độ dịch vụ, bạn có thể tham khảo các sitemap khi soạn thảo tài liệu của mình. 

Nên sử dụng Menu Structure khi nào?

  • Khi cần nắm bắt một cách tổng quan tất cả những thay đổi trong cả trường hợp xây dựng dịch vụ mới và làm mới dịch vụ sẵn có
  • Trường hợp dịch vụ có quy mô lớn: Khi cần xem xét trang web hoặc ứng dụng một cách tổng quan, trước khi làm việc với IA 
  • Trường hợp dịch vụ có quy mô nhỏ: Khi cần thay thế một phần vai trò của IA trong các tài liệu như Screen Design hay IA để phân biệt các màn hình, cung cấp thông tin về cấu trúc và tính năng của màn hình

Screen List là gì?

Tương tự IA, đây là tài liệu liệt kê tất cả các màn hình dưới dạng danh sách. Nếu chỉ nhìn vào hình thức, bạn có thể nghĩ rằng Vậy thì soạn IA là được rồi, có nhất thiết phải cần đến Screen List nữa không? Tuy nhiên, trên thực tế, nếu bạn là một nhà kế hoạch và thực hiện các dự án ở các agency, bạn sẽ thường phải soạn thảo riêng hai tài liệu IA và Screen List. Thông thường, dự án agency được tiến hành theo cách sau: mỗi màn hình có một ID riêng và được phát triển theo các bước: kế hoạch (plan) – thiết kế (design) – xuất bản (publish) – phát triển (develop). Do đó, so với việc xem một tài liệu với nhiều thông tin chi tiết cho mỗi màn hình như IA, việc kết hợp xem tài liệu Screen List với một sơ đồ luồng của các màn hình sẽ có tính dễ đọc cao hơn và giúp bạn triển khai công việc một cách hiệu quả hơn.

Ví dụ Screen List cho quy trình yêu cầu bảo hiểm bồi thường (Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders)

Soạn Screen List như thế nào?

Độ sâu

Độ sâu được tạo ra với cùng một phương pháp như khi soạn IA. Tuy nhiên, mục đích cuối cùng của Screen List là nhất quán ID và tên màn hình, do đó các bên liên quan vẫn hoàn toàn có thể nắm bắt các màn hình chỉ với thông tin Location (Bread crumb, flow), cho dù không có thông tin độ sâu.

Screen ID

IA cho quy trình gia nhập bảo hiểm (Nguồn ảnh: Tác giả / Dịch & chỉnh sửa: Metacoders)

ID được đặt để phân biệt các màn hình với nhau. Quy tắc đặt ID cũng rất đa dạng, trong đó có một số quy tắc phổ biến như sau:

  • Viết tắt tên menu có độ sâu 1~2: Viết tắt tên menu lớn bằng 2 ký tự 
  • Mã phân biệt độ sâu: Phân biệt các độ sâu bằng số để thể hiện quy tắc giữa các màn hình
  • Ký tự phân biệt loại màn hình: Phân loại hình thức các màn hình, tương tự khi soạn IA

Thêm vào đó, khi quy định các quy tắc như trên, bạn cần chú ý hai vấn đề quan trọng sau:

  • Các ID không được trùng nhau
  • Không được sử dụng lại ID cũ sau khi thay đổi (chỉnh sửa hoặc xóa)

Lý do là nếu sử dụng các ID trùng nhau, bạn sẽ gặp khó khăn khi tìm kiếm trong một lượng lớn các màn hình, và nếu sử dụng lại các ID cũ thay vì xóa chúng, bạn sẽ có thể gặp các giá trị trùng nhau khi xác định mã phân biệt độ sâu.
Mẹo: Hãy sử dụng hàm CONCATENATE khi quản lý ID màn hình bằng Excel.

Nên sử dụng Screen List khi nào?

  • Khi cần khiến nhiều bên liên quan hiểu về một số lượng màn hình lớn
  • Khi cần tăng tính dễ đọc của tài liệu vì IA có quá nhiều thông tin

Sử dụng tài liệu đúng lúc đúng chỗ để nâng cao hiệu quả

Nhà kế hoạch cần hiểu rõ những tài liệu đã được điển hình hóa trong lĩnh vực IT để có thể nâng cao hiệu quả công việc bằng cách lựa chọn sử dụng những tài liệu phù hợp với môi trường doanh nghiệp và mục đích công việc. Đặc biệt, Information Architecture, Menu Structure và Screen List có cấu trúc tương đối giống nhau nên có thể khiến các nhà kế hoạch cảm thấy rối. Chúng tôi hy vọng bài viết này sẽ hữu ích với những nhà kế hoạch đang làm việc trong môi trường chưa có một quy trình chuẩn và những người đang thiếu thông tin về hình thức hay mục đích của các loại tài liệu. Tuy nhiên, xin lưu ý rằng thể thức và mục đích của tài liệu còn phụ thuộc vào từng công ty, do đó không thể khẳng định rằng những nội dung kể trên mới là đáp án chính xác.


The original article: IA, 메뉴구조도, 화면목록이 헷갈린다면?
The translated article above belongs to the author Jung Byung Joon (정병준) and yozmIT (요즘IT). Metacoders commits not to use this content for any commercial purpose.