제목페이지 - Duredure.net/ebiz0909.pdf제목: UX & RIA –2009.07.03 Copyright © 2008 Samsung SDS Co., Ltd. All rights reserved | Confidential - 47 - Keyword 설명 Computer,

제목 : UX & RIA – 2009.07.03Copyright © 2008 Samsung SDS Co., Ltd. All rights reserved | Confidential - 1 -

제목페이지


User Experience 정의#1


User Experience 정의#2


“UX는

제품이나 시스템, 어플리케이션을 사용할 때 갖게 되는

총체적인 만족감이다.”

No Satisfaction

User eXperience

Satisfaction


“Satisfaction as it relate to how user . . .

. . . like the Product

심미성

. . . understand the Product

학습용이성

. . . use the Product

사용성

+ +


Product

. . . Like the Product

. . . Understand the Product

. . . Use the Product

Interaction

User

User eXperience



UX구성요소(IA)


UX구성요소(GUI)


UX구성요소(PUI)


UX구성요소(AUI)


관련 용어

User eXperience

‚RIA : Rich Internet Application‛

“GUI : Graphic User Interface”

‚Silverlight, Flex . . .‛

“NUI : Natural User Interface”

“HCI : Human Computer Interaction” “UI : User Interface”

“Interface”“Interaction”


Interface 정의


Interaction 정의


UX

UI

제품이나 시스템, 어플리케이션의 얼굴 (face), 즉 화면 디자인이다.”

“UI는


Why UX?


Why UX?


Why UX?


User NeedsWhy UX?


Why UX?


Why UX?

생활 전반에 모바일 사용

Life Style 전반에 UX 반영

UI / UX 영역의 강화

새로운 컨텐츠를 위한 UXS/W 시장

모바일 시장 생태의 변화

S/W 컨텐츠 위주의 모바일 시장

#1 #2 #3

고사양의 디바이스 유지

플랫폼의 지속적 업그레이드

#4시장의 확대

신흥 벤더의 시장 참여

#5

「 Five Key Trend in Mobile 2009」By Gartner Report


Why UX?


UX 투자 수익률

X Ibm.com 400% 영업 증가

X Staple.com 75% 영업 증가 ($430 million)

X Dell.com 3400% 영업 증가(over 1.5 years)

X Standard life 75% 첫해 목표보다 증가

X United airlines 200% 온라인 티켓 구매 증가

AfterUX

출처 : BusinessWeek Online

UX 적용 효과


UX 투자 수익률

평균 100% 증가

평균 150% 증가

영 업 률

트래픽 / 방문수

평균 202% 증가온라인 구매 등온라인 구매 등

특정 기능의 사용

UX 적용 효과

출처 : BusinessWeek Online


사례 : User eXperience

Copyright ⓒ 2008 Samsung SDS Co., Ltd. All rights reserved |

Confidential


‘아사이야마 동물원’의 날아다니는 펭귄

특별한UX를제공

연 평균 300만명의 일본 대표 동물원

특별할 것 없었던,

연 평균 방문자

25만명의

폐쇄 직전의 동물원

UX동물원

사례 : Business Marketing


사례 : Business Marketing

패밀리 레스토랑 : 기억에 남을 만한 추억을 파는 곳

UX Restaurant

레스토랑=

추억의 공간

음식은 도구, 연출되는 추억을 제공좋은 UI 레스토랑


Google의 ‘UX 10 원칙’

1. Useful2. Fast3. Simple4. Engaging5. Innovative6. Universal7. Profitable8. Beautiful9. Trustworthy10.Personable

'구글 크롬' 공개.. 네티즌들 "속도 빠르고 깔끔"

by 아시아경제

'구글 "'크롬'써보면익스플로러 버리고 싶을 것‚

By ZDNet

사례 : Google의 UX 10원칙


사례 : Online Business

RIA : 다이나믹하고 사용하기 좋은 인터넷서비스 판매

Adobe Flex

Google Ajax

MS Silverlight

http://www.smoothhd.com/


사례 : Desktop

Reality Based Interface : 실생활의 방식으로 컴퓨터와 소통

3D Desktop, “BumpTop”

3D 스케치 프로그램"ILoveSketch"


사례 : Mobile Business

Mobile UX : 컨텐츠를 쉽고 재미있게 소비하는 경험을 판매

직관적 사용성과 미려함

위치기반 Mobile SNS

라이프 스타일 반영

http://www.nseries.com/nseries/nokiavine/


사례 : Game & Entertainment

센서, 증강 현실 등을 이용한 새로운 경험을 제공

게임 케릭터와의 일체감으로 몰입감 극대화


UX research activities


UX 구현 및 개발방법론


Confidential


Question : 좋은 UX?

GoodUX

FunctionalityDesign

Idea

= ?

UX의 시작

show time accuracy cool


=

Answer : 모두에게 그렇지는 않습니다.

우리는 사용자를 고려하지 않았습니다.”

UX의 시작

GoodUX

FunctionalityDesign

Idea


X User 증권사 비즈니스 맨

UX의 시작

여행자

X Product 좋은 시계 좋은 시계 좋은 시계

X Context 증권사 사무실 공항 예약실 미술관

미술관 관람자

X Need 초 단위 시간, hh:mm:ss 분 단위 시간, hh:mm Cool한 디자인

Y UX 나쁨 나쁨 좋음


UX의 시작 = 사용자 분석

사용자와 공급자 간의 Gap을 줄여라!!!


Confidential


Visual Designer Prototype Engineer

Interaction Designer

Usability Engineer

Information Architect

UX 개발 방법론

UX팀


ResearchExperienceExperiencePlanning

ExperienceExperienceBriefing

ExperienceExperienceDesign

ExperienceExperienceRoadmap

사용자사용자 분석#01

마켓분석마켓분석#02

서비스 기획및서비스 기획및 컨텐츠 기획#04 결과결과 공유#07 컨셉컨셉 디자인#08

프로토타입프로토타입 제작#09 비전 전략수립비전 및 전략수립#11

사용성 평가 및경제성사용성 평가 및경제성 분석#10

도메인 분석 및브랜드분석도메인 분석 및브랜드분석#03

UX 컨셉 설정및UX 컨셉 설정및 IA 설계#05

구축구축 & 운영전략#06

• Information Architecture• Interaction Designer• Usability Engineer• Visual Designer

• Information Architecture• Interaction Designer• Usability Engineer• Visual Designer

• 팀 전원 결과 공유 및 평가

• Usability Engineer• Visual Designer• Prototype Engineer

• 산출물 및 결과 분석• 팀 전원 비전 및 전략 수립

* IA : Information Architecture

UX 개발 방법론

필요 역량

프로세스


Why UX?


UX 트랜드


Confidential


UX 트랜드

Keyword 설명현실에서 생활하면서 습득한 주변과의 상호작용 방식을 그대로 확장하여

제품이나 시스템에 사용할 수 있는 interface

Keyword

선정 이유 1

데이터에서 다각적인 정보를 동시에 제공받으려는 요구 증대

• 기존에 검색엔진에서 제공되는 단편적인 정보보다는 정보들 간의 연관성 정보, 검색

정확도 등 보다 다각적인 정보를 원하는 사용자 Needs 발생

• 실 세계에서의 인간의 인지적인 특징을 이용하여 대용량 데이터의 다각적인 정보를

직관적으로 시각화하려는 연구가 진행 중

Keyword

선정 이유 2

대용량의 데이터, 복잡한 시스템의 사용성 증대를 위해 쉬운 UI 구현 필요성

부각

• 시스템의 복잡한 Input/Output에 실 세계의 메타포를 반영하여 단순하게 처리하려는

Haptic,3D Web, Gesture Interface 등의 기술이 발전, 연구 중

• 시스템사용에 대한 사전학습의 최소화 필요성 대두

Reality Based Interface


UX 트랜드: Bumptop


UX 트랜드: Smartskin


UX 트랜드: Gesture Interface


Keyword 설명Computer, Game Console, IPTV, Mobile 등 다양한 Device에 두루 사용 가능하고 Multi-Function을 표현 가능한 Interface

Keyword

선정 이유 1

Multi-Device에 사용 가능한 일관성 있는 UI 제공의 필요성

• Mobile, IPTV 기술들이 발전하고 보편화됨에 따라 검색엔진 등 Web에서 사용되던 서

비스들을 여러 Device들에서 똑같이 사용하고자 하는 요구가 발생

• iPhone & iTunes 사례처럼 multi-Device 기반의 서비스가 기획되므로, 초기부터 여

러 Device 특성에 따른 제약을 수용 가능한 UI 필요

Keyword

선정 이유 2

Seamless Interface

Multi-Function Device의 확산으로 특정 Device용 UI의 의미를 상실

• Home Network Server 기능을 가진 Game Console 등 단일 device의 효율을 높이

기 위해 Multi-Function을 탑재

• Nintendo Wiimote의 가속센서의 예처럼 기존에 의도된 기능을 넘어선 타 분야의 다

양하고 새로운 활용 아이디어가 연구, 발표, 수용되고 있음

UX 트랜드


UX 트랜드: bicon


UX 트랜드: 모바일 버전 세컨드 라이프


Next Generation UX 기술

Next UX 기술 #1 : 터치 (Natural, Tangible, Organic . . .)



Next UX 기술 #2 : Flexible Device & Robotics

Flexible Device

MS Robotics


Next UX 기술 #3 : 3D & VR


Augmented Reality기반



Next UX 기술 #4 : 센서

가속센서 & 압력센서



Next UX 기술 #5 : 기타 (Mixist, Siftables)

Siftables

Mixist


관련 용어

User eXperience

“RIA : Rich Internet Application”

“GUI : Graphic User Interface”

“Silverlight, Flex . . .”

“NUI : Natural User Interface”

“HCI : Human Computer Interaction” ‚UI : User Interface‛

‚Interface‛‚Interaction‛


웹 접근성 웹의 한계 웹의 확장


“데이터 전송속도 및 서버 응답속도 그리고 브라우저 기술(RIA 엔진)의 발전‛

“HTML의 정적인 인터넷 페이지의 한계를 넘어 데스크탑 어플리케이션 수준의 다이나믹한 인터페이스 제공”

“금융, 제조, 의료, 미디어 등 전방위 산업 분야에서 관련 솔루션과 결합 진화”

▪

없이

▪ 미디어 플레이어

HD급의 미디어를 별도 인코딩 없이

실시간으로 시청

▪▪ 크로스 플랫폼

크로스 플랫폼에서 RIA를 구현하여

사용자에게 Seamless 한 UX 제공

▪▪ 호텔예약 시스템

여러 단계로 처리되던 시스템을

화면전환 없이 한 화면에서 처리

정의

사용성이 극대화되고, 미려한 UI를 제공하는 혁신적 웹 응용프로그램





▪

없이










정의






▪

없이










정의






▪▪ 미디어 플레이어









정의



RIA 기술 Overview

HTML AJAX

Flash

Silverlight

JavaApplets

ActiveX

JavaFX

AIRWPF

Flex

XNA

browser-based client-basedplayer-based

R I A

Thin client Rich client

WebOpen

Wide Reach

No Footprint

Deployment

DesktopRich UX

Local Processing

UI Toolkits

Offlines Availability

RIA 기술이 대형 벤더사 중심으로 발전


Flash vs. AJAX vs. 3대 RIA 기술

Server or Web

Client Device

User

데이터 요청 데이터 응답

사용 요청 화면 구성

3 RIA PlatformFlash

다양해진 통신기법

AJAX

화려한 그래픽 구현가능

화려한 그래픽 구현 및 기존 개발기술 적용이 용이


개발환경

협업코드 제작Design Development

개발 생산성증대

공통 협업코드를 통한 의사소통


RIA 시장동향

출처 : KRG, 2008

Global 기업들의 RIA 기술 도입은 대세

단위: 백만

65,000


RIA 3대 플랫폼


Confidential


Flex


Confidential


Flex 개요

▪▪ 편리한 UI 컴포넌트 제공

3D Chart, 게이지, 맵등 편리한 기능을

컴포넌트 형태로 제공함

▪▪ Flash player 보급, Java/.NET과 호환

널리 보급된 Flash player의 장점과

.NET, Java와 호환가능성

Flex는 강력한 디자인 컴포넌트 기반의 Adobe社 RIA 기술


Results

Design

Designer Developer

Development

.SWF

Compile

▪ Runtime 엔진- Flash Player 10

▪ 엔진 크기 : 1.7MB

Runtime Player

Flex 개발환경

Flash Catalyst( Thermo)

.PSD

.PDF

.MXML

.SWCFlash

Create Suite

.AS

.SWC

Flex Builder

BlazeDS

Flash Builder

http://www.riakorea.com/bbs/board.php?bo_table=thermo_useful&wr_id=4


Nokia SNS

Zune Journey

Flex 예제

TOSHIBA


Flex 비전

출처 : http://www.adobe.com/flashplatform/pdfs/platform_at_a_glance.pdf

Flash Platform (NOT Flex)

Flash Builder


출처 : www.adobeflex.co.kr/event/Flex3_AIR_Launch/down/RIA_general_Transform_Your_Business.pdf

Flex 비전

Adobe RIA Vision



Confidential

Silverlight


▪▪ 고화질 Media 플레이어 내장

고화질에 이르기까지 다양한 코덱을

지원하는 강력한 미디어 플레이어 내장

▪▪ 디자이너와 개발자 간 협업 환경 제공

Adobe CS에 대응하는 디자이너 도구를

제공하여 XAML을 통한 협업 환경 제공

Expression Web

Expression Blend

Expression Design

Expression Media

Expression Encoder

Expression Studio

Photoshop, Illustrator

Flash + Flex Builder

DreamWeaver

Premiere

Adobe CS

Silverlight 개요

Silverlight는 강력한 미디어 플레이어를 지닌 Microsoft社 RIA 기술


▪ Runtime 엔진- Silverlight 2.0

▪ 엔진 크기 : 4.6 MB

Silverlight 개발환경

ResultsDesign

Designer Developer

Development

Runtime Player

Expression Web

Expression Blend

Expression Design

Expression Media

Expression Encoder

Expression Studio

.XAML

.XAP

CompileVisual Studio

.CS

.JS

.DLL


Silverlight 예제 (1) - DeepZoom

http://memorabilia.hardrock.com/

http://research.microsoft.com/ivm/HDViewSL/

Zoom Out Zoom In

DeepZoom의 원리 DeepZoom 예제

http://research.microsoft.com/ivm/HDView/HDGigapixel.htm

http://www.excite-webtl.jp/world/korean/web/body?wb_url=http://ascii.jp/elem/000/000/180/180389/img.html&ami_src_lang=JA&ami_tar_lang=KO&wb_dis=2




Silverlight 예제 (2) - Media Streaming

재생과 동시에 전송재생 시점과 관계없이 전송

+

Bit Rate Throttling

Streaming 예제

http://www.smoothhd.com/


Silverlight 예제 (3) – Silverlight 3.0

‚Out of Browser‛

마우스 우 클릭으로 데스크탑에 인스톨 Offline 실행 및 업데이트

‚Perspective 3D‛

2D 오브젝트를 3D공간에 디스플레이


Silverlight 비전

출처 : Silverlight 2 by Microsoft Architect ‘David Chou’

Cross Platform Vision

Silverlight Mobile Roadmap

Microsoft MarketShare


JavaFX


Confidential


▪▪ 기존 자바 어플리케이션과 완벽한 호환

JavaSE, JavaME 기반으로 수행되며

JavaFX Script 학습이 용이

▪▪ 다양한 디바이스를 통합하는 플랫폼

브라우저를 넘어 모바일, TV등 임베디드

환경의 플랫폼을 통합

JavaFX 개요

JavaFX는 S/W & H/W cross-platform을 지향하는SunMicrosystems社 RIA 기술


▪ Runtime 엔진- JRE 6.0

▪ 엔진 크기 : 15.52MB(가장 크다)

ResultsDesign

Designer Developer

Development

Runtime Player

PackagingJAR, JNLP

Compile

FX

JAR,EAR

Java Program

JavaFXScript

Free IDE

Visual Assets

DesignTool

?

JavaFX 개발환경


JavaFX 예제

On Line Off Line

Out of Browser! JavaFX Mobile Demo

http://gihyo.jp/assets/images/dev/feature/01/javaone2007/0001/jo001_0007.jpg


4월2월 6월2009 2010

Java FX 1.1 발표모바일 플랫폼 지원에뮬레이터 탑재

Java FX 1.2(현재 최신)

Java FX 2.0 예정디자이너 툴 추가

JavaOne‘09 MAX’09

Oracle이 Sun 社를 인수

Oracle의인수가 JavaFX 향방에는큰영향을미치지않을것으로보이며,

JavaFX는웹디자이너흡수를위해디자이너툴을적극적으로도입할예정

JavaFX 동향


JavaFX Mobile Architecture

JavaFX Mobile Architecture

표현력

시스템 제어 기능


JavaFX 비전

JavaFX Big Picture

JavaFX Milestone


감사합니다.

Q&A


Confidential

Documents

제목페이지 - Duredure.net/ebiz0909.pdf제목: UX & RIA –2009.07.03 Copyright © 2008 Samsung SDS Co., Ltd. All rights reserved | Confidential - 47 - Keyword 설명 Computer,