brunch

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 스타트업 지식공간 Jan 19. 2023

#2 웹 디자인을 위한 IA 작성하기

Don't build a maze, build a website!

1편에서 내용이 이어집니다.

Hierarchy design patterns

디자인 패턴은 콘텐츠 구조화 방법입니다. IA 제작이나 웹사이트 재디자인 시작 단계에서 나아가야 할 방향을 정하는 것입니다. IA 디자인 패턴에는 여러 종류가 있으며, 웹사이트 콘텐츠의 타입, 양, 상관관계 등에 따라 달라집니다.

Single page model

단 하나의 기능을 수행하는 모델을 말합니다. 어플을 다운로드하거나 연락처를 안내하는 것이 대표적입니다.

Flat structure

모든 페이지들의 중요도가 같을 때 ‘선형구조’를 지니게 됩니다. 브로셔 웹사이트가 대표적인 선형구조 패턴을 지닌다고 생각하면 됩니다. [예시 보러 가기]

출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/

Index pages pattern

홈페이와 홈과 동일한 중요도를 가진 서브페이지로 이루어져 있습니다. 대부분의 경우에 활용 가능한 깊이를 가지고 있기 때문에 가장 흔한 웹사이트 구조입니다.

출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/

Strict hierarchy pattern

위의 Index pages pattern과 비슷하지만 더 많은 가지들이 존재합니다. 각 서브페이지는 한 개 이상의 서브페이지들로 구성되어 있습니다. 즉 <Home page - Subpage(Parent page) - Child page> 구조를 이룹니다. 보통 이 구조는 이커머스 웹사이트나 블로그, 미디어 웹사이트처럼 대량의 콘텐츠가 존재할 때 차용됩니다.

출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/

Co-existing hierarchies pattern

위에서 설명한 Strict hierarchy pattern과 유사하지만, 한 가지 차이점이 있습니다. 바로, 어떤 Parent page(홈페이지 아래의 서브페이지)에서도 Child page에 쉽게 접근할 수 있다는 것입니다. 많은 정보들이 여러 개의 Parent page에 속한다면, 소위 Overlapping 된다면, Co-existing hierarchies pattern으로 설계를 해야 합니다.

출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/

디자인패턴이 결정되었다면 사이트 매핑을 시작해도 되지만, 보통 사이트 매핑 이전에 마인드 매핑이 선행되곤 합니다.

Mind Mapping

마인드 매핑은 디지털 프로덕트의 상세한 기능 설명을 포함하여 페이지별 관계를 그려내는 것을 말합니다. 마인드 매핑은 다른 사람이 논리적인 흐름에 따라 콘텐츠의 구조와 관계를 쉽게 이해할 수 있도록 하는데 매우 유용합니다. 웹이나 앱에 마인드 매핑을 적용해 보고 프로덕트의 요소들을 시각적이고 논리적으로 표현해 보세요.

이제, 드디어 사이트 매핑의 차례입니다.

Site Mapping

사이트 매핑은 콘텐츠의 위계를 보여주고 내비게이션을 그려내는 방법입니다.

포트폴리오 웹사이트의 사이트 맵 (출처: https://br.pinterest.com/pin/42784265183016586/)

사이트 맵에는 모든 콘텐츠들의 위계 구조를 시각적으로 표현해야 합니다. 종이에 하거나 WriteMaps 또는 MindNode라는 툴을 이용해도 좋습니다.

사이트 맵은 보통 IA diagrams라고 불리는 다이어그램 형태로 그립니다. 실제 웹사이트 안에는 sitemap.xml 또는. html 파일이 들어있는데, 이는 검색엔진이 웹사이트 구조를 더 잘 이해하고 정보를 수월하게 찾을 수 있도록 돕습니다. SEO의 핵심 중 하나입니다.

XML 사이트 맵 사람들이 읽고 이해하는 것이 거의 불가능한 반면, HTML 사이트 맵은 일반적인 웹사이트와 비슷한 모습이기 때문에 검색엔진 로봇은 물론 사람도 읽기 편하게 만들어져 있습니다.

이제 프로토타이핑에 돌입하기 위한 마지막 단계가 남았습니다.

5. 향후 개발을 위한 UI 프로토타입을 제작하라

비록 사이트 맵이 IA 설계의 첫 번째 프로토타입인 것은 맞지만, 더 발전된 형태의 프로토타입이 필요합니다. 바로, wireframing과 data modeling을 통한 프로토타이핑입니다.

Wireframing

사이트 맵이 콘텐츠 구조의 도식화라면, 와이어프레임은 완성된 모습을 볼 수 있게 해 줍니다. IA에서의 와이어프레이밍은 프로덕트의 모든 페이지, 스크린, 헤드라인, 태그, 라벨, 그레이박스(콘텐츠가 자리할 위치를 표시하는 회색 박스) 등을 전부 보여주는 웹/앱의 스케치라고 생각하면 됩니다.

출처: https://www.altexsoft.com/blog/uxdesign/information-architecture/

와이어프레임은 유저테스트를 통해 웹사이트의 구조가 간결하고 명확한지 알기 위한 작업에도 활용될 수 있습니다.

Data modeling

프로덕트 개발에 돌입하기 전 마지막 단계는 데이터 모델링입니다. 이제 이해관계자 및 개발자와 함께 프로토타입을 가지고 콘텐츠 구조를 데이터 모델링해야 합니다.

6. 테스트하고 개선하라

테스트는 IA가 완성된 직후 개발팀에 전달되기 전에 반드시 수행되어야 합니다. 프로덕트를 재개발하는 것과 같은 아주 값비싼 시행착오를 격지 않기 위해서는 말이죠. 여기서 usability testing과 first click testing을 진행합니다. 초안이나 클릭 가능한 프로토타입 모두 테스트를 진행할 수 있으며, 이를 통해 내비게이션이나 레이아웃 오류를 발견할 수 있습니다.

Usability Testing

사용성테스트는 우리가 디자인한 구조가 유저의 입장에서도 적합한지 알 수 있도록 해줍니다. 테스팅 단계에서, 참가자들은 프로덕트와 일반적인 방법으로 즉, 실제 일상에서 할법한 방식으로 상호작용하도록 안내되어야 합니다. 참가자들에게 특정한 정보를 찾도록 하거나(연락처 혹은 결제 정보), 어떤 작업을 수행하라고(새로운 계정을 등록하거나 구매를 완료하도록) 할 수 있습니다. 물론, 실제 콘텐츠가 준비되어 있지 않으니 실제처럼 할 순 없더라도 그 일련의 상호작용 과정을 관찰하는 것으로도 완성된 형태의 프로덕트가 부족한 부분이 없는지 알 수 있습니다.

테스트 참가자들의 액션과 반응을 관찰하고 피드백을 받아 어떤 부분이 제대로 기능하고 어떤 부분이 되고 있지 않은지 알아차린 후 수정에 반영합니다. 여기서 가장 중요한 것은 유저가 우리의 웹/앱에서 원하는 정보를 쉽게 찾을 수 있는지 보는 것입니다.

First click testing

최초클릭테스트는 유저가 웹/앱에서 처음 수행하는 클릭이 충분히 쉽고 직관적인지 관찰하여 사용성을 가늠하는 테스트 방법입니다. 이 테스트를 통해 유저가 얼마나 수월하게 프로덕트를 조작하며 원하는 것을 얻는지 볼 수 있습니다.

최초클릭테스트를 하기 전 특정한 시나리오를 준비하고(사용성테스트 때와 마찬가지로), 가장 최적의 경로를 미리 찾아 놓아야 합니다. 그다음, 테스트 참가자에게 그 작업을 진행하도록 안내하고 최적의 경로를 찾기까지 어디를 클릭하고 얼마나 걸리는지 등을 추적합니다. 사용자들은 최초클릭을 옳게 하더라도 이후 단계에서 오래 걸리거나 올바른 최초클릭을 하기까지 헤매는 모습을 보이는 경우가 일반적입니다.

최초클릭테스트를 통해 정량적/정성적 데이터를 수집해야 합니다. 유저가 왜/무엇을 했는지 이유를 듣고 이해하여 프로덕트 개선에 반영하세요.