Designing Web Apps

4,200 views

Published on

Web Application Conference Korea

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,200
On SlideShare
0
From Embeds
0
Number of Embeds
908
Actions
Shares
0
Downloads
116
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Designing Web Apps

  1. 1. 웹애플리케이션 디자인 방법론 마이크로소프트 황리건 uxfactory.com
  2. 2. 사진촬영 OK me2sms OK
  3. 3. 이번 세션에서 다룰 내용
  4. 4. 웹 애플리케이션 • 웹 브라우저 등을 통해서 접근 가능 • 웹에 연결 되어 있음 • 작업 지향적(Task-oriented) 소프트웨어
  5. 5. 웹 애플리케이션의 패러다임 Web Site: User navigates to information Web App: Functionality comes to the user This is about wayfinding… This is about working in one place…
  6. 6. 디자인 원칙
  7. 7. 1. 단순함 JONE MAEDA
  8. 8. 2. 정보 EDWARD TUFTE
  9. 9. 3. 사용자 중심
  10. 10. 4. 문제 해결 BILL BUXTON
  11. 11. 5. 싞뢰성 BJ FOGG
  12. 12. 디자인 방법론
  13. 13. 웹 애플리케이션 디자인 방법롞 Web Site Web Application – User Research – User Research – Personas – Activity Scenarios – Card Sorting – Task Analysis – Content Structure – Workflow Diagram – Wireframes – Storyboards – Usability Test – Usability Test – Refine – Refine – Site Map – Screenflow diagrams – Treat – Treat – ... – ...
  14. 14. 워크플로우 The Hiser Group
  15. 15. Work Flow Diagram Interpolate Set Parameters Retouch Images Select Nodes Convert & Arrange Convert & Record Scan in Plan Special Build Manipulate Elements on Composite Manipulate Composite Film Rolls Effect Flowgraph Tape Lightbox Tape to Film Preview Preparation Planning Implementation Completion
  16. 16. Interaction Model Node Palette Palette Palette Palette Interpolation Palette Node Parameters File Conversion/ Flowgraph Manager Lightbox Paint Transfer Manager Console Navigation Job Preview Composite Notes Scrapbook Minature The Hiser Group Early draft
  17. 17. Screen Flow Diagram Edit Default Edit  Property Location Save PRO020 2.1.2   Offender File Offender File window – Select Property Item window – View Offender Property Item Property  Edit from PRO010 PRO030 A11 PRO030 Open item for Editing Print Property Add New Item… Update  Add/Edit from PRO010 Transaction Property Item  PRO110 A10 PRO040 If launched from PRO100  Offender File window – In Store  Edit Property Property Update Location History PRO100  PRO060
  18. 18. Paper Prototyping
  19. 19. 디자인 가이드
  20. 20. 디자인 솔루션
  21. 21. 프롞트엔드 기술 Thin Client RIA Rich Client AJAX AIR Java FX Silverlight XBAP Web Desktop Open Rich User Experience Wide Reach Local Processing No Footprint UI Toolkits Deployment Offline Availability
  22. 22. 고상한 것이 현재의 기술이면 대중적인 것은 미래의 기술이다.
  23. 23. 프롞트엔드 기술 고려 사항 1. User Experience 2. Deployment & Reach 3. Processing 4. Interface Components & Customization 5. Back-end Integration 6. Unique Features 7. Future Proofing 8. Staffing & Cost
  24. 24. 한글 글꼴 사용 방식 • HTML/CSS • 브라우저 글꼴 설정 • 운영체제 기본 글꼴 • 임베디드 글꼴 • IME • 웹폰트(EOT)
  25. 25. 협업으로 가는 길 Expression Night 지난 10월 4일에 있었던 이야기
  26. 26. 어부바 모델 piggyback
  27. 27. 어부바 중 ;;
  28. 28. “코딩은 왜 하는 것입니까?”
  29. 29. 개발자에게는 코딩이 밥이다.
  30. 30. 협업으로 가는 길 1. 중계자 모델 2. 협업 도구 3. 공통의 언어 4. 작업 규칙 문서
  31. 31. 디자이너 vs 개발자
  32. 32. 누군가는 해야 하는 작업 ? layout, animation, events, markup, integration
  33. 33. 중계자 모델 Integrator layout, animation, events, integration
  34. 34. 팀 작업을 돕는 도구
  35. 35. 도구 갂의 작업 연계 PhotoShop Illustrator Expression Expression Expression Visio... Design Web Web Expression AfterEffects Media FinalCut Pro Expression Expression Expression Audigy... Encoder Blend Blend Zam3D DeepZoom ... Composer
  36. 36. 공통의 언어 필요 XAML XAML XAML
  37. 37. <XAML>
  38. 38. Common Controls
  39. 39. Wireframe
  40. 40. 경험을 통해 배운 점 • 작업 규칙의 중요성 – 미리 약속한 이름 사용 – 이름 정하기 규칙 • 디자이너-개발자 갂의 프로젝트 공유 • 디자인-개발 툴 워크플로우 • 와이어프레임의 활용
  41. 41. 좋은 개발 파트너의 6가지 조건 1. 프로젝트 문서 작성 능력. 요구사항 문서는 필수. 2. 요구사항 문서가 실제 요구를 정확하게 반영. 3. 좋은 방법롞과 분명한 프로젝트 계획. 4. 깔끔하고 뛰어난 커뮤니케이션 채널. 5. 프로젝트 범위를 잘 정의하고 공유함. 6. 비즈니스 모델에 대한 이해도.
  42. 42. 5C 프로세스 모델 Concept Content Composition Construction Contract Naming conventions Sketch Events Media Layout Wireframe States Graphics Slice User Comp Data sources controls Copy HTML • Pen • TFS • Expression • Expression • Expression • Visio • Word Blend Media Design • Expression • Expression • Expression Web Design Encoder • Omnigraffle • Expression design • Axure • Photoshop • ...
  43. 43. Contract 작업 규칙 문서(Contract) Naming conventions • 디자이너와의 협업을 Events 위한 오브젝트 네이밍, States 파일 형식, 이미지 사이 Data sources 즈, 애니메이션 구조 정 의 문서 • 백엔드와의 통싞에 대 한 통싞 방식, 오브젝트, 이벤트, 프로토콜 정의 문서
  44. 44. 테스트 방법론
  45. 45. 사용성 테스트
  46. 46. Eye-tracking 테스트 1. 일반적인 생각과 다르게 그래픽 보다는 텍스트가 더 주목을 끈다. 3. 사용자는 웹페이지의 맨 윗 쪽부터 F 자 형태로 웹페이지를 탐색한다. 5. 예쁜 장식이나 폰트는 대개 무시된다. 7. 글씨 크기는 보는 방식에 영향을 미친다.(작은 폰트는 집중, 큰 폰트는 탐색) 8. 흥미로운 요소(관심있는 키워드)가 있을 때만 부제를 본다. 14. 텍스트 광고를 가장 주의깊게 본다. 15. 이미지가 크면 클수록 더 큰 주목을 받는다. 22. 여백은 내용을 젂달하는데 좋은 영향을 준다.
  47. 47. 오늘의 내용 정리 • 웹 애플리케이션 디자인 원칙 – 단순함, 정보, 사용자 중심, 문제 해결, 싞뢰성 • 디자인 방법롞 – 워크플로우, 인터랙션 모델, 페이퍼 프로토타이핑, 디자인 가이드 • 디자인 솔루션 – Thin Client, RIA, Rich Client • 협업으로 가는 길 – 중계자, 도구, 비주얼 언어, 작업 규칙 문서(5C모델) • 평가 및 테스트 – 사용성 테스트, 아이트래킹
  48. 48.
  49. 49. UI 개발자는 인터랙션 디자이너다.
  50. 50. 2008년 유망 직종 Usability/ User Experience Specialist
  51. 51. 디자인을 똑똑하게 하면 개발도 효과적으로 할 수 있다
  52. 52. 감사합니다
  53. 53. 참고 자료 • http://www.slideshare.net/garrettdimon/improving-interface-design • http://www.slideshare.net/shanemo/web311-designing-compelling-silverlight-user-experiences-with-expression- studio-presentation • 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-and-silverlight • 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= vsbAzLXwvu4gvcOwosit • http://www.uigarden.net/english/the-human-interface • http://uxlog.net/46 • http://interaction.tistory.com/150

×