#06. 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 모형에서는 이를 변화제시성이라고 합니다.
모바일 앱에서 변화제시성 적용 사례는 다음과 같습니다.
시스템 관점
메뉴 형태
콘텐츠 형태 (추천 콘텐츠, 핫 콘텐츠, 실시간 콘텐츠)
시스템 내 정보 상태 변화 인지(구매 가능 상태, 위치 기반 정보)
사용자 관점
사용자 행위에 대한 지속성을 유지하는 상태 (알림, 대시보드, 거래 프로세스, 내글에 대한 다른 사람 관심사)
메뉴 형태
전체 메뉴 중 업데이트 메뉴와 그렇지 않은 메뉴를 구별할 수 있어야 합니다. 예를 들면 네이버(iOS)의 경우 새롭게 업데이트된 콘텐츠가 있다면 카테고리 영역에 '숫자'나 ‘N’ 표시가 있습니다. 이를 통해 전체 메뉴 중 어떤 메뉴가 새롭게 업데이트됐는지 즉시 파악할 수 있어 편합니다.
네이버 모바일 웹: 카테고리 업데이트 인지 여부 콘텐츠 형태
추천 콘텐츠
시스템내 사용자에게 인기가 가장 높은 콘텐츠를 알려줘 사용자가 보다 많은 콘텐츠에 접할 수 있도록 해야 합니다. 예를 들면 CGV의 경우 무비차트 서비스를 제공해 전체 상영 영화 중 현재 어떤 영화가 네티즌에게 가장 인기 있는 영화인지 보여주고 있습니다.
CGV 뮤비차트 순위 인지 여부 핫 콘텐츠 형태
사용자가 반드시 알아야 할 콘텐츠를 핫 콘텐츠 형태로 보여줄 필요가 있습니다. 예를 들면 네이버는 1위부터 10위까지 실시간 급상승 및 핫토픽 콘텐츠를 제공해 더 많은 사용자의 관심과 흥미를 끌고 있습니다.
네이버 모바일 웹: 실시간 급상승 인지 여부 실시간 콘텐츠 형태
시스템 내 콘텐츠 순위 변동 여부를 사용자가 쉽게 인지할 수 있도록 아이콘이나 기호로 시각화 할 필요가 있습니다. 예를 들면 네이버 뮤직은 홈 상단 영역에 사용자의 관심이 높은 국내 Top 100 추천 콘텐츠를 소개하고 있는데, 곡 순위 변동 여부를 업다운 기호로 표시하여 사용자의 시선을 끌어 모으고 있습니다.
네이버 뮤직 최신 음악 업데이트 인지 여부 시스템 내 정보 상태 변화 인지
구매 가능 상태
시스템에서 특정 정보만 구매할 수 없다면 이를 구매할 수 없다고 시각적으로 알려줄 필요가 있습니다. 예를 들면 CGV는 영화관 영화 목록에서 예매 종료가 된 경우 예매를 할 수 없다고 '예매종료' 표시와 더불어 영화 시간대도 선택하지 못하도록 비활성화여 보여주고 있습니다.
CGV. 예매 종료가 되는 경우 흐린색상 및 비활성화 선택 영역으로 나타남위치 기반 정보
시스템 내 위치기반 정보가 지속적으로 업데이트되는 경우 이를 인지할 수 있도록 시각적으로 보여줄 필요가 있습니다. 예를 들어 네이버 지도의 경우 노선별 버스 정보의 위치 정보가 GPS 정보에 맞춰 시각적으로 잘 나타나 있어 버스 기다리는데 유용합니다.
네이버 지도. 노선별 버스 정보나의 활동 형태
알림 형태
시스템은 사용자가 애플리케이션(이하 앱)을 실행한 경우 해당 메뉴에 바로 접속하지 않더라도 나의 활동 여부를 알림을 통해 한 눈에 알아볼 수 있도록 합니다. 만약 나의 활동을 한눈에 알아볼 수 없다면 사용자는 앱에서 내가 알아야 할 사항을 하나 하나 찾아야 하는 번거로움이 있습니다. 예를 들면 페이스북의 경우 상단에 알림이 숫자로 표시돼 나의 활동 관련 새로운 소식을 바로 인지할 수 있습니다.
페이스북 알림 인지 여부 대시보드 형태
시스템은 사용자가 한 거래 내역을 한 눈에 파악할 수 있도록 대시보드 형태로 표현해도 좋습니다. SKT 모바일 Tworld의 경우 사용자가 이용한 내역에 대해 잔여 기본통화를 그래프로 표현하고 있습니다.
SKT 잔여 기본 통화 정보 제공 여부거래 프로세스 형태
거래 내역이 시스템에 한눈에 보여줄 수 있도록 프로세스 형태로 명확하게 보여줘야 합니다. 예를 들어 이마트 앱의 경우 상품 주문 시 '출발대기>상품출발>배송중>배송완료' 상태 여부가 시각적으로 잘 나타나 구매 거래에 대한 신뢰 여부를 갖게 합니다.
이마트. 상품 주문 거래 조회내 글에 대한 다른 사람 관심 여부
사용자가 SNS에 글을 올렸을 때 시스템은 사람들이 그 글에 대한 관심이 높은지를 알려줘야 합니다. 예를 들면 페이스북의 경우 페이지 글 목록에 '좋아요 수, 도달수'가 나타나 있습니다.
전민수 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 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
