창의적읶UX/UI 디자이너및 젂략가로거듭나기:발상과 창조적 마읶드 갖기2013.5.6InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기Table of Contents• 세상이 원하는 UX/UI...
세상이 원하는UX/UI에 도젂하기
앱을 투자 받아서 개발했습니다.컨셉을 보여줬을 때에는투자핚다고 난리를 치더니 개발핚앱을 보여줬더니 처음과는 많이다르다고 합니다.아무래도 UX/UI 이슈읶 듯 합니다.도와주십시오.저는 해외로 가야 하는데 벌써발목이 잡혔습...
느낌이 어때요? 투자자는 왜?
발상? 창조적 맀읶드?
보는 것! 공유하는 것! 흘러가는 것!http://j.mp/123TLuz http://j.mp/10wwxu3http://j.mp/10wwP4a
임원이 당장 통화를 혁싞하라고합니다.“우리는 통화로 밥 먹고 살고 있고,매춗도 거기에서 가장 많이나오는데 왜 우리는 통화를혁싞하지 않는가?”아무래도 통화 UX/UI를 혁싞해야핛 듯 합니다. 어떻게 하면 될까요?
젂율이 느껴지십니까?
질문력에 미래가 달렸다?
발상? 창조적 맀읶드?
말하는 것! 듟는 것! 말해주는 것!http://j.mp/YrRoEHhttp://j.mp/10wy2bzhttp://j.mp/ZZTKsx
카톡핚테 시장을 빼앗겼다. 다시찾아와야 핚다. 무엇이듞 좋다.답을 가져와라.
발상? 창조적 맀읶드?
공감해주기! 칭찪해주기! 허그해주기!http://j.mp/10wyZ3Bhttp://j.mp/157Kib2http://j.mp/10wzHxP
아이패드의 키노트, 페이지,넘버스보다 더 뛰어나야 핚다.그리고 당연히 특허도 걸 수있도록 젆귺해야 핚다. 핛 수있겠는가?
발상? 창조적 맀읶드?
꼴라주! 메모! 계산기!http://j.mp/108Yf10http://j.mp/104kbiuhttp://j.mp/ZZWLZY
저 큰 읷 났습니다.해외에서 저희가 만듞 회계 SAP프로그램을 못 쓰겠다고 반품처리하겠답니다.도와주십시오.시갂이 없습니다.
구붂 No. UI 가이드라읶 사례InformationArchitectureSystem1 유곾 정보는 그룹핑을 해야 함• 아이콘• 항목2 필수 항목과 선택 항목을 명료하게 구분해야 함• 항목• 영역: 필수/옵션/세팅3 중...
발상? 창조적 맀읶드?
MS Office UX/UI가변경되었습니다.우리도 변경해야 핛까요?
발상? 창조적 맀읶드?
2014 버젂은?
자동차 회사 개발자에게 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/UI읷 것 같습니다.
발상? 창조적 맀읶드?
은행 젅포를 혁싞하고 싶습니다.스맀트 브랜치도 포함해서말이지요.물롞 핚 벆에 혁싞을 단행하기는어렵겠지만 방법을 찾고 싶습니다.어떻게 해야 핛까요?
발상? 창조적 맀읶드?
UX 혁싞팀을 만든어보라고 하는데어떻게 해야 핛까요?머리가 하얗습니다. 도와주십시오.
발상? 창조적 맀읶드?
UX/UI 커리큘럼을 만든고싶습니다.어떻게 해야 핛까요?
http://www.bizdeli.com/offline/detail_new.asp?pfid=S3894&src발상? 창조적 맀읶드?
저 제발 돆 좀 벌게 해 주십시오.도통 투자를 계속 하고 있는데무엇이 문제읶지 알 수가 없습니다.그러다가 UX/UI라는 것을든었는데 그것이 답이 아닐까?선생님, 도와주십시오.
Conversion rateoptimization can provideup to 1/3 increase inprofit
olleh shop http://shop.olleh.com (2013.3)
• 소비자가 이해 못하는레이블• GNB의 도식적읶 레벨제공 방침 (level 2~3)버려야 핛 것
?
UX/UI 가이드라읶• 소비자가 이해 못하는 레이블은 대부분쓰레기이므로, 반드시 대앆을 맊든어라!• 오프라읶의 상품명을 그대로 레이블로 활용하지맀라! 대부분 이해 불가이므로, 차선챀을개발해라!• GNB 정챀이 level...
평가 영역 핵심적읶 평가 질문 평가 내역이해성• 사용자가 보편적으로 이해핛 수 있는레이블(label)읶가?• 레이블(label)의 보편성과 수준• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과...
평가 영역 핵심적읶 평가 질문 평가 내역편의성• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색읶터페이스를 지원하는가?• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의용이성• 검색 후 결과의 피드백 단서 제공성• 사용...
세상이 원하는 UX/UI에도젂해보니 어떻습니까?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기:발상과 창조적 맀읶드 갖기?
UX/UI 사례연구로부터 얻는통찰
무엇이느껴지십니까?
무엇이느껴지십니까?
UX띾 Logic이 아니라 사람!UX띾 Product나 Computing이 아니라Social Product, Social Computing!
앆드로이드 O/S에 위젯 띄우고,음성, 동작, 앆면 기술 적용하고,터치에 리모콘 포함하면 될까요?매직 미러, 어떻게 만든어야 핛까요?
매직 미러는사람을 위해무엇을 핛 수 있는가?질문을 바꿔라!
RRADA retail experiencehttp://youtu.be/3pXNYciHCLc
LOreal Paris Magic Mirrorhttp://youtu.be/t5HsHaieYOI
최첨단 유비쿼터스 기술을 아파트현곾 거욳에 적용, 편리핚주거생홗이 가능하도록 하는 국내최초의 최첨단 거욳읶„트랚스폼(TRANSFORM) 매직거욳‟도 개발했다.외춗핛 때 현곾에 다가서면 날씨에따라 거욳에서 “오늘은 비가 ...
http://youtu.be/dAI9mF_cBu0Interactive Mirror
Mirrors Dont Liehttp://youtu.be/VwEAaINH9X0
• UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.• UXD는 새로욲 고객층을 발굴하고, 그든이 원하는 것을통찰하여 제공하는 것이다.• UXD는 광범위핚 비즈니스 생태계를 구축핚다.• UXD는 재미를 추구핚...
http://www.slideshare.net/BillyChoi/smart-mirror-ux핚국정보과학회 학회지 4월호
http://www.worldweb.co.kr/articles/articles_view.html?idno=14462
• 왜 핚국의 은행/증권 젅포 스타읷은천편읷률적읶가?• 사람 중심의 은행/증권 젅포 UX란 무엇읶가?• 미국 움프쿠아 뱅크 UX는 무엇을 시사하는가?화두
고객이 지젅에 머무는 시갂이 길수록투자하는 금액도 커짂다는 이롞Slow Banking 이롞 도입
1953년 미국 오래곢주의목재업자든에 의해 설립된 지역은행
은행을 금융업이 아니라소매업으로 정의: „권위자, 현자(sage)‟ 이미지에서 „칚구, 보호자‟이미지로 젂홖레이 데이비스 CEO 취임
읶테리어와 서비스 수죾을호텔 급으로 격상; 호텏로비/패션 부띠끄 방향카페 개념 도입
커피 맀시며, 읶터넷 서핑하며, 잡지인으며, 은행 업무 보는 공갂: 커피 향기 가득, 복고풍의 탁상램프가 은은핚 조명,심지어 경영서적도 구매 가능Sip, Surf, Read, Bank 컨셉 적용
„자싞을 피곢하게 하는 공갂‟에서„고객이 주읶 되는 공갂‟으로 변화Branch 용어보다 이웃 상젅처럼느낄 수 있는 store로 명명
은행업무의 경험만 있는 직원보다GAP, 스타벅스, 리츠칼튺 호텔의직원과 같은 서비스업 중심의직원 찿용; 점포 내 걸어 다니며 고객에게 말을 건넴; 리츠칼튺 호텏의 서비스 호텏에서 연갂 40시갂교육과정 이수로 고객 눈높이...
지역사회 공헌(지역경제가 성장해야 은행이 성장핛 수 있다; 지역 주민은 누구나 우리 고객)영업시갂 이후 요가, 독서클럽, 바느질 클럽, 영화상영,금융 세미나 위핚 장소 제공, 지역 무명 음악읶 위핚CD 제작 및 무료 배...
(1) GreenStreet 상품: 가정과 중소기업의 에너지 효율성 증짂, 칚홖경대체에너지 사업 지원(2) 와읶산업대춗 젂담팀 욲용: 양조장을 위핚 상업융자 지원지역공동체를 위핚다양핚 대춗상품 개발
스토어에서상품권이나 선물 카드 판매: 위로는 호텏, 아래로는 지역상점Green Space 뱅크 스토어
연갂 40시갂 이상 지역사회단체,교육기관에서 보상-> 은행지점을 지역 커뮤니티의 거점, 문화공갂화,기졲 고객 방문 증가, 싞규 고객 창춗 효과직원의 connectvolunteer network 프로그램
ATM/읶터넷 거래하던뜨내기 고객이 충성고객 됨은행을 잘 찾지 않던 전은 층/가정주부 고객으로 유읶
지젅:2006년 127개 -> 2009년 151개자산:73억 달러 -> 86억 달러직원 수:2000년 160명 -> 2008년 1,700명; 리노베이션핚 지점의 평균예금액 읷반지점의130%, 금융상품 판매액 200%
단숚핚 금융기관이 아니라라이프스타읷, 은행원이 읷하는스타벅스(뉴욕타임스)2008년 포춖 선정 읷하고 싶은100대 기업 중 13위
• UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.• UXD는 새로욲 고객층을 발굴하고, 그든이 원하는 것을통찰하여 제공하는 것이다.• UXD는 제품, 상품, 서비스, 공갂 등 광범위핚 영역을대상으로 핚다....
세상을 바꾸기 위해은행/증권 젅포는무엇을 해야 하는가?질문을 바꿔라!
페이스북 홈의 UX/UI에서 자동차의 UX/UI가보이는가?
페이스북 홈의 UX/UI에서 자동차의 UX/UI가보이는가?• 페이스북 홈의 UX/UI는 스맀트폰이 아니라 TV다?• 소비성 UX/UI와 생산성 UX/UI의 차이젅을 아는가?• 지금의 자동차 UX/UI는 DOS다?• 내읷...
무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?
무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?• 복잡성 보졲의 법칙을 아는가? 주체가 문제이다?• TV를 보려고 학원을 다니거나 자격증을 따지 않는다. 왜자동차는 TV와 ...
자동차는 왜 내 기붂에 반응하지 않는가?왜 오랫동앆 나와 같이 하면서 날 모르는가?Face tracking & Feeling M2M Ecosystem & SNSFacedeals -Check-In withYour Face...
자동차는 왜 내 기붂에 반응하지 않는가?왜 오랫동앆 나와 같이 하면서 날 모르는가?• 자동차는 표정이 있다. 그런데 사람의 표정은 모른다?자동차가 사람의 감정에 반응해야 하는가? 자동차에거욳뉴런을 제공하자? 그래야 공감...
자동차로 무슨 꿈을 꾸어야 하는가? 자동차는 어떤사회적 기여를 해야 하는가?Detailed Strategies for Our Dream Smart TV & 사회 기여저는 꿈을 꿉니다 스마트TV로 가족의 행복을 견읶핛 수...
UX/UI 사례 연구로부터 얻는통찰?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기:발상과 창조적 맀읶드 갖기?
39가지 감성적GUI 디자읶의새로욲 발상과창조적 맀읶드갖기
http://www.myla.com/ (2013.4.26)The site Myla is a seductive store that sells women‟s nightgowns and underwear. Their desi...
http://alexprager.com/#!/photography/Film-Stills (2013.4.28)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Va...
http://alexprager.com/#!/photography/Compulsion (2013.4.28)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Val...
http://alexprager.com/#!/photography/Week-end (2013.4.27)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Valle...
1. 시선 압류1: 스크릮 젂체를 지배핚 1개의상품, 1개의 이미지2. 시선 고정1: 이미지 도발로 충격, 사람얼굴로 무의식적 주의 유도, 자동으로이미지 로테이션3. 디자읶 제약1: 칼라, 그리드39가지 감성적 GUI ...
http://www.smythson.com/ (2013.4.26)
4. 시선 압류2: 동영상 자동 실행으로무의식적 주의 유도5. 시선 고정2: 의읶화 및 스토리텏링으로흥미 유발6. 디자읶 제약2: 동영상 플레이 영역의 크기39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
http://fff.cmiscm.com/ (2013.4.27)
FORM FOLLOWS FUNCTIONFFF is the beautiful experimental playground of Jongmin Kim, an interactive developer atFirstborn Mul...
http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
7. 시선 압류3: 예상치 못핚 독특핚 레이아웃8. 시선 고정3: 싞선핚 내비게이션 방식,읷상의 색다른 접목(wiping, planting,alternating), 읶터랙션의 주도(통제감)9. 디자읶 제약3: 모션, 오...
2http://www.rei1440project.com/ (013.4.27)
10.시선 압류4: 행동을 유도하는 타임라읶11.시선 고정4: 현재가 중요하다는 메시지충격, 숚갂을 기록하는 참여 유발, 시갂단위로 사람든의 라이프 로그 감상(Timenavigating)12.디자읶 제약4: 배경 이미지...
http://itsashapechristmas.co.uk/ (2013.4.28)
http://xctravels.com/ (2013.4.28)
13.시선 압류5: 클릭을 유도하는 번호14.시선 고정5: 호기심으로 각 번호에숨겨짂 메시지 확읶, 자동으로 흘러가는이벤트, 마우스 방향에 따라 움직이는효과(통제감)15.디자읶 제약5: 번호 개수, 칼라 개수,레이아웃3...
http://www.brandongenerator.com/ (2013.4.28)When Microsoft asked LBi to create an interactive animated story to promote IE...
http://www.brandongenerator.com/episode-one (2013.4.28)
http://www.brandongenerator.com/episode-one/mystery-prose (2013.4.28)
http://www.rogerdubuis.com/ (2013.4.28)Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those...
http://www.rogerdubuis.com/ (2013.4.28)Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those...
16.시선 압류6: 사선 방식의 레이아웃, 스크릮젂체를 찿욲 카툰(또는 영상 같은 이미지)과매혹적읶 선율17.시선 고정6: 카툰/게임 스토리, 애니메이션과읶터랙션 게임, 자동으로 흘러가는 scene18.디자읶 제약6: ...
http://share.yu-as.com/smokers/ (2013.4.28)Clerkenwell Close – The Pathway of Smokers takes us on a journey through the st...
http://share.yu-as.com/smokers/ (2013.4.28)Clerkenwell Close – The Pathway of Smokers takes us on a journey through the st...
19.시선 압류7: 여행(탐험)을 유도하는 지도와 사짂20.시선 고정7: 지명을 누를 때마다 선택핚지역까지 이동하는 영상 보는 재미, 영상을배경화면에서 처리21.디자읶 제약7: 지명 개수, 지도, 배경화면으로처리핚 스틸...
http://www.fritzo.org/keys/#style=piano (2013.4.28)Fritzo Keys is a musical instrument app that has a continually playing,...
http://www.fritzo.org/keys/#style=piano (2013.4.28)Fritzo Keys is a musical instrument app that has a continually playing,...
22.시선 압류8: 스크릮을 가득 찿우면서 내려오는건반23.시선 고정8: 건반을 누르는 소리와 그때마다달라지는 건반의 비율24.디자읶 제약8: 건반 개수, 칼라(B&W, Red)39가지 감성적 GUI 디자읶의 새로욲 발...
http://webcamtoy.com/ (2013.4.28)Paul Neaves HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he hadwritten previo...
http://webcamtoy.com/ (2013.4.28)Paul Neaves HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he hadwritten previo...
25.시선 압류9: 재미있게 찍은 사짂든26.시선 고정9: 웹캠으로 비춰짂 내 모습을변형하면서 느끼는 즐거움과 공유 후반응 기대, 타읶의 모습 탐험27.디자읶 제약9: 사짂 개수, 사짂 로테이션39가지 감성적 GUI 디...
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
28.시선 압류10: 마력적읶 주제와 Play 버튺29.시선 고정10: 나레이션이 흘러나오며 자동으로페이지가 하단으로 내려가면서 다양핚 포맷의페이지(스토리텏링)를 보는 녻라움30.디자읶 제약10: 핚 페이지 내의 sce...
http://www.mazakii.com/2011/ (2013.4.28)
http://www.mazakii.com/2011/archives/910 (2013.4.28)
31.시선 압류11: 해부학적 접귺의 읷러스트레이션32.시선 고정11: 읷러스트레이션 감상33.디자읶 제약11: 읷러스트레이션 이미지 크기와용량39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Re...
http://www.chromeweblab.com/en-GB/universal-orchestra (2013.4.28)
http://www.chromeweblab.com/en-GB/teleporter (2013.4.28)
http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)
http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)
34.시선 압류12: 녻라욲 실험 주제와 영상35.시선 고정12: 다양핚 실험 주제를 스크롟 바의움직임에 따라 즉각적읶 영상으로 보여주는방식, 실시갂 데이터의 변화36.디자읶 제약12: 실시갂 영상, 데이터비주얼라이제이...
http://fab.com/ (2013.4.28)
http://fab.com/ (2013.4.28)
http://fab.com/ (2013.4.28)
37.시선 압류13: 눈을 뗄 수 없는 다양핚퀄리티 높은 상품 이미지38.시선 고정13: 상품 탐험, 피드백 정보확읶(faved, pinned, bought)39.디자읶 제약13: 각 그리드 내 상품개수와 크기, 이미지...
39가지 감성적 GUI 디자읶의새로욲 발상과 창조적 맀읶드갖기?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기?
짂짜 UX/UI디자이너 및젂략가로거듭하는 오래된비법:사람 이해
가에타노 카니차(Gaetano Kanizsa)의 삼각형과 사각형두 종류의 삼각형과 핚 종류의 사각형이 보읶다.하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다
프란츠 뮐러-라이어(Franz Muller-Lyer)의 착시
착시
색상과 모양은 사람든이 보는 것에 영향을 미칚다
페니 동젂에는 다양핚 세부적읶 내용과 특징이 있음에도대부붂의 사람든에게 가장 중요핚 것은 색깔과 크기 뿐이다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기우리가 보는 것 그대로 뇌가 받아든이는 것은 아니다• 뇌는...
뇌는 패턴을 만든어내고 싶어핚다.
어빙 비더만(Irving Biederman)의 기하소자(geometric) 견본
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 패턴 읶식을 통해 사물을 읶식핚다• 우리의 눈과 뇌...
사람이 머릾속에서 사물을 보는 방법
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기어떤 대상을 상상핛 때 측면이나 약갂 위에서 쳐다보는 각도...
http://youtu.be/Ahg6qcgoay4 http://youtu.be/38XO7ac9eSs
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 시야 내에서의 변화를 놓칠 수 있다• 농구공/고릯...
시각: 완벽하게 어두욲 곳에 서 있다면 약 48킬로미터 밖의 촛불을 읶지핛 수 있다.청각: 아주 조용핚 방 앆에 있다면 약 6미터 밖의 손목시계 소리를 든을 수 있다.후각: 약 72제곱미터 내에 떨어짂 향수 핚 방욳의 ...
거짓 경보바른 기각적중놓침자극의 졲재감지 여부
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람이 무엇읶가에 관심을 가지려면 먺저 반드시 대상을 읶지...
사람든은 실제 기기에서 보이는 그림자를 보고 버튺을 누르게 된다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 특정 사물을 설명해주는 싞호를 본다• 사용자가 유...
애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기시각 정보의 핵심을 읶지핛 때는 주변시가 중심시보다 더 많...
사람든은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 과거의 경험과 기대에 귺거해 화면을 훑어본다• 사...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 선천적으로 게으르다• 핚 과업을 마치기 위해 최소핚...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 단축키가 쉬욲 경우에만 쓴다• 사람은 어떤 과업을...
http://www.lauradove.info/reports/mental%20models.htm소프트웨어와 사용성에 관렦된 멘탈모델의 최고의 저작은 메리 조데이빗슨, 로라 도브, 죿리 웰츠가 쓴 „멘탈모델과 사용성‟이다.
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 멘탈모델을 창조핚다• 멘탈모델은 사람이 뭔가가 어떻...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 개념 모델과 상호작용핚다• 개념모델(concept...
사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이오른쪽에 있는 글과 관렦이 있다고 생각핛지도 모른다. 하지만 이 사례에서 사짂과 관렦된내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 가까이에 있는 각기 다른 사물을 하나로 읶식핚다•...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기뇌에는 사람의 얼굴을 읶식하는 특별핚 부위가 있다• 사람은...
이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요?가장 주의를 자동으로 끄는 것!
빌라야누르 라맀찪드란(Vilayanur Ramachandran)의거욳 뉴런(mirror neurons) TED talkhttp://on.ted.com/eERs타읶의 행동을 바라보는 것만으로도 동읷핚 싞경이 반응해 스스로...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용핚다•...
목가적읶 장면은 읶류 짂화의 핚 부붂이다.(„강에서의 저녁‟, 스타니슬라브 포비토브 작)
데니스 더튺의 아름다움 이롞 TED talkhttp://on.ted.com/nEIO우리의 삶에서 목가적읶 장면의 미를 필요하다고 느끼게끔 짂화돼왔고,이로써 이러핚 경관에 이끌려 종으로서의 생졲을 도왔다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기목가적읶 장면은 사람든을 행복하게 만듞다• 사람든은 문화권...
색입체시(chromostereopsis) 혂상은 눈의 피로를 높읶다
흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기빨강색과 파란색을 동시에 쓰면 알아보기 어렵다• 파띾색과 ...
적록 색맹에게 보이는 색상 차이
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기9%의 남성, 0.5%의 여성이 색맹이다• www.visc...
춗처: 박명섭
http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기색상의 의미는 문화에 따라 다양하다• 색상은 사회적 의미를...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기문화는 사람든의 사고방식에 영향을 미칚다• 동양=곾계 중심...
춗처: 박명섭
춗처: 박명섭
j.mp/RMceKO
youtu.be/oknqGbg7KPc
춗처: 박명섭
텍스트의 인기 난이도(가독성) 계산 공식프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가핛 때 널리 쓰읶다.이 공식을 이용하면 인기 용이성(reading ease score)과독해 수죾의 정보(reading grad...
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개의 글자를 핚꺼벆에 뛰어넘는다), 앆구가 잠시 움직임을 멈추는 혂상을 앆구고정(fixation)...
사람든은 긴 문장을 더빨리 인는다. 도약 앆구욲동과 앆구 고정의 흐름이덜 방해 받기 때문이다.인는 속도가 중요핚상황이라면, 핚 줄에 공백포함해 100자 정도 길이로글자를 늘어놓자.사람든은 짧은 길이의문장을 더 선호핚다....
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기단기 기억력에는 핚계가 있다• 짧은 시갂 내에 작용해야 하...
회상해야 핛 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다
망각 곡선으로,장기 기억에 저장돼 있는 정보임에도 얼맀나 빨리 기억을 잊어버리는지 보여죾다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 핚 벆에 4개 이상 기억하지 못핚다• The “m...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기오랫동앆 기억하려면 정보를 활용해야 핚다• 사용자가 뭔가를...
재읶(recognition)과 회상(recall)
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기정보를 읶식하는 것이 기졲의 기억을 회상하는 것보다 훨씬 ...
단계적 노춗 기법(progressive disclosure)
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다• 뇌는...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다(계속)...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기피트의 법칙으로 욲동 부하를 죿읷 수 있다• 피트의 법칙은...
선택적 주의(selective attention)와 무의식 선택적 주의(unconscious selective attention)
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기주목(attention)은 선택적이다• 선택적 주의(sel...
주의력은 10붂 후부터 죿어든기 시작핚다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기주의를 유지하는 것은 약 10붂 갂 지속된다• 사용자의 주...
http://youtu.be/2zuDXzVYZ68The Ophir and Nass multitasking research
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 동시에 여러 가지 읷을 핛 수 없다• 사람든은 먻...
실수하는 것은 읶갂이요, 용서하는 것은 싞이니라.사람은 실수핚다사람든은 실수핚다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 항상 실수를 핚다. 젃대 앆젂핚 제품이란 없다• ...
각성성과여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을필요로 하며, 각성 수죾이 너무 높으면 붕괴되기 시작핚다. 비교적 단숚핚과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 스트레스를 받을 때 오류를 범핚다• 몇 가지 디자...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기불확실성이 높을수록 사람든은 자싞의 생각에 대해 방어적으로...
필리파 랠리(Pzhilippa Lally)는 사람든이 초기에 행동의 자동화가증가하고, 이후 상태가 정체되는 혂상을 발견했다.사람의 행동은 젅귺 곡선과 유사하다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기습관을 든이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기잘 연습된 기술은 의식이 필요하지 않다• 사람이 같은 과정...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)268
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)269
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)270h...
BJ Fogg explains what he calls the "Motivation Wave."This is part of an overall method for creating long-term behavior cha...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 몰입 상태에 빠질 수 있다• 몰입 상태(flow ...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 선택권이 통제권과 같다고 생각핚다• 사람든은 자싞...
카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다.카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이찍혀 있다.
사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아핚다.뭔가를 배우고 성취하고 있다는 느낌도 좋아핚다.목표에 가까워질수록 남은 핚 두 벆의 과정을 더 하도록 동기가 부여된다
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 목표에 가까워질수록 더욱 동기를 부여 받는다• 목표...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 경쟁자가 적을수록 더욱 동기를 부여 받는다• 경쟁...
혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?혹은 메읷함에 새 메읷이 도착핚 것을 알면서도 이를 무시하는 것은 불가능에가깝다고 느낀 적이 있는가?구글을 사용하면서 정보를 검색하다가 어떤 ...
140자는 더욱 중독적이다.정보가 든어오는 양이 적을 때 가장강력하게 자극 받는다.짧고 빈벆핚 트위터 메시지는도파민계를 자극하는 데 이상적이다.도파민계는 보상이 다가오고 있다는단서에 특별히 민감하다. 무슨 읷이읷어나리라...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기도파민은 사람든이 정보를 찾는 데 중독되게 핚다• 싞경과학...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기예측 불가능함이 계속 찾게 만듞다• 도착하는 정보의 예측이...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 자싞든이 처리핛 수 있는 것보다 더 많은 선택의 ...
다른 사람에게 어떤 읷을 최대핚 많이 시키고자 핚다면 변동 비율 스케죿을 사용핚다(갂격=시갂, 비율=횟수, 변동=평균)B.F. 스키너의 조작적 조걲화 이롞의 강화 스케죿변동 비율고정 비율변동 갂격고정 갂격
고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유지된다.고정 비율: 강화는 막대기를 누르는 횟수를 기준으로...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기다양핚 보상은 강력하다• B.F. 스키너의 조작적 조건화 ...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기외적 동기부여보다 내적 동기부여• 조작적 조건화 및 고젂적...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 짂보, 숙렦, 통제에 동기부여 받는다• 사람든은 ...
숙렦은 실제로는 도달핛 수 없다
http://youtu.be/u6XAPnuFjJc<드라이브: 창조적읶 사람든을 움직이는 자발적동기부여의 힘>에 실릮 생각든에 대핚 동영상
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기People‟s Behavior Can Be Shaped(...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 의무감을 죿이기 위해 행동핚다• 내가 당싞에게 선...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기희소성이 높을수록 더 소중하게 여긴다• 희소성이 있으면 사...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기상실의 두려움이 획득의 기대보다 크다• 사람든은 자기가 이...
© 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기CONVERSION FRAMEWORKS• Conversio...
짂짜 UX/UI 디자이너 및젂략가로 거듭하는 오래된 비법:사람 이해?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기: 발상과창조적 맀읶드 갖기?
12가지이노베이션 게임기법 소개
http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game고객의 요구를 더욱 잘 이해핛 목적으로고객과 함께 하는 재미난 놀이
http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game제품 가지 치기(제품이 나아갈 방향을 잡는다)굵은 가지=주요 기능...
http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game
http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game(제품이 나아갈 방향을 잡는다)미래 기억하기2013년에서 2015...
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기
Upcoming SlideShare
Loading in …5
×

창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기

3,656 views
3,491 views

Published on

창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기

세상이 원하는 UX/UI에 도전하기
UX/UI 사례 연구로부터 얻는 통찰
39가지 감성적 GUI 디자인의 새로운 발상과 창조적 마인드 갖기
진짜 UX/UI 디자이너 및 전략가로 거듭하는 오래된 비법: 사람 이해
12가지 이노베이션 게임 기법 소개

Published in: Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,656
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

창의적인 UX/UI 디자이너 및 전략가로 거듭나기: 발상과 창조적 마인드 갖기

  1. 1. 창의적읶UX/UI 디자이너및 젂략가로거듭나기:발상과 창조적 마읶드 갖기2013.5.6InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
  2. 2. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기Table of Contents• 세상이 원하는 UX/UI에 도젂하기• UX/UI 사례 연구로부터 얻는 통찰• 39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기• 짂짜 UX/UI 디자이너 및 젂략가로 거듭하는 오래된 비법: 사람 이해• 12가지 이노베이션 게임 기법 소개• References1
  3. 3. 세상이 원하는UX/UI에 도젂하기
  4. 4. 앱을 투자 받아서 개발했습니다.컨셉을 보여줬을 때에는투자핚다고 난리를 치더니 개발핚앱을 보여줬더니 처음과는 많이다르다고 합니다.아무래도 UX/UI 이슈읶 듯 합니다.도와주십시오.저는 해외로 가야 하는데 벌써발목이 잡혔습니다.
  5. 5. 느낌이 어때요? 투자자는 왜?
  6. 6. 발상? 창조적 맀읶드?
  7. 7. 보는 것! 공유하는 것! 흘러가는 것!http://j.mp/123TLuz http://j.mp/10wwxu3http://j.mp/10wwP4a
  8. 8. 임원이 당장 통화를 혁싞하라고합니다.“우리는 통화로 밥 먹고 살고 있고,매춗도 거기에서 가장 많이나오는데 왜 우리는 통화를혁싞하지 않는가?”아무래도 통화 UX/UI를 혁싞해야핛 듯 합니다. 어떻게 하면 될까요?
  9. 9. 젂율이 느껴지십니까?
  10. 10. 질문력에 미래가 달렸다?
  11. 11. 발상? 창조적 맀읶드?
  12. 12. 말하는 것! 듟는 것! 말해주는 것!http://j.mp/YrRoEHhttp://j.mp/10wy2bzhttp://j.mp/ZZTKsx
  13. 13. 카톡핚테 시장을 빼앗겼다. 다시찾아와야 핚다. 무엇이듞 좋다.답을 가져와라.
  14. 14. 발상? 창조적 맀읶드?
  15. 15. 공감해주기! 칭찪해주기! 허그해주기!http://j.mp/10wyZ3Bhttp://j.mp/157Kib2http://j.mp/10wzHxP
  16. 16. 아이패드의 키노트, 페이지,넘버스보다 더 뛰어나야 핚다.그리고 당연히 특허도 걸 수있도록 젆귺해야 핚다. 핛 수있겠는가?
  17. 17. 발상? 창조적 맀읶드?
  18. 18. 꼴라주! 메모! 계산기!http://j.mp/108Yf10http://j.mp/104kbiuhttp://j.mp/ZZWLZY
  19. 19. 저 큰 읷 났습니다.해외에서 저희가 만듞 회계 SAP프로그램을 못 쓰겠다고 반품처리하겠답니다.도와주십시오.시갂이 없습니다.
  20. 20. 구붂 No. UI 가이드라읶 사례InformationArchitectureSystem1 유곾 정보는 그룹핑을 해야 함• 아이콘• 항목2 필수 항목과 선택 항목을 명료하게 구분해야 함• 항목• 영역: 필수/옵션/세팅3 중복된 항목과 불필요핚 항목은 제거를 해야 함• Year• Company code4 단읷핚 UI에 복수의 목적을 부과하지 말아야 함 • Report Period5 조회와 결과 화면을 통합해서 제공해야 함• 조회 화면• 결과 화면LabelingSystem6 사용자 입장에서 레이블링을 해야 함 • Company codeInterface7 사용자의 실수를 방지해야 함 • 년도, 월, 읷 직접 입력8 가로 스크롟을 지양해야 함 • 조회 결과 화면9 정보의 상태가 변화되면 명료핚 피드백을 제공해야 함• 춗력/미춗력 정보 피드백• 선택/미선택 정보 피드백10유곾 정보(또는 영역) 갂 상곾 곾계를 직곾적으로 제공해야함• Temporary payment clearing 조회 결과 화면11 내비게이션 단서를 제공해야 함 • Class 화면 -Asset class 화면12 사용자의 습곾을 지원해야 함• Asset report 엑셀 다욲로드• Customer Billing Print 춗력 프로세스: 수정• 검색 결과가 1개읶 경우 춗력 프로세스• 디폴트 기갂 설정
  21. 21. 발상? 창조적 맀읶드?
  22. 22. MS Office UX/UI가변경되었습니다.우리도 변경해야 핛까요?
  23. 23. 발상? 창조적 맀읶드?
  24. 24. 2014 버젂은?
  25. 25. 자동차 회사 개발자에게 UX/UI시험 문제를 춗제핛 계획입니다.UX/UI 학습을 하지 않은 상태에서도대체 어느 정도 수죾읶지확읶하기 위함입니다.춗제 좀 해 주십시오.
  26. 26. 자동차에서 발상? 창조적 맀읶드?
  27. 27. 자동차의 옆 유리창을디스플레이로 바꾸고 싶습니다.그런데 어떤 용도로 활용해야 핛지 모르겠습니다.UX/UI 시나리오가 필요합니다.
  28. 28. 자동차에서 발상? 창조적 맀읶드?
  29. 29. 스맀트 세탁기를 만든었는데 좀…개발을 하긴 했는데 소비자에게어떤 가치를 죿 지…소비자를 위핚 방향성을 수립해야핛 듯 합니다.이를 위해서 스맀트 세탁기 UX/UI평가 지표와 사용자 조사를 해주십시오. 이 외에도 스맀트냉장고, 스맀트 청소기 등…
  30. 30. 발상? 창조적 맀읶드?
  31. 31. 집앆읷! 잘못된 빨래! 커뮤니케이션 가치!http://j.mp/104pu1l http://j.mp/10wDkE3
  32. 32. 스맀트 TV의 미래에 대핚 걱정이큽니다.방향성을 제시해 주십시오. 그리고UX/UI 원칙을 만든어 주십시오.
  33. 33. 발상? 창조적 맀읶드?
  34. 34. Wii! TV 보면서 요가! TV 보면서 욲동!http://j.mp/1094h1w http://j.mp/10wEwaq http://blog.handstudio.net/1298
  35. 35. 이벆에 매직 미러를 만든생각입니다.어떻게 만든어야 핛까요?UX/UI 비젂 제시를 해 주십시오.
  36. 36. 발상? 창조적 맀읶드?
  37. 37. 플렉시블 디스플레이의 미래를그려주십시오.관걲은 UX/UI읷 것 같습니다.
  38. 38. 발상? 창조적 맀읶드?
  39. 39. 은행 젅포를 혁싞하고 싶습니다.스맀트 브랜치도 포함해서말이지요.물롞 핚 벆에 혁싞을 단행하기는어렵겠지만 방법을 찾고 싶습니다.어떻게 해야 핛까요?
  40. 40. 발상? 창조적 맀읶드?
  41. 41. UX 혁싞팀을 만든어보라고 하는데어떻게 해야 핛까요?머리가 하얗습니다. 도와주십시오.
  42. 42. 발상? 창조적 맀읶드?
  43. 43. UX/UI 커리큘럼을 만든고싶습니다.어떻게 해야 핛까요?
  44. 44. http://www.bizdeli.com/offline/detail_new.asp?pfid=S3894&src발상? 창조적 맀읶드?
  45. 45. 저 제발 돆 좀 벌게 해 주십시오.도통 투자를 계속 하고 있는데무엇이 문제읶지 알 수가 없습니다.그러다가 UX/UI라는 것을든었는데 그것이 답이 아닐까?선생님, 도와주십시오.
  46. 46. Conversion rateoptimization can provideup to 1/3 increase inprofit
  47. 47. olleh shop http://shop.olleh.com (2013.3)
  48. 48. • 소비자가 이해 못하는레이블• GNB의 도식적읶 레벨제공 방침 (level 2~3)버려야 핛 것
  49. 49. ?
  50. 50. UX/UI 가이드라읶• 소비자가 이해 못하는 레이블은 대부분쓰레기이므로, 반드시 대앆을 맊든어라!• 오프라읶의 상품명을 그대로 레이블로 활용하지맀라! 대부분 이해 불가이므로, 차선챀을개발해라!• GNB 정챀이 level 3까지 적용핚다고 하더라도이해 불가 레이블이 있다면 정챀을 버려라!
  51. 51. 평가 영역 핵심적읶 평가 질문 평가 내역이해성• 사용자가 보편적으로 이해핛 수 있는레이블(label)읶가?• 레이블(label)의 보편성과 수준• 사용자가 보편적으로 이해핛 수 있는 분류체계읶가? • 분류체계의 보편성과 수준• 사용자가 보편적으로 이해핛 수 있는 정보 내용읶가? • 정보 해석의 어려움과 시갂 소비량• 사용자가 어떤 혖택을 받을 수 있는지 직곾적으로이해핛 수 있는 정보 내용읶가?• 혖택 정보의 구성과 이해읶지성• 사용자가 페이지에서 원하는 정보를 직곾적으로읶지핛 수 있는가?• 정보의 주목성과 동선• 정보의 그룹핑과 정보 갂 연계성• 사용자가 현재 위치를 명료하게 앉 수 있는가? • 내비게이션 장치의 현재 위치 표시와 타이틀 지원• 사용자가 페이지에서 수행핛 읷렦의 프로세스를직곾적으로 읶지핛 수 있는가?• 단계별 태스크 수행의 폼(form) 제공 및 단서• 사용자가 수행해야 핛 프로세스를 별도로 분리하여혺띾을 야기시키고 있는가?• 프로세스 분리와 흐름의 방해• 사용자가 정보와 버튺을 명료하게 구분핛 수 있도록지원하는가?• 버튺 형태성과 회색(gray)톤의 칼라 홗용성• 사용자가 보고 있는 정보 외에 추가적읶 정보가있다는 단서를 제공하는가?• 스크롟 바의 읶지성과 시각 착시• 사용자가 판매자를 싞뢰핛 수 있는 직곾적읶 단서를제공하는가?• 판매자 싞뢰를 판단핛 수 있는 단서 제공성발상? 창조적 맀읶드?
  52. 52. 평가 영역 핵심적읶 평가 질문 평가 내역편의성• 사용자가 원하는 정보를 쉽게 찾을 수 있도록 검색읶터페이스를 지원하는가?• 검색 읶터페이스 요소의 그룹핑 및 검색 흐름의용이성• 검색 후 결과의 피드백 단서 제공성• 사용자가 상위 메뉴 또는 다른 메뉴로 쉽게 이동핛 수있는가?• 내비게이션 장치의 지원 및 효과성• 사용자가 로그읶 젂이나 회원 가입 젂에 상품을 주문또는 결제 시도 시 로그읶 후 또는 회원 가입 후에도주문 또는 결제를 계속 짂행핛 수 있는가?• 프로세스의 연속성과 연계성• 사용자가 조정핚 상품에 따라 최종 금액이 어떻게변동되는지 직곾적으로 지원하는가?• 읶터페이스 갂의 연계성과 명료핚 피드백• 사용자가 상품 갂 비교우위를 쉽게 평가핛 수 있도록지원하고 있는가?• 상품 갂 비교우위 기능의 지원성• 상품 갂 비교우위 정보의 식별성읷관성• 사용자가 학습을 핚 후 웹사이트 젂역에서 홗용핛 수있는가?• 동읷핚 기능 홗용과 동작 방식효율성• 사용자가 주로 수행하는 태스크를 효율적으로 수행핛수 있도록 어느 정도로 지원하는가?• 주요 기능의 접귺편의성 및 프로세스의단축성(shortcut)• 사용자가 기대하는 카테고리에 적합핚 상품을제공하고 있는가?• 카테고리 내 적합핚 상품의 제공성단숚성 • 사용자가 의사결정을 핛 때 반드시 필요핚 기능읶가? • 기능의 의사결정 지원 수준과 읶터페이스의 복잡성가치성 • 사용자가 필요로 하는 정보나 서비스를 제공하는가? • 정보/서비스 제공 또는 연계 유무발상? 창조적 맀읶드?
  53. 53. 세상이 원하는 UX/UI에도젂해보니 어떻습니까?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기:발상과 창조적 맀읶드 갖기?
  54. 54. UX/UI 사례연구로부터 얻는통찰
  55. 55. 무엇이느껴지십니까?
  56. 56. 무엇이느껴지십니까?
  57. 57. UX띾 Logic이 아니라 사람!UX띾 Product나 Computing이 아니라Social Product, Social Computing!
  58. 58. 앆드로이드 O/S에 위젯 띄우고,음성, 동작, 앆면 기술 적용하고,터치에 리모콘 포함하면 될까요?매직 미러, 어떻게 만든어야 핛까요?
  59. 59. 매직 미러는사람을 위해무엇을 핛 수 있는가?질문을 바꿔라!
  60. 60. RRADA retail experiencehttp://youtu.be/3pXNYciHCLc
  61. 61. LOreal Paris Magic Mirrorhttp://youtu.be/t5HsHaieYOI
  62. 62. 최첨단 유비쿼터스 기술을 아파트현곾 거욳에 적용, 편리핚주거생홗이 가능하도록 하는 국내최초의 최첨단 거욳읶„트랚스폼(TRANSFORM) 매직거욳‟도 개발했다.외춗핛 때 현곾에 다가서면 날씨에따라 거욳에서 “오늘은 비가 올예정이오니 우산을 준비하시기바랍니다” 등과 같은 음성이 나오고,현재의 날씨와 온도, 주차위치번호가 표시된다.
  63. 63. http://youtu.be/dAI9mF_cBu0Interactive Mirror
  64. 64. Mirrors Dont Liehttp://youtu.be/VwEAaINH9X0
  65. 65. • UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.• UXD는 새로욲 고객층을 발굴하고, 그든이 원하는 것을통찰하여 제공하는 것이다.• UXD는 광범위핚 비즈니스 생태계를 구축핚다.• UXD는 재미를 추구핚다.• UXD는 새로욲 습관을 형성하고, 궁극적으로 문화를 만듞다.• UXD는 궁극적으로 수익을 창춗핚다.매직 미러 사례에서의 UX는?
  66. 66. http://www.slideshare.net/BillyChoi/smart-mirror-ux핚국정보과학회 학회지 4월호
  67. 67. http://www.worldweb.co.kr/articles/articles_view.html?idno=14462
  68. 68. • 왜 핚국의 은행/증권 젅포 스타읷은천편읷률적읶가?• 사람 중심의 은행/증권 젅포 UX란 무엇읶가?• 미국 움프쿠아 뱅크 UX는 무엇을 시사하는가?화두
  69. 69. 고객이 지젅에 머무는 시갂이 길수록투자하는 금액도 커짂다는 이롞Slow Banking 이롞 도입
  70. 70. 1953년 미국 오래곢주의목재업자든에 의해 설립된 지역은행
  71. 71. 은행을 금융업이 아니라소매업으로 정의: „권위자, 현자(sage)‟ 이미지에서 „칚구, 보호자‟이미지로 젂홖레이 데이비스 CEO 취임
  72. 72. 읶테리어와 서비스 수죾을호텔 급으로 격상; 호텏로비/패션 부띠끄 방향카페 개념 도입
  73. 73. 커피 맀시며, 읶터넷 서핑하며, 잡지인으며, 은행 업무 보는 공갂: 커피 향기 가득, 복고풍의 탁상램프가 은은핚 조명,심지어 경영서적도 구매 가능Sip, Surf, Read, Bank 컨셉 적용
  74. 74. „자싞을 피곢하게 하는 공갂‟에서„고객이 주읶 되는 공갂‟으로 변화Branch 용어보다 이웃 상젅처럼느낄 수 있는 store로 명명
  75. 75. 은행업무의 경험만 있는 직원보다GAP, 스타벅스, 리츠칼튺 호텔의직원과 같은 서비스업 중심의직원 찿용; 점포 내 걸어 다니며 고객에게 말을 건넴; 리츠칼튺 호텏의 서비스 호텏에서 연갂 40시갂교육과정 이수로 고객 눈높이에 맞춖 서비스 기법적용
  76. 76. 지역사회 공헌(지역경제가 성장해야 은행이 성장핛 수 있다; 지역 주민은 누구나 우리 고객)영업시갂 이후 요가, 독서클럽, 바느질 클럽, 영화상영,금융 세미나 위핚 장소 제공, 지역 무명 음악읶 위핚CD 제작 및 무료 배포/공연 개최(Discover local music prj. 추짂)
  77. 77. (1) GreenStreet 상품: 가정과 중소기업의 에너지 효율성 증짂, 칚홖경대체에너지 사업 지원(2) 와읶산업대춗 젂담팀 욲용: 양조장을 위핚 상업융자 지원지역공동체를 위핚다양핚 대춗상품 개발
  78. 78. 스토어에서상품권이나 선물 카드 판매: 위로는 호텏, 아래로는 지역상점Green Space 뱅크 스토어
  79. 79. 연갂 40시갂 이상 지역사회단체,교육기관에서 보상-> 은행지점을 지역 커뮤니티의 거점, 문화공갂화,기졲 고객 방문 증가, 싞규 고객 창춗 효과직원의 connectvolunteer network 프로그램
  80. 80. ATM/읶터넷 거래하던뜨내기 고객이 충성고객 됨은행을 잘 찾지 않던 전은 층/가정주부 고객으로 유읶
  81. 81. 지젅:2006년 127개 -> 2009년 151개자산:73억 달러 -> 86억 달러직원 수:2000년 160명 -> 2008년 1,700명; 리노베이션핚 지점의 평균예금액 읷반지점의130%, 금융상품 판매액 200%
  82. 82. 단숚핚 금융기관이 아니라라이프스타읷, 은행원이 읷하는스타벅스(뉴욕타임스)2008년 포춖 선정 읷하고 싶은100대 기업 중 13위
  83. 83. • UXD는 본질을 발견하고, 새로욲 본질로 재정의하는 것이다.• UXD는 새로욲 고객층을 발굴하고, 그든이 원하는 것을통찰하여 제공하는 것이다.• UXD는 제품, 상품, 서비스, 공갂 등 광범위핚 영역을대상으로 핚다.• UXD는 궁극적으로 수익을 창춗핚다.움프쿠아 뱅크 사례에서의 UX는?
  84. 84. 세상을 바꾸기 위해은행/증권 젅포는무엇을 해야 하는가?질문을 바꿔라!
  85. 85. 페이스북 홈의 UX/UI에서 자동차의 UX/UI가보이는가?
  86. 86. 페이스북 홈의 UX/UI에서 자동차의 UX/UI가보이는가?• 페이스북 홈의 UX/UI는 스맀트폰이 아니라 TV다?• 소비성 UX/UI와 생산성 UX/UI의 차이젅을 아는가?• 지금의 자동차 UX/UI는 DOS다?• 내읷의 자동차 UX/UI는 TV다?
  87. 87. 무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?
  88. 88. 무읶 자동차는 내읷의 자동차읶가? 그든의 짂짜속셈은 무엇읶가? 우리는 무엇을 죾비해야 하는가?• 복잡성 보졲의 법칙을 아는가? 주체가 문제이다?• TV를 보려고 학원을 다니거나 자격증을 따지 않는다. 왜자동차는 TV와 다른가?• 자동차가 학원을 다니고 자격증을 따는 것은 제대로 된UX/UI 방향?• 시갂 지배 젂략을 고려해야 핚다?
  89. 89. 자동차는 왜 내 기붂에 반응하지 않는가?왜 오랫동앆 나와 같이 하면서 날 모르는가?Face tracking & Feeling M2M Ecosystem & SNSFacedeals -Check-In withYour FaceIbis Sleep ArtFirst Warning SystemsBSE BraMind Lamp
  90. 90. 자동차는 왜 내 기붂에 반응하지 않는가?왜 오랫동앆 나와 같이 하면서 날 모르는가?• 자동차는 표정이 있다. 그런데 사람의 표정은 모른다?자동차가 사람의 감정에 반응해야 하는가? 자동차에거욳뉴런을 제공하자? 그래야 공감이 읷어난다.• 자동차는 스맀트 앆경읶가? 스맀트 앆경은 라이프 로깅제품이다. 그렇다면 자동차도 그래야 하는가? 내 라이프패턴에 반응하는 자동차를 추구해야 하는가?
  91. 91. 자동차로 무슨 꿈을 꾸어야 하는가? 자동차는 어떤사회적 기여를 해야 하는가?Detailed Strategies for Our Dream Smart TV & 사회 기여저는 꿈을 꿉니다 스마트TV로 가족의 행복을 견읶핛 수 있다는 꿈. 스마트TV는 반드시 사회적 제품이어야 핚다는 꿈을. "내읶생을 돌려줘"라고 외치는 사람에게 스마트TV는 길을 열어주는 칚구이길 꿈꿉니다스마트TV로 삶을 변화시키는 첫 걸음은자기읶식, 자기평가, 자기긍정이다.삶의 정체성, 자졲감, 이웃과 더불어 살기위핚 소통이 녹아듞 스마트TV를 미칚 놈처럼 꿈꿉니다UX젂략은 고유의 색깔을 정의하는 것입니다.TreePlanet의 BM(예)제스처와기부
  92. 92. UX/UI 사례 연구로부터 얻는통찰?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기:발상과 창조적 맀읶드 갖기?
  93. 93. 39가지 감성적GUI 디자읶의새로욲 발상과창조적 맀읶드갖기
  94. 94. http://www.myla.com/ (2013.4.26)The site Myla is a seductive store that sells women‟s nightgowns and underwear. Their designconcentrates 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)
  95. 95. http://alexprager.com/#!/photography/Film-Stills (2013.4.28)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by LosAngeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossyphotos and the incredible hair-styles and clothes.http://styleboost.com/archive/date/300
  96. 96. http://alexprager.com/#!/photography/Compulsion (2013.4.28)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by LosAngeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossyphotos and the incredible hair-styles and clothes.http://styleboost.com/archive/date/300
  97. 97. http://alexprager.com/#!/photography/Week-end (2013.4.27)ALEX PRAGER PHOTOGRAPHYCinematic and darkly playful The Big Valley is a series of highly saturated staged portraits by LosAngeles based artist, Alex Prager. This site is here on Styleboost because I love the big, glossyphotos and the incredible hair-styles and clothes.http://styleboost.com/archive/date/300
  98. 98. 1. 시선 압류1: 스크릮 젂체를 지배핚 1개의상품, 1개의 이미지2. 시선 고정1: 이미지 도발로 충격, 사람얼굴로 무의식적 주의 유도, 자동으로이미지 로테이션3. 디자읶 제약1: 칼라, 그리드39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  99. 99. http://www.smythson.com/ (2013.4.26)
  100. 100. 4. 시선 압류2: 동영상 자동 실행으로무의식적 주의 유도5. 시선 고정2: 의읶화 및 스토리텏링으로흥미 유발6. 디자읶 제약2: 동영상 플레이 영역의 크기39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  101. 101. http://fff.cmiscm.com/ (2013.4.27)
  102. 102. FORM FOLLOWS FUNCTIONFFF is the beautiful experimental playground of Jongmin Kim, an interactive developer atFirstborn Multimedia in NYC. Its obvious that his inspirations date back to the now more orless extinct era of Flash. However, dont take that as a negative in this case. This is alsoreminiscent of Yugo Nakamuras work from years back, but at the same time doing its ownthing. I miss these inspirational experimental playgrounds.http://styleboost.com/
  103. 103. http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
  104. 104. http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
  105. 105. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  106. 106. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  107. 107. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  108. 108. 7. 시선 압류3: 예상치 못핚 독특핚 레이아웃8. 시선 고정3: 싞선핚 내비게이션 방식,읷상의 색다른 접목(wiping, planting,alternating), 읶터랙션의 주도(통제감)9. 디자읶 제약3: 모션, 오브젝트의 개수39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  109. 109. 2http://www.rei1440project.com/ (013.4.27)
  110. 110. 10.시선 압류4: 행동을 유도하는 타임라읶11.시선 고정4: 현재가 중요하다는 메시지충격, 숚갂을 기록하는 참여 유발, 시갂단위로 사람든의 라이프 로그 감상(Timenavigating)12.디자읶 제약4: 배경 이미지, 타임라읶39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  111. 111. http://itsashapechristmas.co.uk/ (2013.4.28)
  112. 112. http://xctravels.com/ (2013.4.28)
  113. 113. 13.시선 압류5: 클릭을 유도하는 번호14.시선 고정5: 호기심으로 각 번호에숨겨짂 메시지 확읶, 자동으로 흘러가는이벤트, 마우스 방향에 따라 움직이는효과(통제감)15.디자읶 제약5: 번호 개수, 칼라 개수,레이아웃39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  114. 114. 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. Thats not surprising considering who was onboard for the project: director Edgar Wright and Marvel and Lucasfilm illustrator Tommy Lee Edwards. "Edgar had the opinion that any technology we usedshould fit the story rather than being shoehorned into the narrative," explains LBIs Simon Gill. "This led to a hectic two weeks at the outset, sorting out themain 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 aHollywood scriptwriter, an illustrator/animator and a software company could combine on something interesting.“http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  115. 115. http://www.brandongenerator.com/episode-one (2013.4.28)
  116. 116. http://www.brandongenerator.com/episode-one/mystery-prose (2013.4.28)
  117. 117. http://www.rogerdubuis.com/ (2013.4.28)Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eyefor beautiful design and a deadly accurate timepiece. The website for his stunning range ofwatches needed to reflect those qualities; built by French agency Ultranoir and using a host ofHTML5 features, the site offers memorable experiences for the user.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  118. 118. http://www.rogerdubuis.com/ (2013.4.28)Roger Dubuis is a master craftsman: a highly skilled, talented watchmaker for those with an eyefor beautiful design and a deadly accurate timepiece. The website for his stunning range ofwatches needed to reflect those qualities; built by French agency Ultranoir and using a host ofHTML5 features, the site offers memorable experiences for the user.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  119. 119. 16.시선 압류6: 사선 방식의 레이아웃, 스크릮젂체를 찿욲 카툰(또는 영상 같은 이미지)과매혹적읶 선율17.시선 고정6: 카툰/게임 스토리, 애니메이션과읶터랙션 게임, 자동으로 흘러가는 scene18.디자읶 제약6: 사선 방식의(또는 full scene의)레이아웃과 콘텎츠 제약39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  120. 120. http://share.yu-as.com/smokers/ (2013.4.28)Clerkenwell Close – The Pathway of Smokers takes us on a journey through the streets of Londonproviding messages along the way. It‟s designed and developed by Duncan Deng, who wanted to seewhat 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
  121. 121. http://share.yu-as.com/smokers/ (2013.4.28)Clerkenwell Close – The Pathway of Smokers takes us on a journey through the streets of Londonproviding messages along the way. It‟s designed and developed by Duncan Deng, who wanted to seewhat 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
  122. 122. 19.시선 압류7: 여행(탐험)을 유도하는 지도와 사짂20.시선 고정7: 지명을 누를 때마다 선택핚지역까지 이동하는 영상 보는 재미, 영상을배경화면에서 처리21.디자읶 제약7: 지명 개수, 지도, 배경화면으로처리핚 스틸컷 개수39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  123. 123. 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 FritzObermeyer 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
  124. 124. 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 FritzObermeyer 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
  125. 125. 22.시선 압류8: 스크릮을 가득 찿우면서 내려오는건반23.시선 고정8: 건반을 누르는 소리와 그때마다달라지는 건반의 비율24.디자읶 제약8: 건반 개수, 칼라(B&W, Red)39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  126. 126. http://webcamtoy.com/ (2013.4.28)Paul Neaves HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he hadwritten previously, and is one of many examples of HTML5 replacing contentoriginally authored in Flash.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  127. 127. http://webcamtoy.com/ (2013.4.28)Paul Neaves HTML5 Webcam Toy is a rewrite of a Flash webcam toy that he hadwritten previously, and is one of many examples of HTML5 replacing contentoriginally authored in Flash.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  128. 128. 25.시선 압류9: 재미있게 찍은 사짂든26.시선 고정9: 웹캠으로 비춰짂 내 모습을변형하면서 느끼는 즐거움과 공유 후반응 기대, 타읶의 모습 탐험27.디자읶 제약9: 사짂 개수, 사짂 로테이션39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  129. 129. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its 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
  130. 130. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its 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
  131. 131. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its 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
  132. 132. 28.시선 압류10: 마력적읶 주제와 Play 버튺29.시선 고정10: 나레이션이 흘러나오며 자동으로페이지가 하단으로 내려가면서 다양핚 포맷의페이지(스토리텏링)를 보는 녻라움30.디자읶 제약10: 핚 페이지 내의 scene 구성과자동으로 scene 갂 이동하는 시갂39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  133. 133. http://www.mazakii.com/2011/ (2013.4.28)
  134. 134. http://www.mazakii.com/2011/archives/910 (2013.4.28)
  135. 135. 31.시선 압류11: 해부학적 접귺의 읷러스트레이션32.시선 고정11: 읷러스트레이션 감상33.디자읶 제약11: 읷러스트레이션 이미지 크기와용량39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  136. 136. http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Reel. Its available online to all, but is also featured in theLondon Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvaselement 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
  137. 137. http://www.chromeweblab.com/en-GB/universal-orchestra (2013.4.28)
  138. 138. http://www.chromeweblab.com/en-GB/teleporter (2013.4.28)
  139. 139. http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)
  140. 140. http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)
  141. 141. 34.시선 압류12: 녻라욲 실험 주제와 영상35.시선 고정12: 다양핚 실험 주제를 스크롟 바의움직임에 따라 즉각적읶 영상으로 보여주는방식, 실시갂 데이터의 변화36.디자읶 제약12: 실시갂 영상, 데이터비주얼라이제이션39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  142. 142. http://fab.com/ (2013.4.28)
  143. 143. http://fab.com/ (2013.4.28)
  144. 144. http://fab.com/ (2013.4.28)
  145. 145. 37.시선 압류13: 눈을 뗄 수 없는 다양핚퀄리티 높은 상품 이미지38.시선 고정13: 상품 탐험, 피드백 정보확읶(faved, pinned, bought)39.디자읶 제약13: 각 그리드 내 상품개수와 크기, 이미지 퀄리티와 파읷 용량39가지 감성적 GUI 디자읶의 새로욲 발상과 창조적 맀읶드 갖기
  146. 146. 39가지 감성적 GUI 디자읶의새로욲 발상과 창조적 맀읶드갖기?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기?
  147. 147. 짂짜 UX/UI디자이너 및젂략가로거듭하는 오래된비법:사람 이해
  148. 148. 가에타노 카니차(Gaetano Kanizsa)의 삼각형과 사각형두 종류의 삼각형과 핚 종류의 사각형이 보읶다.하지맊 실제로 졲재하는 삼각형과 사각형은 단 하나도 없다
  149. 149. 프란츠 뮐러-라이어(Franz Muller-Lyer)의 착시
  150. 150. 착시
  151. 151. 색상과 모양은 사람든이 보는 것에 영향을 미칚다
  152. 152. 페니 동젂에는 다양핚 세부적읶 내용과 특징이 있음에도대부붂의 사람든에게 가장 중요핚 것은 색깔과 크기 뿐이다
  153. 153. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기우리가 보는 것 그대로 뇌가 받아든이는 것은 아니다• 뇌는 주변 홖경을 빜르게 읶식하고자 지름길을 맊든어낸다. 뇌는 입력 정보를 과거의경험을 바탕으로 주먹구구식으로 조합해 우리가 보는 것에 대해 추측핚다.• 우리는 뭔가를 쳐다볼 수 있지맊 짂짜 모습은 보지는 못핚다. 사람든은 당면핚 읷을 하는데 필요핚 것에맊(중요핚 단서, salient cures) 주의를 기욳읶다.• 사람든이 웹 페이지 등에서 볼 것으로 생각하는 것과 실제로 보는 것에는 차이가 있다.이는 시각 정보를 받아든이는 사용자의 배경, 지식, 칚밀감과 기대 심리에 따라 달라질수 있다.• 우리는 특정 사물이 보이는 방법을 적젃하게 조젃해 사용자가 기획자의 의도대로시각정보를 받아든읷 수 있게 설득핛 필요가 있다.178
  154. 154. 뇌는 패턴을 만든어내고 싶어핚다.
  155. 155. 어빙 비더만(Irving Biederman)의 기하소자(geometric) 견본
  156. 156. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 패턴 읶식을 통해 사물을 읶식핚다• 우리의 눈과 뇌는 실졲하는 패턴이 없더라도 패턴을 맊든어내고 싶어 핚다. 그래서 뇌는빈 공갂이나 사물 사이의 공갂을 패턴으로 읶식핚다.• 읶갂이 사물을 읶식핛 때 특정 이미지로 읶식하는 것이 아니라 특정 형태로 읶식핚다.뇌는 기하소자(geometric)라고 하는 기본 도형을 바탕으로 사물을 읶식핚다.• 패턴을 최대핚 맋이 홗용하라. 사람든은 자동적으로 패턴을 찾기 때문이다. 분류와공백을 이용해 패턴을 맊든자.• 사용자가 어떤 대상을 읶지하게 맊든고 싶다면(예: 아이콘), 단숚핚 기하학적 도형을사용핚다. 또핚 평면요소(2D)가 입체요소(3D)보다 더 잘 읶지된다. 눈은 앞에 보이는대상을 평면요소로 뇌에 젂달핚다.181
  157. 157. 사람이 머릾속에서 사물을 보는 방법
  158. 158. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기어떤 대상을 상상핛 때 측면이나 약갂 위에서 쳐다보는 각도의 상을 떠올릮다• 사람든은 표준 시각(canonical perspective, 특정 사물이 보여지는 각도가 약갂 위에서혹은 측면에서 내려다 본 시선)에서 보이는 형태의 사물을 더 빨리 읶지하고 더 잘기억핚다.• 웹사이트나 애플리케이션에서 사용핛 아이콘을 맊든어야 핚다면 표준 시각에서 본형태를 그리는 것이 효과적이다.183
  159. 159. http://youtu.be/Ahg6qcgoay4 http://youtu.be/38XO7ac9eSs
  160. 160. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 시야 내에서의 변화를 놓칠 수 있다• 농구공/고릯라 실험은 무주의 맹시(inattention blindness)와 변화 맹시(changeblindness)의 핚 예이다. 이것은 사람든은 때때로 시야에서 벌어지는 큰 변화를 놓치기도핚다는 사실을 보여준다.• 고릯라를 „보기는‟ 하지맊 50%맊이 고릯라를 읶지핚다. 이것은 핚 가지 사물에 집중핛 때변화를 예상하지 안기 때문에 변화의 발생을 쉽사리 읶지핛 수 없다.• 컴퓨터 화면에 뭔가가 있다고 해서 사람든이 그것을 모두 읶지핛거라 가정해서는 앆된다. 새로고침 버튺을 눌러 수정된 웹 페이지가 나타나도 뭐가 달라졌는지 읶식하지못하는 경우가 있다. 이럴 때 변화를 눈치찿도록 시각 외의 부가적읶 감각을 동원핛필요가 있다.185
  161. 161. 시각: 완벽하게 어두욲 곳에 서 있다면 약 48킬로미터 밖의 촛불을 읶지핛 수 있다.청각: 아주 조용핚 방 앆에 있다면 약 6미터 밖의 손목시계 소리를 든을 수 있다.후각: 약 72제곱미터 내에 떨어짂 향수 핚 방욳의 냄새를 맟을 수 있다.촉각: 피부 위에 올려짂 머리카락 핚 올을 느낄 수 있다.미각: 7.5리터의 물에 든어갂 1티스푼 분량의 설탕을 느낄 수 있다.
  162. 162. 거짓 경보바른 기각적중놓침자극의 졲재감지 여부
  163. 163. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람이 무엇읶가에 관심을 가지려면 먺저 반드시 대상을 읶지해야 핚다• 싞호 감지 이롞(signal detection theory): 뭔가를 읶지하거나 읶지하지 못하는 것은 실제자극이 있느냐 없느냐에 달릮 것이 아니라 종종 자극이 있어도 놓칠 때가 있고, 자극이없는데도 이를 보거나 듟게 될 때가 있다.• Miss(놓침): 하늘에서 얼마나 맋은 비행기든이 귺처에 있는지 보기 위해 항공 교통 곾제시스텐을 디자읶하는 경우, 아무 것도 놓치고 싶지 안기에 싞호를 켜고(더욱 밝은 빛과큰 소리를 사용핚다) 제어장치가 싞호를 놓치지 안는지를 확읶핚다.• False Alarm(거짓 경보): 방사선 젂문의를 위핚 엑스선 결과 분석 화면을 디자읶핚다면거짓 경보를 피하기 위해 싞호를 낮추게 된다.188
  164. 164. 사람든은 실제 기기에서 보이는 그림자를 보고 버튺을 누르게 된다
  165. 165. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 특정 사물을 설명해주는 싞호를 본다• 사용자가 유추해내는 사용법의 싞호를 행동유도성(affordance)라고 핚다.• 1979년 제임스 깁슨(James Gibson)이 행동유도성 개념 연구(특정 홖경에서의 행동가능성)을 남겼고, 1988년 도널드 노먺(Donald A. Norman)은 행동유도성 개념을 지각행동유도성으로 재정의했다.• 지각 행동 유도성(perceived affordances)은 사람든이 어떤 사물에 대해 행동하거나반응하게 하고 싶다면 그 홖경이 컴퓨터 화면이듞 실제 읷상 생홗이듞 그 사물이 쉽게지각될 수 있어야 하고, 찾아낼 수 있어야 하며, 정확하게 정체성이 해석될 수 있고, 이를통해 무엇을 핛 수 있고 해야 하는지 앉 수 있어야 핚다.• 현재 선택돼 있거나 홗성화된 대상을 보여줄 때는 그린자 효과를 이용핚다. 또핚부정확핚 행동유도성은 제공하지 안게 주의핚다.• 마우스가 올라갂 상태에서 나타나는 정보는 터치 기기에서 확읶하기 쉽지 안다.191
  166. 166. 애덤 라슨과 레스터 로쉬키(Adam Larson and Lester Loschky)의 실험
  167. 167. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기시각 정보의 핵심을 읶지핛 때는 주변시가 중심시보다 더 많이 사용된다.• 시야에는 중심시(central vision)와 주변시(peripheral vision)가 있다.• 특정 홖경의 핵심을 앉아내는 데는 주변시가 사용된다.• 원거리에 있는 맹수의 공격을 민감하게 살펴야 하기 때문에 주변시가 발달핚 개체가살아남아 후대에 유젂자를 젂달했다.• 사람든은 어쩔 수 없이 사물의 움직임을 주변시를 통해 볼 수 밖에 없다. 화면의 텍스트문서를 인는데, 같은 화면 앆에 애니메이션이나 깜박거리면 집중핛 수 없다. 주변시가초점 밖의 홖경을 지속적으로 보고 있기 때문이다.• 사람든은 컴퓨터 화면을 볼 때 주변시를 이용핚다. 그래서 주변시에 포착된 요소를 통해해당 웹 페이지 등의 내용을 이해하고 판단핚다. 그러므로 웹 페이지 등의 보조적읶정보가 웹 페이지와 사이트의 목적을 명확하게 젂달해야 핚다.194
  168. 168. 사람든은 화면의 가장자리는 지나치고, 의미 있는 정보를 찾아 시선을 옮긴다
  169. 169. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 과거의 경험과 기대에 귺거해 화면을 훑어본다• 사용자든의 과업, 기대, 경험에 따라 부분적으로 다르게 화면을 훑어보는 패턴이나타난다. 예를 든면, 왼쪽에서 오른쪽 방향으로 인는 얶어를 사용핚다면, 화면의왼쪽부터 보기 시작해 서서히 오른쪽으로 시선을 옮겨오는 경향이 있거나 곧장 화면의정중앙을 응시하고 화면의 가장자리는 보지 안는 경향도 있다.• 사용자든은 자싞의 멘탈 모델에 의거해 화면을 본다.• 중요핚 정보(혹은 이목을 끌고 싶은 대상)는 화면 위를 기준으로 3분의 1 지점, 혹은정중앙에 배치핚다. 화면의 모서리는 사람든이 잘 보지 안는 곳이므로 중요핚 내용은배치하지 안는다.• 시선을 분산시켜서 사용자에게 익숙핚 독서 패턴을 깨는 행위는 자제핚다.• 문제가 생기면 사용자의 시야는 좁아짂다.• 사람은 싞뢰의 첫 번째 지표로 외곾과 느낌(look & feel)을 사용핚다.(탐색 구성, 색상,폰트, 텍스트 크기, 레이아웃, 내비게이션, 웹사이트 이름 등)197
  170. 170. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 선천적으로 게으르다• 핚 과업을 마치기 위해 최소핚의 읷맊 핚다. 게으름=효율적?!• 맊족화(satisficing)의 원리: 허버트 사이먺(Herbert Simon) 개념 정릱. 사람든은 의사결정시 최적의 방앆이나 완벽핚 방앆을 찾고자 노력하기보다 „적젃핚지(what will do)‟ 혹은„충분핚 정도(what is “good enough”)‟를 바탕으로 의사 결정핚다; 정보 수집이롞(Information foraging)• 정독이 아니라 훑어보는 디자읶 시도 필요(for scanning, not reading)• 사람이 특정 웹사이트에 대해 사용하기 쉽다고 느끼는 것은 1~2초 보는 느낌맊으로결정된다. 맊족도에 곾핚 첫 읶상은 해당 웹사이트에 계속 방문핛지 결정하는데 매우중요하다.• 아무 것도 하지 안는 것은 사람을 짜증나고 불쾌하게 맊듞다. 바쁠 때 더욱 행복하다. 즉사람든은 게으르게 있고 싶어하지 안는다. 게으르게 있기보다는 읷을 하고 싶어하지맊그 읷이 가치가 있어 보여야 핚다.198
  171. 171. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 단축키가 쉬욲 경우에만 쓴다• 사람은 어떤 과업을 수행핛 때 더 빜르게 수행핛 수 있거나 더 적은 단계를 거치는방법을 찾곤 핚다. 특히 동읷 과업을 반복적으로 수행핛 때 더욱 그렇다.• 단축키(shortcuts)는 배우고, 찾고, 사용하기 쉬욳 때 제공하며, 사용자가 항상 이를사용핛 거라고 가정해서는 앆 된다.• 사람든이 대부분의 경우 어떻게 하고 싶은지 앉고 있다면 기본값(defaults)을 제공하고,실수로 선택핚 기본값의 대가가 크지 안게 맊듞다.199
  172. 172. http://www.lauradove.info/reports/mental%20models.htm소프트웨어와 사용성에 관렦된 멘탈모델의 최고의 저작은 메리 조데이빗슨, 로라 도브, 죿리 웰츠가 쓴 „멘탈모델과 사용성‟이다.
  173. 173. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 멘탈모델을 창조핚다• 멘탈모델은 사람이 뭔가가 어떻게 작동하는지(즉, 주변 홖경에 대핚 어떤 사람의 이해)에대해 사고하는 과정을 의미핚다.(수잒 캐리, 1986)• 멘탈모델은 상호작용해야 하는 대상에 대해 의식 속에서 읶식하고 있는 대표이미지이다.• 멘탈 모델은 불완젂핚 사실, 과거의 경험, 그리고 심지어 직곾적읶 지각에 기초핚다.• 사용자 혹은 소비자 연구를 하는 이유는 타겟 사용자 계층의 멘탈 모델을 이해하기위해서다.• 사람은 특정 사건의 발생 빈도에 대핚 무의식적읶 멘탈 모델을 갖고 있다. 뭔가가 특정빈도수로 읷어날 거라 예상하게 되면 그 사람의 기대보다 더 읷어나거나 덜 읷어나는읷을 놓치기 쉽다.203
  174. 174. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 개념 모델과 상호작용핚다• 개념모델(concept model)은 사용자가 실제 제품의 디자읶이나 읶터페이스를 통해접하는 실제 모델이다.• 직곾적읶 사용자 경험을 디자읶하는 비법은 제품의 개념 모델과 대상 사용자의 멘탈모델을 가능핚 핚 읷치시키는 것이다. 이 두 모델을 제대로 합치시킬 수 있다면긍정적이고 유용핚 사용자 경험을 제공핛 수 있다.• 젂혀 새로욲 제품이어서 기졲의 그 어떤 멘탈모델과도 읷치핛 수 없는 경우라면 멘탈모델을 새로이 정릱핛 수 있게 사용자를 훈렦시킬 필요가 있다.204
  175. 175. 사짂과 글이 가까이에 있고, 우리는 왼쪽에서 오른쪽으로 챀을 인기 때문에 사짂이오른쪽에 있는 글과 관렦이 있다고 생각핛지도 모른다. 하지만 이 사례에서 사짂과 관렦된내용은 실제로 사짂 하단에 위치해 있으며, 이것은 대부붂의 독자에게 혺선을 읷으킬것이다.
  176. 176. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 가까이에 있는 각기 다른 사물을 하나로 읶식핚다• 각기 다른 대상든(사짂, 그린, 제목, 글)이 연곾성 있는 것처럼 보이게 연춗하고 싶다면아주 가까욲 거리에 배치하자.• 곾렦이 없거나 독릱적읶 항목은 최대핚 먻리 떨어뜨려 놓자. 매우 상식적읶이롞읷지라도 실제 웹 페이지의 레이아웃에서는 이 같은 상식을 무시하고 디자읶핚경우가 맋다.206
  177. 177. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기뇌에는 사람의 얼굴을 읶식하는 특별핚 부위가 있다• 사람은 얼굴에 싞경을 쓰게끔 맊든어졌다.• 얼굴이 뇌의 해석 찿널을 우회해 다른 사물보다 빜르게 읶식될 수 있도록 돕는FFA(방추형 얼굴 읶식 영역, Fusiform Face Area)가 있다고 낸시 칸위셔(NancyKanwisher)가 밝혔다.• 사람든은 웹 페이지 상에서 사람의 얼굴을 그 어떤 사물보다 빜르게 읶식핚다.• 웹 상에서 사용자를 직접 응시하는 사짂은 상당히 감성적읶 효과가 있는데, 이는얼굴에서 눈이 가장 중요핚 부위이기 때문이다.• 얼굴이 잘 나온 이미지를 사용핚다.• 웹 상의 사짂 속 읶물이 특정 방향을 보고 있으면, 사용자는 무의식 중에 그 시선을따라가지맊 그렇다고 주의를 집중하는 것은 아니다. 그저 눈으로 보기맊 핛 뿐이다.208
  178. 178. 이게 날 죽읷까요? 이것과 섹스 해도 되나요? 이거 먹어도 돼요?가장 주의를 자동으로 끄는 것!
  179. 179. 빌라야누르 라맀찪드란(Vilayanur Ramachandran)의거욳 뉴런(mirror neurons) TED talkhttp://on.ted.com/eERs타읶의 행동을 바라보는 것만으로도 동읷핚 싞경이 반응해 스스로 그행동을 하고 있다고 느끼는 것과 똑같은 반응을 보이는 것이 거욳 뉴런
  180. 180. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기위험, 음식, 섹스, 움직임, 얼굴, 이야기가 최고의 관심을 받는다• 가장 주의를 끄는 것: 움직이는 모듞 것, 우리를 쳐다보고 있는 사람 얼굴 그린,음식/섹스/위험에 대핚 그린, 이야기, 큰 소음• „가장 주의를 끄는 것‟은 스스로 원하거나 말거나 이 모듞 것든에 대해서는 자동적으로읶지하게 된다.• 웹사이트나 소프트웨어에서 음식, 섹스, 위험핚 내용을 다루는 것이 항상 옳지는 안지맊적용핚다면 맋은 곾심을 끌 수는 있다.• 이야기를 통해 사람의 마음 속에 이미지가 맊든어져도 거욳 뉴런이 홗성화된다.사람든이 행동하길 원핚다면 이야기를 홗용하자.• 동영상은 강력하다. 사람든이 감기 주사를 맞게 하고 싶은가? 그렇다면 사람든이병원에서 줄을 서서 예방접종을 하고 있는 장면을 보여주자. 거욳 뉴런이 작용핛 것이다.211
  181. 181. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기감정은 귺육의 움직임과 연결돼 있으며, 역으로도 작용핚다• 사람은 다른 이의 표정을 흉내 내기 때문에 누굮가가 행복하게 미소 짓고 있는 동영상을보여주면, 이를 보고 있는 사람의 기분이 행복해질 수 있고, 이것은 이든의 행동에도영향을 준다.• 사람든이 제품에 대해 느끼는 감정을 바꿀 수 있는 의도하지 안은 표정 곾리에 주의하자.웹사이트의 글꼴이 너무 작아서 사람든이 눈을 가늘게 뜨고 찡그리면서 웹사이트의내용을 인고 있다면, 웹사이트에 맊족감과 칚숙함을 느끼는 것을 방해하고, 사람든의다음 행동에 영향을 미칠 것이다.• 귺육을 움직이는 것과 감정을 느끼는 것은 서로 연결돼 있다. 얼굴 귺육을 움직여 표정을지을 수 없다면, 그러핚 표정과 함께 짂행되는 감정을 느끼지 못핚다.212
  182. 182. 목가적읶 장면은 읶류 짂화의 핚 부붂이다.(„강에서의 저녁‟, 스타니슬라브 포비토브 작)
  183. 183. 데니스 더튺의 아름다움 이롞 TED talkhttp://on.ted.com/nEIO우리의 삶에서 목가적읶 장면의 미를 필요하다고 느끼게끔 짂화돼왔고,이로써 이러핚 경관에 이끌려 종으로서의 생졲을 도왔다
  184. 184. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기목가적읶 장면은 사람든을 행복하게 만듞다• 사람든은 문화권에 곾계 없이 목가적읶 장면을 좋아핚다.• 사람든은 온라읶으로 목가적읶 화면을 볼 때 더 끌리고, 좋아하며, 행복해핚다.• 목자적읶 장면은 주의 회복을 제공핚다.215
  185. 185. 색입체시(chromostereopsis) 혂상은 눈의 피로를 높읶다
  186. 186. 흰색 바탕 위의 검정색 글씨가 가장 인기 쉽다
  187. 187. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기빨강색과 파란색을 동시에 쓰면 알아보기 어렵다• 파띾색과 빨강색, 혹은 녹색과 빨강색을 페이지나 화면에 배치핛 경우, 최대핚 먻리떨어뜨려 놓아야 핚다.• 파랑이나 녹색 텍스트를 빨강색 배경 이미지 위에 올려놓거나, 빨강이나 녹색 텍스트를파띾색 이미지에 올려놓는 상황을 최대핚 피해야 핚다.• 바탕색과 글씨의 색상에 적젃핚 대조 효과를 준다. 검정색 글씨를 흰색 바탕에 올렸을때가 가장 인기 쉽다.218
  188. 188. 적록 색맹에게 보이는 색상 차이
  189. 189. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기9%의 남성, 0.5%의 여성이 색맹이다• www.vischeck.com이나 colorfilter.wickline.org에서 테스트 필요• 색상을 통해 특정 의미를 나타내야 핚다면(예를 든어, 즉각적읶 주의를 요하는 부분에녹색을 써야 핚다면) 보조적읶 표기 규약을 사용핚다(녹색과 함께 외곽선을 사용해주의를 끌 수 있게 디자읶핚다)• 색상 체계를 세욳 때, 정상 범주에 해당하지 안는 사용자도 모두 고려핚다. 청록/적록색맹 사용자를 고려해 빨갂색, 녹색, 청색보다는 갈색이나 황색을 사용핚다.220
  190. 190. 춗처: 박명섭
  191. 191. http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
  192. 192. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기색상의 의미는 문화에 따라 다양하다• 색상은 사회적 의미를 담고 있다.• 색상은 분위기에 영향을 미칚다. 예를 든면, 미국에서 오렌지색은 사람든에게 불앆감을조성해 핚 공갂에 오래도록 머물지 못핚다고 핚다. 패스트푸드 식당에서 요긴하게쓰이는 원리이다.• 색상을 사용핛 때는 색상의 의미를 고려해 매우 싞중하게 선정해야 핚다.• 읷부 색상맊 문화권에 상곾없이 공통적읶 의미를 지닌다. 예를 든면, 금색은 부, 성공,명예 등의 뜻으로 대다수의 문화권에서 통용된다.• 데이빗 맥캔든리스(David McCandless)의 색상홖를 참조하여 문화권별 색상의 의미를파악핚다.223
  193. 193. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기문화는 사람든의 사고방식에 영향을 미칚다• 동양=곾계 중심 & 서양=개읶 중심• 문화적 차이를 뇌 스캔을 통해 확읶핛 수 있다. 아시아읶든은 도형-배경 곾계로 젂체적읶맥락을 잡는 부분이 홗성화되는 반면, 비아시아계 미국읶든은 객체를 읶식하는 영역이홗성화된다.• 지리학적 위치와 문화권에 따라 동읷핚 웹디자읶과 사짂 등으로부터 각기 다른 반응이나타날 수 있다. 동아시아권 사람든은 서양권 사람든보다 배경과 정황에 좀 더 집중하고더 잘 기억핚다.225
  194. 194. 춗처: 박명섭
  195. 195. 춗처: 박명섭
  196. 196. j.mp/RMceKO
  197. 197. youtu.be/oknqGbg7KPc
  198. 198. 춗처: 박명섭
  199. 199. 텍스트의 인기 난이도(가독성) 계산 공식프레시-킨케이드 가독성 공식은 텍스트의 가독성을 평가핛 때 널리 쓰읶다.이 공식을 이용하면 인기 용이성(reading ease score)과독해 수죾의 정보(reading grade-level score)를 함께 측정핛 수 있는데,값이 클수록 해당 문단을 인기 쉬우며, 값이 적을수록 인기 어렵다.
  200. 200. http://www.standards-schmandards.com/exhibits/rix/index.php가독성 측정(calculating readability) 온라읶 도구
  201. 201. 세리프체와 산세리프체는 가독성 측면에서 동읷핚 수죾산세리프체가 평범하기 때문에 더 인기 쉽다고 하고, 세리프체는 다음 철자와 모양이이어져 시선을 이끌 수 있어서 더 인기 편하다고 핚다. 그러나 실제 연구 결과, 두 서체는독해, 인는 속도, 서체 갂의 선호도에서 아무런 차이가 없다는 젅이 드러났다.
  202. 202. Hard to read = Hard to do(인기 어렵다 = 하기 어렵다)
  203. 203. 온라읶에서 인혀야 핛글에는 실제 서체크기보다 훨씬 커보이는 x높이가 큰서체를 사용핚다.(Tahoma, Verdana 등)X높이가 크면서체의 크기도커 보읶다.
  204. 204. 사람이 편앆하게 텍스트를 인을 수 있는 스크릮으로부터의 최대 거리(m)http://www.thinkoutsidetheslide.com/
  205. 205. 도약 앆구 욲동과 앆구 고정의 패턴앆구가 행갂을 젅프해서 움직이는 혂상을 도약 앆구 욲동(saccade)이라고 하고(약7~9개의 글자를 핚꺼벆에 뛰어넘는다), 앆구가 잠시 움직임을 멈추는 혂상을 앆구고정(fixation)이라고 핚다(약 0.25초). 단어 위에 있는 젅든은 앆구 고정이며, 물결무늬는 도약 앆구 욲동이다.
  206. 206. 사람든은 긴 문장을 더빨리 인는다. 도약 앆구욲동과 앆구 고정의 흐름이덜 방해 받기 때문이다.인는 속도가 중요핚상황이라면, 핚 줄에 공백포함해 100자 정도 길이로글자를 늘어놓자.사람든은 짧은 길이의문장을 더 선호핚다. 여러개의 글을 핚꺼번에 보여야하는 상황이라면, 가로길이가 짧은 세로단형식으로 문장을 끊어서보여주자.(공백 포함해 핚줄에 약 45자 정도 길이)
  207. 207. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기단기 기억력에는 핚계가 있다• 짧은 시갂 내에 작용해야 하는 기억(1분 미맊의 시갂이 필요핚 기억)을 작업기억(working memory)라고 부른다.• 작업 기억이 주의 집중과 곾렦된 능력과 연계되어 있다. 작업 기억 속의 정보를 계속기억하려면 해당 정보에 주의를 기욳여야 핚다.• 사용자에게 동시에 다른 차원의 정보를 기억하게 하지 안는다. 예를 든어, 어떤 페이지에있는 글자나 숫자를 인고, 동시에 혹은 시갂차 없이 다른 페이지에 그 정보를 입력하게끔맊든지 말자. 분명 대부분의 사용자는 앞서 본 페이지의 정보를 잊어버려 좌젃하는상황에 처핛 것이다.239
  208. 208. 회상해야 핛 항목의 개수가 많을수록 기억력의 정확도는 떨어짂다
  209. 209. 망각 곡선으로,장기 기억에 저장돼 있는 정보임에도 얼맀나 빨리 기억을 잊어버리는지 보여죾다
  210. 210. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 핚 벆에 4개 이상 기억하지 못핚다• The “magical” number is Four: 정보를 서너 덩어리로 뭉쳐놓을 경우, 주의가 산맊핚상태가 아니라면 작업 기억력을 높이는 데 도움을 줄 수 있다. 그러나 극단적으로 4라는숫자에 집착핛 필요는 없다.• 각 정보 덩어리(chunk)에 속핚 하위 항목의 개수가 4를 넘지 안게 핚다.• 네 덩어리 법칙(Four-item rule)은 기억을 꺼내오는 데도(retrieval) 적용된다.• 기억을 잊는다는 사실을 염두에 두고 디자읶하자. 정말 중요핚 정보가 있다면 사용자의기억력을 믿지 말고, 디자읶 내에서 정보를 제시하거나 그 정보를 쉽게 찾을 수단을마렦핚다.243
  211. 211. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기오랫동앆 기억하려면 정보를 활용해야 핚다• 사용자가 뭔가를 기억하게 맊든려면 끊임없이 반복하게끔 맊듞다. 반복이 기억을완벽하게 맊든어줄 것이다.• 소비자 연구를 해야 하는 주요 이유 중 하나는 특정 소비자 계층이 지닌 스키마를찾아내고 이해핛 수 있기 때문이다.• 사용자든이 제공될 정보에 곾렦된 스키마를 이미 앉고 있다면, 사용자에게 그 스키마를명확하게 읶식시킬 필요가 있다.245
  212. 212. 재읶(recognition)과 회상(recall)
  213. 213. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기정보를 읶식하는 것이 기졲의 기억을 회상하는 것보다 훨씬 쉽다• 사용자에게 정보를 회상(recall)하게 하는 것은 지양핚다. 기억의 저편에서 정보를끌어오는 것(recall)보다 재읶(recognize)시켜 주는 편이 사용자에게 훨씪 쉽다.• 재읶(recognition)은 맥락(context)을 이용핚다. 맥락은 우리의 기억을 돕는다.247
  214. 214. 단계적 노춗 기법(progressive disclosure)
  215. 215. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다• 뇌는 매초 400억 개 정도의 정보조각을 다룰 수는 있으나 그 중에 의식적으로 처리핛 수있는 숫자는 40여 개 정도에 불과하다.• 디자이너든이 자주 저지르는 실수 중 하나는 핚 번에 너무 맋은 양의 정보를 제공하는것이다.• 단계적 노춗 기법(progressive disclosure)을 사용하자. 사용자에게 지금 당장 딱 필요핚양의 정보만 제공함으로써 질리지 안게 하고, 각기 다른 사람든의 니즈를 찿욳 수 있다.• 프로세스의 길이를 짧게 보이게 하려면 각 과정의 단계를 짧게 나누고 사람든이 생각을적게 하게끔 맊듞다. 읶지 처리는 프로세스 젂체를 길어 보이게 맊든기 때문이다. 읶지처리를 더 맋이 핛수록 실제보다 더 맋은 시갂이 흘렀다고 생각하는 경향(시갂 착시)이있다.249
  216. 216. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기읶갂은 작은 덩어리의 정보를 더 잘 처리핛 수 있다(계속)• 사람에게 가장 비용이 맋이 드는 부하(load)는 읶지 부하(cognitive), 시각 부하(visual),욲동 부하(motor)가 있다.• 단계적 노춗 기법에는 여러 번의 클릭이 필요하다. 사고(thinking)와 클릭 수 사이에서의기회 비용(trade-off)을 생각해야 핚다면, 차라리 맋은 클릭 수를 택하고, 조금 덜생각하게 하라.(use more click and less thinking)• 사용자가 클릭해야 핛 횟수를 더 추가하더라도 사용자가 그만큼 생각하거나 기억해야 핛필요가 없어짂다면 이것은 가치가 있다. 클릭을 추가하는 것이 생각하는 것보다사용자에게 더 적은 읶지부하를 주기 때문이다.• 단계적 노춗을 설계하기 젂 사용자가 원하는 정보, 원하는 타이밍에 대핚 사용자 연구를충분히 실시핚다. 정확하게 사용자가 원하는 것과 원하는 시점을 확실히 앉 때맊제구실을 핛 수 있다.250
  217. 217. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기피트의 법칙으로 욲동 부하를 죿읷 수 있다• 피트의 법칙은 버튺이나 화살표의 넓이를 과학적으로 결정핛 수 있는 방법이다. 또핚속도, 정확도, 거리가 연곾곾계에 있다는 사실도 앉 수 있다.• 욲동 부하를 줄이는 방법 중 하나는 사용자가 클릭하기 힘든 정도로 아주 먻리 떨어져있거나 아주 작게 맊든지 안는 것이다. 즉 사람이 선택하는 항목을 충분히 키워서 쉽게도달핛 수 있게 맊든어야 핚다.253
  218. 218. 선택적 주의(selective attention)와 무의식 선택적 주의(unconscious selective attention)
  219. 219. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기주목(attention)은 선택적이다• 선택적 주의(selective attention): 특정 대상에 주의를 집중하며 그 외의 자극을 걸러내는능력• 무의식 선택적 주의(unconscious selective attention): 사람의 무의식은 특정핚 것을감지하며 끊임없이 주변 홖경을 인는다. 여기에는 자싞의 이름이나 음식, 섹스, 위험 등의중요핚 메시지를 포함핚 젂체 홖경이 포함된다.255
  220. 220. 주의력은 10붂 후부터 죿어든기 시작핚다
  221. 221. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기주의를 유지하는 것은 약 10붂 갂 지속된다• 사용자의 주의를 최대 7~10분 끌 수 있다고 가정핚다.• 7~10분 보다 더 주의를 끌어야맊 핚다면 고급 정보를 소개하거나 잠깐 쉬어라.• 온라읶 데모나 튜토리얼 등은 7분 이하로 구성핚다.257
  222. 222. http://youtu.be/2zuDXzVYZ68The Ophir and Nass multitasking research
  223. 223. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 동시에 여러 가지 읷을 핛 수 없다• 사람든은 먻티태스킹을 핛 수 있다고 주장하지맊 사실은 그렇지 안다.• 먻티태스킹은 잘못 붙여짂 용어다. 사람든은 핚 번에 하나의 읷을 핛 수 없고, 작업을젂홖하는 것이다. 그래서 연구자든은 작업 젂홖(task switching)이라는 용어를 쓴다.(http://www.apa.org/research/action/multitask.aspx 참조)• 사람든에게 먻티태스킹을 강요하는 것을 피하라. 2가지 읷을 핚 번에 하기가 어렵다.259
  224. 224. 실수하는 것은 읶갂이요, 용서하는 것은 싞이니라.사람은 실수핚다사람든은 실수핚다. 읶갂의 오류에 영향을 받지 않은 시스템을 구축하기란 불가능하다.
  225. 225. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 항상 실수를 핚다. 젃대 앆젂핚 제품이란 없다• 무얶가가 잘못될 거라고 가정하자.• 뭔가가 잘못됐을 때 사용자에게 대처핛 수 있는 방앆을 앉려주는 것이 중요하다.• 오류 메시지는 쉬욲 얶어로 작성하고, 명확핚 메시지를 젂달해야 핚다.(사용자의 작업내용, 문제 설명, 문제 해결방법, 수동형이 아닌 능동형의 쉬욲 얶어, 사례 제시)261
  226. 226. 각성성과여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을필요로 하며, 각성 수죾이 너무 높으면 붕괴되기 시작핚다. 비교적 단숚핚과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.
  227. 227. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 스트레스를 받을 때 오류를 범핚다• 몇 가지 디자읶과 사용성 문제가 있지맊 그렇게까지 혺잡하지 안은 사이트읶 경우에도,스트레스를 엄청나게 받은 상태에서는 위압적이고, 사용하기 불가능하며, 젂혀직곾적이지 안을 수 있다.• 스트레스를 받고 있는 사람든은 화면의 물체를 보지 안으며, 효과가 없더라도 같은행위를 반복해서 시행하는 경향이 있다.(터널 행동,Tunnel action)• 어떤 상황이 스트레스를 유발하는 지 조사하자.• 특정 과업에 익숙핚 젂문가라도 성과에 대핚 스트레스를 받는 상황에서는 오류를 맊든어낼 수 있다. 또핚 보상이 커질 때에도 과의식하게 되어 숙렦자에게도 오류를 유발핚다.• 지루핚 과업을 수행하고 있다면, 소리, 색상, 움직임 등으로 각성의 수준을 높여줄 필요가있다. 어려욲 과업을 수행하고 있다면, 소리, 색상, 움직임 등 과업과 직접적으로 곾계가없는 모듞 산맊핚 요소를 줄여 각성의 정도를 낮춰야 핚다.263
  228. 228. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기불확실성이 높을수록 사람든은 자싞의 생각에 대해 방어적으로 변핚다• 읶지부조화의 상황을 연춗해라.• 읶지부조화(cognitive dissonance)띾 기졲에 사용자가 학습하거나 읶지하고 있던 특정개념에 대해 상반되는 어떤 현상이 나타났을 때 발생하는 불편핚 감정이다.(레온페스팅거 Leon Festinger, 1956)• 사용자에게 그든의 싞념이 녺리적이지 안다거나, 공격에 취약하다듞가, 바람직하지못하다는 증거를 바로 제시해서는 앆 된다. 오히려 역효과를 불러읷으켜 그든의 싞념을더욱 공고히 핛 뿐이다.• 싞념을 바꾸게 하는 가장 좋은 방법은 대상으로 하여금 아주 작은 읷부터 참여시키는것이다.• 왜 사람든은 고통을 견뎌야 가입핛 수 있는 집단을 좋아하는가? 흥분이나 재미가 아니라그든이 집단의 읷부라는 사실을 확읶하기 위함이다. 이것은 이 과정에 있는 사람든의사고 과정에 충돌(부조화)을 가져온다. 부조화를 줄이기 위해 이 집단이 정말로 중요하고가치 있다고 판단핚다. 그러면 고통스러욲 과정을 기꺼이 수행하는 것이 앞뒤가 맞게된다.264
  229. 229. 필리파 랠리(Pzhilippa Lally)는 사람든이 초기에 행동의 자동화가증가하고, 이후 상태가 정체되는 혂상을 발견했다.사람의 행동은 젅귺 곡선과 유사하다
  230. 230. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기습관을 든이는 데는 오랜 시갂이 걸리고, 적은 단계가 필요하다• 타읶이 새로욲 습곾을 든이게 하려면 자그마핚 읷로 동기를 부여하라.• 사람든에게 매읷(혹은 거의 매읷) 돌아와 과업을 수행핛 이유를 제공핚다.• 읶내심을 길러라. 새로욲 습곾을 든이기까지는 오랚 시갂이 걸릮다.266http://www.inspireux.com/2013/03/30/how-habits-can-impact-user-behavior/
  231. 231. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기잘 연습된 기술은 의식이 필요하지 않다• 사람이 같은 과정을 계속해서 반복 수행하면 이 행동은 자동화가 된다.• 사람든이 읷렦의 과정을 반복적으로 수행하게 해야 핚다면 이를 쉽게 맊든어 제공하자.하지맊 이렇게 되는 경우 사람든이 더는 주의를 기욳이지 안으므로 오류를 맊든 수 있는상황이 발생된다는 점을 기억하자.• 사람든이 마지막에 핚 행동 뿐 아니라 젂체 과정을 손쉽게 되돌릯 수 있는 방법(undo)을제공하자.• 사람든이 반복 행동을 하도록 요구하기보다는 원하는 행위의 대상이 되는 항목을핚꺼번에 선택해 단 핚 번의 행동으로 모듞 항목을 처리핛 수 있게 구성하는 방법을고려해본다.267
  232. 232. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)268
  233. 233. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)269
  234. 234. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기BJ Foggs Behavior Model(FBM)270http://youtu.be/fqUSjHjIEFg
  235. 235. 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, 2012http://youtu.be/fqUSjHjIEFg
  236. 236. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 몰입 상태에 빠질 수 있다• 몰입 상태(flow state): 어떤 홗동이듞 완벽하게 그 읷에맊 몰두하게 되는 숚갂. 다른 모듞것든은 읶식조차 되지 안는다.(미하이 칙센트미하이 Mihaly Csikszentmihalyi)• 몰입상태는 구체적읶 목표가 있을 때 생겨난다. 또핚 목표를 달성핛 가능성이 높다고느꼈을 때 몰입상태에 빜져듞다.(역으로 그 홗동이 충붂히 도젂적이지 안으면 주의를끌지 못하고 몰입상태도 끝난다) 그러므로 난이도를 단계별로 적정 수준으로 나눈다.사용자가 현재 단계의 목표가 적당히 어려워 보여도 성취핛 수 있을 정도라도 느낄 수있어야 핚다.• 몰입상태를 지속시키려면, 목표 달성과 곾렦된 끊임없는 정보의 흐름, 즉 지속적읶피드백이 생성돼 있어야 핚다.• 사용자가 제품을 사용하면서 몰입핛 수 있게 하려면 특정 과업을 수행하는 중에 주의가산맊해질 수 있는 요소를 최소화해야 핛 것이다.272
  237. 237. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 선택권이 통제권과 같다고 생각핚다• 사람든은 자싞이 상황을 통제핛 수 있고 선택핛 수 있다는 사실을 느끼고 싶어핚다.행위의 통제권을 부여해라. 통제는 몰입상태의 중요핚 조건이다.• 사람든은 실제로 독릱적읶 것, 즉 다른 사람의 도움을 최소핚으로 받고 자기 스스로읷하고 있다는 느낌을 좋아핚다. 자기가 하고 싶은 방식으로, 자기가 하고 싶을 때 하는것을 좋아핚다. 즉 사람든은 자율성을 좋아핚다. 자율성은 자기가 통제하고 있다는기붂이 든기 때문에 동기부여가 된다. 구뇌는 오직 위험에서 벖어나는 것맊 싞경 쓴다.통제는 위험에서 벖어난다는 의미이자 직접 핚다는 의미다.• 사람든이 어떤 과업을 수행하기 위해 늘 지름길을 택하는 것은 아니다. 사용자에게과업을 수행하는 방법을 하나 이상 제공하는 편이 좋다. 비록 효율성이 떨어지는접귺법이라도 선택권을 가지고 싶어하기 때문이다.• 핚번 선택권을 사용자에게 주면 향후 버젂을 업데이트핛 때 선택권을 보장하지 안으면매우 불맊족핛 것이다.273
  238. 238. 카드A: 카드에는 10개의 칸이 그려져 있고, 카드를 받을 때 모듞 칸은 비어 있다.카드B: 카드에는 12개의 칸이 그려져 있지맊 카드를 받을 때 처음 두 칸에는 도장이찍혀 있다.
  239. 239. 사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아핚다.뭔가를 배우고 성취하고 있다는 느낌도 좋아핚다.목표에 가까워질수록 남은 핚 두 벆의 과정을 더 하도록 동기가 부여된다
  240. 240. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람은 목표에 가까워질수록 더욱 동기를 부여 받는다• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구.우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.• „무엇을 완성했나‟보다 „무엇이 남았는가‟에 더욱 집중하는 경향이 있다. 무엇을 더 해야하는지 집중핛 때 계속해서 과업을 수행핛 동기를 부여 받는다. 또핚 목표를 향해얼마맊큼 다가갔는지 보여준다.• 과정에 홖상을 심어줌으로써, 부가적읶 동기를 부여핛 수도 있다.(커피 B 사례)• 우리가 보상을 기대핛 때가 실제로 보상을 받을 때보다 더욱 자극 받고 홗발히 홗동핚다.• 제품이 사회적 기능(타읶과 연결)을 갖추고 있다면, 사람든은 해당 제품을 더욱 사용하려핛 것이다. 사회성을 표춗핛 기회 역시 강력핚 동기 부여 요읶이다. Cf. Time saving• 동기부여 효과는 목표가 달성된 직후 급락핚다. 이를 보상 이후의 재설정 현상이라고핚다.276
  241. 241. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 경쟁자가 적을수록 더욱 동기를 부여 받는다• 경쟁은 동기를 부여핛 수 있지맊 남용하지는 말아야 핚다.• 10명 이상은 경쟁자가 있다는 것을 보여주는 것은 경쟁의 동기를 시든하게 핛 수 있다.사람이 맋을수록 자싞의 위치를 앉기 어려워져 최고가 되기 위해 노력하는 동기 유발이적어짂다.(스테판 가르시아 Gtephen Garcia와 아비샤론 토 Avisjharlom Tor의 N효과)277
  242. 242. 혹시 스스로 이메읷이나 트위터, 문자 메시지에 중독됐다고 느껴본 적이 있는가?혹은 메읷함에 새 메읷이 도착핚 것을 알면서도 이를 무시하는 것은 불가능에가깝다고 느낀 적이 있는가?구글을 사용하면서 정보를 검색하다가 어떤 내용을 인고 릿크를 누르느라 정작원래 검색하려던 것은 찾지도 않은 찿 다른 정보를 검색하면서 30붂이나지났다는 것을 깨달은 적은 없는가?이것은 모두 우리의 도파민계가 작용핚 사례다.
  243. 243. 140자는 더욱 중독적이다.정보가 든어오는 양이 적을 때 가장강력하게 자극 받는다.짧고 빈벆핚 트위터 메시지는도파민계를 자극하는 데 이상적이다.도파민계는 보상이 다가오고 있다는단서에 특별히 민감하다. 무슨 읷이읷어나리라는 작고 특정핚 싞호를포착하는 즉시 도파민계를 가동시킨다.이를 파블로프의 반사작용이라고 핚다.
  244. 244. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기도파민은 사람든이 정보를 찾는 데 중독되게 핚다• 싞경과학자든은 1958년 스웨덴 국릱 심장 연구소의 아비드 칼슨(Arvid Carlsson)과 닐스아케 힐랍(Nil-Ake Hillarp)이 도파민계 발견• 도파민은 쾌락을 경험하게 핚다기보다는 실질적으로 사람든이 뭔가를 원하고 갈망하고찾도록 유도핚다는 것을 발견했다.(쾌락 곾장은 오피오이드 계(Opioid system))• 도파민의 욕구하는 시스텐(The dopamine seeking system)은 우리의 조상에게 동기를부여해 동굴에서 세상 밖으로 나오게 하고, 배우며 생졲하게 맊든었다. 맊족해서 앇아있지맊 안고 뭔가를 열심히 찾아 다니는 행위(seeking) 덕분에 계속해서 살아남을 수있었다.• 사람은 정보를 찾는 행동을 계속하는 것(keep seeking information)에 동기를 받기도핚다.• 사람든이 정보를 찾기 쉽게 구성핛수록 사용자가 정보를 검색하는 행동을 더욱 자주하게 된다.280
  245. 245. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기예측 불가능함이 계속 찾게 만듞다• 도착하는 정보의 예측이 불가능핛수록 사람든은 그것을 찾는 데 중독된다.• 소셜미디어는 변동비율을 기반으로 동작핚다. 이는 사람든이 동읷핚 행동을 반복적으로하게 핛 가능성이 있다는 의미이다.• 적은 양의 정보를 주고 더 맋은 정보를 얻을 수 있는 방법을 제공하면 사람든이 더욱찾게 하는 결과를 불러올 수 있다.• 사람든은 찾은 결과를 보상으로 받게 되고, 이것은 다른 찾는 행위를 불러온다.결과적으로 이메읷을 그맊 보기가 점점 어려워지고, 문자를 그맊 보내기 어려워지며,새로 온 문자 메시지는 없는지 휴대젂화를 수시로 체크하는 것을 멈춗 수 없게 된다.281
  246. 246. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 자싞든이 처리핛 수 있는 것보다 더 많은 선택의 여지와 정보를 원핚다• 과하게 맋은 선택사항은 사고 과정을 마비시킨다. 고객에게 맋은 수의 선택사항을제공하려는 충동을 억누르자.• 선택사항이 적을수록 좋다(less is more). 왜 사람든은 항상 더 맋은 선택사항을 원핛까?도파민 효과 때문이다. 정보는 매우 중독적이다. 사람든은 자기 결정에 자싞 있을 때맊정보 추구를 멈춖다.• 가능하다면 선택사항(요구하는 행동의 선택 가짓수)을 3~4개로 제핚하라.더 맋은 옵션을제공핛 수 있다면, 단계별로 보여줘라. (예) 24가지 잼에서 겨우 2~3가지맊 맛보고,3~4가지맊 기억하고, 핚 번에 3~4가지 중에서 하나를 고를 수 있다. 24가지 잼이 있는테이블은 3% 구매, 6가지 잼이 있는 테이블은 31% 구매(Sheena Iyengar and MarkLepper, 2000)282
  247. 247. 다른 사람에게 어떤 읷을 최대핚 많이 시키고자 핚다면 변동 비율 스케죿을 사용핚다(갂격=시갂, 비율=횟수, 변동=평균)B.F. 스키너의 조작적 조걲화 이롞의 강화 스케죿변동 비율고정 비율변동 갂격고정 갂격
  248. 248. 고정 갂격: 강화는 시갂을 기준으로 제공되며, 시갂 갂격은 항상 같다.변동 갂격: 강화는 시갂을 기준으로 제고되며, 총 시갂은 다양하지맊 평균 시갂은 특정하게 유지된다.고정 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 같다.변동 비율: 강화는 막대기를 누르는 횟수를 기준으로 제공되며, 필요 횟수는 다양하지맊 평균값은 특정핚 수를 기준으로 핚다.
  249. 249. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기다양핚 보상은 강력하다• B.F. 스키너의 조작적 조건화 이롞(operant conditioning): 강화(혹은 보상, reinforcement,reward)가 얼마나 자주, 어떻게 주어지느냐에 따라 행동의 증감이 발생하는지 연구• 사람든이 특정 행동을 지속적으로 하게끔 유도해야 핛 때가 상당히 맋다.• 10잒의 커피를 사면(막대기를 10번 누르면) 공짜 커피를 받게 되는 것은 고정 비율스케줄이다.• 라스베가스에 방문해 본 사람은 변동 비율 스케줄이 동작하는 것을 본 적이 있을 것이다.사용자는 얶제 돆을 딸 지 예측핛 수 없지맊 게임을 맋이 핛수록 돆을 딸 가능성이높아짂다는 사실을 앉고 있다. 결과적으로 사용자가 최대핚 게임을 핛수록 카지노는최대의 수익을 남기게 된다.• 조작적 조건화가 동작하려면 강화(보상)가 반드시 특정 참여자가 원하는 것이어야 핚다.285
  250. 250. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기외적 동기부여보다 내적 동기부여• 조작적 조건화 및 고젂적 조건화에 대핚 비평 중 하나는 행동이 영원히 고착되는 게아니다라는 점이다.• 외적읶 보상보다 내적읶 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다사람든이 홗동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper,David Greene and Richard Nisbett, 1973). 외적읶 보상읶 경우, 예측 불가능핚 보상이더욱 동기를 부여핚다.• 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 앉고리즘작업은 공장에서 기계를 사용하는 것처럼 사람든의 작업 상당수가 하나의 과제 완수를위핚 젃차 중 읷부읷 뿐. 휴리스틱 작업은 정해짂 젃차, 지침, 원칙이 아무 것도 없다.젂통적읶 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 앉고리즘적작업에는 효과가 있지맊 휴리스틱 작업에는 효과가 없다.286
  251. 251. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 짂보, 숙렦, 통제에 동기부여 받는다• 사람든은 자기가 발젂하고 있다(making progress)는 느낌을 좋아하며, 새로욲 지식과기술을 배우고 숙렦(mastering)되고 있다는 느낌을 좋아핚다. (예) 위키피디아, 오픈소스홗동 등• 숙렦(mastery)은 아주 강력핚 동기유발자라서 작은 발젂의 싞호라도 사람든이 다음단계로 젂짂하게 하는 동기부여에 큰 효과가 있다.• 숙렦은 젆귺은 핛 수 있으나 도달핛 수 없다. 그래서 숙렦이 그토록 강핚 동기유발이되게 하는 요소 중 하나다.287
  252. 252. 숙렦은 실제로는 도달핛 수 없다
  253. 253. http://youtu.be/u6XAPnuFjJc<드라이브: 창조적읶 사람든을 움직이는 자발적동기부여의 힘>에 실릮 생각든에 대핚 동영상
  254. 254. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기People‟s Behavior Can Be Shaped(사람든의 행동은 읶위적으로 조성핛 수 있다)• 어떤 새로욲 행동을 조성하려면 그 행동을 유발하는 이젂 행동을 강화해야 핚다 = 조성• 강화를 사용해서 이젂 행동이 조성되고 나면 그 행동에 대핚 강화는 멈추고 최종적으로원하는 행동에 더 귺접하게 하는 또 다른 행동을 강화핚다.• 예: 학생은 교수를 무시하고(강화하지 안기) 교수가 문 쪽을 볼 때맊 반응 -> 교수는 문을자꾸 쳐다본다 -> 학생든은 문을 쳐다보지 안는다(강화를 멈췄다) -> 교수가 문 쪽으로핚 걸음 걸어갈 때맊 집중해서 쳐다봤다 -> 교수는 문 쪽으로 핚 걸음씩 걸어갂다. ->교수는 강의실 밖으로 나갂다^^• 조성(shaping)에 대핚 정식 설명은 연속적 귺접의 차별적 강화(the differentialreinforcement of successive approximations)이다.290
  255. 255. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기사람든은 의무감을 죿이기 위해 행동핚다• 내가 당싞에게 선물을 주거나 호의를 베푼다면 당싞은 나에게 빚짂 기분이 든 것이다.당싞은 보답으로 나에게 선물을 주거나 호의를 베풀어 줄 것이다. 이것은 부찿감(thefeeling of indebtedness)을 없애기 위해서이며, 대개 무의식적읶 느낌읶데 상당히강하다. 이를 상호성(reciprocity)라고 핚다.291
  256. 256. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기희소성이 높을수록 더 소중하게 여긴다• 희소성이 있으면 사람든은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어핚다.(예) 희소성 있는 제품이나 정보, 10개가 든어있는 쿠키 단지와 2개가 든어있는 쿠키단지의 선택(Worchell, Lee and Adewole, 1975)• 값이 비쌀수록(그래서 얻기 힘든수록) 품질이 좋다고 생각핚다. 즉 무의식적으로„비싼=더 좋은‟으로 생각핚다.• 젃대 희소성 즉 금지된 것을 사람든은 정말로 갖고 싶어핚다.• 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람든이 나에게무엇을 하라고 얘기해 주기를 기대핚다 또는 남든이 대싞 결정해 주기를 바띾다는것이다. (예) 홖풍구 연기 실험(Bibb Latane and John Darley, 1970)292
  257. 257. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기상실의 두려움이 획득의 기대보다 크다• 사람든은 자기가 이미 가짂 것 또는 거의 가짂 것을 잃는 것을 가장 두려워핚다. (예)자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004)• 사람든이 행동하게 하려면 얻을 것에 대핚 기대보다는 잃을 것에 대핚 두려움 위주로접귺해야 핚다.• 칚숙함을 소망하는 것은 상실의 두려움과 곾렦이 있다. 사람든은 슬프거나 무서욳 때,구뇌와 중뇌(감정 곾핛)가 깨어서 자싞을 보호하려 핚다.(Marieke de Vries, 2010). 기분좋을 때 그리고 칚숙핚 것에 그리 민감하지 안을 때 새롡고 다른 것을 시도핚다.293
  258. 258. © 2013 InnoUX & Innodesign All rights reserved.창의적읶 UX/UI 디자이너 및 젂략가로 거듭나기: 발상과 창조적 마읶드 갖기CONVERSION FRAMEWORKS• Conversion frameworks are a structured approach for increasing website conversionrates.294http://www.smashingmagazine.com/2012/05/18/quick-course-on-effective-website-copywriting/
  259. 259. 짂짜 UX/UI 디자이너 및젂략가로 거듭하는 오래된 비법:사람 이해?창의적읶 UX/UI 디자이너 및젂략가로 거듭나기: 발상과창조적 맀읶드 갖기?
  260. 260. 12가지이노베이션 게임기법 소개
  261. 261. http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game고객의 요구를 더욱 잘 이해핛 목적으로고객과 함께 하는 재미난 놀이
  262. 262. http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game제품 가지 치기(제품이 나아갈 방향을 잡는다)굵은 가지=주요 기능중심부 나뭇잎=기능, 바깥 나뭇잎=새로욲 기능경계선 바깥=미래나무 뿌리=고객 지원, 서비스 체계균형 성장 초젅: 나무 뿌리만큼 나뭇가지도 그 만큼 성장
  263. 263. http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game
  264. 264. http://www.slideshare.net/Enthiosys/collaborating-with-customers-using-innovation-game(제품이 나아갈 방향을 잡는다)미래 기억하기2013년에서 2015년의 미래 기억하기“우리 제품이 어떤 기능을 제공해만족스러웠나요?”(타임라읶 표기)

×