앱/웹사이트 계층과 구조의 이해

오늘은 UI 디자인 교과서 제5장 계층과 구조 파트를 요약하고자 한다!

말로만 들어봤지 이론으로 꼭 알아보고 싶었던 파트라 기대가 된다~!

 앱/웹사이트 구조는 왜 중요할까?

종이 책과 앱/웹 사이트의 가장 큰 차이점은 링크다! 앱/웹사이트의 경우 입체적인 구조로 이루어져 있어 페이지의 전후가 링크로 연결되어 있다. 이러한 전후 관계를 고려한 내비게이션 디자인이 전체 레이아웃을 통해 반영되기에 구조는 그만큼 중요하다 볼 수 있다.

앱/웹사이트 구조는 어떻게 표현될까?
1. 전후관계 표현 : 비주얼

내비게이션은 이러한 페이지의 관계성이나 전환에 따른 전후 관계를 나타내는 방법중 하나이다.

하단의 애플 공식 홈페이지를 보면 좀 더 쉽게 이해할 수 있다. 상단 헤더에 있는 상품을 선택하면 상품명은 타이틀로 변하고 그에 맞춰 제품 사양으로 갈 수 있는 링크도 표기된다. [ 지금 웹사이트를 사용하면서 느낀 건데 하나의 카테고리를 누를 때마다 헤더의 모양이 아이콘에서 텍스트로 바뀌는데 왜 이렇게 했을까? 아이콘 모양으로 계속 유지하면 오히려 각 제품들의 특징을 빠르게 이해할 수 있지 않나? 또 아이콘에서 갑자기 텍스트로 변하니 다음 화면에 뭐가 올지 예상이 되지 않아 사용자 이탈도 이 부분에서 발생하지 않을까 싶다 ] 뭐 이런 궁금증을 뒤로하고 구조는 이처럼 내비게이션을 통해 표현된다는 점을 볼 수 있다.

ex) 애플 공식 홈페이지

iPhone

 

이외에도 구조 표현 방법은 다양하다

1. 웹사이트 상단 내비게이션을 활용한 방법
2. 하층에 이동할때마다 이전 위치를 내비게이션에 남겨두는 방법
3. 하층이 이동할때마다 직전 항목이 뒤로 가기 버튼의 이름으로 표시되는 방법 ex) 아이폰 설정 화면

앱/웹사이트 구조는 어떻게 표현될까?
2. 전후관계 표현 : 인터랙션(움직임)

인터랙션 추가를 통해 전후 관계 표현은 훨씬 알기 쉬워진다. 이때의 인터랙션은 연출로서의 의미가 아닌 이해를 돕기 위한 인터랙션으로 생각하면 된다.

인터랙션을 활용한 구조 표현 방법

1. 슬라이드  : 새로운 화면이 슬라이드로 겹쳐지며 직전 타이틀이 새로운 화면의 뒤로 가기 화면이 된다
2. 계층 확대 표현 : 하층으로 이동하면 직전 화면이 안으로 들어가고 새로운 화면이 앞으로 나오는 방식

앱/웹사이트의 계층

계층의 분류

1. 깊이 : 계층 심도
2. 넓이 : 같은 계층에서의 분류 개수(카테고리 개수)

*깊이와 넓이는 반비례관계를 가지는데, 계층을 얇게 만들수록 카테고리 개수는 적어진다

어떠한 계층이 적합할까?

얇고 넓은 것에서 우위성을 지닌다. 이는 얇고 넓은 편이 사용자가 찾거나 사용하기 쉽기 때문이다.

같은 계층 안을 넓게 둘러보는 것보다는 계층을 위아래로 이동하는 편이 훨씬 수고롭기 때문이다. 대상을 발견할 때까지 하층으로 내려가서 확인하고 상층으로 돌아와서 다음 계층으로 내려가는 작업은 결과적으로 사용자에게 피로감을 전달할 것이다.

= 신체적 부하 동반

예시 : 텐바이텐 -> 사이트에 들어가서 다이어리를 찾는다 생각하자. 다양한 카테고리가 넓고 얇게 있어 상품 목록까지 세계층을 거치면 도달할 수 있다. 이때 계층이 넓을수록 라벨링은 배타적/구체적으로 명명하기 쉬워진다는 특징을 볼 수 있다.

[사용자 동선]

1. 웹사이트 접속
2. 디자인 문구 카테고리
3. 다이어리/플래너 
4. 끝!

텐바이텐 10X10 : 감성채널 감성에너지

 

물론 좁은 계층의 라벨링을 보완하는 방법도 있다.

카테고리에 마우스를 호버했을 때 하층의 개요와 특징의 화면이 나오게끔 설계할 경우 사용자들이 각각의 특징을 보고 클릭을 할 수 있다. 이럴 때의 장점은 카테고리 개수가 적어 보기 좋게 정리하기 쉽다는 점이다.

 

탐색 경로와 차별화 표현

 

이렇게 서비스 화면의 구조와 계층에 대해 알아보았는데, 사용자가 현재 위치를 가장 효과적으로 파악하는 방법은 바로 탐색 경로이다. 탐색 경로를 통해 사용자가 어디 있는지 정확하게 이해할 수 있게 도와주기 때문이다.

문제는 화면이 크고 디자인 자유도가 높은 컴퓨터의 웹사이트와 다르게 모바일화면과 제한이많은 tv의 경우 탐색 경로를 보여주기 어렵다는 점이다. 탐색경로의 경우 텍스트로 표기되기 때문에 많은 콘텐츠와 더불어 과도한 텍스트 사용으로 사용자에게 인지적 부하를 가하게 된다.

탐색 경로 차별화 표현 방법

• 굵기 : 문자의 굵기 차이
• 색 : 무채색과 유채색 구분
• 크기 : 형상이 커지는 방식으로 주로 tv에서 활용
• 배경 : 문자 배경색을 넣어 현재 위치를 표현
• 표식 : 막대나 아이콘 등 표식이나 장식을 덧붙여 현재 위치 표현
• 호버/포커스 
• 페이지 안에서 위치 표현 : 읽는 곳이 어디인지 각 단락에 따라 표시

메인화면/리스트/상세

• 상세 : 상품,기사,이미지,영상 등 서비스를 방문한 사용자가 찾으려는 정보
• 리스트 : 다수의 상세 정보를 제목이나 개요에 따라 한곳에 모은것
• 메인 : 서비스의 표지

상세페이지를 목표로하는 사용자들의 경우 대부분 리스트 페이지를 거쳐야 한다. 이때 리스트 페이지의 인터페이스를 개선하는 방법으로는

• 필터 : 가격/종류 등을 기준으로 어느 범위에 속하는 대상만 추려내어 표시하는 기능
• 정렬 : 인기순/가격순/이름순 전체를 다시 배열하는 기능
• 전환 : 표기 방식을 변경하는 기능 ex) 목록표시/블록표시

[디바이스에 따른 리스트 조작 방법]

• 컴퓨터 : 상설형 표시
• 스마트폰/태블릿 : 좌우 슬라이드/오버레이를 사용한 수납형
• tv : 화면 전체 슬라이드

상세정보의 분류

상세페이지까지 도착했다면 사용자가 얻게되는 정보는 크게 두 가지로 나누어진다.

1. 부속정보 : 상세정보를 따라다니는 다른 정보 ex) 프린터의 상세정보 페이지 - 프린터의 매뉴얼 - 드라이버
2. 동종정보 : 가격/사양/성능/제조연도 등 상품에 속하는 것들 ex) 연관상품/ 자주함께 구입하는 정보 등이 여기 포함. --> 이를 활용해 아마존에서는 상세페이지 -> 상세페이지로 이동하고 서비스에 머무는 시간을 더 길게 만들어 사용자의 구매를 유도한다

 

 

*참고 문헌

UI 디자인 교과서 : 네이버 도서