Fasoo ED team UI/UX design seminar #1

1. Principle or Myth
Design의 원칙과 신화에 대해서

2. Principle ; 원칙
[명사] 1. 어떤 행동이나 이론 따위에서 일관되게 지켜야 하는 기본적인 규칙이나 법칙.
*Golden Ratio ; 한 형태를 이루는 점들 내의 비율 (예를 들
어 높이와 넓이의 비율)은 대략 0.618에 근접한다.

3. Universal
Principles
of
Design

4. Chunking 의미 덩이 만들기
정보를 처리하고 기억하기 쉽도록 많은 단위의 정보를 제한된 숫자의 단위나 묶음(Chunk)으로 결합하는 기법.
정보 처리에 관련하여 단기기억의 용량의 한계치는 일반적으로 7±2 묶음으로 알려져 있다.
7±2 Principle
Since human brain has some limits
on its capacity for processing
information, it deals with complexity
dividing information into chunks and
units. According to George A.
Miller’s studies humans’ short term
memory can retain only about 5-9
things at one time. This fact is often
used as an argument for limiting the
number of options in navigation
menus to 7; however there are
heated debates about The Myth of
“Seven, Plus or Minus 2″. Therefore
it’s not clear how the 7±2 Principle
can, could or should be applied to
the Web. Miller’s studies.

5. Alignment 정렬
공통의 행이나 열에 따라 모서리가 또는 공통의 중심에 따라 본체 같은 구성요소가 위치하도록 배치하는 것.

6. Alignment 정렬
공통의 행이나 열에 따라 모서리가 또는 공통의 중심에 따라 본체 같은 구성요소가 위치하도록 배치하는 것.

7. Alignment 정렬
공통의 행이나 열에 따라 모서리가 또는 공통의 중심에 따라 본체 같은 구성요소가 위치하도록 배치하는 것.

8. Fitts’ Law Fitts의 법칙
목표까지 움직이는 데 필요한 시간은 목표 크기와 목표까지의 거리의 함수이다.
즉 시작점에서 목표로 하는 지역에 얼마나 빠르게 닿을 수 있을지를 예측하고자 하는 것이다. 이는 목표 영역의 크기와 목표
까지의 거리에 따라 결정 되며 예를 들면 웹 페이지에서 링크가 걸린 버튼이 너무 작으면 클릭하기 힘든 이유를 설명하는 것
이다.
Fitts' law (often cited as Fitts's law)
is a model of human movement
primarily used in human–computer
interaction and ergonomicsthat
predicts that the time required to
rapidly move to a target area is a
function of the distance to the target
and the size of the target. Fitts's law
is used to model the act of pointing,
either by physically touching an
object with a hand or finger, or
virtually, by pointing to an object on
a computer monitor using a pointing
device. It was proposed by Paul
Fitts in 1954.

9. Hick’s Law Hick의 법칙
사용자에게 주어진 선택 가능한 선택지의 숫자에 따라 사용자가 결정하는 데 소요되는 시간이 결정된다는 법칙이다. 이는
일반적으로 사람들이 가능한 선택지의 묶음을 한번에 하나씩 고려하지 않는다는 데에서 기인한다. 그 대신 사람들은 선택
지들을 분류로 나누어 사고하며 결정에 있어 각 단계마다 남아있는 부분의 선택지를 제거하는 방향으로 사고한다. 단 몰입
도가 필연적으로 높은 선택 상황에서는 해당 법칙이 적용되지 않는다.
 먼저 제시되는 정보량을 가능한 줄인다 그러나 현실에서
적용 시에는 제한이 많다.
 정보를 의미덩이로 묶어(Grouping)준다.
 의미덩이로 만들어도 많다면 정보를 계층으로 구조화시킨
다 (예, 다단계 메뉴 구조, 절차를 나눈 구조).
 정보의 우선 순위를 주어 더 중요한 정보는 더 많이 노출
시키고 덜 중요한 정보는 노출시키지 않고 사용자 선택에
의해 노출 되도록 만든다.

10. Flexibility-Usability
Tradeoff 유연성-사용성 보상관계
시스템의 유연성이 증가하면 사용성은 감소한다. 예를 들어 단순한 리모컨은 사용하기가 매우 쉽
지만 유연성이 부족하며 다기능 범용 리모컨은 매우 유연성이 뛰어나지만 더 복잡하고 사용하기
어렵다.

11. Garbage In-Garbage Out
쓰레기를 넣으면 쓰레기가 나온다
시스템 결과물의 질은 시스템 투입물의 질에 달려 있다.

12. Principle
=
Common Sense

13. Common Sense
=
About Human

14. Design
=
For Human

15. Myth ; 신화
[명사]
1. 고대인의 사유나 표상이 반영된 신성한 이야기. 우주의 기원, 신이나 영웅의 사적(事績), 민족의 태고 때...
2. 신비스러운 이야기.
3. 절대적이고 획기적인 업적을 비유적으로 이르는 말.
현재 상식으로 여겨지는 사고체계에서 설명할 수 없는 현상을 설명하기 위한 일련의 행위. (과거에는 인류의 기원, 천지
창조 등이었다면 현재는 지배적 패러다임 내에서 일어날 수 없는 기이한 현상을 신화라 부른다.)
“생각 없이 적용되는 법칙은 신화가 된다.”

16. Myth일 수도 있는
Design Principle들

17. “모든 페이지는 3회 이내의 클릭으로 사용 가능해야 한다?”
사용성 테스트에서는 소위 말하는 3클릭 법칙 에 대해 오랫동안 연구해 왔습니다. 일반적인 믿음과는 다르게, 사람들은
자신이 원하는 것을 3회의 클릭 안에 찾을수 없다고 해서 사이트를 떠나지는 않습니다. 사실, 클릭 횟수는 사용자의 만
족도나 성공지수에 별 영향을 끼치지 않습니다. 적은 클릭이 사용자를 행복하게 만드는 것은 아니며, 빨라졌다고 느끼게
하는 것도 아닙니다.
중요한 것은 내비게이션의 편리함, 그리고 사용자의 동선을 따라 끊어지지 않고 주어지는 정보들 입니다. 사람들이 클릭
에 대해 고민하지 않게 만든다면, 그들은 몇 회 더 클릭하는 것을 주저하지는 않을 것입니다.

18. “디자인은 독특해야 한다?”
많은 디자이너들이 전통적인 UI 디자인 패턴들을 받아들이기보다는 완전히 새로 만들려고 시도하곤 합니다. 그러나, 그러한
디자인 전통들은 이미 사용성을 검증 받았으며 잘 동작하고 있음을 인정해야 합니다. 사용자들이 이미 그것을 잘 알고 있기
때문에, 당신이 추가적인 설명이나 매뉴얼을 제공할 필요도 없습니다. 사용자들은 진기함 보다는 편리함을 더 선호하기 때문
에, 일반적인 패턴들은 당신의 방문자들에게 유용할 것입니다.
새로운 접근이 필요할 때도 있을 것입니다. 하지만 이미 존재하는 패턴보다 당신의 해결책이 100% 더 낫다고 확신할 수 있어
야 할 것입니다.

19. “디자인이 좋다면, 세부사항은 문제가 되지 않는다?”
Charles Eames는 “세부사항은 세부사항이 아니다. 그것들이 디자인을 만든다”라고 말했습니다. 깔끔한 마무리들 – (무엇이
틀렸는지)정보를 제공하는 에러 메시지, 회원 가입 페이지의 상세한 설명들, 카테고리 페이지에서 상품의 재정렬 등 – 은 사용
자 경험에 큰 영향을 미칩니다.
세부사항들이 오래 갑니다. 애플이 전력으로 행하는 것이 바로 이것 – (사용자 경험의)가장 세부적인 조각들까지 미치는, 강박
관념이라고 할 만한 주의와 노력 – 입니다.

20. “디자인이 좋다면, 세부사항은 문제가 되지 않는다?”
Charles Eames는 “세부사항은 세부사항이 아니다. 그것들이 디자인을 만든다”라고 말했습니다. 깔끔한 마무리들 – (무엇이
틀렸는지)정보를 제공하는 에러 메시지, 회원 가입 페이지의 상세한 설명들, 카테고리 페이지에서 상품의 재정렬 등 – 은 사용
자 경험에 큰 영향을 미칩니다.
세부사항들이 오래 갑니다. 애플이 전력으로 행하는 것이 바로 이것 – (사용자 경험의)가장 세부적인 조각들까지 미치는, 강박
관념이라고 할 만한 주의와 노력 – 입니다.

21. “더 많은 선택과 기능은 더 많은 만족감을 가져온다?”
선택 사항을 갖는 것은 좋다고 할 수 있습니다. 우리는 선택하는 것에 익숙해져 있고, 제어할 수 있다면, 기꺼이 그것에 가치를
둔다. 그러나, 웹사이트/웹 어플리케이션에서 더 많은 선택을 제공할수록, 인터페이스는 더 이해하기 힘들어집니다. 너무 많
은 옵션을 제시하는 것은 종종 결정능력의 마비와, 좌절감을 불러일으킨다. 일반적인 규칙으로서, 사용자들이 풍부한 기능에
가치를 두는 것은 실제로 그것을 사용하기 이전뿐입니다. 일단 그것을 사용하기 시작하면, 간단한 해결책이 높은 만족도를 얻
습니다.

22. “아이콘은 사용성을 증가시킨다?”
많은 연구들에서 아이콘은 기억하기
힘들며, 종종 매우 비효율적임을 보여
주고 있습니다. 마이크로소프트 아웃
룩의 툴바가 좋은 예죠: 아이콘만(텍스
트 없이) 사용했던 기존의 툴바는 사용
?
성이 형편없었고, 아이콘 디자인과 위
치를 바꾸는 것은 그다지 도움이 되지
못했다. 도움이 된 것은 아이콘 옆에 텍
스트 라벨을 제공한 것이었습니다. 이
렇게 함으로서 사용성이 즉시 증가하
였고, 사람들은 툴바를 사용하기 시작
했습니다. 다른 연구에서, UIE 팀은 사
람들이 기능을 그래픽으로 표현한 것
(아이콘)이 아니라, 그 위치를 기억한다
는 것을 관찰하였습니다.
대부분의 프로젝트에서, 아이콘을 제
대로 사용하기는 매우 어려우며 많은
테스트를 필요로 합니다. 무언가를 추
상화하려는 목적이 있다면, 아이콘이
언제나 제 기능을 하리라 기대하긴 어
렵습니다.

23. “공백은 공간의 낭비이다?”
많은 사람들이 종종 공백이나 여백은 무시하거나 지나칩니다.
많은 사람들이 공백이나 여백을 화면 자원의 낭비라고 생각할지도 모르지만, 공백은 디자인에서 중요한 요소이며, “수동적인
배경이 아니라 능동적인 요소로 간주되어야 합니다” (Jan Tschichold이 1930년에 남긴 말)
공백은 컨텐츠의 가독성을 높히고 우선순위를 암시할 뿐 아니라, 시각적인 레이아웃과 브랜드의 위치에 중요한 역할을 합니
다.

24. Design Principle을
준수하자.

25. 그러나 Principle을
왜 준수해야 하는 지
잊는다면…

26. 그 순간
Principle은
Myth 가 된다.

27. Thank U!