30
앱앱앱앱앱 앱앱 UX 앱앱앱 앱앱 KT / 삼삼삼삼삼삼삼 / 삼삼삼 삼삼

모바일 UX디자인의 개요

Embed Size (px)

DESCRIPTION

삼성멀티캠퍼스와 KT연수원에서 열린 UX/UI개발강의를 위한 제1강 강의자료입니다.

Citation preview

Page 1: 모바일 UX디자인의 개요

앱개발자를 위한 UX 디자인 실무

앱개발자를 위한 UX 디자인 실무

KT / 삼성멀티캠퍼스 / 동준상 강사

Page 2: 모바일 UX디자인의 개요

동 준 상 (@jonathanis | www.nextapp.co.kr)

직위 – 현 넥스트앱 대표 , 위너스랩 UX 아키텍트강의 - 삼성멀티캠퍼스 , KT 연수원 , 한국온라인미디어협회경력 – 교직원공제회 / 서울대학교 치과병원 스마트회의 / 중소기업청 / 블랙박스 / 조선호텔 / 신세계푸드 / 세븐럭카지노 / 보디가드 / 00700 / 클라우드 학원 플랫폼

오늘의 강사소개

Page 3: 모바일 UX디자인의 개요

오늘 강의 개요오늘 강의 개요

• 고급개발자 - 최소의 변환작업을 통해 크로스 플랫폼으로 적용 가능한 UX 디자인 패턴 확보

• 중급개발자 - 최신 앱 컨텐츠와 디자인의 모범사례를 통해 보유한 기술의 적용방향을 확인

• 개발입문자 - 전형적인 모바일 UX 디자인을 이해함으로써 Model 과 View 를 효과적으로 결합

Page 4: 모바일 UX디자인의 개요

오늘 강의 목차오늘 강의 목차

• H1. 아이폰 UX 디자인 모바일 UX 의 기본요소

• H2. 아이패드 UX 디자인 아이폰과의 차별성

• H3. 안드로이드 / 윈도우폰 7 UX 디자인 플랫폼별 전형성

• H4. 모바일 UX 개발프로세스 페르소나부터 목업까지

• H5. 모바일 UI/UX 사례 ( 중소기업청 ) 실제 개발프로세스

• H6. UX 실무 앱주제선정 /UX 문서활용 /UX 컨셉

• H7. UX 실무 스토리보드 / 와이어스케치 / 세부요소

Page 5: 모바일 UX디자인의 개요

H1. iPhone UX DesignH1. iPhone UX Design아이폰 UX 디자인

PackMan

Page 6: 모바일 UX디자인의 개요

H1. iPhone UX DesignH1. iPhone UX Design

• UX Design vs. UI Development

• 전형적인 iPhone UX Design

• 재해석된 iPhone UX Design

• 같은 Model, 다른 UX ( 나이키 플러스 vs 운동트레이너 )

• 오늘날 전형적인 iPhone UX Design 의 필수요소

Page 7: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UI

LiveTrack24

• UX

Page 8: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UI

LiveTrack24

A Place

Interaction

Development

• UX

Feelings

EasinessPracticalityEfficiency

Design

Page 9: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UI

LiveTrack24

사람 , 기기 , 소통 , 장소

Page 10: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

사람과 기기간의 소통을 위한 산업디자인의 영역에서 , UI 란 사람과 기기 사이에서 소통이 일어나는 장소이다 .

In the industrial design field of human-machine in-teraction, the user interface is (a place) where in-teraction between humans and machines occurs.

사람 , 기기 , 소통 , 장소

• UI

Page 11: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

UI, 효과 , 효율 , 만족

• Usability

Page 12: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

• Usability

사용성이란 특정 UI 의 디자인이 사용자의 정신과 육체에 영향을 미치는 정도이며 , 그것을 통해 시스템 사용의 절차를 효과적 , 효율적 , 그리고 만족스럽게 만드는 정도를 의미한다 .

Usability is the degree to which the design of a particular user interface takes into account the human psychology and physiology of the users, and makes the process of using the system effec-tive, efficient and satisfying.

UI, 효과 , 효율 , 만족

Page 13: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

• Usability

UI, 요구 , 반영

Page 14: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

• Usability

사용성이라는 지표는 어떤 제품이 목표한 사용자에게 어느정도의 효율성 , 효과성 , 만족성을 제공하는지와 사 용 으 로 부 터 발 생 된 요 구 사 항 이 얼 마 나 잘 반영되었는가를 나타내준다 .

It describes how well a product can be used for its intended purpose by its target users with effi-ciency, effectiveness, and satisfaction, also taking into account the requirements from its context of use.

UI, 요구 , 반영

Page 15: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UX by

Donald Norman

Page 16: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UX by

MIT / User-centered Design

‘ 일상적인 물건의 디자인’이라는 책을 통해 , Norman 교수는 폭 넓은 실증적 조사를 통해 , 좋은 디자인과 나쁜 디자인의 이면에 있는 인간의 심리를 설명하고 , 그것을 통해 디자인 원칙을 제안한다 . 그는 우리의 일상적인 삶에 있어 디자인의 중요성과 함께 , 나쁜 디자인에 의해 야기되는 오류의 결과를 역설하고 있다 .

Donald Norman

Page 17: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UX

ISO 9241-210 는 UX 를 ‘ 제 품 이 나 시 스 템 , 서비스를 사용하려고 예상하거나 , 사용한 결과로 나타난 사람의 인지와 반응이다 .’ 로 정의하고 있다 . 이에 따르면 , UX 란 ‘사용’에 집중되고 또한 종속된 개념이다 .

ISO 9241-210 defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service". So, user experience is subjective and focuses on the use.

사용 , 인지 , 반응

Page 18: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

• UX

UX 란 시스템을 사용한 사람의 , 사용에 대한 느낌이다 . 사람 - 컴퓨터반응론 (HCI)이나 제품의 소유를 통해 얻는 경험적이고 영향적이며 가치있는 사용자의 경험에 초점을 맞추는 동시에 , 물건의 사용에 따르는 실용적 측면이나 사용의 용이성 , 시스템의 효율성과 같은 넓은 범위를 다룬다 . UX 가 시스템을 사용하는 인간의 감정과 생각 그리고 효용에 대한 것을 다루므로 UX 는 인간의 본성에 종속된 개념이며 , 또한 주변 여건이 변화함에 따라 사용의 경험 역시 변화하므로 UX 는 역동적으로 변화하는 개념이다 .

User eXperience (UX) is about how a person feels about using a system. User experience highlights the experien-tial, affective, meaningful and valuable aspects of human-computer interaction (HCI) and product ownership, but it also covers a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s performance, feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

느낌 , 실용성 , 용이성 , 효율성

Page 19: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

• UX Design

제품과 관련된 사용자의 모든 소통과 교류의 측면 - 사용자는 그것을 어떻게 인식하는가 , 혹은 어떻게 사용법을 배우는가 , 그리고 실제로 어떻게 그것을 사용하는가 와 같은 분야를 관장하는 것이다 .

The scope of the field is directed at affecting "all aspects of the user’s interaction with the product: how it is perceived, learned, and used.“

인식 , 학습 , 실제사용

Page 20: 모바일 UX디자인의 개요

UI Development vs. UX Design UI Development vs. UX Design

LiveTrack24

• UX Designer

사 용 자 경 험 이 라 는 것 은 인 간 의 감 정 을 이 루 는 요소이므로 실제로 ‘디자인되어’ 질 수는 없다 . 대신 UX디자이너는 사용자로 하여금 특정한 경험을 할 수 있도록 경험의 기회는 제공할 수 있는 것이다 .

As user experience is a subjective feeling, it can-not actually be "designed". Instead, you can de-sign for a user experience, trying to enable cer-tain kind of experiences.

경험의 기회를 제공

Page 21: 모바일 UX디자인의 개요

전형적인 iPhone UX Design전형적인 iPhone UX Design

Knot

Page 22: 모바일 UX디자인의 개요

전형적인 iPhone UX Design전형적인 iPhone UX Design

• HIG 개요

Page 23: 모바일 UX디자인의 개요

재해석된 iPhone UX Design재해석된 iPhone UX Design

WhereToPackMan LiveTrack24

Page 24: 모바일 UX디자인의 개요

재해석된 iPhone UX Design재해석된 iPhone UX Design

• 중심이슈

Page 25: 모바일 UX디자인의 개요

같은 Model, 다른 UX같은 Model, 다른 UX

Nike + NB Total Fit Cardio Track

Page 26: 모바일 UX디자인의 개요

같은 Model, 다른 UX, 다른 Price같은 Model, 다른 UX, 다른 Price

Nike +$1.99

NB Total FitFree

Cardio Track$49.99

Page 27: 모바일 UX디자인의 개요

같은 Model, 다른 UX같은 Model, 다른 UX

나이키 플러스

Page 28: 모바일 UX디자인의 개요

같은 Model, 다른 UX같은 Model, 다른 UX

NB 토탈핏

Page 29: 모바일 UX디자인의 개요

같은 Model, 다른 UX같은 Model, 다른 UX

Cardio Track

Page 30: 모바일 UX디자인의 개요

Follow me : @jonathanisBe Facebook Friend : Jonathan Dong Brand-site : http://www.nextapp.co.krUseful blog-Post : http:// naebon.blog.meEmail : [email protected]

Contact us

감사합니다 . 감사합니다 .