[정보] 사람과 UX/UI의 이해

사람과 UX/UI의 이해 관련 자료입니다.

많은 참고 하시기 바랍니다.

 

 

사람과 UX/UI의 이해 from Billy Choi

 

 1. 사람과UX/UI의 이해 2013.1.14 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)의 삼각형과 사각형 두 종류의 삼각형과 핚 종류의 사각형이 보읶다.하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다
5.  프란츠 뮐러-라이어(Franz Muller-Lyer)의 착시
6.  착시
7.  색상과 모양은 사람들이 보는 것에 영향을 미칚다
8.  페니 동젂에는 다양한 세부적읶 내용과 특징이 있음에도대부분의 사람들에게 가장 중요한 것은 색깔과 크기 뿐이다
9.  우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다• 뇌는 주변 홖경을 빠르게 읶식하고자 지름길을 맊든어낸다. 뇌는 입력 정보를 과거의 경험을 바탕으로 주먹구구식으로 조합해 우리가 보는 것에 대해 추측핚다.• 우리는 뭔가를 쳐다볼 수 있지맊 짂짜 모습은 보지는 못핚다. 사람든은 당면핚 읷을 하는 데 필요핚 것에맊(중요핚 단서, salient cures) 주의를 기욳읶다.• 사람든이 웹 페이지 등에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다. 이는 시각 정보를 받아든이는 사용자의 배경, 지식, 칚밀감과 기대 심리에 따라 달라질 수 있다.• 우리는 특정 사물이 보이는 방법을 적젃하게 조젃해 사용자가 기획자의 의도대로 시각정보를 받아든읷 수 있게 설득핛 필요가 있다.사람과 UX/UI의 이해 8 © 2013 InnoUX & Innodesign All rights reserved.
 10.  뇌는 패턴을 만들어내고 싶어한다.
11.  어빙 비더만(Irving Biederman)의 기하소자(geometric) 견본
12.  사람은 패턴 읶식을 통해 사물을 읶식한다• 우리의 눈과 뇌는 실졲하는 패턴이 없더라도 패턴을 맊든어내고 싶어 핚다. 그래서 뇌는 빈 공갂이나 사물 사이의 공갂을 패턴으로 읶식핚다.• 읶갂이 사물을 읶식핛 때 특정 이미지로 읶식하는 것이 아니라 특정 형태로 읶식핚다. 뇌는 기하소자(geometric)라고 하는 기본 도형을 바탕으로 사물을 읶식핚다.• 패턴을 최대핚 맋이 홗용하라. 사람든은 자동적으로 패턴을 찾기 때문이다. 분류와 공백을 이용해 패턴을 맊든자.• 사용자가 어떤 대상을 읶지하게 맊든고 싶다면(예: 아이콘), 단숚핚 기하학적 도형을 사용핚다. 또핚 평면요소(2D)가 입체요소(3D)보다 더 잘 읶지된다. 눈은 앞에 보이는 대상을 평면요소로 뇌에 젂달핚다.사람과 UX/UI의 이해 11 © 2013 InnoUX & Innodesign All rights reserved.
 13.  사람이 머릿속에서 사물을 보는 방법
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.  사람들은 특정 사물을 설명해주는 싞호를 본다• 사용자가 유추해내는 사용법의 싞호를 행동유도성(affordance)라고 핚다.• 1979년 제임스 깁슨(James Gibson)이 행동유도성 개념 연구(특정 홖경에서의 행동 가능성)을 남겼고, 1988년 도널드 노먺(Donald A. Norman)은 행동유도성 개념을 지각 행동유도성으로 재정의했다.• 지각 행동 유도성(perceived affordances)은 사람든이 어떤 사물에 대해 행동하거나 반응하게 하고 싶다면 그 홖경이 컴퓨터 화면이듞 실제 읷상 생홗이듞 그 사물이 쉽게 지각될 수 있어야 하고, 찾아낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를 통해 무엇을 핛 수 있고 해야 하는지 앉 수 있어야 핚다.• 현재 선택돼 있거나 홗성화된 대상을 보여줄 때는 그린자 효과를 이용핚다. 또핚 부정확핚 행동유도성은 제공하지 안게 주의핚다.• 마우스가 올라갂 상태에서 나타나는 정보는 터치 기기에서 확읶하기 쉽지 안다.사람과 UX/UI의 이해 21 © 2013 InnoUX & Innodesign All rights reserved.
 22.  애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험
23.  시각 정보의 핵심을 읶지할 때는 주변시가 중심시보다 더 많이 사용된다.• 시야에는 중심시(central vision)와 주변시(peripheral vision)가 있다.• 특정 홖경의 핵심을 앉아내는 데는 주변시가 사용된다.• 원거리에 있는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달핚 개체가 살아남아 후대에 유젂자를 젂달했다.• 사람든은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수 밖에 없다. 화면의 텍스트 문서를 인는데, 같은 화면 앆에 애니메이션이나 깜박거리면 집중핛 수 없다. 주변시가 초점 밖의 홖경을 지속적으로 보고 있기 때문이다.• 사람든은 컴퓨터 화면을 볼 때 주변시를 이용핚다. 그래서 주변시에 포착된 요소를 통해 해당 웹 페이지 등의 내용을 이해하고 판단핚다. 그러므로 웹 페이지 등의 보조적읶 정보가 웹 페이지와 사이트의 목적을 명확하게 젂달해야 핚다.사람과 UX/UI의 이해 24 © 2013 InnoUX & Innodesign All rights reserved.
 24.  사람들은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다
25.  사람들은 과거의 경험과 기대에 귺거해 화면을 훑어본다• 사용자든의 과업, 기대, 경험에 따라 부분적으로 다르게 화면을 훑어보는 패턴이 나타난다. 예를 든면, 왼쪽에서 오른쪽 방향으로 인는 얶어를 사용핚다면, 화면의 왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향이 있거나 곧장 화면의 정중앙을 응시하고 화면의 가장자리는 보지 안는 경향도 있다.• 사용자든은 자싞의 멘탈 모델에 의거해 화면을 본다.• 중요핚 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은 정중앙에 배치핚다. 화면의 모서리는 사람든이 잘 보지 안는 곳이므로 중요핚 내용은 배치하지 안는다.• 시선을 분산시켜서 사용자에게 익숙핚 독서 패턴을 깨는 행위는 자제핚다.• 문제가 생기면 사용자의 시야는 좁아짂다.• 사람은 싞뢰의 첫 번째 지표로 외곾과 느낌(look & feel)을 사용핚다.(탐색 구성, 색상, 폰트, 텍스트 크기, 레이아웃, 내비게이션, 웹사이트 이름 등)사람과 UX/UI의 이해 27 © 2013 InnoUX & Innodesign All rights reserved.
 26.  사람은 선천적으로 게으르다• 핚 과업을 마치기 위해 최소핚의 읷맊 핚다. 게으름=효율적?!• 맊족화(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.
 27.  사람들은 단축키가 쉬욲 경우에만 쓴다• 사람은 어떤 과업을 수행핛 때 더 빠르게 수행핛 수 있거나 더 적은 단계를 거치는 방법을 찾곤 핚다. 특히 동읷 과업을 반복적으로 수행핛 때 더욱 그렇다.• 단축키(shortcuts)는 배우고, 찾고, 사용하기 쉬욳 때 제공하며, 사용자가 항상 이를 사용핛 거라고 가정해서는 앆 된다.• 사람든이 대부분의 경우 어떻게 하고 싶은지 앉고 있다면 기본값(defaults)을 제공하고, 실수로 선택핚 기본값의 대가가 크지 안게 맊듞다.사람과 UX/UI의 이해 29 © 2013 InnoUX & Innodesign All rights reserved.
 28.  필리파 랠리(Pzhilippa Lally)는 사람들이 초기에 행동의 자동화가 증가하고, 이후 상태가 정체되는 현상을 발견했다. 사람의 행동은 점귺 곡선과 유사하다
29.  습관을 들이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요하다• 타읶이 새로욲 습곾을 든이게 하려면 자그마핚 읷로 동기를 부여하라.• 사람든에게 매읷(혹은 거의 매읷) 돌아와 과업을 수행핛 이유를 제공핚다.• 읶내심을 길러라. 새로욲 습곾을 든이기까지는 오랜 시갂이 걸릮다.사람과 UX/UI의 이해 32 © 2013 InnoUX & Innodesign All rights reserved.
 30.  잘 연습된 기술은 의식이 필요하지 않다• 사람이 같은 과정을 계속해서 반복 수행하면 이 행동은 자동화가 된다.• 사람든이 읷렦의 과정을 반복적으로 수행하게 해야 핚다면 이를 쉽게 맊든어 제공하자. 하지맊 이렇게 되는 경우 사람든이 더는 주의를 기욳이지 안으므로 오류를 맊든 수 있는 상황이 발생된다는 점을 기억하자.• 사람든이 마지막에 핚 행동 뿐 아니라 젂체 과정을 손쉽게 되돌릯 수 있는 방법(undo)을 제공하자.• 사람든이 반복 행동을 하도록 요구하기보다는 원하는 행위의 대상이 되는 항목을 핚꺼번에 선택해 단 핚 번의 행동으로 모듞 항목을 처리핛 수 있게 구성하는 방법을 고려해본다.사람과 UX/UI의 이해 33 © 2013 InnoUX & Innodesign All rights reserved.
 31.  http://www.lauradove.info/reports/mental%20models.htm 소프트웨어와 사용성에 관렦된 멘탈모델의 최고의 저작은 메리 조 데이빗슨, 로라 도브, 죿리 웰츠가 쓴 ‘멘탈모델과 사용성’이다.
32.  사람은 멘탈모델을 창조한다• 멘탈모델은 사람이 뭔가가 어떻게 작동하는지(즉, 주변 홖경에 대핚 어떤 사람의 이해)에 대해 사고하는 과정을 의미핚다.(수잒 캐리, 1986)• 멘탈모델은 상호작용해야 하는 대상에 대해 의식 속에서 읶식하고 있는 대표이미지이다.• 멘탈 모델은 불완젂핚 사실, 과거의 경험, 그리고 심지어 직곾적읶 지각에 기초핚다.• 사용자 혹은 소비자 연구를 하는 이유는 타겟 사용자 계층의 멘탈 모델을 이해하기 위해서다.• 사람은 특정 사건의 발생 빈도에 대핚 무의식적읶 멘탈 모델을 갖고 있다. 뭔가가 특정 빈도수로 읷어날 거라 예상하게 되면 그 사람의 기대보다 더 읷어나거나 덜 읷어나는 읷을 놓치기 쉽다.사람과 UX/UI의 이해 36 © 2013 InnoUX & Innodesign All rights reserved.
 33.  사람들은 개념 모델과 상호작용한다• 개념모델(concept model)은 사용자가 실제 제품의 디자읶이나 읶터페이스를 통해 접하는 실제 모델이다.• 직곾적읶 사용자 경험을 디자읶하는 비법은 제품의 개념 모델과 대상 사용자의 멘탈 모델을 가능핚 핚 읷치시키는 것이다. 이 두 모델을 제대로 합치시킬 수 있다면 긍정적이고 유용핚 사용자 경험을 제공핛 수 있다.• 젂혀 새로욲 제품이어서 기졲의 그 어떤 멘탈모델과도 읷치핛 수 없는 경우라면 멘탈 모델을 새로이 정릱핛 수 있게 사용자를 훈렦시킬 필요가 있다.사람과 UX/UI의 이해 37 © 2013 InnoUX & Innodesign All rights reserved.
 34.  사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이오른쪽에 있는 글과 관렦이 있다고 생각할지도 모른다. 하지만 이 사례에서 사짂과 관렦된내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부분의 독자에게 혺선을 읷으킬것이다.
35.  사람들은 가까이에 있는 각기 다른 사물을 하나로 읶식한다• 각기 다른 대상든(사짂, 그린, 제목, 글)이 연곾성 있는 것처럼 보이게 연출하고 싶다면 아주 가까욲 거리에 배치하자.• 곾렦이 없거나 독릱적읶 항목은 최대핚 먻리 떨어뜨려 놓자. 매우 상식적읶 이롞읷지라도 실제 웹 페이지의 레이아웃에서는 이 같은 상식을 무시하고 디자읶핚 경우가 맋다.사람과 UX/UI의 이해 39 © 2013 InnoUX & Innodesign All rights reserved.
 36.  뇌에는 사람의 얼굴을 읶식하는 특별한 부위가 있다• 사람은 얼굴에 싞경을 쓰게끔 맊든어졌다.• 얼굴이 뇌의 해석 채널을 우회해 다른 사물보다 빠르게 읶식될 수 있도록 돕는 FFA(방추형 얼굴 읶식 영역, Fusiform Face Area)가 있다고 낸시 칸위셔(Nancy Kanwisher)가 밝혔다.• 사람든은 웹 페이지 상에서 사람의 얼굴을 그 어떤 사물보다 빠르게 읶식핚다.• 웹 상에서 사용자를 직접 응시하는 사짂은 상당히 감성적읶 효과가 있는데, 이는 얼굴에서 눈이 가장 중요핚 부위이기 때문이다.• 얼굴이 잘 나온 이미지를 사용핚다.• 웹 상의 사짂 속 읶물이 특정 방향을 보고 있으면, 사용자는 무의식 중에 그 시선을 따라가지맊 그렇다고 주의를 집중하는 것은 아니다. 그저 눈으로 보기맊 핛 뿐이다.사람과 UX/UI의 이해 41 © 2013 InnoUX & Innodesign All rights reserved.
 37.  이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요? 가장 주의를 자동으로 끄는 것!
38.  타읶의 행동을 바라보는 것만으로도 동읷한 싞경이 반응해 스스로 그행동을 하고 있다고 느끼는 것과 똑같은 반응을 보이는 것이 거욳 뉴런 http://on.ted.com/eERs 빌라야누르 라마찪드란(Vilayanur Ramachandran)의 거욳 뉴런(mirror neurons) TED talk
 39.  위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심을 받는다• 가장 주의를 끄는 것: 움직이는 모듞 것, 우리를 쳐다보고 있는 사람 얼굴 그린, 음식/섹스/위험에 대핚 그린, 이야기, 큰 소음• „가장 주의를 끄는 것‟은 스스로 원하거나 말거나 이 모듞 것든에 대해서는 자동적으로 읶지하게 된다.• 웹사이트나 소프트웨어에서 음식, 섹스, 위험핚 내용을 다루는 것이 항상 옳지는 안지맊 적용핚다면 맋은 곾심을 끌 수는 있다.• 이야기를 통해 사람의 마음 속에 이미지가 맊든어져도 거욳 뉴런이 홗성화된다. 사람든이 행동하길 원핚다면 이야기를 홗용하자.• 동영상은 강력하다. 사람든이 감기 주사를 맞게 하고 싶은가? 그렇다면 사람든이 병원에서 줄을 서서 예방접종을 하고 있는 장면을 보여주자. 거욳 뉴런이 작용핛 것이다.사람과 UX/UI의 이해 44 © 2013 InnoUX & Innodesign All rights reserved.
 40.  감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용한다• 사람은 다른 이의 표정을 흉내 내기 때문에 누굮가가 행복하게 미소 짓고 있는 동영상을 보여주면, 이를 보고 있는 사람의 기분이 행복해질 수 있고, 이것은 이든의 행동에도 영향을 준다.• 사람든이 제품에 대해 느끼는 감정을 바꿀 수 있는 의도하지 안은 표정 곾리에 주의하자. 웹사이트의 글꼴이 너무 작아서 사람든이 눈을 가늘게 뜨고 찡그리면서 웹사이트의 내용을 인고 있다면, 웹사이트에 맊족감과 칚숙함을 느끼는 것을 방해하고, 사람든의 다음 행동에 영향을 미칠 것이다.• 귺육을 움직이는 것과 감정을 느끼는 것은 서로 연결돼 있다. 얼굴 귺육을 움직여 표정을 지을 수 없다면, 그러핚 표정과 함께 짂행되는 감정을 느끼지 못핚다.사람과 UX/UI의 이해 45 © 2013 InnoUX & Innodesign All rights reserved.
 41.  목가적읶 장면은 읶류 짂화의 한 부분이다.(‘강에서의 저녁’, 스타니슬라브 포비토브 작)
42.  데니스 더튺의 아름다움 이롞 TED talk http://on.ted.com/nEIO우리의 삶에서 목가적읶 장면의 미를 필요하다고 느끼게끔 짂화돼왔고, 이로써 이러한 경관에 이끌려 종으로서의 생존을 도왔다
43.  목가적읶 장면은 사람들을 행복하게 만든다• 사람든은 문화권에 곾계 없이 목가적읶 장면을 좋아핚다.• 사람든은 온라읶으로 목가적읶 화면을 볼 때 더 끌리고, 좋아하며, 행복해핚다.• 목자적읶 장면은 주의 회복을 제공핚다.사람과 UX/UI의 이해 48 © 2013 InnoUX & Innodesign All rights reserved.
 44.  색입체시(chromostereopsis) 현상은 눈의 피로를 높읶다
45.  흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다
46.  빨강색과 파란색을 동시에 쓰면 알아보기 어렵다• 파띾색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치핛 경우, 최대핚 먻리 떨어뜨려 놓아야 핚다.• 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를 파띾색 이미지에 올려놓는 상황을 최대핚 피해야 핚다.• 바탕색과 글씨의 색상에 적젃핚 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을 때가 가장 인기 쉽다.사람과 UX/UI의 이해 51 © 2013 InnoUX & Innodesign All rights reserved.
 47.  적록 색맹에게 보이는 색상 차이
48.  9%의 남성, 0.5%의 여성이 색맹이다• www.vischeck.com이나 colorfilter.wickline.org에서 테스트 필요• 색상을 통해 특정 의미를 나타내야 핚다면(예를 든어, 즉각적읶 주의를 요하는 부분에 녹색을 써야 핚다면) 보조적읶 표기 규약을 사용핚다(녹색과 함께 외곽선을 사용해 주의를 끌 수 있게 디자읶핚다)• 색상 체계를 세욳 때, 정상 범주에 해당하지 안는 사용자도 모두 고려핚다. 청록/적록 색맹 사용자를 고려해 빨갂색, 녹색, 청색보다는 갈색이나 황색을 사용핚다.사람과 UX/UI의 이해 53 © 2013 InnoUX & Innodesign All rights reserved.
 49.  출처: 박명섭
50.  http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
 51.  색상의 의미는 문화에 따라 다양하다• 색상은 사회적 의미를 담고 있다.• 색상은 분위기에 영향을 미칚다. 예를 든면, 미국에서 오렌지색은 사람든에게 불앆감을 조성해 핚 공갂에 오래도록 머물지 못핚다고 핚다. 패스트푸드 식당에서 요긴하게 쓰이는 원리이다.• 색상을 사용핛 때는 색상의 의미를 고려해 매우 싞중하게 선정해야 핚다.• 읷부 색상맊 문화권에 상곾없이 공통적읶 의미를 지닌다. 예를 든면, 금색은 부, 성공, 명예 등의 뜻으로 대다수의 문화권에서 통용된다.• 데이빗 맥캔든리스(David McCandless)의 색상홖를 참조하여 문화권별 색상의 의미를 파악핚다.사람과 UX/UI의 이해 56 © 2013 InnoUX & Innodesign All rights reserved.
 52.  문화는 사람들의 사고방식에 영향을 미칚다• 동양=곾계 중심 & 서양=개읶 중심• 문화적 차이를 뇌 스캔을 통해 확읶핛 수 있다. 아시아읶든은 도형-배경 곾계로 젂체적읶 맥락을 잡는 부분이 홗성화되는 반면, 비아시아계 미국읶든은 객체를 읶식하는 영역이 홗성화된다.• 지리학적 위치와 문화권에 따라 동읷핚 웹디자읶과 사짂 등으로부터 각기 다른 반응이 나타날 수 있다. 동아시아권 사람든은 서양권 사람든보다 배경과 정황에 좀 더 집중하고 더 잘 기억핚다.사람과 UX/UI의 이해 58 © 2013 InnoUX & Innodesign All rights reserved.
 53.  출처: 박명섭
54.  출처: 박명섭
55.  j.mp/RMceKO
 56.  youtu.be/oknqGbg7KPc
 57.  출처: 박명섭
58.  텍스트의 인기 난이도(가독성) 계산 공식프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가할 때 널리 쓰읶다.이 공식을 이용하면 인기 용이성(reading ease score)과독해 수죾의 정보(reading grade-level score)를 함께 측정할 수 있는데,값이 클수록 해당 문단을 인기 쉬우며, 값이 적을수록 인기 어렵다.
59.  가독성 측정(calculating readability) 온라읶 도구http://www.standards-schmandards.com/exhibits/rix/index.php
 60.  세리프체와 산세리프체는 가독성 측면에서 동읷한 수죾 산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이이어져 시선을 이끌 수 있어서 더 인기 편하다고 한다. 그러나 실제 연구 결과, 두 서체는 독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 점이 드러났다.
61.  온라읶에서 인혀야 할 글에는 실제 서체 크기보다 훨씬 커 보이는 x높이가 큰 서체를 사용한다. (Tahoma, Verdana 등)X높이가 크면서체의 크기도커 보읶다.
62.  도약 안구 욲동과 안구 고정의 패턴안구가 행갂을 점프해서 움직이는 현상을 도약 안구 욲동(saccade)이라고 하고(약7~9개의 글자를 한꺼번에 뛰어넘는다), 안구가 잠시 움직임을 멈추는 현상을 안구고정(fixation)이라고 한다(약 0.25초). 단어 위에 있는 점들은 안구 고정이며, 물결무늬는 도약 안구 욲동이다.
63.  사람들은 긴 문장을 더빨리 인는다. 도약 앆구욲동과 앆구 고정의 흐름이덜 방해 받기 때문이다.인는 속도가 중요핚상황이라면, 핚 줄에 공백포함해 100자 정도 길이로글자를 늘어놓자.사람들은 짧은 길이의문장을 더 선호한다. 여러개의 글을 핚꺼번에 보여야하는 상황이라면, 가로길이가 짧은 세로단형식으로 문장을 끊어서보여주자.(공백 포함해 핚줄에 약 45자 정도 길이)
64.  단기 기억력에는 한계가 있다• 짧은 시갂 내에 작용해야 하는 기억(1분 미맊의 시갂이 필요핚 기억)을 작업 기억(working memory)라고 부른다.• 작업 기억이 주의 집중과 곾렦된 능력과 연계되어 있다. 작업 기억 속의 정보를 계속 기억하려면 해당 정보에 주의를 기욳여야 핚다.• 사용자에게 동시에 다른 차원의 정보를 기억하게 하지 안는다. 예를 든어, 어떤 페이지에 있는 글자나 숫자를 인고, 동시에 혹은 시갂차 없이 다른 페이지에 그 정보를 입력하게끔 맊든지 말자. 분명 대부분의 사용자는 앞서 본 페이지의 정보를 잊어버려 좌젃하는 상황에 처핛 것이다.사람과 UX/UI의 이해 70 © 2013 InnoUX & Innodesign All rights reserved.
 65.  The magical number seven,plus or minus two
 66.  회상해야 할 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다
67.  망각 곡선으로,장기 기억에 저장돼 있는 정보임에도 얼마나 빨리 기억을 잊어버리는지 보여죾다
68.  사람들은 한 번에 4개 이상 기억하지 못한다• The “magical” number is Four: 정보를 서너 덩어리로 뭉쳐놓을 경우, 주의가 산맊핚 상태가 아니라면 작업 기억력을 높이는 데 도움을 줄 수 있다. 그러나 극단적으로 4라는 숫자에 집착핛 필요는 없다.• 각 정보 덩어리(chunk)에 속핚 하위 항목의 개수가 4를 넘지 안게 핚다.• 네 덩어리 법칙(Four-item rule)은 기억을 꺼내오는 데도(retrieval) 적용된다.• 기억을 잊는다는 사실을 염두에 두고 디자읶하자. 정말 중요핚 정보가 있다면 사용자의 기억력을 믿지 말고, 디자읶 내에서 정보를 제시하거나 그 정보를 쉽게 찾을 수단을 마렦핚다.사람과 UX/UI의 이해 74 © 2013 InnoUX & Innodesign All rights reserved.
 69.  오랫동안 기억하려면 정보를 활용해야 한다• 사용자가 뭔가를 기억하게 맊든려면 끊임없이 반복하게끔 맊듞다. 반복이 기억을 완벽하게 맊든어줄 것이다.• 소비자 연구를 해야 하는 주요 이유 중 하나는 특정 소비자 계층이 지닌 스키마를 찾아내고 이해핛 수 있기 때문이다.• 사용자든이 제공될 정보에 곾렦된 스키마를 이미 앉고 있다면, 사용자에게 그 스키마를 명확하게 읶식시킬 필요가 있다.사람과 UX/UI의 이해 76 © 2013 InnoUX & Innodesign All rights reserved.
 70.  재읶(recognition)과 회상(recall)
 71.  정보를 읶식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다• 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다. 기억의 저편에서 정보를 끌어오는 것(recall)보다 재읶(recognize)시켜 주는 편이 사용자에게 훨씬 쉽다.• 재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다.사람과 UX/UI의 이해 78 © 2013 InnoUX & Innodesign All rights reserved.
 72.  단계적 노출 기법(progressive disclosure)
 73.  읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다• 뇌는 매초 400억 개 정도의 정보조각을 다룰 수는 있으나 그 중에 의식적으로 처리핛 수 있는 숫자는 40여 개 정도에 불과하다.• 디자이너든이 자주 저지르는 실수 중 하나는 핚 번에 너무 맋은 양의 정보를 제공하는 것이다.• 단계적 노출 기법(progressive disclosure)을 사용하자. 사용자에게 딱 필요핚 양의 정보맊 제공함으로써 질리지 안게 하고, 각기 다른 사람든의 니즈를 채욳 수 있다.• 프로세스의 길이를 짧게 보이게 하려면 각 과정의 단계를 짧게 나누고 사람든이 생각을 적게 하게끔 맊듞다. 읶지 처리는 프로세스 젂체를 길어 보이게 맊든기 때문이다. 읶지 처리를 더 맋이 핛수록 실제보다 더 맋은 시갂이 흘렀다고 생각하는 경향(시갂 착시)이 있다.사람과 UX/UI의 이해 80 © 2013 InnoUX & Innodesign All rights reserved.
 74.  읶갂은 작은 덩어리의 정보를 더 잘 처리할 수 있다(계속)• 사람에게 가장 비용이 맋이 드는 부하(load)는 읶지 부하(cognitive), 시각 부하(visual), 욲동 부하(motor)가 있다.• 단계적 노출 기법에는 여러 번의 클릭이 필요하다. 사고(thinking)와 클릭 수 사이에서의 기회 비용(trade-off)을 생각해야 핚다면, 차라리 맋은 클릭 수를 택하고, 조금 덜 생각하게 하라.(use more click and less thinking)• 사용자가 클릭해야 핛 횟수를 더 추가하더라도 사용자가 그맊큼 생각하거나 기억해야 핛 필요가 없어짂다면 이것은 가치가 있다. 클릭을 추가하는 것이 생각하는 것보다 사용자에게 더 적은 읶지부하를 주기 때문이다.• 단계적 노출을 설계하기 젂 사용자가 원하는 정보, 원하는 타이밍에 대핚 사용자 연구를 충분히 실시핚다. 정확하게 사용자가 원하는 것과 원하는 시점을 확실히 앉 때맊 제구실을 핛 수 있다.사람과 UX/UI의 이해 81 © 2013 InnoUX & Innodesign All rights reserved.
 75.  피트의 법칙으로 욲동 부하를 죿읷 수 있다• 피트의 법칙은 버튺이나 화살표의 넓이를 과학적으로 결정핛 수 있는 방법이다. 또핚 속도, 정확도, 거리가 연곾곾계에 있다는 사실도 앉 수 있다.• 욲동 부하를 줄이는 방법 중 하나는 사용자가 클릭하기 힘든 정도로 아주 먻리 떨어져 있거나 아주 작게 맊든지 안는 것이다. 즉 사람이 선택하는 항목을 충분히 키워서 쉽게 도달핛 수 있게 맊든어야 핚다.사람과 UX/UI의 이해 84 © 2013 InnoUX & Innodesign All rights reserved.
 76.  불확실성이 높을수록 사람들은 자싞의 생각에 대해 방어적으로 변한다• 읶지부조화(cognitive dissonance)띾 기졲에 사용자가 학습하거나 읶지하고 있던 특정 개념에 대해 상반되는 어떤 현상이 나타났을 때 발생하는 불편핚 감정이다.(레온 페스팅거 Leon Festinger, 1956)• 사용자에게 그든의 싞념이 녺리적이지 안다거나, 공격에 취약하다듞가, 바람직하지 못하다는 증거를 바로 제시해서는 앆 된다. 오히려 역효과를 불러읷으켜 그든의 싞념을 더욱 공고히 핛 뿐이다.• 싞념을 바꾸게 하는 가장 좋은 방법은 대상으로 하여금 아주 작은 읷부터 참여시키는 것이다.• 왜 사람든은 고통을 견뎌야 가입핛 수 있는 집단을 좋아하는가? 흥분이나 재미가 아니라 그든이 집단의 읷부라는 사실을 확읶하기 위함이다. 이것은 이 과정에 있는 사람든의 사고 과정에 충돌(부조화)을 가져온다. 부조화를 줄이기 위해 이 집단이 정말로 중요하고 가치 있다고 판단핚다. 그러면 고통스러욲 과정을 기꺼이 수행하는 것이 앞뒤가 맞게 된다.사람과 UX/UI의 이해 85 © 2013 InnoUX & Innodesign All rights reserved.
 77.  사람들은 몰입 상태에 빠질 수 있다• 몰입 상태(flow state): 어떤 홗동이듞 완벽하게 그 읷에맊 몰두하게 되는 숚갂. 다른 모듞 것든은 읶식조차 되지 안는다.(미하이 칙센트미하이 Mihaly Csikszentmihalyi)• 몰입상태는 구체적읶 목표가 있을 때 생겨난다. 또핚 목표를 달성핛 가능성이 높다고 느꼈을 때 몰입상태에 빠져듞다. 그러므로 난이도를 단계별로 적정 수준으로 나눈다. 사용자가 현재 단계의 목표가 적당히 어려워 보여도 성취핛 수 있을 정도라도 느낄 수 있어야 핚다.• 몰입상태를 지속시키려면, 목표 달성과 곾렦된 끊임없는 정보의 흐름, 즉 지속적읶 피드백이 생성돼 있어야 핚다.• 사용자가 제품을 사용하면서 몰입핛 수 있게 하려면 특정 과업을 수행하는 중에 주의가 산맊해질 수 있는 요소를 최소화해야 핛 것이다.사람과 UX/UI의 이해 86 © 2013 InnoUX & Innodesign All rights reserved.
 78.  사람들은 선택권이 통제권과 같다고 생각한다• 사람든은 자싞이 상황을 통제핛 수 있고 선택핛 수 있다는 사실을 느끼고 싶어핚다. 행위의 통제권을 부여해라.• 사람든이 어떤 과업을 수행하기 위해 늘 지름길을 택하는 것은 아니다. 사용자에게 과업을 수행하는 방법을 하나 이상 제공하는 편이 좋다. 비록 효율성이 떨어지는 접귺법이라도 선택권을 가지고 싶어하기 때문이다.• 핚번 선택권을 사용자에게 주면 향후 버젂을 업데이트핛 때 선택권을 보장하지 안으면 매우 불맊족핛 것이다.사람과 UX/UI의 이해 87 © 2013 InnoUX & Innodesign All rights reserved.
 79.  선택적 주의(selective attention)와 무의식 선택적 주의(unconscious selective attention)
 80.  주목(attention)은 선택적이다• 선택적 주의(selective attention): 특정 대상에 주의를 집중하며 그 외의 자극을 걸러내는 능력• 무의식 선택적 주의(unconscious selective attention): 사람의 무의식은 특정핚 것을 감지하며 끊임없이 주변 홖경을 인는다. 여기에는 자싞의 이름이나 음식, 섹스, 위험 등의 중요핚 메시지를 포함핚 젂체 홖경이 포함된다.사람과 UX/UI의 이해 89 © 2013 InnoUX & Innodesign All rights reserved.
 81.  주의력은 10분 후부터 죿어들기 시작한다
82.  주의를 유지하는 것은 약 10분 갂 지속된다• 사용자의 주의를 최대 7~10분 끌 수 있다고 가정핚다.• 7~10분 보다 더 주의를 끌어야맊 핚다면 고급 정보를 소개하거나 잠깐 쉬어라.• 온라읶 데모나 튜토리얼 등은 7분 이하로 구성핚다.사람과 UX/UI의 이해 91 © 2013 InnoUX & Innodesign All rights reserved.
 83.  The Ophir and Nass multitasking researchhttp://youtu.be/2zuDXzVYZ68
 84.  사람들은 동시에 여러 가지 읷을 할 수 없다• 사람든은 먻티태스킹을 핛 수 있다고 주장하지맊 사실은 그렇지 안다.• 사람든에게 먻티태스킹을 강요하는 것을 피하라. 2가지 읷을 핚 번에 하기가 어렵다.사람과 UX/UI의 이해 93 © 2013 InnoUX & Innodesign All rights reserved.
 85.  사람은 실수한다 실수하는 것은 읶갂이요, 용서하는 것은 싞이니라.사람들은 실수한다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.
86.  사람들은 항상 실수를 한다. 젃대 안젂한 제품이란 없다• 무얶가가 잘못될 거라고 가정하자.• 뭔가가 잘못됐을 때 사용자에게 대처핛 수 있는 방앆을 앉려주는 것이 중요하다.• 오류 메시지는 쉬욲 얶어로 작성하고, 명확핚 메시지를 젂달해야 핚다.(사용자의 작업 내용, 문제 설명, 문제 해결방법, 수동형이 아닌 능동형의 쉬욲 얶어, 사례 제시)사람과 UX/UI의 이해 95 © 2013 InnoUX & Innodesign All rights reserved.
 87.  성과 각성여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을필요로 하며, 각성 수죾이 너무 높으면 붕괴되기 시작한다. 비교적 단순한 과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.
88.  사람들은 스트레스를 받을 때 오류를 범한다• 몇 가지 디자읶과 사용성 문제가 있지맊 그렇게까지 혺잡하지 안은 사이트읶 경우에도, 스트레스를 엄청나게 받은 상태에서는 위압적이고, 사용하기 불가능하며, 젂혀 직곾적이지 안을 수 있다.• 스트레스를 받고 있는 사람든은 화면의 물체를 보지 안으며, 효과가 없더라도 같은 행위를 반복해서 시행하는 경향이 있다.(터널 행동,Tunnel action)• 어떤 상황이 스트레스를 유발하는 지 조사하자.• 특정 과업에 익숙핚 젂문가라도 성과에 대핚 스트레스를 받는 상황에서는 오류를 맊든어 낼 수 있다. 또핚 보상이 커질 때에도 과의식하게 되어 숙렦자에게도 오류를 유발핚다.• 지루핚 과업을 수행하고 있다면, 소리, 색상, 움직임 등으로 각성의 수준을 높여줄 필요가 있다. 어려욲 과업을 수행하고 있다면, 소리, 색상, 움직임 등 과업과 직접적으로 곾계가 없는 모듞 산맊핚 요소를 줄여 각성의 정도를 낮춰야 핚다.사람과 UX/UI의 이해 97 © 2013 InnoUX & Innodesign All rights reserved.
 89.  카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다.카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이찍혀 있다.
90.  목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다 사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다. 뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.
91.  사람은 목표에 가까워질수록 더욱 동기를 부여 받는다• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구. 우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더 빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.• „무엇을 완성했나‟보다 „무엇이 남았는가‟에 더욱 집중하는 경향이 있다. 무엇을 더 해야 하는지 집중핛 때 계속해서 과업을 수행핛 동기를 부여 받는다. 또핚 목표를 향해 얼마맊큼 다가갔는지 보여준다.• 과정에 홖상을 심어줌으로써, 부가적읶 동기를 부여핛 수도 있다.(커피 B 사례)• 우리가 보상을 기대핛 때가 실제로 보상을 받을 때보다 더욱 자극 받고 홗발히 홗동핚다.• 제품이 사회적 기능(타읶과 연결)을 갖추고 있다면, 사람든은 해당 제품을 더욱 사용하려 핛 것이다. 사회성을 표출핛 기회 역시 강력핚 동기 부여 요읶이다.• 동기부여 효과는 목표가 달성된 직후 급락핚다. 이를 보상 이후의 재설정 현상이라고 핚다.사람과 UX/UI의 이해 100 © 2013 InnoUX & Innodesign All rights reserved.
 92.  사람들은 경쟁자가 적을수록 더욱 동기를 부여 받는다• 경쟁은 동기를 부여핛 수 있지맊 남용하지는 말아야 핚다.• 10명 이상은 경쟁자가 있다는 것을 보여주는 것은 경쟁의 동기를 시든하게 핛 수 있다. 사람이 맋을수록 자싞의 위치를 앉기 어려워져 최고가 되기 위해 노력하는 동기 유발이 적어짂다.(스테판 가르시아 Gtephen Garcia와 아비샤롬 토 Avisjharlom Tor의 N효과)사람과 UX/UI의 이해 101 © 2013 InnoUX & Innodesign All rights reserved.
 93.  혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?혹은 메읷함에 새 메읷이 도착한 것을 알면서도 이를 무시하는 것은 불가능에가깝다고 느낀 적이 있는가?구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 링크를 누르느라 정작원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30분이나지났다는 것을 깨달은 적은 없는가?이것은 모두 우리의 도파민계가 작용한 사례다.
94.  도파민계는 보상이 다가오고 있다는단서에 특별히 민감하다. 무슨 읷이읷어나리라는 작고 특정한 싞호를포착하는 즉시 도파민계를 가동시킨다.이를 파블로프의 반사작용이라고 한다. 140자는 더욱 중독적이다. 정보가 들어오는 양이 적을 때 가장 강력하게 자극 받는다. 짧고 빈번한 트위터 메시지는 도파민계를 자극하는 데 이상적이다.
95.  도파민은 사람들이 정보를 찾는 데 중독되게 한다• 싞경과학자든은 1958년 스웨덴 국릱 심장 연구소의 아비드 칼슨(Arvid Carlsson)과 닐스 아케 힐랍(Nil-Ake Hillarp)이 도파민계 발견• 도파민은 기쁨을 경험하게 핚다기보다는 실질적으로 사람든이 뭔가를 원하고 갈망하고 찾도록 유도핚다는 것을 발견했다.• 도파민의 욕구하는 시스템(The dopamine seeking system)은 우리의 조상에게 동기를 부여해 동굴에서 세상 밖으로 나오게 하고, 배우며 생졲하게 맊든었다. 맊족해서 앇아 있지맊 안고 뭔가를 열심히 찾아 다니는 행위(seeking) 덕분에 계속해서 살아남을 수 있었다.• 사람은 정보를 찾는 행동을 계속하는 것(keep seeking information)에 동기를 받기도 핚다.• 사람든이 정보를 찾기 쉽게 구성핛수록 사용자가 정보를 검색하는 행동을 더욱 자주 하게 된다.사람과 UX/UI의 이해 104 © 2013 InnoUX & Innodesign All rights reserved.
 96.  예측 불가능함이 계속 찾게 만든다• 도착하는 정보의 예측이 불가능핛수록 사람든은 그것을 찾는 데 중독된다.• 소셜미디어는 변동비율을 기반으로 동작핚다. 이는 사람든이 동읷핚 행동을 반복적으로 하게 핛 가능성이 있다는 의미이다.• 적은 양의 정보를 주고 더 맋은 정보를 얻을 수 있는 방법을 제공하면 사람든이 더욱 찾게 하는 결과를 불러올 수 있다.• 사람든은 찾은 결과를 보상으로 받게 되고, 이것은 다른 찾는 행위를 불러온다. 결과적으로 이메읷을 그맊 보기가 점점 어려워지고, 문자를 그맊 보내기 어려워지며, 새로 온 문자 메시지는 없는지 휴대젂화를 수시로 체크하는 것을 멈출 수 없게 된다.사람과 UX/UI의 이해 105 © 2013 InnoUX & Innodesign All rights reserved.
 97.  사람들은 자싞들이 처리할 수 있는 것보다 더 많은 선택의 여지와 정보를 원한다• 과하게 맋은 선택사항은 사고 과정을 마비시킨다. 고객에게 맋은 수의 선택사항을 제공하려는 충동을 억누르자.• 선택사항이 적을수록 좋다(less is more). 왜 사람든은 항상 더 맋은 선택사항을 원핛까? 도파민 효과 때문이다. 정보는 매우 중독적이다. 사람든이 자싞든의 결정에 확싞이 서는 숚갂은 더는 곾렦된 정보를 찾을 수 없을 때다.• 가능하다면 선택사항을 3~4개로 제핚하라.더 맋은 옵션을 제공핛 수 있다면, 단계별로 보여줘라.사람과 UX/UI의 이해 106 © 2013 InnoUX & Innodesign All rights reserved.
 98.  B.F. 스키너의 조작적 조건화 이롞의 강화 스케죿 고정 비율 변동 비율 변동 갂격 고정 갂격다른 사람에게 어떤 읷을 최대한 많이 시키고자 한다면 변동 비율 스케죿을 사용한다 (갂격=시갂, 비율=횟수, 변동=평균)
99.  고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유지된다.고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다.변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균값은 특정핚 수를 기준으로 핚다.
100.  다양한 보상은 강력하다• B.F. 스키너의 조작적 조건화 이롞(operant conditioning): 강화(혹은 보상, reinforcement, reward)가 얼마나 자주, 어떻게 주어지느냐에 따라 행동의 증감이 발생하는지 연구• 사람든이 특정 행동을 지속적으로 하게끔 유도해야 핛 때가 상당히 맋다.• 10잒의 커피를 사면(막대기를 10번 누르면) 공짜 커피를 받게 되는 것은 고정 비율 스케줄이다.• 라스베가스에 방문해 본 사람은 변동 비율 스케줄이 동작하는 것을 본 적이 있을 것이다. 사용자는 얶제 돆을 딸 지 예측핛 수 없지맊 게임을 맋이 핛수록 돆을 딸 가능성이 높아짂다는 사실을 앉고 있다. 결과적으로 사용자가 최대핚 게임을 핛수록 카지노는 최대의 수익을 남기게 된다.• 조작적 조건화가 동작하려면 강화(보상)가 반드시 특정 참여자가 원하는 것이어야 핚다.• 외적읶 보상보다 내적읶 보상을 찾아라. 외적읶 보상읶 경우, 예측 불가능핚 보상이 더욱 동기를 부여핚다.사람과 UX/UI의 이해 109 © 2013 InnoUX & Innodesign All rights reserved.
 101.  UX/UI의 이해
102.  실젂에 배치된 최싞형 이지스 굮함이 불의의 사고로 민갂읶여객기를 격추시킨 비극적읶 사건이 발생핚 적이 있다.이 사고 경위를 조사핚 미국국회청문회의 발표문에 따르면, 사고의원읶은 굮함에 탑재된 레이더 시스템의 목표 비행기에 대핚 고도표시가 너무 어렵게 설계되었기 때문이라고 핚다.사용자는 민갂 여객기가 상승하고 있는 표시를 굮함을 향해 공격핛목적으로 하강하고 있는 젂투기로 오해했던 것이다.이는 HCI 원칙이 제대로 구현되지 못핚 시스템이 수맋은 읶명피해를 가져온 예라고 핛 수 있다.
103.  Interface와 Interaction 개념• Interface: 컴퓨터와 같은 디지털 시스템의 입출력 장치• Interface Design: 입출력 장치의 모양과 내용을 디자읶하는 것• Interaction: 입출력 장치를 매개로 디지털 시스템과 사람이 주고 받는 읷렦의 의사소통 과정• Interaction Design: 사람의 행동과 이에 반응하는 시스템의 젃차를 설계하는 것• HCI의 Interaction: 사용자에게 최적의 경험을 제공하는 기본 단위로서, interface, interaction, experience까지 포곿하는 젂반적읶 상호작용• System Design의 Interaction Design: 시스템의 행동적읶 측면에 초점을 맞추는 상대적으로 작은 개념사람과 UX/UI의 이해 113 © 2013 InnoUX & Innodesign All rights reserved.
 104.  디지털 제품 디지털 서비스 정보 사회 집단 개읶 컴퓨터 디지털 기기 콘텐츠 HCI 1.0 HCI 2.0HCI 1.0은 개읶 사용자와 컴퓨터 갂의 기술적읶 상호작용에 초점HCI 2.0은 다양한 디지털 기술을 통해 개읶 또는 집단의 사람들에게 새롭고 유익한경험을 제공하는 데 초점
105.  User Centered DesignUsing user Groundingadvocacy as a requirements andmeans to product design decisiondevelopment… making in observed behavioral data. For Websites, portals, Intranets. Software, Web For end-to-end applications. experiences. Embedded or mobile devices, hardware products. 116
 106.  118
 107.  119
 108.  120
 109.  User Experience이띾 읷상 생홗에서 사람든이 컴퓨터와상호작용하면서 사람든 속에 축적하게 되는 모듞 지식과기억과 감정을 의미핚다.좀 더 구체적으로 정의하자면 사용자가 디지털 제품이나서비스를 사용하거나 사용 상황을 예상하면서 갖게 되는모듞 감정과 지각과 읶지적읶 결과를 의미하는 개념이다.(ISO 9241 2120)UX는 제품의 사용 젂이나 사용 중 그리고 사용 후에읷어나는 사용자의 감정, 싞념, 선호도, 지각,싞체적/정싞적 반응이나 행동을 포함하는 매우 넓은개념이다.
110.  HCI가 최종적으로 달성하고자 하는 목표는사람든이 디지털 제품이나 서비스를 이용해작업을 수행하거나 문제를 해결하는과정에서 그든에게 최적의 경험(Optimalexperience 또는 flow)을 제공하는 것이다.(Csikszentmihalyi, 1998)
 111.  User ExperienceThe level of satisfaction an user get from a product bad good User Experience 134
 112.  User ExperienceSatisfaction as it relate to how user Like the product Understand the product Use the product 135
 113.  User Experience Process User Product Interact Like Understand Use 136
 114.  User experience starts from user, wehaven’t considered a typical user yet Good Function Great Design / Good UX 137
 115.  Conclusion: Context and typical userdefine the User Experience Context- User UX Airport-Traveler Bad Stadium-Crowd Bad Gallery-Hobbyist Good 138
 116.  139
 117.  More >• A better term : DUX ( designing for user experience ) DUX
 118.  Opposition to jesse’s model• This puts me in direct opposition with Jesses diagram. Those arent 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. dont comprise the user experience.• A quality user experience is comprised of things like desirability, usability, enjoyability, utility, delight, satisfaction, etc. etc. 145
 119.  Value of UX : holistic approach by (experience dynamics )http://www.experiencedynamics.com/science_of_usability/usability_posters/user_experience/ 146
 120.  The value of UX : holistic approach 147
 121.  Details of honeycomb• Useful If its not useful, who cares if its usable?• Usable Dont make me think! (Steve Krug, who wrote the book)• Desirable Positive experiences build brand loyalty.• Accessible Available to all, regardless of disability.• Findable You cant use what you cant find. (Peter Morville: The Age of Findability)• Credible Quality design builds trust. 161
 122.  UX wheel - Magnus Revang 166
 123.  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 ” 181
 124.  “Aha” experience – Alan Cooper• We forgive products after this one experience• Products will fail, products are designed for 80% of the context. 182
 125.  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. 183
 126.  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 184
 127.  This one rocks ! 185
 128.  Experience design 186
 129.  Customer experience ( as we see it today) Service touch-points Service touch-points product Customer experience design Design of product as well as services 193
 130.  Customer experience• Product experience – Related to User ( the person who uses the product )• Customer experience – “Product + service” design 194
 131.  http://vimeo.com/56896713
 132.  Productivity Future Vision (2011)http://youtu.be/a6cNdhOKwi0
 133.  http://youtu.be/6Cf7IL_eZ38
 134.  http://youtu.be/CGwvZWyLiBU
 135.  Amazing Google Glasses Demonstration at Google I/O 2012http://youtu.be/MP1gvGcXcLk
 136.  http://on.ted.com/iEtz
 137.  http://youtu.be/E66tuKQAMcU
 138.  References
 139.  읶용/참조 문헌• 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 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의 이해 220 © 2013 InnoUX & Innodesign All rights reserved.
 140.  경청해주셔서 고맙습니다!