2016 SAP Forum Seoul 심플한사용자경험을위한 SAP S/4HANA UX …. SAP S4HANA UX.pdf · SAP...

심플한사용자경험을위한 SAP S/4HANA UX 개선2016. 07. 07권용현파트너 / SAP Korea

2016 SAP Forum Seoul

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 2

Content User Interface User Experience

UI vs. UX


기업용소프트웨어UX

User Experience

사용성

역할기반

성능

일관성적응성

심플

즐거움

기능성

시스템중심

기업용소프트웨어산업의이동

사용성

사용자중심

Good User Experience


기업에서 UX의가치

금전적가치

인간의가치

생산성

향상

교육비용

절감

사용자오류

감소

변경요청

감소

사용자만족도

증가

고객충성도

향상

솔루션수용

확대

관계강화

(IT 와비즈니스)


SAP 고객의 UX 성공사례

Source: SAP Benchmarking Services

생산성향상

사용자수용확대

사용자오류감소

교육비용절감

Vilore Foods

SAP Fiori사용으로향상된납품률 :

60%

수익과생산성증대

Pacific Drilling

SAP Fiori로교육시간감소 :

0 days

빠른작업수행과혁신주도

Greatship

SAP Fiori사용으로향상된응답성 :

30%

더빠르고더많은정보기반의사결정가능

See Customer UX Success Stories in the Flipbook

http://www.sapserviceshub.com/i/505488-sap-user-experience-success-stories

http://www.sapserviceshub.com/i/505488-sap-user-experience-success-stories


NEW & RENEW모든 SAP소프트웨어의 UX 방향은 SAP FIORI UX* 표준을따름

교육 & 베스트프랙티스

도구 & 기술

UX 디자인서비스

EMPOWER고객이직접 UX 혁신이가능하도록지원

SAP UX 전략

Workforce Supplier

CustomerAssets

* http://experience.sap.com/fiori


SAP S/4HANA 사용자의업무환경개선방향

SAP 표준제공기능 고객특화기능

SAP Platform (NetWeaver, HCP)SAP S/4HANA

Screen Personas

(ABAP UI 단순화)

트랜잭션트랜잭션, 분석, 팩트시트

SAPUI5

(Fiori앱확장/추가)

ERP서비스

SAPUI5

(기능확장, 업무통합)

Legacy서비스

신규서비스

SAPUI5 Apps

S/4HANA 확장기능 / 고객고유기능

SAP GUI for Wins/HTML, Web Dynpro ABAP

기존 ERP 기능

SAP Fiori Apps

신규및개선된기능

SAP Fiori Launchpad (역할기반통합업무환경)

OData Service


SAP Fiori Launchpad

SAP Fiori Launchpad는 비즈니스애플리케이션과분석에

대한역할기반, 개인화된, 실시간, 상황중심의엔트리

포인트

반응형디자인패러다임의사용으로다양한디바이스에서

실행되고다양한플랫폼(ABAP, Enterprise Portal,

HANA Cloud Platform)에배치가능

HTML5 표준기반인 SAPUI5 UI 기술기반으로심플하고

직관적인 SAP Fiori UX에따라디자인되어있음

다양한플랫폼및디바이스를지원하는 SAP 비즈니스애플리케이션을위한웹기반엔트리포인트


SAP GUISAP 비즈니스클라이언트

SAP Portal 클라이언트

모바일클라이언트

네비게이션테마

개인화

인증 …

검색

Native ClientsBrowsers

공통서비스

사용

사용자인터페이스

SAP Fiori런치패드

SAP Fiori Launchpad로 SAP UI 클라이언트의통합

다양한요구에따른사용자 UI 클라이언트를 Fiori Launchpad의 동일한패턴으로통합

• 사용자 : 모든디바이스/플랫폼에대한단일접근점, 동일사용자경험제공

• 관리자 : 다양한요구지원을위한공통의컨피규레이션및관리도구


SAP Fiori Launchpad의다양한배치옵션

ABAP Front End Server SAP Enterprise Portal SAP HANA Cloud Platform


그룹과타일들의개인화를위한편집모드

즉각적인정보를얻기위한검색

역할기반,사용자중심

개인카탈로그생성을위한그룹관리

협업향상을위한뉴스피드기능

연체, 신규, 즉각적인액션등을알리기위한다양한컬러표시

차트를통한높은수준의개요제공

타일을통한 SAPUI5, Web Dynpro ABAP*, SAP GUI

for HTML*, URL 호출

*on selected devices

SAP Fiori Launchpad Running On ABAPSAP 비즈니스애플리케이션전용런치패드구성


타일검색

홈페이지의개인화

EP 컨텐츠및 ABAP 백엔드시스템들의리모트카탈로그로부터의컨텐츠접근

그룹생성및관리SAPUI5, Web Dynpro,

SAP GUI for HTML 애플리케이션실행

SAP Fiori Launchpad Running On SAP Enterprise PortalSAP 및 non-SAP 애플리케이션을포괄하는포탈런치패드구성


• SAP Business Client에서 SAP Fiori Launchpad on SAP Enterprise Portal을사용

• SAP GUI for Windows 사용자지원

SAP Fiori Launchpad and SAP Business Client Integration데스크탑전용사용자를위한런치패드구성


SAP Fiori, cloud edition (Running On SAP HANA Cloud Platform)심플한배치, 심플한사용, 빠른 ROI, 안전한연결및확장

Extended App

Extended App

Custom App

Custom App

Custom App

Custom App

확장SAP 제공앱스와컨텐츠의요구사항에맞춤적용

실행SAP Fiori, cloud edition 앱스활용

개발고객요구사항에따른맞춤형 Fiori

앱스구축

모바일지원베스트경험을위한

최적화


SAP Fiori, cloud edition주요기능및서비스

SAP Web IDE

UI theme designerSAP Fiori launchpadSAP Fiori apps

SAP Fiori mobile service OData Provisioning


SAP Fiori 원칙

SAP Fiori 디자인

인터랙션패턴정보아키텍처시각디자인

/

User Interface

BusinessLogicSAP Fiori기술

OpenUI5

Other Technologies*

*: SAP’s prefered way to build SAP Fiori apps is using SAPUI5

https://experience.sap.com/fiori-guidelines/

사용자에맞춘설계 중요한것에집중 언제어디서나다양한디바이스를통한지원

일관성으로원활한경험제공

감성적교감을생성

SAP Fiori UX 개요

http://sap.github.io/openui5/

https://experience.sap.com/fiori-guidelines/


SAP Fiori UX의진화

시스템사용자


Work NotificationsMe

New SAP Fiori UX


SAP Fiori 2.0

Me Area Notifications

This is the current state of planning and may be changed by SAP at any time.

Watch VideoSome aspects shown are Future Direction

Viewport

Planned

Innovations

http://blog.naver.com/rock4e/220759335545


Belize 테마 : Blue Crystal의후속테마

• 세련된 SAP Fiori시각언어

• 라이트(Light)와 다크(dark)플레이버

• UI에걸쳐깔끔하고일관된레이아웃으로명확하게내용을전달

• 마이크로인터렉션과좋은가독성에서오는유쾌함으로풍부한 SAP Fiori사용자경험을지원

Planned

InnovationsSAP Fiori 2.0시각디자인 –새로운벨리즈(Belize)테마


Planned

Innovations


부드럽게흐르는사용자화면의확장

• 다른영역으로의쉬운접근을제공

• 내영역

• 알림영역

• 깔끔하고일관된주요작업영역

• 모든중요한기능들은모든화면에서접근가능

Planned

Innovations

SAP Fiori 2.0 –뷰포트(Viewport)


Planned

Innovations


내영역은사용자가개인설정및추가기능으로의접근이가능하도록지원

• 협업가능상태혹은개인작업상태등으로온라인상태변경

• 앱파인더

• 개인화기능

• 최근액티비티

SAP Fiori 2.0 –내영역(Me Area)


Planned

Innovations

Planned

Innovations


알림영역은사용자가중요한이벤트를추적할수있도록지원

• 두가지뷰포트에서표시

• 쉘헤더에있는알림아이콘을클릭하여 알림영역오픈

• 높은우선순위의알림을위한플로팅

• 최신이벤트의즉시업데이트

• 알림에서즉각적인액션이가능

• 확장기능을통한추가정보확인

• 상세내용으로의이동및액션수행

SAP Fiori 2.0 –알림영역(Notifications)


Planned

Innovations

Planned

Innovations


앱파인더는사용자가모든사용가능한앱들을찾을수있는곳

• 앱검색과실행

• 홈화면에앱추가

• 앱접근요청

• 앱카테고리열람

• 사용가능한앱들에대한상세정보확인

Planned

Innovations

SAP Fiori 2.0 –앱파인더(App Finder)


Planned

Innovations

Planned

Innovations


SAP Fiori 2.0 – SAP S/4HANA의 UX로적용예정


Planned

Innovations단일진입점

• SAP Fiori런치패드를통해모든앱들을사용할수있음

분야특화된정보및액션

• 사용자는오버뷰페이지, 리스트리포트, 작업리스트로주목해야할개요정보를빠르게얻고신속한액션을시작하거나상세수준으로드릴다운할수있음

상세내용입력및심층탐구

• 차별화된새로운형태의사용을지원하는 Fiori앱스제공(오브젝트페이지등.)

• 모든 "classical" 트랜잭션화면들은시각적으로 SAP Fiori테마와조화를이룸


오버뷰페이지는분야특화된정보를집계

• 주목해야할사항에대한즉각적인통찰력

• 현재비즈니스상황에가장중요한애플리케이션에접근

• 신속한액션시작및상세수준으로드릴다운

• 여러가지태스크들로부터의정보및액션을효율적으로결합

Planned

Innovations

SAP Fiori 2.0 –오버뷰페이지(Overview Page)


Planned

Innovations

Planned

Innovations


오브젝트페이지는하나의비즈니스오브젝트의모든측면을표시

• 읽기전용팩트시트의후속

• 개요정보의쉬운사용

• 비즈니스오브젝트생성, 변경, 조회

• 데이터유형에따른시각화지원

• 풍부한데이터시각화및내장된분석

Planned

Innovations

SAP Fiori 2.0 –오브젝트페이지(Object Page)

Planned

Innovations

Planned

Innovations



리스트리포트는사용자가대량의데이터로필터링및작업이가능하도록지원

• 개요정보의쉬운사용

• 사전정의된변형(variants)들로 부터선택

• 자신의변형생성및애드혹쿼리지원

• 다양한시각화

• 심플한케이스를위한심플한필터링과복잡한케이스를위한강력한필터링지원

Planned

Innovations

SAP Fiori 2.0 –리스트리포트(List Report)


Planned

Innovations

Planned

Innovations


SAP Fiori 2.0 – SAP Fiori Analytics개념과디자인

분석리스트페이지오버뷰페이지 오브젝트페이지

• 새로운분석및표준화된시각화

• 일관된표기규칙

• 직관적인분석

• 개인화

• 내장된오브젝트분석

• 차트및 KPI와같은대화형분석요소

• 복잡한정보에대한점진적공개

• 데이터지표에대한즉시통찰력

• 비주얼필터링

• 대화형차트

• 시뮬레이션기능

Planned

Innovations



SAP GUI for Windows의트랜잭션예제화면 (VA01)

“classical” 트랜잭션을위한 SAP Fiori테마

SAP Fiori테마가적용된 SAP GUI for HTML


Planned

Innovations


“classical” 트랜잭션을위한 SAP Fiori테마 : 상세내용

헤더의결합(SAP Fiori 2.0과같은)아이콘을텍스트로대체

라벨의오른쪽정렬“저장”과같은액션을처리하는새로운푸터(footer)

오류처리를위한테두리표시

SAP Fiori형태의탭


Planned

Innovations


사용자정의필드추가

고객특화로직추가 (BAdI)

UI 레이아웃변경예)기존필드의 추가, 이동, 숨김

SAP S/4HANA Fiori App의확장요소

Application

Database Table

OData Service

Fiori UI

E-Mail 템플릿디자이너


SAP GUI의간소화를위한 SAP Screen Personas

SAP S/4HANA Fiori UX의핵심부분

• 전통적인 UI(Dynpro, Web Dynpro ABAP)를통한 SAP S/4HANA on-premise 사용을위한옵션

• SAP Screen Personas 3.0 :

• 맞춤형트랜잭션화면구현을위헤 Fiori디자인적용

• 복잡한 GUI 화면의간소화

• Fiori Launchpad에서 플레이버실행

• Fiori app이제공되지않는기존트랜잭션화면의간소화


SAP GUI for HTML에내장

Silverlight의의존성이없는 HTML5 표준기반편집

SAP GUI 및Web GUI에서 렌더링

JavaScript 기반스크립팅엔진

심플한 기록및키입력의재생

SAP Fiori의쉬운통합

SAP Fiori Launchpad에플레이버내장

Fiori디자인지원

S/4HANA 스크린간소화

맞춤형 트랜잭션화면구현을위헤 Fiori디자인적용

복잡한 GUI 화면의간소화

Web Dynpro ABAP 스크린편집

SAP Screen Personas 3.0 특징


SAP Screen Personas를사용한복잡한트랜잭션화면의간소화

트랜잭션 CO02 (생산오더변경)


SAP HANA Cloud Platform을활용한 SAP S/4HANA 확장시나리오

Application

Database Table

OData Service

User Interface(Fiori)

Frontend

Backend: ABAP Server

Application

Custom User Interface(Fiori)

Frontend

Backend: HCP

OData Service

Database Table

S3

S1UI 유연성 (신규필드추가, 필드숨김, 라벨변경, …)

S1

S2

S2

S3

S4

S4

S5

S5

S6

I1

I4

I3

S6

I1

I2

I3

I4

I2

필드/테이블확장

분석 (CDS view) / 양식확장

비즈니스로직확장 (e.g. „BADI“)

신규사용자정의 UI

UI 확장

신규 E2E HCP 애플리케이션

HCP에서분석 (데이터복제)

신규 HCP 애플리케이션에서 신규S/4HANA OData 서비스 호출

S/4HANA 비즈니스 로직확장에서신규HCP 서비스호출

SAP

Custom

In-App 확장 Side-by-Side 확장


Fiori app available

now?

Modify existing

Fiori app?

Yes Yes

No No

SAP FioriSAP UI5 custom development

SAP Screen Personas

No

Start

Enhance using SAP Web IDE

Based on SAP GUI or

Web DynproABAP?

Yes

SAP S/4HANA UX 개선절차요약

SAP Fiori apps reference library

http://www.sap.com/fiori-apps-library





More information about SAP Fiori

SAP Fiori central information point http://www.sap.com/fiori

SAP Fiori, demo cloud edition http://www.sap.com/fiori-demo

SAP Fiori, cloud edition documentation http://help.sap.com/fiori_cloudedition

SAP Fiori apps reference library http://www.sap.com/fiori-apps-library

SAP Fiori User Experience http://experience.sap.com/fiori

Help.sap.com http://help.sap.com/fiori

http://www.sap.com/fiori

http://www.sap.com/fiori-demo

http://help.sap.com/fiori_cloudedition


http://experience.sap.com/fiori

http://help.sap.com/fiori


More information about SAP Screen Personas

Product Page www.sapscreenpersonas.com

Getting Started resource page scn.sap.com/docs/DOC-54574

OpenSAP course https://open.sap.com/courses/sps1

Productivity Power Play (video series) http://wiki.scn.sap.com/wiki/display/Img/Productivity+Power+Play

http://www.sapscreenpersonas.com/

http://scn.sap.com/docs/DOC-54574

https://open.sap.com/courses/sps1

http://wiki.scn.sap.com/wiki/display/Img/Productivity+Power+Play

2016 SAP Forum Seoul 심플한사용자경험을위한 SAP S/4HANA UX …. SAP S4HANA UX.pdf · SAP...

Documents

Transcript of 2016 SAP Forum Seoul 심플한사용자경험을위한 SAP S/4HANA UX …. SAP S4HANA UX.pdf · SAP...