당신은 주제를 찾고 있습니까 “정보 구조 설계 – UX – 정보구조설계 (Information Architecture)“? 다음 카테고리의 웹사이트 you.tfvp.org 에서 귀하의 모든 질문에 답변해 드립니다: https://you.tfvp.org/blog/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 개발자의품격 이(가) 작성한 기사에는 조회수 3,676회 및 좋아요 96개 개의 좋아요가 있습니다.
Table of Contents
정보 구조 설계 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 UX – 정보구조설계 (Information Architecture) – 정보 구조 설계 주제에 대한 세부정보를 참조하세요
[개발자의 품격] 품격있는 개발자 되기!웹에서 제공하는 콘텐츠(정보)를 체계화하고 이용자가 가장 빠르고 정확히 원하는 콘텐츠(정보)에 접근할 수 있는 구조를 만드는 기술
IA는 정부구조(Organization System)의 정의, 네비게이션(Navigation System), 레이블링(Labeling System), 검색(Search System), 컨텐츠 디자인(Contents Design)으로 구성되어 있다.
정보 구조 설계 주제에 대한 자세한 내용은 여기를 참조하세요.
UX 디자인과 정보구조 설계: ① 정보구조(IA)의 개념과 종류
정보구조(Information Architecture, IA)는 서비스의 전체 그림과 흐름을 결정하는 콘텐츠 구조도입니다. 정보구조는 눈에 보이지는 않지만, 사용자에게 …
Source: yozm.wishket.com
Date Published: 3/5/2022
View: 9118
UI와 UX기획의 개념과 정보구조 설계하는 방법 – 듀의 자료저장소
IA(Information Architecture). 정보구조를 설계할 때는. 위와 같은 요소를 고려해야한다. 메뉴구조와는 조금 다른 개념으로,.
Source: dewworld27.tistory.com
Date Published: 8/24/2022
View: 6891
IA(정보구조도, Information Architecture) 쉽게 알아보기 – velog
정보구조는 1.인포메이션 체계 내의 네비게이션 체계, 레이블링, 조직화이며, 2.컨텐츠에 직관적으로 접근하고, 업무 처리가 용이하게 정보 공간을 설계 …
Source: velog.io
Date Published: 5/23/2021
View: 1387
정보 구조(IA)의 8원칙 – 브런치
사용하기 편한 정보구조 설계하기 | 정보 구조의 8원칙은 정보 설계사, UX 디자이너이자 컨설턴트인 댄 브라운에 의해 제안되었습니다.
Source: brunch.co.kr
Date Published: 1/11/2021
View: 4118
웹, 모바일을 위한 I.A(Information Architecture, 정보구조도)
이번 시간에는 서비스 설계의 기초인 정보 구조도(Information Architecture) 에 대해서 알아보겠습니다. I.A.의 기초 이론과 역할 그리고 구조도 …
Source: plavement.tistory.com
Date Published: 2/13/2022
View: 5625
UX STUDY 6 : 정보 구조 설계 IA(Information Architecture)
정보구조 설계란 무엇인가요? … IA(Information Architecture, 정보구조)는 정보를 다양한 목적, 즉 이용자의 직업, 기능, 정책 등에 따라 이해하기 쉽게 …
Source: kimjuae.tistory.com
Date Published: 9/4/2022
View: 1067
UI정보구조 설계 / 1. 정보설계 구성 – HAANAA_W
UI 정보구조 설계하기 (LM0803020911_16v2.1) 정보설계 구성 앱 UI/UX 디자인 개발에 필요한 요소를 기반으로 전체적인 정보설계를 구성할 수 있다. 정보설계 정보설계 …
Source: haanaaedu.tistory.com
Date Published: 2/29/2021
View: 9000
정보구조설계 IA (Infromation Architecture) – 공부하는 디자이너
정보구조설계는 크게 5가지 파트로 나뉜다. 1. Organization System 2. Navigation System 3 …
Source: devdesigner.tistory.com
Date Published: 1/19/2021
View: 815
웹기획은 정보구조(I.A. Information Architecture) 설계가 절반이다.
정보 구조 설계 (Information Architecture = I.A.) 와. – 화면 설계 (스토리보드 = Story Board = S/B = 혹은 User Interface = U.I. = 혹은 외국 …
Source: philosophiren.com
Date Published: 8/26/2021
View: 9576
주제와 관련된 이미지 정보 구조 설계
주제와 관련된 더 많은 사진을 참조하십시오 UX – 정보구조설계 (Information Architecture). 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 정보 구조 설계
- Author: 개발자의품격
- Views: 조회수 3,676회
- Likes: 좋아요 96개
- Date Published: 2020. 9. 20.
- Video Url link: https://www.youtube.com/watch?v=RYJtdnorzxE
UX 디자인과 정보구조 설계: ① 정보구조(IA)의 개념과 종류
애플리케이션(이하 앱)을 기획할 때 바로 화면을 그리려 하다가 잠시 멈췄던 적, 한 번 정도는 있으실 거라고 생각합니다. 저도 서비스 이용 흐름에 필요한 콘텐츠를 어떻게 논리적으로 엮어야 하는지 고민했던 적이 있는데요. 지금 비슷한 어려움을 겪는 중이시라면 이 ‘정보구조’에 대한 글이 도움 될 것 같습니다. 이번 글에서는 정보구조가 무엇이며 대표적인 구조에는 어떤 것들이 있는지 알아보겠습니다.
서비스의 밑그림, 정보구조
정보구조(Information Architecture, IA)는 서비스의 전체 그림과 흐름을 결정하는 콘텐츠 구조도입니다. 정보구조는 눈에 보이지는 않지만, 사용자에게 언제 어떠한 방식으로 정보를 제공할지를 결정하기 때문에 와이어프레임 단계에서 꼭 짚고 넘어가야 합니다. 사용자에게 필요한 콘텐츠와 과적인 이용 방향은 서비스의 종류마다 다양할 것입니다. 그래서 정보구조를 설계할 때는 사용자가 쉽게 이용할 수 있도록 서비스에 맞는 정보구조를 적용하는 것이 중요합니다.
정보구조 설계의 방식
웹사이트의 정보구조를 설계할 때는 크게 네 가지를 고민하게 됩니다. 여기에 속하는 구조화 시스템, 라벨링 시스템, 내비게이션 시스템, 검색 시스템을 간단하게 알아보겠습니다.
1) 구조화 시스템 (Organization system)
구조화 시스템에서는 전체 정보를 분류하는 방식을 고민합니다. 기능, 작업, 은유 등의 기준을 활용해 사용자가 전체적인 정보를 쉽게 이해하고 필요한 곳에 접근할 수 있도록 합니다. 콘텐츠를 분류할 때, 이들은 서로 명확하고 상호 배타적이어야 합니다.
구조화 시스템에는 계층 구조, 순차 구조, 매트릭스 구조가 있습니다.
계층 구조(hierarchal structures, 트리 구조)
‘웹의 구조’라고 할 때 일반적으로 떠오르는, IA의 표준이라고 할 수 있습니다. 계층구조는 이용자가 전체 구조를 쉽게 이해할 수 있어 서브 페이지가 많은 경우 적합합니다. 하지만 콘텐츠의 양이 지나치게 많을 경우 사용자가 이용 도중에 길을 잃을 수 있으므로 주의가 필요합니다.
순차 구조(sequential structures)
이 구조는 어떤 목적을 달성하기 위해 제한된 정보가 순차적으로 제공됩니다. 사용자는 제공된 경로를 따라가며 필요한 정보들을 수집하게 됩니다. 따라서 순차 구조는 특정 줄거리가 있는 정보를 전달하고자 할 때 효과적입니다. 사용자들은 이 구조를 활용해 필요한 정보에 집중할 수 있지만, 그만큼 탐색 과정을 단조롭게 느끼는 단점이 있습니다. 또한 중간에 마지막 단계로 바로 이동할 수 없으므로 이를 보완할 수 있도록 다른 방식의 구조와 함께 사용하는 것이 좋습니다.
매트릭스 구조(matrix structures)
이 구조에서는 콘텐츠가 복합적으로 연결되어 있습니다. 그래서 사용자는 선호하는 탐색 방식을 선택해 탐색 경로를 스스로 만들어 나갈 수 있습니다. 예를 들어 어떤 사용자는 필터에서 주제에 따른 탐색을, 또 다른 사용자는 날짜에 따른 탐색 방식을 선호할 수 있습니다. 이럴 때 매트릭스 구조를 사용하면 두 가지 탐색 방식을 모두 도울 수 있습니다.
2) 라벨링 시스템(Labeling system)
라벨링 시스템은 정보를 효과적으로 통합하고 표현하는 방식을 정합니다. 서랍장에 이름을 붙이는 것과 비슷하다고 생각하시면 됩니다. 소제목, 메뉴 제목, 링크 제목 등 모든 콘텐츠가 이름 붙이기의 대상이 될 수 있습니다. 제목을 정할 때는 전문 용어의 사용을 지양하고 고객이 이해하기 쉬운 언어를 사용해야 합니다. 또 콘텐츠의 대표성과 일관성을 지켜야 하는데, 그래야 사용자가 원하는 콘텐츠가 있는 위치를 쉽게 찾을 수 있기 때문입니다.
3) 내비게이션 시스템(Navigation system)
드리블의 GNB와 LNB 영역 (이미지 출처: dribbble.com)
내비게이션 시스템은 정보들 사이의 탐색과 이동 방법을 정합니다. 대표적으로 GNB(Global Navigation Bar), LNB(Local Navigation Bar)가 있으며 이들을 보조해 주는 가이드나 마법사도 포함됩니다. 사용자는 내비게이션을 사용해 자신이 어떤 공간에 있는지, 원하는 것을 얻기 위해 어디로 가야 하는지 등을 가늠합니다. 따라서 내비게이션은 사용자들이 원하는 정보를 쉽게 탐색할 수 있도록 가능한 단순하고 직설적이어야 합니다.
4) 검색 시스템(Searching system)
검색 시스템은 사용자가 원하는 정보를 바로 찾아갈 수 있도록 도와줍니다. UI로는 검색 바가 많이 사용되며, 상세 검색, 추천 등 검색 과정을 지원하는 여러 보조 도구들을 함께 활용할 수 있습니다. 다수의 사용자는 먼저 사이트를 둘러본 후 원하는 정보를 찾기 어려울 때 검색 시스템을 이용합니다. 때문에 최대한 원하는 정보를 쉽게 찾을 수 있도록 제품을 먼저 설계하고, 검색 시스템으로는 숨어 있는 정보를 찾을 수 있도록 해야 합니다.
모바일의 정보구조 패턴 알아보기
정보구조에 대한 개념은 웹사이트에서 먼저 발전시켜 왔습니다. 하지만 스마트폰으로 모바일 플랫폼이 크게 발전하며 모바일만의 정보구조 패턴도 보편적으로 쓰이게 되었습니다. 특히 모바일은 반응형, 네이티브, 하이브리드 등 정보 전달 방식과 사용 경험이 다양합니다. 따라서 모바일의 경우 서비스와 환경에 잘 맞는 정보구조를 적용하는 것이 더욱 중요해졌습니다.
모바일에서는 대표적으로 계층, 허브 앤 스포크, 중첩 인형(네스티드 돌), 탭, 대시보드, 필터 등의 패턴이 많이 사용됩니다. 여기에서는 특징적인 세 가지 패턴만 소개하고자 합니다.
1) 허브 앤 스포크(Hub&Spoke)
허브 앤 스포크에서 허브는 나무의 줄기, 스포크는 서로 다른 방향의 나뭇가지로 비유할 수 있습니다. 이 패턴은 모바일 화면이 작아 웹사이트의 글로벌 내비게이션 패턴을 효과적으로 사용하기 어려워 그 대안으로 보편화되었으며, 아이폰의 기본 탐색 패턴이기도 합니다. 사용자는 정보 탐색 시 스포크 사이를 이동할 수 없고 허브를 거쳐야 합니다. 탐색 단계가 늘어난다는 단점이 있지만 하나의 작업에 집중할 때 효과적인 탐색을 도울 수 있어 사용자가 뚜렷한 탐색 목적을 가지고 있을 때 사용하기 좋은 방법입니다.
2) 중첩 인형(Nested doll)
중첩 인형은 선형적인 탐색 방식으로 탐색이 진행됨에 따라 사용자를 더 상세한 콘텐츠로 안내하게 됩니다. 이 구조는 사용자에게 공간의 앞뒤로 오가는 느낌을 부여해 강한 위치 감각을 줄 수 있습니다. 중첩 인형은 계층구조나 허브 앤 스포크와 같은 다른 패턴 안에서의 하위 패턴으로도 활용할 수 있습니다. 하지만 서로 다른 주제의 섹션들 사이를 빠르게 전환하기 어렵다는 단점도 있습니다.
3) 탭(Tabbed view)
탭은 현재 모바일 앱에서 사용자들에게 가장 친숙한 패턴입니다. 사용이 편하고 탐색이 간편해 가장 많이 쓰입니다. 이 정보 구조를 사용하면, 사용자는 앱이 처음 열렸을 때 탭을 통해 앱의 전체 기능을 빠르게 훑어보고 이해할 수 있습니다. 다만 탭은 간단한 구조의 서비스에 적합하며, 많은 서브페이지를 사용하기는 어렵다는 단점이 있습니다.
결론
이번 글에서는 정보구조의 내용과 이를 구성하기 위한 대표적인 방식에 대해 알아보았습니다. 정보구조가 무엇인지는 알겠는데 어떻게 써야 할지 감이 잘 오지 않으실 수도 있겠습니다. 이를 위해 바로 다음 글에서 케이스 스터디를 통해 위의 정보구조 패턴을 어떻게 적용했으며, 잘 만들어진 정보구조는 사용자를 어떻게 도울 수 있는지 함께 살펴보겠습니다.
<참고>
정보 구조: 디자이너를 위한 기초
정보 구조와 네비게이션
모바일 설계 1. 정보 구조
시스템 구조
요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.
UI와 UX기획의 개념과 정보구조 설계하는 방법
반응형
템플릿 출처: 새별 PPT
서비스 기획자는 UI와 UX 모두를 고려해야한다.
UX: 사용자에게 유용한 가치를 전달하기 위해,
그들의 행동, 느낌, 태도까지도 설계하는 것이다.
예시를 들자면,
위키백과는 단순히 정보를 제공하는
검색 사이트에 불과하다.
그러나 구글은 사용자의 입장에서
편리함을 위해, 여러가지를 고려한 것을
확인할 수 있다.
아이데이션: 아이디어를 내는 방법
1. 벤치마킹
다양한 트렌드와 흐름을 이해하려면,
국내는 물론 해외의 여러 사이트를
벤치마킹하여 인사이트를 얻어야 한다.
ex) 네이버의 그린닷
해외사례를 벤치마킹한 경우.
https://dribbble.com/
https://www.clipartkorea.co.kr/main/index.php
→ UI같은 경우, 핀터레스트 참조해보는 것도 도움!
2. 관련지식 습득
UI를 꾸미기 위해,
CSS나 개발 언어에 대한 연구가 필요하다.
3. 시장분석
기획하려는 서비스의 산업에 대한
전망 및 시장분석이 필요하다.
ex) 커머스
커머스에 대한 전체 시장 분석 후,
흐름을 보고,
어떤 서비스들이 있는지
관련 앱이나 사이트를 파악해보기
4. 서비스 분석
디바이스의 인터렉션은 물론,
다양한 UI의 실제 사례 분석
→디자이너에게 원하는 컬러, 서비스의 방향,
유사한 UI의 레퍼런스 전달해야함.
5. 마인드맵
6. 브레인스토밍
→ 아이데이션을 하는 두 가지 방법.
IA(Information Architecture)
정보구조를 설계할 때는
위와 같은 요소를 고려해야한다.
메뉴구조와는 조금 다른 개념으로,
조금 더 logical하게 바라봐야 한다.
IA를 기반으로, 메뉴로 어떻게 디스플레이하느냐
UI/UX를 표현하느냐는 다른 문제다.
*
IA를 잘 짜려면, 덩어리화를 잘 해야 한다.
정보의 구성/내비게이션/레이블을 고민해야 함.
→어떤 컨셉으로,
어떤 데이터를 기반으로
어떻게 사용자가 서비스를 잘 이용할 수 있게
할 것이냐를 고민해야 함.
-시스템이 어렵거나 복잡하면 안 된다.
사용자가 학습해서,
쉽게 사용할 수 있게 해야 한다.
-기능이 부여된 정보구조를 설계해서
유저가 이 서비스를 잘 사용할 수 있도록
도와주어야 한다.
https://philosophiren.com/292
구글의 정보구조 설계 예시이다.
사용자가 원하는 정보를 쉽고 빠르게
찾을 수 있도록, 잘 설계되어 있다.
패스트캠퍼스의 온라인, 오프라인이 있는
카테고리 분류는 조금 아쉽다.
어떤 강의들이 있는지, 세부적으로 한눈에
파악하기 어렵다.
[IA의 필요성]-사용자의 시간과 비용을 ↓
혼란을 주지 않는다.
-개발 설계를 용이하게 한다.
디테일하게 해놓으면,
개발단계에서도 쉬워진다.
→ 명확하고, 체계적이어야 한다
-그루핑(그룹화)
덩어리(카테고리)를 어떻게 잡는지 고민해야 한다.
상위와 하위 카테고리의
연결을 어떻게 할 건지 잘 생각해봐야 함.
https://slidesplayer.org/slide/16876478/
[계열구조]일련의 정보나 콘텐츠가
절차를 가지고, 순서가 진행된다.
-이전, 다음 기능이 존재
-계층화되지 않고, 평면적임
-콘텐츠가 방대한 서비스에서
계열구조를 많이 쓴다.
ex)네이버 왼쪽 이미지의 경우
-계층구조로 전시하기에는
서로의 컨셉이 다 다르므로,
그룹화하기가 어렵다.
[계층구조]IA에서 기본적인 구조.
상위와 서브 개념을 지닌 하이어라키(계층) 구조를 가진다.
1,2,3 등의 뎁스를 지닌다.
공공기관에서 특히 많이 쓰는 IA구조.
이유: 명확하게 콘텐츠를 배열하고,
하위 콘텐츠들을 서로 연결을 잘 해야
이 곳을 방문하는 모든 유저들이
기능을 잘 찾아갈 수 있다.
→ 잘 모르는 사람도, 이 메인 콘텐츠에
어떤 것들이 있을지 예측을 하고
찾아가야하기 때문!!
*서울소식-새소식-분야별 새소식
총 3depth를 가지고 있다고 표현
[그리드 구조(grid)]서로간에 연결이 다 되어 있다.
이전과 이후를 마음껏 넘나들 수 있다.
뎁스가 존재하지만,
이전으로 돌아가는 것에 대해서도
불편함이 없다.
*계열구조와 그리드는 뭐가 다를까?
1. 계열: 각각의 화면 단위가 독립적
2. 그리드: 화면이 서로 연결되어 있다.
마음껏 자유롭게 프로세스를 넘나들며,
이동할 수 있다.
[네트워크 구조]각각의 화면 단위를 지닌다.
뎁스의 개념이 없고,
각각 화면이 모두 독립적이다.
네트워크 구조는 모바일에서 많이 쓰인다.
내비게이션 배치와 정보구조 설계 측면에서
유용하기 때문이다.
ex)페이스북, 인스타그램
각각의 화면들이 독립적이고,
흩뿌려진 상태로 연결되어 있다.
어떤 화면을 눌러도
자유롭게 이동할 수 있다.
→요즘에는 개발할 때는 계층구조를 써도,
이용자에게 보이는 화면만큼은
네트워크 구조를 가져다 쓴다.
[정보구조 설계하는 방법]1. 벤치마킹
동종업계나 경쟁사, 유사 서비스,
최근 유행하는 서비스 등을 분석한다.
내가 원하는 서비스의 기능을 명확히
정의하고,
분석한 요소들을 적용시켜봐야한다.
ex) 방대한 콘테츠가 있는 서비스,
계층구조보다는 평면적으로 디스플레이할 것이다.
-어떤 구조가 내가 기획하려는
서비스/산업 특성에 맞는지 고민해야한다
ex) 계층 구조가 아니고, 평면적으로 흩뿌리면
헷갈릴 수밖에 없는 콘텐츠들이 많다.
[주제별 계층구조 방식]1. 단어순
가나다순, 알파벳 순으로
디스플레이하고 있는 네이버
2. 시간순
24H/일간/주간/월간/시대
시간순으로 디스플레이가 필요한
서비스가 간혹 있다.
3. 장르순
4. 지리순
지점이 많은 프랜차이즈들은
지역을 나눠서 카테고리를 쓴다.
[좋지 않은 사례]두 사이트 다 나누는 기준이 굉장히 모호하다.
온라인에 어떤 강의들이 있는지 파악이 어렵다.
여기같은 경우도 자산관리를 전체 카테고리로
잡았다면 연령층별로 나누는 게 더좋았을지 모른다.
반응형
정보 구조(IA)의 8원칙
정보 구조의 8원칙은 정보 설계사, UX 디자이너이자 컨설턴트인 댄 브라운에 의해 제안되었습니다. 이러한 원칙들은 우리의 사이트 구조를 만들거나 평가하기 위한 훌륭한 출발점이 됩니다.
정보 구조(IA)는 우리가 더 이해하기 쉽게 콘텐츠를 조직하도록 돕습니다. 잘 구성된 정보구조는 탐색을 더 간단하고 쉽게 만들어, 방문객들이 이를 사용해 필요한 것을 찾고 목표를 달성하도록 합니다. 정보 구조는 웹사이트, 앱, 디지털 제품, 인트라넷, 온라인 커뮤니티 그리고 모든 종류의 디지털 공간에 존재하며, 도서관, 박물관, 상점 등의 물리적 세계에도 적용됩니다.
IA의 네 가지 요소인 조직화(Organization), 내비게이션(Navigation), 라벨링(Labeling), 검색(Search)으로부터 최선의 결과를 얻으려면, 먼저 비즈니스와 사용자의 니즈를 간단하고 명확한 스텝을 통해 정의해야 합니다.
이 분야에서 20년 동안 일한 전문가인 브라운은, 디자이너들이 그들의 구조를 구성할 때 올바른 의사결정을 하도록 돕는 8가지 원칙을 개발했습니다. 다음의 내용은 댄 브라운의 정보 구조 8원칙에 대해 제가 서비스 분석을 해보면서 알게 된 내용을 함께 적은 것입니다.
1. 사물의 원칙 (The principle of objects)
콘텐츠를 고유의 라이프사이클, 행동, 태도를 가진 살아있는 대상으로 바라보아야 한다. 디자이너는 IA 구조를 설계할 때 이러한 콘텐츠들의 본성을 정의하고 이해할 필요가 있다.
– 서비스가 지향하는 목표가 명확하고 플랫폼이 원활히 돌아가는 한 콘텐츠는 끊임없이 변화한다. 서비스는 목표를 달성하기 위해 콘텐츠를 추가, 재구성해 나갈 것이며 사용자들은 그 안에서 계속해서 정보와 자원을 공유할 것이다. 또 추천 시스템과 같은 새로운 기술이 나타나면 같은 콘텐츠라도 IA 설계 방식이 달라질 수 있으며 이는 사용자 경험의 재구성으로 이어진다. 마지막으로 산업과 도메인에 따라 콘텐츠의 유연한 정도는 달라질 수 있다.
2. 선택의 원칙 (The principle of choices)
사용자에게 의미 있는 선택을 제공하는 페이지를 만들어 특정 작업에 초점을 맞추고, 사용자에게 적합한 선택 범위를 유지한다. 너무 많은 선택지는 너무 적은 선택지보다 나쁠 수 있다. 사용자가 수렁에 빠질 수 있고, 너무 많은 선택지로 인해 우유부단한 상태로 마비 상태에 빠질 수 있기 때문이다.
– 이 원칙은 UX/UI 심리학 법칙 중 밀러의 법칙, 그리고 힉의 법칙과 연관되는 것으로 보인다. 힉의 법칙은 선택지의 수가 늘고 복잡해질수록 의사결정에 걸리는 시간이 늘어난다는 원칙이다. 또한, 밀러의 법칙은 사람은 덩어리로 의미화된 요소를 더 잘 기억한다는 심리학 법칙이다. 화면을 설계할 때에는 명확한 목표를 바탕으로, 잘 구조화된 요소들을 제공하여 사용자가 의미 있는 선택을 할 수 있도록 도와야 한다.
3. 공개의 원칙 (The principle of disclosure)
만약 사용자가 더 자세히 알아보고 싶어 한다면 사용자가 결정해야 할 내용들만 보여주자. 일단 사용자가 선택지의 의미를 예상하게 되면, 그들은 그것을 추구할지 말지를 결정할 수 있다.
– 이 원칙 또한 UX/UI에 관련된 심리학 법칙 중 힉의 법칙과 연결되어 있다. 지나친 개수의 선택지나 요소는 사용자에게 인지부하를 줄 수 있다. 따라서 가장 필요한 정보나 개요를 먼저 공개하고, 사용자가 의미를 파악한 후 필요한 정보를 더 자세히 탐색하게 함으로써 사용자의 인지부하를 막을 수 있다. 회원가입 시 사용자가 너무 많은 콘텐츠에 압도되지 않도록 약관의 제목만 보여주고 필요할 때 내용을 확인할 수 있도록 한 것이 하나의 예시가 될 수 있을 것이다. 여기에 해당하는 대표적인 UI 패턴에는 드롭다운, 단계적 정보 공개 (progressive disclosure)가 있다.
4. 모범의 원칙 (The principle of exemplars)
카테고리의 선택지들 중 일부가 스스로를 충분히 설명하지 않는 경우 콘텐츠의 일부를 예제로 사용해 사용자에게 그들이 어떤 정보에 접근하게 될 것인지를 보여준다. 이때 이미지가 특히 내용을 잘 나타낼 수 있어 유용하다.
– 카드 UI, 리스트, 온보딩(튜토리얼) 등이 포함된다. 카드 UI나 리스트는 사용자가 ‘더보기’를 누르거나 상세 페이지로 들어가기 전 콘텐츠의 대표적인 내용을 모은 개요를 제공해준다. 또, 처음 서비스를 사용하는 사람들은 선택지의 의미를 알기 어려울 수 있다. 온보딩은 이들을 대상으로 서비스를 사용할 때 꼭 필요한 콘텐츠만 모아 개요를 제공한다 (예: 슬랙). 그러므로 단계적 정보 공개의 개념도 포함된다고 볼 수 있을 것 같다.
5. 정문의 원칙 (The principle of front doors)
모든 사용자가 당신의 사이트의 홈페이지부터 들어가는 것이 아니므로, 그런 사람들만을 위해 사이트를 구축하지는 말자. 다른 페이지에 도착한 사람들에게도 탑승한 곳 어디에서나 유용한 정보와 탐색 도구를 볼 수 있는 기회를 제공하고 어디에서나 사이트(의 원하는 곳)로 접근할 수 있도록 한다.
– IA는 익숙한 곳에 익숙한 형태로 있어야 한다. 제이콥의 원칙과도 일부 연관되어 있다고 생각할 수 있다. 나는 이 원칙에서 가장 먼저 포털의 검색 엔진과 SEO 마케팅이 떠올랐다. 포털 검색을 통해 필요한 내용을 찾는 사람들은 홈페이지보다 그러한 콘텐츠를 담고 있는 상세 페이지에 먼저 방문할 확률이 높다. 예를 들어 이커머스 위주의 사이트는 검색에서 상세 페이지의 노출이 중요할 것이고, 미디어의 경우 주제에 맞는 콘텐츠 노출이 중요할 것이다. 그렇다면 사용자에게 익숙한 모양일수록 사용자가 사이트의 구성을 파악하고 인터렉션을 예측하기 쉬워질 것이다. 따라서 보편적인 형태의 IA는 사용자가 목적을 달성하는 데 도움을 준다.
6. 다중 선택의 원칙 (The principle of multiple classification)
사용자가 사이트에서 콘텐츠를 검색할 수 있는 다양한 방법을 제공하자. 이를 위한 두 가지 방법에는 검색과 최상위 메뉴바가 있지만, 사용자 중 일부는 단지 둘러보기를 원하거나 계층을 통해 탐색을 진행할 수 있다. 그러므로 IA가 그들의 요구를 충족하는지 확인하자.
– 굳이 어떠한 심리학 원칙을 가지고 오지 않아도, 이 원칙을 이해하는 데는 계단과 엘리베이터의 비유로 충분할 것 같다. 우리가 어떤 건물의 1층에서 꼭대기로 이동한다고 할 때 그 사이에는 항상 한 대(또는 여러 대)의 엘리베이터가 있다. 또 중앙 계단뿐 아니라 여러 비상구를 이용해 옥상까지 올라갈 수도 있다. 어쩌면 엘리베이터가 없이 중앙 계단만 있더라도, 아니면 계단 없이 단 한 대의 엘리베이터만으로도 원하는 곳으로 이동할 수 있을 것이다. 하지만 나뿐만 아니라 많은 사람들이 답답함과 불편함을 느낄 것 같다.
7. 집중된 내비게이션의 원칙 (The principle of focused navigation)
내비게이션의 일관성을 유지하자. 메뉴가 (그 메뉴가 뜻하는) 같은 영역과 연관되어 있는지 확인하고 주제를 섞어서 사용자를 혼란스럽게 하지 말자. 만약 당신이 제품 유형 메뉴를 제작하고 있다면 거기에 다른 서비스를 넣으면 안 되고, 메뉴가 탐색 목적을 가지고 있으면 기능이나 마케팅 항목을 포함하면 안 된다.
– IA의 네 가지 요소 중 하나인 ‘라벨링’과 연결된다. 라벨링이란 공통 범주의 콘텐츠에 이름을 붙이는 과정이다. 이름을 붙일 때는 그 콘텐츠를 대표할 수 있는 이름을 붙여야 하며, 상위 구조와 잘 어울릴 수 있도록 일관성을 지켜야 한다. 그래야 사용자가 원하는 콘텐츠가 있는 위치를 쉽게 찾을 수 있다.
내비게이션의 목적과 다른 주제가 섞여있는지, 하나의 이름 안에 서로 다른 주제의 콘텐츠가 서로 섞여있는지 확인할 수 있는 하나의 방법은 카드 소팅을 활용하는 것이다. 카드 소팅은 사용자가 생각하는 방식으로 콘텐츠를 묶고 이름을 붙이는 과정을 관찰하는 UX 방법론이다. 카드 소팅을 활용하면 내비게이션 설계 과정에서 유저의 멘탈모델을 반영했기 때문에 일관성과 통일성을 유지하는 데 도움이 된다.
8. 성장의 원칙 (The principle of growth)
처음 시작하는 콘텐츠는 앞으로 획득할 콘텐츠의 극히 일부에 불과하므로 사이트를 확장할 것을 염두해야 한다. 사이트에게 (콘텐츠를) 덧붙이고 유기적으로 성장, 발전할 수 있는 여지를 주어야 한다.
– 사용자들이 플랫폼 위에서 상호작용하면서 콘텐츠 양이 늘어나든, 사이트 자체의 기능이나 서비스 범위가 늘어나든 기업이 발전하는 한 사이트는 지속해서 확장된다. 따라서 좋은 IA는 방향성이 명확한 콘텐츠를 담고 있으며 나아가 서비스의 방향과 사용자의 니즈를 잘 풀어내야 한다.
Takeaway
이제까지 IA와 UI를 구분해 생각하고 있었습니다. IA와 UI는 다릅니다. 하지만 이번 아티클을 통해 UI는 IA의 구현이며, IA는 UI의 뼈대이기 때문에 두 가지는 편리한 사용자 경험을 설계할 때 서로 밀접한 연관을 갖고 있음을 알 수 있었습니다.
참고 | The Eight Principles of Information Architecture
웹, 모바일을 위한 I.A(Information Architecture, 정보구조도)
안녕하세요, Jlight입니다.
이번 시간에는 서비스 설계의 기초인 정보 구조도(Information Architecture) 에 대해서 알아보겠습니다.
I.A.의 기초 이론과 역할 그리고 구조도 작성법에 대해 알아보도록 하겠습니다.
그럼 본격적으로 들어가볼까요?
I.A(정보 구조도)란?
I.A.는 간단하게 말해서 서비스의 목차 역할을 수행합니다.
웹 혹은 어플리케이션이 어떻게 구성되는지 보여주며 어떤 기능의 화면으로 보여지는지를 전체적으로 보여주는 도구입니다.
이를 통해 개발자와 디자이너가 편하게 작업할 수 있도록 만든 문서이기도 하며
기존 웹 사이트처럼 복잡한 구조에서 사이트의 틀을 짜고 콘텐츠 구성 뿐만 아니라 디자인,개발의 일정 관리도 통합해서 진행하였기 때문에 역할이 중요하였습니다. 그러나 모바일 서비스가 많이지면서 한 페이지가 다수의 페이지 역할을 대신하면서
개발 페이지 목록의 역할이 강해지고 있는 추세 입니다.
자세하게 들어가기 전,
I.A.에 대해 간단하게 알아보도록 하겠습니다.
여기 아주 귀여운 강아지 모형이 있습니다!
이 귀여운 강아지 모형은 어떻게 구성되있을까요?
강아지 모형을 보면,
귀여운 머리와 둥글한 몸통으로 구성되어있습니다.
조금 더 자세히 들여다 볼까요?
머리를 보면, 머리에는 눈과 코, 입 그리고 귀로 구성되어 있습니다.
몸통도 그 안을 드려다 보면 발과 팔 그리고 꼬리로 구성되어 있죠!?
여기서 조금 더 자세히 들여다 보면
눈에는 왼쪽. 오른쪽 눈이, 코에는 왼쪽, 오른쪽 코가 아니라 코는 하나죠?
이처럼 더 자세히 들여다 보면 또 다른 구성요소가 존재합니다.
강아지의 모형을 보고 어떠한 구조로 되어있고
그 구조 안에 어떠한 구성요소로 만들어져 있는지 알 수 있듯
우리 서비스가 어떠한 구조로 되어있고 어떤 기능이 있으며 어떤 역할을 수행하는지
서비스에 대한 전체적인 구조를 짤 수 있는 것이 바로 I.A.입니다.
그렇다면 I.A.는 어떻게 작성 되어야 할까요?
I.A.설계 시 고려 사항
I.A설계 시 기획자는 User(사용자), Contents(컨텐츠) 및 Scenario(시나리오) 3가지를 고려하여 작성합니다.
우선 User(사용자)에서는 크게 3가지를 고려합니다.
1. 사용자가 기존에 어떠한 경험을 가지고 있는가
2. 우리 서비스에 왜 방문하고 어떤것을 얻고자 하는가
3. 사용자는 이용 중에 어떠한 패턴을 보이는지
우선 첫번째, 기존에 사용자의 경험을 우리 서비스에 담아야 합니다.
사용자가 우리 서비스에 들어왔다고 가정해봅시다. 그러나 우리가 구조를 설계할 때 기존 사용자가 가지고 있지 않던
새로운 구조를 가진 사이트를 기획했습니다. 완전히 새로운 배치로 새로운 구성 요소들을 배치 하였을때 사용자는 어떻게 느낄까요?
사이트가 어렵고 복잡하게 느껴질 것 입니다. 일반적인 사이트의 구조가 아닌 새로운 구조에 적응이 어렵기 때문입니다.
따라서 우리는 기존 사용자의 경험을 분석하여 설계 해야합니다.
또한 우리 서비스에 들어온 목적과 패턴을 분석함으로써 구성 배치를 사용자의 편의를 고려하여 설계합니다.
Contents(컨텐츠)에서는 두가지
1. 컨텐츠의 중요도가 공급자 중심인가 사용자 중심인가
2 사용자가 인지하고 있는 네이밍인가
우리가 구조를 짜고 컨텐츠를 구성할 때 중요한 요소가 공급자 중심인가 사용자 중심인지를 결정해야합니다.
이게 어떤 말인지 예시를 통해 알아볼까요?
만약 우리가 음악을 들을 수 있는 어플리케이션을 만든다면
월 구독을 통해 수익을 벌어들일겁니다. 즉 구독 서비스가 우리의 수익모델입니다.
그러면 우리는 더 많은 사용자들이 구독을 할 수 있도록 구독에 대한 알림 혹은 배너를 노출시킬 것입니다.
그러나 이러한 배너 노출은 사용자 관점에서 좋은 UX를 제공하지 못합니다.
구독을 장려하는 배너 대신에 우리가 다른 컨텐츠 혹은 정보를 제공해준다면 사용자에게 더 좋은 가치를 제공할 것입니다.
이처럼 우리는 구조를 짤 때 우리 공급자 중심인지 혹은 사용자 중심인지를 결정해야 합니다.
또한 이 전에 설명한 것 처럼 기존 경험을 토대로 구성해야 하기 때문에 익숙한 네이밍을 사용해야합니다.
마지막으로 정보의 시나리오가 어떻게 전달되어야 하는지를 고려함으로써 정보 구조도를 설계합니다,
I.A.의 종류
웹 사이트 / 모바일에 따라 I.A의 기본적인 구조가 달라집니다.
이것을 구분하기 전 I.A의 보여지는 모양에 따라 크게 2가지로 나누어집니다.
트리 구조의 I.A.
마인드맵 혹은 트리구조의 I.A.
마인드맵이나 트리 구조 를 이용하여 고객의 동선 별 화면 구조를 정의합니다.
사실 I.A의 산출물은 대부분 엑셀 형식으로 자세히 작성하는데, 이를 작성하기 전에
조금 더 간편하고 직관적으로 구조를 작성할 수 있다는 장점이 있습니다. 이 때 우리는 한 화면 내 통합할 수 있는 기능들을 통합시키면서 구조의 깊이(depth)를 최소화 합니다.
엑셀 형식의 I.A
출처 : 웹 어벤져스
들어가기에 앞서 한가지 알아야할 점이 있습니다.
”
정보 구조도에는 정답이 없습니다.
”
정보 구조도의 형식과 틀은 상황에 따라 유동적으로 변하기 때문에 I.A가 무엇인지 그리고 어떠한 역할을 하는지 이해하고
상황에 맞게 짜는 것이 중요합니다.
다시 들어가 볼까요?
설계서 상단을 보면 도메인, 개발언어, 호스팅, 개발 기한이 적혀져 있습니다.
도메인에는 우리 웹 사이트의 주소를 작성, 어떠한 언어로 개발되며 호스팅 및 보안 서버는 어떠한 것을 이용하는지.
개발 기한이 언제인지 작성합니다. 사실 이 부분에서 간단히 프로젝트 담당자 및 프로젝트 기한, 프로젝트 명을 작성하는 경우도 있으니 참고해주세요.
메인으로 들어가보겠습니다. 항목별로 순서대로 좌측부터 접근하면,
Depth(깊이), Tab/서브 플로우, Code, 페이지 정의/요구사항, 세부 사항, Page, 개발 구분, 논의 사항으로 구성됩니다.
우선 Depth는 서비스의 전체적인 틀과 깊이를 작성합니다,
이 문서에서는 페이지가 최대 3개의 Depth로 구성되며
1Depth에서는 회사소개, 사업분야, 포트폴리오, 고객지원, 마이페이지, 회원가입으로 구성되어있습니다
회사 소개 안에는 또 다른 Depth가 존재하며 소개, 인사말, 현역소개, 오시는 길으로 구성됩니다.
따라서 Depth에서는 문서의 깊이 별로 어떠한 구성 요소가 존재하며 Depth별로의 컨텐츠의 네이밍을 포함합니다.
다음은 Code입니다. 페이지명 또는 화면 코드를 작성하며 이는 규칙으로 정의, (예시 : Order001B)
화면에 대한 네이밍을 토대로 번호를 구성하여 작성합니다. 이 문서에서는 화면에 네이밍 없이 단순히 1.1, 1.2, 2.1 등으로 구성하였습니다.
페이지 정의/요구사항에서는 화면에 대한 설명을 작성하며
Page에서는 그 페이지의 개수를 표현합니다. 게시판 형태라면, 몇 페이지 까지 페이지를 구성하는지 표시하는 것 처럼 이곳에서 이를 작성합니다. 그리고 개발 구분을 통해 전체적인 진척도 파악 및 개발 현황을 보여줍니다.
각 화면 요소에 대해 얼마큼 개발이 완료되는지 전체적인 프로젝트 일정 관리를 I.A를 통해서 할 수 있습니다.
논의 사항에서는 항목 별로 상의 되어야 할 정보를 작성합니다.
지금까지 하나의 I.A의 예시를 바탕으로 전체적인 흐름을 설명하였습니다.
그러나 사실 이러한 엑셀 형식의 I.A는 모바일에서는 작성하기에 어려움이 있습니다.
그렇다면 모바일 서비스는 I.A를 어떻게 작성해야 할까요?
모바일을 위한 Information Architecture
앱 메뉴 구조도 출처 : 세균무기
모바일에서는 다음과 같이 서비스의 흐름 및 네비게이션 바(없으면 생략)를 포함하여 구조를 작성합니다.
앞서 설명 드린 트리 구조와 동일합니다.
처음부터 볼까요?
우선 어플리케이션을 처음 시작할때 보여지는 스플래쉬 화면에서 튜토리얼을 거쳐 로그인/회원가입 페이지로 넘어갑니다.
여기서 인증을 거치면 프로모션 팝업이 나타나며 홈 화면으로 넘어갑니다.
화살표(->)를 통해 흐름을 나타내는 것을 알 수 있습니다.
홈 화면으로 넘어가면 네비게이션 바가 보입니다.
여기서 네비게이션 바는 사용자가 원하는 정보를 빠르고 정확하게 검색하고, 정보와 정보 사이의 이동을 원활 하게 돕기 위해 제공하는 것으로 검색기능, 사용자위치정보, 리스트메뉴, 탭메뉴, 토글 메뉴, 사이트맵 등의 체계를 말합니다.
카카오톡의 네비게이션바
다시 I.A.로 넘어가볼까요?
노란색 박스로 표시된 영역은 네이게이션 바의 구성 요소를 설명합니다.
그 박스 밑에 적힌 영억은 그 화면에서 들어가는 정보들을 표시합니다.
홈 메인 화면 안에는 알림, 사용내역, 보내기, 입출금 등의 내용이 표시됩니다.
이 화면이 단순히 구조와 네이밍을 적고 간단한 기능을 적었다면
앱 상세 구조도를 통해 각 구성요소에 대한 자세한 설명이 포함됩니다.
앱 상세 메뉴 구조도 출처 : 세균무기
전 그림에서 그린 I.A.보다 더 세부적인 내용을 포함합니다.
보내기 기능 안에서도 보안 비밀번호 등록, 이체 정보 등이 있다는 것을 자세하게 설명합니다.
단순히 앱 메뉴와 흐름을 설명하는 것과 비교해 더욱 자세한 내용을 포함하고 있는 것이 바로 앱 상세 메뉴 구조도입니다.
보다 상세한 내용과 서비스의 전체적인 흐름을 설명할 수 있습니다.
”
결국 I.A.는 개발자와 디자이너를 위한 도구이다.
”
I.A.를 통해 우리 서비스의 전체적인 구조를 파악할 수 있다고 말했습니다,
디자이너는 이를 통해 우리 서비스가 어떤 구조를 가지고 있으며 각각의 뷰가 담는 정보들을 바탕으로 와이어프레임이라는 청사진을 작성하게 됩니다. 사실 와이어프레임은 기획자가 작성하는 경우가 대부분인데
디자이너보다 UX적으로 약하기 때문에 디자이너가 뷰를 보고 재수정하는 작업을 거치게됩니다.
재수정 작업에서 구조도가 없다면 정해진 틀에서 일부 배치만 수정하겠지만, 구조도를 기반으로 작성을 한다면
보다 사용자 친화적인 서비스 설계에 용이하며 새로운 틀의 서비스를 만들 수 있습니다.
개발자 역시 I.A를 통해 서비스의 전체적인 틀을 잡으며 안에 구성된 정보들을 바탕으로 개발에 착수합니다.
결국 기획자는 정확한 I.A.를 기반으로 디자이너 및 개발자와 소통해야 하며 원할한 개발 환경 조성을 할 수 있습니다.
(스토리보드라는 설계의 최종 산출물이 있는데 이는 추후 포스팅에서 자세히 다루어보도록 해요:) )
이번 포스팅을 통해 서비스 설계의 첫 단추인 I.A.에 대하여 알아보았습니다.
처음 접해보셨다면 당연히 어려우셨을 것이며 알고 계신 분들은 한가지 의문이 들 수 있습니다.
나는 저렇게 안짰는데? 당연합니다.
아까 설명드렸듯이 I.A에는 정답이 없습니다. 우리 서비스 그리고 팀 환경과 역량의 설계서를 작성해야 합니다.
다음 포스팅에서는 서비스 설계의 청사진인 와이어프레임에 대하여 알아보겠습니다.
UX STUDY 6 : 정보 구조 설계 IA(Information Architecture)
UX STUDY 6
정보 구조 설계 IA(Information Architecture)에 대하여.
들어가며.
어려운 정보 설계 때문에 고민이라면
요즘 내게 주어진 과제가 있다. 바로 ‘오대전’ 전시의 홈페이지를 리뉴얼 하는 팀프로젝트인데, 사이트를 개설하기 전 정보구조를 설계하고 있다. 논점은 ‘지난 사이트들의 정보를 담은 아카이빙의 성격’과 ‘여러가지 카테고리를 가지고 있는 성격’ 그리고 올해의 전시까지 설명해야하는 목적을 가지고 리뉴얼에 힘쓰고 있다. 그 과정중에 여러가지 하위구조가 얽혀있어서 구조를 짜는데 고려해야하는 사항이 많았는데, 쉽지 않았다. 나처럼 어려움을 겪고 있는 사람들에게 정보설계를 이해한다면 보다 설계에 도움이 될 것 같다. 정보설계에 관한 주제로 간단히 인용하고, 친절하신 지식인들의 글들의 링크를 걸어두고자 한다.
정의
정보구조 설계란 무엇인가요?
IA(Information Architecture, 정보구조)는 정보를 다양한 목적, 즉 이용자의 직업, 기능, 정책 등에 따라 이해하기 쉽게 분류하는 서비스 구축의 가장 기초적인 작업이다. 구조와 레이블링, 네비게이션, 콘텐츠 설계, 검색 등의 5가지를 고려하여 정보를 구조화한다.
보다 경직된 글이지만, 정의이기에 한번 간결하게 짚고 넘어가기에 좋은 글입니다.
출처: imyeonn 블로그
UI정보구조 설계 / 1. 정보설계 구성
더 면밀하게 용어 까지 정리하면서 설명하는 글입니다.
UI 정보구조 설계하기 (LM0803020911_16v2.1) 정보설계 정보설계의 목적은 사용자와 앱의 상호작용을 원활하.. haanaaedu.tistory.com
정보구조, IA (Information Architecture) 설계하기
처음 UX/UI를 접하게 되면 가장먼저 정보구조 설계하는 방법을 배우게 됩니다. (물론, 제일 처음이 아닐수도 있어요.) Information Architecture, 즉 정보를 설계한다는 의미인데요. 굳이 건축용어가 들어간이유..
biccard.tistory.com
정보구조를 설계하는 방법에 대해 쉽게 설명하는 글입니다.
IA, 이렇게 그리면 되나요? IA, 정보 설계에 대해 곱씹어보고 깨우쳐 보는 글입니다. seanlion.github.io
예시
네이버뮤직 앱 IA(정보구조) 분석 연습
IA를 배우기 위한 기획 습작입니다. 네이버뮤직 앱으로 연습한 글입니다.
간단한 정의와 함께 네이버뮤직을 분석한 글을 볼 수 있어 이해하기 쉬웠습니다.
네이버뮤직 앱 IA(정보구조) 분석 연습 네이버뮤직 앱 IA(정보구조) 분석 연습 imyeonn.github.io
같은 블로그의 티몬 분석글이다. 위의 글보다 더 면밀하고 분석적이다.
위의 글에서 갈증이 느낀다면 이 글을 참고해도 좋을 것 같다.
결론.
배운만큼 눈이 틔인다.
실제로 겪고 있는 과제기도 하고 막막했는데, 정보구조 설계라는 좋은 솔루션이 있다니 행복할 따름이다. 평소앱을 사용할때에도 연습해보고, 다양한 사례들을 가지고 해보는 것도 좋은 방법인것 같다. 위의 지식들을 아낌없이 나눠주신 분들께 감사하다. 오늘은 정보구조에 관한 이야기였다면 다음은 인터랙션디자인의 글을 들고올 예정이다.
1. 정보설계 구성
UI 정보구조 설계하기 (LM0803020911_16v2.1)
정보설계 구성
앱 UI/UX 디자인 개발에 필요한 요소를 기반으로 전체적인 정보설계를 구성할 수 있다.
정보설계
정보설계의 목적은 사용자와 앱의 상호작용을 원활하게 하여, 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 있도록 하는데 있다. 사용자 요구사항으로부터 도출된 콘텐츠와 기능구조를 바탕으로 하여, UI 구조와 내비게이션(navigation), 레이블링(labeling) 체계를 정립하는 과정이다. 1976년 정보설계(Information Architecture, IA)라는 개념을 처음으로 언급한리처드 사울 워먼(Richard Saul Worman)은 정보설계를 “데이터를 사람들이 이해할 수 있는 정보로 바꾸는 것.”이라고 정의하였다.
1. 정보걸계의 정의
정보설계가인 루이스 로젠펠드(Louis Rosenfeld)와 피터 모빌(Peter Morville)은 정보설계의 핵심을 다음 세 가지로 정의한다.
(1) 사용자(user)
사용자의 작업, 니즈, 정보 탐색 행동과 경험을 중심으로 하여, 사용성과 검색성을 향상할 수 있게 콘텐츠를 분류하고 조직화하는 것
(2) 콘텐츠(contents)
사용자가 이용하는 콘텐츠의 크기와 형태, 구조, 조직을 말하며, 이러한 콘텐츠에 사용자가 직관적으로 접근하고 업무 처리가 용이하도록 문서 형식과 분류, 앱의 구조, 콘텐츠 관리, 내비게이션, 레이블 작성 등 정보 공간을 설계하는 것
(3) 맥락(context)
사용자의 환경에 대한 고려로서 사용자의 요구 반영이 필요하며, 이와 함께 정보 제공자의 환경으로 비즈니스적 목표와 요구, 기술, 제약조건에 대해 고려하는 것
2. 정보설계(IA)의 구성 요소
(1) 조직화 시스템(organization system)
유사하거나 관련성이 있는 정보들을 몇 개로 분류하고 범주화하여 집단화(grouping)하는 방식으로 정보의 체계를 정립하는 것을 말한다. 앱에서 제공하는 수많은 콘텐츠들을 자료의 성격에 따라 그룹핑하여 사용자가 직관적으로 정보를 찾을 수 있게 한다.
(가) 계층구조
대부분의 웹 사이트와 모바일 웹에서 가장 많이 사용되는 구조로서 가장 효과적인 구조로 알려져 있다. 최상위 페이지에서 하위 페이지는 특정 주제 아래 계층을 가지고 있으며, 논리적인 연결 관계로 구성되어 있어 사용자에게 익숙한 구조이다. 또 정보구조 설계자의 입장에서도 정보를 잘 조직화할 수 있고 간단하면서도 보편적인 구조이기도 하다. 하지만, 페이지 간에 정보의 분류가 잘못 이루어져 있을 경우 앱을 이용하는 사용자가 정보를 찾는 과정에서 어려움을 겪을 수 있으며, 사용자가 길을 잃는 현상이 발생할 수 있다. 따라서 계층구조를 설계할 때는 다음의 사항들에 대해 유의해야 한다.
계층 분류의 상호 배타성
계층 분류는 상호 배타적이어야 한다. 콘텐츠의 특성 상 완벽하게 배타적으로 나눌 수 없는 경우가 많이 발생하기 때문에, 배제와 포함에 대한 기준을 가지고 균형을 잘 유지해야 한다. 콘텐츠를 분류하는 기준에 따라 주제별, 또는 종류별로 정리하여 분류할 수도 있다. 계층 구조도의 폭과 깊이의 균형
계층 구조도에서 폭과 깊이의 균형이 있어야 한다. 폭은 사용자가 최상위 페이지에 접근했을 때 선택할 수 있는 옵션들의 수이며, 깊이는 계층 단계의 수이다. 계층의 폭이 넓고 계층 단계의 수가 너무 얕으면 사용자는 지나치게 많은 옵션으로 인해 오히려 혼란을 느끼게 되며, 이와 반대로 계층의 폭이 너무 좁고계층 단계의 수가 깊으면 사용자들은 원하는 정보를 찾기 위해 너무 많은 클릭을 해야만 한다. 인지이론에 의하면 사람이 한 번에 기억할 수 있는 정보의 수는 다섯 개에서 아홉 개 이내로 알려져 있다. 따라서 폭은 7개 내외의 인지규칙을 따라야 하고 깊이는 4~5단계 이하로 설계하는 것이 바람직하다. 그리고 지속해서 콘텐츠를 추가해 나갈 예정이라면 넓고 얇은 구조를 선택하는 것이 효율적인 방법이 된다.
(2) 레이블링 시스템(labeling system)
콘텐츠와 기능에 대표성을 부여할 수 있는 명확하고 친밀감이 있으며 일관된 이름을 지어주는 작업으로 사용자가 원하는 것을 쉽게 찾을 수 있도록 보편타당성이 있어야한다. 그 기준은 서비스 제공자가 아닌, 실제 앱을 이용하는 사용자의 생각과 언어를중심으로 레이블링 시스템을 구축해야 한다.
(3) 내비게이션 시스템(navigation system)
사용자가 원하는 정보를 빠르고 정확하게 검색하고, 정보와 정보 사이의 이동을 원활하게 돕기 위해 제공하는 것으로 검색 기능, 사용자 위치 정보, 리스트 메뉴, 탭 메뉴, 토글 메뉴, 사이트맵 등의 체계를 말한다. 모바일 앱의 UX에 있어서 내비게이션은 사용자가 앱에서 태스크를 쉽게 달성할 수 있도록 도와야 하는 것으로서 사용자와 콘텐츠의 특성을 고려하여 사용편의성을 제공해야 한다.
3. 정보설계(IA)의 프로세스
(1) 사용자의 목적과 콘텍스트, 콘텐츠 및 비즈니스 목적과 이슈에 대한 이해
사용자 리서치 결과를 통해 도출된 사용자의 요구사항 및 사용자에 대한 충분한 이해가 전제되어야 한다.
(2) 내비게이션 시스템, 레이블링 시스템, 정보의 분류와 조직화
사용자의 요구사항을 기반으로 사용자의 이용 목적에 따라 정보 체계를 구조화하고 내비게이션, 레이블링 등을 디자인한다.
정보구조설계 IA (Infromation Architecture)
정보설계에 대해 잘 설명되어 있는 영상이라 데려와 보았다.
정보구조설계는 크게 5가지 파트로 나뉜다.
1. Organization System
2. Navigation System
3. Labeling System
4. Search System
5. Contents Design
1. Organization System
“모든 이해의 시작은 분류에서 출발한다”
정의 : 정보를 분류하는 것
– 이용자별, 작업지향별, 기능별, 상징별, 은유형 등으로 정보를 구체적으로 분류한다. (ex. 쇼핑몰의 여성복, 남성복)
– “사용자가 얼마나 이해하기 쉽게 접근할 수 있는가” 를 위한 가장 기초적인 작업이다.
2. Navigation System
“네비게이션은 목적 중심적이며 행동 지향적이다.”
정의 : 웹사이트의 공간을 사용자의 두뇌에 인식 시키는 것
– 여기는 어디인가?
– 갈 수 있는 곳은 어디인가?
– 갈 수 있는 방법은 무엇인가?
– 예전에 갔던 곳은 어떻게 다시 갈 수 있을까?
3. Labeling System
“레이블이 아닌 레이블링 시스템이다.”
정의 : 레이블링이란 메뉴의 명명법으로 컨텐츠에 있는 내용을 지시 또는 설명하는 텍스트
– 전문용어 사용은 지양하고 고객이 이해하기 쉬운 고객의 언어를 사용해야 한다.
– 일관성을 유지한다. (ex. 버튼에는 ‘Search’ 로 되어있고 다른 페이지에서는 ‘검색’이란 단어 사용하면 안 된다.)
4. Search System
“안 나오면 바로 나간다. 반드시 필요한 요소이다.”
1. Knowing-item Searching : 구체적인 목적을 가지고 검색하는 행위
2. Casual-Browsing : 우연에 기인한 검색, 대략적인 개념을 가지고 사이트 이곳저곳을 찾아다니는 행위
3. 존재가능성 검색 : 내가 찾는 정보가 있는 사이트인지 아닌지 파악하는 행위. 아닐 시 수 초 안에 이탈한다.
4. 포괄적이며 전반적인 검색 : 예를들어 ‘웹기획의 전반적인 분야에 대해서 정보를 찾아보고 싶다’라는 생각으로 한 개 이상의 사이트에서 정보를 포괄적으로 수집하는 행위
5. Contents Design
“사용자가 가장 접근하기 쉽게 배치하자.”
정의 : 컨텐츠 설계 및 배치, 구체적인 UI 기획
– 전략적으로 좌상단, 중상단, 좌중단 순으로 주요 정보를 배치한다.
– 이 사이트의 목적은 무엇이며 무엇을 봐야 하는지 2~3개 컨텐츠를 집중한다.
– 사용성이 적은 컨텐츠는 과감히 삭제하고 메뉴로 브라우징 할 수 있도록 한다.
– 디자인적인 요소가 컨텐츠 설계, 배치에 영향을 주지 않도록 한다.
– 컨텐츠와 컨텐츠가 배치됨으로써 전체적인 의미를 찾을 수 있도록 한다.
웹기획은 정보구조(I.A. Information Architecture) 설계가 절반이다.
웹 기획자라는 직업을 가지고 있는 동안 절대로 손에서 놓지 못할 문서가 두 가지 있다. 바로
– 정보 구조 설계 (Information Architecture = I.A.) 와
– 화면 설계 (스토리보드 = Story Board = S/B = 혹은 User Interface = U.I. = 혹은 외국에선 WireFrame 이라고도 한다)
이다.
전략 기획이나 컨설팅을 담당하는 이라면 상황이 조금 다르겠지만, 국내의 웹 에이젼시 업계에서 근무를 하다보면 지겹도록 들어야 하고, 지겹도록 만들어야 하고, 끝도 없이 고.쳐.야. 하는 문서이다.
만약 여러분이 초급 웹기획자라면 머리 속에 이 두 가지 문서는 각인시키기를 바란다. 웹 기획자의 업무 범위와 작성해야할 문서는 끝도 없지만, 앞으로 여러분을 가장 괴롭힐 것이고, 가장 보람차게 만들 문서들이기 때문이다.
이번 글에서는 IA 설계 방식에 대한 기본적인 사항을 살펴보고, 몇 개의 샘플을 제공하도록 하겠다.
조금 의아할수도 있지만 먼저 한국의 도서분류 체계인 “한국십진분류표”를 보자.
한국십진분류표 보기
닫기
한국십진분류표 ( KDC )
가. 분류 번호 000 총류 100 철학 200 종교 010 도서학, 서지학 110 형이상학 210 비교종교 020 문헌정보학 120 220 불교 030 백과사전 130 철학의 체계 230 기독교 040 강연집, 수필집, 연설문집 140 경학 240 도교 050 일반 연속간행물 150 동양(아시아)철학, 사상 250 천도교 060 일반 학회,단체,협회,기관 160 서양철학 260 신도 070 신문,언론,저널리즘 170 논리학 270 바라문교, 인도교 080 일반 전집, 총서 180 심리학 280 회교(이슬람교) 090 향토자료 190 윤리학, 도덕철학 290 기타 제종교 300 사회과학 400 순수과학 500 기술과학 310 통계학 410 수학 510 의학 320 경제학 420 물리학 520 농업, 농학 330 사회학, 사회문제 430 화학 530 공학, 공업일반 340 정치학 440 천문학 540 건축공학 350 행정학 450 지학 550 기계공학 360 법학 460 광물학 560 전기공학, 전자공학 370 교육학 470 생명과학 570 화학공학 380 풍속, 민속학 480 식물학 580 제조업 390 국방, 군사학 490 동물학 590 가정학 및 가정생활 600 예술 700 언어 900 문학 610 건축술 710 한국어 810 한국문학 620 조각 720 중국어 820 중국문학 630 공예, 장식미술 730 일본어 830 일본문학 640 서예 740 영어 840 영미문학 650 회화, 도화 750 독일어 850 독일문학 660 사진술 760 프랑스어 860 프랑스문학 670 음악 770 스페인어 870 스페인문학 680 연극 780 이탈리아어 880 이탈리아문학 690 오락, 운동 790 기타 제어 890 기타제문학 900 역사 910 아시아 920 유럽 930 아프리카 940 북아메리카 950 남아메리카 960 오세아니아 970 양극지방 980 지리 990 전기
나. 레이블
레이블은 책의 분류, 목록이 끝난후 정리 마지막 단계에서 책등에 부착하는 것으로서 책의 밑부분에서 약 1.5㎝ 위에 부착한다. 또한. 레이블은 책의 배열과 식별을 쉽게 하기 위해서 10구분의 색깔을 사용하고 있습니다. 예) 10 ⇛ 대주제에 의거하겨 810은 한국문학을 의미 R ⇛ 별치기호 : 자료의 성격을 의미 813.6 ⇛ 분류기호 : 자료의 주제를 의미 조73ㅌ ⇛ 저자기호 : 자료의 저자사항을 의미 v.2 c.2 ⇛ 권차와 복권 : v.2는 자료의 권차를 의미하고, c.2는 자료의 복권을 의미 800 ⇛ 대주제 : 800은 문학을 의미 닫기
상당히 체계적임을 알 수 있다. 문헌정보학뿐 아니라 의료체계, 동/식물 체계 등의 관련 자료를 더 찾아보면 분류들이 상당히
체계적으로 설계되어 있음을 알 수 있다.
위 정보체계가 너무 flat 하다고 느껴지면 이번에는 iOS용 App을 개발하고 테스트할 때, 발생할 수 있는 시나리오를 좀 더 비주얼하게 표현한 Mind Map 형태를 보자. [아래의 모든 이미지들은 클릭하면 원본 크기로 볼 수 있다]
App의 “테스팅”을 놓고 처음에는 [Hardware] [Network] [Data] [Software] [Audio/Video] [Functionality] [UI] 등으로 분기되고 각각의 항목들은 다시 상세 항목들로 분기된다. 이렇게 생각의 흐름 혹은 경우의 수를 따라가면서 다양한 계층과 갈림길들이 나온다. 실제 이런 Mind Map은 프로젝트를 관리할 때도 많이 사용되는 편이다. 앱스토어나 구글 플레이에서 Mind map을 검색하면 무료 어플을 많이 접할 수 있으니 사용해 보길 바란다.
그럼 마지막으로 이번에는 Web page 에서 사용되는 요소들을 좀 더 인지하기 쉽게 계층적으로 정리한 또 하나의 형태를 보자.
UI(User Interface)를 구성하는 Object는 [Widget] [MenuItem] [TreeItem] 으로 되어 있고, 그 중 위젯의 구성 요소를 상세하게 보여주고 있다. 그 하부 구조, 그 하부 구조 식으로 상당히 잘 정리가 되어 있다.
기본적으로 !!! Web의 정보 구조, 즉 우리가 이야기 하는 I.A. Information Architecture는 이런 형태를 보이게 된다.
예를 들어
를 보면 좀 더 이해가 될 거이고,
아주 허접하지만 이렇게도 정리될 수 있을 것이다.
도서를 분류하는 십진분류법부터 설명을 시작한 이유를 조금은 눈치챘는지 모르겠다.
중요한 것은 정보를 분류하는 체계 혹은 방법을 익히는 것이다.
인터넷에서 웹기획 관련 많은 게시물들이 I.A. 설계에 대해
“직관적으로 설계하라” “고객의 마음을 움직여라” 등 … 조금은 뜬구름 잡는 이야기들을 많이 하는데
미안한 소리지만 Hierachy에 대한 명확한 인지가 없는 상태에서의 IA 구성은 모두 모래성과 같을 뿐이다.
내가 자주 사용하는 방법은
1) 가지고 있는 모든 정보(요소)의 나열
2) 성격이 흡사한 것들끼리 Grouping
이다.
보통은
[회사 혹은 소개] [핵심 제품 혹은 서비스] [커뮤니티] [고객지원] [마이페이지] [자잘한 유틸리티(회원가입 등등)]으로 구성되는 경우가 일반적이다.
여러분이 정말 실력있는 웹 기획자나 컨설턴트가 되길 원한다면 이러한 분류체계를 많이 접해보고 그 탄탄한 기본기를 먼저 쌓아보길 바란다.
일반적인 회사 소개 사이트라면 [회사소개] [제품/서비스] [고객지원] [커뮤니티] [기타 유틸리티] 등의 기본 구조를 가지고 있고, 쇼핑몰이라면 상품 카테고리와 제품 구매 및 고객지원에 대한 메뉴들을 기본으로 가지게 될 것이다.
여기까지 성실하게 글을 읽은 당신이라면 이제 아래 내용을 더욱 잘 이해하게 될 것이다.
아래는 http://wyzmeeting.com 사이트의 IA 이다.
IA는 모두 비슷비슷하지만, 반대로 꼭 정해진 형태가 있는 것은 아니다. 프로젝트에 따라, 상황에 따라 맞춰 사용하면 된다.
위 IA를 조금 설명하자면,
* 제일 좌측에는 Main (page), Primary Menu, Footer(사이트 제일 하단의 Copyright이 있는 부분) 등으로 나눴고,
* 계층 구조, 즉 메뉴들의 종속 관계를 4.3.1 등의 형태로 표현하였다.
* 1depth, 2depth로 메뉴명을 정리하였고,
* 각 메뉴의 고유 ID, 형태(단순 html인지 program인지) 등을 표기하고,
* (프로젝트 종료 시점인지라…) 각 파트들의 작업 진척도를 노란색 칸에 표기하였다.
이 파일은 실제 프로젝트에 사용된 것이라 원본을 제공하지 못하고
대신 아래 두 개의 파일을 제공하니, 다운받아 유용하게 사용하길 ….
하나는 korea.go.kr 에서 사용되었던 IA이고, 다른 하나는 일반 양식이다.
국가대표포털_I.A.xls
프로젝트명_메뉴정의서_v7.xls
Philosophiren.
Web과 관련된 고민이 있다면, 지금 이 블로그의 운영자와 상의하세요.
* 웹 전략 컨설팅
– 현재 운영중인 Web 혹은 온라인 관련 문제점 분석, Business Process 재정립, 시사점 도출
– 경영 목표와 전략을 뒷받침하는 Online Business 전략, 중소/중견 기업을 위한 현실적인 BPR/ISP,
– CRM, 전자결재, 신규 사업을 위한 시스템 통합/구축 방안
* 웹/모바일/App 구축 및 리뉴얼, 온라인 마케팅
– Web, Mobile, App 신규 구축 및 리뉴얼
– Web/Mobile 운영(Site Maintenance) 지원 – Brand Strategy + Brand Architecture + Brand Maintenance를 통한 온라인 통합 브랜딩, 소셜 마케팅 전략
>> www.PhiloBiz.co.kr을 방문하여 Contact us 나 Project 문의 메일을 이용해 주세요.
키워드에 대한 정보 정보 구조 설계
다음은 Bing에서 정보 구조 설계 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 UX – 정보구조설계 (Information Architecture)
- 자바스크립트
- javascript
- html
- html5
- 웹
- 웹개발
- 기초
- 웹개발기초
- 자바스크립트 기초
- html 기초
- 자바스크립트 팁
- css
- vue.js
- react
- react.js
- angular
- 안드로이드
- ios
- 제주도
- 디지털노마드
- 소프트웨어
- ux
- user experience
- information architecture
- ia
- 정보구조
- 정보구조설계
UX #- #정보구조설계 #(Information #Architecture)
YouTube에서 정보 구조 설계 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 UX – 정보구조설계 (Information Architecture) | 정보 구조 설계, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
