Part 1.

어떤 디자인 사례

디자인을 수행한 예를 살펴봅시다

!

• “상 받기 위해서가 아닌, 사람을 위한 디자인”

• 세상을 바꾸는 디자인을 하고 싶음

• 사람을 위해서 디자인 해야 함. 그 사람은 주요 대상만을 의미하는 것이 아님. 주요 대상자의 사용 행태 뿐만 아니라 관리자, 제작자, 배급사 등 깊숙한 단계까지 많은 관심을 기울여야 함

< TED 2012 >

UX란 무엇인지 살펴 봅시다

!

• 도널드 노먼

• 닐슨 노먼 그룹 공동 창업자

• 전 애플 부사장

• UX라는 단어를 처음 사용

• UX란 사용자가 기업, 서비스, 기업의 제품과 상호작용하면서 얻는 모든 측면의 경험

< Donald Norman >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 도널드 노먼의 “디자인과 인간 심리”

• 기본 디자인 원칙은 바뀌지 않았다

• 기술의 변화로 사람의 행동 양식이 바뀌었다

• 때문에 디자인 원칙의 적용 방법이 달라져야 한다는 이야기

< 국내판으로는 디자인과 인간심리 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 디자인의 기본 원칙1. 머리 속의 지식과 세상속의 지식을 모두 이용하라

2. 과제의 구조를 단순하게 하라

3. 일이 가시적이게 만들어라

4. 대응관계가 올바르게 만들어라

5. 자연스러운 제약 및 인공적 제약의 위력을 활용하라

6. 만일의 오류에 대비한 디자인을 하라

7. 이 모든 것이 잘 되지 않으며 표준화하라

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

1. 좋은 개념모형을 제공하라 (1/3)

!

• 개념모형 : 사람들이 자신, 타인, 환경, 사물들에 갖는 인지적 모형

• 개념 모형은 심성 모형(Mentalmodel)의 일부분

• 사람들은 심성모형(Mentalmodel)을 경험, 훈련, 지시를 통해 형성한다

< 이 자전거 비슷한 물체는 달릴 수 있겠는가? >

< 개념모형(Conceptual Model)과 심성모형(Mental Model) >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

1. 좋은 개념모형을 제공하라 (2/3)

!

• 한 도구의 심성모형 : 그 장치의 작용과 가시적 구조를 지각하고 해석함으로써 형성

• 좋은 개념모형이 있으면 우리는 자기가 한 행위의 결과를 예측할 수 있다.

• 디자이너는 이러한 개념모형을 디자인하여 시스템 이미지로서 사용자에게 제시해야 한다

< 디자이너가 가진 개념 모형이 시스템 이미지로 잘 만든다 > < 제품에 대한 사용자의 개념 모형이 쉽고 정확하게 형성됨 >

< 이는 제품을 쉽게 배우고 사용할 수 있다는 의미 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

1. 좋은 개념모형을 제공하라 (3/3)

!

• 디자인 모형 : 디자이너의 기획의도

• 사용자 모형 : 인터랙션으로 만들어진 모형

• 시스템 이미지 : 제품과 사용자의 접점

= UI(User Interface)

• 디자이너는 시스템 이미지를 만든다

• 사용자는 시스템 이미지와 상호작용하면서 시스템에 대한 사용자 모형을 형성한다

< 디자이너가 가진 개념 모형이 시스템 이미지로 잘 만든다 > < 제품에 대한 사용자의 개념 모형이 쉽고 정확하게 형성됨 >

< 이는 제품을 쉽게 배우고 사용할 수 있다는 의미 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 문에 있는 Text는?

ex. “당기시오” / “미시오”

• 당겨도 밀어도 상관 없는 문이라면?

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• Mental Model

• 어댑티브 패스(Adaptive Path)의 공동창업자인 인디 영(Indi Young)

• 간단한 도표로 작성함으로써 “사용자의 멘탈모델은 이렇습니다.”라고 말할 수 있는 방법을 제시

< Mental Model >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 행동 데이터를 기반으로 패턴을 찾고, 패턴을 포괄하는 모델로 정리

!

• 사람들의 행동 동기, 사고 과정, 감성적 / 철학적 배경에 대해 이해 필요

!

• 대표 사용자들에게서 수집된 행동데이터를 의미상 가까운 것끼리 모아 놓은 친화도(Affinity diagram)

원문 : http://www.insightbook.co.kr/post/505

< 친화도 다이어그램 (Affinity Diagram) >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 이런 행동을 모아서 세로로 쌓아 기둥처럼 표시하고, 인지되는 의미의 차이에 따라 구분해 나열!

• 포괄할 수 있는 성격의 이름을 붙이면 멘탈모델 도표가 완성

원문 : http://www.insightbook.co.kr/post/505

< 친화도 다이어그램 (Affinity Diagram) >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

가시적이게 만들어라 (Visibility)

• 가능한 조작 수가 통제기 수보다 많을 때 어려움이 발생

• 잘못된 전화기 시스템 : 24개의 기능을 가지고 있는데 반해 통제기는 15개 밖에 없었다.

• 자동차 : 훨씬 많은 기능을 가진 자동차가 더 배우기 쉽고 사용하기 편리. 자동차의 여러 장치가 가시적이며 통제 버튼과 통제의 대상 간에 좋은 대응관계, 자연스러운 관계성이 있기 때문

< 사무실 전화기와 자동차 Cockpit >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 복잡성(Complex)과 혼잡성(Complicated)

• 비행기 계기판과 당신 그리고 조종사

• 지식에서 비롯된 차이

• 학습 이후에 사용이 편리해 지는 것과 사용 할 때마다 학습이 필요한 것의 차이를 고려

• 좋은 디자인은 한 번 사용해 본 것으로 전체를 인지하여 사용하기 쉽게 해줌

< 파일럿 > < 일반인 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• Affordance(행동 유도성): 사물의 지각된 특성

• ‘어떤 사물에 할 수 있는 행동이 무엇인가’

• 책상, 의자 같은 물체가 아닌 관계를 의미

• 행동유도성을 잘 이용하면 사용자는 단지 보기만 해도 무엇을 해야 할지 알 수 있음

• ex 1. 문 손잡이 = “난 문이오 열 수 있소

• ex 2. 아이폰의 메인 버튼의 형태

= “나는 버튼이오. 누르시오”

< 문 손잡이 >

< iPhone 홈버튼 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 대응 : 행동과 실제 조작이 대응하는 것

• 자연스러운 대응 : 물리적인 특성과 문화적인 표준을 잘 살린 대응 관계. 이는 해당 기능을 즉각적으로 이해할 수 있게 한다.

• 가능한 모든 조작들이 눈에 잘 띄고 통제장치와 표시판이 자연스럽게 대응되어 있을 때 그 장치는 쓰기가 쉬워진다

• 오른쪽으로 핸들을 돌려 우회전

• 벤츠의 좌석 조정장치

< 우회전 >

< 벤츠 좌석 조정장치 >

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 피드백의 원칙 : 피드백(Feedback)이란 어떤 작동이 실제로 이루어졌는지 어떤 결과가 달성되었는지에 관한 정보를 사용자에게 알려주는 것

!

• 우리가 생활용품을 다룰 때 인과관계(Causility)의 심리학이 작용. 어떤 행위 바로 직후에 어떤 현상이 나타나면 그 현상이 그 행위에 의해 야기된 것으로 보인다

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 너무 단순한 것은 지루하다

• 너무 복잡한 것은 혼란스럽다

• 익숙해 질수록 더 복잡함을 원한다

• 처음에 사용이 쉽고 나중에 지루함을 느끼지 않게 디자인해야 함

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 행위의 7단계 : 사람이 시스템이나 제품을 사용할 때 하는 행동 7단계

• 목적 형성 단계, 실행의 세 하위 단계, 그리고 평가의 세 하위 단계로 구성

• 좋은 인터랙션 디자인 1. 사용자의 목적과 그것을 달성하기 위해 할 수 있는 행위 간에 차이가 작음

• 좋은 인터랙션 디자인 2. 원래 목적과 실행 결과 간 차이가 적어야 함

개략적인 UX와 UX 디자인

< 행위의 7단계 >

UX란 무엇인지 살펴 봅시다

!

• Fun은 중요한 요소

• 사용성에 대한 불만족을 상쇄

• 아이폰의 스크롤 애니메이션

• 웹페이지의 내용과 상관 없는 애니메이션

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 사용자 컴퓨터 인터랙션 연구에서 사용된 개념

• 1970~80년대 인간 중심의 디자인 (Human Centered Design, UCD)의 맥락에서 인간과 기계간의 상호교감에서 긍정적 경험의 가치를 만들어내고자 시도

• 1993년 도널드 노먼은 사용자 경험의 설계자로서 애플 컴퓨터의 디자인과 인간-컴퓨터 상호작용을 연구하는 이들에게 큰 영향

• 현재 : 컴퓨터 뿐만 아니라 산업을 통해 제공되는 서비스, 상품, 프로세스, 사회와 문화에 이르기까지 널리 응용

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

UX 디자인의 이점

• 사용자의 요구를 벗어나는 요소 감소

• 전체적인 사용성과 체계의 증가

• 디자인과 상세하고 적합하게 예상된 가이드라인을 통한 개발의 효율성

• 사용자 관찰을 통한 사업과 마케팅의 목표 달성

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 위키피디아의 UX 디자인 정의

• 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험

• 단순히 기능이나 절차상의 만족뿐 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치있는 경험

• 인간공학, 인간과 컴퓨터 상호 작용, 정보 아키텍처, 휴먼 팩터스, 사용자 인터페이스 디자인, 사용성 공학 분야와 많은 공통된 요소를 가지고 있다.

개략적인 UX와 UX 디자인

UX란 무엇인지 살펴 봅시다

!

• 김진우 교수의 사용자 경험:

• 일상생활에서 컴퓨터와 상호작용하면서 축적하는 모든 지식, 기억, 감정

• 사용 전, 중, 후에 일어나는 사용자의 감정, 반응, 행동을 포함

• 최적은 유용성, 사용성, 감성의 균형• 유용성: 있어야할 것들이 제자리에 있는 것

• 사용성: 서비스를 이용하는 과정의 효율성

• 감성: 사람들의 마음 속에 남는 느낌, 감정

개략적인 UX와 UX 디자인

https://www.ted.com/talks/denis_dutton_a_darwinian_theory_of_beauty#

Denis Dutton was a philosophy professor and the editor of Arts & Letters Daily. In his book The Art Instinct, he suggested that humans are hard-wired to seek beauty.

WHO?

Part 3.

대략 이해가 될 것 같은 예시 (1/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (스마트폰 중심)

• iPhone 6s (Link)

대략 이해가 될 것 같은 예시 (2/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (브라우저 중심)

• Chrome Browser (Link)

대략 이해가 될 것 같은 예시 (3/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (TV 중심)

• LG Web OS TV (LInk)

대략 이해가 될 것 같은 예시 (4/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (스마트워치 중심)

• 삼성 갤럭시 기어 S2 (Link)

대략 이해가 될 것 같은 예시 (5/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (차량 중심)

• BMW iDrive (Link)

대략 이해가 될 것 같은 예시 (6/6)

• UX 분야에서 유의미하게 생각하는 여러 요소와 예시를 살펴 봅시다 (IoT 중심)

• Apple Homekit (Link)