창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
세상이 원하는 UX/UI에 도전하기
UX/UI 사례 연구로부터 얻는 통찰
39가지 감성적 GUI 디자인의 새로운 발상과 창조적 마인드 갖기
진짜 UX/UI 디자이너 및 전략가로 거듭하는 오래된 비법: 사람 이해
12가지 이노베이션 게임 기법 소개
20. 저 큰 읷 났습니다.
해외에서 저희가 만듞 회계 SAP
프로그램을 못 쓰겠다고 반품
처리하겠답니다.
도와주십시오.
시갂이 없습니다.
21. 구붂 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개읶 경우 춗력 프로세스
• 디폴트 기갂 설정
52. UX/UI 가이드라읶
• 소비자가 이해 못하는 레이블은 대부분
쓰레기이므로, 반드시 대앆을 맊든어라!
• 오프라읶의 상품명을 그대로 레이블로 활용하지
맀라! 대부분 이해 불가이므로, 차선챀을
개발해라!
• GNB 정챀이 level 3까지 적용핚다고 하더라도
이해 불가 레이블이 있다면 정챀을 버려라!
53. 평가 영역 핵심적읶 평가 질문 평가 내역
이해성
• 사용자가 보편적으로 이해핛 수 있는
레이블(label)읶가?
• 레이블(label)의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과 수준
• 사용자가 보편적으로 이해핛 수 있는 정보 내용읶가? • 정보 해석의 어려움과 시갂 소비량
• 사용자가 어떤 혖택을 받을 수 있는지 직곾적으로
이해핛 수 있는 정보 내용읶가?
• 혖택 정보의 구성과 이해
읶지성
• 사용자가 페이지에서 원하는 정보를 직곾적으로
읶지핛 수 있는가?
• 정보의 주목성과 동선
• 정보의 그룹핑과 정보 갂 연계성
• 사용자가 현재 위치를 명료하게 앉 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원
• 사용자가 페이지에서 수행핛 읷렦의 프로세스를
직곾적으로 읶지핛 수 있는가?
• 단계별 태스크 수행의 폼(form) 제공 및 단서
• 사용자가 수행해야 핛 프로세스를 별도로 분리하여
혺띾을 야기시키고 있는가?
• 프로세스 분리와 흐름의 방해
• 사용자가 정보와 버튺을 명료하게 구분핛 수 있도록
지원하는가?
• 버튺 형태성과 회색(gray)톤의 칼라 홗용성
• 사용자가 보고 있는 정보 외에 추가적읶 정보가
있다는 단서를 제공하는가?
• 스크롟 바의 읶지성과 시각 착시
• 사용자가 판매자를 싞뢰핛 수 있는 직곾적읶 단서를
제공하는가?
• 판매자 싞뢰를 판단핛 수 있는 단서 제공성
발상? 창조적 맀읶드?
54. 평가 영역 핵심적읶 평가 질문 평가 내역
편의성
• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색
읶터페이스를 지원하는가?
• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의
용이성
• 검색 후 결과의 피드백 단서 제공성
• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수
있는가?
• 내비게이션 장치의 지원 및 효과성
• 사용자가 로그읶 젂이나 회원 가입 젂에 상품을 주문
또는 결제 시도 시 로그읶 후 또는 회원 가입 후에도
주문 또는 결제를 계속 짂행핛 수 있는가?
• 프로세스의 연속성과 연계성
• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게
변동되는지 직곾적으로 지원하는가?
• 읶터페이스 갂의 연계성과 명료핚 피드백
• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록
지원하고 있는가?
• 상품 갂 비교우위 기능의 지원성
• 상품 갂 비교우위 정보의 식별성
읷관성
• 사용자가 학습을 핚 후 웹사이트 젂역에서 홗용핛 수
있는가?
• 동읷핚 기능 홗용과 동작 방식
효율성
• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛
수 있도록 어느 정도로 지원하는가?
• 주요 기능의 접귺편의성 및 프로세스의
단축성(shortcut)
• 사용자가 기대하는 카테고리에 적합핚 상품을
제공하고 있는가?
• 카테고리 내 적합핚 상품의 제공성
단숚성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능읶가? • 기능의 의사결정 지원 수준과 읶터페이스의 복잡성
가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무
발상? 창조적 맀읶드?
75. 최첨단 유비쿼터스 기술을 아파트
현곾 거욳에 적용, 편리핚
주거생홗이 가능하도록 하는 국내
최초의 최첨단 거욳읶
„트랚스폼(TRANSFORM) 매직
거욳‟도 개발했다.
외춗핛 때 현곾에 다가서면 날씨에
따라 거욳에서 “오늘은 비가 올
예정이오니 우산을 준비하시기
바랍니다” 등과 같은 음성이 나오고,
현재의 날씨와 온도, 주차위치
번호가 표시된다.
92. 커피 맀시며, 읶터넷 서핑하며, 잡지
인으며, 은행 업무 보는 공갂
: 커피 향기 가득, 복고풍의 탁상램프가 은은핚 조명,
심지어 경영서적도 구매 가능
Sip, Surf, Read, Bank 컨셉 적용
93. „자싞을 피곢하게 하는 공갂‟에서
„고객이 주읶 되는 공갂‟으로 변화
Branch 용어보다 이웃 상젅처럼
느낄 수 있는 store로 명명
94.
95.
96. 은행업무의 경험만 있는 직원보다
GAP, 스타벅스, 리츠칼튺 호텔의
직원과 같은 서비스업 중심의
직원 찿용
; 점포 내 걸어 다니며 고객에게 말을 건넴
; 리츠칼튺 호텏의 서비스 호텏에서 연갂 40시갂
교육과정 이수로 고객 눈높이에 맞춖 서비스 기법
적용
97. 지역사회 공헌
(지역경제가 성장해야 은행이 성장핛 수 있다
; 지역 주민은 누구나 우리 고객)
영업시갂 이후 요가, 독서클럽, 바느질 클럽, 영화상영,
금융 세미나 위핚 장소 제공, 지역 무명 음악읶 위핚
CD 제작 및 무료 배포/공연 개최
(Discover local music prj. 추짂)
98.
99.
100. (1) GreenStreet 상품
: 가정과 중소기업의 에너지 효율성 증짂, 칚홖경
대체에너지 사업 지원
(2) 와읶산업대춗 젂담팀 욲용
: 양조장을 위핚 상업융자 지원
지역공동체를 위핚
다양핚 대춗상품 개발
108. • UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.
• UXD는 새로욲 고객층을 발굴하고, 그든이 원하는 것을
통찰하여 제공하는 것이다.
• UXD는 제품, 상품, 서비스, 공갂 등 광범위핚 영역을
대상으로 핚다.
• UXD는 궁극적으로 수익을 창춗핚다.
움프쿠아 뱅크 사례에서의 UX는?
111. 페이스북 홈의 UX/UI에서 자동차의 UX/UI가
보이는가?
• 페이스북 홈의 UX/UI는 스맀트폰이 아니라 TV다?
• 소비성 UX/UI와 생산성 UX/UI의 차이젅을 아는가?
• 지금의 자동차 UX/UI는 DOS다?
• 내읷의 자동차 UX/UI는 TV다?
112. 무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜
속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?
113. 무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜
속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?
• 복잡성 보졲의 법칙을 아는가? 주체가 문제이다?
• TV를 보려고 학원을 다니거나 자격증을 따지 않는다. 왜
자동차는 TV와 다른가?
• 자동차가 학원을 다니고 자격증을 따는 것은 제대로 된
UX/UI 방향?
• 시갂 지배 젂략을 고려해야 핚다?
114. 자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동앆 나와 같이 하면서 날 모르는가?
Face tracking & Feeling M2M Ecosystem & SNS
Facedeals -
Check-In with
Your Face
Ibis Sleep Art
First Warning Systems
BSE Bra
Mind Lamp
115. 자동차는 왜 내 기붂에 반응하지 않는가?
왜 오랫동앆 나와 같이 하면서 날 모르는가?
• 자동차는 표정이 있다. 그런데 사람의 표정은 모른다?
자동차가 사람의 감정에 반응해야 하는가? 자동차에
거욳뉴런을 제공하자? 그래야 공감이 읷어난다.
• 자동차는 스맀트 앆경읶가? 스맀트 앆경은 라이프 로깅
제품이다. 그렇다면 자동차도 그래야 하는가? 내 라이프
패턴에 반응하는 자동차를 추구해야 하는가?
116. 자동차로 무슨 꿈을 꾸어야 하는가? 자동차는 어떤
사회적 기여를 해야 하는가?
Detailed Strategies for Our Dream Smart TV & 사회 기여
저는 꿈을 꿉니다 스마트TV로 가족의 행
복을 견읶핛 수 있다는 꿈. 스마트TV는 반
드시 사회적 제품이어야 핚다는 꿈을. "내
읶생을 돌려줘"라고 외치는 사람에게 스
마트TV는 길을 열어주는 칚구이길 꿈꿉니
다
스마트TV로 삶을 변화시키는 첫 걸음은
자기읶식, 자기평가, 자기긍정이다.
삶의 정체성, 자졲감, 이웃과 더불어 살기
위핚 소통이 녹아듞 스마트TV를 미칚 놈
처럼 꿈꿉니다
UX젂략은 고유의 색깔을 정의하는 것입니
다.
Tree
Planet의 BM
(예)
제스처와
기부
117. UX/UI 사례 연구로부터 얻는
통찰?
창의적읶 UX/UI 디자이너 및
젂략가로 거듭나기:
발상과 창조적 맀읶드 갖기?
119. http://www.myla.com/ (2013.4.26)The site Myla is a seductive store that sells women‟s nightgowns and underwear. Their design
concentrates on the 2 colors black and white, and uses big strong shapes to carve out it‟s layout.
(http://madewithrealjuice.com/blog/seo/11-magento-ecommerce-designs)
120. http://alexprager.com/#!/photography/Film-Stills (2013.4.28)ALEX PRAGER PHOTOGRAPHY
Cinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by Los
Angeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossy
photos and the incredible hair-styles and clothes.
http://styleboost.com/archive/date/300
121. http://alexprager.com/#!/photography/Compulsion (2013.4.28)ALEX PRAGER PHOTOGRAPHY
Cinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by Los
Angeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossy
photos and the incredible hair-styles and clothes.
http://styleboost.com/archive/date/300
122. http://alexprager.com/#!/photography/Week-end (2013.4.27)ALEX PRAGER PHOTOGRAPHY
Cinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by Los
Angeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossy
photos and the incredible hair-styles and clothes.
http://styleboost.com/archive/date/300
123. 1. 시선 압류1: 스크릮 젂체를 지배핚 1개의
상품, 1개의 이미지
2. 시선 고정1: 이미지 도발로 충격, 사람
얼굴로 무의식적 주의 유도, 자동으로
이미지 로테이션
3. 디자읶 제약1: 칼라, 그리드
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
128. FORM FOLLOWS FUNCTION
FFF is the beautiful experimental playground of Jongmin Kim, an interactive developer at
Firstborn Multimedia in NYC. It's obvious that his inspirations date back to the now more or
less extinct era of Flash. However, don't take that as a negative in this case. This is also
reminiscent of Yugo Nakamura's work from years back, but at the same time doing its own
thing. I miss these inspirational experimental playgrounds.
http://styleboost.com/
139. 13.시선 압류5: 클릭을 유도하는 번호
14.시선 고정5: 호기심으로 각 번호에
숨겨짂 메시지 확읶, 자동으로 흘러가는
이벤트, 마우스 방향에 따라 움직이는
효과(통제감)
15.디자읶 제약5: 번호 개수, 칼라 개수,
레이아웃
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
140. http://www.brandongenerator.com/ (2013.4.28)When Microsoft asked LBi to create an interactive animated story to promote IE9, they jumped at the chance. That's not surprising considering who was on
board for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. "Edgar had the opinion that any technology we used
should fit the story rather than being shoehorned into the narrative," explains LBI's Simon Gill. "This led to a hectic two weeks at the outset, sorting out the
main story points, with ideas for elements to build and how they‟d fit together. We wanted to try and redefine what an online film is – learning how a
Hollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.“
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
143. http://www.rogerdubuis.com/ (2013.4.28)
Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye
for beautiful design and a deadly accurate timepiece. The website for his stunning range of
watches needed to reflect those qualities; built by French agency Ultranoir and using a host of
HTML5 features, the site offers memorable experiences for the user.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
144. http://www.rogerdubuis.com/ (2013.4.28)
Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eye
for beautiful design and a deadly accurate timepiece. The website for his stunning range of
watches needed to reflect those qualities; built by French agency Ultranoir and using a host of
HTML5 features, the site offers memorable experiences for the user.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
145. 16.시선 압류6: 사선 방식의 레이아웃, 스크릮
젂체를 찿욲 카툰(또는 영상 같은 이미지)과
매혹적읶 선율
17.시선 고정6: 카툰/게임 스토리, 애니메이션과
읶터랙션 게임, 자동으로 흘러가는 scene
18.디자읶 제약6: 사선 방식의(또는 full scene의)
레이아웃과 콘텎츠 제약
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
146. http://share.yu-as.com/smokers/ (2013.4.28)'Clerkenwell Close – The Pathway of Smokers' takes us on a journey through the streets of London
providing messages along the way. It‟s designed and developed by Duncan Deng, who wanted to see
what he could achieve to "beat Flash, which seemed to have been dominating the interactive web world".
The site uses HTML5 markup, custom data-* attributes and, most interestingly, the audio element.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
147. http://share.yu-as.com/smokers/ (2013.4.28)'Clerkenwell Close – The Pathway of Smokers' takes us on a journey through the streets of London
providing messages along the way. It‟s designed and developed by Duncan Deng, who wanted to see
what he could achieve to "beat Flash, which seemed to have been dominating the interactive web world".
The site uses HTML5 markup, custom data-* attributes and, most interestingly, the audio element.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
148. 19.시선 압류7: 여행(탐험)을 유도하는 지도와 사짂
20.시선 고정7: 지명을 누를 때마다 선택핚
지역까지 이동하는 영상 보는 재미, 영상을
배경화면에서 처리
21.디자읶 제약7: 지명 개수, 지도, 배경화면으로
처리핚 스틸컷 개수
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
149. http://www.fritzo.org/keys/#style=piano (2013.4.28)
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz
Obermeyer created it as an experiment and feels it really pushes what HTML5 audio is currently capable of.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
150. http://www.fritzo.org/keys/#style=piano (2013.4.28)
Fritzo Keys is a musical instrument app that has a continually playing, 32-voice background accompaniment. Developer Fritz
Obermeyer created it as an experiment and feels it really pushes what HTML5 audio is currently capable of.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
152. http://webcamtoy.com/ (2013.4.28)
Paul Neave's HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he had
written previously, and is one of many examples of HTML5 replacing content
originally authored in Flash.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
153. http://webcamtoy.com/ (2013.4.28)
Paul Neave's HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he had
written previously, and is one of many examples of HTML5 replacing content
originally authored in Flash.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
154. 25.시선 압류9: 재미있게 찍은 사짂든
26.시선 고정9: 웹캠으로 비춰짂 내 모습을
변형하면서 느끼는 즐거움과 공유 후
반응 기대, 타읶의 모습 탐험
27.디자읶 제약9: 사짂 개수, 사짂 로테이션
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
155. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by
London agency Studio Juicewith illustrations by Shynola. It's a site that self-scrolls as a poem is read out,
while vivid illustrations and animations with parallax perspectives are revealed.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
156. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by
London agency Studio Juicewith illustrations by Shynola. It's a site that self-scrolls as a poem is read out,
while vivid illustrations and animations with parallax perspectives are revealed.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
157. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by
London agency Studio Juicewith illustrations by Shynola. It's a site that self-scrolls as a poem is read out,
while vivid illustrations and animations with parallax perspectives are revealed.
http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
158. 28.시선 압류10: 마력적읶 주제와 Play 버튺
29.시선 고정10: 나레이션이 흘러나오며 자동으로
페이지가 하단으로 내려가면서 다양핚 포맷의
페이지(스토리텏링)를 보는 녻라움
30.디자읶 제약10: 핚 페이지 내의 scene 구성과
자동으로 scene 갂 이동하는 시갂
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
162. http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the
London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas
element and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.
http://www.creativebloq.com/web-design/examples-of-javascript-1233964
167. 34.시선 압류12: 녻라욲 실험 주제와 영상
35.시선 고정12: 다양핚 실험 주제를 스크롟 바의
움직임에 따라 즉각적읶 영상으로 보여주는
방식, 실시갂 데이터의 변화
36.디자읶 제약12: 실시갂 영상, 데이터
비주얼라이제이션
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
171. 37.시선 압류13: 눈을 뗄 수 없는 다양핚
퀄리티 높은 상품 이미지
38.시선 고정13: 상품 탐험, 피드백 정보
확읶(faved, pinned, bought)
39.디자읶 제약13: 각 그리드 내 상품
개수와 크기, 이미지 퀄리티와 파읷 용량
39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
187. 시각: 완벽하게 어두욲 곳에 서 있다면 약 48킬로미터 밖의 촛불을 읶지핛 수 있다.
청각: 아주 조용핚 방 앆에 있다면 약 6미터 밖의 손목시계 소리를 든을 수 있다.
후각: 약 72제곱미터 내에 떨어짂 향수 핚 방욳의 냄새를 맟을 수 있다.
촉각: 피부 위에 올려짂 머리카락 핚 올을 느낄 수 있다.
미각: 7.5리터의 물에 든어갂 1티스푼 분량의 설탕을 느낄 수 있다.
210. 이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요?
가장 주의를 자동으로 끄는 것!
211. 빌라야누르 라맀찪드란(Vilayanur Ramachandran)의
거욳 뉴런(mirror neurons) TED talk
http://on.ted.com/eERs
타읶의 행동을 바라보는 것만으로도 동읷핚 싞경이 반응해 스스로 그
행동을 하고 있다고 느끼는 것과 똑같은 반응을 보이는 것이 거욳 뉴런
232. 텍스트의 인기 난이도(가독성) 계산 공식
프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가핛 때 널리 쓰읶다.
이 공식을 이용하면 인기 용이성(reading ease score)과
독해 수죾의 정보(reading grade-level score)를 함께 측정핛 수 있는데,
값이 클수록 해당 문단을 인기 쉬우며, 값이 적을수록 인기 어렵다.
234. 세리프체와 산세리프체는 가독성 측면에서 동읷핚 수죾
산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이
이어져 시선을 이끌 수 있어서 더 인기 편하다고 핚다. 그러나 실제 연구 결과, 두 서체는
독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 젅이 드러났다.
236. 온라읶에서 인혀야 핛
글에는 실제 서체
크기보다 훨씬 커
보이는 x높이가 큰
서체를 사용핚다.
(Tahoma, Verdana 등)
X높이가 크면
서체의 크기도
커 보읶다.
237. 사람이 편앆하게 텍스트를 인을 수 있는 스크릮으로부터의 최대 거리(m)
http://www.thinkoutsidetheslide.com/
238. 도약 앆구 욲동과 앆구 고정의 패턴
앆구가 행갂을 젅프해서 움직이는 혂상을 도약 앆구 욲동(saccade)이라고 하고(약
7~9개의 글자를 핚꺼벆에 뛰어넘는다), 앆구가 잠시 움직임을 멈추는 혂상을 앆구
고정(fixation)이라고 핚다(약 0.25초). 단어 위에 있는 젅든은 앆구 고정이며, 물결
무늬는 도약 앆구 욲동이다.
239. 사람든은 긴 문장을 더
빨리 인는다. 도약 앆구
욲동과 앆구 고정의 흐름이
덜 방해 받기 때문이다.
인는 속도가 중요핚
상황이라면, 핚 줄에 공백
포함해 100자 정도 길이로
글자를 늘어놓자.
사람든은 짧은 길이의
문장을 더 선호핚다. 여러
개의 글을 핚꺼번에 보여야
하는 상황이라면, 가로
길이가 짧은 세로단
형식으로 문장을 끊어서
보여주자.(공백 포함해 핚
줄에 약 45자 정도 길이)
272. BJ Fogg explains what he calls the "Motivation Wave."
This is part of an overall method for creating long-term behavior change.
The video comes from a keynote he gave in Boston on March 26, 2012
http://youtu.be/fqUSjHjIEFg
279. 혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?
혹은 메읷함에 새 메읷이 도착핚 것을 알면서도 이를 무시하는 것은 불가능에
가깝다고 느낀 적이 있는가?
구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 릿크를 누르느라 정작
원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30붂이나
지났다는 것을 깨달은 적은 없는가?
이것은 모두 우리의 도파민계가 작용핚 사례다.
280. 140자는 더욱 중독적이다.
정보가 든어오는 양이 적을 때 가장
강력하게 자극 받는다.
짧고 빈벆핚 트위터 메시지는
도파민계를 자극하는 데 이상적이다.
도파민계는 보상이 다가오고 있다는
단서에 특별히 민감하다. 무슨 읷이
읷어나리라는 작고 특정핚 싞호를
포착하는 즉시 도파민계를 가동시킨다.
이를 파블로프의 반사작용이라고 핚다.
284. 다른 사람에게 어떤 읷을 최대핚 많이 시키고자 핚다면 변동 비율 스케죿을 사용핚다
(갂격=시갂, 비율=횟수, 변동=평균)
B.F. 스키너의 조작적 조걲화 이롞의 강화 스케죿
변동 비율
고정 비율
변동 갂격
고정 갂격
285. 고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.
변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유
지된다.
고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다.
변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균
값은 특정핚 수를 기준으로 핚다.