웹애플리케이션 디자인방법론 - webappscon.com · 웹애플리케이션...
Post on 08-Aug-2020
1 Views
Preview:
TRANSCRIPT
웹애플리케이션디자인 방법론
마이크로소프트 황리건
uxfactory.com
사진촬영 OKme2sms OK
이번 세션에서다룰 내용
웹 애플리케이션
• 웹 브라우저 등을 통해서 접근 가능
• 웹에 연결 되어 있음
• 작업 지향적(Task-oriented) 소프트웨어
웹 애플리케이션의 패러다임
Web Site: User navigates to information
This is about wayfinding…
Web App: Functionality comes to the user
This is about working in one place…
디자인 원칙
1. 단순함
JONE MAEDA
2. 정보
EDWARD TUFTE
3. 사용자 중심
4. 문제 해결
BILL BUXTON
5. 싞뢰성
BJ FOGG
디자인 방법론
웹 애플리케이션 디자인 방법롞
Web Site
– User Research
– Personas
– Card Sorting
– Content Structure
– Wireframes
– Usability Test
– Refine
– Site Map
– Treat
– ...
Web Application
– User Research
– Activity Scenarios
– Task Analysis
– Workflow Diagram
– Storyboards
– Usability Test
– Refine
– Screenflow diagrams
– Treat
– ...
워크플로우
The Hiser Group
Work Flow Diagram
Plan Special
Effect
Record
Composite
to Film
Preview
Retouch
Images
Interpolate
Set
Parameters
Select
Nodes
Scan in
Film Rolls
Convert &
Manipulate
Tape
Build
Flowgraph Composite
Convert &
Manipulate
Tape
Arrange
Elements on
Lightbox
Preparation Planning Implementation Completion
Interaction Model
No
de
Pa
lette
Node
Parameters
Preview
Console
FileManager Lightbox Flowgraph Paint
Conversion/TransferManager
Composite ScrapbookNotesJobNavigationMinature
Interpolation
Pa
lette
Pa
lette
Pale
tteP
ale
tte
Early draftThe Hiser Group
Screen Flow Diagram
Select Property Item
In Store
Save
Open item for EditingAdd New Item…
A10
2.1.2
A11
Edit
Add/Edit from PRO010
Edit from PRO030
Print Property Transaction
PRO110
If launched from PRO100
Edit Property Location
PRO060
Update Property Item
PRO040
PRO030
Offender File window – View Property Item
Edit Default Property Location
PRO020
PRO010
Offender File window –Offender Property
PRO100
Offender File window –Property Update History
Paper Prototyping
디자인 가이드
디자인 솔루션
프롞트엔드 기술
Silverlight Java FX
XBAP
AJAX
Thin Client RIA Rich Client
AIR
WebOpenWide ReachNo FootprintDeployment
DesktopRich User Experience
Local ProcessingUI Toolkits
Offline Availability
고상한 것이 현재의 기술이면대중적인 것은 미래의 기술이다.
프롞트엔드 기술 고려 사항
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
한글 글꼴 사용 방식
• HTML/CSS• 브라우저 글꼴 설정• 운영체제 기본 글꼴• 임베디드 글꼴• IME• 웹폰트(EOT)
Expression Night지난 10월 4일에 있었던 이야기
협업으로 가는 길
어부바 모델piggyback
어부바 중
;;
“코딩은 왜 하는 것입니까?”
개발자에게는 코딩이 밥이다.
협업으로 가는 길
1. 중계자 모델
2. 협업 도구
3. 공통의 언어
4. 작업 규칙 문서
디자이너 vs 개발자
누군가는 해야 하는 작업
?layout,
animation,events, markup,
integration
중계자 모델
Integratorlayout,
animation,events,
integration
팀 작업을 돕는 도구
도구 갂의 작업 연계
PhotoShop
Illustrator
Visio...
AfterEffects
FinalCut Pro
Audigy...
DeepZoom
Composer
Expression
Media
Expression
Blend
Expression
Web
Zam3D
...
Expression
Design
Expression
Encoder
Expression
Blend
Expression
Web
XAML XAML
XAML
공통의 언어 필요
<XAML>
Common Controls
Wireframe
경험을 통해 배운 점
• 작업 규칙의 중요성
– 미리 약속한 이름 사용
– 이름 정하기 규칙
• 디자이너-개발자 갂의 프로젝트 공유
• 디자인-개발 툴 워크플로우
• 와이어프레임의 활용
좋은 개발 파트너의 6가지 조건
1. 프로젝트 문서 작성 능력. 요구사항 문서는 필수.2. 요구사항 문서가 실제 요구를 정확하게 반영.3. 좋은 방법롞과 분명한 프로젝트 계획.4. 깔끔하고 뛰어난 커뮤니케이션 채널.5. 프로젝트 범위를 잘 정의하고 공유함.6. 비즈니스 모델에 대한 이해도.
5C 프로세스 모델
• Pen
• Visio
• Expression
Design
• Omnigraffle
• Axure
• ...
• TFS
• Word
• Expression
Blend
• Expression
Media
• Expression
Encoder
• Expression
design
• Photoshop
• Illustrator
• Expression
Design
• Expression Web
Conce
pt
Sketch
Wireframe
Comp
Contract
Naming
conventions
Events
States
Data sourcesConst
ruct
ion
Layout
User
controls
Conte
nt
Media
Graphics
Copy
Com
position
Slice
HTML
작업 규칙 문서(Contract)
• 디자이너와의 협업을위한 오브젝트 네이밍, 파일 형식, 이미지 사이즈, 애니메이션 구조 정의 문서
• 백엔드와의 통싞에 대한 통싞 방식, 오브젝트, 이벤트, 프로토콜 정의문서
Contract
Naming
conventions
Events
States
Data sources
테스트 방법론
사용성 테스트
Eye-tracking 테스트
1. 일반적인 생각과 다르게 그래픽 보다는 텍스트가 더 주목을 끈다.
3. 사용자는 웹페이지의 맨 윗 쪽부터 F 자 형태로 웹페이지를 탐색한다.
5. 예쁜 장식이나 폰트는 대개 무시된다.
7. 글씨 크기는 보는 방식에 영향을 미친다.(작은 폰트는 집중, 큰 폰트는 탐색)
8. 흥미로운 요소(관심있는 키워드)가 있을 때만 부제를 본다.
14. 텍스트 광고를 가장 주의깊게 본다.
15. 이미지가 크면 클수록 더 큰 주목을 받는다.
22. 여백은 내용을 젂달하는데 좋은 영향을 준다.
오늘의 내용 정리
• 웹 애플리케이션 디자인 원칙
– 단순함, 정보, 사용자 중심, 문제 해결, 싞뢰성
• 디자인 방법롞– 워크플로우, 인터랙션 모델, 페이퍼 프로토타이핑, 디자인 가이드
• 디자인 솔루션– Thin Client, RIA, Rich Client
• 협업으로 가는 길– 중계자, 도구, 비주얼 언어, 작업 규칙 문서(5C모델)
• 평가 및 테스트– 사용성 테스트, 아이트래킹
ㅍ
UI 개발자는인터랙션 디자이너다.
2008년 유망 직종
Usability/ User ExperienceSpecialist
디자인을 똑똑하게 하면개발도 효과적으로 할 수 있다
감사합니다
참고 자료• 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.htmlhttp://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
top related