#09.UX 관점에서 보는 논리적 화면설계 원칙
모바일 앱 UI/UX 가이드
UX 컨설턴트 전민수입니다.
지난 5년간 브런치에서 아티클 작성한 것을 토대로, 여러분께 UX 아티클의 내용을 더 쉽게 전달 시키는 목적으로 별도 강의 촬영하게 되었습니다. 그간 UX 강의 촬영했던 영상을 편집해서 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.
UX 라이브클래스 패키지를 통해 전체 178여개 UX 강좌를 하나의 패키지 형태(총 121시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 2023년 3월 한정 이벤트 판매로 할인율 98%(정가 5,340,000원 > 할인가 99,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다.
https://ebprux.liveklass.com/packages/137053
앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.
감사합니다.
UX 디자인 설계 시 사용자에게 정보가 제공되는 순서나 구조가 논리적이라고 사용자가 생각할 수 있도록 구성해야 합니다. UI 모형에서는 이를 논리성이라고 합니다.
모바일 앱에서 논리성 적용 사례는 다음과 같습니다.
계층 구조의 논리 (카테고리 구성)
목록 배열 기준의 논리 (가나다순 배열,시간순 배열 기준)
중요도순 배열 논리
화면 구성의 그룹핑(사용자 관심 성향별 서비스 그룹핑, 시각적 그룹핑)
(상식적 수준에 따른) Task Flow 논리 (메뉴 선택,사용자 과업 행위)
계층 구조의 논리
카테고리 구성
메뉴를 구성할 때 주제별 기준이 명확해야 합니다. 분류 기준이 명확하면 사용자가 찾고자 하는 정보가 한눈에 들어오기 때문입니다. 예를 들어 쿠팡 앱은 전체 서비스를 한눈에 파악할 수 있게 서비스, 쇼핑, 티켓을 카테고리화 해 제공하고 있습니다.
쿠팡 카테고리목록 배열 기준의 논리
가나다순 배열
목록만 보더라도 어떤 기준에 의해 배열 되었는지 바로 인지할 수 있도록 해야 합니다.
카카오톡에서 친구 목록을 가나다 순으로 나열해 친구를 쉽게 찾을 수 있으며, 아이폰이 곡 명을 알파벳 순으로 나열한 것이 좋은 예입니다.
시간순 배열 기준
목록 제공 시 시간순으로 배열할 수 있습니다.
네이버 메일은 최근 시간(날짜) 순으로 보여줘 최근 메일을 찾기 쉽습니다.
중요도순 배열 논리
화면 구성 시 중요도가 높은 정보부터 우선적으로 보여줘야 합니다. 예를 들어 네이버 캘린더 앱 일정 쓰기는 제목 > 시간 > 장소 > 설명 등 일정 작성을 순차적으로 할 수 있게 항목을 구성하였고, 맬론 앱은 화면 상태에서 목록을 보여줄 때 최신 음악> 실시간 차트> 멜론 TV> 멜론 라디오> 멜론 DJ 순으로 나열해 목록 선택이 쉽습니다.
화면 구성의 그룹핑
사용자 관심 성향별 서비스 그룹핑
사용자 관심 성향별 서비스 영역을 시각적 그룹핑하여 찾고자 하는 정보를 한 눈에 알아볼 수 있도록 해야 합니다.
네이버는 상단 영역에 다음과 같이 서비스 영역을 그룹핑하였습니다.
- 메일, 카페, 블로그 등
- 사전, 뉴스, 부동산, 지도 등
- 실시간 급상승 등
시각적 그룹핑
사용자들이 자주 이용하는 메뉴나 기능은 사용자가 한눈에 알아볼 수 있도록 시각적으로 그룹화해야 합니다. 사용자의 시선은 시각적으로 덩어리로 되어 영역에 눈길이 우선 가기 때문입니다. 이 때 정보 그룹핑이 상식적인 수준에서 제대로 묶여져 있는지가 중요합니다. 예를 들어 신한카드 앱은 메인 홈 상단 영역에 명세서 조회, 이용내용조회, 이용금액결제, 한도서비스 등 사용자 관심이 높을 만한 정보를 쉽게 찾을 수 있게 메뉴로 그룹화해 시각적으로 배치했습니다. 오케이캐시백 앱은 원하는 유형의 포인트 정보를 얻을 수 있도록 추천, 쌓기, 쓰기 등을 그룹화해 탭 형태로 제공하고 있습니다.
(상식적 수준에 따른) Task Flow 논리
메뉴 선택
메뉴를 선택하는 과정에 대한 일련의 과정이 논리적이어야 합니다. 예를 들어 하나은행 앱의 경우 메뉴 선택 시 큰 주제(외환)에서 작은 주제(외환 상세 메뉴)로 변환되었다는 것을 인지하기 쉽습니다.
사용자 과업 행위
사용자의 이전 행위가 다음 행위에 자연스럽게 연결될 수 있게 UI를 구성해야 합니다. CGV 앱은 영화 예매 시 인원수에 맞게 좌석을 제대로 선택했는지 시각적으로 표시돼 좌석 선택 여부가 한눈에 들어옵니다.
CGV. 좌석 선택 시 빨강색으로 표시된다 전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
