0111_UX/UI (+웹, 앱, 정보구조도, 화면흐름도)

다양한 환경에서의 UI 차이

1) 웹과 앱의 특성 비교

 

2) 대표적인 웹과 앱의 UI 차이

- 1) 페이지 이동

앱은 임의로 주소를 입력해서 이동할 수 없음

반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있음

 

 

- 2) 뒤로가기

 

앱의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동

반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로움

 

 

 

3) 주요 메뉴 이동

모바일 웹에선 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치

앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동

두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI

무신사의 모바일 웹과 앱의 UI는 매우 흡사

 

3) OS별 차이

OS에 따라 UI를 다르게 사용하는 경우

아이폰의 경우, 애플 로그인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 해요.

또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함

 

03. 정보구조도와 플로우차트

-1) 정보구조도와 플로우차트의 차이

보구조도와 플로우차트는 유사해보이지만 개념과 목적에 큰 차이

제품을 하나의 건물에 비유한다면, IA는 층별 안내도, 플로우차트는 오시는 길

 

-2) 정보구조도

화면과 정보들이 어떤 구조로 연결 있는지를 나타내는 일종의 설계도

제품을 건물이라고 생각했을 때 IA는 층별 안내도

-2) 화면흐름도(Flowchart)

- 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도라고 할 수 있어요.

순서도의 예시

제품을 건물이라고 생각했을 때 플로우차트는 오시는 길