[강의학습일지] Figma 활용법(2) 2주차 강의

다양한 환경에서의 UI 차이

 

 

• UI는 기능과 목적이 중요하다 = UI 차이가 있다 = 목적에 차이가 있다 = UX에도 차이가 있다
• 앱과 웹 둘 다 서비스를 하는 곳 비교해 보기
• 주소입력해서 접근할 수 있는 화면들이 어떤 화면들인 가?
• 거기에 사용자가 접근했을 때사용자를 어떻게 뒤로 돌려보낼지(ex. 잘못된 요청)
• 오류처럼 받아들일 수이는 화면에 갈 수 없도록 대비하기

 

• 뒤로 가면 안 되는 화면에 뒤로 가기 접근하는 경우
• 결제가 뒤로 가거나, 취소가 여러 번 돼서 서버에 문제가 되는 등 뒤로 가면 안 되는 화면 보호장치를 개발팀과 논의하기
• 디자인 목적: 사용자가 더 편하고 수월하게 목적을 빠르게 달성할 수 있는 방향으로 수렴함
• 웹이라고 반드시 메뉴가 상단, 앱이라고 하단이 아님! 디자인 목적을 생각해보기. 사용자가 편하다고 느낀다면 바뀔수도 있음
• 시뮬레이션, 레퍼런스 찾아보고, 테스트 많이 해보기

바텀시트

 

• 모바일 앱에서는 다이얼로그대신 사용하는 경우도 있고 다양한 용도로 사용
• 모바일 웹에서는 사용하기 까다로움. 스크롤하게 되면 바텀시트 위치가 바뀜

iOS

 

• 아이폰은 반드시 애플 로그인을 포함, 로그인 상단에 있어야 하는 가이드라인(강제)이 있음
• 홈 인디케이터가 반드시 포함시켜야 함 (오버레이) 

앱 심사 지침 - Apple Developer

안드로이드

 

• 뒤로 가기를 눌렀을 때 시뮬레이션을 잘해야 함
  • 이전화면으로 가기(History Back): B1←B2←B3
  • 상위화면으로 가기(Hierarchy Back): B1←B3

정보구조도와 플로우 차트

 

• 모든 구성원들이 아는 것을 맞춰야 함
• 디자인을 빠르게 진행하기 위해 작성하는 문서 중 정보구조도, 화면흐름도
• 사용자 시나리오를 만들기 위해 정보구조도를 작성하고 플로우 차트를 만든다.

정보 구조도 (Information Architecture)

 

• 전체적의 제품의 구성과 화면들의 관계를 파악할 수 있는 설계도
• 제품을 건물이라고 생각한다면 층별 안내도

화면 흐름도(Flow Chart)

 

• 사용자가 어떤 과정을 거쳐서 제품을 사용하는지 시각적으로 확인 가능한 순서도
• 유저플로우, 유즈케이스라고 부르기도 함
• 진행(Process): 페이지나 사용자의 액션, 페이지 단위
• 종결(Terminator): Y/N 조건에 따라 경우의 수가 나눠짐 페이지 단위, 액션 단위
• 결정(Decision): 끝이 둥근 박스. 시작과 끝
• 제품을 건물이라고 생각한다면 오시는 길을 자세하게 나타낸 것

와이어프레임(Wire Frame)

 

• 빠르고 효율적으로 소통하기 위한 도구(단순하고, 대략적인 가독성만 확보하면 OK=손으로 그려도 됨), 일관된 디자인 방향
• =Lo-fi Prototype (단순한 형태, 낮은 단계의 프로토 타입)
• 화면과 시나리오를 단순한 형태로 만들어서 빠르게 만듦
• 나무보다 숲을 보기!
• 점차 우리 서비스에 몰입할 수 있도록 프로세스 관찰 사용자가 우리 서비스를 자주 쓰도록(습관 형성) ex. 뭐 필요할 때 쿠팡에서 찾아보기
• 어떻게 하면 더 습관처럼 쓰게 할까? 와이어프레임으로 볼 수 있음
• 흐름이 필요하기 때문에 화면을 선으로 연결하기: Simpleflow 플러그인