[UX] 가벼운 이야기2012.11.28 08:00


글을 시작하며...

Apple iOS6로 업데이트되면서, 모바일 앱스토어도 대폭 업데이트 되었습니다. 

본 글에서는 iOS6 모바일 앱스토어 업데이트의 장점 및 특징에 대해서 소개하려고 합니다. ‘Everything that’s wrong with the App Store in iOS 6‘ 글에서는 iOS6 앱스토어에서의 문제점을 이야기하고 있습니다. 이 글을 참고하시면, 균형잡힌 시각으로 UI에 대해서 생각해 볼 수 있을것으로 기대합니다. 


새롭게 업데이트된 iOS6 모바일 앱스토어의 장점/특징

1. Pad, apple TV화면과 일관성있는 UI 화면 구성

그림1) Pad, TV와 일관성있는 UI 화면 구성

그림2) 홈 화면 변경

iOS6 모바일 앱스토어에 처음 진입하면 등장하는 메인페이지에서 큰 변화를 살펴볼 수 있습니다. 기존 앱스토어 메인 페이지의 리스트 형 구조를 가로 스크롤 구조로 변경하였습니다.

UI 기획자 입장에서는 사용성 측면에서 어쩔 수 없이 리스트 형 구조를 선호할 수밖에 없는데, 리스트 형 구조는 일반적으로 너무 뻔한 UI라는 결과에 부딪히게 됩니다. 기획자의 입장에서 보면, 새로운방식의 UI를 선호하거나 클라이언트를 설득하기 위한 UI로 이런 Fancy한 메인페이지를 택하기 마련입니다.

그러나, 이러한 화면구성의 변경이 그러한 관점 보다는 Pad, TV화면의 일관성 측면에서 접근하였다는 해석도 가능합니다. 저는 이런 관점이 좀 더 타당하다고 생각합니다. 이런식의 화면 구성은 첫 화면에서 좀 더 다양한 콘텐츠를 노출한다는 점에서 앱스토어의 성격(다양한 콘텐츠를 한 화면에 노출)과도 잘 맞아떨어집니다. 

그림3) 앱 검색결과 화면 변경

또한 앱 검색 결과 화면에서 한 개의 앱의 정보가 풍부하게 보여지게 변경되었습니다. 화면 변경으로 인한 장점은 제목만 봐서는 무슨 앱인지 알 수 없으니까 바로 정보를 확인하기 좋은 구조로 설계되었다는 점입니다. 화면 변경으로 인해 생기는 단점은 관련 ‘참고링크’에서 확인하시기 바랍니다.

 

2. 앱 상세 화면 UI 변경

One page 구조에서 3개의 탭 구조로 변경

그림4) 앱 상세페이지 화면 변경

기존에는 앱 상세화면에서 앱 이미지를 리스트 최하단에 제공하고 one page구조로 설계하였습니다. 그러나 업데이트 후 한 페이지에 있던 정보인 ‘세부사항’, ‘리뷰’, ‘관련콘텐츠’의 3개의 탭으로 분리하였습니다. 또한 세부사항에서 이미지를 최 상단에 배치하였습니다. 

 

이는 사용자가 앱을 구매하기 전에 이미지를 먼저 보려는 Needs를 해소하기 위한 변경으로 생각합니다. (이는 pxd 사내에서 이루어진 rapid interview에서도 나온 결과입니다.)

그럼에도 불구하고 기존 앱스토어에서는 앱 이미지를 최 하단에 배치했었습니다. 그 이유는 앱 이미지의 경우 이미지를 불러오는 속도 가 문제가 될 수 있습니다. 이미지를 하단으로 배치하면 사용자는 이미지가 로딩이 빨리 되는것같은 착각을 할 수 있기때문에, ‘인지적측면의 이미지 로드’를 줄여준다는 장점이 있기 때문입니다.

모바일 앱스토어를 업데이트하면서 앱 상세화면 이미지를 상단으로 과감하게 올린걸 보면, 이미지 불러오는 속도의 문제가 어느정도는 해소 되었다고 생각합니다.

 

유동적인 탭 구조로 변경

앱 상세화면에서 3 개의 탭 구조로 변경되었다는 점은 위 내용에서도 언급한 내용입니다. 변경된 세 개의 탭도 일반적인 3 개의 탭이 아닙니다. 탭이 항상 상단에 고정되어있는 구조가 아니라 일정 위치에 올라가면 항상 보이는 유동적 구조로 설계하였습니다. iOS 모바일 주소록 리스트 구분자를 확인하시면 이해가 될 것입니다. 

탭을 항상 고정되어있는 구조로 설계하면 공간을 항상 차지한다는 문제가 있고, 그렇다고 스크롤에 따라 탭을 사라지게 하면 네비게이션을 어렵게 한다는 문제가 있습니다. 이러한 유동적인 방식의 탭 UI는 두 개의 서로 다른 문제를 해결하기 위한 방식으로 생각해 볼 수 있습니다.


3. Flow를 고려한 업데이트 UI 변경

복수의 앱 업데이트를 고려한 UI변경

그림5) 업데이트 화면 변경

기존의 앱스토어에서 앱을 업데이트 하면 바로 앱스토어를 나가고 홈 화면으로 이동하여 복수의 앱을 업데이트할 때에는 짜증이 났습니다. (기존에는 한 번에 한 개의 앱만 업데이트하기 편한 구조였습니다.) 

복수의 앱을 업데이트 하는 순서를 살펴보면,

 1.앱 이름 확인 → 2.업데이트 내역 확인 →  3.업데이트(이때 Home화면으로 이탈)  4.다시 앱스토어를 켜고 반복

하는 방식으로 과정자체가 번거롭게 설계되어 있습니다.

 

반면, 업데이트된 앱스토어는 다중 업데이트를 고려하여 UI가 변경되었습니다. 물론 이는 기술적인 업데이트가 아닌 UI적인 업데이트임을 밝힙니다. (기술적인 다중 업데이트 기능은 이전 앱스토어에서도 지원을 했습니다.) 

업데이트된 앱스토어에서 다중 업데이트를 하는 순서를 보면, 

 1.앱 이름 확인  2. 업데이트 내역을 한 화면에서 확인  3. 업데이트  4. 다른 앱 이름 확인.

하는 방식으로 과정이 간편하게 변경되었습니다. 이 모든것들이 한 화면에서 이루어진다는 점이 놀랍습니다!

 

한 화면에서 업데이트 상황 확인 가능

또한 업데이트 화면에서 아코디언 형식의 UI를 통해 어떤항목이 업데이트가 되었는지를 한 화면에서 바로 확인이 가능한 구조로 변경되었습니다.

  

글을 마치며...

본 포스팅에서는 iOS6 모바일 앱스토어의 업데이트된 내용에 대해서 UI관점으로 살펴보았습니다. 늘 그렇듯 UI설계에는 정답이 없습니다. UI 설계 이후 어떤점들이 좋아지면, 반대로 어떤점들이 나빠지게끔 마련입니다. 결국은 기획자의 관점 및 Persona같은 좋은 가이드를 통해 Trade off해야 할 것입니다.


*이 글은 Tech it 에도 실린 글입니다.



PS. 본 글은 업데이트된 UI가 좋다 나쁘다를 판가름할 수 있는 기준(퍼소나)에 맞추어 평가한 것이 아님을 밝힙니다. 

기존 버전 앱스토어에 대한 사내 약식 인터뷰를 통한 인사이트 및 필자(기획자)의 경험에 비추어 해석한 것이므로 기준이 퍼소나에 맞추어져 있지 않고 필자(기획자)에 맞추어져 있습니다. 그래서 해석보다는 객관적인 사실에 좀 더 집중하려고 노력했으나 관점에 따라 호불호가 갈리는 기능들이 존재합니다. 예를들면, 3번 주제인 복수의 앱 업데이트를 고려한 UI변경은 앱 업데이트가 빈번한 사용자에게는 유용한 변경이겠으나, 앱 업데이트를 귀찮아하는 사용자에게는 불편한 변경이 될 것입니다. iOS 6 모바일 앱스토어의 업데이트는 이러한 관점에서 봤을 때 라이트유저를 위한 기능에서 헤비유저를 위한 기능으로 조금씩 이동하는 추세를 보여줍니다.


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2010.03.30 09:00

1. 팝업 다이얼로그란?

팝업 다이얼로그는 팝업의 형태로 알림, 혹은 확인, 취소 등을 수행하는 장치입니다. PC 환경에서는 팝업 메뉴가 마우스의 오른쪽을 클릭하면 상황에 따라 나오는 컨텍스트 메뉴를 사용되는 용도, 혹은 선택의 목적으로 사용되어 왔습니다. 모바일 환경에서는 주로 확인의 목적, 혹은 선택의 목적으로 사용되고 있습니다.

Designing Interface 책에서는 모달 패널과 팝업 메뉴를 다음과 같이 설명하고 있습니다.

모달 패널 (modal panel)
사용자가 현재 상황에 대한 문제를 해결할 때까지 오직 한페이지만 보여준다. 문제 해결과 관련되지 않은 다른 네비게이션은 할 수 없다.

팝업 메뉴 (pop-up menus)
마우스의 오른쪽을 클릭하거나, 패널이나 아이템에서 이와 유사한 행동을 하면, 상황 메뉴와 같은 팝업 메뉴가 나타난다. 팝업 메뉴에는 일반적으로 인터페이스에서 사용할 수 있는 모든 액션이 아니라, 특정 상황과 공통된 액션들만이 들어 있다. 간략하게 만들어야 한다.


또한, 위키피디아에서는 다이얼로그를 다음과 같이 설명하고 있습니다.

대화상자 (dialog)
그래픽 유저 인터페이스에서 대화 상자는 사용자에게 정보를 보여 주거나 응답을 받는 인터페이스에서 사용되는 특별한 창이다. 대화 상자라고 부르는 까닭은 컴퓨터와 사용자 사이에 대화할 수 있는 기능을 제공하기 때문이다. 사용자에게 무언가를 알려 주거나 사용자로부터 입력을 요청하는 등, 또는 그 두 가지 기능을 모두 수행할 수 있다.

물론 PC환경에서의 용어라 그대로 적용하기에는 무리가 따르겠지만, '팝업 기능을 수행하는 모달패널' 혹은 '팝업 기능을 수행하는 다이얼로그' 정도로 부를 수 있겠습니다.



2. 무선인터넷 제한 상황에서의 App.별 팝업 다이얼로그 메시지

그렇다면 모바일 환경에서 팝업 다이얼로그는 어떻게 사용되고 있을까요? 팝업 다이얼로그를 전체적으로 비교하기에는 다소 무리가 따르기 때문에 하나의 주제를 가지고 비교해보고 싶은 생각이 들었습니다. 아이팟 터치를 사용하다보면 Wi-Fi 를 사용할 수 없는 상황이 있는데, 이 상황에서 아이팟 터치 App. 들은 어떻게 팝업 다이얼로그들을 사용하고 있는지 살펴보았습니다.

크게 아이팟 터치의 App. 은 기본으로 설치되어있는 App. 이 있으며, 사용자가 직접 설치할수 있는 App. 으로 구성되어 있습니다. 비교항목은 제가 보유하고 있는 무선인터넷을 필요로하는 App. 위주로 비교하였습니다.


2-1 아이팟 터치 내부 App.






2-2. 아이팟 터치 외부 App.










3. 팝업 다이얼로그의 메시지, 버튼, 정보표현 방식 비교

아이팟 터치 App. 에서 사용된 팝업 다이얼로그 메시지와, 버튼 및 정보표현 방식에 대해서 [표1] 에 정리해 보았습니다. 


[표1] 무선인터넷 제한 상황에서의 모바일 팝업 메시지
표를 클릭하시면 크게 보실 수 있습니다.

텍스트의 종류는 '현재의 상태만 알려주는 경우'와, '현재의 상태 및 해결 책을 알려주는 경우'가 있습니다. 드물게 '친근함을 유도'하는 메시지가 있습니다. 윙버스 App. 의 경우 인터넷에 연결되지 않은 상태를 알려주며, 무선인터넷 연결 상태를 확인해 달라는 해결책을 제시하고 있습니다. 또한 팝업을 한번 더 띄워 무선인터넷이 제한된 상황에서도 미리 다운로드된 맛집 정보를 볼 수 있는 방법을 제공하고 있습니다.

버튼의 경우에는 '승인', '확인', 'OK' 를 주로 사용하고 있습니다. Tweetery App.의 경우는 'Cancel' 과 'Try again'의 두 개의 버튼을 제공하고 있습니다. skype App. 의 경우 '거절'이라는 다소 이상한 레이블을 제공하고 있습니다.

정보 표현 방식의 경우 '팝업'을 띄워 제한상황을 알리는 경우가 있고, '내부'에 제한상황을 보여주는 경우가 있습니다. 아프리카TV App.의 경우 팝업을 보여주고 '자동종료'가 됩니다.

iGmail 과 Gmail App.의 경우 무선인터넷 제한 상황에서는 아무 정보도 보여주지 않고 있습니다. 한국사람들을 대상으로 하는 App. 인 경우에 영어를 사용해서 일반 사용자들에게 해석을 요구하는 경우도 있습니다. 일반 사용자들은 잘 모를 수 있는 전문용어를 사용하는 경우도 있습니다.

팝업 다이얼로그 메시지는 문제점을 알려주고, 문제점을 해결할 수 있는 방법을 가르쳐주며, 무선인터넷 제한 상황에서도 저장된 정보를 자유롭게 볼 수 있게끔 유도해야 하겠습니다.



4. 글을 마치며

이 글을 읽고 이러한 의문을 제기할 수 있을 것입니다. '과연 요즘시대에 무선인터넷이 안되는 경우가 어디있겠느냐?' 고 말입니다. 이 글의 경우 무선인터넷이 되고 안되고를 떠나서 팝업을 통한 알림이 과연 친절한가? 혹은 충분히 신중히 설계되었는가? 에 초점이 맞추어져 있다고 생각합니다. 무선인터넷 제한 상황은, 같은 환경에서 비교하기 위한 수단으로 사용되었음을 밝힙니다.

또한 '팝업창이 과연 필요한가?' '팝업창이 얼마나 유용한가?' 에 대해 질문할 수 있습니다. 이 질문의 명쾌한 답을 여기서 드릴수는 없을 듯 합니다. 다만 모바일 환경에서 팝업 다이얼로그는 충분히 사용되고, 남용되고 있다고 생각합니다. 불필요한 팝업창을 계속 띄워서 사용자를 불편하게 할 것이 아니라, 정말 유용한 정보를 적시적소에 녹여내는것이 중요하다고 생각합니다.

팝업창을 똑똑하게 사용하는데에는 여러가지 방법이 있겠습니다. 팝업창의 메시지를 친근하고 재미있게 하는 방법이 있을 수 있습니다. 팝업창을 사용하지 않고 App.의 내부에 메시지를 녹여낼 수도 있습니다. 팝업을 한번만 띄우게 하고, 원치 않을경우 더이상 띄우지 않게 조정할 수도 있을 것입니다. 팝업에서 확인 버튼을 없애고 일정 시간이 지나면 자동으로 사라지게 하는 방법을 사용할 수도 있습니다. 아니면 사용자를 믿고 불필요한 정보들은 자동으로 처리하게 할 수도 있겠습니다.

이 글은 제한된 상황에서 작성하여, 모든 팝업의 경우를 다루고 있지는 않습니다. 팝업의 경우 알림의 경우 외에도 선택이 필요한 경우가 있습니다. 또한 요즘에는 팝업 창을 단순히 버튼으로만 배치하지 않고 다양한 컴포넌트들을 같이 섞어서 사용하는 경우도 있습니다.

앞으로 팝업 다이얼로그가 사용자에게 그저 귀찮기만한 골칫덩이가 아닌, 정말 유용한 정보를 제대로 보여줄 수 있는 소통의 창이 되기를 기대해봅니다. :)


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. 댓글을 남겨주세요. ^^

    2010.05.21 09:54 신고 [ ADDR : EDIT/ DEL : REPLY ]