Information Architecture 특강. 삼성 디자인 멤버쉽

1. Information Architecture
서울대학교
융합대학원
유우엑스랩
이중식교수
2015.4.20 @삼성 디자인 멤버쉽

2. UX 전문가는
개별 화면이나 작은 인터액션보다
긴 시간 벌어지는 경험의
동적 시퀀스 전반을
잘 살펴 보는 능력이 중요.
IA는 UR이 끝난 뒤 나온
경험 모델을 바탕으로
정보 설계를 하는 것
IA의 시작점은
UR에서 도출된
사용자의 ‘멘탈모델’

3. Web과 Mobile의 정보설계IA는 다르다.
Web 또는 큰 화면을 위한 정보설계는, 사용자의 자의적인 움직임을 전제로
‘도시’를 설계하듯 평면적 배치를 염두에 두나,
모바일에선 사용자의 자유도는 낮고 전후의 개연성은 강해야 함. 따라서 작은 화면의 파노라마를
음악처럼 시간 위에 설계해야 함.

4. 한 평면에서 보여야 할 것들은 ‘교차’의 규칙에 의해,
다른 평면에서 봐야 할 것들은 ‘순차’의 원리에 의해...
UX > 모바일에서 염두에 두어야 할 것은, 교차와 순차
순차
교차
< 한 평면에서 봐야 한다는 것의 예 >

5. UX > 빨래줄 위의 뷰들
사용자들의 뷰 이동(페이지 스트림)을 시간적 배열로 놓고 분석할 필요가 있음.

6. UX > 두꺼워진 페이지
모바일이나 RIA가 곁들인 페이지들은 단일 페이지가 아니고,
여러가지 동작성을 가지고 있기 때문에
체류 시간이 길어지고 정보 인터액션이 많은 경우가 많음.
시간성을 변경시킨다. 하나의 페이지가 부분 갱신을 통해 여러 기능을 함으로 페이지 체류 시
간이 길어지고, 조망과 티테일 등 상반된 활동도 가능케 한다.

7. Information Architecture
정보시스템에 구조를 부여하여
사용자가 원하는 정보를
직관적으로 찾을 수 있도록 한다.
정보는 조직화되어야 ‘가치’를 갖는다.

8. “아줌마,
로마인이야기
어디있어요?”
“거기 구석에
있을거야…”

9. The definition:
The art and science of organizing and labeling information to improve browsing and
searching
The thing:
The structure of information and components for searching and browsing that
information
시스템에 필요한 여러 가지 다양한 자료를 수집하고, 수집된 정보로부터 뚜렷한 패턴을 파악하
여 숨겨져 있던(implicit) 질서를 가시화하고 조작 가능하게 만드는 과정
IA > Definition

10. 필요 소양
- Business Literacy
- User/Customer Advocacy
- User Research
- Organization
- Wire-framing
- Communication
- 정리벽!
- 뒤를 생각하는 습관
IA > Process

12. IA > Contents Inventory
네이버의 수많은
서비스를
어떻게 그루핑하여
사용자들에게
제시할 것인가?

13. Contents Inventory
- 범위
- 자료 성격: 데이터, 기능, 절차
- 모으는 과정에서 유목화
- 성격, 주기성,...
IA > Contents Inventory

14. IA > Contents Inventory
‘컨텐츠 인벤토리’는;
- 시스템이 사용자에게 제공하는 모든 콘텐츠의 카탈로그를 작성하는 과정과 그 목록을 가리
키는 말
- “무엇이 있는가, 무엇이 필요한가”에 대한 답변을 줌으로써, 시스템에 대한 질적 분석
(qualitative analysis)을 제공
- 사용자 조사를 통해 도출한 사용자 프로필과 과업(task) 분석 내용을 바탕으로 작성하는 것
이 좋음
- 시스템의 모든 자산을 포함: 웹사이트의 경우에는 웹페이지(html), 메타 데이터 (keywords,
description, pate title), 이미지, 오디오, 영상 파일, 문서 파일 등을 포함
- 많은 시스템이 시간이 지남에 따라 새로운 뷰나 기능을 추가하기 때문에, 콘텐츠 인벤 토리
를 업데이트함으로써 유지보수에도 도움이 될 수 있음
- 데이터 처리에 용이한 MS 엑셀과 같은 스프레드 시트 어플리케이션으로 주로 작성

15. IA > Contents Inventory - Meta data
새마을
식당
POI
Before After
Contents
Physical
Social
Personal
좌표
크기
높이
한식당(메뉴)
체인
11시-11시
평점 5
방문수 상위 5%
뚝불 최고
대학 선배와 첫 방문
옛 연인과 즐겨간
우리가 단일 정보라 생각하는 것은,
다면적인 부속 정보(메타 데이터)의 조합으로 구성됨.
이 층위를 밝혀내는 것도 IA의 일

16. IA > Contents Inventory - Meta data
맛집
먹방
Post
Before After
Contents
Physical
Social
Personal
게시자
시간
포맷
(텍스트, 사진, 링크)
내용
조횟수
Like
댓글
펌

17. IA > Contents Inventory - MD2MD
유투브의 경우 정보구조는 메타 데이터를 타고 흐르는
구조임.
Seemingly Data라고 생각하는 것들을 구조화 하기보다
메타 데이터들 간의 연관성을 살펴보는 것이 중요함.

19. 분류와 요약: 인류가 지식을 만드는 방법
- 아리스토텔레스의 질문: ‘종달새는 새인가?’
- 같은것끼리묶고,다른것끼리나눔
- 공통 속성으로 위계를 둚
나의 책장은내가 아는 지식의 반영,
Knowledge는 세상의 Shadow.
지식과 세상은 같은 모양이다.
IA > Grouping

20. 암기의 방법: 리허설, 공간화, .... 조직화
IA > Grouping

21. Grouping의 궁극적인 목적은 전체의 모습을 이해하기 쉽도록 보여주고하 하는 것임.
데이터가 가진 고유의 패턴을 정리, 체계화하여 다른 사람들이 스스로 정보를 이해하기
쉽게 돕는 작업으로도 큰 가치를 만들어 낼 수 있다. - 바바라 민토
- Grouping is a powerful analytical technique
- Grouping is also an equally powerful communication tools
IA > Grouping

22. 구조는 자료들의 성격을 대표함
IA > Grouping

23. 수평 그루핑의 Rule
IA > Grouping

24. 편의점의 음료수를 분류해 보자~
IA > Grouping

25. 카드 소팅 등은, 정보를 분류하는 과정에 사용자를 참여시킴으로써, 정보 설계에 사용자
의 관점을 반영하는 대표적인 방법이다.
사용자의 멘탈 모델(mental model)을 이해하고 이를 바탕으로 전반적인 정보 구조를 결
정하며 네비게이션 디자인을 위한 인사이트를 얻는 것을 목표로 함
• 사용자의 멘탈 모델 이해
• 설계하려는 시스템의 전반적인 정보 구조를 결정
• 네비게이션, 메뉴, 분류체계에 대한 인사이트 도출
IA > 카드소팅
하지만 카드소팅은 절차(flow)가 강하거나, 동질적인 콘텐츠로
이루어진 대규모 사이트 (e.g. encyclopedia), 전문적인 내용을
다루는 시스템 (e.g. biotech, insurance etc), 기존의 분류체계
(catalogues, list, directories, etc)가 전혀 의미없는 경우에는 적
당하지 않다.

26. 카드 소팅의 수행전 고려사항.
- Open vs. Closed
- Group vs. Individual
- Remote vs. In Person
IA > Card sorting

27. 카드 소팅 준비작업
• 인덱스 카드를 이용할 것
• 카드 하나에 하나의 레이블만 적을 것
• 추후 분석의 편이를 위해 카드에 일련번호를 달아 둘 것
• 전문 용어를 피하고 일반적인 표현으로 바꿈
• 특정한 논리의 단서가 될 표현을 자제할 것
• 동의어를 활용하고 대구를 이루는 단어 사용을 가급적 피할 것
• 카드는 총 30-50개가 적당함
• 그룹으로 진행하는 경우에도 100개를 넘지 않는 것이 좋음
• 참가자가 새로운 것을 추가할 수 있도록 빈 카드를 준비
카드 소팅 진행 안내
• “카드 뭉치를 논리적인(logical) 그룹으로 분류해주세요”
• “각 그룹에 포스트잇으로 레이블(label)을 달아주세요”
• “헷갈리시는 게 있으면 레이블을 자유롭게 바꿔주세요”
• “중요한 내용이 빠진 것 같으시면 추가해주세요”
IA > Card sorting

28. 레이블링은 컨텐츠/기능 그룹에 적절한 이름을 지어주는 작업
레이블링의 목적
- 빠른 시간 레이블을 통해 목적지를 확인할 수 있다.
- 레이블을 통해 시스템의 구조를 파악할 수 있다.
- 레이블을 통해 시스템의 성격과 스타일을 파악할 수 있다.
레이블의 종류
- ‘기능적 레이블’은 기능을 대표하는 일반 명사로 형성된다. 일반인에게 어렵다.
- ‘표현적 레이블’은 사용자의 세계에서 사용되는 친근한 단어로 변환한 것을 말한다.
Think of it as a “system” not individual labels; Consistency is key!
전체적으로 레이블의 일관성을 유지하기 위해 시스템을 위한 ‘단어사전(glossary)’를 만드는
것 이 좋다.
IA > Labeling

29. Jargon은 한 집단만이 즐겨쓰는 축약어, 관용구를 말하며, 자연어와 전문어 중간에 위치한다.
Jargon은 커뮤니케이션 효율을 위해 발생한다. 시스템에 익숙해짐에 따라 사용자는 Jargon 영
역에 익숙해지며 Lock-in된다.
Pay attention to
- Syntax
- Level of granularity
- Comprehensiveness
- 지나친 과장과 주관절 레이블링을 경계
IA > Labeling
Like
Profile
상태
자연어
전문어
Jargon
사진
Timeline
Notification
Privilege
담벼락
포스팅
메세지
초보자
숙련자
< System Literacy >
< Facebook Label Group >
친근한 IT용어
Majority

30. 낯선 시스템을 사용자가 이해하기 쉽도록, ‘체계’를 빌려옴
과거에는 ‘자연체계’를 빌려왔으나, 요즘은 ‘파생체계’를 빌려오는 경우도 있음
시스템의 기간 구조(architecture)를 제시
•온라인 쇼핑 >> 백화점
사용의 절차를 제시
•쇼핑 >> 눈팅 > 고려군 > 구매 > 결제 > 배송
세세한 표현의 지침을 제시
•도토리: 다람쥐 등
IA > Metaphor

32. 데이터 드리븐한 시스템의 경우,
정보의 내재적 성격을 바탕으로 ‘디지털 매체적 속성’에 맞는 구조를 부여함이 중요하다.
- Sequential structure
- Hierarchical structure
- Multi hierarchical structure
- Grid structure
- Network structure
- Mixed structure
- Variable structure
- Search
- Social tagging
IA > Structure

33. 분류(classification)
유사성(비슷함)과 상이성(다름)에 따라 만들어진 차이를 기반으로 위 계적 클래스를 형성하
고 새로운 데이터를 이 클래스에 매핑(분류)하 는 행위
군집화/세분화(clustering/segmentation)
군집화는 전체를 어떤 측 정기준에 따라 유사한 그룹으로 나누는 것이다. 하나의 군집은 유
사성 에 따라 모인 일련의 대상 객체이다.
분류작업과의 차이점은 군집은 클래스가 미리 정해져 있지 않고, 전체를 속성거리에 따라서
모으는 것이다.
IA > Classification vs. Clustering

34. R-DB based
Captures and uses “metadata” – Intrinsic
– Administrative
– Descriptive
Best applied to sub-sites or features such as: – Staff directories
– News release archives
– Product catalogs
– Locators
Issues:
• Incomplete or inaccurate data leads users to incorrect content, features and
functionality
• Metadata categories do not include those by which most users would like to find
content, features and functionality • Information is hard to access because the interface is
too technical
IA > Database

35. 정보 구조내에 정보를 배열하는 질서를 Order라 한다.
Order 역시 사용자가 기대하는 멘탈모델과 잘 부합하여야 한다.
- Topic / subject
- Task
- Format
- Audience
- Alphabet
- Time
- Geographical
- Attributes
- Popularity
- Faceted
- Tags(user classification)+Search
IA > Order

36. Benefits:
• Helps users find the most frequently utilized content/features on a site
• Taps into the user-base to inform navigation choices
Issues:
• Sometimes users become suspicious of “popular” type lists
• Users do not always think to use them when tasked with “finding other items users are
interested in at this time”
Recommendations
• Tap into real user data to inform lists
• Make sure the traffic can adequately support any popularity-based architecture (stale
links will turn users away)
IA > Popularity Order

37. Benefits:
• Aid the search process by framing choices
• Help users reduce possible matches by most meaningful categories • Indicate how
certain facet combinations impact number of possible choices before selection
Issues
• No indication of number of possible results before selection of particular facet
• No response to selection of particular facet (ignored)
• Reset of facets without warning
Recommendations
• Implement where number of choices would overwhelm users is they had to manually
scan through all choices
• Clearly indicate how many choices a new attribute will yield
• If there is hierarchy to the facets(like on Sears) make this very clear
IA > Faceted or Pivot Order

38. Benefits:
• Good supplement to other types of schemas (if your users are active taggers)
• Works well on user-generated content sites where manual classification would be
impossible
Issues:
• Users who are not taggers themselves do not think to use tags or tag clouds
• Users do not naturally understand how tags work – it needs to be explained/illustrated
Recommendations
• Consider alternate naming for “tags” and “tag clouds” since the terms are not always
understood
IA > Tag Order

39. Search: Not Just a Technology
• Important that adding search to a site is not owned or assigned only to engineers
• When evaluating solutions, consider the ability and ease to:
– Create a search index/thesauri
– Maintain and update the index
• Also
– Do you have appropriate internal expertise and resources?
• Will it play nice with your CMS (from an architecture and workflow perspective)
•Don’t believe that just because a search technology claims to work off “natural
language” that you won’t need to create controlled vocabularies and thesauri
• Search does not work out of the box without tweaking
• Ask the sales engineers to talk in-depth about indexing – not just a gloss-over
• Varying Languages
IA > Search

40. Search and Navigation Supplement Each Other
The two approaches to findability are integrated:
• Search teleports user into one location
• Navigation helps explore that neighborhood Especially useful to help post-search
exploration:
• Local navigation
• Breadcrumbs (helps establish structure)
• Social filters
• Utility navigation with link to good About Us section Information-seeking behavior
(Information Foraging)
• Zig-zagging through sites, pages and content
• Browsing and searching are complementary
• Users do not often follow a single path
• Paths do not always originate form the homepage (deep links)
IA > Search and Browse
“ 아줌마, 로마인 이야기 어디 있어요?”
“ 예, 저기서 찾아봐요.”

42. 뷰를 오가거나 뷰의 일부를 갱신하기 위해 필요한 ‘뷰의 일부분’을 네비게이션이라 부른다.
네비게이션의 작동방식(interaction)은 그 선택의 의도와 일치하여야 한다.
IA > Navigation
선택(클릭)의 징검다리에 의
해 구축된 경험
뷰
< 앱에서의 네비게이션 >

43. 기억속의 여정
몇 개의 선택을 통해 지금 d3에 도착했고, 앞으로 f1을 향해 가고 있다면...
어떻게 f1으 로 가는 최선의 경로를 보여 줄것이냐?
평면적인 도시에서 길을 찾는 것은 입체적 경험이나, 시스템에서의 뷰들을 통한 순차적
(sequential) 경험에선 ‘순서’의 기억에 의존할 수 밖에 없다.
문제는 우리의 뇌가 ‘지나간 순서’에 대해 짧은 기억을 가지고, 다가올 것에 대해선 전혀
알수 없기 때문이다.
-정보의 구조 information structure
-정보의 향기 scent of information
-의도의 바람 wind of purpose
-항해의 잔재 navigational residue
IA > 붕어의 기억
기억의 범위

44. 길치 vs. 길눈, 강맥락 vs. 약맥락
하나의 자료의 조각을 쥐고, 이 자료가 전체에서 위치하는 맥락을 파악하는 일은 어렵다.
맥락자료가 없다라도 흔적을 통해 사람들은 위치와 경로를 파악하는데, 이 때는 ‘길 눈 밝
은 사람’이 유리하다.
조망, 좌표, 이정표의 제공은 사람들이 길 찾는데 도움을 준다.
하지만, 차단막, 닫힌 문 등을 통해 경로를 강제하면 효율성은 증가하나 만족도는 떨어진
다.
IA > 맥락성

45. 자료 중심의 시스템에서는
사용의 목적을 환기시켜 주는 것이 중요하다. 동시에;
- 현재의 위치 파악
- 나의 옵션은 무엇인가?
- 목표에 어떻게 도달할 수 있는가?
- 나는 움직이고 있는가?
를 지원해야 한다.
IA > 붕어의 기억을 보조

46. 모바일에선, 컨텐츠도 네비게이션.
사용자는 컨텐츠와 레이블을 번갈아가며 이동하기에,
레이블 제시가 더욱 중요해짐.
UML 시퀀스 다이어그램을 사용하면 동적 구조의 네비게이션 설정에 도움이 됨.
IA > 모바일에선 ‘레이블의 징검다리’

47. 협업 환경에서는 직접 커뮤니케이션 외에도 암묵적으로 상대방 또는 자료와 커뮤니케
이셔이 진행된다. 이를 Deixis라 한다.
포스트의 조회수가 높아진다든지, 드롭박스에 화일이 업데이트 되는 노티가 뜨는 것들
은 의도하지 않아도 대상의 변화를 느끼는 장치이다.
IA > Alert and Deixis