Your SlideShare is downloading. ×
0
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
감성적 GUI 디자인 방법
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

감성적 GUI 디자인 방법

3,423

Published on

감성적 GUI 디자인 방법 …

감성적 GUI 디자인 방법

Designing for Second
Change Behaviors
Creating for VRIN
Definition for 2013
Design Methods

Published in: Design, Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,423
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 감성적GUI 디자인 방법:(KADI UX Conference 2013)감성을 자극시키는 그래픽디자인 방법과흥미를 유발시키는 인터랙션 효과 구현 기법은 무엇이며,어디에서 그 원류를 찾을 수 있는지를 소개한다.2013.5.30InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
  • 2. © 2013 InnoUX & Innodesign All rights reserved.감성적 GUI 디자인 방법Table of Contents• 5개의 화두• 감성적 GUI 디자인 방법• 토롞1
  • 3. 5개의 화두
  • 4. 35초와 60초에마음을 훔치지못하는 디자인은감성적 GUI 디자인이아니다!by 최병호(@ILOVEHCI)화두 I.Second
  • 5. 행동을 변화시키지못하는 디자인은감성적 GUI 디자인이아니다!by 최병호(@ILOVEHCI)화두 II.Behavior
  • 6. VRIN 없는 디자인은감성적 GUI 디자인이아니다!by 최병호(@ILOVEHCI)* VRIN=valuable,Rare, inimitable,nonsubstitutable화두 III.VRIN
  • 7. 2013년에 필요핚감성적 GUI 디자인이란GUI을 활용하여소비자를 한 순간에제품에 몰입시키고,감정을 움직이도록흡인력 강하게끌어당기는 디자인by 최병호(@ILOVEHCI)화두 IV.Definition
  • 8. 2013년에 필요핚감성적 GUI 디자인을구현핛 수 있는방법은시선 압류, 시선 고정,디자인 제약by 최병호(@ILOVEHCI)화두 V.Methods
  • 9. 사례 연구를 통해본 감성적 GUI디자인 방법과사람의 이해
  • 10. 1. 시선 압류1: 스크릮 전체를 지배핚 1개의상품, 1개의 이미지2. 시선 고정1: 이미지 도발로 충격, 사람 얼굴로무의식적 주의 유도, 자동으로 이미지 로테이션3. 디자인 제약1: 상품 또는 이미지개수/크기/종류, 로테이션개수/속도, 칼라, 그리드감성적 GUI 디자인 방법
  • 11. 1. 도파민 시스템 응용(Dopamine system)• 적은 양의 정보를 주고 더 많은 정보를 얻을수 있는 방법을 제공하면 사람들이 더욱찾게 하는 결과를 불러올 수 있다.• 사람들은 찾은 결과를 보상으로 받게 되고,이것은 다른 찾는 행위를 불러온다.사람의 이해
  • 12. 2. FFA(방추형 얼굴 인식 영역, Fusiform Face Area)• 사람들은 사람의 얼굴을 그 어떤 사물보다 빠르게인식핚다.• 사용자를 직접 응시하는 사짂은 상당히 감성적인효과가 있는데, 이는 얼굴에서 눈이 가장 중요한부위이기 때문이다.• 얼굴이 잘 나온 이미지를 사용해야 핚다.사람의 이해
  • 13. 3. 무의식적 선택 주의(Unconscious selective attention)• 사람의 무의식은 특정핚 것을 감지하며 끊임없이주변 홖경을 읽는다. 여기에는 자싞의 이름이나 음식,섹스, 위험 등의 중요핚 메시지를 포함핚 전체홖경이 포함된다.• ‘가장 주의를 끄는 것’은 스스로 원하듞 원하지 않듞이 모듞 것들에 대해서는 자동적으로 인지하게 된다.대표적으로 움직이는 모든 것, 우리를 쳐다보고 있는사람 얼굴 그림, 음식/섹스/위험에 대한 그림,이야기, 큰 소음 등이다.사람의 이해
  • 14. 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)
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 4. 시선 압류2: 동영상 자동 실행으로무의식적 주의 유도5. 시선 고정2: 의인화 및 스토리텔링으로흥미 유발6. 디자인 제약2: 사욲드 크기디폴트=0, 스토리 개수, 시연시갂, 동영상 플레이 영역의 크기감성적 GUI 디자인 방법
  • 19. http://www.smythson.com/ (2013.4.26)
  • 20. 7. 시선 압류3: 예상치 못핚 독특핚 레이아웃8. 시선 고정3: 싞선핚 내비게이션 방식,일상의 색다른 접목(wiping, planting,alternating), 인터랙션의 주도(통제감)9. 디자인 제약3: 싞선/이색의 범주, 모션,오브젝트의 개수감성적 GUI 디자인 방법
  • 21. http://fff.cmiscm.com/ (2013.4.27)
  • 22. 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/
  • 23. http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
  • 24. http://fff.cmiscm.com/#!/section/wipertypo (2013.4.27)
  • 25. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  • 26. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  • 27. http://fff.cmiscm.com/#!/section/planttrees (2013.4.27)
  • 28. 10.시선 압류4: 행동을 유도하는 타임라인11.시선 고정4: 현재가 중요하다는 메시지충격, 순갂을 기록하는 참여 유발, 시갂단위로 사람들의 라이프 로그 감상(Timenavigating)12.디자인 제약4: 배경 이미지, 타임라인감성적 GUI 디자인 방법
  • 29. 4. 인지부조화(Cognitive dissonance)• 기존에 사용자가 학습하거나 인지하고 있던특정 개념에 대해 상반되는 어떤 현상이나타났을 때 발생하는 불편핚 감정이다.(레온페스팅거 Leon Festinger, 1956)• 싞념을 바꾸게 하는 가장 좋은 방법은대상으로 하여금 아주 작은 일부터참여시키는 것이다.사람의 이해
  • 30. 5. 습관 형성(The Habit loop)• 새로운 습관을 들이게 하려면 자그마한 일로동기를 부여하라.• 사람들에게 매일(혹은 거의 매일) 돌아와과업을 수행할 이유를 제공핚다.• 인내심을 길러라. 새로욲 습관을들이기까지는 오랜 시갂이 걸릮다.사람의 이해
  • 31. 2http://www.rei1440project.com/ (013.4.27)
  • 32. 13.시선 압류5: 클릭을 유도하는 번호14.시선 고정5: 호기심으로 각 번호에숨겨짂 메시지 확인, 자동으로 흘러가는이벤트, 마우스 방향에 따라 움직이는효과(통제감)15.디자인 제약5: 번호 개수, 칼라 개수,레이아웃, 춤추는 곰감성적 GUI 디자인 방법
  • 33. http://xctravels.com/ (2013.4.28)
  • 34. http://itsashapechristmas.co.uk/ (2013.4.28)
  • 35. 16.시선 압류6: 사선 방식의 레이아웃, 스크릮전체를 채욲 카툰(또는 영상 같은 이미지)과매혹적인 선율17.시선 고정6: 카툰/게임 스토리, 애니메이션과인터랙션 게임, 자동으로 흘러가는 scene18.디자인 제약6: 사선 방식의(또는 full scene의)레이아웃과 콘텐츠 제약감성적 GUI 디자인 방법
  • 36. 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
  • 37. http://www.brandongenerator.com/episode-one (2013.4.28)
  • 38. http://www.brandongenerator.com/episode-one/mystery-prose (2013.4.28)
  • 39. 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
  • 40. 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
  • 41. 19.시선 압류7: 여행(탐험)을 유도하는 지도와 사짂20.시선 고정7: 지명을 누를 때마다 선택핚지역까지 이동하는 영상 보는 재미, 영상을배경화면에서 처리21.디자인 제약7: 지명 개수, 지도, 배경화면으로처리핚 스틸컷 개수감성적 GUI 디자인 방법
  • 42. 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
  • 43. 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
  • 44. 22.시선 압류8: 스크릮을 가득 채우면서 내려오는건반23.시선 고정8: 건반을 누르는 소리와 그때마다달라지는 건반의 비율24.디자인 제약8: 건반 개수, 칼라(B&W, Red)감성적 GUI 디자인 방법
  • 45. 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
  • 46. 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
  • 47. 25.시선 압류9: 재미있게 찍은 사짂들26.시선 고정9: 웹캠으로 비춰짂 내 모습을변형하면서 느끼는 즐거움과 공유 후반응 기대, 타인의 모습 탐험27.디자인 제약9: 사짂 개수, 사짂 로테이션감성적 GUI 디자인 방법
  • 48. 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
  • 49. 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
  • 50. 28.시선 압류10: 마력적인 주제와 Play 버튺29.시선 고정10: 나레이션이 흘러나오며 자동으로페이지가 하단으로 내려가면서 다양핚 포맷의페이지(스토리텔링)를 보는 놀라움30.디자인 제약10: 핚 페이지 내의 scene 구성과자동으로 scene 갂 이동하는 시갂감성적 GUI 디자인 방법
  • 51. 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
  • 52. 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
  • 53. 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 readout, while vivid illustrations and animations with parallax perspectives are revealed.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  • 54. 31.시선 압류11: 해부학적 접근의 일러스트레이션32.시선 고정11: 일러스트레이션 감상33.디자인 제약11: 일러스트레이션 이미지 크기와용량감성적 GUI 디자인 방법
  • 55. http://www.mazakii.com/2011/ (2013.4.28)
  • 56. http://www.mazakii.com/2011/archives/910 (2013.4.28)
  • 57. 34.시선 압류12: 놀라욲 실험 주제와 영상35.시선 고정12: 다양핚 실험 주제를 스크롤 바의움직임에 따라 즉각적인 영상으로 보여주는방식, 실시갂 데이터의 변화36.디자인 제약12: 실시갂 영상, 데이터비주얼라이제이션감성적 GUI 디자인 방법
  • 58. 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
  • 59. http://www.chromeweblab.com/en-GB/universal-orchestra (2013.4.28)
  • 60. http://www.chromeweblab.com/en-GB/teleporter (2013.4.28)
  • 61. http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)
  • 62. http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)
  • 63. 37.시선 압류13: 눈을 뗄 수 없는 다양핚퀄리티 높은 상품 이미지38.시선 고정13: 상품 탐험, 피드백 정보확인(faved, pinned, bought)39.디자인 제약13: 각 그리드 내 상품개수와 크기, 이미지 퀄리티와 파일 용량감성적 GUI 디자인 방법
  • 64. http://fab.com/ (2013.4.28)
  • 65. http://fab.com/ (2013.4.28)
  • 66. http://fab.com/ (2013.4.28)
  • 67. 토롞
  • 68. The FiveAgenda1. Designing forSecond2. Change Behaviors3. Creating for VRIN4. Definition for 20135. Design Methods
  • 69. 경청해주셔서고맙습니다!

×