2016 SAP Forum Seoul 2016. 07. 07 권용현파트너 / SAP Korea 심플한사용자경험을위한 SAP S/4HANA UX 개선
UI vs. UX Content User Interface User Experience 2016 SAP SE or an SAP affiliate company. All rights reserved. 2
기업용소프트웨어 UX 기업용소프트웨어산업의이동 Good User Experience 기능성 사용성 사용성 심플 역할기반 시스템중심 사용자중심 일관성 User Experience 적응성 즐거움 성능 2016 SAP SE or an SAP affiliate company. All rights reserved. 3
기업에서 UX 의가치 금전적가치 생산성 교육비용 사용자오류 변경요청 향상 절감 감소 감소 인간의가치 사용자만족도 고객충성도 솔루션수용 관계강화 증가 향상 확대 (IT 와비즈니스 ) 2016 SAP SE or an SAP affiliate company. All rights reserved. 4
SAP 고객의 UX 성공사례 생산성향상 See Customer UX Success Stories in the Flipbook 사용자수용확대 사용자오류감소 Vilore Foods Pacific Drilling Greatship 교육비용절감 SAP Fiori 사용으로향상된납품률 : 60% SAP Fiori 로교육시간감소 : 0 days SAP Fiori 사용으로향상된응답성 : 30% 수익과생산성증대 빠른작업수행과혁신주도 더빠르고더많은정보기반의사결정가능 Source: SAP Benchmarking Services 2016 SAP SE or an SAP affiliate company. All rights reserved. 5
SAP UX 전략 NEW & RENEW 모든 SAP 소프트웨어의 UX 방향은 SAP FIORI UX* 표준을따름 EMPOWER 고객이직접 UX 혁신이가능하도록지원 Workforce Supplier 교육 & 베스트프랙티스 도구 & 기술 Assets Customer UX 디자인서비스 * http://experience.sap.com/fiori 2016 SAP SE or an SAP affiliate company. All rights reserved. 6
SAP S/4HANA 사용자의업무환경개선방향 SAP Fiori Launchpad ( 역할기반통합업무환경 ) 신규및개선된기능 SAP Fiori Apps SAPUI5 (Fiori 앱확장 / 추가 ) 기존 ERP 기능 SAP GUI for Wins/HTML, Web Dynpro ABAP Screen Personas (ABAP UI 단순화 ) S/4HANA 확장기능 / 고객고유기능 SAPUI5 Apps SAPUI5 ( 기능확장, 업무통합 ) 트랜잭션, 분석, 팩트시트 트랜잭션 ERP 서비스 Legacy 서비스 신규서비스 SAP 표준제공기능 OData Service 고객특화기능 SAP S/4HANA SAP Platform (NetWeaver, HCP) 2016 SAP SE or an SAP affiliate company. All rights reserved. 7
SAP Fiori Launchpad 다양한플랫폼및디바이스를지원하는 SAP 비즈니스애플리케이션을위한웹기반엔트리포인트 SAP Fiori Launchpad는비즈니스애플리케이션과분석에대한역할기반, 개인화된, 실시간, 상황중심의엔트리포인트 반응형디자인패러다임의사용으로다양한디바이스에서실행되고다양한플랫폼 (ABAP, Enterprise Portal, HANA Cloud Platform) 에배치가능 HTML5 표준기반인 SAPUI5 UI 기술기반으로심플하고직관적인 SAP Fiori UX에따라디자인되어있음 2016 SAP SE or an SAP affiliate company. All rights reserved. 8
SAP Fiori Launchpad 로 SAP UI 클라이언트의통합 다양한요구에따른사용자 UI 클라이언트를 Fiori Launchpad 의동일한패턴으로통합 사용자 : 모든디바이스 / 플랫폼에대한단일접근점, 동일사용자경험제공 관리자 : 다양한요구지원을위한공통의컨피규레이션및관리도구 모바일클라이언트 SAP Portal 클라이언트 SAP 비즈니스클라이언트 SAP GUI SAP Fiori 런치패드 사용자인터페이스 공통서비스 사용 Browsers Native Clients 네비게이션 인증 검색 개인화 테마 2016 SAP SE or an SAP affiliate company. All rights reserved. 9
SAP Fiori Launchpad 의다양한배치옵션 ABAP Front End Server SAP Enterprise Portal SAP HANA Cloud Platform 2016 SAP SE or an SAP affiliate company. All rights reserved. 10
SAP Fiori Launchpad Running On ABAP SAP 비즈니스애플리케이션전용런치패드구성 역할기반, 사용자중심 즉각적인정보를얻기위한검색 타일을통한 SAPUI5, Web Dynpro ABAP*, SAP GUI for HTML*, URL 호출 연체, 신규, 즉각적인액션등을알리기위한다양한컬러표시 협업향상을위한뉴스피드기능 차트를통한높은수준의개요제공 개인카탈로그생성을위한그룹관리 그룹과타일들의개인화를위한편집모드 *on selected devices 2016 SAP SE or an SAP affiliate company. All rights reserved. 11
SAP Fiori Launchpad Running On SAP Enterprise Portal SAP 및 non-sap 애플리케이션을포괄하는포탈런치패드구성 타일검색 그룹생성및관리 SAPUI5, Web Dynpro, SAP GUI for HTML 애플리케이션실행 EP 컨텐츠및 ABAP 백엔드시스템들의리모트카탈로그로부터의컨텐츠접근 홈페이지의개인화 2016 SAP SE or an SAP affiliate company. All rights reserved. 12
SAP Fiori Launchpad and SAP Business Client Integration 데스크탑전용사용자를위한런치패드구성 SAP Business Client 에서 SAP Fiori Launchpad on SAP Enterprise Portal 을사용 SAP GUI for Windows 사용자지원 2016 SAP SE or an SAP affiliate company. All rights reserved. 13
SAP Fiori, cloud edition (Running On SAP HANA Cloud Platform) 심플한배치, 심플한사용, 빠른 ROI, 안전한연결및확장 Extended App Extended App Custom App Custom App Custom App Custom App 실행 SAP Fiori, cloud edition 앱스활용 확장 SAP 제공앱스와컨텐츠의요구사항에맞춤적용 개발고객요구사항에따른맞춤형 Fiori 앱스구축 모바일지원베스트경험을위한최적화 2016 SAP SE or an SAP affiliate company. All rights reserved. 14
SAP Fiori, cloud edition 주요기능및서비스 SAP Fiori apps SAP Fiori launchpad UI theme designer SAP Web IDE SAP Fiori mobile service OData Provisioning 2016 SAP SE or an SAP affiliate company. All rights reserved. 15
SAP Fiori UX 개요 SAP Fiori 원칙 / 사용자에맞춘설계 중요한것에집중 언제어디서나다양한 디바이스를통한지원 일관성으로원활한경험제공 감성적교감을생성 시각디자인 정보아키텍처 인터랙션패턴 SAP Fiori 디자인 https://experience.sap.com/fiori-guidelines/ SAP Fiori 기술 OpenUI5 UserInterface BusinessLogic Other Technologies* *: SAP s prefered way to build SAP Fiori apps is using SAPUI5 2016 SAP SE or an SAP affiliate company. All rights reserved. 16
SAP Fiori UX 의진화 사용자 시스템 2016 SAP SE or an SAP affiliate company. All rights reserved. 17
New SAP Fiori UX Me Work Notifications 2016 SAP SE or an SAP affiliate company. All rights reserved. 18
SAP Fiori 2.0 Me Area Viewport Notifications Watch Video Some aspects shown are Future Direction This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 19
SAP Fiori 2.0 시각디자인 새로운벨리즈 (Belize) 테마 Belize 테마 : Blue Crystal 의후속테마 세련된 SAP Fiori 시각언어 라이트 (Light) 와다크 (dark) 플레이버 UI 에걸쳐깔끔하고일관된레이아웃으로명확하게내용을전달 마이크로인터렉션과좋은가독성에서오는유쾌함으로풍부한 SAP Fiori 사용자경험을지원 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 20
SAP Fiori 2.0 뷰포트 (Viewport) 부드럽게흐르는사용자화면의확장 다른영역으로의쉬운접근을제공 내영역 알림영역 깔끔하고일관된주요작업영역 모든중요한기능들은모든화면에서접근가능 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 21
SAP Fiori 2.0 내영역 (Me Area) 내영역은사용자가개인설정및추가기능으로의접근이가능하도록지원 협업가능상태혹은개인작업상태등으로온라인상태변경 앱파인더 개인화기능 최근액티비티 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 22
SAP Fiori 2.0 알림영역 (Notifications) 알림영역은사용자가중요한이벤트를추적할수있도록지원 두가지뷰포트에서표시 쉘헤더에있는알림아이콘을클릭하여알림영역오픈 높은우선순위의알림을위한플로팅 최신이벤트의즉시업데이트 알림에서즉각적인액션이가능 확장기능을통한추가정보확인 상세내용으로의이동및액션수행 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 23
SAP Fiori 2.0 앱파인더 (App Finder) 앱파인더는사용자가모든사용가능한앱들을찾을수있는곳 앱검색과실행 홈화면에앱추가 앱접근요청 앱카테고리열람 사용가능한앱들에대한상세정보확인 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 24
SAP Fiori 2.0 SAP S/4HANA 의 UX 로적용예정 단일진입점 SAP Fiori 런치패드를통해모든앱들을사용할수있음 분야특화된정보및액션 사용자는오버뷰페이지, 리스트리포트, 작업리스트로주목해야할개요정보를빠르게얻고신속한액션을시작하거나상세수준으로드릴다운할수있음 상세내용입력및심층탐구 차별화된새로운형태의사용을지원하는 Fiori 앱스제공 ( 오브젝트페이지등.) 모든 "classical" 트랜잭션화면들은시각적으로 SAP Fiori 테마와조화를이룸 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 25
SAP Fiori 2.0 오버뷰페이지 (Overview Page) 오버뷰페이지는분야특화된정보를집계 주목해야할사항에대한즉각적인통찰력 현재비즈니스상황에가장중요한애플리케이션에접근 신속한액션시작및상세수준으로드릴다운 여러가지태스크들로부터의정보및액션을효율적으로결합 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 26
SAP Fiori 2.0 오브젝트페이지 (Object Page) 오브젝트페이지는하나의비즈니스오브젝트의모든측면을표시 읽기전용팩트시트의후속 개요정보의쉬운사용 비즈니스오브젝트생성, 변경, 조회 데이터유형에따른시각화지원 풍부한데이터시각화및내장된분석 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 27
SAP Fiori 2.0 리스트리포트 (List Report) 리스트리포트는사용자가대량의데이터로필터링및작업이가능하도록지원 개요정보의쉬운사용 사전정의된변형 (variants) 들로부터선택 자신의변형생성및애드혹쿼리지원 다양한시각화 심플한케이스를위한심플한필터링과복잡한케이스를위한강력한필터링지원 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 28
SAP Fiori 2.0 SAP Fiori Analytics 개념과디자인 오버뷰페이지 새로운분석및표준화된시각화 일관된표기규칙 직관적인분석 개인화 오브젝트페이지 내장된오브젝트분석 차트및 KPI 와같은대화형분석요소 복잡한정보에대한점진적공개 분석리스트페이지 데이터지표에대한즉시통찰력 비주얼필터링 대화형차트 시뮬레이션기능 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 29
classical 트랜잭션을위한 SAP Fiori 테마 SAP GUI for Windows 의트랜잭션예제화면 (VA01) SAP Fiori 테마가적용된 SAP GUI for HTML This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 30
classical 트랜잭션을위한 SAP Fiori 테마 : 상세내용 아이콘을텍스트로대체 헤더의결합 (SAP Fiori 2.0 과같은 ) SAP Fiori 형태의탭 라벨의오른쪽정렬 저장 과같은액션을처리하는새로운푸터 (footer) 오류처리를위한테두리표시 This is the current state of planning and may be changed by SAP at any time. 2016 SAP SE or an SAP affiliate company. All rights reserved. 31
SAP S/4HANA Fiori App 의확장요소 UI 레이아웃변경예 ) 기존필드의추가, 이동, 숨김 E-Mail 템플릿디자이너 Fiori UI 고객특화로직추가 (BAdI) 사용자정의필드추가 OData Service Application Database Table 2016 SAP SE or an SAP affiliate company. All rights reserved. 32
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 이제공되지않는기존트랜잭션화면의간소화 2016 SAP SE or an SAP affiliate company. All rights reserved. 33
SAP Screen Personas 3.0 특징 SAP GUI for HTML 에내장 Silverlight의의존성이없는 HTML5 표준기반편집 SAP GUI 및 Web GUI에서렌더링 JavaScript 기반스크립팅엔진 심플한기록및키입력의재생 SAP Fiori 의쉬운통합 SAP Fiori Launchpad에플레이버내장 Fiori 디자인지원 S/4HANA 스크린간소화 맞춤형트랜잭션화면구현을위헤 Fiori 디자인적용 복잡한 GUI 화면의간소화 Web Dynpro ABAP 스크린편집 2016 SAP SE or an SAP affiliate company. All rights reserved. 34
SAP Screen Personas 를사용한복잡한트랜잭션화면의간소화 트랜잭션 CO02 ( 생산오더변경 ) 2016 SAP SE or an SAP affiliate company. All rights reserved. 35
SAP HANA Cloud Platform 을활용한 SAP S/4HANA 확장시나리오 I1 User Interface (Fiori) S2 Custom User Interface (Fiori) S1 I1 I2 UI 유연성 ( 신규필드추가, 필드숨김, 라벨변경, ) 필드 / 테이블확장 Frontend Backend: ABAP Server I2 OData Service Application I3 I4 S5 S6 OData Service Application Frontend Backend: HCP S3 I3 I4 S1 S2 S3 S4 분석 (CDS view) / 양식확장 비즈니스로직확장 (e.g. BADI ) 신규사용자정의 UI UI 확장 신규 E2E HCP 애플리케이션 HCP 에서분석 ( 데이터복제 ) Custom SAP Database Table In-App 확장 S4 Database Table Side-by-Side 확장 S5 S6 신규 HCP 애플리케이션에서신규 S/4HANA OData 서비스호출 S/4HANA 비즈니스로직확장에서신규 HCP 서비스호출 2016 SAP SE or an SAP affiliate company. All rights reserved. 36
SAP S/4HANA UX 개선절차요약 Start SAP Fiori apps reference library http://www.sap.com/fiori-apps-library Fiori app available now? No Modify existing Fiori app? No Based on SAP GUI or Web Dynpro ABAP? No Yes Yes Yes SAP Fiori Enhance using SAP Web IDE SAP Screen Personas SAP UI5 custom development 2016 SAP SE or an SAP affiliate company. All rights reserved. 37
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 2016 SAP SE or an SAP affiliate company. All rights reserved. 38
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 2016 SAP SE or an SAP affiliate company. All rights reserved. 39
Thank you yong.hyun.kwon@sap.com 권용현파트너 / SAP Korea 2016 SAP SE or an SAP affiliate company. All rights reserved.