웹애플리케이션디자인 방법론

마이크로소프트 황리건

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://cfs14.tistory.com/original/2/tistory/2008/10/17/14/56/48f829282d882

디자인을 똑똑하게 하면개발도 효과적으로 할 수 있다

감사합니다

참고 자료• 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