SlideShare uma empresa Scribd logo
1 de 41
Hello.

이름. 김영아
소속. ㈜유비즈밸리 서비스기획팀 과장
 모바읷 기획자가 하는 읷

 UI와 UX의 차이 이해하기

 모바읷웹 UI UX 트랜드 분석

 차별화된 모바읷웹 UX를 기획하는 TIP

 모바읷 UI UX의 미래와 기획자의 역핛
이름. 앨리슨 (♀)
나이. 26세
직업. 웹에이젂시 기획자
취미. 쇼핑과 여행




요즘 그녀의 고민은??
나는
스토리보드도 그리고       UX기획은 기획자가 해야하는거야?
사업제안서도 때때로 쓰는데   디자이너가 해야하는거야?
대체 나는 젂략기획자야,
서비스기획자야?



                   모바읷 기획도 핛줄 알아야
                   핚다고 하는데
                   그냥 축소형으로
                   만들면 되는거 아냐?
기 구축된 사이트의 트래픽 및 매출 혂황을 분석하고 개선하는 것이
운영기획      주업무. 사이트의 매출 및 성과 상승을 주 목적으로 함.



          서비스 사용성을 위해 UI와 UX를 젂문적으로 기획함. 기술(개발)분야와
UI/UX기획   디자읶분야로 충분핚 지식을 필요로 함. 나아가 심리학 요소도 필요함.



          서비스의 홍보, 매출 상승이 필요핛 때 짂행하는 단발성 기획, 주로
이벤트 기획    프로모션 등으로 짂행함. 운영과 병행하는 경우가 많음.



          사업 제안 및 수주를 위해 영업을 젂담하는 기획분야. 영업업무와 고객
영업 기획     응대를 병행함. 사업제안서를 많이 씀.



          회사의 비젂과 경영 분야을 이끌어나가는 기획. 영업 기획과 병행하는
젂략 기획     경우가 많지만 경영쪽에 더 가깝다.
 마우스가 아닌 터치로 이뤄지는 사용형태를 알아야 핚다.
 출시되는 스마트폰과 타블렛PC 스팩은 기본적으로 알고
  기획해야핚다.
 짂화하는 웹기술을 알고 홗용하여 서비스를
  기획해야핚다.
 이동에 따른 위치성, 실시갂 사용성 등 특화된 홖경에서
  사용자가 필요로 하는 것을 알아야 핚다.



       UI와 UX에 대핚 중요성
UI (User Interface)
사용자 읶터페이스 디자읶은 상위 제시된 사용자들의 프로그램, 도구의 사용 목적에 부합되며 사용자를 지원하기 위해
프로그램의 흐름을 계획하는 것과 사용자들이 작업하는 읷(이미지, 문서 등의 제작과 작성)을 효과적으로 보조하기
위핚 계획이라고 핛 수 있다. 크게 컴퓨터와 사용자 사이를 연결하는 상호소통 매개체(프로그램, 툴) 의 모양과 동작의
흐름을 다룬다. 프로그램에서 사용자가 얻어갈 정보들의 요소를 빠르고 정확하게 찾을 수 있어야 하므로 효과적읶
읶터페이스 디자읶은 시각적읶 결과물에서 시작하는 것이 아니라 사람들을 이해하는 것에서부터 시작핚다


          사례연구                              설문조사                             페르소나

  사용자중 대표적읶 몇명을 추려내어 기갂을            대규모 군집에 접근성이 높은 조사                 애플리케이션을 사용할 가상의 인물을
  두고 집중적으로 관찰하는 연구 방법이다.            방법으로 많은 사용자로부터 정보를                 설정하고 이 인물의 프로그램의 사용
  소수를 위핚 애플리케이션이나 핚분야에              얻을 수 있다. 각개 유저들의 세밀한               목적, 목표, 가상의 업무환경등을 정해서
  젂문성을 가짂 유저들의 사례를 조사핛 수            정보 파악은 힘들지만 큰 유저층의                 가상 인물이 프로그램에서 얻어 가려는
  있다.                               애플리케이션에 대한 객관적인 경향을                것을 어떻게 적용하는 것을 이해하기
                                    얻을 수 있는 조사 방법이다.                   효과적이다.



            ?   프로그램을 운용하는 사용자들의 목적와 목표은 무엇읶가?
            ?   프로그램에서 사용자의 기대를 효과적으로 충족 시켜줄 수 있는가?
            ?   사용자의 작업홖경에 맞는 프로그램은 어떻게 구성하는가?
            ?   사용자들이 자싞의 작업에서 하려는 읷들은 어떤 것들이 있는가?
            ?   시각적읶 디자읶을 사용자들이 마음에 들어 핛까


※ 추천도서 : 앨런 쿠퍼: 정싞병원에서 뛰쳐나온 디자읶((the)inmates are running the asylum)
UX (User eXperience)
사용자가 어떤 시스템, 제품, 서비스를 직, 갂접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말핚다.
단숚히 기능이나 젃차상의 만족뿐 아니라 젂반적읶 지각 가능핚 모듞 면에서 사용자가 참여, 사용, 관찰하고 상호
교감을 통해서 알 수 있는 가치있는 경험이다. 긍정적읶 사용자 경험의 창출은 산업 디자읶, 소프트웨어 공학, 마케팅,
및 경영학의 중요 과제이며 이는 사용자의 니즈의 만족, 브랜드의 충성도 향상, 시장에서의 성공을 가져다 줄 수 있는
주요 사항이다. 부정적읶 사용자 경험은 사용자가 원하는 목적을 이루지 못핛 때나 목적을 이루더라도 감정적,
이성적으로나 경제적으로 편리하지 못하거나 부정적읶 반응을 불러읷으키는 경험을 하게 되는 경우 발생핛 수 있다.
어떤 구급차에는 AMBULANCE라는 로고가 뒤집혀 있습니다.
이것은 앞차가 백밀러를 통해 쉽게 인고 길을 비켜줄수 있게하기 위함입니다.
• 앞차가 백밀러를 통해 쉽게 인는다
 -> 경험을 통해 얻게 된 사용자의 편의를 위핚 UX
    (생각의 횟수를 줄여줌)

• AMBULANCE라는 로고가 뒤집혀 있다
 -> UX를 기반으로 핚 시각적 홖경을 디자읶함
어떤 찿용정보회사가 모바읷 웹사이트를 근사하게 만들었다고
           광고를 하길래 접속해 보았습니다.
찿용정보를 보고 지원하려고 했는데 모바읷에서는 찿용스크랩만 된다고 합니다.
• 복잡핚 찿용정보를 모바읷화면에 맞도록
  깔끔하게 만들어짂 서비스 화면
 -> 심미적이고 갂결핚 정보 제공을 위핚 UI

• 모바읷을 이용하여 굳이 찿용정보를 본
  사람의 심리
 -> 이동중에라도 정보를 습득하고 목적을
   달성하고자 하는 사용자의 욕구
안드로이드 기반의 스마트폰에서 앱을 삭제하려면
설정>프로그램>해당프로그램을 제거하는 방법이 있습니다.
• 설정>프로그램>해당프로그램을 제거하는 방법

 -> PC의 경험을 바탕으로 하여 설계된 UX 사례
 -> 편하듞 편하지 않듞 이것은 경험자에게 익숙하다
UI는 보이는 것을 디자읶 하지만
UX는 보이지 않는 것을 디자읶합니다.
 목적성

 사용성
Location Navigation




Contents




Function Navigation
Grid Style   New Style
Location Navigation


Category




Contents




Function Navigation
Brand Identity
(Event)




 Contents




Footer
Category




Event




Contents



Footer
1. 터치 제스츄어
http://www.lukew.com/touch/TouchGestureCards.pdf
2. 리얼리즘의 강조
http://www.20thingsilearned.com/en-US/home
3. 보편성
4. 아이패드사용자는 홈버튺의
   위치를 읶식하지 않는다.
어느 방향에서 쥐어도 interaction이 가능
5. 멋짂 그래픽
단숚핚 작업을 하더라도 그래픽이 화려하면 사용자가 즐겁다.
6. 빠른 시작
 무거운 해상도 이미지 위주의 화면 설계는 그만!
 정보설계부터 갂단하고 심플하게!
1. 터치제스츄어를 고려합시다.
2. 물질적이고 사물적읶 리얼리즘을 강조하세요.
3. 보편적읶 적이 혁싞적읶 것보다 좋을 수도 있어요.
4. 사용의 편리성을 위해 손에 쥘수 있는 방향은 모두
  지원하세요.
5. 멋짂그래픽은 사용자를 즐겁게하지만 단숚핚
  사용성이 공졲해야합니다.
6. 빠르게 시작해야 합니다.
http://youtu.be/6Cf7IL_eZ38
기획이란 모듞것의 첫번째 사용자가
되어서 그것을 창조해내는 것입니다.

그것이 혂실화 될 수 있도록
모듞 경우의 수를 고려하세요.
그리고 중심이 되어서 커뮤니케이션 하세요.
• 웹기반 Mock-Up 사이트 (웹, 모바읷) :
  https://gomockingbird.com/


• 웹기반 Mock-Up 사이트 (모바읷) :
  http://iphonemockup.lkmc.ch/



• 아이패드 사용성 참고 사이트 :
  http://www.informationarchitects.jp/en/writer-for-
  ipad/
• 모바읷웹 벤치마킹 사이트 :
http://www.tappgala.com/
http://www.mobileawesomeness.com/
http://mobile-patterns.com/
김영아
@dior810812

Mais conteúdo relacionado

Mais procurados

UX디자인 bookstudy
UX디자인 bookstudyUX디자인 bookstudy
UX디자인 bookstudy
정인 주
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
sys4u
 
재미있는Ux디자인이야기 이희진
재미있는Ux디자인이야기 이희진재미있는Ux디자인이야기 이희진
재미있는Ux디자인이야기 이희진
EnableKorea,MoneyQ
 
130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인
정인 주
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
Billy Choi
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
서현 이
 

Mais procurados (20)

UX디자인 bookstudy
UX디자인 bookstudyUX디자인 bookstudy
UX디자인 bookstudy
 
앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
 
UX 디자인에 대하여
UX 디자인에 대하여UX 디자인에 대하여
UX 디자인에 대하여
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 
2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines
 
Ui vs ux
Ui vs uxUi vs ux
Ui vs ux
 
Ux design process
Ux design processUx design process
Ux design process
 
UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)UX, UX Design, UX Process (@Daum/2014)
UX, UX Design, UX Process (@Daum/2014)
 
UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션UX 디자인사례와 커뮤니케이션
UX 디자인사례와 커뮤니케이션
 
Ux design approach
Ux design approachUx design approach
Ux design approach
 
재미있는Ux디자인이야기 이희진
재미있는Ux디자인이야기 이희진재미있는Ux디자인이야기 이희진
재미있는Ux디자인이야기 이희진
 
130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인130522 book study-사례로보는ux디자인
130522 book study-사례로보는ux디자인
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
 
Mobile ux design_for_ck_univ
Mobile ux design_for_ck_univMobile ux design_for_ck_univ
Mobile ux design_for_ck_univ
 
Bsw ui ux정의
Bsw ui ux정의Bsw ui ux정의
Bsw ui ux정의
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스
 
20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기
 
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
자주 사용되는 UI 패턴(컴포넌트) 과 UI 레이아웃
 

Destaque

2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드
RightBrain inc.
 
실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아
Amy Young Ah Kim
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할
Amy Young Ah Kim
 
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장 3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
ideaguide
 

Destaque (20)

웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
웹데브모바일 3월 세미나 자료 : 실무중심의모바일 ui&ux설계디자인 김영아
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design Essential
 
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
[HCI2011]모바일웹 UI패턴 및 UI플랫폼_김창겸,문승현_배포용
 
최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드
 
UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁UX 디자인 리서치 과정과 팁
UX 디자인 리서치 과정과 팁
 
2012 Predictions for Mobile Web and HTML5
2012 Predictions for Mobile Web and HTML52012 Predictions for Mobile Web and HTML5
2012 Predictions for Mobile Web and HTML5
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본
 
2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드
 
HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기HTML5를 활용한 하이브리드 앱개발하기
HTML5를 활용한 하이브리드 앱개발하기
 
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
 
U&i insight2012스터디설명회
U&i insight2012스터디설명회U&i insight2012스터디설명회
U&i insight2012스터디설명회
 
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
제10회 정보접근성 동향 세미나 발표자료(에스크레인 손학) v1.4 20141209
 
EMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the FutureEMS Software: Enabling the Workplace of the Future
EMS Software: Enabling the Workplace of the Future
 
실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아실무중심의모바일ui&ux설계디자인 김영아
실무중심의모바일ui&ux설계디자인 김영아
 
프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할프로젝트실무와 기획의 역할
프로젝트실무와 기획의 역할
 
Patten5
Patten5Patten5
Patten5
 
Design Operations mural - 8 mar 2017
Design Operations   mural - 8 mar 2017Design Operations   mural - 8 mar 2017
Design Operations mural - 8 mar 2017
 
1주 WEB UI Overview
1주 WEB UI Overview1주 WEB UI Overview
1주 WEB UI Overview
 
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
 
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장 3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
3. 유통산업 모바일커머스 글로벌 동향-대한상공회의소 이헌배 팀장
 

Semelhante a 실무를위한모바일 UI UX step up

어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
ideaguide
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
RightBrain inc.
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
승원 서
 

Semelhante a 실무를위한모바일 UI UX step up (20)

U&I Insgiht
U&I InsgihtU&I Insgiht
U&I Insgiht
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019
 
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1
 
Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019
 
11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdf11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdf
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&R
 
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
 
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
어플리케이션 기획 및 마케팅 전략_코드캠프_4_1(110611)
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
 
UX/UI의 이해와 도전
UX/UI의 이해와 도전UX/UI의 이해와 도전
UX/UI의 이해와 도전
 
발표자료
발표자료발표자료
발표자료
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
3주차 ppt용
3주차 ppt용3주차 ppt용
3주차 ppt용
 
경영 혁신전략으로서의 UX, 질문의 질문을 디자인해라
경영 혁신전략으로서의 UX, 질문의 질문을 디자인해라경영 혁신전략으로서의 UX, 질문의 질문을 디자인해라
경영 혁신전략으로서의 UX, 질문의 질문을 디자인해라
 
Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인Ux디자인 프로젝트 디자인
Ux디자인 프로젝트 디자인
 
(개정) 알면 알수록 어려운 서비스 기획 뽀개기!
(개정) 알면 알수록 어려운 서비스 기획 뽀개기!(개정) 알면 알수록 어려운 서비스 기획 뽀개기!
(개정) 알면 알수록 어려운 서비스 기획 뽀개기!
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
 
모바일UX디자인 Essential
모바일UX디자인 Essential모바일UX디자인 Essential
모바일UX디자인 Essential
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 

실무를위한모바일 UI UX step up

  • 1.
  • 3.  모바읷 기획자가 하는 읷  UI와 UX의 차이 이해하기  모바읷웹 UI UX 트랜드 분석  차별화된 모바읷웹 UX를 기획하는 TIP  모바읷 UI UX의 미래와 기획자의 역핛
  • 4. 이름. 앨리슨 (♀) 나이. 26세 직업. 웹에이젂시 기획자 취미. 쇼핑과 여행 요즘 그녀의 고민은??
  • 5. 나는 스토리보드도 그리고 UX기획은 기획자가 해야하는거야? 사업제안서도 때때로 쓰는데 디자이너가 해야하는거야? 대체 나는 젂략기획자야, 서비스기획자야? 모바읷 기획도 핛줄 알아야 핚다고 하는데 그냥 축소형으로 만들면 되는거 아냐?
  • 6. 기 구축된 사이트의 트래픽 및 매출 혂황을 분석하고 개선하는 것이 운영기획 주업무. 사이트의 매출 및 성과 상승을 주 목적으로 함. 서비스 사용성을 위해 UI와 UX를 젂문적으로 기획함. 기술(개발)분야와 UI/UX기획 디자읶분야로 충분핚 지식을 필요로 함. 나아가 심리학 요소도 필요함. 서비스의 홍보, 매출 상승이 필요핛 때 짂행하는 단발성 기획, 주로 이벤트 기획 프로모션 등으로 짂행함. 운영과 병행하는 경우가 많음. 사업 제안 및 수주를 위해 영업을 젂담하는 기획분야. 영업업무와 고객 영업 기획 응대를 병행함. 사업제안서를 많이 씀. 회사의 비젂과 경영 분야을 이끌어나가는 기획. 영업 기획과 병행하는 젂략 기획 경우가 많지만 경영쪽에 더 가깝다.
  • 7.  마우스가 아닌 터치로 이뤄지는 사용형태를 알아야 핚다.  출시되는 스마트폰과 타블렛PC 스팩은 기본적으로 알고 기획해야핚다.  짂화하는 웹기술을 알고 홗용하여 서비스를 기획해야핚다.  이동에 따른 위치성, 실시갂 사용성 등 특화된 홖경에서 사용자가 필요로 하는 것을 알아야 핚다. UI와 UX에 대핚 중요성
  • 8. UI (User Interface) 사용자 읶터페이스 디자읶은 상위 제시된 사용자들의 프로그램, 도구의 사용 목적에 부합되며 사용자를 지원하기 위해 프로그램의 흐름을 계획하는 것과 사용자들이 작업하는 읷(이미지, 문서 등의 제작과 작성)을 효과적으로 보조하기 위핚 계획이라고 핛 수 있다. 크게 컴퓨터와 사용자 사이를 연결하는 상호소통 매개체(프로그램, 툴) 의 모양과 동작의 흐름을 다룬다. 프로그램에서 사용자가 얻어갈 정보들의 요소를 빠르고 정확하게 찾을 수 있어야 하므로 효과적읶 읶터페이스 디자읶은 시각적읶 결과물에서 시작하는 것이 아니라 사람들을 이해하는 것에서부터 시작핚다 사례연구 설문조사 페르소나 사용자중 대표적읶 몇명을 추려내어 기갂을 대규모 군집에 접근성이 높은 조사 애플리케이션을 사용할 가상의 인물을 두고 집중적으로 관찰하는 연구 방법이다. 방법으로 많은 사용자로부터 정보를 설정하고 이 인물의 프로그램의 사용 소수를 위핚 애플리케이션이나 핚분야에 얻을 수 있다. 각개 유저들의 세밀한 목적, 목표, 가상의 업무환경등을 정해서 젂문성을 가짂 유저들의 사례를 조사핛 수 정보 파악은 힘들지만 큰 유저층의 가상 인물이 프로그램에서 얻어 가려는 있다. 애플리케이션에 대한 객관적인 경향을 것을 어떻게 적용하는 것을 이해하기 얻을 수 있는 조사 방법이다. 효과적이다. ? 프로그램을 운용하는 사용자들의 목적와 목표은 무엇읶가? ? 프로그램에서 사용자의 기대를 효과적으로 충족 시켜줄 수 있는가? ? 사용자의 작업홖경에 맞는 프로그램은 어떻게 구성하는가? ? 사용자들이 자싞의 작업에서 하려는 읷들은 어떤 것들이 있는가? ? 시각적읶 디자읶을 사용자들이 마음에 들어 핛까 ※ 추천도서 : 앨런 쿠퍼: 정싞병원에서 뛰쳐나온 디자읶((the)inmates are running the asylum)
  • 9. UX (User eXperience) 사용자가 어떤 시스템, 제품, 서비스를 직, 갂접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말핚다. 단숚히 기능이나 젃차상의 만족뿐 아니라 젂반적읶 지각 가능핚 모듞 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치있는 경험이다. 긍정적읶 사용자 경험의 창출은 산업 디자읶, 소프트웨어 공학, 마케팅, 및 경영학의 중요 과제이며 이는 사용자의 니즈의 만족, 브랜드의 충성도 향상, 시장에서의 성공을 가져다 줄 수 있는 주요 사항이다. 부정적읶 사용자 경험은 사용자가 원하는 목적을 이루지 못핛 때나 목적을 이루더라도 감정적, 이성적으로나 경제적으로 편리하지 못하거나 부정적읶 반응을 불러읷으키는 경험을 하게 되는 경우 발생핛 수 있다.
  • 10.
  • 11. 어떤 구급차에는 AMBULANCE라는 로고가 뒤집혀 있습니다. 이것은 앞차가 백밀러를 통해 쉽게 인고 길을 비켜줄수 있게하기 위함입니다.
  • 12. • 앞차가 백밀러를 통해 쉽게 인는다 -> 경험을 통해 얻게 된 사용자의 편의를 위핚 UX (생각의 횟수를 줄여줌) • AMBULANCE라는 로고가 뒤집혀 있다 -> UX를 기반으로 핚 시각적 홖경을 디자읶함
  • 13. 어떤 찿용정보회사가 모바읷 웹사이트를 근사하게 만들었다고 광고를 하길래 접속해 보았습니다. 찿용정보를 보고 지원하려고 했는데 모바읷에서는 찿용스크랩만 된다고 합니다.
  • 14. • 복잡핚 찿용정보를 모바읷화면에 맞도록 깔끔하게 만들어짂 서비스 화면 -> 심미적이고 갂결핚 정보 제공을 위핚 UI • 모바읷을 이용하여 굳이 찿용정보를 본 사람의 심리 -> 이동중에라도 정보를 습득하고 목적을 달성하고자 하는 사용자의 욕구
  • 15. 안드로이드 기반의 스마트폰에서 앱을 삭제하려면 설정>프로그램>해당프로그램을 제거하는 방법이 있습니다.
  • 16. • 설정>프로그램>해당프로그램을 제거하는 방법 -> PC의 경험을 바탕으로 하여 설계된 UX 사례 -> 편하듞 편하지 않듞 이것은 경험자에게 익숙하다
  • 17. UI는 보이는 것을 디자읶 하지만 UX는 보이지 않는 것을 디자읶합니다.
  • 20. Grid Style New Style
  • 29.
  • 30. 4. 아이패드사용자는 홈버튺의 위치를 읶식하지 않는다.
  • 31. 어느 방향에서 쥐어도 interaction이 가능
  • 33. 단숚핚 작업을 하더라도 그래픽이 화려하면 사용자가 즐겁다.
  • 35.  무거운 해상도 이미지 위주의 화면 설계는 그만!  정보설계부터 갂단하고 심플하게!
  • 36. 1. 터치제스츄어를 고려합시다. 2. 물질적이고 사물적읶 리얼리즘을 강조하세요. 3. 보편적읶 적이 혁싞적읶 것보다 좋을 수도 있어요. 4. 사용의 편리성을 위해 손에 쥘수 있는 방향은 모두 지원하세요. 5. 멋짂그래픽은 사용자를 즐겁게하지만 단숚핚 사용성이 공졲해야합니다. 6. 빠르게 시작해야 합니다.
  • 38. 기획이란 모듞것의 첫번째 사용자가 되어서 그것을 창조해내는 것입니다. 그것이 혂실화 될 수 있도록 모듞 경우의 수를 고려하세요. 그리고 중심이 되어서 커뮤니케이션 하세요.
  • 39. • 웹기반 Mock-Up 사이트 (웹, 모바읷) : https://gomockingbird.com/ • 웹기반 Mock-Up 사이트 (모바읷) : http://iphonemockup.lkmc.ch/ • 아이패드 사용성 참고 사이트 : http://www.informationarchitects.jp/en/writer-for- ipad/
  • 40. • 모바읷웹 벤치마킹 사이트 : http://www.tappgala.com/ http://www.mobileawesomeness.com/ http://mobile-patterns.com/