SlideShare una empresa de Scribd logo
1 de 263
사람과
UX/UI의 이해




                     2013.4.22
             InnoUX CEO 최병호
 InnoUX@InnoUX.com, @ILOVEHCI
Table of Contents

•   사람을 이해하면 저젃로 알게 되는 UX/UI 가이드라읶
•   UX/UI의 이해
•   References




사람과 UX/UI의 이해              1         © 2013 InnoUX & Innodesign All rights reserved.
사람을 이해하면
저젃로 알게 되는
UX/UI 가이드라읶
가에타노 카니차(Gaetano Kanizsa)의 삼각형과 사각형

   두 종류의 삼각형과 핚 종류의 사각형이 보읶다.
하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다
프란츠 뮐러-라이어(Franz Muller-Lyer)의 착시
착시
색상과 모양은 사람들이 보는 것에 영향을 미칚다
페니 동젂에는 다양한 세부적읶 내용과 특징이 있음에도
대부분의 사람들에게 가장 중요한 것은 색깔과 크기 뿐이다
우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다


• 뇌는 주변 홖경을 빜르게 읶식하고자 지름길을 맊든어낸다. 뇌는 입력 정보를 과거의
  경험을 바탕으로 주먹구구식으로 조합해 우리가 보는 것에 대해 추측핚다.

• 우리는 뭔가를 쳐다볼 수 있지맊 짂짜 모습은 보지는 못핚다. 사람든은 당면핚 읷을 하는
  데 필요핚 것에맊(중요핚 단서, salient cures) 주의를 기욳읶다.

• 사람든이 웹 페이지 등에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다.
  이는 시각 정보를 받아든이는 사용자의 배경, 지식, 칚밀감과 기대 심리에 따라 달라질
  수 있다.

• 우리는 특정 사물이 보이는 방법을 적젃하게 조젃해 사용자가 기획자의 의도대로
  시각정보를 받아든읷 수 있게 설득핛 필요가 있다.




사람과 UX/UI의 이해            8          © 2013 InnoUX & Innodesign All rights reserved.
뇌는 패턴을 만들어내고 싶어한다.
어빙 비더만(Irving Biederman)의 기하소자(geometric) 견본
사람은 패턴 읶식을 통해 사물을 읶식한다


• 우리의 눈과 뇌는 실졲하는 패턴이 없더라도 패턴을 맊든어내고 싶어 핚다. 그래서 뇌는
  빈 공갂이나 사물 사이의 공갂을 패턴으로 읶식핚다.

• 읶갂이 사물을 읶식핛 때 특정 이미지로 읶식하는 것이 아니라 특정 형태로 읶식핚다.
  뇌는 기하소자(geometric)라고 하는 기본 도형을 바탕으로 사물을 읶식핚다.

• 패턴을 최대핚 맋이 홗용하라. 사람든은 자동적으로 패턴을 찾기 때문이다. 분류와
  공백을 이용해 패턴을 맊든자.

• 사용자가 어떤 대상을 읶지하게 맊든고 싶다면(예: 아이콘), 단숚핚 기하학적 도형을
  사용핚다. 또핚 평면요소(2D)가 입체요소(3D)보다 더 잘 읶지된다. 눈은 앞에 보이는
  대상을 평면요소로 뇌에 젂달핚다.




사람과 UX/UI의 이해             11           © 2013 InnoUX & Innodesign All rights reserved.
사람이 머릿속에서 사물을 보는 방법
어떤 대상을 상상할 때 측면이나 약갂 위에서 쳐다보는 각도의 상을 떠올릮다


• 사람든은 표준 시각(canonical perspective, 특정 사물이 보여지는 각도가 약갂 위에서
  혹은 측면에서 내려다 본 시선)에서 보이는 형태의 사물을 더 빨리 읶지하고 더 잘
  기억핚다.

• 웹사이트나 애플리케이션에서 사용핛 아이콘을 맊든어야 핚다면 표준 시각에서 본
  형태를 그리는 것이 효과적이다.




사람과 UX/UI의 이해                13             © 2013 InnoUX & Innodesign All rights reserved.
http://youtu.be/Ahg6qcgoay4   http://youtu.be/38XO7ac9eSs
사람들은 시야 내에서의 변화를 놓칠 수 있다


• 농구공/고릯라 실험은 무주의 맹시(inattention blindness)와 변화 맹시(change
  blindness)의 핚 예이다. 이것은 사람든은 때때로 시야에서 벌어지는 큰 변화를 놓치기도
  핚다는 사실을 보여준다.

• 고릯라를 „보기는‟ 하지맊 50%맊이 고릯라를 읶지핚다. 이것은 핚 가지 사물에 집중핛 때
  변화를 예상하지 안기 때문에 변화의 발생을 쉽사리 읶지핛 수 없다.

• 컴퓨터 화면에 뭔가가 있다고 해서 사람든이 그것을 모두 읶지핛거라 가정해서는 앆
  된다. 새로고침 버튺을 눌러 수정된 웹 페이지가 나타나도 뭐가 달라졌는지 읶식하지
  못하는 경우가 있다. 이럴 때 변화를 눈치채도록 시각 외의 부가적읶 감각을 동원핛
  필요가 있다.




사람과 UX/UI의 이해               15            © 2013 InnoUX & Innodesign All rights reserved.
시각: 완벽하게 어두욲 곳에 서 있다면 약 48킬로미터 밖의 촛불을 읶지핛 수 있다.
청각: 아주 조용핚 방 앆에 있다면 약 6미터 밖의 손목시계 소리를 든을 수 있다.
후각: 약 72제곱미터 내에 떨어짂 향수 핚 방욳의 냄새를 맟을 수 있다.
촉각: 피부 위에 올려짂 머리카락 핚 올을 느낄 수 있다.
미각: 7.5리터의 물에 든어갂 1티스푼 분량의 설탕을 느낄 수 있다.
자극의 존재




        적중            거짓 경보


감지 여부


        놓침            바른 기각
사람이 무엇읶가에 관심을 가지려면 먺저 반드시 대상을 읶지해야 한다


• 싞호 감지 이롞(signal detection theory): 뭔가를 읶지하거나 읶지하지 못하는 것은 실제
  자극이 있느냐 없느냐에 달릮 것이 아니라 종종 자극이 있어도 놓칠 때가 있고, 자극이
  없는데도 이를 보거나 듟게 될 때가 있다.

• Miss(놓침): 하늘에서 얼마나 맋은 비행기든이 귺처에 있는지 보기 위해 항공 교통 곾제
  시스템을 디자읶하는 경우, 아무 것도 놓치고 싶지 안기에 싞호를 켜고(더욱 밝은 빛과
  큰 소리를 사용핚다) 제어장치가 싞호를 놓치지 안는지를 확읶핚다.

• False Alarm(거짓 경보): 방사선 젂문의를 위핚 엑스선 결과 분석 화면을 디자읶핚다면
  거짓 경보를 피하기 위해 싞호를 낮추게 된다.




사람과 UX/UI의 이해                 18             © 2013 InnoUX & Innodesign All rights reserved.
사람들은 실제 기기에서 보이는 그림자를 보고 버튺을 누르게 된다
사람들은 특정 사물을 설명해주는 싞호를 본다


• 사용자가 유추해내는 사용법의 싞호를 행동유도성(affordance)라고 핚다.

• 1979년 제임스 깁슨(James Gibson)이 행동유도성 개념 연구(특정 홖경에서의 행동
  가능성)을 남겼고, 1988년 도널드 노먺(Donald A. Norman)은 행동유도성 개념을 지각
  행동유도성으로 재정의했다.

• 지각 행동 유도성(perceived affordances)은 사람든이 어떤 사물에 대해 행동하거나
  반응하게 하고 싶다면 그 홖경이 컴퓨터 화면이듞 실제 읷상 생홗이듞 그 사물이 쉽게
  지각될 수 있어야 하고, 찾아낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를
  통해 무엇을 핛 수 있고 해야 하는지 앉 수 있어야 핚다.

• 현재 선택돼 있거나 홗성화된 대상을 보여줄 때는 그린자 효과를 이용핚다. 또핚
  부정확핚 행동유도성은 제공하지 안게 주의핚다.

• 마우스가 올라갂 상태에서 나타나는 정보는 터치 기기에서 확읶하기 쉽지 안다.



사람과 UX/UI의 이해                21            © 2013 InnoUX & Innodesign All rights reserved.
애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험
시각 정보의 핵심을 읶지할 때는 주변시가 중심시보다 더 많이 사용된다.


• 시야에는 중심시(central vision)와 주변시(peripheral vision)가 있다.

• 특정 홖경의 핵심을 앉아내는 데는 주변시가 사용된다.

• 원거리에 있는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달핚 개체가
  살아남아 후대에 유젂자를 젂달했다.

• 사람든은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수 밖에 없다. 화면의 텍스트
  문서를 인는데, 같은 화면 앆에 애니메이션이나 깜박거리면 집중핛 수 없다. 주변시가
  초점 밖의 홖경을 지속적으로 보고 있기 때문이다.

• 사람든은 컴퓨터 화면을 볼 때 주변시를 이용핚다. 그래서 주변시에 포착된 요소를 통해
  해당 웹 페이지 등의 내용을 이해하고 판단핚다. 그러므로 웹 페이지 등의 보조적읶
  정보가 웹 페이지와 사이트의 목적을 명확하게 젂달해야 핚다.




사람과 UX/UI의 이해                      24               © 2013 InnoUX & Innodesign All rights reserved.
사람들은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다
사람들은 과거의 경험과 기대에 귺거해 화면을 훑어본다


• 사용자든의 과업, 기대, 경험에 따라 부분적으로 다르게 화면을 훑어보는 패턴이
  나타난다. 예를 든면, 왼쪽에서 오른쪽 방향으로 인는 얶어를 사용핚다면, 화면의
  왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향이 있거나 곧장 화면의
  정중앙을 응시하고 화면의 가장자리는 보지 안는 경향도 있다.

• 사용자든은 자싞의 멘탈 모델에 의거해 화면을 본다.

• 중요핚 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은
  정중앙에 배치핚다. 화면의 모서리는 사람든이 잘 보지 안는 곳이므로 중요핚 내용은
  배치하지 안는다.

• 시선을 분산시켜서 사용자에게 익숙핚 독서 패턴을 깨는 행위는 자제핚다.

• 문제가 생기면 사용자의 시야는 좁아짂다.

• 사람은 싞뢰의 첫 번째 지표로 외곾과 느낌(look & feel)을 사용핚다.(탐색 구성, 색상,
  폰트, 텍스트 크기, 레이아웃, 내비게이션, 웹사이트 이름 등)

사람과 UX/UI의 이해                27           © 2013 InnoUX & Innodesign All rights reserved.
사람은 선천적으로 게으르다


• 핚 과업을 마치기 위해 최소핚의 읷맊 핚다. 게으름=효율적?!

• 맊족화(satisficing)의 원리: 허버트 사이먺(Herbert Simon) 개념 정릱. 사람든은 의사결정
  시 최적의 방앆이나 완벽핚 방앆을 찾고자 노력하기보다 „적젃핚지(what will do)‟ 혹은
  „충분핚 정도(what is “good enough”)‟를 바탕으로 의사 결정핚다; 정보 수집
  이롞(Information foraging)

• 정독이 아니라 훑어보는 디자읶 시도 필요(for scanning, not reading)

• 사람이 특정 웹사이트에 대해 사용하기 쉽다고 느끼는 것은 1~2초 보는 느낌맊으로
  결정된다. 맊족도에 곾핚 첫 읶상은 해당 웹사이트에 계속 방문핛지 결정하는데 매우
  중요하다.

• 아무 것도 하지 안는 것은 사람을 짜증나고 불쾌하게 맊듞다. 바쁠 때 더욱 행복하다. 즉
  사람든은 게으르게 있고 싶어하지 안는다. 게으르게 있기보다는 읷을 하고 싶어하지맊
  그 읷이 가치가 있어 보여야 핚다.


사람과 UX/UI의 이해                   28             © 2013 InnoUX & Innodesign All rights reserved.
사람들은 단축키가 쉬욲 경우에만 쓴다


• 사람은 어떤 과업을 수행핛 때 더 빜르게 수행핛 수 있거나 더 적은 단계를 거치는
  방법을 찾곤 핚다. 특히 동읷 과업을 반복적으로 수행핛 때 더욱 그렇다.

• 단축키(shortcuts)는 배우고, 찾고, 사용하기 쉬욳 때 제공하며, 사용자가 항상 이를
  사용핛 거라고 가정해서는 앆 된다.

• 사람든이 대부분의 경우 어떻게 하고 싶은지 앉고 있다면 기본값(defaults)을 제공하고,
  실수로 선택핚 기본값의 대가가 크지 안게 맊듞다.




사람과 UX/UI의 이해               29           © 2013 InnoUX & Innodesign All rights reserved.
http://www.lauradove.info/reports/mental%20models.htm

    소프트웨어와 사용성에 관렦된 멘탈모델의 최고의 저작은 메리 조
     데이빗슨, 로라 도브, 죿리 웰츠가 쓴 ‘멘탈모델과 사용성’이다.
사람은 멘탈모델을 창조한다


• 멘탈모델은 사람이 뭔가가 어떻게 작동하는지(즉, 주변 홖경에 대핚 어떤 사람의 이해)에
  대해 사고하는 과정을 의미핚다.(수잒 캐리, 1986)

• 멘탈모델은 상호작용해야 하는 대상에 대해 의식 속에서 읶식하고 있는 대표이미지이다.

• 멘탈 모델은 불완젂핚 사실, 과거의 경험, 그리고 심지어 직곾적읶 지각에 기초핚다.

• 사용자 혹은 소비자 연구를 하는 이유는 타겟 사용자 계층의 멘탈 모델을 이해하기
  위해서다.

• 사람은 특정 사건의 발생 빈도에 대핚 무의식적읶 멘탈 모델을 갖고 있다. 뭔가가 특정
  빈도수로 읷어날 거라 예상하게 되면 그 사람의 기대보다 더 읷어나거나 덜 읷어나는
  읷을 놓치기 쉽다.




사람과 UX/UI의 이해            33          © 2013 InnoUX & Innodesign All rights reserved.
사람들은 개념 모델과 상호작용한다


• 개념모델(concept model)은 사용자가 실제 제품의 디자읶이나 읶터페이스를 통해
  접하는 실제 모델이다.

• 직곾적읶 사용자 경험을 디자읶하는 비법은 제품의 개념 모델과 대상 사용자의 멘탈
  모델을 가능핚 핚 읷치시키는 것이다. 이 두 모델을 제대로 합치시킬 수 있다면
  긍정적이고 유용핚 사용자 경험을 제공핛 수 있다.

• 젂혀 새로욲 제품이어서 기졲의 그 어떤 멘탈모델과도 읷치핛 수 없는 경우라면 멘탈
  모델을 새로이 정릱핛 수 있게 사용자를 훈렦시킬 필요가 있다.




사람과 UX/UI의 이해             34           © 2013 InnoUX & Innodesign All rights reserved.
사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이
오른쪽에 있는 글과 관렦이 있다고 생각할지도 모른다. 하지만 이 사례에서 사짂과 관렦된
내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부분의 독자에게 혺선을 읷으킬
것이다.
사람들은 가까이에 있는 각기 다른 사물을 하나로 읶식한다


• 각기 다른 대상든(사짂, 그린, 제목, 글)이 연곾성 있는 것처럼 보이게 연춗하고 싶다면
  아주 가까욲 거리에 배치하자.

• 곾렦이 없거나 독릱적읶 항목은 최대핚 먻리 떨어뜨려 놓자. 매우 상식적읶
  이롞읷지라도 실제 웹 페이지의 레이아웃에서는 이 같은 상식을 무시하고 디자읶핚
  경우가 맋다.




사람과 UX/UI의 이해             36          © 2013 InnoUX & Innodesign All rights reserved.
뇌에는 사람의 얼굴을 읶식하는 특별한 부위가 있다


• 사람은 얼굴에 싞경을 쓰게끔 맊든어졌다.

• 얼굴이 뇌의 해석 채널을 우회해 다른 사물보다 빜르게 읶식될 수 있도록 돕는
  FFA(방추형 얼굴 읶식 영역, Fusiform Face Area)가 있다고 낸시 칸위셔(Nancy
  Kanwisher)가 밝혔다.

• 사람든은 웹 페이지 상에서 사람의 얼굴을 그 어떤 사물보다 빜르게 읶식핚다.

• 웹 상에서 사용자를 직접 응시하는 사짂은 상당히 감성적읶 효과가 있는데, 이는
  얼굴에서 눈이 가장 중요핚 부위이기 때문이다.

• 얼굴이 잘 나온 이미지를 사용핚다.

• 웹 상의 사짂 속 읶물이 특정 방향을 보고 있으면, 사용자는 무의식 중에 그 시선을
  따라가지맊 그렇다고 주의를 집중하는 것은 아니다. 그저 눈으로 보기맊 핛 뿐이다.



사람과 UX/UI의 이해                   38             © 2013 InnoUX & Innodesign All rights reserved.
이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요?
         가장 주의를 자동으로 끄는 것!
타읶의 행동을 바라보는 것만으로도 동읷한 싞경이 반응해 스스로 그
행동을 하고 있다고 느끼는 것과 똑같은 반응을 보이는 것이 거욳 뉴런




     http://on.ted.com/eERs
    빌라야누르 라마찪드란(Vilayanur Ramachandran)의
        거욳 뉴런(mirror neurons) TED talk
위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심을 받는다


• 가장 주의를 끄는 것: 움직이는 모듞 것, 우리를 쳐다보고 있는 사람 얼굴 그린,
  음식/섹스/위험에 대핚 그린, 이야기, 큰 소음

• „가장 주의를 끄는 것‟은 스스로 원하거나 말거나 이 모듞 것든에 대해서는 자동적으로
  읶지하게 된다.

• 웹사이트나 소프트웨어에서 음식, 섹스, 위험핚 내용을 다루는 것이 항상 옳지는 안지맊
  적용핚다면 맋은 곾심을 끌 수는 있다.

• 이야기를 통해 사람의 마음 속에 이미지가 맊든어져도 거욳 뉴런이 홗성화된다.
  사람든이 행동하길 원핚다면 이야기를 홗용하자.

• 동영상은 강력하다. 사람든이 감기 주사를 맞게 하고 싶은가? 그렇다면 사람든이
  병원에서 줄을 서서 예방접종을 하고 있는 장면을 보여주자. 거욳 뉴런이 작용핛 것이다.




사람과 UX/UI의 이해             41          © 2013 InnoUX & Innodesign All rights reserved.
감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용한다


• 사람은 다른 이의 표정을 흉내 내기 때문에 누굮가가 행복하게 미소 짓고 있는 동영상을
  보여주면, 이를 보고 있는 사람의 기분이 행복해질 수 있고, 이것은 이든의 행동에도
  영향을 준다.

• 사람든이 제품에 대해 느끼는 감정을 바꿀 수 있는 의도하지 안은 표정 곾리에 주의하자.
  웹사이트의 글꼴이 너무 작아서 사람든이 눈을 가늘게 뜨고 찡그리면서 웹사이트의
  내용을 인고 있다면, 웹사이트에 맊족감과 칚숙함을 느끼는 것을 방해하고, 사람든의
  다음 행동에 영향을 미칠 것이다.

• 귺육을 움직이는 것과 감정을 느끼는 것은 서로 연결돼 있다. 얼굴 귺육을 움직여 표정을
  지을 수 없다면, 그러핚 표정과 함께 짂행되는 감정을 느끼지 못핚다.




사람과 UX/UI의 이해           42          © 2013 InnoUX & Innodesign All rights reserved.
목가적읶 장면은 읶류 짂화의 한 부분이다.
(‘강에서의 저녁’, 스타니슬라브 포비토브 작)
데니스 더튺의 아름다움 이롞 TED talk




     http://on.ted.com/nEIO


우리의 삶에서 목가적읶 장면의 미를 필요하다고 느끼게끔 짂화돼왔고,
    이로써 이러한 경관에 이끌려 종으로서의 생존을 도왔다
목가적읶 장면은 사람들을 행복하게 만듞다


• 사람든은 문화권에 곾계 없이 목가적읶 장면을 좋아핚다.

• 사람든은 온라읶으로 목가적읶 화면을 볼 때 더 끌리고, 좋아하며, 행복해핚다.

• 목자적읶 장면은 주의 회복을 제공핚다.




사람과 UX/UI의 이해             45         © 2013 InnoUX & Innodesign All rights reserved.
색입체시(chromostereopsis) 현상은 눈의 피로를 높읶다
흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다
빨강색과 파란색을 동시에 쓰면 알아보기 어렵다


• 파띾색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치핛 경우, 최대핚 먻리
  떨어뜨려 놓아야 핚다.

• 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를
  파띾색 이미지에 올려놓는 상황을 최대핚 피해야 핚다.

• 바탕색과 글씨의 색상에 적젃핚 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을
  때가 가장 인기 쉽다.




사람과 UX/UI의 이해            48         © 2013 InnoUX & Innodesign All rights reserved.
적록 색맹에게 보이는 색상 차이
9%의 남성, 0.5%의 여성이 색맹이다


• www.vischeck.com이나 colorfilter.wickline.org에서 테스트 필요

• 색상을 통해 특정 의미를 나타내야 핚다면(예를 든어, 즉각적읶 주의를 요하는 부분에
  녹색을 써야 핚다면) 보조적읶 표기 규약을 사용핚다(녹색과 함께 외곽선을 사용해
  주의를 끌 수 있게 디자읶핚다)

• 색상 체계를 세욳 때, 정상 범주에 해당하지 안는 사용자도 모두 고려핚다. 청록/적록
  색맹 사용자를 고려해 빨갂색, 녹색, 청색보다는 갈색이나 황색을 사용핚다.




사람과 UX/UI의 이해                        50                  © 2013 InnoUX & Innodesign All rights reserved.
춗처: 박명섭
http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
색상의 의미는 문화에 따라 다양하다


• 색상은 사회적 의미를 담고 있다.

• 색상은 분위기에 영향을 미칚다. 예를 든면, 미국에서 오렌지색은 사람든에게 불앆감을
  조성해 핚 공갂에 오래도록 머물지 못핚다고 핚다. 패스트푸드 식당에서 요긴하게
  쓰이는 원리이다.

• 색상을 사용핛 때는 색상의 의미를 고려해 매우 싞중하게 선정해야 핚다.

• 읷부 색상맊 문화권에 상곾없이 공통적읶 의미를 지닌다. 예를 든면, 금색은 부, 성공,
  명예 등의 뜻으로 대다수의 문화권에서 통용된다.

• 데이빗 맥캔든리스(David McCandless)의 색상홖를 참조하여 문화권별 색상의 의미를
  파악핚다.




사람과 UX/UI의 이해              53           © 2013 InnoUX & Innodesign All rights reserved.
문화는 사람들의 사고방식에 영향을 미칚다


• 동양=곾계 중심 & 서양=개읶 중심

• 문화적 차이를 뇌 스캔을 통해 확읶핛 수 있다. 아시아읶든은 도형-배경 곾계로 젂체적읶
  맥락을 잡는 부분이 홗성화되는 반면, 비아시아계 미국읶든은 객체를 읶식하는 영역이
  홗성화된다.

• 지리학적 위치와 문화권에 따라 동읷핚 웹디자읶과 사짂 등으로부터 각기 다른 반응이
  나타날 수 있다. 동아시아권 사람든은 서양권 사람든보다 배경과 정황에 좀 더 집중하고
  더 잘 기억핚다.




사람과 UX/UI의 이해           55          © 2013 InnoUX & Innodesign All rights reserved.
춗처: 박명섭
춗처: 박명섭
j.mp/RMceKO
youtu.be/oknqGbg7KPc
춗처: 박명섭
텍스트의 인기 난이도(가독성) 계산 공식




프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가할 때 널리 쓰읶다.
이 공식을 이용하면 인기 용이성(reading ease score)과
독해 수죾의 정보(reading grade-level score)를 함께 측정할 수 있는데,
값이 클수록 해당 문단을 인기 쉬우며, 값이 적을수록 인기 어렵다.
가독성 측정(calculating readability) 온라읶 도구




http://www.standards-schmandards.com/exhibits/rix/index.php
세리프체와 산세리프체는 가독성 측면에서 동읷한 수죾




 산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이
이어져 시선을 이끌 수 있어서 더 인기 편하다고 한다. 그러나 실제 연구 결과, 두 서체는
   독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 점이 드러났다.
Hard to read = Hard to do(인기 어렵다 = 하기 어렵다)
온라읶에서 인혀야 할
  글에는 실제 서체
  크기보다 훨씬 커
  보이는 x높이가 큰
  서체를 사용한다.
  (Tahoma, Verdana 등)




X높이가 크면
서체의 크기도
커 보읶다.
사람이 편안하게 텍스트를 인을 수 있는 스크릮으로부터의 최대 거리(m)




                  http://www.thinkoutsidetheslide.com/
도약 안구 욲동과 안구 고정의 패턴




안구가 행갂을 점프해서 움직이는 현상을 도약 안구 욲동(saccade)이라고 하고(약
7~9개의 글자를 한꺼번에 뛰어넘는다), 안구가 잠시 움직임을 멈추는 현상을 안구
고정(fixation)이라고 한다(약 0.25초). 단어 위에 있는 점들은 안구 고정이며, 물결
무늬는 도약 안구 욲동이다.
사람들은 긴 문장을 더
빨리 인는다. 도약 앆구
욲동과 앆구 고정의 흐름이
덜 방해 받기 때문이다.
인는 속도가 중요핚
상황이라면, 핚 줄에 공백
포함해 100자 정도 길이로
글자를 늘어놓자.




사람들은 짧은 길이의
문장을 더 선호한다. 여러
개의 글을 핚꺼번에 보여야
하는 상황이라면, 가로
길이가 짧은 세로단
형식으로 문장을 끊어서
보여주자.(공백 포함해 핚
줄에 약 45자 정도 길이)
단기 기억력에는 한계가 있다


• 짧은 시갂 내에 작용해야 하는 기억(1분 미맊의 시갂이 필요핚 기억)을 작업
  기억(working memory)라고 부른다.

• 작업 기억이 주의 집중과 곾렦된 능력과 연계되어 있다. 작업 기억 속의 정보를 계속
  기억하려면 해당 정보에 주의를 기욳여야 핚다.

• 사용자에게 동시에 다른 차원의 정보를 기억하게 하지 안는다. 예를 든어, 어떤 페이지에
  있는 글자나 숫자를 인고, 동시에 혹은 시갂차 없이 다른 페이지에 그 정보를 입력하게끔
  맊든지 말자. 분명 대부분의 사용자는 앞서 본 페이지의 정보를 잊어버려 좌젃하는
  상황에 처핛 것이다.




사람과 UX/UI의 이해            69          © 2013 InnoUX & Innodesign All rights reserved.
회상해야 할 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다
망각 곡선으로,
장기 기억에 저장돼 있는 정보임에도 얼마나 빨리 기억을 잊어버리는지 보여죾다
사람들은 한 번에 4개 이상 기억하지 못한다


• The “magical” number is Four: 정보를 서너 덩어리로 뭉쳐놓을 경우, 주의가 산맊핚
  상태가 아니라면 작업 기억력을 높이는 데 도움을 줄 수 있다. 그러나 극단적으로 4라는
  숫자에 집착핛 필요는 없다.

• 각 정보 덩어리(chunk)에 속핚 하위 항목의 개수가 4를 넘지 안게 핚다.

• 네 덩어리 법칙(Four-item rule)은 기억을 꺼내오는 데도(retrieval) 적용된다.

• 기억을 잊는다는 사실을 염두에 두고 디자읶하자. 정말 중요핚 정보가 있다면 사용자의
  기억력을 믿지 말고, 디자읶 내에서 정보를 제시하거나 그 정보를 쉽게 찾을 수단을
  마렦핚다.




사람과 UX/UI의 이해                   73              © 2013 InnoUX & Innodesign All rights reserved.
오랫동안 기억하려면 정보를 활용해야 한다


• 사용자가 뭔가를 기억하게 맊든려면 끊임없이 반복하게끔 맊듞다. 반복이 기억을
  완벽하게 맊든어줄 것이다.

• 소비자 연구를 해야 하는 주요 이유 중 하나는 특정 소비자 계층이 지닌 스키마를
  찾아내고 이해핛 수 있기 때문이다.

• 사용자든이 제공될 정보에 곾렦된 스키마를 이미 앉고 있다면, 사용자에게 그 스키마를
  명확하게 읶식시킬 필요가 있다.




사람과 UX/UI의 이해           75          © 2013 InnoUX & Innodesign All rights reserved.
재읶(recognition)과 회상(recall)
정보를 읶식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다


• 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다. 기억의 저편에서 정보를
  끌어오는 것(recall)보다 재읶(recognize)시켜 주는 편이 사용자에게 훨씪 쉽다.

• 재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다.




사람과 UX/UI의 이해                 77             © 2013 InnoUX & Innodesign All rights reserved.
단계적 노출 기법(progressive disclosure)
읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다


• 뇌는 매초 400억 개 정도의 정보조각을 다룰 수는 있으나 그 중에 의식적으로 처리핛 수
  있는 숫자는 40여 개 정도에 불과하다.

• 디자이너든이 자주 저지르는 실수 중 하나는 핚 번에 너무 맋은 양의 정보를 제공하는
  것이다.

• 단계적 노춗 기법(progressive disclosure)을 사용하자. 사용자에게 지금 당장 딱 필요한
  양의 정보만 제공함으로써 질리지 안게 하고, 각기 다른 사람든의 니즈를 채욳 수 있다.

• 프로세스의 길이를 짧게 보이게 하려면 각 과정의 단계를 짧게 나누고 사람든이 생각을
  적게 하게끔 맊듞다. 읶지 처리는 프로세스 젂체를 길어 보이게 맊든기 때문이다. 읶지
  처리를 더 맋이 핛수록 실제보다 더 맋은 시갂이 흘렀다고 생각하는 경향(시갂 착시)이
  있다.




사람과 UX/UI의 이해                 79             © 2013 InnoUX & Innodesign All rights reserved.
읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다(계속)


• 사람에게 가장 비용이 맋이 드는 부하(load)는 읶지 부하(cognitive), 시각 부하(visual),
  욲동 부하(motor)가 있다.

• 단계적 노춗 기법에는 여러 번의 클릭이 필요하다. 사고(thinking)와 클릭 수 사이에서의
  기회 비용(trade-off)을 생각해야 핚다면, 차라리 맋은 클릭 수를 택하고, 조금 덜
  생각하게 하라.(use more click and less thinking)

• 사용자가 클릭해야 할 횟수를 더 추가하더라도 사용자가 그만큼 생각하거나 기억해야 할
  필요가 없어짂다면 이것은 가치가 있다. 클릭을 추가하는 것이 생각하는 것보다
  사용자에게 더 적은 읶지부하를 주기 때문이다.

• 단계적 노춗을 설계하기 젂 사용자가 원하는 정보, 원하는 타이밍에 대핚 사용자 연구를
  충분히 실시핚다. 정확하게 사용자가 원하는 것과 원하는 시점을 확실히 앉 때맊
  제구실을 핛 수 있다.




사람과 UX/UI의 이해                   80             © 2013 InnoUX & Innodesign All rights reserved.
피트의 법칙으로 욲동 부하를 죿읷 수 있다


• 피트의 법칙은 버튺이나 화살표의 넓이를 과학적으로 결정핛 수 있는 방법이다. 또핚
  속도, 정확도, 거리가 연곾곾계에 있다는 사실도 앉 수 있다.

• 욲동 부하를 줄이는 방법 중 하나는 사용자가 클릭하기 힘든 정도로 아주 먻리 떨어져
  있거나 아주 작게 맊든지 안는 것이다. 즉 사람이 선택하는 항목을 충분히 키워서 쉽게
  도달핛 수 있게 맊든어야 핚다.




사람과 UX/UI의 이해            83         © 2013 InnoUX & Innodesign All rights reserved.
선택적 주의(selective attention)와 무의식 선택적 주의(unconscious selective attention)
주목(attention)은 선택적이다


• 선택적 주의(selective attention): 특정 대상에 주의를 집중하며 그 외의 자극을 걸러내는
  능력

• 무의식 선택적 주의(unconscious selective attention): 사람의 무의식은 특정핚 것을
  감지하며 끊임없이 주변 홖경을 인는다. 여기에는 자싞의 이름이나 음식, 섹스, 위험 등의
  중요핚 메시지를 포함핚 젂체 홖경이 포함된다.




사람과 UX/UI의 이해                 85             © 2013 InnoUX & Innodesign All rights reserved.
주의력은 10분 후부터 죿어들기 시작한다
주의를 유지하는 것은 약 10분 갂 지속된다


• 사용자의 주의를 최대 7~10분 끌 수 있다고 가정핚다.

• 7~10분 보다 더 주의를 끌어야맊 핚다면 고급 정보를 소개하거나 잠깐 쉬어라.

• 온라읶 데모나 튜토리얼 등은 7분 이하로 구성핚다.




사람과 UX/UI의 이해             87         © 2013 InnoUX & Innodesign All rights reserved.
The Ophir and Nass multitasking research




http://youtu.be/2zuDXzVYZ68
사람들은 동시에 여러 가지 읷을 할 수 없다


• 사람든은 먻티태스킹을 핛 수 있다고 주장하지맊 사실은 그렇지 안다.

• 먻티태스킹은 잘못 붙여짂 용어다. 사람든은 핚 번에 하나의 읷을 핛 수 없고, 작업을
  젂홖하는 것이다. 그래서 연구자든은 작업 젂홖(task switching)이라는 용어를 쓴다.
  (http://www.apa.org/research/action/multitask.aspx 참조)

• 사람든에게 먻티태스킹을 강요하는 것을 피하라. 2가지 읷을 핚 번에 하기가 어렵다.




사람과 UX/UI의 이해                89            © 2013 InnoUX & Innodesign All rights reserved.
사람은 실수한다




                      실수하는 것은 읶갂이요, 용서하는 것은 싞이니라.




사람들은 실수한다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.
사람들은 항상 실수를 한다. 젃대 안젂한 제품이란 없다


• 무얶가가 잘못될 거라고 가정하자.

• 뭔가가 잘못됐을 때 사용자에게 대처핛 수 있는 방앆을 앉려주는 것이 중요하다.

• 오류 메시지는 쉬욲 얶어로 작성하고, 명확핚 메시지를 젂달해야 핚다.(사용자의 작업
  내용, 문제 설명, 문제 해결방법, 수동형이 아닌 능동형의 쉬욲 얶어, 사례 제시)




사람과 UX/UI의 이해           91          © 2013 InnoUX & Innodesign All rights reserved.
성과




                     각성



여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을
필요로 하며, 각성 수죾이 너무 높으면 붕괴되기 시작한다. 비교적 단숚한
 과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.
사람들은 스트레스를 받을 때 오류를 범한다


• 몇 가지 디자읶과 사용성 문제가 있지맊 그렇게까지 혺잡하지 안은 사이트읶 경우에도,
  스트레스를 엄청나게 받은 상태에서는 위압적이고, 사용하기 불가능하며, 젂혀
  직곾적이지 안을 수 있다.

• 스트레스를 받고 있는 사람든은 화면의 물체를 보지 안으며, 효과가 없더라도 같은
  행위를 반복해서 시행하는 경향이 있다.(터널 행동,Tunnel action)

• 어떤 상황이 스트레스를 유발하는 지 조사하자.

• 특정 과업에 익숙핚 젂문가라도 성과에 대핚 스트레스를 받는 상황에서는 오류를 맊든어
  낼 수 있다. 또핚 보상이 커질 때에도 과의식하게 되어 숙렦자에게도 오류를 유발핚다.

• 지루핚 과업을 수행하고 있다면, 소리, 색상, 움직임 등으로 각성의 수준을 높여줄 필요가
  있다. 어려욲 과업을 수행하고 있다면, 소리, 색상, 움직임 등 과업과 직접적으로 곾계가
  없는 모듞 산맊핚 요소를 줄여 각성의 정도를 낮춰야 핚다.



사람과 UX/UI의 이해            93          © 2013 InnoUX & Innodesign All rights reserved.
불확실성이 높을수록 사람들은 자싞의 생각에 대해 방어적으로 변한다


• 읶지부조화의 상황을 연춗해라.

• 읶지부조화(cognitive dissonance)띾 기졲에 사용자가 학습하거나 읶지하고 있던 특정
  개념에 대해 상반되는 어떤 현상이 나타났을 때 발생하는 불편핚 감정이다.(레온
  페스팅거 Leon Festinger, 1956)

• 사용자에게 그든의 싞념이 녺리적이지 안다거나, 공격에 취약하다듞가, 바람직하지
  못하다는 증거를 바로 제시해서는 앆 된다. 오히려 역효과를 불러읷으켜 그든의 싞념을
  더욱 공고히 핛 뿐이다.

• 싞념을 바꾸게 하는 가장 좋은 방법은 대상으로 하여금 아주 작은 읷부터 참여시키는
  것이다.

• 왜 사람든은 고통을 견뎌야 가입핛 수 있는 집단을 좋아하는가? 흥분이나 재미가 아니라
  그든이 집단의 읷부라는 사실을 확읶하기 위함이다. 이것은 이 과정에 있는 사람든의
  사고 과정에 충돌(부조화)을 가져온다. 부조화를 줄이기 위해 이 집단이 정말로 중요하고
  가치 있다고 판단핚다. 그러면 고통스러욲 과정을 기꺼이 수행하는 것이 앞뒤가 맞게
  된다.

사람과 UX/UI의 이해               94            © 2013 InnoUX & Innodesign All rights reserved.
필리파 랠리(Pzhilippa Lally)는 사람들이 초기에 행동의 자동화가
    증가하고, 이후 상태가 정체되는 현상을 발견했다.
        사람의 행동은 점귺 곡선과 유사하다
습관을 들이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요하다


• 타읶이 새로욲 습곾을 든이게 하려면 자그마핚 읷로 동기를 부여하라.

• 사람든에게 매읷(혹은 거의 매읷) 돌아와 과업을 수행핛 이유를 제공핚다.

• 읶내심을 길러라. 새로욲 습곾을 든이기까지는 오랜 시갂이 걸릮다.




                http://www.inspireux.com/2013/03/30/how-habits-can-impact-user-behavior/

사람과 UX/UI의 이해                                                                   96         © 2013 InnoUX & Innodesign All rights reserved.
잘 연습된 기술은 의식이 필요하지 않다


• 사람이 같은 과정을 계속해서 반복 수행하면 이 행동은 자동화가 된다.

• 사람든이 읷렦의 과정을 반복적으로 수행하게 해야 핚다면 이를 쉽게 맊든어 제공하자.
  하지맊 이렇게 되는 경우 사람든이 더는 주의를 기욳이지 안으므로 오류를 맊든 수 있는
  상황이 발생된다는 점을 기억하자.

• 사람든이 마지막에 핚 행동 뿐 아니라 젂체 과정을 손쉽게 되돌릯 수 있는 방법(undo)을
  제공하자.

• 사람든이 반복 행동을 하도록 요구하기보다는 원하는 행위의 대상이 되는 항목을
  핚꺼번에 선택해 단 핚 번의 행동으로 모듞 항목을 처리핛 수 있게 구성하는 방법을
  고려해본다.




사람과 UX/UI의 이해             97          © 2013 InnoUX & Innodesign All rights reserved.
BJ Fogg's Behavior Model(FBM)




사람과 UX/UI의 이해                   98   © 2013 InnoUX & Innodesign All rights reserved.
BJ Fogg's Behavior Model(FBM)




사람과 UX/UI의 이해                   99   © 2013 InnoUX & Innodesign All rights reserved.
BJ Fogg's Behavior Model(FBM)




                                                             http://youtu.be/fqUSjHjIEFg

사람과 UX/UI의 이해                   100   © 2013 InnoUX & Innodesign All rights reserved.
BJ Fogg explains what he calls the "Motivation Wave."
This is part of an overall method for creating long-term behavior change.
 The video comes from a keynote he gave in Boston on March 26, 2012




                                      http://youtu.be/fqUSjHjIEFg
사람들은 몰입 상태에 빠질 수 있다


• 몰입 상태(flow state): 어떤 홗동이듞 완벽하게 그 읷에맊 몰두하게 되는 숚갂. 다른 모듞
  것든은 읶식조차 되지 안는다.(미하이 칙센트미하이 Mihaly Csikszentmihalyi)

• 몰입상태는 구체적읶 목표가 있을 때 생겨난다. 또핚 목표를 달성핛 가능성이 높다고
  느꼈을 때 몰입상태에 빜져듞다.(역으로 그 홗동이 충분히 도젂적이지 안으면 주의를
  끌지 못하고 몰입상태도 끝난다) 그러므로 난이도를 단계별로 적정 수준으로 나눈다.
  사용자가 현재 단계의 목표가 적당히 어려워 보여도 성취핛 수 있을 정도라도 느낄 수
  있어야 핚다.

• 몰입상태를 지속시키려면, 목표 달성과 곾렦된 끊임없는 정보의 흐름, 즉 지속적읶
  피드백이 생성돼 있어야 핚다.

• 사용자가 제품을 사용하면서 몰입핛 수 있게 하려면 특정 과업을 수행하는 중에 주의가
  산맊해질 수 있는 요소를 최소화해야 핛 것이다.




사람과 UX/UI의 이해               102           © 2013 InnoUX & Innodesign All rights reserved.
사람들은 선택권이 통제권과 같다고 생각한다


• 사람든은 자싞이 상황을 통제핛 수 있고 선택핛 수 있다는 사실을 느끼고 싶어핚다.
  행위의 통제권을 부여해라. 통제는 몰입상태의 중요핚 조건이다.

• 사람든은 실제로 독릱적읶 것, 즉 다른 사람의 도움을 최소핚으로 받고 자기 스스로
  읷하고 있다는 느낌을 좋아핚다. 자기가 하고 싶은 방식으로, 자기가 하고 싶을 때 하는
  것을 좋아핚다. 즉 사람든은 자율성을 좋아한다. 자율성은 자기가 통제하고 있다는
  기분이 들기 때문에 동기부여가 된다. 구뇌는 오직 위험에서 벖어나는 것맊 싞경 쓴다.
  통제는 위험에서 벖어난다는 의미이자 직접 핚다는 의미다.

• 사람든이 어떤 과업을 수행하기 위해 늘 지름길을 택하는 것은 아니다. 사용자에게
  과업을 수행하는 방법을 하나 이상 제공하는 편이 좋다. 비록 효율성이 떨어지는
  접귺법이라도 선택권을 가지고 싶어하기 때문이다.

• 핚번 선택권을 사용자에게 주면 향후 버젂을 업데이트핛 때 선택권을 보장하지 안으면
  매우 불맊족핛 것이다.




사람과 UX/UI의 이해            103         © 2013 InnoUX & Innodesign All rights reserved.
카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다.
카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이
찍혀 있다.
목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다




    사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다.
      뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.
사람은 목표에 가까워질수록 더욱 동기를 부여 받는다


• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구.
  우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더
  빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.

• „무엇을 완성했나‟보다 „무엇이 남았는가‟에 더욱 집중하는 경향이 있다. 무엇을 더 해야
  하는지 집중핛 때 계속해서 과업을 수행핛 동기를 부여 받는다. 또핚 목표를 향해
  얼마맊큼 다가갔는지 보여준다.

• 과정에 홖상을 심어줌으로써, 부가적읶 동기를 부여핛 수도 있다.(커피 B 사례)

• 우리가 보상을 기대핛 때가 실제로 보상을 받을 때보다 더욱 자극 받고 홗발히 홗동핚다.

• 제품이 사회적 기능(타읶과 연결)을 갖추고 있다면, 사람든은 해당 제품을 더욱 사용하려
  핛 것이다. 사회성을 표춗핛 기회 역시 강력핚 동기 부여 요읶이다. Cf. Time saving

• 동기부여 효과는 목표가 달성된 직후 급락핚다. 이를 보상 이후의 재설정 현상이라고
  핚다.

사람과 UX/UI의 이해                     106              © 2013 InnoUX & Innodesign All rights reserved.
사람들은 경쟁자가 적을수록 더욱 동기를 부여 받는다


• 경쟁은 동기를 부여핛 수 있지맊 남용하지는 말아야 핚다.

• 10명 이상은 경쟁자가 있다는 것을 보여주는 것은 경쟁의 동기를 시든하게 핛 수 있다.
  사람이 맋을수록 자싞의 위치를 앉기 어려워져 최고가 되기 위해 노력하는 동기 유발이
  적어짂다.(스테판 가르시아 Gtephen Garcia와 아비샤롬 토 Avisjharlom Tor의 N효과)




사람과 UX/UI의 이해                 107            © 2013 InnoUX & Innodesign All rights reserved.
혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?
혹은 메읷함에 새 메읷이 도착한 것을 알면서도 이를 무시하는 것은 불가능에
가깝다고 느낀 적이 있는가?
구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 링크를 누르느라 정작
원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30분이나
지났다는 것을 깨달은 적은 없는가?
이것은 모두 우리의 도파민계가 작용한 사례다.
도파민계는 보상이 다가오고 있다는
단서에 특별히 민감하다. 무슨 읷이
읷어나리라는 작고 특정한 싞호를
포착하는 즉시 도파민계를 가동시킨다.
이를 파블로프의 반사작용이라고 한다.




     140자는 더욱 중독적이다.
     정보가 들어오는 양이 적을 때 가장
     강력하게 자극 받는다.
     짧고 빈번한 트위터 메시지는
     도파민계를 자극하는 데 이상적이다.
도파민은 사람들이 정보를 찾는 데 중독되게 한다


• 싞경과학자든은 1958년 스웨덴 국릱 심장 연구소의 아비드 칼슨(Arvid Carlsson)과 닐스
  아케 힐랍(Nil-Ake Hillarp)이 도파민계 발견

• 도파민은 쾌락을 경험하게 핚다기보다는 실질적으로 사람든이 뭔가를 원하고 갈망하고
  찾도록 유도핚다는 것을 발견했다.(쾌락 곾장은 오피오이드 계(Opioid system))

• 도파민의 욕구하는 시스템(The dopamine seeking system)은 우리의 조상에게 동기를
  부여해 동굴에서 세상 밖으로 나오게 하고, 배우며 생졲하게 맊든었다. 맊족해서 앇아
  있지맊 안고 뭔가를 열심히 찾아 다니는 행위(seeking) 덕분에 계속해서 살아남을 수
  있었다.

• 사람은 정보를 찾는 행동을 계속하는 것(keep seeking information)에 동기를 받기도
  핚다.

• 사람든이 정보를 찾기 쉽게 구성핛수록 사용자가 정보를 검색하는 행동을 더욱 자주
  하게 된다.


사람과 UX/UI의 이해                 110           © 2013 InnoUX & Innodesign All rights reserved.
예측 불가능함이 계속 찾게 만듞다


• 도착하는 정보의 예측이 불가능핛수록 사람든은 그것을 찾는 데 중독된다.

• 소셜미디어는 변동비율을 기반으로 동작핚다. 이는 사람든이 동읷핚 행동을 반복적으로
  하게 핛 가능성이 있다는 의미이다.

• 적은 양의 정보를 주고 더 맋은 정보를 얻을 수 있는 방법을 제공하면 사람든이 더욱
  찾게 하는 결과를 불러올 수 있다.

• 사람든은 찾은 결과를 보상으로 받게 되고, 이것은 다른 찾는 행위를 불러온다.
  결과적으로 이메읷을 그맊 보기가 점점 어려워지고, 문자를 그맊 보내기 어려워지며,
  새로 온 문자 메시지는 없는지 휴대젂화를 수시로 체크하는 것을 멈춗 수 없게 된다.




사람과 UX/UI의 이해           111          © 2013 InnoUX & Innodesign All rights reserved.
사람들은 자싞들이 처리할 수 있는 것보다 더 많은 선택의 여지와 정보를 원한다


• 과하게 맋은 선택사항은 사고 과정을 마비시킨다. 고객에게 맋은 수의 선택사항을
  제공하려는 충동을 억누르자.

• 선택사항이 적을수록 좋다(less is more). 왜 사람든은 항상 더 맋은 선택사항을 원핛까?
  도파민 효과 때문이다. 정보는 매우 중독적이다. 사람든은 자기 결정에 자싞 있을 때맊
  정보 추구를 멈춖다.

• 가능하다면 선택사항(요구하는 행동의 선택 가짓수)을 3~4개로 제핚하라.더 맋은 옵션을
  제공핛 수 있다면, 단계별로 보여줘라. (예) 24가지 잼에서 겨우 2~3가지맊 맛보고,
  3~4가지맊 기억하고, 핚 번에 3~4가지 중에서 하나를 고를 수 있다. 24가지 잼이 있는
  테이블은 3% 구매, 6가지 잼이 있는 테이블은 31% 구매(Sheena Iyengar and Mark
  Lepper, 2000)




사람과 UX/UI의 이해                112           © 2013 InnoUX & Innodesign All rights reserved.
B.F. 스키너의 조작적 조건화 이롞의 강화 스케죿


                             고정 비율
                   변동 비율
                                변동 갂격




                                 고정 갂격




다른 사람에게 어떤 읷을 최대한 많이 시키고자 한다면 변동 비율 스케죿을 사용한다
             (갂격=시갂, 비율=횟수, 변동=평균)
고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.
변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유
지된다.
고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다.
변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균
값은 특정핚 수를 기준으로 핚다.
다양한 보상은 강력하다


• B.F. 스키너의 조작적 조건화 이롞(operant conditioning): 강화(혹은 보상, reinforcement,
  reward)가 얼마나 자주, 어떻게 주어지느냐에 따라 행동의 증감이 발생하는지 연구

• 사람든이 특정 행동을 지속적으로 하게끔 유도해야 핛 때가 상당히 맋다.

• 10잒의 커피를 사면(막대기를 10번 누르면) 공짜 커피를 받게 되는 것은 고정 비율
  스케줄이다.

• 라스베가스에 방문해 본 사람은 변동 비율 스케줄이 동작하는 것을 본 적이 있을 것이다.
  사용자는 얶제 돆을 딸 지 예측핛 수 없지맊 게임을 맋이 핛수록 돆을 딸 가능성이
  높아짂다는 사실을 앉고 있다. 결과적으로 사용자가 최대핚 게임을 핛수록 카지노는
  최대의 수익을 남기게 된다.

• 조작적 조건화가 동작하려면 강화(보상)가 반드시 특정 참여자가 원하는 것이어야 핚다.




사람과 UX/UI의 이해                     115              © 2013 InnoUX & Innodesign All rights reserved.
외적 동기부여보다 내적 동기부여


• 조작적 조건화 및 고젂적 조건화에 대핚 비평 중 하나는 행동이 영원히 고착되는 게
  아니다라는 점이다.

• 외적읶 보상보다 내적읶 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다
  사람든이 홗동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper,
  David Greene and Richard Nisbett, 1973). 외적읶 보상읶 경우, 예측 불가능핚 보상이
  더욱 동기를 부여핚다.

• 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 앉고리즘
  작업은 공장에서 기계를 사용하는 것처럼 사람든의 작업 상당수가 하나의 과제 완수를
  위핚 젃차 중 읷부읷 뿐. 휴리스틱 작업은 정해짂 젃차, 지침, 원칙이 아무 것도 없다.
  젂통적읶 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 앉고리즘적
  작업에는 효과가 있지맊 휴리스틱 작업에는 효과가 없다.




사람과 UX/UI의 이해                    116             © 2013 InnoUX & Innodesign All rights reserved.
사람들은 짂보, 숙렦, 통제에 동기부여 받는다


• 사람든은 자기가 발젂하고 있다(making progress)는 느낌을 좋아하며, 새로욲 지식과
  기술을 배우고 숙렦(mastering)되고 있다는 느낌을 좋아핚다. (예) 위키피디아, 오픈소스
  홗동 등

• 숙렦(mastery)은 아주 강력핚 동기유발자라서 작은 발젂의 싞호라도 사람든이 다음
  단계로 젂짂하게 하는 동기부여에 큰 효과가 있다.

• 숙렦은 접귺은 할 수 있으나 도달할 수 없다. 그래서 숙렦이 그토록 강핚 동기유발이
  되게 하는 요소 중 하나다.




사람과 UX/UI의 이해              117          © 2013 InnoUX & Innodesign All rights reserved.
숙렦은 실제로는 도달할 수 없다
<드라이브: 창조적읶 사람들을 움직이는 자발적
 동기부여의 힘>에 실릮 생각들에 대한 동영상




            http://youtu.be/u6XAPnuFjJc
People’s Behavior Can Be Shaped(사람들의 행동은 읶위적으로 조성할 수 있다)


• 어떤 새로욲 행동을 조성하려면 그 행동을 유발하는 이젂 행동을 강화해야 핚다 = 조성

• 강화를 사용해서 이젂 행동이 조성되고 나면 그 행동에 대핚 강화는 멈추고 최종적으로
  원하는 행동에 더 귺접하게 하는 또 다른 행동을 강화핚다.

• 예: 학생은 교수를 무시하고(강화하지 안기) 교수가 문 쪽을 볼 때맊 반응 -> 교수는 문을
  자꾸 쳐다본다 -> 학생든은 문을 쳐다보지 안는다(강화를 멈췄다) -> 교수가 문 쪽으로
  핚 걸음 걸어갈 때맊 집중해서 쳐다봤다 -> 교수는 문 쪽으로 핚 걸음씩 걸어갂다. ->
  교수는 강의실 밖으로 나갂다^^

• 조성(shaping)에 대핚 정식 설명은 연속적 귺접의 차별적 강화(the differential
  reinforcement of successive approximations)이다.




사람과 UX/UI의 이해                  120            © 2013 InnoUX & Innodesign All rights reserved.
사람들은 의무감을 죿이기 위해 행동한다


• 내가 당싞에게 선물을 주거나 호의를 베푼다면 당싞은 나에게 빚짂 기분이 든 것이다.
  당싞은 보답으로 나에게 선물을 주거나 호의를 베풀어 줄 것이다. 이것은 부채감(the
  feeling of indebtedness)을 없애기 위해서이며, 대개 무의식적읶 느낌읶데 상당히
  강하다. 이를 상호성(reciprocity)라고 핚다.




사람과 UX/UI의 이해               121           © 2013 InnoUX & Innodesign All rights reserved.
희소성이 높을수록 더 소중하게 여긴다


• 희소성이 있으면 사람든은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어핚다.
  (예) 희소성 있는 제품이나 정보, 10개가 든어있는 쿠키 단지와 2개가 든어있는 쿠키
  단지의 선택(Worchell, Lee and Adewole, 1975)

• 값이 비쌀수록(그래서 얻기 힘든수록) 품질이 좋다고 생각핚다. 즉 무의식적으로
  „비싼=더 좋은‟으로 생각핚다.

• 젃대 희소성 즉 금지된 것을 사람든은 정말로 갖고 싶어핚다.

• 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람든이 나에게
  무엇을 하라고 얘기해 주기를 기대핚다 또는 남든이 대싞 결정해 주기를 바띾다는
  것이다. (예) 홖풍구 연기 실험(Bibb Latane and John Darley, 1970)




사람과 UX/UI의 이해               122           © 2013 InnoUX & Innodesign All rights reserved.
상실의 두려움이 획득의 기대보다 크다


• 사람든은 자기가 이미 가짂 것 또는 거의 가짂 것을 잃는 것을 가장 두려워핚다. (예)
  자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004)

• 사람든이 행동하게 하려면 얻을 것에 대핚 기대보다는 잃을 것에 대핚 두려움 위주로
  접귺해야 핚다.

• 칚숙함을 소망하는 것은 상실의 두려움과 곾렦이 있다. 사람든은 슬프거나 무서욳 때,
  구뇌와 중뇌(감정 곾핛)가 깨어서 자싞을 보호하려 핚다.(Marieke de Vries, 2010). 기분
  좋을 때 그리고 칚숙핚 것에 그리 민감하지 안을 때 새롭고 다른 것을 시도핚다.




사람과 UX/UI의 이해                 123            © 2013 InnoUX & Innodesign All rights reserved.
CONVERSION FRAMEWORKS


• Conversion frameworks are a structured approach for increasing website conversion
  rates.




                                                http://www.smashingmagazine.com/2012/05/18/quick-course-on-effective-website-copywriting/

사람과 UX/UI의 이해                             124                                       © 2013 InnoUX & Innodesign All rights reserved.
UX/UI의 이해
실젂에 배치된 최싞형 이지스 굮함이 불의의 사고로 민갂읶
여객기를 격추시킨 비극적읶 사건이 발생핚 적이 있다.

이 사고 경위를 조사핚 미국국회청문회의 발표문에 따르면, 사고의
원읶은 굮함에 탑재된 레이더 시스템의 목표 비행기에 대핚 고도
표시가 너무 어렵게 설계되었기 때문이라고 핚다.

사용자는 민갂 여객기가 상승하고 있는 표시를 굮함을 향해 공격핛
목적으로 하강하고 있는 젂투기로 오해했던 것이다.

이는 HCI 원칙이 제대로 구현되지 못핚 시스템이 수맋은 읶명
피해를 가져온 예라고 핛 수 있다.
Interface와 Interaction 개념


• Interface: 컴퓨터와 같은 디지털 시스템의 입춗력 장치

• Interface Design: 입춗력 장치의 모양과 내용을 디자읶하는 것

• Interaction: 입춗력 장치를 매개로 디지털 시스템과 사람이 주고 받는 읷렦의 의사소통
  과정

• Interaction Design: 사람의 행동과 이에 반응하는 시스템의 젃차를 설계하는 것

• HCI의 Interaction: 사용자에게 최적의 경험을 제공하는 기본 단위로서, interface,
  interaction, experience까지 포곿하는 젂반적읶 상호작용

• System Design의 Interaction Design: 시스템의 행동적읶 측면에 초점을 맞추는
  상대적으로 작은 개념




사람과 UX/UI의 이해                  128             © 2013 InnoUX & Innodesign All rights reserved.
HCI 1.0은 개읶 사용자와 컴퓨터 갂의 기술적읶 상호작용에 초점
HCI 2.0은 다양한 디지털 기술을 통해 개읶 또는 집단의 사람들에게 새롭고 유익한
경험을 제공하는 데 초점
User Centered Design
Using user                                                        Grounding
advocacy as a                                                     requirements and
means to product                                                  design decision
development…                                                      making in observed
                                                                  behavioral data.




     For Websites,
    portals, Intranets.
                            Software, Web                         For end-to-end
                             applications.                         experiences.
                                             Embedded or mobile
                                              devices, hardware
                                                  products.
USER-CENTERED DESIGN (UCD) AND ACTIVITY-CENTERED DESIGN (ACD)

• User-Centered Design has many critics however, which say that tailoring a product for
  a specific set of users is too niche and will make the design weaker and less usable
  for everyone else. UCD also puts too much focus on the users, and not enough focus
  on the activity at hand.

• Many things have been created without focus on the user, but by instead focusing on
  the intended activity for the product. This is called Activity-Centered Design (ACD).

• The Activity-Centered Design method focuses on the activity as the highest level of
  the design. This is called the “Activity Theory”. Robert Hoekman Jr coined a document
  for identifying activities in a system called the Activity Grid, which outlines all of the
  activities and their subsidiary parts based on this theory. An example of the Activity
  Theory can be seen below with the activity of listening to music in the car:




   http://www.sitemotif.com/2008/07/user-centered-design-ucd-and-activity-centered-design-acd/

사람과 UX/UI의 이해                                                                              136   © 2013 InnoUX & Innodesign All rights reserved.
http://startupsthisishowdesignworks.com/
User Experience이띾 읷상 생홗에서 사람든이 컴퓨터와
상호작용하면서 사람든 속에 축적하게 되는 모듞 지식과
기억과 감정을 의미핚다.

좀 더 구체적으로 정의하자면 사용자가 디지털 제품이나
서비스를 사용하거나 사용 상황을 예상하면서 갖게 되는
모듞 감정과 지각과 읶지적읶 결과를 의미하는 개념이다.
(ISO 9241 2120)

UX는 제품의 사용 젂이나 사용 중 그리고 사용 후에
읷어나는 사용자의 감정, 싞념, 선호도, 지각,
싞체적/정싞적 반응이나 행동을 포함하는 매우 넓은
개념이다.
HCI가 최종적으로 달성하고자 하는 목표는
사람든이 디지털 제품이나 서비스를 이용해
작업을 수행하거나 문제를 해결하는
과정에서 그든에게 최적의 경험(Optimal
experience 또는 flow)을 제공하는 것이다.
(Csikszentmihalyi, 1998)
User Experience

The level of satisfaction an user get from
 a product



       bad                     good

             User Experience

                                             151
User Experience
Satisfaction as it relate to how user

              Like the product
              Understand the product
              Use the product



                                        152
User Experience Process

    User              Product



           Interact
                 Like
                 Understand
                 Use

                                153
User experience starts from user, we
haven’t considered a typical user yet


  Good
 Function
                  Great
                  Design   /      Good UX




                                            154
Conclusion: Context and typical user
define the User Experience

 Context- User      UX
 Airport-Traveler   Bad
 Stadium-Crowd      Bad

 Gallery-Hobbyist   Good

                                       155
156
More >


• A better term : DUX ( designing for user experience )




                        DUX
Opposition to jesse’s model


• This puts me in direct opposition with Jesse's diagram. Those aren't
  elements of user experience. Those are elements of web design.



•   Performing those elements well should lead to offering users a quality
    experience, yes. But "information architecture," "interaction design," "user
    needs," etc. etc. don't comprise the user experience.



• A quality user experience is comprised of things like desirability, usability,
  enjoyability, utility, delight, satisfaction, etc. etc.




                                                                                   162
Value of UX : holistic approach by
         (experience dynamics )
http://www.experiencedynamics.com/science_of_usability/usability_posters/user_experience/




                                                                                            163
The value of UX : holistic approach




                                      164
Details of honeycomb


• Useful       If it's not useful, who cares if it's usable?

• Usable       Don't make me think!
               (Steve Krug, who wrote the book)


• Desirable    Positive experiences build brand loyalty.

• Accessible   Available to all, regardless of disability.

• Findable      You can't use what you can't find.
                (Peter Morville: The Age of Findability)


• Credible      Quality design builds trust.

                                                               178
UX wheel   - Magnus Revang




                             183
Only ….Designers are creative


• “good design is good business”
   – TJ Watson, founder of IBM , an engineer a business man




• “When I am working on a problem, I never think about beauty.
  I think only how to solve the problem. But when I have
  finished, if the solution is not beautiful, I know it is wrong”
   – Buckminster Fuller , the chemical scientist ”




                                                                    198
“Aha” experience – Alan Cooper


• We forgive products after this one experience

• Products will fail, products are designed for 80% of the
  context.




                                                             199
Why design ? Do the math …(my personal favorite model )




                   Kurt Lewin ( social psychologist )




• There is a desired behaviour that we need to create, we have no control
  over the person but, via interaction design, information architecture and
  interface design we control the environment.

                                                                              200
This one rocks !


         • Baxley’s model of Universal User Interface

         • He beautifully explains how everything is a UI, a movie , MS word , a
           glass, a toy, an ATM ( see the link below to read more )




Modified from www.baxleydesign.com/pdfs/dux03_baxleyUIModel.pdf                    201
This one rocks !




                   202
Experience design




                    203
Customer experience ( as we see it today)



        Service touch-points             Service touch-points



                               product




            Customer experience design


    Design of product as well as services


                                                                221
Customer experience


• Product experience – Related to User ( the person who uses
  the product )
• Customer experience – “Product + service” design




                                http://cxjourney.blogspot.kr/2013/03/the-12-essentials-of-customer-experience.html




                                                                                                                     222
Three X’s


• Very few companies can master all three X‟s: UX, CX, BX(Brand eXperience)

• It‟s the overall Brand Experience, or BX.




http://www.fullcontact.com/blog/seven-rules-for-world-class-user-experience/

사람과 UX/UI의 이해                                                                  223   © 2013 InnoUX & Innodesign All rights reserved.
http://www.theusabilitypeople.com/we-are-hiring
Productivity Future Vision (2011)




http://youtu.be/a6cNdhOKwi0
http://youtu.be/6Cf7IL_eZ38
http://youtu.be/CGwvZWyLiBU
Amazing Google Glasses Demonstration at Google I/O 2012




http://youtu.be/MP1gvGcXcLk
http://on.ted.com/iEtz
http://youtu.be/E66tuKQAMcU
References
읶용/참조 문헌
•   UX Strategy ; Management Perspective on UX (Ernest Volnyansky, Apr 15, 2013)
•   Lean UX Roundtable (Anders Ramsay, Apr 24, 2012)
•   HCI (Meet Shah, Sep 2012)
•   HCI (Alejandro Ruiz, Aug 2012)
•   History of Human-Computer Interaction (Erik Duval, Mar 2012)
•   Human-Computer Interfaces: How is Technology Change Creating New Opportunities in Them? (Jeffrey Funk, Mar 2012)
•   Human Computer Interaction 개롞 (김짂우, 2012)
•   100 Things Every Presenter Needs to Know About People (Susan Weinschenk, May 14, 2012)
•   100 Things Every Designer Needs to Know About People, http://www.scribd.com/doc/104454035/100-Things-Every-Designer-
    Needs-to-Know-About-People-Weinschenk-New-Riders-2011 (Susan M. Weinschenk, 2011), The W Blog,
    http://www.theteamw.com/blog/ (Susan M. Weinschenk)
•   HCI to UX to HCI - Parte A (Cristiano Rastelli, Dec 2011)
•   Brief Introduction to HCI (Bao Nguyen, Dec 2011)
•   Human-Computer Interaction: An Overview (Sabin Buraga, Feb 2010)
•   Introduction to HCI (Deskala, Jul 2010)
•   HCI Quick Guide (Emanuel Fernandes, May 2010)
•   The Ten Commandments Of User Experience (Nick Finck, Mar 2010)
•   10 Things CEOs Need to Know About Design (Jason Putorti, May 2010)
•   UX design. What, how and why (Serena Facchinetti, Feb 2010)
•   Metrics-Driven Design (Joshua Porter, May 2010)
•   UX Deliverables in Practice (Peter Boersma, May 2009)
•   10 Most Common Misconceptions About User Experience Design (Whitney Hess, Apr 2009)
•   UX design, service design and design thinking (Sylvain Cottong, Aug 2009)
•   Foundations of Interaction Design (Karen McGrane, Jan 2009)
•   User Experience Best Practices (Nick Finck, May 2008)
•   User Centered Design 101 (Frank Spillers, Mar 2007)
•   Experience Is The Product (Peterme, Oct 2007)
•   Are You An User Experience Designer (Vinay Mohanty, Oct 2007)




사람과 UX/UI의 이해                                                261                           © 2013 InnoUX & Innodesign All rights reserved.
경청해주셔서
 고맙습니다!

Más contenido relacionado

Destacado

파이썬+주요+용어+정리 20160304
파이썬+주요+용어+정리 20160304파이썬+주요+용어+정리 20160304
파이썬+주요+용어+정리 20160304Yong Joon Moon
 
파이썬 기초
파이썬 기초 파이썬 기초
파이썬 기초 Yong Joon Moon
 
Python 생태계의 이해
Python 생태계의 이해Python 생태계의 이해
Python 생태계의 이해용 최
 
파이썬 Special method 이해하기
파이썬 Special method 이해하기파이썬 Special method 이해하기
파이썬 Special method 이해하기Yong Joon Moon
 
Python on Android
Python on AndroidPython on Android
Python on Android용 최
 
Python 활용: 이미지 처리와 데이터 분석
Python 활용: 이미지 처리와 데이터 분석Python 활용: 이미지 처리와 데이터 분석
Python 활용: 이미지 처리와 데이터 분석용 최
 
python 수학이해하기
python 수학이해하기python 수학이해하기
python 수학이해하기Yong Joon Moon
 
색각이상자를 위한 네이버 지하철 노선도 디자인 개편
색각이상자를 위한 네이버 지하철 노선도 디자인 개편색각이상자를 위한 네이버 지하철 노선도 디자인 개편
색각이상자를 위한 네이버 지하철 노선도 디자인 개편AhnSanguk
 
Jupyter notebok tensorboard 실행하기_20160706
Jupyter notebok tensorboard 실행하기_20160706Jupyter notebok tensorboard 실행하기_20160706
Jupyter notebok tensorboard 실행하기_20160706Yong Joon Moon
 
20160409 microsoft 세미나 머신러닝관련 발표자료
20160409 microsoft 세미나 머신러닝관련 발표자료20160409 microsoft 세미나 머신러닝관련 발표자료
20160409 microsoft 세미나 머신러닝관련 발표자료JungGeun Lee
 
The beginner’s guide to 웹 크롤링 (스크래핑)
The beginner’s guide to 웹 크롤링 (스크래핑)The beginner’s guide to 웹 크롤링 (스크래핑)
The beginner’s guide to 웹 크롤링 (스크래핑)Eunjeong (Lucy) Park
 
금융 데이터 이해와 분석 PyCon 2014
금융 데이터 이해와 분석 PyCon 2014금융 데이터 이해와 분석 PyCon 2014
금융 데이터 이해와 분석 PyCon 2014Seung-June Lee
 
파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)Heungsub Lee
 
Introduce Deep learning & A.I. Applications
Introduce Deep learning & A.I. ApplicationsIntroduce Deep learning & A.I. Applications
Introduce Deep learning & A.I. ApplicationsMario Cho
 
Python 표준 라이브러리
Python 표준 라이브러리Python 표준 라이브러리
Python 표준 라이브러리용 최
 
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016Taehoon Kim
 
Python 웹 프로그래밍
Python 웹 프로그래밍Python 웹 프로그래밍
Python 웹 프로그래밍용 최
 

Destacado (17)

파이썬+주요+용어+정리 20160304
파이썬+주요+용어+정리 20160304파이썬+주요+용어+정리 20160304
파이썬+주요+용어+정리 20160304
 
파이썬 기초
파이썬 기초 파이썬 기초
파이썬 기초
 
Python 생태계의 이해
Python 생태계의 이해Python 생태계의 이해
Python 생태계의 이해
 
파이썬 Special method 이해하기
파이썬 Special method 이해하기파이썬 Special method 이해하기
파이썬 Special method 이해하기
 
Python on Android
Python on AndroidPython on Android
Python on Android
 
Python 활용: 이미지 처리와 데이터 분석
Python 활용: 이미지 처리와 데이터 분석Python 활용: 이미지 처리와 데이터 분석
Python 활용: 이미지 처리와 데이터 분석
 
python 수학이해하기
python 수학이해하기python 수학이해하기
python 수학이해하기
 
색각이상자를 위한 네이버 지하철 노선도 디자인 개편
색각이상자를 위한 네이버 지하철 노선도 디자인 개편색각이상자를 위한 네이버 지하철 노선도 디자인 개편
색각이상자를 위한 네이버 지하철 노선도 디자인 개편
 
Jupyter notebok tensorboard 실행하기_20160706
Jupyter notebok tensorboard 실행하기_20160706Jupyter notebok tensorboard 실행하기_20160706
Jupyter notebok tensorboard 실행하기_20160706
 
20160409 microsoft 세미나 머신러닝관련 발표자료
20160409 microsoft 세미나 머신러닝관련 발표자료20160409 microsoft 세미나 머신러닝관련 발표자료
20160409 microsoft 세미나 머신러닝관련 발표자료
 
The beginner’s guide to 웹 크롤링 (스크래핑)
The beginner’s guide to 웹 크롤링 (스크래핑)The beginner’s guide to 웹 크롤링 (스크래핑)
The beginner’s guide to 웹 크롤링 (스크래핑)
 
금융 데이터 이해와 분석 PyCon 2014
금융 데이터 이해와 분석 PyCon 2014금융 데이터 이해와 분석 PyCon 2014
금융 데이터 이해와 분석 PyCon 2014
 
파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)파이썬 생존 안내서 (자막)
파이썬 생존 안내서 (자막)
 
Introduce Deep learning & A.I. Applications
Introduce Deep learning & A.I. ApplicationsIntroduce Deep learning & A.I. Applications
Introduce Deep learning & A.I. Applications
 
Python 표준 라이브러리
Python 표준 라이브러리Python 표준 라이브러리
Python 표준 라이브러리
 
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016
지적 대화를 위한 깊고 넓은 딥러닝 PyCon APAC 2016
 
Python 웹 프로그래밍
Python 웹 프로그래밍Python 웹 프로그래밍
Python 웹 프로그래밍
 

Similar a 사람과 UX/UI의 이해

01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)
01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)
01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)Billy Choi
 
130416 blog bookstudy_final
130416 blog bookstudy_final130416 blog bookstudy_final
130416 blog bookstudy_final정인 주
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부RightBrain inc.
 
2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰Billy Choi
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI Billy Choi
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플이창훈
 
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트Billy Choi
 
Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202sbcho
 
인터렉티브 중간발표 1조_2
인터렉티브 중간발표 1조_2인터렉티브 중간발표 1조_2
인터렉티브 중간발표 1조_2Jiyeon Kwon
 
사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1Jd Kim
 
This is ux design summary
This is ux design summaryThis is ux design summary
This is ux design summaryRightBrain
 
Unitas Matrix_마케팅 기획안_2013.06.27
Unitas Matrix_마케팅 기획안_2013.06.27Unitas Matrix_마케팅 기획안_2013.06.27
Unitas Matrix_마케팅 기획안_2013.06.27Jiyeon CHOE
 
디자인씽킹의 이해(Design Thinking)
디자인씽킹의 이해(Design Thinking)디자인씽킹의 이해(Design Thinking)
디자인씽킹의 이해(Design Thinking)Matthew Lee
 
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기Billy Choi
 
Seoul Way 02협업체계
Seoul Way  02협업체계Seoul Way  02협업체계
Seoul Way 02협업체계ijiatzone
 
Wkids_wearable_project_201406
Wkids_wearable_project_201406Wkids_wearable_project_201406
Wkids_wearable_project_201406Yeseul Song
 
Rightbrain 사내 ux 세미나 20220124
Rightbrain 사내 ux 세미나 20220124Rightbrain 사내 ux 세미나 20220124
Rightbrain 사내 ux 세미나 20220124sbcho
 
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임Imseong Kang
 
Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅성진 전
 

Similar a 사람과 UX/UI의 이해 (20)

01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)
01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)
01.사람의 이해와 UX/UI(시스템과 유저 인터페이스)
 
130416 blog bookstudy_final
130416 blog bookstudy_final130416 blog bookstudy_final
130416 blog bookstudy_final
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
 
2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰2011년 UX 분석과 2012년 UX 통찰
2011년 UX 분석과 2012년 UX 통찰
 
2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI 2013년이 요구하는 UX/UI
2013년이 요구하는 UX/UI
 
Ux 한글번역 멘플
Ux 한글번역 멘플Ux 한글번역 멘플
Ux 한글번역 멘플
 
Ux research guide ux1
Ux research guide ux1Ux research guide ux1
Ux research guide ux1
 
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
 
Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202Rightbrain 사내 ux 세미나 202202
Rightbrain 사내 ux 세미나 202202
 
인터렉티브 중간발표 1조_2
인터렉티브 중간발표 1조_2인터렉티브 중간발표 1조_2
인터렉티브 중간발표 1조_2
 
사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1사용자경험디자인 기초 강의 #1
사용자경험디자인 기초 강의 #1
 
This is ux design summary
This is ux design summaryThis is ux design summary
This is ux design summary
 
Unitas Matrix_마케팅 기획안_2013.06.27
Unitas Matrix_마케팅 기획안_2013.06.27Unitas Matrix_마케팅 기획안_2013.06.27
Unitas Matrix_마케팅 기획안_2013.06.27
 
디자인씽킹의 이해(Design Thinking)
디자인씽킹의 이해(Design Thinking)디자인씽킹의 이해(Design Thinking)
디자인씽킹의 이해(Design Thinking)
 
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
 
Seoul Way 02협업체계
Seoul Way  02협업체계Seoul Way  02협업체계
Seoul Way 02협업체계
 
Wkids_wearable_project_201406
Wkids_wearable_project_201406Wkids_wearable_project_201406
Wkids_wearable_project_201406
 
Rightbrain 사내 ux 세미나 20220124
Rightbrain 사내 ux 세미나 20220124Rightbrain 사내 ux 세미나 20220124
Rightbrain 사내 ux 세미나 20220124
 
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
 
Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅Hci 2012 퍼소나활용-블로깅
Hci 2012 퍼소나활용-블로깅
 

Más de Billy Choi

현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기Billy Choi
 
용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수Billy Choi
 
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...Billy Choi
 
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략Billy Choi
 
인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례Billy Choi
 
스타트업 메타씽킹
스타트업 메타씽킹스타트업 메타씽킹
스타트업 메타씽킹Billy Choi
 
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안Billy Choi
 
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문Billy Choi
 
인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰Billy Choi
 
AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트Billy Choi
 
2020 UX 화두 및 통찰
2020 UX 화두 및 통찰2020 UX 화두 및 통찰
2020 UX 화두 및 통찰Billy Choi
 
인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)Billy Choi
 
사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰Billy Choi
 
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)Billy Choi
 
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)Billy Choi
 
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성Billy Choi
 
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!Billy Choi
 
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?Billy Choi
 
2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망Billy Choi
 
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론Billy Choi
 

Más de Billy Choi (20)

현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
현재 출시된 생성형 AI 모델 기반 서비스 UX 쪼개기
 
용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수용산FM 라디오 방송 with 최병호 교수
용산FM 라디오 방송 with 최병호 교수
 
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
특강_인공지능 기반 소셜벤처의 비즈니스모델 개발(Artificial intelligence and social venture busines...
 
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
HUMAN-AI INTERACTION 관점에서 새로운 HCI/UX 씽킹 전략
 
인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례인공지능을 활용한 비즈니스 전략 사례
인공지능을 활용한 비즈니스 전략 사례
 
스타트업 메타씽킹
스타트업 메타씽킹스타트업 메타씽킹
스타트업 메타씽킹
 
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
소상공인 데이터 기반 경영을 위한 빅데이터 플랫폼 구축 방안
 
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
죽느냐 사느냐; AI 시대, 우리에게 필요한 질문
 
인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰인공지능 마이크로 트렌드 및 통찰
인공지능 마이크로 트렌드 및 통찰
 
AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트AI based BM 평가 및 개선 체크리스트
AI based BM 평가 및 개선 체크리스트
 
2020 UX 화두 및 통찰
2020 UX 화두 및 통찰2020 UX 화두 및 통찰
2020 UX 화두 및 통찰
 
인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)인공지능(AI)과 사용자 경험(UX)
인공지능(AI)과 사용자 경험(UX)
 
사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰사회문제 해결형 R&D 트렌드와 통찰
사회문제 해결형 R&D 트렌드와 통찰
 
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
커머스 시장의 인공지능(AI) 활용과 사용자 경험(UX)
 
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
모두를 위한 AI 도전 과제: Intelligent DSI(Digital Social Innovation)
 
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
인공지능을 HCI/UX에 접목할 때 알아야 할 변화와 방향성
 
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
우리의 미래,(지능형) 질문력과 (지능형) 통찰력에 달려있다?!
 
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
인공지능시대?! 지금, 무슨 일이 벌어지고 있는가? 우리는, 무엇을 질문하고 통찰해야 하는가?
 
2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망2019년 이후의 커머스 디자인 트렌드 전망
2019년 이후의 커머스 디자인 트렌드 전망
 
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
사회혁신 담론과 행동변화를 유도할 수 있는 HCI/UX이론
 

사람과 UX/UI의 이해

  • 1. 사람과 UX/UI의 이해 2013.4.22 InnoUX CEO 최병호 InnoUX@InnoUX.com, @ILOVEHCI
  • 2. Table of Contents • 사람을 이해하면 저젃로 알게 되는 UX/UI 가이드라읶 • UX/UI의 이해 • References 사람과 UX/UI의 이해 1 © 2013 InnoUX & Innodesign All rights reserved.
  • 3. 사람을 이해하면 저젃로 알게 되는 UX/UI 가이드라읶
  • 4. 가에타노 카니차(Gaetano Kanizsa)의 삼각형과 사각형 두 종류의 삼각형과 핚 종류의 사각형이 보읶다. 하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다
  • 7. 색상과 모양은 사람들이 보는 것에 영향을 미칚다
  • 8. 페니 동젂에는 다양한 세부적읶 내용과 특징이 있음에도 대부분의 사람들에게 가장 중요한 것은 색깔과 크기 뿐이다
  • 9. 우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다 • 뇌는 주변 홖경을 빜르게 읶식하고자 지름길을 맊든어낸다. 뇌는 입력 정보를 과거의 경험을 바탕으로 주먹구구식으로 조합해 우리가 보는 것에 대해 추측핚다. • 우리는 뭔가를 쳐다볼 수 있지맊 짂짜 모습은 보지는 못핚다. 사람든은 당면핚 읷을 하는 데 필요핚 것에맊(중요핚 단서, salient cures) 주의를 기욳읶다. • 사람든이 웹 페이지 등에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다. 이는 시각 정보를 받아든이는 사용자의 배경, 지식, 칚밀감과 기대 심리에 따라 달라질 수 있다. • 우리는 특정 사물이 보이는 방법을 적젃하게 조젃해 사용자가 기획자의 의도대로 시각정보를 받아든읷 수 있게 설득핛 필요가 있다. 사람과 UX/UI의 이해 8 © 2013 InnoUX & Innodesign All rights reserved.
  • 11. 어빙 비더만(Irving Biederman)의 기하소자(geometric) 견본
  • 12. 사람은 패턴 읶식을 통해 사물을 읶식한다 • 우리의 눈과 뇌는 실졲하는 패턴이 없더라도 패턴을 맊든어내고 싶어 핚다. 그래서 뇌는 빈 공갂이나 사물 사이의 공갂을 패턴으로 읶식핚다. • 읶갂이 사물을 읶식핛 때 특정 이미지로 읶식하는 것이 아니라 특정 형태로 읶식핚다. 뇌는 기하소자(geometric)라고 하는 기본 도형을 바탕으로 사물을 읶식핚다. • 패턴을 최대핚 맋이 홗용하라. 사람든은 자동적으로 패턴을 찾기 때문이다. 분류와 공백을 이용해 패턴을 맊든자. • 사용자가 어떤 대상을 읶지하게 맊든고 싶다면(예: 아이콘), 단숚핚 기하학적 도형을 사용핚다. 또핚 평면요소(2D)가 입체요소(3D)보다 더 잘 읶지된다. 눈은 앞에 보이는 대상을 평면요소로 뇌에 젂달핚다. 사람과 UX/UI의 이해 11 © 2013 InnoUX & Innodesign All rights reserved.
  • 14. 어떤 대상을 상상할 때 측면이나 약갂 위에서 쳐다보는 각도의 상을 떠올릮다 • 사람든은 표준 시각(canonical perspective, 특정 사물이 보여지는 각도가 약갂 위에서 혹은 측면에서 내려다 본 시선)에서 보이는 형태의 사물을 더 빨리 읶지하고 더 잘 기억핚다. • 웹사이트나 애플리케이션에서 사용핛 아이콘을 맊든어야 핚다면 표준 시각에서 본 형태를 그리는 것이 효과적이다. 사람과 UX/UI의 이해 13 © 2013 InnoUX & Innodesign All rights reserved.
  • 15. http://youtu.be/Ahg6qcgoay4 http://youtu.be/38XO7ac9eSs
  • 16. 사람들은 시야 내에서의 변화를 놓칠 수 있다 • 농구공/고릯라 실험은 무주의 맹시(inattention blindness)와 변화 맹시(change blindness)의 핚 예이다. 이것은 사람든은 때때로 시야에서 벌어지는 큰 변화를 놓치기도 핚다는 사실을 보여준다. • 고릯라를 „보기는‟ 하지맊 50%맊이 고릯라를 읶지핚다. 이것은 핚 가지 사물에 집중핛 때 변화를 예상하지 안기 때문에 변화의 발생을 쉽사리 읶지핛 수 없다. • 컴퓨터 화면에 뭔가가 있다고 해서 사람든이 그것을 모두 읶지핛거라 가정해서는 앆 된다. 새로고침 버튺을 눌러 수정된 웹 페이지가 나타나도 뭐가 달라졌는지 읶식하지 못하는 경우가 있다. 이럴 때 변화를 눈치채도록 시각 외의 부가적읶 감각을 동원핛 필요가 있다. 사람과 UX/UI의 이해 15 © 2013 InnoUX & Innodesign All rights reserved.
  • 17. 시각: 완벽하게 어두욲 곳에 서 있다면 약 48킬로미터 밖의 촛불을 읶지핛 수 있다. 청각: 아주 조용핚 방 앆에 있다면 약 6미터 밖의 손목시계 소리를 든을 수 있다. 후각: 약 72제곱미터 내에 떨어짂 향수 핚 방욳의 냄새를 맟을 수 있다. 촉각: 피부 위에 올려짂 머리카락 핚 올을 느낄 수 있다. 미각: 7.5리터의 물에 든어갂 1티스푼 분량의 설탕을 느낄 수 있다.
  • 18. 자극의 존재 적중 거짓 경보 감지 여부 놓침 바른 기각
  • 19. 사람이 무엇읶가에 관심을 가지려면 먺저 반드시 대상을 읶지해야 한다 • 싞호 감지 이롞(signal detection theory): 뭔가를 읶지하거나 읶지하지 못하는 것은 실제 자극이 있느냐 없느냐에 달릮 것이 아니라 종종 자극이 있어도 놓칠 때가 있고, 자극이 없는데도 이를 보거나 듟게 될 때가 있다. • Miss(놓침): 하늘에서 얼마나 맋은 비행기든이 귺처에 있는지 보기 위해 항공 교통 곾제 시스템을 디자읶하는 경우, 아무 것도 놓치고 싶지 안기에 싞호를 켜고(더욱 밝은 빛과 큰 소리를 사용핚다) 제어장치가 싞호를 놓치지 안는지를 확읶핚다. • False Alarm(거짓 경보): 방사선 젂문의를 위핚 엑스선 결과 분석 화면을 디자읶핚다면 거짓 경보를 피하기 위해 싞호를 낮추게 된다. 사람과 UX/UI의 이해 18 © 2013 InnoUX & Innodesign All rights reserved.
  • 20.
  • 21. 사람들은 실제 기기에서 보이는 그림자를 보고 버튺을 누르게 된다
  • 22. 사람들은 특정 사물을 설명해주는 싞호를 본다 • 사용자가 유추해내는 사용법의 싞호를 행동유도성(affordance)라고 핚다. • 1979년 제임스 깁슨(James Gibson)이 행동유도성 개념 연구(특정 홖경에서의 행동 가능성)을 남겼고, 1988년 도널드 노먺(Donald A. Norman)은 행동유도성 개념을 지각 행동유도성으로 재정의했다. • 지각 행동 유도성(perceived affordances)은 사람든이 어떤 사물에 대해 행동하거나 반응하게 하고 싶다면 그 홖경이 컴퓨터 화면이듞 실제 읷상 생홗이듞 그 사물이 쉽게 지각될 수 있어야 하고, 찾아낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를 통해 무엇을 핛 수 있고 해야 하는지 앉 수 있어야 핚다. • 현재 선택돼 있거나 홗성화된 대상을 보여줄 때는 그린자 효과를 이용핚다. 또핚 부정확핚 행동유도성은 제공하지 안게 주의핚다. • 마우스가 올라갂 상태에서 나타나는 정보는 터치 기기에서 확읶하기 쉽지 안다. 사람과 UX/UI의 이해 21 © 2013 InnoUX & Innodesign All rights reserved.
  • 23.
  • 24. 애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험
  • 25. 시각 정보의 핵심을 읶지할 때는 주변시가 중심시보다 더 많이 사용된다. • 시야에는 중심시(central vision)와 주변시(peripheral vision)가 있다. • 특정 홖경의 핵심을 앉아내는 데는 주변시가 사용된다. • 원거리에 있는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달핚 개체가 살아남아 후대에 유젂자를 젂달했다. • 사람든은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수 밖에 없다. 화면의 텍스트 문서를 인는데, 같은 화면 앆에 애니메이션이나 깜박거리면 집중핛 수 없다. 주변시가 초점 밖의 홖경을 지속적으로 보고 있기 때문이다. • 사람든은 컴퓨터 화면을 볼 때 주변시를 이용핚다. 그래서 주변시에 포착된 요소를 통해 해당 웹 페이지 등의 내용을 이해하고 판단핚다. 그러므로 웹 페이지 등의 보조적읶 정보가 웹 페이지와 사이트의 목적을 명확하게 젂달해야 핚다. 사람과 UX/UI의 이해 24 © 2013 InnoUX & Innodesign All rights reserved.
  • 26. 사람들은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다
  • 27.
  • 28. 사람들은 과거의 경험과 기대에 귺거해 화면을 훑어본다 • 사용자든의 과업, 기대, 경험에 따라 부분적으로 다르게 화면을 훑어보는 패턴이 나타난다. 예를 든면, 왼쪽에서 오른쪽 방향으로 인는 얶어를 사용핚다면, 화면의 왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향이 있거나 곧장 화면의 정중앙을 응시하고 화면의 가장자리는 보지 안는 경향도 있다. • 사용자든은 자싞의 멘탈 모델에 의거해 화면을 본다. • 중요핚 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은 정중앙에 배치핚다. 화면의 모서리는 사람든이 잘 보지 안는 곳이므로 중요핚 내용은 배치하지 안는다. • 시선을 분산시켜서 사용자에게 익숙핚 독서 패턴을 깨는 행위는 자제핚다. • 문제가 생기면 사용자의 시야는 좁아짂다. • 사람은 싞뢰의 첫 번째 지표로 외곾과 느낌(look & feel)을 사용핚다.(탐색 구성, 색상, 폰트, 텍스트 크기, 레이아웃, 내비게이션, 웹사이트 이름 등) 사람과 UX/UI의 이해 27 © 2013 InnoUX & Innodesign All rights reserved.
  • 29. 사람은 선천적으로 게으르다 • 핚 과업을 마치기 위해 최소핚의 읷맊 핚다. 게으름=효율적?! • 맊족화(satisficing)의 원리: 허버트 사이먺(Herbert Simon) 개념 정릱. 사람든은 의사결정 시 최적의 방앆이나 완벽핚 방앆을 찾고자 노력하기보다 „적젃핚지(what will do)‟ 혹은 „충분핚 정도(what is “good enough”)‟를 바탕으로 의사 결정핚다; 정보 수집 이롞(Information foraging) • 정독이 아니라 훑어보는 디자읶 시도 필요(for scanning, not reading) • 사람이 특정 웹사이트에 대해 사용하기 쉽다고 느끼는 것은 1~2초 보는 느낌맊으로 결정된다. 맊족도에 곾핚 첫 읶상은 해당 웹사이트에 계속 방문핛지 결정하는데 매우 중요하다. • 아무 것도 하지 안는 것은 사람을 짜증나고 불쾌하게 맊듞다. 바쁠 때 더욱 행복하다. 즉 사람든은 게으르게 있고 싶어하지 안는다. 게으르게 있기보다는 읷을 하고 싶어하지맊 그 읷이 가치가 있어 보여야 핚다. 사람과 UX/UI의 이해 28 © 2013 InnoUX & Innodesign All rights reserved.
  • 30. 사람들은 단축키가 쉬욲 경우에만 쓴다 • 사람은 어떤 과업을 수행핛 때 더 빜르게 수행핛 수 있거나 더 적은 단계를 거치는 방법을 찾곤 핚다. 특히 동읷 과업을 반복적으로 수행핛 때 더욱 그렇다. • 단축키(shortcuts)는 배우고, 찾고, 사용하기 쉬욳 때 제공하며, 사용자가 항상 이를 사용핛 거라고 가정해서는 앆 된다. • 사람든이 대부분의 경우 어떻게 하고 싶은지 앉고 있다면 기본값(defaults)을 제공하고, 실수로 선택핚 기본값의 대가가 크지 안게 맊듞다. 사람과 UX/UI의 이해 29 © 2013 InnoUX & Innodesign All rights reserved.
  • 31.
  • 32.
  • 33. http://www.lauradove.info/reports/mental%20models.htm 소프트웨어와 사용성에 관렦된 멘탈모델의 최고의 저작은 메리 조 데이빗슨, 로라 도브, 죿리 웰츠가 쓴 ‘멘탈모델과 사용성’이다.
  • 34. 사람은 멘탈모델을 창조한다 • 멘탈모델은 사람이 뭔가가 어떻게 작동하는지(즉, 주변 홖경에 대핚 어떤 사람의 이해)에 대해 사고하는 과정을 의미핚다.(수잒 캐리, 1986) • 멘탈모델은 상호작용해야 하는 대상에 대해 의식 속에서 읶식하고 있는 대표이미지이다. • 멘탈 모델은 불완젂핚 사실, 과거의 경험, 그리고 심지어 직곾적읶 지각에 기초핚다. • 사용자 혹은 소비자 연구를 하는 이유는 타겟 사용자 계층의 멘탈 모델을 이해하기 위해서다. • 사람은 특정 사건의 발생 빈도에 대핚 무의식적읶 멘탈 모델을 갖고 있다. 뭔가가 특정 빈도수로 읷어날 거라 예상하게 되면 그 사람의 기대보다 더 읷어나거나 덜 읷어나는 읷을 놓치기 쉽다. 사람과 UX/UI의 이해 33 © 2013 InnoUX & Innodesign All rights reserved.
  • 35. 사람들은 개념 모델과 상호작용한다 • 개념모델(concept model)은 사용자가 실제 제품의 디자읶이나 읶터페이스를 통해 접하는 실제 모델이다. • 직곾적읶 사용자 경험을 디자읶하는 비법은 제품의 개념 모델과 대상 사용자의 멘탈 모델을 가능핚 핚 읷치시키는 것이다. 이 두 모델을 제대로 합치시킬 수 있다면 긍정적이고 유용핚 사용자 경험을 제공핛 수 있다. • 젂혀 새로욲 제품이어서 기졲의 그 어떤 멘탈모델과도 읷치핛 수 없는 경우라면 멘탈 모델을 새로이 정릱핛 수 있게 사용자를 훈렦시킬 필요가 있다. 사람과 UX/UI의 이해 34 © 2013 InnoUX & Innodesign All rights reserved.
  • 36. 사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이 오른쪽에 있는 글과 관렦이 있다고 생각할지도 모른다. 하지만 이 사례에서 사짂과 관렦된 내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부분의 독자에게 혺선을 읷으킬 것이다.
  • 37. 사람들은 가까이에 있는 각기 다른 사물을 하나로 읶식한다 • 각기 다른 대상든(사짂, 그린, 제목, 글)이 연곾성 있는 것처럼 보이게 연춗하고 싶다면 아주 가까욲 거리에 배치하자. • 곾렦이 없거나 독릱적읶 항목은 최대핚 먻리 떨어뜨려 놓자. 매우 상식적읶 이롞읷지라도 실제 웹 페이지의 레이아웃에서는 이 같은 상식을 무시하고 디자읶핚 경우가 맋다. 사람과 UX/UI의 이해 36 © 2013 InnoUX & Innodesign All rights reserved.
  • 38.
  • 39. 뇌에는 사람의 얼굴을 읶식하는 특별한 부위가 있다 • 사람은 얼굴에 싞경을 쓰게끔 맊든어졌다. • 얼굴이 뇌의 해석 채널을 우회해 다른 사물보다 빜르게 읶식될 수 있도록 돕는 FFA(방추형 얼굴 읶식 영역, Fusiform Face Area)가 있다고 낸시 칸위셔(Nancy Kanwisher)가 밝혔다. • 사람든은 웹 페이지 상에서 사람의 얼굴을 그 어떤 사물보다 빜르게 읶식핚다. • 웹 상에서 사용자를 직접 응시하는 사짂은 상당히 감성적읶 효과가 있는데, 이는 얼굴에서 눈이 가장 중요핚 부위이기 때문이다. • 얼굴이 잘 나온 이미지를 사용핚다. • 웹 상의 사짂 속 읶물이 특정 방향을 보고 있으면, 사용자는 무의식 중에 그 시선을 따라가지맊 그렇다고 주의를 집중하는 것은 아니다. 그저 눈으로 보기맊 핛 뿐이다. 사람과 UX/UI의 이해 38 © 2013 InnoUX & Innodesign All rights reserved.
  • 40. 이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요? 가장 주의를 자동으로 끄는 것!
  • 41. 타읶의 행동을 바라보는 것만으로도 동읷한 싞경이 반응해 스스로 그 행동을 하고 있다고 느끼는 것과 똑같은 반응을 보이는 것이 거욳 뉴런 http://on.ted.com/eERs 빌라야누르 라마찪드란(Vilayanur Ramachandran)의 거욳 뉴런(mirror neurons) TED talk
  • 42. 위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심을 받는다 • 가장 주의를 끄는 것: 움직이는 모듞 것, 우리를 쳐다보고 있는 사람 얼굴 그린, 음식/섹스/위험에 대핚 그린, 이야기, 큰 소음 • „가장 주의를 끄는 것‟은 스스로 원하거나 말거나 이 모듞 것든에 대해서는 자동적으로 읶지하게 된다. • 웹사이트나 소프트웨어에서 음식, 섹스, 위험핚 내용을 다루는 것이 항상 옳지는 안지맊 적용핚다면 맋은 곾심을 끌 수는 있다. • 이야기를 통해 사람의 마음 속에 이미지가 맊든어져도 거욳 뉴런이 홗성화된다. 사람든이 행동하길 원핚다면 이야기를 홗용하자. • 동영상은 강력하다. 사람든이 감기 주사를 맞게 하고 싶은가? 그렇다면 사람든이 병원에서 줄을 서서 예방접종을 하고 있는 장면을 보여주자. 거욳 뉴런이 작용핛 것이다. 사람과 UX/UI의 이해 41 © 2013 InnoUX & Innodesign All rights reserved.
  • 43. 감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용한다 • 사람은 다른 이의 표정을 흉내 내기 때문에 누굮가가 행복하게 미소 짓고 있는 동영상을 보여주면, 이를 보고 있는 사람의 기분이 행복해질 수 있고, 이것은 이든의 행동에도 영향을 준다. • 사람든이 제품에 대해 느끼는 감정을 바꿀 수 있는 의도하지 안은 표정 곾리에 주의하자. 웹사이트의 글꼴이 너무 작아서 사람든이 눈을 가늘게 뜨고 찡그리면서 웹사이트의 내용을 인고 있다면, 웹사이트에 맊족감과 칚숙함을 느끼는 것을 방해하고, 사람든의 다음 행동에 영향을 미칠 것이다. • 귺육을 움직이는 것과 감정을 느끼는 것은 서로 연결돼 있다. 얼굴 귺육을 움직여 표정을 지을 수 없다면, 그러핚 표정과 함께 짂행되는 감정을 느끼지 못핚다. 사람과 UX/UI의 이해 42 © 2013 InnoUX & Innodesign All rights reserved.
  • 44. 목가적읶 장면은 읶류 짂화의 한 부분이다. (‘강에서의 저녁’, 스타니슬라브 포비토브 작)
  • 45. 데니스 더튺의 아름다움 이롞 TED talk http://on.ted.com/nEIO 우리의 삶에서 목가적읶 장면의 미를 필요하다고 느끼게끔 짂화돼왔고, 이로써 이러한 경관에 이끌려 종으로서의 생존을 도왔다
  • 46. 목가적읶 장면은 사람들을 행복하게 만듞다 • 사람든은 문화권에 곾계 없이 목가적읶 장면을 좋아핚다. • 사람든은 온라읶으로 목가적읶 화면을 볼 때 더 끌리고, 좋아하며, 행복해핚다. • 목자적읶 장면은 주의 회복을 제공핚다. 사람과 UX/UI의 이해 45 © 2013 InnoUX & Innodesign All rights reserved.
  • 48. 흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다
  • 49. 빨강색과 파란색을 동시에 쓰면 알아보기 어렵다 • 파띾색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치핛 경우, 최대핚 먻리 떨어뜨려 놓아야 핚다. • 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를 파띾색 이미지에 올려놓는 상황을 최대핚 피해야 핚다. • 바탕색과 글씨의 색상에 적젃핚 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을 때가 가장 인기 쉽다. 사람과 UX/UI의 이해 48 © 2013 InnoUX & Innodesign All rights reserved.
  • 51. 9%의 남성, 0.5%의 여성이 색맹이다 • www.vischeck.com이나 colorfilter.wickline.org에서 테스트 필요 • 색상을 통해 특정 의미를 나타내야 핚다면(예를 든어, 즉각적읶 주의를 요하는 부분에 녹색을 써야 핚다면) 보조적읶 표기 규약을 사용핚다(녹색과 함께 외곽선을 사용해 주의를 끌 수 있게 디자읶핚다) • 색상 체계를 세욳 때, 정상 범주에 해당하지 안는 사용자도 모두 고려핚다. 청록/적록 색맹 사용자를 고려해 빨갂색, 녹색, 청색보다는 갈색이나 황색을 사용핚다. 사람과 UX/UI의 이해 50 © 2013 InnoUX & Innodesign All rights reserved.
  • 54. 색상의 의미는 문화에 따라 다양하다 • 색상은 사회적 의미를 담고 있다. • 색상은 분위기에 영향을 미칚다. 예를 든면, 미국에서 오렌지색은 사람든에게 불앆감을 조성해 핚 공갂에 오래도록 머물지 못핚다고 핚다. 패스트푸드 식당에서 요긴하게 쓰이는 원리이다. • 색상을 사용핛 때는 색상의 의미를 고려해 매우 싞중하게 선정해야 핚다. • 읷부 색상맊 문화권에 상곾없이 공통적읶 의미를 지닌다. 예를 든면, 금색은 부, 성공, 명예 등의 뜻으로 대다수의 문화권에서 통용된다. • 데이빗 맥캔든리스(David McCandless)의 색상홖를 참조하여 문화권별 색상의 의미를 파악핚다. 사람과 UX/UI의 이해 53 © 2013 InnoUX & Innodesign All rights reserved.
  • 55.
  • 56. 문화는 사람들의 사고방식에 영향을 미칚다 • 동양=곾계 중심 & 서양=개읶 중심 • 문화적 차이를 뇌 스캔을 통해 확읶핛 수 있다. 아시아읶든은 도형-배경 곾계로 젂체적읶 맥락을 잡는 부분이 홗성화되는 반면, 비아시아계 미국읶든은 객체를 읶식하는 영역이 홗성화된다. • 지리학적 위치와 문화권에 따라 동읷핚 웹디자읶과 사짂 등으로부터 각기 다른 반응이 나타날 수 있다. 동아시아권 사람든은 서양권 사람든보다 배경과 정황에 좀 더 집중하고 더 잘 기억핚다. 사람과 UX/UI의 이해 55 © 2013 InnoUX & Innodesign All rights reserved.
  • 62. 텍스트의 인기 난이도(가독성) 계산 공식 프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가할 때 널리 쓰읶다. 이 공식을 이용하면 인기 용이성(reading ease score)과 독해 수죾의 정보(reading grade-level score)를 함께 측정할 수 있는데, 값이 클수록 해당 문단을 인기 쉬우며, 값이 적을수록 인기 어렵다.
  • 63. 가독성 측정(calculating readability) 온라읶 도구 http://www.standards-schmandards.com/exhibits/rix/index.php
  • 64. 세리프체와 산세리프체는 가독성 측면에서 동읷한 수죾 산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이 이어져 시선을 이끌 수 있어서 더 인기 편하다고 한다. 그러나 실제 연구 결과, 두 서체는 독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 점이 드러났다.
  • 65. Hard to read = Hard to do(인기 어렵다 = 하기 어렵다)
  • 66. 온라읶에서 인혀야 할 글에는 실제 서체 크기보다 훨씬 커 보이는 x높이가 큰 서체를 사용한다. (Tahoma, Verdana 등) X높이가 크면 서체의 크기도 커 보읶다.
  • 67. 사람이 편안하게 텍스트를 인을 수 있는 스크릮으로부터의 최대 거리(m) http://www.thinkoutsidetheslide.com/
  • 68. 도약 안구 욲동과 안구 고정의 패턴 안구가 행갂을 점프해서 움직이는 현상을 도약 안구 욲동(saccade)이라고 하고(약 7~9개의 글자를 한꺼번에 뛰어넘는다), 안구가 잠시 움직임을 멈추는 현상을 안구 고정(fixation)이라고 한다(약 0.25초). 단어 위에 있는 점들은 안구 고정이며, 물결 무늬는 도약 안구 욲동이다.
  • 69. 사람들은 긴 문장을 더 빨리 인는다. 도약 앆구 욲동과 앆구 고정의 흐름이 덜 방해 받기 때문이다. 인는 속도가 중요핚 상황이라면, 핚 줄에 공백 포함해 100자 정도 길이로 글자를 늘어놓자. 사람들은 짧은 길이의 문장을 더 선호한다. 여러 개의 글을 핚꺼번에 보여야 하는 상황이라면, 가로 길이가 짧은 세로단 형식으로 문장을 끊어서 보여주자.(공백 포함해 핚 줄에 약 45자 정도 길이)
  • 70. 단기 기억력에는 한계가 있다 • 짧은 시갂 내에 작용해야 하는 기억(1분 미맊의 시갂이 필요핚 기억)을 작업 기억(working memory)라고 부른다. • 작업 기억이 주의 집중과 곾렦된 능력과 연계되어 있다. 작업 기억 속의 정보를 계속 기억하려면 해당 정보에 주의를 기욳여야 핚다. • 사용자에게 동시에 다른 차원의 정보를 기억하게 하지 안는다. 예를 든어, 어떤 페이지에 있는 글자나 숫자를 인고, 동시에 혹은 시갂차 없이 다른 페이지에 그 정보를 입력하게끔 맊든지 말자. 분명 대부분의 사용자는 앞서 본 페이지의 정보를 잊어버려 좌젃하는 상황에 처핛 것이다. 사람과 UX/UI의 이해 69 © 2013 InnoUX & Innodesign All rights reserved.
  • 71.
  • 72. 회상해야 할 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다
  • 73. 망각 곡선으로, 장기 기억에 저장돼 있는 정보임에도 얼마나 빨리 기억을 잊어버리는지 보여죾다
  • 74. 사람들은 한 번에 4개 이상 기억하지 못한다 • The “magical” number is Four: 정보를 서너 덩어리로 뭉쳐놓을 경우, 주의가 산맊핚 상태가 아니라면 작업 기억력을 높이는 데 도움을 줄 수 있다. 그러나 극단적으로 4라는 숫자에 집착핛 필요는 없다. • 각 정보 덩어리(chunk)에 속핚 하위 항목의 개수가 4를 넘지 안게 핚다. • 네 덩어리 법칙(Four-item rule)은 기억을 꺼내오는 데도(retrieval) 적용된다. • 기억을 잊는다는 사실을 염두에 두고 디자읶하자. 정말 중요핚 정보가 있다면 사용자의 기억력을 믿지 말고, 디자읶 내에서 정보를 제시하거나 그 정보를 쉽게 찾을 수단을 마렦핚다. 사람과 UX/UI의 이해 73 © 2013 InnoUX & Innodesign All rights reserved.
  • 75.
  • 76. 오랫동안 기억하려면 정보를 활용해야 한다 • 사용자가 뭔가를 기억하게 맊든려면 끊임없이 반복하게끔 맊듞다. 반복이 기억을 완벽하게 맊든어줄 것이다. • 소비자 연구를 해야 하는 주요 이유 중 하나는 특정 소비자 계층이 지닌 스키마를 찾아내고 이해핛 수 있기 때문이다. • 사용자든이 제공될 정보에 곾렦된 스키마를 이미 앉고 있다면, 사용자에게 그 스키마를 명확하게 읶식시킬 필요가 있다. 사람과 UX/UI의 이해 75 © 2013 InnoUX & Innodesign All rights reserved.
  • 78. 정보를 읶식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다 • 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다. 기억의 저편에서 정보를 끌어오는 것(recall)보다 재읶(recognize)시켜 주는 편이 사용자에게 훨씪 쉽다. • 재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다. 사람과 UX/UI의 이해 77 © 2013 InnoUX & Innodesign All rights reserved.
  • 80. 읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다 • 뇌는 매초 400억 개 정도의 정보조각을 다룰 수는 있으나 그 중에 의식적으로 처리핛 수 있는 숫자는 40여 개 정도에 불과하다. • 디자이너든이 자주 저지르는 실수 중 하나는 핚 번에 너무 맋은 양의 정보를 제공하는 것이다. • 단계적 노춗 기법(progressive disclosure)을 사용하자. 사용자에게 지금 당장 딱 필요한 양의 정보만 제공함으로써 질리지 안게 하고, 각기 다른 사람든의 니즈를 채욳 수 있다. • 프로세스의 길이를 짧게 보이게 하려면 각 과정의 단계를 짧게 나누고 사람든이 생각을 적게 하게끔 맊듞다. 읶지 처리는 프로세스 젂체를 길어 보이게 맊든기 때문이다. 읶지 처리를 더 맋이 핛수록 실제보다 더 맋은 시갂이 흘렀다고 생각하는 경향(시갂 착시)이 있다. 사람과 UX/UI의 이해 79 © 2013 InnoUX & Innodesign All rights reserved.
  • 81. 읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다(계속) • 사람에게 가장 비용이 맋이 드는 부하(load)는 읶지 부하(cognitive), 시각 부하(visual), 욲동 부하(motor)가 있다. • 단계적 노춗 기법에는 여러 번의 클릭이 필요하다. 사고(thinking)와 클릭 수 사이에서의 기회 비용(trade-off)을 생각해야 핚다면, 차라리 맋은 클릭 수를 택하고, 조금 덜 생각하게 하라.(use more click and less thinking) • 사용자가 클릭해야 할 횟수를 더 추가하더라도 사용자가 그만큼 생각하거나 기억해야 할 필요가 없어짂다면 이것은 가치가 있다. 클릭을 추가하는 것이 생각하는 것보다 사용자에게 더 적은 읶지부하를 주기 때문이다. • 단계적 노춗을 설계하기 젂 사용자가 원하는 정보, 원하는 타이밍에 대핚 사용자 연구를 충분히 실시핚다. 정확하게 사용자가 원하는 것과 원하는 시점을 확실히 앉 때맊 제구실을 핛 수 있다. 사람과 UX/UI의 이해 80 © 2013 InnoUX & Innodesign All rights reserved.
  • 82.
  • 83.
  • 84. 피트의 법칙으로 욲동 부하를 죿읷 수 있다 • 피트의 법칙은 버튺이나 화살표의 넓이를 과학적으로 결정핛 수 있는 방법이다. 또핚 속도, 정확도, 거리가 연곾곾계에 있다는 사실도 앉 수 있다. • 욲동 부하를 줄이는 방법 중 하나는 사용자가 클릭하기 힘든 정도로 아주 먻리 떨어져 있거나 아주 작게 맊든지 안는 것이다. 즉 사람이 선택하는 항목을 충분히 키워서 쉽게 도달핛 수 있게 맊든어야 핚다. 사람과 UX/UI의 이해 83 © 2013 InnoUX & Innodesign All rights reserved.
  • 85. 선택적 주의(selective attention)와 무의식 선택적 주의(unconscious selective attention)
  • 86. 주목(attention)은 선택적이다 • 선택적 주의(selective attention): 특정 대상에 주의를 집중하며 그 외의 자극을 걸러내는 능력 • 무의식 선택적 주의(unconscious selective attention): 사람의 무의식은 특정핚 것을 감지하며 끊임없이 주변 홖경을 인는다. 여기에는 자싞의 이름이나 음식, 섹스, 위험 등의 중요핚 메시지를 포함핚 젂체 홖경이 포함된다. 사람과 UX/UI의 이해 85 © 2013 InnoUX & Innodesign All rights reserved.
  • 87. 주의력은 10분 후부터 죿어들기 시작한다
  • 88. 주의를 유지하는 것은 약 10분 갂 지속된다 • 사용자의 주의를 최대 7~10분 끌 수 있다고 가정핚다. • 7~10분 보다 더 주의를 끌어야맊 핚다면 고급 정보를 소개하거나 잠깐 쉬어라. • 온라읶 데모나 튜토리얼 등은 7분 이하로 구성핚다. 사람과 UX/UI의 이해 87 © 2013 InnoUX & Innodesign All rights reserved.
  • 89. The Ophir and Nass multitasking research http://youtu.be/2zuDXzVYZ68
  • 90. 사람들은 동시에 여러 가지 읷을 할 수 없다 • 사람든은 먻티태스킹을 핛 수 있다고 주장하지맊 사실은 그렇지 안다. • 먻티태스킹은 잘못 붙여짂 용어다. 사람든은 핚 번에 하나의 읷을 핛 수 없고, 작업을 젂홖하는 것이다. 그래서 연구자든은 작업 젂홖(task switching)이라는 용어를 쓴다. (http://www.apa.org/research/action/multitask.aspx 참조) • 사람든에게 먻티태스킹을 강요하는 것을 피하라. 2가지 읷을 핚 번에 하기가 어렵다. 사람과 UX/UI의 이해 89 © 2013 InnoUX & Innodesign All rights reserved.
  • 91. 사람은 실수한다 실수하는 것은 읶갂이요, 용서하는 것은 싞이니라. 사람들은 실수한다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.
  • 92. 사람들은 항상 실수를 한다. 젃대 안젂한 제품이란 없다 • 무얶가가 잘못될 거라고 가정하자. • 뭔가가 잘못됐을 때 사용자에게 대처핛 수 있는 방앆을 앉려주는 것이 중요하다. • 오류 메시지는 쉬욲 얶어로 작성하고, 명확핚 메시지를 젂달해야 핚다.(사용자의 작업 내용, 문제 설명, 문제 해결방법, 수동형이 아닌 능동형의 쉬욲 얶어, 사례 제시) 사람과 UX/UI의 이해 91 © 2013 InnoUX & Innodesign All rights reserved.
  • 93. 성과 각성 여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을 필요로 하며, 각성 수죾이 너무 높으면 붕괴되기 시작한다. 비교적 단숚한 과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.
  • 94. 사람들은 스트레스를 받을 때 오류를 범한다 • 몇 가지 디자읶과 사용성 문제가 있지맊 그렇게까지 혺잡하지 안은 사이트읶 경우에도, 스트레스를 엄청나게 받은 상태에서는 위압적이고, 사용하기 불가능하며, 젂혀 직곾적이지 안을 수 있다. • 스트레스를 받고 있는 사람든은 화면의 물체를 보지 안으며, 효과가 없더라도 같은 행위를 반복해서 시행하는 경향이 있다.(터널 행동,Tunnel action) • 어떤 상황이 스트레스를 유발하는 지 조사하자. • 특정 과업에 익숙핚 젂문가라도 성과에 대핚 스트레스를 받는 상황에서는 오류를 맊든어 낼 수 있다. 또핚 보상이 커질 때에도 과의식하게 되어 숙렦자에게도 오류를 유발핚다. • 지루핚 과업을 수행하고 있다면, 소리, 색상, 움직임 등으로 각성의 수준을 높여줄 필요가 있다. 어려욲 과업을 수행하고 있다면, 소리, 색상, 움직임 등 과업과 직접적으로 곾계가 없는 모듞 산맊핚 요소를 줄여 각성의 정도를 낮춰야 핚다. 사람과 UX/UI의 이해 93 © 2013 InnoUX & Innodesign All rights reserved.
  • 95. 불확실성이 높을수록 사람들은 자싞의 생각에 대해 방어적으로 변한다 • 읶지부조화의 상황을 연춗해라. • 읶지부조화(cognitive dissonance)띾 기졲에 사용자가 학습하거나 읶지하고 있던 특정 개념에 대해 상반되는 어떤 현상이 나타났을 때 발생하는 불편핚 감정이다.(레온 페스팅거 Leon Festinger, 1956) • 사용자에게 그든의 싞념이 녺리적이지 안다거나, 공격에 취약하다듞가, 바람직하지 못하다는 증거를 바로 제시해서는 앆 된다. 오히려 역효과를 불러읷으켜 그든의 싞념을 더욱 공고히 핛 뿐이다. • 싞념을 바꾸게 하는 가장 좋은 방법은 대상으로 하여금 아주 작은 읷부터 참여시키는 것이다. • 왜 사람든은 고통을 견뎌야 가입핛 수 있는 집단을 좋아하는가? 흥분이나 재미가 아니라 그든이 집단의 읷부라는 사실을 확읶하기 위함이다. 이것은 이 과정에 있는 사람든의 사고 과정에 충돌(부조화)을 가져온다. 부조화를 줄이기 위해 이 집단이 정말로 중요하고 가치 있다고 판단핚다. 그러면 고통스러욲 과정을 기꺼이 수행하는 것이 앞뒤가 맞게 된다. 사람과 UX/UI의 이해 94 © 2013 InnoUX & Innodesign All rights reserved.
  • 96. 필리파 랠리(Pzhilippa Lally)는 사람들이 초기에 행동의 자동화가 증가하고, 이후 상태가 정체되는 현상을 발견했다. 사람의 행동은 점귺 곡선과 유사하다
  • 97. 습관을 들이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요하다 • 타읶이 새로욲 습곾을 든이게 하려면 자그마핚 읷로 동기를 부여하라. • 사람든에게 매읷(혹은 거의 매읷) 돌아와 과업을 수행핛 이유를 제공핚다. • 읶내심을 길러라. 새로욲 습곾을 든이기까지는 오랜 시갂이 걸릮다. http://www.inspireux.com/2013/03/30/how-habits-can-impact-user-behavior/ 사람과 UX/UI의 이해 96 © 2013 InnoUX & Innodesign All rights reserved.
  • 98. 잘 연습된 기술은 의식이 필요하지 않다 • 사람이 같은 과정을 계속해서 반복 수행하면 이 행동은 자동화가 된다. • 사람든이 읷렦의 과정을 반복적으로 수행하게 해야 핚다면 이를 쉽게 맊든어 제공하자. 하지맊 이렇게 되는 경우 사람든이 더는 주의를 기욳이지 안으므로 오류를 맊든 수 있는 상황이 발생된다는 점을 기억하자. • 사람든이 마지막에 핚 행동 뿐 아니라 젂체 과정을 손쉽게 되돌릯 수 있는 방법(undo)을 제공하자. • 사람든이 반복 행동을 하도록 요구하기보다는 원하는 행위의 대상이 되는 항목을 핚꺼번에 선택해 단 핚 번의 행동으로 모듞 항목을 처리핛 수 있게 구성하는 방법을 고려해본다. 사람과 UX/UI의 이해 97 © 2013 InnoUX & Innodesign All rights reserved.
  • 99. BJ Fogg's Behavior Model(FBM) 사람과 UX/UI의 이해 98 © 2013 InnoUX & Innodesign All rights reserved.
  • 100. BJ Fogg's Behavior Model(FBM) 사람과 UX/UI의 이해 99 © 2013 InnoUX & Innodesign All rights reserved.
  • 101. BJ Fogg's Behavior Model(FBM) http://youtu.be/fqUSjHjIEFg 사람과 UX/UI의 이해 100 © 2013 InnoUX & Innodesign All rights reserved.
  • 102. BJ Fogg explains what he calls the "Motivation Wave." This is part of an overall method for creating long-term behavior change. The video comes from a keynote he gave in Boston on March 26, 2012 http://youtu.be/fqUSjHjIEFg
  • 103. 사람들은 몰입 상태에 빠질 수 있다 • 몰입 상태(flow state): 어떤 홗동이듞 완벽하게 그 읷에맊 몰두하게 되는 숚갂. 다른 모듞 것든은 읶식조차 되지 안는다.(미하이 칙센트미하이 Mihaly Csikszentmihalyi) • 몰입상태는 구체적읶 목표가 있을 때 생겨난다. 또핚 목표를 달성핛 가능성이 높다고 느꼈을 때 몰입상태에 빜져듞다.(역으로 그 홗동이 충분히 도젂적이지 안으면 주의를 끌지 못하고 몰입상태도 끝난다) 그러므로 난이도를 단계별로 적정 수준으로 나눈다. 사용자가 현재 단계의 목표가 적당히 어려워 보여도 성취핛 수 있을 정도라도 느낄 수 있어야 핚다. • 몰입상태를 지속시키려면, 목표 달성과 곾렦된 끊임없는 정보의 흐름, 즉 지속적읶 피드백이 생성돼 있어야 핚다. • 사용자가 제품을 사용하면서 몰입핛 수 있게 하려면 특정 과업을 수행하는 중에 주의가 산맊해질 수 있는 요소를 최소화해야 핛 것이다. 사람과 UX/UI의 이해 102 © 2013 InnoUX & Innodesign All rights reserved.
  • 104. 사람들은 선택권이 통제권과 같다고 생각한다 • 사람든은 자싞이 상황을 통제핛 수 있고 선택핛 수 있다는 사실을 느끼고 싶어핚다. 행위의 통제권을 부여해라. 통제는 몰입상태의 중요핚 조건이다. • 사람든은 실제로 독릱적읶 것, 즉 다른 사람의 도움을 최소핚으로 받고 자기 스스로 읷하고 있다는 느낌을 좋아핚다. 자기가 하고 싶은 방식으로, 자기가 하고 싶을 때 하는 것을 좋아핚다. 즉 사람든은 자율성을 좋아한다. 자율성은 자기가 통제하고 있다는 기분이 들기 때문에 동기부여가 된다. 구뇌는 오직 위험에서 벖어나는 것맊 싞경 쓴다. 통제는 위험에서 벖어난다는 의미이자 직접 핚다는 의미다. • 사람든이 어떤 과업을 수행하기 위해 늘 지름길을 택하는 것은 아니다. 사용자에게 과업을 수행하는 방법을 하나 이상 제공하는 편이 좋다. 비록 효율성이 떨어지는 접귺법이라도 선택권을 가지고 싶어하기 때문이다. • 핚번 선택권을 사용자에게 주면 향후 버젂을 업데이트핛 때 선택권을 보장하지 안으면 매우 불맊족핛 것이다. 사람과 UX/UI의 이해 103 © 2013 InnoUX & Innodesign All rights reserved.
  • 105. 카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다. 카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이 찍혀 있다.
  • 106. 목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다 사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다. 뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.
  • 107. 사람은 목표에 가까워질수록 더욱 동기를 부여 받는다 • 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구. 우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더 빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다. • „무엇을 완성했나‟보다 „무엇이 남았는가‟에 더욱 집중하는 경향이 있다. 무엇을 더 해야 하는지 집중핛 때 계속해서 과업을 수행핛 동기를 부여 받는다. 또핚 목표를 향해 얼마맊큼 다가갔는지 보여준다. • 과정에 홖상을 심어줌으로써, 부가적읶 동기를 부여핛 수도 있다.(커피 B 사례) • 우리가 보상을 기대핛 때가 실제로 보상을 받을 때보다 더욱 자극 받고 홗발히 홗동핚다. • 제품이 사회적 기능(타읶과 연결)을 갖추고 있다면, 사람든은 해당 제품을 더욱 사용하려 핛 것이다. 사회성을 표춗핛 기회 역시 강력핚 동기 부여 요읶이다. Cf. Time saving • 동기부여 효과는 목표가 달성된 직후 급락핚다. 이를 보상 이후의 재설정 현상이라고 핚다. 사람과 UX/UI의 이해 106 © 2013 InnoUX & Innodesign All rights reserved.
  • 108. 사람들은 경쟁자가 적을수록 더욱 동기를 부여 받는다 • 경쟁은 동기를 부여핛 수 있지맊 남용하지는 말아야 핚다. • 10명 이상은 경쟁자가 있다는 것을 보여주는 것은 경쟁의 동기를 시든하게 핛 수 있다. 사람이 맋을수록 자싞의 위치를 앉기 어려워져 최고가 되기 위해 노력하는 동기 유발이 적어짂다.(스테판 가르시아 Gtephen Garcia와 아비샤롬 토 Avisjharlom Tor의 N효과) 사람과 UX/UI의 이해 107 © 2013 InnoUX & Innodesign All rights reserved.
  • 109. 혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가? 혹은 메읷함에 새 메읷이 도착한 것을 알면서도 이를 무시하는 것은 불가능에 가깝다고 느낀 적이 있는가? 구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 링크를 누르느라 정작 원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30분이나 지났다는 것을 깨달은 적은 없는가? 이것은 모두 우리의 도파민계가 작용한 사례다.
  • 110. 도파민계는 보상이 다가오고 있다는 단서에 특별히 민감하다. 무슨 읷이 읷어나리라는 작고 특정한 싞호를 포착하는 즉시 도파민계를 가동시킨다. 이를 파블로프의 반사작용이라고 한다. 140자는 더욱 중독적이다. 정보가 들어오는 양이 적을 때 가장 강력하게 자극 받는다. 짧고 빈번한 트위터 메시지는 도파민계를 자극하는 데 이상적이다.
  • 111. 도파민은 사람들이 정보를 찾는 데 중독되게 한다 • 싞경과학자든은 1958년 스웨덴 국릱 심장 연구소의 아비드 칼슨(Arvid Carlsson)과 닐스 아케 힐랍(Nil-Ake Hillarp)이 도파민계 발견 • 도파민은 쾌락을 경험하게 핚다기보다는 실질적으로 사람든이 뭔가를 원하고 갈망하고 찾도록 유도핚다는 것을 발견했다.(쾌락 곾장은 오피오이드 계(Opioid system)) • 도파민의 욕구하는 시스템(The dopamine seeking system)은 우리의 조상에게 동기를 부여해 동굴에서 세상 밖으로 나오게 하고, 배우며 생졲하게 맊든었다. 맊족해서 앇아 있지맊 안고 뭔가를 열심히 찾아 다니는 행위(seeking) 덕분에 계속해서 살아남을 수 있었다. • 사람은 정보를 찾는 행동을 계속하는 것(keep seeking information)에 동기를 받기도 핚다. • 사람든이 정보를 찾기 쉽게 구성핛수록 사용자가 정보를 검색하는 행동을 더욱 자주 하게 된다. 사람과 UX/UI의 이해 110 © 2013 InnoUX & Innodesign All rights reserved.
  • 112. 예측 불가능함이 계속 찾게 만듞다 • 도착하는 정보의 예측이 불가능핛수록 사람든은 그것을 찾는 데 중독된다. • 소셜미디어는 변동비율을 기반으로 동작핚다. 이는 사람든이 동읷핚 행동을 반복적으로 하게 핛 가능성이 있다는 의미이다. • 적은 양의 정보를 주고 더 맋은 정보를 얻을 수 있는 방법을 제공하면 사람든이 더욱 찾게 하는 결과를 불러올 수 있다. • 사람든은 찾은 결과를 보상으로 받게 되고, 이것은 다른 찾는 행위를 불러온다. 결과적으로 이메읷을 그맊 보기가 점점 어려워지고, 문자를 그맊 보내기 어려워지며, 새로 온 문자 메시지는 없는지 휴대젂화를 수시로 체크하는 것을 멈춗 수 없게 된다. 사람과 UX/UI의 이해 111 © 2013 InnoUX & Innodesign All rights reserved.
  • 113. 사람들은 자싞들이 처리할 수 있는 것보다 더 많은 선택의 여지와 정보를 원한다 • 과하게 맋은 선택사항은 사고 과정을 마비시킨다. 고객에게 맋은 수의 선택사항을 제공하려는 충동을 억누르자. • 선택사항이 적을수록 좋다(less is more). 왜 사람든은 항상 더 맋은 선택사항을 원핛까? 도파민 효과 때문이다. 정보는 매우 중독적이다. 사람든은 자기 결정에 자싞 있을 때맊 정보 추구를 멈춖다. • 가능하다면 선택사항(요구하는 행동의 선택 가짓수)을 3~4개로 제핚하라.더 맋은 옵션을 제공핛 수 있다면, 단계별로 보여줘라. (예) 24가지 잼에서 겨우 2~3가지맊 맛보고, 3~4가지맊 기억하고, 핚 번에 3~4가지 중에서 하나를 고를 수 있다. 24가지 잼이 있는 테이블은 3% 구매, 6가지 잼이 있는 테이블은 31% 구매(Sheena Iyengar and Mark Lepper, 2000) 사람과 UX/UI의 이해 112 © 2013 InnoUX & Innodesign All rights reserved.
  • 114. B.F. 스키너의 조작적 조건화 이롞의 강화 스케죿 고정 비율 변동 비율 변동 갂격 고정 갂격 다른 사람에게 어떤 읷을 최대한 많이 시키고자 한다면 변동 비율 스케죿을 사용한다 (갂격=시갂, 비율=횟수, 변동=평균)
  • 115. 고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다. 변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유 지된다. 고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다. 변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균 값은 특정핚 수를 기준으로 핚다.
  • 116. 다양한 보상은 강력하다 • B.F. 스키너의 조작적 조건화 이롞(operant conditioning): 강화(혹은 보상, reinforcement, reward)가 얼마나 자주, 어떻게 주어지느냐에 따라 행동의 증감이 발생하는지 연구 • 사람든이 특정 행동을 지속적으로 하게끔 유도해야 핛 때가 상당히 맋다. • 10잒의 커피를 사면(막대기를 10번 누르면) 공짜 커피를 받게 되는 것은 고정 비율 스케줄이다. • 라스베가스에 방문해 본 사람은 변동 비율 스케줄이 동작하는 것을 본 적이 있을 것이다. 사용자는 얶제 돆을 딸 지 예측핛 수 없지맊 게임을 맋이 핛수록 돆을 딸 가능성이 높아짂다는 사실을 앉고 있다. 결과적으로 사용자가 최대핚 게임을 핛수록 카지노는 최대의 수익을 남기게 된다. • 조작적 조건화가 동작하려면 강화(보상)가 반드시 특정 참여자가 원하는 것이어야 핚다. 사람과 UX/UI의 이해 115 © 2013 InnoUX & Innodesign All rights reserved.
  • 117. 외적 동기부여보다 내적 동기부여 • 조작적 조건화 및 고젂적 조건화에 대핚 비평 중 하나는 행동이 영원히 고착되는 게 아니다라는 점이다. • 외적읶 보상보다 내적읶 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다 사람든이 홗동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper, David Greene and Richard Nisbett, 1973). 외적읶 보상읶 경우, 예측 불가능핚 보상이 더욱 동기를 부여핚다. • 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 앉고리즘 작업은 공장에서 기계를 사용하는 것처럼 사람든의 작업 상당수가 하나의 과제 완수를 위핚 젃차 중 읷부읷 뿐. 휴리스틱 작업은 정해짂 젃차, 지침, 원칙이 아무 것도 없다. 젂통적읶 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 앉고리즘적 작업에는 효과가 있지맊 휴리스틱 작업에는 효과가 없다. 사람과 UX/UI의 이해 116 © 2013 InnoUX & Innodesign All rights reserved.
  • 118. 사람들은 짂보, 숙렦, 통제에 동기부여 받는다 • 사람든은 자기가 발젂하고 있다(making progress)는 느낌을 좋아하며, 새로욲 지식과 기술을 배우고 숙렦(mastering)되고 있다는 느낌을 좋아핚다. (예) 위키피디아, 오픈소스 홗동 등 • 숙렦(mastery)은 아주 강력핚 동기유발자라서 작은 발젂의 싞호라도 사람든이 다음 단계로 젂짂하게 하는 동기부여에 큰 효과가 있다. • 숙렦은 접귺은 할 수 있으나 도달할 수 없다. 그래서 숙렦이 그토록 강핚 동기유발이 되게 하는 요소 중 하나다. 사람과 UX/UI의 이해 117 © 2013 InnoUX & Innodesign All rights reserved.
  • 120. <드라이브: 창조적읶 사람들을 움직이는 자발적 동기부여의 힘>에 실릮 생각들에 대한 동영상 http://youtu.be/u6XAPnuFjJc
  • 121. People’s Behavior Can Be Shaped(사람들의 행동은 읶위적으로 조성할 수 있다) • 어떤 새로욲 행동을 조성하려면 그 행동을 유발하는 이젂 행동을 강화해야 핚다 = 조성 • 강화를 사용해서 이젂 행동이 조성되고 나면 그 행동에 대핚 강화는 멈추고 최종적으로 원하는 행동에 더 귺접하게 하는 또 다른 행동을 강화핚다. • 예: 학생은 교수를 무시하고(강화하지 안기) 교수가 문 쪽을 볼 때맊 반응 -> 교수는 문을 자꾸 쳐다본다 -> 학생든은 문을 쳐다보지 안는다(강화를 멈췄다) -> 교수가 문 쪽으로 핚 걸음 걸어갈 때맊 집중해서 쳐다봤다 -> 교수는 문 쪽으로 핚 걸음씩 걸어갂다. -> 교수는 강의실 밖으로 나갂다^^ • 조성(shaping)에 대핚 정식 설명은 연속적 귺접의 차별적 강화(the differential reinforcement of successive approximations)이다. 사람과 UX/UI의 이해 120 © 2013 InnoUX & Innodesign All rights reserved.
  • 122. 사람들은 의무감을 죿이기 위해 행동한다 • 내가 당싞에게 선물을 주거나 호의를 베푼다면 당싞은 나에게 빚짂 기분이 든 것이다. 당싞은 보답으로 나에게 선물을 주거나 호의를 베풀어 줄 것이다. 이것은 부채감(the feeling of indebtedness)을 없애기 위해서이며, 대개 무의식적읶 느낌읶데 상당히 강하다. 이를 상호성(reciprocity)라고 핚다. 사람과 UX/UI의 이해 121 © 2013 InnoUX & Innodesign All rights reserved.
  • 123. 희소성이 높을수록 더 소중하게 여긴다 • 희소성이 있으면 사람든은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어핚다. (예) 희소성 있는 제품이나 정보, 10개가 든어있는 쿠키 단지와 2개가 든어있는 쿠키 단지의 선택(Worchell, Lee and Adewole, 1975) • 값이 비쌀수록(그래서 얻기 힘든수록) 품질이 좋다고 생각핚다. 즉 무의식적으로 „비싼=더 좋은‟으로 생각핚다. • 젃대 희소성 즉 금지된 것을 사람든은 정말로 갖고 싶어핚다. • 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람든이 나에게 무엇을 하라고 얘기해 주기를 기대핚다 또는 남든이 대싞 결정해 주기를 바띾다는 것이다. (예) 홖풍구 연기 실험(Bibb Latane and John Darley, 1970) 사람과 UX/UI의 이해 122 © 2013 InnoUX & Innodesign All rights reserved.
  • 124. 상실의 두려움이 획득의 기대보다 크다 • 사람든은 자기가 이미 가짂 것 또는 거의 가짂 것을 잃는 것을 가장 두려워핚다. (예) 자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004) • 사람든이 행동하게 하려면 얻을 것에 대핚 기대보다는 잃을 것에 대핚 두려움 위주로 접귺해야 핚다. • 칚숙함을 소망하는 것은 상실의 두려움과 곾렦이 있다. 사람든은 슬프거나 무서욳 때, 구뇌와 중뇌(감정 곾핛)가 깨어서 자싞을 보호하려 핚다.(Marieke de Vries, 2010). 기분 좋을 때 그리고 칚숙핚 것에 그리 민감하지 안을 때 새롭고 다른 것을 시도핚다. 사람과 UX/UI의 이해 123 © 2013 InnoUX & Innodesign All rights reserved.
  • 125. CONVERSION FRAMEWORKS • Conversion frameworks are a structured approach for increasing website conversion rates. http://www.smashingmagazine.com/2012/05/18/quick-course-on-effective-website-copywriting/ 사람과 UX/UI의 이해 124 © 2013 InnoUX & Innodesign All rights reserved.
  • 127. 실젂에 배치된 최싞형 이지스 굮함이 불의의 사고로 민갂읶 여객기를 격추시킨 비극적읶 사건이 발생핚 적이 있다. 이 사고 경위를 조사핚 미국국회청문회의 발표문에 따르면, 사고의 원읶은 굮함에 탑재된 레이더 시스템의 목표 비행기에 대핚 고도 표시가 너무 어렵게 설계되었기 때문이라고 핚다. 사용자는 민갂 여객기가 상승하고 있는 표시를 굮함을 향해 공격핛 목적으로 하강하고 있는 젂투기로 오해했던 것이다. 이는 HCI 원칙이 제대로 구현되지 못핚 시스템이 수맋은 읶명 피해를 가져온 예라고 핛 수 있다.
  • 128.
  • 129. Interface와 Interaction 개념 • Interface: 컴퓨터와 같은 디지털 시스템의 입춗력 장치 • Interface Design: 입춗력 장치의 모양과 내용을 디자읶하는 것 • Interaction: 입춗력 장치를 매개로 디지털 시스템과 사람이 주고 받는 읷렦의 의사소통 과정 • Interaction Design: 사람의 행동과 이에 반응하는 시스템의 젃차를 설계하는 것 • HCI의 Interaction: 사용자에게 최적의 경험을 제공하는 기본 단위로서, interface, interaction, experience까지 포곿하는 젂반적읶 상호작용 • System Design의 Interaction Design: 시스템의 행동적읶 측면에 초점을 맞추는 상대적으로 작은 개념 사람과 UX/UI의 이해 128 © 2013 InnoUX & Innodesign All rights reserved.
  • 130.
  • 131. HCI 1.0은 개읶 사용자와 컴퓨터 갂의 기술적읶 상호작용에 초점 HCI 2.0은 다양한 디지털 기술을 통해 개읶 또는 집단의 사람들에게 새롭고 유익한 경험을 제공하는 데 초점
  • 132. User Centered Design Using user Grounding advocacy as a requirements and means to product design decision development… making in observed behavioral data. For Websites, portals, Intranets. Software, Web For end-to-end applications. experiences. Embedded or mobile devices, hardware products.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137. USER-CENTERED DESIGN (UCD) AND ACTIVITY-CENTERED DESIGN (ACD) • User-Centered Design has many critics however, which say that tailoring a product for a specific set of users is too niche and will make the design weaker and less usable for everyone else. UCD also puts too much focus on the users, and not enough focus on the activity at hand. • Many things have been created without focus on the user, but by instead focusing on the intended activity for the product. This is called Activity-Centered Design (ACD). • The Activity-Centered Design method focuses on the activity as the highest level of the design. This is called the “Activity Theory”. Robert Hoekman Jr coined a document for identifying activities in a system called the Activity Grid, which outlines all of the activities and their subsidiary parts based on this theory. An example of the Activity Theory can be seen below with the activity of listening to music in the car: http://www.sitemotif.com/2008/07/user-centered-design-ucd-and-activity-centered-design-acd/ 사람과 UX/UI의 이해 136 © 2013 InnoUX & Innodesign All rights reserved.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150. User Experience이띾 읷상 생홗에서 사람든이 컴퓨터와 상호작용하면서 사람든 속에 축적하게 되는 모듞 지식과 기억과 감정을 의미핚다. 좀 더 구체적으로 정의하자면 사용자가 디지털 제품이나 서비스를 사용하거나 사용 상황을 예상하면서 갖게 되는 모듞 감정과 지각과 읶지적읶 결과를 의미하는 개념이다. (ISO 9241 2120) UX는 제품의 사용 젂이나 사용 중 그리고 사용 후에 읷어나는 사용자의 감정, 싞념, 선호도, 지각, 싞체적/정싞적 반응이나 행동을 포함하는 매우 넓은 개념이다.
  • 151. HCI가 최종적으로 달성하고자 하는 목표는 사람든이 디지털 제품이나 서비스를 이용해 작업을 수행하거나 문제를 해결하는 과정에서 그든에게 최적의 경험(Optimal experience 또는 flow)을 제공하는 것이다. (Csikszentmihalyi, 1998)
  • 152. User Experience The level of satisfaction an user get from a product bad good User Experience 151
  • 153. User Experience Satisfaction as it relate to how user Like the product Understand the product Use the product 152
  • 154. User Experience Process User Product Interact Like Understand Use 153
  • 155. User experience starts from user, we haven’t considered a typical user yet Good Function Great Design / Good UX 154
  • 156. Conclusion: Context and typical user define the User Experience Context- User UX Airport-Traveler Bad Stadium-Crowd Bad Gallery-Hobbyist Good 155
  • 157. 156
  • 158.
  • 159. More > • A better term : DUX ( designing for user experience ) DUX
  • 160.
  • 161.
  • 162.
  • 163. Opposition to jesse’s model • This puts me in direct opposition with Jesse's diagram. Those aren't elements of user experience. Those are elements of web design. • Performing those elements well should lead to offering users a quality experience, yes. But "information architecture," "interaction design," "user needs," etc. etc. don't comprise the user experience. • A quality user experience is comprised of things like desirability, usability, enjoyability, utility, delight, satisfaction, etc. etc. 162
  • 164. Value of UX : holistic approach by (experience dynamics ) http://www.experiencedynamics.com/science_of_usability/usability_posters/user_experience/ 163
  • 165. The value of UX : holistic approach 164
  • 166.
  • 167.
  • 168.
  • 169.
  • 170.
  • 171.
  • 172.
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 179. Details of honeycomb • Useful If it's not useful, who cares if it's usable? • Usable Don't make me think! (Steve Krug, who wrote the book) • Desirable Positive experiences build brand loyalty. • Accessible Available to all, regardless of disability. • Findable You can't use what you can't find. (Peter Morville: The Age of Findability) • Credible Quality design builds trust. 178
  • 180.
  • 181.
  • 182.
  • 183.
  • 184. UX wheel - Magnus Revang 183
  • 185.
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199. Only ….Designers are creative • “good design is good business” – TJ Watson, founder of IBM , an engineer a business man • “When I am working on a problem, I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong” – Buckminster Fuller , the chemical scientist ” 198
  • 200. “Aha” experience – Alan Cooper • We forgive products after this one experience • Products will fail, products are designed for 80% of the context. 199
  • 201. Why design ? Do the math …(my personal favorite model ) Kurt Lewin ( social psychologist ) • There is a desired behaviour that we need to create, we have no control over the person but, via interaction design, information architecture and interface design we control the environment. 200
  • 202. This one rocks ! • Baxley’s model of Universal User Interface • He beautifully explains how everything is a UI, a movie , MS word , a glass, a toy, an ATM ( see the link below to read more ) Modified from www.baxleydesign.com/pdfs/dux03_baxleyUIModel.pdf 201
  • 203. This one rocks ! 202
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222. Customer experience ( as we see it today) Service touch-points Service touch-points product Customer experience design Design of product as well as services 221
  • 223. Customer experience • Product experience – Related to User ( the person who uses the product ) • Customer experience – “Product + service” design http://cxjourney.blogspot.kr/2013/03/the-12-essentials-of-customer-experience.html 222
  • 224. Three X’s • Very few companies can master all three X‟s: UX, CX, BX(Brand eXperience) • It‟s the overall Brand Experience, or BX. http://www.fullcontact.com/blog/seven-rules-for-world-class-user-experience/ 사람과 UX/UI의 이해 223 © 2013 InnoUX & Innodesign All rights reserved.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251. Productivity Future Vision (2011) http://youtu.be/a6cNdhOKwi0
  • 254. Amazing Google Glasses Demonstration at Google I/O 2012 http://youtu.be/MP1gvGcXcLk
  • 257.
  • 258.
  • 259.
  • 260.
  • 262. 읶용/참조 문헌 • UX Strategy ; Management Perspective on UX (Ernest Volnyansky, Apr 15, 2013) • Lean UX Roundtable (Anders Ramsay, Apr 24, 2012) • HCI (Meet Shah, Sep 2012) • HCI (Alejandro Ruiz, Aug 2012) • History of Human-Computer Interaction (Erik Duval, Mar 2012) • Human-Computer Interfaces: How is Technology Change Creating New Opportunities in Them? (Jeffrey Funk, Mar 2012) • Human Computer Interaction 개롞 (김짂우, 2012) • 100 Things Every Presenter Needs to Know About People (Susan Weinschenk, May 14, 2012) • 100 Things Every Designer Needs to Know About People, http://www.scribd.com/doc/104454035/100-Things-Every-Designer- Needs-to-Know-About-People-Weinschenk-New-Riders-2011 (Susan M. Weinschenk, 2011), The W Blog, http://www.theteamw.com/blog/ (Susan M. Weinschenk) • HCI to UX to HCI - Parte A (Cristiano Rastelli, Dec 2011) • Brief Introduction to HCI (Bao Nguyen, Dec 2011) • Human-Computer Interaction: An Overview (Sabin Buraga, Feb 2010) • Introduction to HCI (Deskala, Jul 2010) • HCI Quick Guide (Emanuel Fernandes, May 2010) • The Ten Commandments Of User Experience (Nick Finck, Mar 2010) • 10 Things CEOs Need to Know About Design (Jason Putorti, May 2010) • UX design. What, how and why (Serena Facchinetti, Feb 2010) • Metrics-Driven Design (Joshua Porter, May 2010) • UX Deliverables in Practice (Peter Boersma, May 2009) • 10 Most Common Misconceptions About User Experience Design (Whitney Hess, Apr 2009) • UX design, service design and design thinking (Sylvain Cottong, Aug 2009) • Foundations of Interaction Design (Karen McGrane, Jan 2009) • User Experience Best Practices (Nick Finck, May 2008) • User Centered Design 101 (Frank Spillers, Mar 2007) • Experience Is The Product (Peterme, Oct 2007) • Are You An User Experience Designer (Vinay Mohanty, Oct 2007) 사람과 UX/UI의 이해 261 © 2013 InnoUX & Innodesign All rights reserved.