Zero effort UX UI Strategy

2014.6.10
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI

© 2014 InnoUX & Innodesign All rights reserved.Zero Effort UI/UX Strategy by Billy Choi(@ILOVEHCI)
Table of Contents
• Zero Effort UX/UI 란 무엇이며, 어떤 전략이 필요한가?
• 사람을 좀 더 이해할 수 있다면, 사용성을 향상시킬 수 있다?
• 사용성의 몇 가지 원칙 좀, 빨리 훑어볼까!?
• 사례, 고거! 고거가 좀 필요하지!!
• Next Big Agenda
1

Zero Effort UI/UX Strategic Framework by Billy Choi
Zero Effort
UI/UX Strategy Load
Law of
conservation of
complexity
Quality in Use
F-shaped
pattern
based
Satisficing
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
I.C=0%, S.C=100%
사용자 인터페이스의
복잡성(Interface
Complexity),
시스템의
복잡성(System
Complexity)
I=100%, L=0%,
Ef=
M=0%, Er=0%
S=100%
Intuitive design,
ease of Learning,
Efficiency of use,
Memorability,
Error frequency and
severity,
subjective
Satisfaction
부하 복잡성 보존의 법칙 사용품질
Interface=F
만족화 원리에
기반한 F패턴
3

Zero Effort UI/UX Strategic Framework(continue)
Zero Effort
UI/UX Strategy Load
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
부하
4
사용품질을
by Billy Choi
(@ILOVEHCI)

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

단계적 노출 기법(progressive disclosure)

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

피트의 법칙으로 운동 부하를 줄일 수 있다
• 피트의 법칙은 버튼이나 화살표의 넓이를 과학적으로 결정할 수 있는 방법이다. 또한
속도, 정확도, 거리가 연관관계에 있다는 사실도 알 수 있다.
• 운동 부하를 줄이는 방법 중 하나는 사용자가 클릭하기 힘들 정도로 아주 멀리 떨어져
있거나 아주 작게 만들지 않는 것이다. 즉 사람이 선택하는 항목을 충분히 키워서 쉽게
도달할 수 있게 만들어야 한다.
10

Zero Effort
UI/UX Strategy
Law of
conservation of
complexity
I.C=0%, S.C=100%
사용자 인터페이스의
복잡성(Interface
Complexity),
시스템의
복잡성(System
Complexity)
복잡성 보존의 법칙
CLI
GUI
NUI
NEST-like UI
Interface
Complexity
System
Complexity
0% 0%100%
http://youtu.be/L8TkhHgkBsg
11
사용품질을
by Billy Choi
(@ILOVEHCI)

Zero Effort
UI/UX Strategy Quality in Use
I=100%, L=0%,
Ef=
M=0%, Er=0%
S=100%
Intuitive design,
ease of Learning,
Efficiency of use,
Memorability,
Error frequency and
severity,
subjective
Satisfaction
사용품질
• Intuitive design: a nearly effortless understanding
of the architecture and navigation of the site
• Ease of learning: how fast a user who has never
seen the user interface before can accomplish
basic tasks
• Efficiency of use: How fast an experienced user
can accomplish tasks
• Memorability: after visiting the site, if a user can
remember enough to use it effectively in future
visits
• Error frequency and severity: how often users
make errors while using the system, how serious
the errors are, and how users recover from the
errors
• Subjective satisfaction: If the user likes using the
system
http://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/
13
사용품질을
by Billy Choi
(@ILOVEHCI)

사용성(Usability)은 사용자가 특정 맥락에서 특정
목표를 달성하기 위해 디지털 시스템을
전반적으로 편리하게 이용할 수 있는 정도
사용품질(Quality in Use)은 사회적, 물리적, 기술적
환경 등을 포함하는 다양한 실제 사용 환경에서
시스템을 통해 과업을 수행하면서, 사용자가
느끼는 효율성, 효과성, 만족도를 포함하는
총체적인 품질
(ISO 9241-11, ISO 13407)

Zero Effort
UI/UX Strategy
F-shaped
pattern
based
Satisficing
Interface=F
만족화 원리에
기반한 F패턴
HCI Quick Guide (Emanuel Fernandes, May 2010)
15
사용품질을
by Billy Choi
(@ILOVEHCI)

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

by 최병호(@ILOVEHCI)
http://www.slideshare.net/BillyChoi/gui-21745974

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

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

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

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

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

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

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

사진과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 책을 읽기 때문에 사진이
오른쪽에 있는 글과 관련이 있다고 생각할지도 모른다. 하지만 이 사례에서 사진과 관련된
내용은 실제로 사진 하단에 위치해 있으며, 이것은 대부분의 독자에게 혼선을 일으킬
것이다.

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

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

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

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

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

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

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

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

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

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

적록 색맹에게 보이는 색상 차이

9%의 남성, 0.5%의 여성이 색맹이다
• www.vischeck.com이나 colorfilter.wickline.org에서 테스트 필요
• 색상을 통해 특정 의미를 나타내야 한다면(예를 들어, 즉각적인 주의를 요하는 부분에
녹색을 써야 한다면) 보조적인 표기 규약을 사용한다(녹색과 함께 외곽선을 사용해
주의를 끌 수 있게 디자인한다)
• 색상 체계를 세울 때, 정상 범주에 해당하지 않는 사용자도 모두 고려한다. 청록/적록
색맹 사용자를 고려해 빨간색, 녹색, 청색보다는 갈색이나 황색을 사용한다.
42

텍스트의 읽기 난이도(가독성) 계산 공식
프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가할 때 널리 쓰인다.
이 공식을 이용하면 읽기 용이성(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높이가 크면
서체의 크기도
커 보인다.

단기 기억력에는 한계가 있다
• 짧은 시간 내에 작용해야 하는 기억(1분 미만의 시간이 필요한 기억)을 작업
기억(working memory)라고 부른다.
• 작업 기억이 주의 집중과 관련된 능력과 연계되어 있다. 작업 기억 속의 정보를 계속
기억하려면 해당 정보에 주의를 기울여야 한다.
• 사용자에게 동시에 다른 차원의 정보를 기억하게 하지 않는다. 예를 들어, 어떤 페이지에
있는 글자나 숫자를 읽고, 동시에 혹은 시간차 없이 다른 페이지에 그 정보를 입력하게끔
만들지 말자. 분명 대부분의 사용자는 앞서 본 페이지의 정보를 잊어버려 좌절하는
상황에 처할 것이다.
48

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

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

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

재인(recognition)과 회상(recall)

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

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

사람들은 동시에 여러 가지 일을 할 수 없다
• 사람들은 멀티태스킹을 할 수 있다고 주장하지만 사실은 그렇지 않다.
• 멀티태스킹은 잘못 붙여진 용어다. 사람들은 한 번에 하나의 일을 할 수 없고, 작업을
전환하는 것이다. 그래서 연구자들은 작업 전환(task switching)이라는 용어를 쓴다.
(http://www.apa.org/research/action/multitask.aspx 참조)
• 사람들에게 멀티태스킹을 강요하는 것을 피하라. 2가지 일을 한 번에 하기가 어렵다.
56

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

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

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

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

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

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

http://www.thatwebguyblog.com/post/15-steps-towards-better-form-usability/

1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
J. Nielsen and R. Mack, eds. Usability Inspection Methods, 1994
Nielsen’s 10 heuristics
Slide 95

http://www.slideshare.net/AbbyCovert/information-architecture-heuristics

98
Problems
AGENDA 1. 업로드 실패
‘한번에 여러개’ 업로드 메뉴를 선택하면 업로드 창과 파일/폴더 선택 창이 동시에 로딩됨.
업로드 창의 ‘찾아보기’ 버튼을 누르면 ‘파일/폴더 선택 창’이 로딩되어 있기 때문에
사용자에게 제공되는 피드백이 없음. 오류로 판단하여 ‘한번에 여러개’ 업로드를 포기함
GUIDELINES
• Selective Perception
• Feedback
• Consistency
SOLUTIONS
A. ‘찾아보기’ 버튼 선택 시 ‘파일/폴더 선택 창’이 로딩되어 있다는 피드백을
제공함
B. ‘업로드 창’과 ‘파일/폴더 선택 창’을 동시에 로딩하지 않음
<그림 1.1> ‘한번에 여러개’ 업로드 화면
왼쪽 창은 업로드 창, 오른쪽 창은 파일/폴더 선택 창임

99
Problems
AGENDA 3. 다운로드 및 업로드 완료 후 확인
다운로드 후 다운로드 한 파일의 이상유무를 일상적으로 확인하는 행동 특성이 있음. 그러나
종종 위치를 찾지 못해 시간을 낭비함. 또한 업로드 후 업로드 한 파일이 자동정렬되어 찾는데
불필요한 시간이 소요됨. 쉽게 인지할 수 있는 지원이 필요함
GUIDELINES
• Feedback
• Efficiency of Use
REFERENCES
• 파이이폭스 브라우저의 다운로드 관리자 및 현황 안내 화면
SOLUTIONS
<그림 3.1> 다운로드 화면
<그림 3.3> 업로드 화면
<그림 3.2> 파이어폭스 브라우저의
다운로드 관리자 및 현황 안내 화면
<그림 3.4> 업로드 前 화면
<그림 3.5> 업로드 後 화면
• 다운로드 후 다운로드 한 파일 즉시 열람 지원
• 다운로드 한 파일이 있는 폴더로 즉시 이동 지원
• 다운로드 한 내역 열람 지원
• 업로드 후 업로드 한 파일을 다른 파일과 구별시켜 업로드 성공을
확신하도록 지원; 복사, 이동, 이름 변경도 동일한 방식으로 적절한 피드백
제공 필요

100
Problems
AGENDA 4. Drag & Drop 지원
‘한번에 여러개’ 업로드 시 드래그 앤 드랍을 지원하므로 ‘한번에 하나’ 업로드 시에
시도하지만 지원하지 않음. 웹하드 홈페이지에서 복사, 이동 등 파일 관리 시 웹하드
접속기처럼 드래그 앤 드랍을 시도하지만 지원하지 않음. 지원의 기대심리가 증가 추세임
GUIDELINES
• Learnability
• Consistency
CONSIDERATIONS
• O/S의 파일 관리 방식이 적용되면 편리할 것 같다는 생각을 보유함
• 웹하드 접속기에 익숙하면 웹하드 홈페이지에도 습관적으로 드래그 앤
드랍을 시도할 가능성이 많음
SOLUTIONS
A. 웹하드 홈페이지 전체에 드래그 앤 드랍 지원
B. 웹하드 홈페이지 서비스 중 사용자가 가장 많이 사용하는 업로드 및
다운로드에 우선 적용 후 전체로 확산
<그림 4.1> ‘한번에 여러개’
업로드 화면
<그림 4.2> ‘한번에 하나’ 업로드
화면
<그림 4.3> 웹하드
홈페이지에서 드래그 및
드랍 시도 화면
<그림 4.4> 웹하드
접속기에서 드래그 및 드랍
시도 화면

101
Problems
AGENDA 6. 파일 전송 및 수신 확인 실패
‘메일로(BIG메일)’ 파일보내기 메뉴와 ‘메일로(BIG메일)’ 문서보안 메뉴를 구별하지 못함.
많은 사용자가 파일 전송 시 문서보안 메뉴에 접근하여 사용함. 또한 수신 확인이 상단 메뉴에
있지 않기 때문에 수신 확인 실패율이 높음. 개선이 시급함
GUIDELINES
• Similarity and proximity
• Clarity of the interface
• Consistency
CONSIDERATIONS
• 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 사용자가 직접
생성한 폴더 외에는 무관심함
<그림 6.1> 웹하드 홈페이지의
파일보내기 메뉴와 문서보안 메뉴
<그림 6.2> 웹하드 접속기의
파일보내기 메뉴와 문서보안 메뉴
<그림 6.3> 웹하드 홈페이지의 수신 확인
SOLUTIONS
• 파일보내기 메뉴와 문서보안 메뉴의 차별성 강화
• 동일한 레이블 정정
• 웹하드 홈페이지(또는 웹하드 접속기)의 왼쪽 tree 영역 내 모든 메뉴를
상단 메뉴 영역으로 이동 필요; 이동 시 메일로(BIG메일) 메뉴와 가장
가깝게 배치 필요

102
Problems
AGENDA 7. Undo 지원
사용자는 언제든지 실수를 할 수 있음. 그러나 복구할 수 있는 최소한의 지원조차 이루어지지
못한 상황임. Gmail 처럼 웹어플리케이션도 undo 기능을 지원하고 있으므로 기술적으로
어려운 상황이 아님. 또한 휴지통에 있는 파일은 간편하게 복구할 수 있는 지원이 필요함
GUIDELINES
• Error prevention and recovery
CONSIDERATIONS
• 사용자는 언제든지 실수를 할 수 있다는 점
• 웹어플리케이션도 undo 기능이 가능하다는 점
REFERENCES
• 윈도즈 XP의 휴지통 복원 기능
• Gmail의 undo 기능
<그림 7.1> 웹하드 홈페이지의
휴지통 내 파일 이동
<그림 7.2> 윈도즈 XP의
휴지통 복원 기능
<그림 7.3> 웹하드 접속기의
휴지통 내 오른쪽 마우스 기능
메뉴
<그림 7.4> Gmail의 undo 기능
SOLUTIONS
• 웹하드 홈페이지와 웹하드 접속기에 undo 기능 지원
• 휴지통에 복원 기능 제공; 복원 후 복원된 폴더 및 파일 확인 단서 제공
필요

SAP UI 1차 가이드라인
104
구분 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개인 경우 출력 프로세스
• 디폴트 기간 설정

1. 아이콘(icon)
105
화면 적용 원칙 및 분석
• 적용 원칙
1. 유관 정보 그룹핑
• 분석
1. 영역 1와 2: 그룹핑이 제대로 되어
있지 않아서 직관적인 인지 및 빠른
접근을 방해하고 있음
1
2

2. 태스크 흐름(task flow) (1/5): 화면 내 태스크 흐름 I
107
• 적용 원칙
1. 필수와 선택 구별 필요
• 분석
1. 태스크를 부담 없이 빠르게 처리하기
위해서는 필수 영역과 선택 영역을
구분할 필요가 있음. 그러나
형태적으로 볼 때 영역 1, 2, 3은
특별한 구별되지 않음. Option
타이틀을 제공하는 것으로는 미약함.
tone & manner 등으로 식별성을
높일 필요가 있음. 즉 필수 입력 영역만
돋보이도록 디자인해야 함
2. 옵션 영역(영역 2) 다음에 제공하는
세팅 영역(영역 3)은 옵션 영역과 동일
또는 유사하게 취급할 수 있으므로
필수적인 입력사항이라면, 세팅
영역(영역 3)을 필수 영역(영역 1)에
포함하는 것이 바람직함
1
2
3
[Asset report 조회 화면: 자산조회 —보유하고 있는 자산에 대해서 다양한 조건으로
검색하여 자산의 취득가치 및 감가상각 정보를 자산그룹 및 개별 자산 등으로 리스트로
보여주는 프로그램]

2. 태스크 흐름(task flow) (2/5): 화면 내 태스크 흐름 II
108
• 적용 원칙
1. 사용 습관 지원
2. 기억보다 단서 제공
• 분석
1. Asset report는 대부분 엑셀 파일로
다운로드 받는 태스크를 수행하지만
상당히 불편하고 번거로움
2. 엑셀로 다운로드 받기 위해서는 어떤
메뉴(영역 1)에 배치되어 있는지를
불필요하게 기억해야 하고, 세부
항목명 및 위치(영역 2, 3)도 기억해야
하는 인지적 부담감을 유발시키고,
소중한 태스크 시간을 낭비시킴
3. 자연스러운 태스크 흐름으로 전환하기
위해서는 ‘엑셀로 다운로드’ 항목을
영역 5에 배치하는 것이 태스크
효율성을 높이는 방안임
1
2
3
4
5
[Asset report 출력 확인 화면]
[Asset report 결과 화면]

2. 태스크 흐름(task flow) (3/5): 페이지 간 태스크 흐름 I
109
• 적용 원칙
• 분석
1. 검색에 필요한 항목을 입력한 후(영역
1) 검색 결과를 확인(영역 2)하고,
검색에 필요한 항목을 수정하기
위해서는 다시 영역 1로 이동해야 하는
번거로움이 있음
2. 자연스러운 태스크 흐름을 위해서
영역 1와 영역 2은 통합해야 함
1
[Customer Billing Print 조회 화면: 전판비 청구 — 판매 전력요금을 해당 청구 월별로
조회하는 프로그램]
2
[Customer Billing Print 결과 화면 : 전판비 청구 — 판매 전력요금을 해당 청구 월별로
출력하는 프로그램]

3. 폼(form) (1/7)
110
• 적용 원칙
1. 사용자 중심 레이블
• 분석
1. 영역 1: 사용자 중심적인 레이블은
Company code가 아니라
Company이어야 함. Company
code는 서비스 제공자 위주임
1
[Asset report 조회 화면: 자산조회 —보유하고 있는 자산에 대해서 다양한 조건으로
검색하여 자산의 취득가치 및 감가상각 정보를 자산그룹 및 개별 자산 등으로 리스트로
보여주는 프로그램]

3. 폼(form) (2/7)
111
• 적용 원칙
1. 중복 작업 지양
2. 사용자 실수 방지
• 분석
1. 영역 1: Fiscal year와 Posting date의
년도 입력 항목이 중복됨. Posting
date의 년도를 입력하면 자동적으로
Fiscal year가 입력되도록 처리 필요
2. 영역 2: 년도, 월, 일을 직접 입력하면
실수가 많이 발생함. 선택할 수 있도록
UI로 변경하는 것이 바람직함
3. 영역 2: 사용자가 당일 날을 기준으로
한달 정도 검색을 한다면, 자동으로
당일 날과 당일 날로부터 한달 일시가
세팅되도록 처리하는 것이 바람직함
1
2
[Temporary payment clearing 조회 화면: 전불금 관련 프로세스-한가지 업무에
연계된 3종류의 생성 전표 확인 하여 Clearing처리 지원하는 프로그램 ]

3. 폼(form) (6/7)
112
• 적용 원칙
1. 가로 스크롤 지양
2. 선택 정보와 미선택 정보 간 구별
3. 선택한 정보 전체 쉽게 확인
4. 영역별 직관적 식별 필요
• 분석
1. 영역별 데이터가 상당히 많다면,
영역별로 가로 스크롤과 세로
스크롤이 발생하여 화면의 복잡도가
과도하게 높아짐. 특히 각 영역별로
여러 데이터를 분산해서 선택하였다면
선택한 데이터를 통합적으로
확인하기가 어려움. 그러므로 현재의
UI 구조는 조정이 필요함
2. 영역별 식별성이 떨어짐. 영역별
타이틀이 잘 보이지 않기 때문임.
타이틀을 아이콘 영역보다 먼저
배치시키고, 타이틀 크기를 키워야 함
1
2
3
[Temporary payment clearing의 Cash journal document clearing 옵션 선택
결과 화면: 전불금 관련 프로세스-한가지 업무에 연계된 3종류의 생성 전표 확인 하여
Clearing처리 지원하는 프로그램(현금)]

3. 폼(form) (7/7)
113
• 적용 원칙
1. 유관 정보 간 상관성 표시
2. 선택 정보와 미선택 정보 간 구별
3. 도움말 지원
4. 유관 정보의 그룹핑
• 분석
1. 영역별 데이터를 선택하면 영역 3에서
유관된 항목의 데이터가 자동으로
변동됨. 이때 어떤 항목이 유관되었고,
어떻게 데이터가 변동되었는지를
확인할 수 있도록 조치가 필요함
2. 영역 3에서 balance가 0이 아니어도
작업을 완료할 수 있도록 영역 4를
체크할 수 있다는 설명이 필요함.
설명은 영역 3에 배치될 필요가 있음
1
2
4 3
[Temporary payment clearing의 ATO clearing 옵션 선택 결과 화면: 전불금
정산(ATO)-현금이 아닌 가지금 발생한 부분에 발생한 전표를 확인 하여 Clearing처리
지원하는 프로그램 ]

ZEC UI/UX Strategic Framework 1.0a by Billy Choi
Zero Effort
UI/UX Strategy
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
Load
Law of
conservation of
complexity
Quality in Use
F-shaped
pattern
based
Satisficing
UI
UX
Zero Effort
UI/UX Strategy
Connected
Shortcuts &
Defaults
Connected
FFA**
DAG***
ZEC UI
Strategy
Ferdinand de
Saussure’s
Syntagm &
Paradigm
Jean
Baudrillard’s
Simulation &
Hyperreal
Quantified
Self & Change
Life
**FFA=Feedback,
Feedforward and
perceived
Affordances
***DAG=The
Dopamine seeking
system, unconscious
selective Attention,
Goal-gradient effect
115
http://www.slideshare.net/BillyChoi/2014-web-ux-trends-zero-effort-connected-uxui-strategy

The Overview of ZEC(Zero Effort & Connected) UI/UX Strategy 1.0a
116
Man Machine
Interface
Human Computer
Interface
based context
H C
Interaction
based context
Info. Architecture
based context
H C
Interaction
based context
Info. Architecture
based context
H
Interaction
based context
Info. Architecture
based context
H
Group
Society
C
Content
Service
Interaction
based context
Info. Architecture
based context
H
G
S
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
C
C
S
Connected Thing
Culture-(eco)System
Company
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
Interaction
based context
Info. Architecture
based context
HCI1.0HCI2.0!HCI3.0?
UI
UX0.0UX1.0!UX2.0?
ZeroEffort
UI/UXStrategy
ZEC
UI/UXStrategy
http://www.slideshare.net/BillyChoi/20140523-zero-effort-connected-uiux-strategy-overview-v10a

117
HCD Human-Centered Design
UCD User-Centered Design
ACD Activity-Centered Design
GDD Goal-Driven Design (Persona & Scenario design)
CCD Collaboration-Centered Design (Agile UX)
MCD Metrics-Driven Design (Lean UX)

118
UI/UX
Method
I
UI/UX
Method
II
UI/UX
Method
III
UI/UX
Method
IV
UI/UX
Guideline
I
UI/UX
Guideline
II
UI/UX
Guideline
III
UI/UX
Guideline
IV

인용/참조 문헌
• 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)
119

• Designing Structure: Interaction Design (Christina Wodtke, Oct 2012)
• Human Computer Interaction 개론 (김진우, 2012)
• User Experience Deliverables (Jenna Yim, Jun 2011)
• Chapter 6: Usability: 편리한 시스템의 기초 (CheolSu Lim, 2011)
• HCI Quick Guide (Emanuel Fernandes, May 2010)
• Web and mobile forms design (Chui Chui Tan) - UserFriendly 2010 workshop (cxpartners, Nov 22, 2010)
• UX Design Deliverables: Expert's Choice (Lilia Manguy, Mar 2010)
• 사용성 (Usability)의 원칙 (Kim Min, 2010)
• Unify Your Deliverables (nathanacurtis, Mar 2009)
• The Ideal Ux Team And What They Produce (Dave Lougheed, Nov 2009)
• Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules (guest45d695, Jul 2008)
• Web Form Design Best Practices (Luke Wroblewski, Jul 22, 2007)
120

• Ethnography (Santosh Bhandari, Mar 29, 2013)
• Cultural probes in real life (gerrygaffney, Jun 11, 2012)
• UX of User Stories Workshop (Anders Ramsay, Aug 14, 2012)
• Usability behaviors: Usability and the SDLC (Ted Tschopp, Nov 04, 2012)
• Know Thy User: The Role of Research in Great Interactive Design (frog, Sep 2012)
• The Mobile Frontier (Rachel Hinman, Feb 2012)
• Introduction to AgileUX: Fundamentals of Customer Research (Will Evans, Jan 2012)
• Customer Research & Persona Development (Will Evans, Oct 2012)
• Introduction to UX Research: Conducting Focus Groups (Will Evans, Jan 2012)
• Midwest UX '12: Mapping the Experience (Chris Risdon, Jun 2012)
• Eye Tracking & User Research (Optimal Usability, Apr 2012)
• Taking it to the streets: Investigating mobile and web UX through field studies (Emma Rose, Jun 2012)
• NYTECH "Measuring Your User Experience Design“ (New York Technology Council, Mar 2012)
• How to Conduct UX Benchmarking (UserZoom, May 2012)
• Customer validation with Diary Studies (Boon Chew, Jan 2012)
• The Science of Great Site Navigation: Online Card Sorting + Tree Testing (UserZoom, Jul 2012)
• Introduction to Card Sorting (ThoughtFarmer, Sep 2012)
• Usability Testing Basics (Stephen Francoeur, Mar 2012)
• Storytelling: Rhetoric of heuristic evaluation (Southern Polytechnic State University, Mar 2012)
• Cognitive and pluralistic (Aarushi Mishra, Oct 2012)
• How to Quantitatively Measure Your User Experience (Richard Dalton, May 2012)
• Information Architecture Heuristics (Abby Covert, Jul 24, 2011)
• Diary Studies in HCI & Psychology (UPABoston, Jul 13, 2011)
• Remote Testing Methods & Tools Webinar (UserZoom, Dec 2011)
• Beyond User Research (Louis Rosenfeld, Mar 2011)
• Using Ethnographic User Research to Drive Knowledge Management and Intranet Strategy (NavigationArts, Dec 01, 2010)
• Remote Research, The Talk. (bolt peters, May 27, 2010)
• User Interview Techniques (Liz Danzico, May 2010)
• The new digital ethnographer’s toolkit: Capturing a participant’s lifestream (Christopher Khalil, Sep 04, 2009)
• Design Research For Everyday Projects - UX London (leisa reichelt, Jun 2009)
• Contextual Inquiry V1 (Rajesh Jha, Sep 11, 2008)
121

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

Zero effort UX UI Strategy

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (11)

Similaire à Zero effort UX UI Strategy

Similaire à Zero effort UX UI Strategy (20)

Plus de Billy Choi

Plus de Billy Choi (20)

Zero effort UX UI Strategy