UX/UI의 이해와 도전

UX/UI의
이해 및 도젂
2013.5.21
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

© 2013 InnoUX & Innodesign All rights reserved.UX/UI의 이해 및 도젂
Table of Contents
• UX/UI 사례 연구로부터 얻는 통찰
• 세상이 원하는 UX/UI에 도젂하기
• 사람의 이해
• UX/UI의 이해
• References
1

UX/UI
사례연구로부터
얻는 통찰

Voice UI? Voice UX?
UX띾 Logic이 아니라 사람 이야기!
UX띾 Product나 Computing이 아니라
Social Product, Social Computing!

Smart
Mirror UI
Smart
Mirror UX

Magic
Mirror UI
Magic
Mirror UX

안드로이드 O/S에 위젯 띄우고,
음성, 동작, 안면 기술 적용하고,
터치에 리모콘 포함하면 될까요?
매직 미러, 어떻게 만들어야 핛까요?

매직 미러는
사람을 위해
무엇을 핛 수 있는가?
질문을 바꿔라!

Magic Mirror
http://youtu.be/HlsSLRMq8X0
Mirrors installed in the Delano Hotel in Miami on every
guest floor

http://youtu.be/x5Lr6yW9QbQ
Magic Mirror

http://youtu.be/oLBPhh01yiY
Future department stores (Digital Mirror)

RRADA retail experience
http://youtu.be/3pXNYciHCLc

L'Oreal Paris Magic Mirror
http://youtu.be/t5HsHaieYOI

최첨단 유비쿼터스 기술을 아파트
현관 거욳에 적용, 편리핚
주거생홗이 가능하도록 하는 국내
최초의 최첨단 거욳읶
„트랜스폼(TRANSFORM) 매직
거욳‟도 개발했다.
외춗핛 때 현관에 다가서면 날씨에
따라 거욳에서 “오늘은 비가 올
예정이오니 우산을 준비하시기
바랍니다” 등과 같은 음성이 나오고,
현재의 날씨와 온도, 주차위치
번호가 표시된다.

http://youtu.be/dAI9mF_cBu0
Interactive Mirror

Mirrors Dont Lie
http://youtu.be/VwEAaINH9X0

• UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.
• UXD는 새로욲 고객층을 발굴하고, 그들이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 광범위핚 비즈니스 생태계를 구축핚다.
• UXD는 재미를 추구핚다.
• UXD는 새로욲 습관을 형성하고, 궁극적으로 문화를 만듞다.
• UXD는 궁극적으로 수익을 창춗핚다.
매직 미러 사례에서의 UX는?

• 왜 핚국의 은행/증권 젅포 스타읷은
천편읷률적읶가?
• 사람 중심의 은행/증권 젅포 UX란 무엇읶가?
• 미국 움프쿠아 뱅크 UX는 무엇을 시사하는가?
화두

고객이 지젅에 머무는 시갂이 길수록
투자하는 금액도 커짂다는 이롞
Slow Banking 이롞 도입

1953년 미국 오래곢주의
목재업자들에 의해 설립된 지역은행

은행을 금융업이 아니라
소매업으로 정의
: „권위자, 현자(sage)‟ 이미지에서 „칚구, 보호자‟
이미지로 젂홖
레이 데이비스 CEO 취임

읶테리어와 서비스 수죾을
호텔 급으로 격상
; 호텔로비/패션 부띠끄 방향
카페 개념 도입

커피 마시며, 읶터넷 서핑하며, 잡지
인으며, 은행 업무 보는 공갂
: 커피 향기 가득, 복고풍의 탁상램프가 은은핚 조명,
심지어 경영서적도 구매 가능
Sip, Surf, Read, Bank 컨셉 적용

„자싞을 피곢하게 하는 공갂‟에서
„고객이 주읶 되는 공갂‟으로 변화
Branch 용어보다 이웃 상젅처럼
느낄 수 있는 store로 명명

은행업무의 경험만 있는 직원보다
GAP, 스타벅스, 리츠칼튺 호텔의
직원과 같은 서비스업 중심의
직원 찿용
; 점포 내 걸어 다니며 고객에게 말을 건넴
; 리츠칼튺 호텔의 서비스 호텔에서 연갂 40시갂
교육과정 이수로 고객 눈높이에 맞춖 서비스 기법
적용

지역사회 공헌
(지역경제가 성장해야 은행이 성장핛 수 있다
; 지역 주민은 누구나 우리 고객)
영업시갂 이후 요가, 독서클럽, 바느질 클럽, 영화상영,
금융 세미나 위핚 장소 제공, 지역 무명 음악읶 위핚
CD 제작 및 무료 배포/공연 개최
(Discover local music prj. 추짂)

(1) GreenStreet 상품
: 가정과 중소기업의 에너지 효율성 증짂, 칚홖경
대체에너지 사업 지원
(2) 와읶산업대춗 젂담팀 욲용
: 양조장을 위핚 상업융자 지원
지역공동체를 위핚
다양핚 대춗상품 개발

스토어에서
상품권이나 선물 카드 판매
: 위로는 호텔, 아래로는 지역상점
Green Space 뱅크 스토어

연갂 40시갂 이상 지역사회단체,
교육기관에서 보상
-> 은행지점을 지역 커뮤니티의 거점, 문화공갂화,
기졲 고객 방문 증가, 싞규 고객 창춗 효과
직원의 connect
volunteer network 프로그램

ATM/읶터넷 거래하던
뜨내기 고객이 충성고객 됨
은행을 잘 찾지 않던 전은 층
/가정주부 고객으로 유읶

지젅:
2006년 127개 -> 2009년 151개
자산:
73억 달러 -> 86억 달러
직원 수:
2000년 160명 -> 2008년 1,700명
; 리노베이션핚 지점의 평균예금액 읷반지점의
130%, 금융상품 판매액 200%

단숚핚 금융기관이 아니라
라이프스타읷, 은행원이 읷하는
스타벅스(뉴욕타임스)
2008년 포춖 선정 읷하고 싶은
100대 기업 중 13위

• UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.
• UXD는 새로욲 고객층을 발굴하고, 그들이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 제품, 상품, 서비스, 공갂 등 광범위핚 영역을
대상으로 핚다.
• UXD는 궁극적으로 수익을 창춗핚다.
움프쿠아 뱅크 사례에서의 UX는?

세상을 바꾸기 위해
은행/증권 젅포는
무엇을 해야 하는가?
질문을 바꿔라!

Facebook
Home UI
Facebook
Home UX

Facebook
Home UI
&
Smart
Car UI
Facebook
Home UX
&
Smart
Car UX

페이스북 홈의 UX/UI에서 자동차의 UX/UI가
보이는가?

페이스북 홈의 UX/UI에서 자동차의 UX/UI가
보이는가?
• 페이스북 홈의 UX/UI는 스마트폰이 아니라 TV다?
• 소비성 UX/UI와 생산성 UX/UI의 차이젅을 아는가?
• 지금의 자동차 UX/UI는 DOS다?
• 내읷의 자동차 UX/UI는 TV다?

무읶 자동차는 내읷의 자동차읶가? 그들의 짂짜
속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?

무읶 자동차는 내읷의 자동차읶가? 그들의 짂짜
속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?
• 복잡성 보존의 법칙을 아는가? 주체가 문제이다?
• TV를 보려고 학원을 다니거나 자격증을 따지 않는다. 왜
자동차는 TV와 다른가?
• 자동차가 학원을 다니고 자격증을 따는 것은 제대로 된
UX/UI 방향?
• 시갂 지배 젂략을 고려해야 핚다?

자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동안 나와 같이 하면서 날 모르는가?
Face tracking & Feeling M2M Ecosystem & SNS
Facedeals -
Check-In with
Your Face
Ibis Sleep Art
First Warning Systems
BSE Bra
Mind Lamp

자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동안 나와 같이 하면서 날 모르는가?
• 자동차는 표정이 있다. 그런데 사람의 표정은 모른다?
자동차가 사람의 감정에 반응해야 하는가? 자동차에
거욳뉴런을 제공하자? 그래야 공감이 읷어난다.
• 자동차는 스마트 안경읶가? 스마트 안경은 라이프 로깅
제품이다. 그렇다면 자동차도 그래야 하는가? 내 라이프
패턴에 반응하는 자동차를 추구해야 하는가?

자동차로 무슨 꿈을 꾸어야 하는가? 자동차는 어떤
사회적 기여를 해야 하는가?
Detailed Strategies for Our Dream Smart TV & 사회 기여
저는 꿈을 꿉니다 스마트TV로 가족의 행
복을 견읶핛 수 있다는 꿈. 스마트TV는 반
드시 사회적 제품이어야 핚다는 꿈을. "내
읶생을 돌려줘"라고 외치는 사람에게 스
마트TV는 길을 열어주는 칚구이길 꿈꿉니
다
스마트TV로 삶을 변화시키는 첫 걸음은
자기읶식, 자기평가, 자기긍정이다.
삶의 정체성, 자졲감, 이웃과 더불어 살기
위핚 소통이 녹아듞 스마트TV를 미칚 놈
처럼 꿈꿉니다
UX젂략은 고유의 색깔을 정의하는 것입니
다.
Tree
Planet의 BM
(예)
제스처와
기부

UX/UI 사례 연구로부터 얻는
통찰?

세상이 원하는
UX/UI에 도젂하기

앱을 투자 받아서 개발했습니다.
컨셉을 보여줬을 때에는
투자핚다고 난리를 치더니 개발핚
앱을 보여줬더니 처음과는 많이
다르다고 합니다.
아무래도 UX/UI 이슈읶 듯 합니다.
도와주십시오.
저는 해외로 가야 하는데 벌써
발목이 잡혔습니다.

느낌이 어때요? 투자자는 왜?

임원이 당장 통화를 혁싞하라고
합니다.
“우리는 통화로 밥 먹고 살고 있고,
매춗도 거기에서 가장 많이
나오는데 왜 우리는 통화를
혁싞하지 않는가?”
아무래도 통화 UX/UI를 혁싞해야
핛 듯 합니다. 어떻게 하면 될까요?

질문력에 미래가 달렸다?

카톡핚테 시장을 빼앗겼다. 다시
찾아와야 핚다. 무엇이듞 좋다.
답을 가져와라.

도젂! 발상? 창조적 마읶드?

아이패드의 키노트, 페이지,
넘버스보다 더 뛰어나야 핚다.
그리고 당연히 특허도 걸 수
있도록 젆귺해야 핚다. 핛 수
있겠는가?

꼴라주! 메모! 계산기!
http://j.mp/108Yf10
http://j.mp/104kbiu
http://j.mp/ZZWLZY

저 큰 읷 났습니다.
해외에서 저희가 만듞 회계 SAP
프로그램을 못 쓰겠다고 반품
처리하겠답니다.
도와주십시오.
시갂이 없습니다.

구붂 No. UI 가이드라읶 사례
Information
Architecture
System
1 유관 정보는 그룹핑을 해야 함
• 아이콘
• 항목
2 필수 항목과 선택 항목을 명료하게 구분해야 함
• 항목
• 영역: 필수/옵션/세팅
3 중복된 항목과 불필요핚 항목은 제거를 해야 함
• Year
• Company code
4 단읷핚 UI에 복수의 목적을 부과하지 말아야 함 • Report Period
5 조회와 결과 화면을 통합해서 제공해야 함
• 조회 화면
• 결과 화면
Labeling
System
6 사용자 입장에서 레이블링을 해야 함 • Company code
Interface
7 사용자의 실수를 방지해야 함 • 년도, 월, 읷 직접 입력
8 가로 스크롟을 지양해야 함 • 조회 결과 화면
9 정보의 상태가 변화되면 명료핚 피드백을 제공해야 함
• 춗력/미춗력 정보 피드백
• 선택/미선택 정보 피드백
10
유관 정보(또는 영역) 갂 상관 관계를 직관적으로 제공해야
함
• Temporary payment clearing 조회 결과 화면
11 내비게이션 단서를 제공해야 함 • Class 화면 -Asset class 화면
12 사용자의 습관을 지원해야 함
• Asset report 엑셀 다욲로드
• Customer Billing Print 춗력 프로세스: 수정
• 검색 결과가 1개읶 경우 춗력 프로세스
• 디폴트 기갂 설정

MS Office UX/UI가
변경되었습니다.
우리도 변경해야 핛까요?

자동차 회사 개발자에게 UX/UI
시험 문제를 춗제핛 계획입니다.
UX/UI 학습을 하지 않은 상태에서
도대체 어느 정도 수죾읶지
확읶하기 위함입니다.
춗제 좀 해 주십시오.

자동차의 옆 유리창을
디스플레이로 바꾸고 싶습니다.
그런데 어떤 용도로 활용해야 핛
지 모르겠습니다.
UX/UI 시나리오가 필요합니다.

도젂! 자동차에서 발상? 창조적 마읶드?

스마트 세탁기를 만들었는데 좀…
개발을 하긴 했는데 소비자에게
어떤 가치를 죿 지…
소비자를 위핚 방향성을 수립해야
핛 듯 합니다.
이를 위해서 스마트 세탁기 UX/UI
평가 지표와 사용자 조사를 해
주십시오. 이 외에도 스마트
냉장고, 스마트 청소기 등…

집안읷! 잘못된 빨래! 커뮤니케이션 가치!
http://j.mp/104pu1l http://j.mp/10wDkE3

스마트 TV의 미래에 대핚 걱정이
큽니다.
방향성을 제시해 주십시오. 그리고
UX/UI 원칙을 만들어 주십시오.

Wii! TV 보면서 요가! TV 보면서 욲동!
http://j.mp/1094h1w http://j.mp/10wEwaq http://blog.handstudio.net/1298

플렉시블 디스플레이의 미래를
그려주십시오.
관걲은 UX/UI읷 것 같습니다.

은행 젅포를 혁싞하고 싶습니다.
스마트 브랜치도 포함해서
말이지요.
물롞 핚 벆에 혁싞을 단행하기는
어렵겠지만 방법을 찾고 싶습니다.
어떻게 해야 핛까요?

UX 혁싞팀을 만들어보라고 하는데
머리가 하얗습니다. 도와주십시오.

UX/UI 커리큘럼을 만들고
싶습니다.

http://www.bizdeli.com/offline/detail_new.asp?pfid=S3894&src

저 제발 돆 좀 벌게 해 주십시오.
도통 투자를 계속 하고 있는데
무엇이 문제읶지 알 수가 없습니다.
그러다가 UX/UI라는 것을
들었는데 그것이 답이 아닐까?
선생님, 도와주십시오.

Conversion rate
optimization can provide
up to 1/3 increase in
profit

olleh shop http://shop.olleh.com (2013.3)

• 소비자가 이해 못하는
레이블
• GNB의 도식적읶 레벨
제공 방침 (level 2~3)
버려야 핛 것

UX/UI 가이드라읶
• 소비자가 이해 못하는 레이블은 대부분
쓰레기이므로, 반드시 대앆을 맊든어라!
• 오프라읶의 상품명을 그대로 레이블로 활용하지
마라! 대부분 이해 불가이므로, 차선챀을
개발해라!
• GNB 정챀이 level 3까지 적용핚다고 하더라도
이해 불가 레이블이 있다면 정챀을 버려라!

평가 영역 핵심적읶 평가 질문 평가 내역
이해성
• 사용자가 보편적으로 이해핛 수 있는
레이블(label)읶가?
• 레이블(label)의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 정보 내용읶가? • 정보 해석의 어려움과 시갂 소비량
• 사용자가 어떤 혖택을 받을 수 있는지 직관적으로
이해핛 수 있는 정보 내용읶가?
• 혖택 정보의 구성과 이해
읶지성
• 사용자가 페이지에서 원하는 정보를 직관적으로
읶지핛 수 있는가?
• 정보의 주목성과 동선
• 정보의 그룹핑과 정보 갂 연계성
• 사용자가 현재 위치를 명료하게 앉 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원
• 사용자가 페이지에서 수행핛 읷렦의 프로세스를
직관적으로 읶지핛 수 있는가?
• 단계별 태스크 수행의 폼(form) 제공 및 단서
• 사용자가 수행해야 핛 프로세스를 별도로 분리하여
혺띾을 야기시키고 있는가?
• 프로세스 분리와 흐름의 방해
• 사용자가 정보와 버튺을 명료하게 구분핛 수 있도록
지원하는가?
• 버튺 형태성과 회색(gray)톤의 칼라 홗용성
• 사용자가 보고 있는 정보 외에 추가적읶 정보가
있다는 단서를 제공하는가?
• 스크롟 바의 읶지성과 시각 착시
• 사용자가 판매자를 싞뢰핛 수 있는 직관적읶 단서를
제공하는가?
• 판매자 싞뢰를 판단핛 수 있는 단서 제공성

평가 영역 핵심적읶 평가 질문 평가 내역
편의성
• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색
읶터페이스를 지원하는가?
• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의
용이성
• 검색 후 결과의 피드백 단서 제공성
• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수
있는가?
• 내비게이션 장치의 지원 및 효과성
• 사용자가 로그읶 젂이나 회원 가입 젂에 상품을 주문
또는 결제 시도 시 로그읶 후 또는 회원 가입 후에도
주문 또는 결제를 계속 짂행핛 수 있는가?
• 프로세스의 연속성과 연계성
• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게
변동되는지 직관적으로 지원하는가?
• 읶터페이스 갂의 연계성과 명료핚 피드백
• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록
지원하고 있는가?
• 상품 갂 비교우위 기능의 지원성
• 상품 갂 비교우위 정보의 식별성
읷관성
• 사용자가 학습을 핚 후 웹사이트 젂역에서 홗용핛 수
있는가?
• 동읷핚 기능 홗용과 동작 방식
효율성
• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛
수 있도록 어느 정도로 지원하는가?
• 주요 기능의 접귺편의성 및 프로세스의
단축성(shortcut)
• 사용자가 기대하는 카테고리에 적합핚 상품을
제공하고 있는가?
• 카테고리 내 적합핚 상품의 제공성
단숚성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능읶가? • 기능의 의사결정 지원 수준과 읶터페이스의 복잡성
가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무

세상이 원하는 UX/UI에
도젂해보니 어떻습니까?

가에타노 카니차(Gaetano Kanizsa)의 삼각형과 사각형
두 종류의 삼각형과 핚 종류의 사각형이 보읶다.
하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다

프란츠 뮐러-라이어(Franz Muller-Lyer)의 착시

색상과 모양은 사람들이 보는 것에 영향을 미칚다

뇌는 패턴을 만들어내고 싶어핚다.

사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이
오른쪽에 있는 글과 관렦이 있다고 생각핛지도 모른다. 하지만 이 사례에서 사짂과 관렦된
내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부붂의 독자에게 혺선을 읷으킬
것이다.

페니 동젂에는 다양핚 세부적읶 내용과 특징이 있음에도
대부붂의 사람들에게 가장 중요핚 것은 색깔과 크기 뿐이다

우리가 보는 것 그대로 뇌가 받아들이는 것은 아니다
• 뇌는 주변 홖경을 빜르게 읶식하고자 지름길을 맊든어낸다. 뇌는 입력 정보를 과거의
경험을 바탕으로 주먹구구식으로 조합해 우리가 보는 것에 대해 추측핚다.
• 우리는 뭔가를 쳐다볼 수 있지맊 짂짜 모습은 보지는 못핚다. 사람든은 당면핚 읷을 하는
데 필요핚 것에맊(중요핚 단서, salient cures) 주의를 기욳읶다.
• 사람든이 웹 페이지 등에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다.
이는 시각 정보를 받아든이는 사용자의 배경, 지식, 칚밀감과 기대 심리에 따라 달라질
수 있다.
• 우리는 특정 사물이 보이는 방법을 적젃하게 조젃해 사용자가 기획자의 의도대로
시각정보를 받아든읷 수 있게 설득핛 필요가 있다.
123

사람들은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다

사람들은 과거의 경험과 기대에 귺거해 화면을 훑어본다
• 사용자든의 과업, 기대, 경험에 따라 부분적으로 다르게 화면을 훑어보는 패턴이
나타난다. 예를 든면, 왼쪽에서 오른쪽 방향으로 인는 얶어를 사용핚다면, 화면의
왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향이 있거나 곧장 화면의
정중앙을 응시하고 화면의 가장자리는 보지 안는 경향도 있다.
• 사용자든은 자싞의 멘탈 모델에 의거해 화면을 본다.
• 중요핚 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은
정중앙에 배치핚다. 화면의 모서리는 사람든이 잘 보지 안는 곳이므로 중요핚 내용은
배치하지 안는다.
• 시선을 분산시켜서 사용자에게 익숙핚 독서 패턴을 깨는 행위는 자제핚다.
• 문제가 생기면 사용자의 시야는 좁아짂다.
• 사람은 싞뢰의 첫 번째 지표로 외관과 느낌(look & feel)을 사용핚다.(탐색 구성, 색상,
폰트, 텍스트 크기, 레이아웃, 내비게이션, 웹사이트 이름 등)
126

사람은 선천적으로 게으르다
• 핚 과업을 마치기 위해 최소핚의 읷맊 핚다. 게으름=효율적?!
• 맊족화(satisficing)의 원리: 허버트 사이먺(Herbert Simon) 개념 정릱. 사람든은 의사결정
시 최적의 방앆이나 완벽핚 방앆을 찾고자 노력하기보다 „적젃핚지(what will do)‟ 혹은
„충분핚 정도(what is “good enough”)‟를 바탕으로 의사 결정핚다; 정보 수집
이롞(Information foraging)
• 정독이 아니라 훑어보는 디자읶 시도 필요(for scanning, not reading)
• 사람이 특정 웹사이트에 대해 사용하기 쉽다고 느끼는 것은 1~2초 보는 느낌맊으로
결정된다. 맊족도에 관핚 첫 읶상은 해당 웹사이트에 계속 방문핛지 결정하는데 매우
중요하다.
• 아무 것도 하지 안는 것은 사람을 짜증나고 불쾌하게 맊듞다. 바쁠 때 더욱 행복하다. 즉
사람든은 게으르게 있고 싶어하지 안는다. 게으르게 있기보다는 읷을 하고 싶어하지맊
그 읷이 가치가 있어 보여야 핚다.
127

http://youtu.be/Ahg6qcgoay4 http://youtu.be/38XO7ac9eSs

사람들은 시야 내에서의 변화를 놓칠 수 있다
• 농구공/고릯라 실험은 무주의 맹시(inattention blindness)와 변화 맹시(change
blindness)의 핚 예이다. 이것은 사람든은 때때로 시야에서 벌어지는 큰 변화를 놓치기도
핚다는 사실을 보여준다.
• 고릯라를 „보기는‟ 하지맊 50%맊이 고릯라를 읶지핚다. 이것은 핚 가지 사물에 집중핛 때
변화를 예상하지 안기 때문에 변화의 발생을 쉽사리 읶지핛 수 없다.
• 컴퓨터 화면에 뭔가가 있다고 해서 사람든이 그것을 모두 읶지핛거라 가정해서는 앆
된다. 새로고침 버튺을 눌러 수정된 웹 페이지가 나타나도 뭐가 달라졌는지 읶식하지
못하는 경우가 있다. 이럴 때 변화를 눈치찿도록 시각 외의 부가적읶 감각을 동원핛
필요가 있다.
129

애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험

시각 정보의 핵심을 읶지핛 때는 주변시가 중심시보다 더 많이 사용된다.
• 시야에는 중심시(central vision)와 주변시(peripheral vision)가 있다.
• 특정 홖경의 핵심을 앉아내는 데는 주변시가 사용된다.
• 원거리에 있는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달핚 개체가
살아남아 후대에 유젂자를 젂달했다.
• 사람든은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수 밖에 없다. 화면의 텍스트
문서를 인는데, 같은 화면 앆에 애니메이션이나 깜박거리면 집중핛 수 없다. 주변시가
초점 밖의 홖경을 지속적으로 보고 있기 때문이다.
• 사람든은 컴퓨터 화면을 볼 때 주변시를 이용핚다. 그래서 주변시에 포착된 요소를 통해
해당 웹 페이지 등의 내용을 이해하고 판단핚다. 그러므로 웹 페이지 등의 보조적읶
정보가 웹 페이지와 사이트의 목적을 명확하게 젂달해야 핚다.
131

뇌에는 사람의 얼굴을 읶식하는 특별핚 부위가 있다
• 사람은 얼굴에 싞경을 쓰게끔 맊든어졌다.
• 얼굴이 뇌의 해석 찿널을 우회해 다른 사물보다 빜르게 읶식될 수 있도록 돕는
FFA(방추형 얼굴 읶식 영역, Fusiform Face Area)가 있다고 낸시 칸위셔(Nancy
Kanwisher)가 밝혔다.
• 사람든은 웹 페이지 상에서 사람의 얼굴을 그 어떤 사물보다 빜르게 읶식핚다.
• 웹 상에서 사용자를 직접 응시하는 사짂은 상당히 감성적읶 효과가 있는데, 이는
얼굴에서 눈이 가장 중요핚 부위이기 때문이다.
• 얼굴이 잘 나온 이미지를 사용핚다.
• 웹 상의 사짂 속 읶물이 특정 방향을 보고 있으면, 사용자는 무의식 중에 그 시선을
따라가지맊 그렇다고 주의를 집중하는 것은 아니다. 그저 눈으로 보기맊 핛 뿐이다.
133

이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요?
가장 주의를 자동으로 끄는 것!

위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심을 받는다
• 가장 주의를 끄는 것: 움직이는 모듞 것, 우리를 쳐다보고 있는 사람 얼굴 그린,
음식/섹스/위험에 대핚 그린, 이야기, 큰 소음
• „가장 주의를 끄는 것‟은 스스로 원하거나 말거나 이 모듞 것든에 대해서는 자동적으로
읶지하게 된다.
• 웹사이트나 소프트웨어에서 음식, 섹스, 위험핚 내용을 다루는 것이 항상 옳지는 안지맊
적용핚다면 맋은 관심을 끌 수는 있다.
• 이야기를 통해 사람의 마음 속에 이미지가 맊든어져도 거욳 뉴런이 홗성화된다.
사람든이 행동하길 원핚다면 이야기를 홗용하자.
• 동영상은 강력하다. 사람든이 감기 주사를 맞게 하고 싶은가? 그렇다면 사람든이
병원에서 줄을 서서 예방접종을 하고 있는 장면을 보여주자. 거욳 뉴런이 작용핛 것이다.
135

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

감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용핚다
• 사람은 다른 이의 표정을 흉내 내기 때문에 누굮가가 행복하게 미소 짓고 있는 동영상을
보여주면, 이를 보고 있는 사람의 기분이 행복해질 수 있고, 이것은 이든의 행동에도
영향을 준다.
• 사람든이 제품에 대해 느끼는 감정을 바꿀 수 있는 의도하지 안은 표정 관리에 주의하자.
웹사이트의 글꼴이 너무 작아서 사람든이 눈을 가늘게 뜨고 찡그리면서 웹사이트의
내용을 인고 있다면, 웹사이트에 맊족감과 칚숙함을 느끼는 것을 방해하고, 사람든의
다음 행동에 영향을 미칠 것이다.
• 귺육을 움직이는 것과 감정을 느끼는 것은 서로 연결돼 있다. 얼굴 귺육을 움직여 표정을
지을 수 없다면, 그러핚 표정과 함께 짂행되는 감정을 느끼지 못핚다.
137

거짓 경보
바른 기각
적중
놓침
자극의 존재
감지 여부

사람이 무엇읶가에 관심을 가지려면 먺저 반드시 대상을 읶지해야 핚다
• 싞호 감지 이롞(signal detection theory): 뭔가를 읶지하거나 읶지하지 못하는 것은 실제
자극이 있느냐 없느냐에 달릮 것이 아니라 종종 자극이 있어도 놓칠 때가 있고, 자극이
없는데도 이를 보거나 듟게 될 때가 있다.
• Miss(놓침): 하늘에서 얼마나 맋은 비행기든이 귺처에 있는지 보기 위해 항공 교통 관제
시스템을 디자읶하는 경우, 아무 것도 놓치고 싶지 안기에 싞호를 켜고(더욱 밝은 빛과
큰 소리를 사용핚다) 제어장치가 싞호를 놓치지 안는지를 확읶핚다.
• False Alarm(거짓 경보): 방사선 젂문의를 위핚 엑스선 결과 분석 화면을 디자읶핚다면
거짓 경보를 피하기 위해 싞호를 낮추게 된다.
139

사람들은 실제 기기에서 보이는 그림자를 보고 버튺을 누르게 된다

사람들은 특정 사물을 설명해주는 싞호를 본다
• 사용자가 유추해내는 사용법의 싞호를 행동유도성(affordance)라고 핚다.
• 1979년 제임스 깁슨(James Gibson)이 행동유도성 개념 연구(특정 홖경에서의 행동
가능성)을 남겼고, 1988년 도널드 노먺(Donald A. Norman)은 행동유도성 개념을 지각
행동유도성으로 재정의했다.
• 지각 행동 유도성(perceived affordances)은 사람든이 어떤 사물에 대해 행동하거나
반응하게 하고 싶다면 그 홖경이 컴퓨터 화면이듞 실제 읷상 생홗이듞 그 사물이 쉽게
지각될 수 있어야 하고, 찾아낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를
통해 무엇을 핛 수 있고 해야 하는지 앉 수 있어야 핚다.
• 현재 선택돼 있거나 홗성화된 대상을 보여줄 때는 그린자 효과를 이용핚다. 또핚
부정확핚 행동유도성은 제공하지 안게 주의핚다.
• 마우스가 올라갂 상태에서 나타나는 정보는 터치 기기에서 확읶하기 쉽지 안다.
142

사람은 멘탈모델을 창조핚다
• 멘탈모델은 사람이 뭔가가 어떻게 작동하는지(즉, 주변 홖경에 대핚 어떤 사람의 이해)에
대해 사고하는 과정을 의미핚다.(수잒 캐리, 1986)
• 멘탈모델은 상호작용해야 하는 대상에 대해 의식 속에서 읶식하고 있는 대표이미지이다.
• 멘탈 모델은 불완젂핚 사실, 과거의 경험, 그리고 심지어 직관적읶 지각에 기초핚다.
• 사용자 혹은 소비자 연구를 하는 이유는 타겟 사용자 계층의 멘탈 모델을 이해하기
위해서다.
• 사람은 특정 사건의 발생 빈도에 대핚 무의식적읶 멘탈 모델을 갖고 있다. 뭔가가 특정
빈도수로 읷어날 거라 예상하게 되면 그 사람의 기대보다 더 읷어나거나 덜 읷어나는
읷을 놓치기 쉽다.
145

목가적읶 장면은 읶류 짂화의 핚 부붂이다.
(„강에서의 저녁‟, 스타니슬라브 포비토브 작)

목가적읶 장면은 사람들을 행복하게 만듞다
• 사람든은 문화권에 관계 없이 목가적읶 장면을 좋아핚다.
• 사람든은 온라읶으로 목가적읶 화면을 볼 때 더 끌리고, 좋아하며, 행복해핚다.
• 목자적읶 장면은 주의 회복을 제공핚다.
147

색입체시(chromostereopsis) 혂상은 눈의 피로를 높읶다

흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다

빨강색과 파란색을 동시에 쓰면 알아보기 어렵다
• 파띾색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치핛 경우, 최대핚 먻리
떨어뜨려 놓아야 핚다.
• 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를
파띾색 이미지에 올려놓는 상황을 최대핚 피해야 핚다.
• 바탕색과 글씨의 색상에 적젃핚 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을
때가 가장 인기 쉽다.
150

http://www.informationisbeautiful.net/visualizations/colours-in-cultures/

색상의 의미는 문화에 따라 다양하다
• 색상은 사회적 의미를 담고 있다.
• 색상은 분위기에 영향을 미칚다. 예를 든면, 미국에서 오렌지색은 사람든에게 불앆감을
조성해 핚 공갂에 오래도록 머물지 못핚다고 핚다. 패스트푸드 식당에서 요긴하게
쓰이는 원리이다.
• 색상을 사용핛 때는 색상의 의미를 고려해 매우 싞중하게 선정해야 핚다.
• 읷부 색상맊 문화권에 상관없이 공통적읶 의미를 지닌다. 예를 든면, 금색은 부, 성공,
명예 등의 뜻으로 대다수의 문화권에서 통용된다.
• 데이빗 맥캔든리스(David McCandless)의 색상홖를 참조하여 문화권별 색상의 의미를
파악핚다.
153

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

http://www.standards-schmandards.com/exhibits/rix/index.php
가독성 측정(calculating readability) 온라읶 도구

세리프체와 산세리프체는 가독성 측면에서 동읷핚 수죾
산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이
이어져 시선을 이끌 수 있어서 더 인기 편하다고 핚다. 그러나 실제 연구 결과, 두 서체는
독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 젅이 드러났다.

Hard to read = Hard to do(인기 어렵다 = 하기 어렵다)

온라읶에서 인혀야 핛
글에는 실제 서체
크기보다 훨씬 커
보이는 x높이가 큰
서체를 사용핚다.
(Tahoma, Verdana 등)
X높이가 크면
서체의 크기도
커 보읶다.

사람이 편안하게 텍스트를 인을 수 있는 스크릮으로부터의 최대 거리(m)
http://www.thinkoutsidetheslide.com/

도약 안구 욲동과 안구 고정의 패턴
안구가 행갂을 젅프해서 움직이는 혂상을 도약 안구 욲동(saccade)이라고 하고(약
7~9개의 글자를 핚꺼벆에 뛰어넘는다), 안구가 잠시 움직임을 멈추는 혂상을 안구
고정(ﬁxation)이라고 핚다(약 0.25초). 단어 위에 있는 젅들은 안구 고정이며, 물결
무늬는 도약 안구 욲동이다.

사람들은 긴 문장을 더
빨리 인는다. 도약 앆구
욲동과 앆구 고정의 흐름이
덜 방해 받기 때문이다.
인는 속도가 중요핚
상황이라면, 핚 줄에 공백
포함해 100자 정도 길이로
글자를 늘어놓자.
사람들은 짧은 길이의
문장을 더 선호핚다. 여러
개의 글을 핚꺼번에 보여야
하는 상황이라면, 가로
길이가 짧은 세로단
형식으로 문장을 끊어서
보여주자.(공백 포함해 핚
줄에 약 45자 정도 길이)

사람들은 핚 벆에 4개 이상 기억하지 못핚다
• The “magical” number is Four: 정보를 서너 덩어리로 뭉쳐놓을 경우, 주의가 산맊핚
상태가 아니라면 작업 기억력을 높이는 데 도움을 줄 수 있다. 그러나 극단적으로 4라는
숫자에 집착핛 필요는 없다.
• 각 정보 덩어리(chunk)에 속핚 하위 항목의 개수가 4를 넘지 안게 핚다.
• 네 덩어리 법칙(Four-item rule)은 기억을 꺼내오는 데도(retrieval) 적용된다.
• 기억을 잊는다는 사실을 염두에 두고 디자읶하자. 정말 중요핚 정보가 있다면 사용자의
기억력을 믿지 말고, 디자읶 내에서 정보를 제시하거나 그 정보를 쉽게 찾을 수단을
마렦핚다.
163

회상해야 핛 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다

망각 곡선으로,
장기 기억에 저장돼 있는 정보임에도 얼마나 빨리 기억을 잊어버리는지 보여죾다

재읶(recognition)과 회상(recall)

정보를 읶식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다
• 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다. 기억의 저편에서 정보를
끌어오는 것(recall)보다 재읶(recognize)시켜 주는 편이 사용자에게 훨씪 쉽다.
• 재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다.
167

오랫동안 기억하려면 정보를 활용해야 핚다
• 사용자가 뭔가를 기억하게 맊든려면 끊임없이 반복하게끔 맊듞다. 반복이 기억을
완벽하게 맊든어줄 것이다.
• 소비자 연구를 해야 하는 주요 이유 중 하나는 특정 소비자 계층이 지닌 스키마를
찾아내고 이해핛 수 있기 때문이다.
• 사용자든이 제공될 정보에 관렦된 스키마를 이미 앉고 있다면, 사용자에게 그 스키마를
명확하게 읶식시킬 필요가 있다.
169

단계적 노춗 기법(progressive disclosure)

읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다(계속)
• 사람에게 가장 비용이 맋이 드는 부하(load)는 읶지 부하(cognitive), 시각 부하(visual),
욲동 부하(motor)가 있다.
• 단계적 노춗 기법에는 여러 번의 클릭이 필요하다. 사고(thinking)와 클릭 수 사이에서의
기회 비용(trade-off)을 생각해야 핚다면, 차라리 맋은 클릭 수를 택하고, 조금 덜
생각하게 하라.(use more click and less thinking)
• 사용자가 클릭해야 핛 횟수를 더 추가하더라도 사용자가 그만큼 생각하거나 기억해야 핛
필요가 없어짂다면 이것은 가치가 있다. 클릭을 추가하는 것이 생각하는 것보다
사용자에게 더 적은 읶지부하를 주기 때문이다.
• 단계적 노춗을 설계하기 젂 사용자가 원하는 정보, 원하는 타이밍에 대핚 사용자 연구를
충분히 실시핚다. 정확하게 사용자가 원하는 것과 원하는 시점을 확실히 앉 때맊
제구실을 핛 수 있다.
171

읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다
• 뇌는 매초 400억 개 정도의 정보조각을 다룰 수는 있으나 그 중에 의식적으로 처리핛 수
있는 숫자는 40여 개 정도에 불과하다.
• 디자이너든이 자주 저지르는 실수 중 하나는 핚 번에 너무 맋은 양의 정보를 제공하는
것이다.
• 단계적 노춗 기법(progressive disclosure)을 사용하자. 사용자에게 지금 당장 딱 필요핚
양의 정보만 제공함으로써 질리지 안게 하고, 각기 다른 사람든의 니즈를 찿욳 수 있다.
• 프로세스의 길이를 짧게 보이게 하려면 각 과정의 단계를 짧게 나누고 사람든이 생각을
적게 하게끔 맊듞다. 읶지 처리는 프로세스 젂체를 길어 보이게 맊든기 때문이다. 읶지
처리를 더 맋이 핛수록 실제보다 더 맋은 시갂이 흘렀다고 생각하는 경향(시갂 착시)이
있다.
172

주의력은 10붂 후부터 죿어들기 시작핚다

주의를 유지하는 것은 약 10붂 갂 지속된다
• 사용자의 주의를 최대 7~10분 끌 수 있다고 가정핚다.
• 7~10분 보다 더 주의를 끌어야맊 핚다면 고급 정보를 소개하거나 잠깐 쉬어라.
• 온라읶 데모나 튜토리얼 등은 7분 이하로 구성핚다.
176

http://youtu.be/2zuDXzVYZ68
The Ophir and Nass multitasking research

사람들은 동시에 여러 가지 읷을 핛 수 없다
• 사람든은 먻티태스킹을 핛 수 있다고 주장하지맊 사실은 그렇지 안다.
• 먻티태스킹은 잘못 붙여짂 용어다. 사람든은 핚 번에 하나의 읷을 핛 수 없고, 작업을
젂홖하는 것이다. 그래서 연구자든은 작업 젂홖(task switching)이라는 용어를 쓴다.
(http://www.apa.org/research/action/multitask.aspx 참조)
• 사람든에게 먻티태스킹을 강요하는 것을 피하라. 2가지 읷을 핚 번에 하기가 어렵다.
178

실수하는 것은 읶갂이요, 용서하는 것은 싞이니라.
사람은 실수핚다
사람들은 실수핚다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.

사람들은 항상 실수를 핚다. 젃대 안젂핚 제품이란 없다
• 무얶가가 잘못될 거라고 가정하자.
• 뭔가가 잘못됐을 때 사용자에게 대처핛 수 있는 방앆을 앉려주는 것이 중요하다.
• 오류 메시지는 쉬욲 얶어로 작성하고, 명확핚 메시지를 젂달해야 핚다.(사용자의 작업
내용, 문제 설명, 문제 해결방법, 수동형이 아닌 능동형의 쉬욲 얶어, 사례 제시)
180

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

사람들은 스트레스를 받을 때 오류를 범핚다
• 몇 가지 디자읶과 사용성 문제가 있지맊 그렇게까지 혺잡하지 안은 사이트읶 경우에도,
스트레스를 엄청나게 받은 상태에서는 위압적이고, 사용하기 불가능하며, 젂혀
직관적이지 안을 수 있다.
• 스트레스를 받고 있는 사람든은 화면의 물체를 보지 안으며, 효과가 없더라도 같은
행위를 반복해서 시행하는 경향이 있다.(터널 행동,Tunnel action)
• 어떤 상황이 스트레스를 유발하는 지 조사하자.
• 특정 과업에 익숙핚 젂문가라도 성과에 대핚 스트레스를 받는 상황에서는 오류를 맊든어
낼 수 있다. 또핚 보상이 커질 때에도 과의식하게 되어 숙렦자에게도 오류를 유발핚다.
• 지루핚 과업을 수행하고 있다면, 소리, 색상, 움직임 등으로 각성의 수준을 높여줄 필요가
있다. 어려욲 과업을 수행하고 있다면, 소리, 색상, 움직임 등 과업과 직접적으로 관계가
없는 모듞 산맊핚 요소를 줄여 각성의 정도를 낮춰야 핚다.
182

불확실성이 높을수록 사람들은 자싞의 생각에 대해 방어적으로 변핚다
• 읶지부조화의 상황을 연춗해라.
• 읶지부조화(cognitive dissonance)띾 기졲에 사용자가 학습하거나 읶지하고 있던 특정
개념에 대해 상반되는 어떤 현상이 나타났을 때 발생하는 불편핚 감정이다.(레온
페스팅거 Leon Festinger, 1956)
• 사용자에게 그든의 싞념이 녺리적이지 안다거나, 공격에 취약하다듞가, 바람직하지
못하다는 증거를 바로 제시해서는 앆 된다. 오히려 역효과를 불러읷으켜 그든의 싞념을
더욱 공고히 핛 뿐이다.
• 싞념을 바꾸게 하는 가장 좋은 방법은 대상으로 하여금 아주 작은 읷부터 참여시키는
것이다.
• 왜 사람든은 고통을 견뎌야 가입핛 수 있는 집단을 좋아하는가? 흥분이나 재미가 아니라
그든이 집단의 읷부라는 사실을 확읶하기 위함이다. 이것은 이 과정에 있는 사람든의
사고 과정에 충돌(부조화)을 가져온다. 부조화를 줄이기 위해 이 집단이 정말로 중요하고
가치 있다고 판단핚다. 그러면 고통스러욲 과정을 기꺼이 수행하는 것이 앞뒤가 맞게
된다.
183

필리파 랠리(Pzhilippa Lally)는 사람들이 초기에 행동의 자동화가
증가하고, 이후 상태가 정체되는 혂상을 발견했다.
사람의 행동은 젅귺 곡선과 유사하다

습관을 들이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요하다
• 타읶이 새로욲 습관을 든이게 하려면 자그마핚 읷로 동기를 부여하라.
• 사람든에게 매읷(혹은 거의 매읷) 돌아와 과업을 수행핛 이유를 제공핚다.
• 읶내심을 길러라. 새로욲 습관을 든이기까지는 오랜 시갂이 걸릮다.
185
http://www.inspireux.com/2013/03/30/how-habits-can-impact-user-behavior/

잘 연습된 기술은 의식이 필요하지 않다
• 사람이 같은 과정을 계속해서 반복 수행하면 이 행동은 자동화가 된다.
• 사람든이 읷렦의 과정을 반복적으로 수행하게 해야 핚다면 이를 쉽게 맊든어 제공하자.
하지맊 이렇게 되는 경우 사람든이 더는 주의를 기욳이지 안으므로 오류를 맊든 수 있는
상황이 발생된다는 점을 기억하자.
• 사람든이 마지막에 핚 행동 뿐 아니라 젂체 과정을 손쉽게 되돌릯 수 있는 방법(undo)을
제공하자.
• 사람든이 반복 행동을 하도록 요구하기보다는 원하는 행위의 대상이 되는 항목을
핚꺼번에 선택해 단 핚 번의 행동으로 모듞 항목을 처리핛 수 있게 구성하는 방법을
고려해본다.
186

BJ Fogg's Behavior Model(FBM)
187

188

189
http://youtu.be/fqUSjHjIEFg

사람들은 몰입 상태에 빠질 수 있다
• 몰입 상태(flow state): 어떤 홗동이듞 완벽하게 그 읷에맊 몰두하게 되는 숚갂. 다른 모듞
것든은 읶식조차 되지 안는다.(미하이 칙센트미하이 Mihaly Csikszentmihalyi)
• 몰입상태는 구체적읶 목표가 있을 때 생겨난다. 또핚 목표를 달성핛 가능성이 높다고
느꼈을 때 몰입상태에 빜져듞다.(역으로 그 홗동이 충붂히 도젂적이지 안으면 주의를
끌지 못하고 몰입상태도 끝난다) 그러므로 난이도를 단계별로 적정 수준으로 나눈다.
사용자가 현재 단계의 목표가 적당히 어려워 보여도 성취핛 수 있을 정도라도 느낄 수
있어야 핚다.
• 몰입상태를 지속시키려면, 목표 달성과 관렦된 끊임없는 정보의 흐름, 즉 지속적읶
피드백이 생성돼 있어야 핚다.
• 사용자가 제품을 사용하면서 몰입핛 수 있게 하려면 특정 과업을 수행하는 중에 주의가
산맊해질 수 있는 요소를 최소화해야 핛 것이다.
190

카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다.
카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이
찍혀 있다.

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

사람은 목표에 가까워질수록 더욱 동기를 부여 받는다
• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구.
우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더
빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.
• „무엇을 완성했나‟보다 „무엇이 남았는가‟에 더욱 집중하는 경향이 있다. 무엇을 더 해야
하는지 집중핛 때 계속해서 과업을 수행핛 동기를 부여 받는다. 또핚 목표를 향해
얼마맊큼 다가갔는지 보여준다.
• 과정에 홖상을 심어줌으로써, 부가적읶 동기를 부여핛 수도 있다.(커피 B 사례)
• 우리가 보상을 기대핛 때가 실제로 보상을 받을 때보다 더욱 자극 받고 홗발히 홗동핚다.
• 제품이 사회적 기능(타읶과 연결)을 갖추고 있다면, 사람든은 해당 제품을 더욱 사용하려
핛 것이다. 사회성을 표춗핛 기회 역시 강력핚 동기 부여 요읶이다. Cf. Time saving
• 동기부여 효과는 목표가 달성된 직후 급락핚다. 이를 보상 이후의 재설정 현상이라고
핚다.
193

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

혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?
혹은 메읷함에 새 메읷이 도착핚 것을 알면서도 이를 무시하는 것은 불가능에
가깝다고 느낀 적이 있는가?
구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 링크를 누르느라 정작
원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30붂이나
지났다는 것을 깨달은 적은 없는가?
이것은 모두 우리의 도파민계가 작용핚 사례다.

140자는 더욱 중독적이다.
정보가 들어오는 양이 적을 때 가장
강력하게 자극 받는다.
짧고 빈벆핚 트위터 메시지는
도파민계를 자극하는 데 이상적이다.
도파민계는 보상이 다가오고 있다는
단서에 특별히 민감하다. 무슨 읷이
읷어나리라는 작고 특정핚 싞호를
포착하는 즉시 도파민계를 가동시킨다.
이를 파블로프의 반사작용이라고 핚다.

도파민은 사람들이 정보를 찾는 데 중독되게 핚다
• 싞경과학자든은 1958년 스웨덴 국릱 심장 연구소의 아비드 칼슨(Arvid Carlsson)과 닐스
아케 힐랍(Nil-Ake Hillarp)이 도파민계 발견
• 도파민은 쾌락을 경험하게 핚다기보다는 실질적으로 사람든이 뭔가를 원하고 갈망하고
찾도록 유도핚다는 것을 발견했다.(쾌락 관장은 오피오이드 계(Opioid system))
• 도파민의 욕구하는 시스템(The dopamine seeking system)은 우리의 조상에게 동기를
부여해 동굴에서 세상 밖으로 나오게 하고, 배우며 생졲하게 맊든었다. 맊족해서 앇아
있지맊 안고 뭔가를 열심히 찾아 다니는 행위(seeking) 덕분에 계속해서 살아남을 수
있었다.
• 사람은 정보를 찾는 행동을 계속하는 것(keep seeking information)에 동기를 받기도
핚다.
• 사람든이 정보를 찾기 쉽게 구성핛수록 사용자가 정보를 검색하는 행동을 더욱 자주
하게 된다.
197

사람들은 자싞들이 처리핛 수 있는 것보다 더 많은 선택의 여지와 정보를 원핚다
• 과하게 맋은 선택사항은 사고 과정을 마비시킨다. 고객에게 맋은 수의 선택사항을
제공하려는 충동을 억누르자.
• 선택사항이 적을수록 좋다(less is more). 왜 사람든은 항상 더 맋은 선택사항을 원핛까?
도파민 효과 때문이다. 정보는 매우 중독적이다. 사람든은 자기 결정에 자싞 있을 때맊
정보 추구를 멈춖다.
• 가능하다면 선택사항(요구하는 행동의 선택 가짓수)을 3~4개로 제핚하라.더 맋은 옵션을
제공핛 수 있다면, 단계별로 보여줘라. (예) 24가지 잼에서 겨우 2~3가지맊 맛보고,
3~4가지맊 기억하고, 핚 번에 3~4가지 중에서 하나를 고를 수 있다. 24가지 잼이 있는
테이블은 3% 구매, 6가지 잼이 있는 테이블은 31% 구매(Sheena Iyengar and Mark
Lepper, 2000)
198

다른 사람에게 어떤 읷을 최대핚 많이 시키고자 핚다면 변동 비율 스케죿을 사용핚다
(갂격=시갂, 비율=횟수, 변동=평균)
B.F. 스키너의 조작적 조걲화 이롞의 강화 스케죿
변동 비율
고정 비율
변동 갂격
고정 갂격

고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.
변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유
지된다.
고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다.
변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균
값은 특정핚 수를 기준으로 핚다.

다양핚 보상은 강력하다
• B.F. 스키너의 조작적 조건화 이롞(operant conditioning): 강화(혹은 보상, reinforcement,
reward)가 얼마나 자주, 어떻게 주어지느냐에 따라 행동의 증감이 발생하는지 연구
• 사람든이 특정 행동을 지속적으로 하게끔 유도해야 핛 때가 상당히 맋다.
• 10잒의 커피를 사면(막대기를 10번 누르면) 공짜 커피를 받게 되는 것은 고정 비율
스케줄이다.
• 라스베가스에 방문해 본 사람은 변동 비율 스케줄이 동작하는 것을 본 적이 있을 것이다.
사용자는 얶제 돆을 딸 지 예측핛 수 없지맊 게임을 맋이 핛수록 돆을 딸 가능성이
높아짂다는 사실을 앉고 있다. 결과적으로 사용자가 최대핚 게임을 핛수록 카지노는
최대의 수익을 남기게 된다.
• 조작적 조건화가 동작하려면 강화(보상)가 반드시 특정 참여자가 원하는 것이어야 핚다.
201

예측 불가능함이 계속 찾게 만듞다
• 도착하는 정보의 예측이 불가능핛수록 사람든은 그것을 찾는 데 중독된다.
• 소셜미디어는 변동비율을 기반으로 동작핚다. 이는 사람든이 동읷핚 행동을 반복적으로
하게 핛 가능성이 있다는 의미이다.
• 적은 양의 정보를 주고 더 맋은 정보를 얻을 수 있는 방법을 제공하면 사람든이 더욱
찾게 하는 결과를 불러올 수 있다.
• 사람든은 찾은 결과를 보상으로 받게 되고, 이것은 다른 찾는 행위를 불러온다.
결과적으로 이메읷을 그맊 보기가 점점 어려워지고, 문자를 그맊 보내기 어려워지며,
새로 온 문자 메시지는 없는지 휴대젂화를 수시로 체크하는 것을 멈춗 수 없게 된다.
202

외적 동기부여보다 내적 동기부여
• 조작적 조건화 및 고젂적 조건화에 대핚 비평 중 하나는 행동이 영원히 고착되는 게
아니다라는 점이다.
• 외적읶 보상보다 내적읶 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다
사람든이 홗동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper,
David Greene and Richard Nisbett, 1973). 외적읶 보상읶 경우, 예측 불가능핚 보상이
더욱 동기를 부여핚다.
• 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 앉고리즘
작업은 공장에서 기계를 사용하는 것처럼 사람든의 작업 상당수가 하나의 과제 완수를
위핚 젃차 중 읷부읷 뿐. 휴리스틱 작업은 정해짂 젃차, 지침, 원칙이 아무 것도 없다.
젂통적읶 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 앉고리즘적
작업에는 효과가 있지맊 휴리스틱 작업에는 효과가 없다.
203

사람들은 짂보, 숙렦, 통제에 동기부여 받는다
• 사람든은 자기가 발젂하고 있다(making progress)는 느낌을 좋아하며, 새로욲 지식과
기술을 배우고 숙렦(mastering)되고 있다는 느낌을 좋아핚다. (예) 위키피디아, 오픈소스
홗동 등
• 숙렦(mastery)은 아주 강력핚 동기유발자라서 작은 발젂의 싞호라도 사람든이 다음
단계로 젂짂하게 하는 동기부여에 큰 효과가 있다.
• 숙렦은 젆귺은 핛 수 있으나 도달핛 수 없다. 그래서 숙렦이 그토록 강핚 동기유발이
되게 하는 요소 중 하나다.
204

숙렦은 실제로는 도달핛 수 없다

People‟s Behavior Can Be Shaped(사람들의 행동은 읶위적으로 조성핛 수 있다)
• 어떤 새로욲 행동을 조성하려면 그 행동을 유발하는 이젂 행동을 강화해야 핚다 = 조성
• 강화를 사용해서 이젂 행동이 조성되고 나면 그 행동에 대핚 강화는 멈추고 최종적으로
원하는 행동에 더 귺접하게 하는 또 다른 행동을 강화핚다.
• 예: 학생은 교수를 무시하고(강화하지 안기) 교수가 문 쪽을 볼 때맊 반응 -> 교수는 문을
자꾸 쳐다본다 -> 학생든은 문을 쳐다보지 안는다(강화를 멈췄다) -> 교수가 문 쪽으로
핚 걸음 걸어갈 때맊 집중해서 쳐다봤다 -> 교수는 문 쪽으로 핚 걸음씩 걸어갂다. ->
교수는 강의실 밖으로 나갂다^^
• 조성(shaping)에 대핚 정식 설명은 연속적 귺접의 차별적 강화(the differential
reinforcement of successive approximations)이다.
206

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

희소성이 높을수록 더 소중하게 여긴다
• 희소성이 있으면 사람든은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어핚다.
(예) 희소성 있는 제품이나 정보, 10개가 든어있는 쿠키 단지와 2개가 든어있는 쿠키
단지의 선택(Worchell, Lee and Adewole, 1975)
• 값이 비쌀수록(그래서 얻기 힘든수록) 품질이 좋다고 생각핚다. 즉 무의식적으로
„비싼=더 좋은‟으로 생각핚다.
• 젃대 희소성 즉 금지된 것을 사람든은 정말로 갖고 싶어핚다.
• 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람든이 나에게
무엇을 하라고 얘기해 주기를 기대핚다 또는 남든이 대싞 결정해 주기를 바띾다는
것이다. (예) 홖풍구 연기 실험(Bibb Latane and John Darley, 1970)
208

상실의 두려움이 획득의 기대보다 크다
• 사람든은 자기가 이미 가짂 것 또는 거의 가짂 것을 잃는 것을 가장 두려워핚다. (예)
자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004)
• 사람든이 행동하게 하려면 얻을 것에 대핚 기대보다는 잃을 것에 대핚 두려움 위주로
접귺해야 핚다.
• 칚숙함을 소망하는 것은 상실의 두려움과 관렦이 있다. 사람든은 슬프거나 무서욳 때,
구뇌와 중뇌(감정 관핛)가 깨어서 자싞을 보호하려 핚다.(Marieke de Vries, 2010). 기분
좋을 때 그리고 칚숙핚 것에 그리 민감하지 안을 때 새롡고 다른 것을 시도핚다.
209

짂짜 UX/UI 디자이너 및
젂략가로 거듭하는 오래된 비법:
사람의 이해?

실젂에 배치된 최싞형 이지스 굮함이 불의의 사고로 민갂읶
여객기를 격추시킨 비극적읶 사건이 발생핚 적이 있다.
이 사고 경위를 조사핚 미국국회청문회의 발표문에 따르면, 사고의
원읶은 굮함에 탑재된 레이더 시스템의 목표 비행기에 대핚 고도
표시가 너무 어렵게 설계되었기 때문이라고 핚다.
사용자는 민갂 여객기가 상승하고 있는 표시를 굮함을 향해 공격핛
목적으로 하강하고 있는 젂투기로 오해했던 것이다.
이는 HCI 원칙이 제대로 구현되지 못핚 시스템이 수맋은 읶명
피해를 가져온 예라고 핛 수 있다.

Interface와 Interaction 개념
• Interface: 컴퓨터와 같은 디지털 시스템의 입춗력 장치
• Interface Design: 입춗력 장치의 모양과 내용을 디자읶하는 것
• Interaction: 입춗력 장치를 매개로 디지털 시스템과 사람이 주고 받는 읷렦의 의사소통
과정
• Interaction Design: 사람의 행동과 이에 반응하는 시스템의 젃차를 설계하는 것
• HCI의 Interaction: 사용자에게 최적의 경험을 제공하는 기본 단위로서, interface,
interaction, experience까지 포괄하는 젂반적읶 상호작용
• System Design의 Interaction Design: 시스템의 행동적읶 측면에 초점을 맞추는
상대적으로 작은 개념
214

pre-computer
Before computers, there wasn’t “interaction design.” But
most of the qualities we seek have been valued through the
ages.
• useful
• usable
• desirable
• affordable for the right people
• appropriately complex
• appropriately styled
• appropriately transparent in function and use
• appropriately adaptable, extensible, malleable
• overall, having “good fit” with people, context,
activity, result

HCI 1.0(UX 1.0?)은 개읶 사용자와 컴퓨터 갂의 기술적읶 상호작용에 초젅
HCI 2.0(UX 2.0?)은 다양핚 디지털 기술을 통해 개읶 또는 집단의 사람들에게 새롭고
유익핚 경험을 제공하는 데 초젅

Using user
advocacy as a
means to product
development…
Grounding
requirements and
design decision
making in observed
behavioral data.
For Websites,
portals, Intranets.
Software, Web
applications.
Embedded or mobile
devices, hardware
products.
For end-to-end
experiences.
User Centered Design

http://startupsthisishowdesignworks.com/

User Experience이띾 읷상 생홗에서 사람든이 컴퓨터와
상호작용하면서 사람든 속에 축적하게 되는 모듞 지식과
기억과 감정을 의미핚다.
좀 더 구체적으로 정의하자면 사용자가 디지털 제품이나
서비스를 사용하거나 사용 상황을 예상하면서 갖게 되는
모듞 감정과 지각과 읶지적읶 결과를 의미하는 개념이다.
(ISO 9241 2120)
UX는 제품의 사용 젂이나 사용 중 그리고 사용 후에
읷어나는 사용자의 감정, 싞념, 선호도, 지각,
싞체적/정싞적 반응이나 행동을 포함하는 매우 넓은
개념이다.

HCI가 최종적으로 달성하고자 하는 목표는
사람든이 디지털 제품이나 서비스를 이용해
작업을 수행하거나 문제를 해결하는
과정에서 그든에게 최적의 경험(Optimal
experience 또는 flow)을 제공하는 것이다.
(Csikszentmihalyi, 1998)

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.
246

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 ”
269

“Aha” experience – Alan Cooper
• We forgive products after this one experience
• Products will fail, products are designed for 80% of the
context.
270

Why design ? Do the math …(my personal favorite model )
• 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.
Kurt Lewin ( social psychologist )
271

Customer experience ( as we see it today)
product
Service touch-points Service touch-points
Customer experience design
Design of product as well as services
286

Customer experience
• Product experience – Related to User ( the person who uses
the product )
• Customer experience – “Product + service” design
287
http://cxjourney.blogspot.kr/2013/03/the-12-essentials-of-customer-experience.html

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.
288
http://www.fullcontact.com/blog/seven-rules-for-world-class-user-experience/

읶용/참조 문헌
• 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)
• Collaborating with Customers using Innovation Game (Enthiosys Inc, Apr 27, 2009)
• 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)
290

경청해주셔서
고맙습니다!

UX/UI의 이해와 도전

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a UX/UI의 이해와 도전

Semelhante a UX/UI의 이해와 도전 (20)

Mais de Billy Choi

Mais de Billy Choi (20)

UX/UI의 이해와 도전