[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.05.24 22:27



모바일 메가 트렌드와 사용자 경험의 진화


주최: 서울대학교 한국디자인산업연구센터
장소: 서울대학교 디자인연구동 49동 309호
강연자: 삼성전자 장동훈전무님
강연시간: 2010년 5월 20일 목요일 오후 5시~6시 30분


 

2009 모바일 메가트렌드
모바일 시장이 계속 성장하고 있음.
2009년에 최초로 역성장. 경기침체. 모바일시장 포화상태.


1. ‘터치 폰’의 등장
- 터치 폰의 등장으로 rich한 UX가 가능해짐


2. 스마트폰의 등장
- App store의 등장,
- 스마트폰은 계속 성장하고 있음. 2009년 16.0% 2014년 30% 정도로 예상


3. Open OS
- 삼성 바다 플랫폼

4. 모바일 인터넷


5. 콘텐츠 마켓
- 콘텐츠 프로바이더, 엔드유저, 써드파티 디벨로퍼, 디바이스 벤더


 

2010~2011년 메가트렌드


1. 소셜 미디어 & 소셜 맵핑

a. 블랜딩 커뮤니케이션 채널
- SNS
- LBS
- 코비, 페이스북 app.
- integrated phonebook을 누가 쥐고 있느냐가 중요한 이슈.


b. Collaboration
- 구글웨이브, 야후 거기


2. 시간과 공간을 초월해 사용자에게 통합된 정보를 제공

a. 3 screen (eco-system)
- 삼성 Dlna phone, 서버 및 콘트롤러의 역할 수행

b. 가상과 현실의 융합
- 구글 어스
- 구글 오션
- 다음 로드뷰
- 비디오 컨퍼런스
- 위키튜드 온 모바일폰


3. 정보홍수와 새로운 기회

a. 상황 인지
- Around me: 마이크로소프트 빙
- Know your behavior
- SKTelesys w
- Reflect where I am


b. 통합된 검색
- 모토로라 드로이드
- 보이스 서치, 운전중 상황
- 야후 원 서치
- 삼성 스마트 서치
- 삼성 behold 2


c. 프라이버시, 데이터 보안
- 모토 블러
- 모바일 미
- my phone
- 모바일 트래커


d. 스크린의 대형화
- HTC HD2 4.3
- HP Slate 10inch
- Apple iPad 9.7inch
크기가 커짐에따라 새로운 UX 필요


4. 신흥시장을 위한 새로운 경험

a. 헬로 아프리카 모바일 소비자 영상
- Emerging market user lifestyle
- 중고제품도 씀. 핸드폰 재구매. 외형을 잘 바꿀 수 있게 고려하는 방법들
- 동네에서 돌려쓰기도 하고, 한집안에 여러명이 쓸 수 있게 하고. 전화번호부를 여러명이 사용할 수 있게 함.


b. 로컬라이제이션
- 인도: 토치라이트, FM라디오, 모기퇴치용, 시끄럽기 때문에 잘 들리는 데시벨의 링톤을 개발, 종교가 다양하고 종교가 중요함. 기독교, 힌두교, 이슬람교에 맞게 월페이퍼가 변경. 기도하는 시간에 월페이퍼가 바뀌면서 알람이 있음.


c. Dual sim
- 삼성 Duos
- 다른 요금제를 사용하는 경우들… 러시아 같은 경우는 히트를 쳤었음.


d. 노키아 라이프 툴
- 농사에 필요한 절기, 날씨를 텍스트로 뿌려줌.
- 농사, 교육, 엔터테인먼트 정보를 보여줌


5. 모바일 헬스케어, 교육

a. 모바일 헬스케어
- 건강 관련 app
- Radiation passport, medzio, sono access, weight watchers


b. 모바일 러닝
- 닌텐도
- 아마존 킨들



모바일 마켓을 위한 새로운 비즈니스 창조

모바일 컨버전스 경험

1. 네트워크 컨버전스 : 상황중심 사용자경험 전달 & LBS. 맞춤형 정보. 얼마나 스마트하게 상황에 맞는 정보를 전달할 수 있을 것인가?
- 근거리통신, 초거리 통신망, 4G, Human body comm...
- 시 공간의 초월
- 정황중심의 경험 : 사용 정황, LBS 기반의 검색. 음성, 이미지 검색 등 다양한 방법


2. 디바이스 컨버전스 : Eco-system & 새로운 센서의 인풋. 몰입 경험을 이끌어 냄
- 기기에 한정되지 않고, 다양한 공간에서 컨텍스트에 맞게 공급
- Phone, PC, TV, 디지털액자, 정보가전, 카메라, DVD
- 새로운 센서 : 구글 보이스 검색, 비주얼 모바일 서치 엔진. 미래의 인터넷 서치


3. 콘텐츠와 서비스 컨버전스 : 오픈 & 협업. 개인화
- 오픈 API로 개인이 창조하는 서비스가 가능해짐
- 개인이 인터넷 방송 가능
- 페이스북 아이티 지진 도네이션 : 소셜 네트워크가 1:1 커뮤니케이션에서 함께 생각하고 행동하는 협업이 가능해질 것으로 예상
 

개발 / 비즈니스
새로운 경험 = 새로운 기회



Q: 삼성은 아이폰을 대비해서 어떤 노력을 하고 있나?
A: Eco-System 대비를 잘 하지 못했다. Apple 과 우리는 가는 길이 다르다고 생각했다. 또한 불편하다고 생각하는 기능들이 사업자 중심으로 진행되다 보니 복잡해졌다. 새로운 비즈니스 모델 (콘텐츠 + 서비스) 준비를 하지 못하였고, 대응이 늦어졌다.

Q : 삼성의 세그멘테이션?
A : 애플과 삼성은 다르다. 애플은 한 세그에 올인하나, 삼성은 전부 한다. 애플은 이머징마켓은 하지 못한다. 삼성이 애플을 뛰어넘어야 한다고 생각하고 있음. 삼성의 문제가 아니라, 국내 모바일 시장의 문제로 보인다. 삼성 에서 한 해에 출시 모델이 200개가 넘는다. 하드웨어를 파는 회사였는데, 점차 소프트웨어로 변하고 있음. 창의가 중요해졌다.


Q : 그동안 조형적인 문제, 실험적인 디자인을 많이했는데?
A : 키패드 폰이 등장했다가 MP3 / 카메라 기능들이 등장하면서 그 기능을 충족시켜줄 수 있는 방식은 터치밖에 없었다. 시장이 터치폰으로 이동했다. 센서, 보이스, 제스쳐, 웨어러블 컴퓨터?... 스마트폰이 아닌경우 저렴한 폰도 존재. 문자메시지 잘 쓰시는 분들은 터치를 잘 쓰지 않는다. 그럼에도 불구하고 터치는 대세이고 앞으로도 그렇게 될 듯.


Q : 삼성 핸드폰의 기술적인 수준은 얼마나 진행되었나?
A : 1. 폰이 예뻐야 한다, 2. PC like 두가지 기능이 있음. 거의 컴퓨터와 비슷하다고 봄.


Q : 우리나라 통신사업자 규제. 어느정도 규제하나? 과연 개방될 수 있을까?
A : 통신사업자, 제조사, 서비스업체, 인프라 장비 업체가 각각 하는 역할이 있었음. 애플은 우리의 경쟁상대가 아니라고 생각했다. 그런 와중에 통신사업자, 제조사의 역할이 많이 섞이게 되었다. 애플은 통신사업자에게 기기를 팔고… 본인들이 원컨 원치않건 역할은 바뀔 수 밖에 없는 상황이다.


Q : 삼성은 마켓 제조사의 역할을 충실히 할것인가?
A : 콘텐츠센터를 만들어서 열심히 해보려고 하고있음.



Q : 삼성 VS 애플, 애플의 경우 수시로 커뮤니케이션의 니즈를 반영해서 개발을 하는데, 그런 면에서는 승산이 있다고 보시는지?

A : 어려운 문제이나. 국가의 발전을 위해서 이겨야 한다고 본다. 매년 매년 그 해의 이슈가 전혀 다르다. 애플이 어떻게 될지는 사실 모른다. 오픈 os라고 하지만 굉장히 폐쇄적이다.

 


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 ]

[UX] 세미나2009.09.20 17:00

[본 강의의 저작권은 발표자에게 있습니다.]




주제: 모바일 UX 이노베이션 세미나 2009
일시: 2009.9.17 (목)
장소: 강남역 한국과학기술회관 국제회의실
제목: sky TruEmotion UI와 next generation UI
연사: 팬택계열 국내상품기획팀 UI기획파트 정미영 대리 


목차

1. sky touch UX background
1.1 시장 배경
1.2 내부적 요인 및 배경

2. sky full touch UX strategy
2.1 SKY Full touch UX identity
2.2 UX category & strategy

3. SKY TruEmotion UI
3.1 contextual UI
3.2 3D, dynamic UI
3.3 TruEmotion UI

4. sky next generation UI
4.1 emotion 그리고 emotion



1. sky touch UX background
1.1 시장 배경
1) 터치폰 패러다임
2) 빠른 속도로 학습하는 고객
3) 기술의 발전

1.2 내부적 요인 및 배경
1) 상대적으로 적은 터치 폰 모델 개수
2) 사업자 needs
3) 기술환경을 대변하는 내부 경쟁력 제고


2. sky full touch UX strategy
2.1 SKY Full touch UX identity
love canvas
- 영상통화시 그림그리기 지원

presto
- 원터치로 음악감상 
- gesture 지원

love actually
- 메모를 전달할 수 있는 전광판

sky 4방향 메뉴
full touch UI
- 선택하면 메뉴가 확대되는 UI
- 감성적인 위젯
- 디지로그

simple, easy, gesture, emotion 를 통해 감성 UXD를 반영

2.2 UX category & strategy
simple , easy, gesture, emotion UI + 3D / Dynamic, contextual UI


3. SKY TruEmotion UI
3.1 contextual UI
사용자 인지과정에 근거
- 기능을선택 -> 기능을 반영할 컨텐츠를 선택 -> 선택한 컨텐츠에 기능을 수행
- 화면을 선택하고 싶은 욕구 -> 선택할 수 있는 화면비교 -> 비교 후에 선택
- player로 music 감상 중 -> web 서치욕구 -> player / web page 동시출력 (멀티태스킹)

3.2 3D, dynamic UI
- 저장중 모션, 삭제 모션을 감성적이면서 동적이게 개발

3.3 TruEmotion UI
- cube UI: 심장이 두근두근 거리는 느낌을 줌
- t map: gps 촬영 + PIP (TV)
- 웹서핑 + 미니플레이어
- 전화를 많이 하면 열매가 맺어짐
- 가속도 센서를 이용하여 landscape 모드로 전환시 디지털 액자 보여짐
- divx player: rock 모드




4. sky next generation UI
4.1 emotion 그리고 emotion

- touch UI
- emotion
- user
- sensor (가속도, 근접, 조도)
- chip

"칭찬은 개발자도 춤추게 한다."



본 문서는 총 2개의 문서로 되어 있습니다.

모바일 UX 이노베이션 세미나 2009 (1/2) 
모바일 UX 이노베이션 세미나 2009 (2/2)  - 현재문서




Posted by 위승용 (uxdragon)

댓글을 달아 주세요

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

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

[UX] 세미나2009.09.20 16:44
[본 강의의 저작권은 발표자에게 있습니다.]



주제: 모바일 UX 이노베이션 세미나 2009
일시: 2009.9.17 (목)
장소: 강남역 한국과학기술회관 국제회의실
제목: samsung touchwiz evolution
연사: 삼성전자 모바일UX 디자인파트 황병철수석


목차

1. touch phone market
2. UX design philosophy
3. touchwiz design strategy
4. touchwiz as a good UX
5. touchwiz as a brand
6. touchwiz evolution
7. touchwiz spreadout
8. touchwiz next?



1. touch phone market
- 터치폰 시장이 확대되고 있음
- 삼성에서 새로 하고있는 프로젝트는 터치폰이 대부분
- 터치위즈 UI를 빨리 만들어 제품에 적용했음

전체 모바일 시장 2009 3Q
- 노키아 38.6%
- 삼성 20.3%
- LG 10.6%

UX 겉으로 보이는것은 빙산의 일각
- 선행디자인 조기 도입
- 감성 요인을 발굴
- UX 관련된 사회현상, 기술, 소셜네트워킹 조사해서 체계적이고 안정적인 방향으로 집어넣음
- palm pre
- 기술분야와 co work을 잘 해야 함
- ux쪽에서는 기술로 구현이 안되는것을 만들지만, 기술이 구현이 안되면 쓸모가 없음


2. UX design philosophy
"creating an emotional journey"
product as object -> product as experience
- 욕구
- 호기심
- 즐거움

UX 적인 차원에서 뭐가 좋은 인터페이스냐?
- 자체적으로 리서치
- 사례를 모아서 어떤 요소를 고려해야 하는지 꾸준한 사례 교육을 통해 디자인 창출

고려 요소
- simple 단순한 (쉬운, 명료한, 확장되는)
- reliable 믿음직한 (든든한, 일관된, 안전한)
- delightful 즐거운 (배려하는, 매력있는, 감동을 주는)


단순한
- 흑과 백으로 이루어진 단순한 게임
- 구글 검색

믿음직한
- 마리오
- 애플 breakaway cords

즐거운
- 닌텐도 wii
- 시카고 밀레니엄 파크


3. touchwiz design strategy
- UX가 차지하고 있는 비중이 제한적이었음.
- 현재는 UX에 의존적인 경향


4. touchwiz as a good UX
단순한
- 블루투스 paring을 drag & drop의 단순한 구조로 만들었음
- 멀티미디어로 들어가는 단계 복잡, 재미없었음: cube as a gate
- wallpaper widget: 쉽게 월페이퍼 변경
- phonebook: smart search

믿음직한
- haptic feedback
- one finger zoom: 멀티터치 특허를 피해갈 수 없어서 회피안을 만듬
- gesture unlock: 5가지정도 인지가 빠른 방식으로 적용 (아몰레드, 제트)
- contact scroll: 문자, 모양 제스처를 이용

즐거운
- widget
- haptic game:온라인 위젯 형태로 다운로드
- photo album
- volume: 디지로그


5. touchwiz as a brand
터치 UX의 Brand 화 전략
- 제품, 기능, 모델 중심 광고 -> UX 중심 광고
- 영업, 마케팅 부서에서 런칭 설명 -> UX 부서에서 런칭 설명

touchwiz ui
- 사내 공모를 통해서 만들었음
- 터치 UI의 브랜드화


6. touchwiz evolution
touchwiz 1.0 -> 2.0
- 큰 구조적인 변화는 없음
- 전보다는 rich하게
- 위젯 화면이 제한적 40여개: 화면이 하나였는데, 화면을 여러개로 늘렸음.
- 메뉴 10화면정도 지원

touchwiz 1.0
- simple touch ux structure: 복잡했던 구조를 단순화
- widget idle screen
- haptick feedback
- analog metaphor for touch
- flash effects: 자연스런 움직임

touchwiz 2.0
- touchwiz 1.0 + a
- media cube
- wide idle screen
- multi page main menu
- online widget / app store
- one finger zoom
- 현재도 진화는 계속 되고 있음


7. touchwiz spreadout
3.1 inch amoled jet - 웹사이트
- 들고 다니기 좋은 크기



omnia2
- windows mobile 6.1 탑재

 

mp3, pmp 쪽에서도 touchwiz의 핵심 철학을 공유하면서 디바이스 특성에 적합한 variation


8. touchwiz next?
- open platform (sdk 공개)
- app store
- service enabling
- deep sns integration (폰북, htc hero 폰북에 sns 연동, 트위터 연동)
- conncetivity
- smarter (정황인식)



"lanching in 2010"
- CTIA, 월드모바일콩그레스, CES



본 문서는 총 2개의 문서로 되어 있습니다.

모바일 UX 이노베이션 세미나 2009 (1/2) - 현재문서
모바일 UX 이노베이션 세미나 2009 (2/2)



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

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

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