다양한 환경에서의 UI 차이
웹과 앱의 특성
대표적인 웹과 앱의 UI 차이
UI는 기능과 목적이 중요
UI의 차이가 있다는 건 목적의 차이가 있고 목적에 차이가 있다면 UX에서도 차이가 생긴다.
-
페이지 이동
앱은 주소를 입력해 이동할 수 없고 웹은 주소를 입력할 수 있다. -
뒤로가기
앱에경우 뒤로가기버튼을 만들어주지 않으면 뒤로갈 수 없지만 웹의 경우 자유롭다.
EX) 뒤로가면 안되는 화면(결제화면 - 결제가 중복될 수 있다.) -
주요화면 이동
앱은 하단에 웹은 상단에 위치된 경우가 많음
사용자가 더 편하게 제품을 사용할 수 있게 요즘은 앱에서도 상단에 네비게이션을 넣는 경우도 많다. -
바텀시트
보통 화면에 하단에 고정되어 있음
모바일 웹에서는 사용하기 까다롭다. 웹브라우저의 기본 UI가 숨겨져 있다가 등장하는 과정에서 하단에 고정된 바텀시트의 위치가 계속 바뀌게 만든다. 스크롤에 따라 바텀시트의 위치에 영향을 줘서 사용자 입장에서 바텀시트를 사용하기 불편하다.
앱에서는 바텀시트를 드레그해서 닫을 수 있지만 웹에서는 불편할 가능성이 크다.(새로고침)
OS별 차이
-IOS
OS에 따라 앱 심사 가이드라인이 다르다.
아이폰의 경우 애플로그인이 다른 로그인수단에 비해 덜 중요하게 보이지 않도록 해야함(거의 강제적)
홈인디케이터
최신에 나온 아이폰은 물리 버튼이 사라지고 하단에 홈 인디케이터가 생겨서 아이폰마다 차이를 고려해야한다.
-안드로이드
안드로이드는 하단에 뒤로가기 버튼이 기본 UI로 제공
뒤로가기를 누르는 2가지 경우
1. 이전화면으로 가기
2. 상위화면으로 가기
정보구조도와 플로우차트
전체적인 과정을 논리적으로 살펴보고 놓친 곳은 없는 지 살펴보는 문서
정보구조도는 층별 안내도
플로우차트는 오시는 길
정보구조도(Information Architecture)는 전체적인 제품의 구성과 각 화면들의 관계를 파악
플롱차트는 사용자가 어떤과정을 통해서 제품을 이용하는지 시각적으로 보여줌
와이어프레임과 프로토타입을 만들기 위해서는 사용자 시나리오가 필요하다.
정보구조도 -> 사용자 시나리오 -> 플로우차트,와이어프레임
와이어프레임
낮은 단계의 프로토타입
스케치의 개념
만드는 이유
1. 팀원간의 다른 생각을 통일할 수 있고 협업을 원할하게 함
2. 디자인을 관리하기 쉽고, 불필요한 부분에서 시선을 뺏기지 않음
3. 습관 형성 모델을 반복적으로 실험해 볼 수 있음 - 사용자가 서비스를 자연스럽게 사용할 수 있도록 만드는 것을 습관형성이라고 한다. 와이어프레임으로 사용자가 우리 서비스를 습관적으로 쓸 수 있게 하는 전력적인 부분을 빠르게 확인할 수 있다.
빠르고 효율적으로 만들어야함
다른 사람이 봤을 때도 쉽게 이해할 수 있어야함
와이어프레임 만드는 방법
1. 규칙정하기
선택과 집중을 확실히 과감하게 고르고 빼기
최대한 단순하고 빠르게 그릴 수 있게 단색의선을 사용
- 스케치하기
텍스트의 경우 최대 길이를 가늠할 수 실제 사용할 내용으로 넣어주면 좋음 - 화면을 선으로 연결
어떤 관계로 이어져있는지 확인이 필요하고 파악하기 좋음
