Page 0: Page 1: 인터랙티브 디자인 기술 트렌드 마이크로소프트 황리건 uxfactory.com Page 2: 웹 UX 기술 웹 UX 기 술 의 이 해 RIA RIA 기 술 트 렌 드 로 보는 신기술 인터 렉티 브디 자인 환경 변화 인터랙티브 디자인 환경 변화 Youtube 로 보는 신기술 트렌드 뉴미 디어 기술 트렌 드 뉴미디어 Slides before 1st Section Divider 시작 피 지 컬 컴 퓨 피지컬팅 컴퓨팅 UX 프로토타이핑 UX 프 로토 타이 핑 정리... 블렌 드를 이용 한프 로토 타이 핑 정리 블렌드를 이용한 프로토타이핑 Page 3: Live Book • http://www.youtube.com/watch?v=wLQfRczMU0A Page 4: 우리에게 필요한 것...? 참여 소통 아이디어 Page 5: 요즘 유행하는 말로 바꾸면, 클라우드 소셜 매시업 Page 6: 인터랙티브 “디자인 올림픽” 3D그 래픽 사용자 경험 웹 디바이 스 미디어 Page 7: 새로운 운영체제의 등장 Page 8: 브라우저 전쟁 Page 9: 유비쿼터스 환경 유비쿼터스 시대 Page 10: 많고 많은 기술 중에... Java FX AJAX Silverlight Processing AIR WPF XNA Page 11: 속성을 이해해야... Page 12: 웹 기술을 고르는 방법 1. 2. 3. 4. 5. 6. 7. 8. 9. User Experience Deployment & Reach Processing Interface Components & Customization Back-end Integration Unique Features Future Proofing Staffing & Cost 한글 지원 정도 Page 13: AJAX Page 14: ActiveX Page 15: Flash(6+) Page 16: 미디어 : WM에서 SL로 Page 17: Media Demo Microsoft Korea 20th Joins TV Page 18: RIA : UX, Desktop, XML Java FX Page 19: RIA Demo Piczza Gemocon Monster TV Page 20: 뉴미디어 : 터치, 소셜, 센서 Page 21: HP Touch PC http://flvs.daum.net/flvPlayer.swf?vid=bFf2ZBtWFDg$ Page 22: Page 23: Page 24: Page 25: Page 26: 멀티터치 http://www.ted.com/index.php/talks/jeff_han_demos_his_breakthrough_touchscreen.html Page 27: 디지털 미디어 http://www.youtube.com/watch?v=mtLX52z4kPU Page 28: 윈도 7 • http://kr.youtube.com/watch?v=GqDQ0wUcSPQ Page 29: 서피스 • http://www.microsoft.com/surface/index.html Page 30: 3D 데스크톱 http://www.youtube.com/watch?v=M0ODskdEPnQ Page 31: 비디오 3D 모델링 http://kr.youtube.com/watch?v=vda2RAEuW_g Page 32: 모션 센서 http://www.ted.com/index.php/talks/johnny_lee_demos_wii_remote_hacks.html Page 33: Troika - 'Cloud' • http://www.youtube.com/watch?v=42hgPLL8IrA Page 34: 아르두이노(Arduino) Page 35: Little Bits Page 36: MS Robotics http://kr.youtube.com/watch?v=VAjZbusXd1o Page 37: Mixist http://www.youtube.com/watch?v=g9j4stXcaUM Page 38: Paper Prototyping • http://video.naver.com/2008101715065592024 Page 39: 한메일 페이퍼 프로토타이핑 • http://kr.youtube.com/watch?v=GrV2SZuRPv0 Page 40: UI Toolkit for PowerPoint Drop down menu / Combo box Update Story Option Check boxes Another option Button List Box Scroll bar File thumbnail Subject: Label and Text box Share this with everyone Share with my friends Radio buttons Placeholder icon Magnifier Icon with fly out menu Form separator Arrow cursor “…and now the user clicks here” Drag / Hand cursor Page 41: Use PowerPoint effects Reflection Gradient Drop Shadow G You should use them instead of importing images made in Photoshop with baked effects . Glow (calling attention) The point is that these effects will dynamically update and r esize as you modify the shape (button, icon, window). Page 42: Creating an interactive flow • • • • • (optional) Place an arrow cursor where the user would click to go to the next screen: Duplicate the screen (right click on slide > Duplicate) Make your UI changes (Header, Page Content) By default, the Browser and Browser+Header templates do not navigate on click. You need to add your own links to build your interaction: Go back to previous screen and make your text/image/button clickable (right click > Hyperlink > Place in this Document > pick the target screen for the link. Page 43: EXAMPLE: INTERACTIVE FLOW (WIZARD) Page 44: Microphone Setup Wizard Select the type of microphone you would like to use Headset Microphone Best suited for speech recognition, you wear this on your head. Desktop Microphone These microphones sit on the desk. Other Such as array microphones and microphones built into other devices. Next Cancel Page 45: Microphone Setup Wizard Set up your microphone Proper microphone placement . Position the microphone about an inch from your mouth, off to one side . Do not breathe directly into the microphone . Make sure the mute button is not set to mute Next Cancel Page 46: EXAMPLE: INTERACTIVE FLOW (EMAIL AUTHORING UI) Page 47: Send To: Subject: Add Pictures Add Cc, Bcc G Page 48: Send To: Subject: Add Pictures Insert Pictures Add Cc, Bcc Look In: G G File Name File Type: Page 49: EXAMPLE UI SCREENS Page 50: Internet Explorer Frame + Example Web Page Content Windows Live – Windows Internet Explorer http://web.address.here Title Label Label Header Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id ligula id sapie n consequat vulputate. Nulla facilisi. Etiam lectus enim, pretium egestas, vestibul um et, nonummy et, diam. In nisl. Sed tempus, urna id ullamcorper faucibus, nisl lacus pulvinar urna, nec tempus mauris ligula vehicula dui. Nullam eros. Mauris a rcu erat, porta vel, iaculis a, dignissim eu, metus. Donec urna. Phasellus non nisi i d purus ullamcorper imperdiet. Proin fermentum lacus. Nullam pharetra. Aliqua m cursus nunc eu libero. Class aptent taciti sociosqu ad litora torquent per conub ia nostra, per inceptos hymenaeos. Cras nibh purus, laoreet nec, volutpat sempe r, tincidunt at, sapien. Suspendisse lacinia. Nulla in felis quis nisi faucibus sollicitudin. Sed ut pede id ligu la aliquam vestibulum. Quisque rutrum orci a arcu. Nunc nibh pede, auctor vitae, varius ultricies, semper quis, odio. Aliquam sed justo. Nullam luctus quam vitae magna. Suspendisse nisl. In hac habitasse platea dictumst. Nullam imperdiet, libe ro vitae lobortis fermentum, elit mi ultrices elit, id fringilla augue lacus ut elit. Ph asellus feugiat nisl sit amet neque. Quisque imperdiet, turpis id pretium bibendu m, nisl nisl nonummy est, vitae sodales ligula sapien quis metus. Ut eu neque. Header Item title Des cription Deta ils Item title Des cription Deta ils Item title Des cription Deta ils Item title Des cription Details G Page 51: Windows Vista Desktop XDR Hero Documents Pictures Music Games Search Recent Items Computer Network Connect To Control Panel Default Programs All Programs Help and Support Start Search 1:15 PM Page 52: Save As (Default) Save As XDR Hero Pictures File Name: Save as type: JPEG (*.jpg;*.jpeg;*.jfif) Save Cancel Browse Folders Page 53: Save As (Browse Folders) Save As XDR Hero Pictures Name Date Taken Tags Size >> File Name: Save as type: JPEG (*.jpg;*.jpeg;*.jfif) Save Cancel Hide Folders Page 54: Pictures Folder XDR Pictures Name Date Taken Tags Size >> File Name: Save as type: 12 items Page 55: AERO Wizard Join a Domain or Workgroup Is your company network on a domain? My company uses a network with a domain My company uses a network without a domain Next Cancel Page 56: Vista Control Panel Control Panel Page 57: GUIMags Page 58: Balsamiq.com Page 59: Dabbleboard.com Page 60: Expression Blend 를 이용한 UI 프로토타이핑 • • • • • • 빠르고 정확한 프로토타이핑 풍부한 UI 컨트롤 제공 사용자 정의 컨트롤 실제 디자인/개발에 사용 인터랙티브 플로우 제작 사용자 테스트 용의 Page 61: Page 62: Blend 설치 • http://www.microsoft.com/downloads/details.aspx?FamilyId=5FF08106B9F4-43CD-ABAD-4CC9D9C208D7&displaylang=en Page 63: 작업 화면 Page 64: 비트맵이펙트 적용 Page 65: 반투명 마스크 Page 66: 레이아웃 기능 Page 67: Page 68: UI 라이브러리(for WPF) Page 69: Expander Page 70: InkCanvas Page 71: Simple UI Page 72: 들으면 잊고, 보면 기억하고, 하면 이해한다. 노자. Page 73: Page 74: 감사합니다 Page 75: 참고 자료 • • • • • • • • • • • • • • • • • • • • http://www.slideshare.net/garrettdimon/improving-interface-design http://www.slideshare.net/shanemo/web311-designing-compelling-silverlight-user-experiences-with-expression-studiopresentation http://www.slideshare.net/shanemo/from-website-to-webapp-shane-morris-presentation http://www.slideshare.net/guest83d3e0/how-to-express-your-creative-self-with-windows-presentation-foundation-andsilverlight http://www.slideshare.net/billwscott/designing-for-ajax/ http://www.lukew.com/resources/articles/ajax_design.asp http://www.uie.com/articles/malouf_scott_interview/ http://looksgoodworkswell.blogspot.com/2006/01/nine-tips-for-designing-rich-internet.html http://www.lukew.com/resources/webapplicationsolutions.pdf http://www.sapdesignguild.org/resources/TSDesignGL/INDEX.HTM http://www.lukew.com/resources/articles/web_forms.html http://www.lukew.com/resources/articles/web_applications.html http://www.adaptivepath.com/ideas/essays/archives/000385.php http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/ http://me2day.net/sumanpark/2008/10/19#15:21:48 http://dobiho.com/?p=113 http://dobiho.com/?p=922 http://kin.naver.com/knowhow/entry.php?d1id=10&dir_id=10&eid=B53b7vcreAmITtnA2HpEcXS79zZ+Hj1p&qb=vsbAzLXwvu4g vcOwosit http://www.uigarden.net/english/the-human-interface http://uxlog.net/46 http://interaction.tistory.com/150 Page 76: