brunch

You can make anything
by writing

C.S.Lewis

by UX George May 16. 2023

정보구조 작성할 때 적당한 카테고리의 갯수는?

정보구조 디자인 올바르게 하는 법

#CardSorting #InformationArchitecture #WebDesign #AppDesign

이 주제에 관심이 있으시다면, 꼭 읽어보세요!




여러분은 IA를 작성해 보신 적이 있나요? 어떤 과정을 거쳐서 작성하셨나요?

사용자들의 참여가 다양해지고 정보의 형태가 다양해짐에 따라서 환경과 맥락을 반영할 수 있는 정보 구조 디자인은 더욱 중요해집니다. 오늘은 디지털 프로덕트를 만드는 과정에서 많은 기획자나 디자이너가 시도하고 계시는 정보 구조 디자인 절차에 대해서 알려드리려고 합니다. 만약 IA를 작성해 보신 경험이 있다면, 아래에서 제시하고 있는 방법과 얼마나 다른지 비교해봐도 좋아요 : )



1단계 : 원자료의 수집

디지털 제품 혹은 서비스를 디자인하기 위해서 디자인 자료, 유사 제품 및 서비스 자료 등으로부터 원자료를 찾을 수 있습니다. 디자인 자료 중 현재 개발하고 있는 시스템이 사용자에게 어떤 심성 모형을 구축해 줄 것인지를 결정해주는 콘셉트 디자인 중 메타포에 집중할 필요가 있습니다. 메타포 제원으로 표현되는 과업, 방법, 모양 등이 중요한 기초 자료가 되고 메타포에서 얻을 수 있는 속성, 작동, 어구, 이미지, 종류, 음향 등을 참고하면 적당한 정보구조 디자인을 할 수 있습니다. 또 동일한 분야에 있거나, 비슷한 가치를 제공하고자 하는 유사 제품이나 서비스를 선정하고, 그 내용을 분류하고 분량을 파악하는 작업을 통해 도움을 얻을 수도 있습니다.


특히 분석 자료를 통해서는 페르소나 모형과 사용자 프로파일과 같이 사용자 분석 결과 중 사용자가 제품이나 서비스와 어떤 상호작용을 하고 어떤 특성을 지닌 정보를 주고받아야 하는지 파악할 수 있습니다. 또 사용 시나리오에서 부정적이거나 긍정적인 시나리오를 묘사하는 문장이나, 맥락분석을 통해 도출된 맥락 비교표에서 힌트들을 얻을 수 있습니다.


IA를 만들 때 참고할 수 있는 사용자 페르소나와 사용 시나리오 사례 [1],[2]



2단계 : 자료의 분류

다음은 수집된 여러 유형의 자료를 통해 정보의 성격을 판별하고, 어떤 분류 기준이 적합한지 선택한 다음 기준에 맞춰 분류하는 단계를 거칩니다. 자료를 분배할 때는 사용자가 정보를 기억하기 편리하게 분배해야 하고, 사용자가 이용하기 편리하게 분배해야 하며, 사용자가 전체 분류 기준을 이해하기 쉽게 분류해야 합니다. 사용자의 입장에서 정보를 분류하기 위해 카드소팅(card sorting) 방법을 많이 사용하고 있습니다.


<카드소팅 하는 법>

자료가 적힌 인덱스 카드를 사용자에게 주고 큰 테이블 위에 주어진 인덱스 카드를 가장 적절한 방법으로 군집화합니다.

모인 군집에 보편적인 이름을 붙여 레이블링 시스템(labling system)을 구축합니다.

각 군집에 속하는 자료들을 우선 순위에 따라 배열합니다.

위 단계를 여러 번 거친다.


자유도가 높은 상황에서 사용자가 원하는 형식으로 자료를 구분하도록 하는 사례도 있습니다. 바로 휴대폰의 폴더 시스템인데요, 사용자의 선호를 반영해 연관성이 높은 어플리케이션들을 하나의 폴더에 위치해서 정보의 활용을 높일 수 있습니다.


사용자가 원하는대로 어플리케이션(정보)을 구조화하도록 한 스마트폰의 폴더 시스템


그런데 카드소팅을 할 때 누락된 군집(카테고리)이 있을 때 즉각적인 피드백이 있을 수 없기 때문에 자칫 잘못 분류될 수도 있습니다. 유효한 군집을 만들기 위해서 몇 개의 하위 카드가 있어야 하는지에 대한 실무자들의 의견은 분분한데요, 컴퓨터 시뮬레이션을 통해서 분류하는 군집의 개수에 따라 적절한 하위 카드 수가 어느 정도 되는지를 살펴본 연구가 있습니다.


군집 유형별로 카드들이 균등하게 분포되어있는 환경에서는 다음과 같은 실험 결과를 보였습니다. 개수가 6개일 경우 카드의 갯수가 30개 정도로 적을 때나 100개 정도로 많을 때나 올바르게 분류하는 데에 걸리는 시간이 크게 차이 나지 않았습니다. 그러나 카테고리의 개수가 많아질수록 카드의 개수가 적을 때 분류하는 시간과 많을 때 분류하는 시간 간의 차이가 벌어지는 것을 확인할 수 있었습니다.


균등 분포 카테고리에서의 비율(하단 기재된 논문 출처)


보다 자연적으로 발생하는 분포를 설명하기 위해 균등하게 분포되지 않은 환경에서 카테고리의 개수에 따라 구성 비율이 어떻게 달라지는지도 확인했습니다. 빈도가 가장 높은 범주는 항목의 대부분을 구성하고, 그다음에는 항목 수가 훨씬 적은 범주의 긴 꼬리가 뒤따릅니다. 이 분포는 실제 웹 카테고리의 분포와 비슷한 추세를 가지고 있습니다.


Zipf 분포와 실제 웹 카테고리에서의 분포(하단 기재된 논문 출처)


이 분포를 가정한 분류법에 대해 시뮬레이션을 시행한 결과, 군집의 개수가 많아질수록 적당히 분류하기 어려울 수 있음을 확인할 수 있습니다. 예를 들어, 앞선 균등 분포에서는 12개의 군집일 때 60장의 카드 표본은 약 90%의 시간을 포함하나, 자연 분포에서 12개 군집일 때 60장의 카드 표본은 약 40%의 시간만 포함합니다. 이런 연구 결과를 참고하여 일반적인 분포에서 50개의 카드는 일반적으로 8개 이하의 범주가 있는 분류법을 나타내는 데에 적합하다는 결론을 낼 수 있습니다. 특히 더 많은 범주가 필요하다면 총 카드 표본 크기를 늘리는 것을 고려해 볼 수 있습니다.



3단계 : 정보구조 정하기

카드 소팅을 통해 자료를 분류했다면 정보의 계층 구조의 깊이와 넓이를 결정하고, 깊이와 넓이의 차원을 따라 구조화된 정보를 접근하는 네비게이션을 제공하고, 이런 깊이와 넓이를 어떻게 표현할지 정해야 합니다. 깊이를 줄이면 넓이가 늘어나고 한 화면에 들어가는 정보의 양이 지나치게 많아져 사용자에게 혼란을 야기시키고 너무 많은 선택을 강요하게 됩니다. 반면 넓이가 줄어들면 깊이가 늘어나기 때문에 단계 수가 증가하고 사용자가 기억해야 할 내용이 증가하게 됩니다. 상충관계 속에서 옳은 의사결정을 하기 위해서 자신이 개발하는 시스템이 적용된 플랫폼의 특성과 가치를 고려해야 합니다. 특히 한 레벨에서 그룹을 나눌 때는 각 세부 주제 간의 차이점이 명확하게 드러나야 합니다. 계층 구조의 넓이와 깊이가 결정되면 부분적으로 어떤 구조를 차용할지를 정해야 합니다.


<정보 구조의 종류>   

순차적 구조(Sequential Structure)

그리드 구조(Grid Structure)

계층 구조(hierachy structure)

네트워크 구조(network structure)

대중분류구조(folksonomy structure)

여러가지 구조를 혼용해서 사용하는 혼합구조



4단계 : 네비게이션 디자인하기

이전까지 정보 자체의 의미 과점에서 디자인한 정보구조를 디자인했다면, 정보에 사용자가 어떻게 접속하는지를 네비게이션 구조를 통해서 디자인해야 합니다. 네비게이션 구조는 사용자가 실제로 보고자 하는 내용과 함께 보여지는 통합형(integrated)과 사용자가 항상 보는 내용과 분리해서 별도의 장소에서 제공회는 분리형(remote)으로 나뉠 수 있습니다.


<통합형 시스템>   

모든 위치에서 항상 사용 가능한 글로벌 네비게이션 시스템(golbal navigation system)

제품이나 서비스의 규모가 방대하고 복잡한 경우 서브 카테고리를 나누어 서브 시스템 네에서 글로벌 네비게이션 시스템의 역할을 하는 로컬 네비게이션 시스템(local navigation system)

상황에 따라 변화는 국소적 네비게이션 시스템(ad hoc navigation system)


글로벌 네비게이션 시스템과 로컬 네비게이션 시스템(좌)[3] / 로컬 네비게이션 시스템과 국소적 네비게이션 시스템(우)[4]
목차 형태로 정보를 제공해주는 넷플릭스(좌)[5] / 사이트맵 형태로 정보를 제공해주는 정부24(우)[6]


<분리형 시스템>   

보고서나 책과 같이 정보를 위주로 하는 디지털 서비스에서 시스템 전면에 그 시스템에서 제공하고 있는 제목들을 나열하고, 각 항복으로 갈 수 있는 링크를 제공해주는 목차(table of contents)

전체 시스템의 구조와 함께 각 구조의 제목을 보여주는 사이트맵(site map)

가나다순이나 알파벳순으로 해당 디지털 제품이나 서비스에서 나오는 자료를 정리해 링크를 달아주는 색인(index)

필요로 하는 정보가 나타나는 창과는 별도로 새로운 창을 띄우고 클릭한 결과는 정보가 나오는 창에 나타나는 리모트컨트롤(remote control)






UX George는 아래 책과 논문을 대신 읽어드렸어요. 여러분이 프로덕트 만드는 시간은 소중하니깐요!

김진우 . (2012). Human Computer Interaction 개론 UX Innovation을 위한 원리와 방법. 안그라픽스. https://product.kyobobook.co.kr/detail/S000001078704
Miller, Craig S. "Item sampling for information architecture." Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 2011.



reference

[1] https://www.nngroup.com/articles/persona/ 

[2] https://www.interaction-design.org/literature/topics/user-scenarios 

[3] https://www.nngroup.com/articles/local-navigation/

[4] https://www.invespcro.com/blog/design-it-right-how-to-create-an-effective-website-navigation-even-if-youre-not-a-usability-expert/

[5] http://www.itdaily.kr/news/articleView.html?idxno=206949

[6] https://www.gov.kr/portal/main

작가의 이전글 최초 사용의 UX와 지속적 사용의 UX의 차이
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari