1 2 3 7 Previous Next

User Interface Technology

103 Posts

First let me start off with what I am calling “SAP’s new UX Strategies”. What I am referring to is Fiori, Personas 3.0, and SMP native and hybrid applications. As I will discuss further, projects for these products are very different than your typical SAP project of designing reports or interfaces, writing customer functions to process custom fields or custom IDOC segments, etc. These are all things I have worked on before, and I can tell you, it is very different than the Fiori projects I have been working on lately.

 

One term you will hear again and again from the SAP experience community, top design schools, and companies working on projects and products all over the world in all industries, is Design Thinking. Wikipedia defines this term as “design-specific cognitive activities that designers apply during the process of designing”. It is a framework or process by which designers can solve complex problems, and a quick google search will show you many diagrams of the steps involved. The one I will use is shown below, and was obtained through a document by the Stanford University Design School, or “d.school”.

Deisgn Thinking Process.png

To focus today’s conversation, I really want to concentrate on the first three steps. Every SAP developer has gone through the prototype and test phase, but these first three steps are new territory. In a later blog, however, I plan on addressing how these last two steps have their own quirks in these new UX projects, but that is for another day. This blog will discuss the importance of understanding, and devoting time to, the Empathize, Define, and Ideate steps. With these processes, terms, and types of projects in mind, let’s dive in.

 

In my opinion, empathize is perhaps the most important step. The key skill here is listening. Listen to the people you will be working with and designing for and understand their process, their pain points, and what types of outcomes they desire. Whether you are designing new screens in Personas, developing new mobile applications in SMP, or creating a custom or extended Fiori app, your options are almost limitless. You can make it look, feel, and behave exactly how you want, so it’s important to know the goals of the application and the eventual end-users before you ever create a mock-up or write a single line of code. The same Hasso Plattner Institute of Design at Stanford I was referring to earlier lists how to empathize and they say to observe, engage, watch, and listen. Maybe you are tasked with creating a mobile application for an SAP transaction. A good start is to watch users interact with that transaction. Listen to what they have to say about it, both good and bad. Understand what process it is you are there to work on, and understand what the current state is. Engage the end-users and ask them questions about what they do, how they do it, and a few things they might change if they could. Engage not only the end-users, but all project stakeholders. This could include shop floor technicians, business users, approvers, managers, HR teams, anyone. Get the fullest picture you possibly can of how things are done today, and understand the desired outcome of the project you are undertaking. This process takes time and effort, but it is important to know all of this up front so you can create an accurate definition of the problem and goals you are out to achieve. A good tool for the empathize phase, and one that serves as a great summary of the process, is the empathy map. An example is shown below. This image comes courtesy of Machteld Faas Xander.


Empathy Map.jpg

The concentration is on the user and what they are thinking, seeing, saying, doing, feeling, and hearing. By keeping this focus on the user and their needs, as well as the desired outcomes, and top challenges, the empathize phase will give a great start for defining the project.


After the empathize phase, after your project team has a clear understanding of the users they are designing for, the challenges they face, and the goals they would like to accomplish, it’s time to develop what the Stanford Design School calls a “point-of-view”, or POV. They define this POV as “the explicit expression of the problem you are striving to address.”  What challenge are you tackling and why? By the end of the define phase, there should be a clear enough vision put together from all of the information and data collected in the empathize phase to set the team moving towards determining the solution. From the definition phase, the team gains a focus on the user-needs and goals they are setting out to achieve. As the Design School says, your problem should be discrete and not broad, so that you are not trying to do all things for all people. A properly executed design phase will provide the right amount of direction for the team to enter the ideate phase.


As the name implies, the ideate phase is where you start to hash out ideas and potential solutions. The first two phases, emphasize and define, have all been about understanding the challenges, and framing them to understand the goals of your project. The ideate phase is where you turn the challenges and goals into an end-product, a mobile application being an example in the context we are talking about. It is important not to judge ideas early on in the ideate phase or think any idea to silly or stupid to be worth mentioning. Sometimes an outlandish idea leads to a more reasonable one that is a very effective solution. There are all sorts of techniques used to approach the ideate phase, with the most common one being brainstorming. It’s an effective tool that lets the group build off of each other’s ideas, allowing more solutions to come about than if one person just thought about the problem quietly to themselves. From the ideation phase, it is not important to come out with a single solution, but perhaps a few, each of which can be prototyped and tested for refinement.

Brainstorming.jpg

Brainstorming image courtesy of clixmarketing.com.


To me, these steps that I have outlined are relatively new when it comes to SAP projects. From my past projects, I might know that a customer wants to create an interface to update equipment records, and I create a batch process that does so, or they want to be able to run some report, so I add a few select options and check boxes, and fetch the necessary data. These types of projects are fairly confined to the typical way of doing things in SAP. There is not a huge focus on user experience and the many ways that a problem can be tackled. But developing custom applications for customers, that is blue ocean territory. And because we are not only developing the back end functionality, but also the presentation layer, the mechanism by which the user interacts with our solution, a lot of time has to be spent on understanding the user and their process and needs, and the potential solutions are almost limitless. UI5 provides a framework by which we can build our solutions, but it is far more flexible than building a report for the SAP GUI. For that reason, it is important to incorporate these new steps, and the Design Thinking process into your SAP UX projects. By not doing so, you not only open yourself up to more rework late in the process, but you don’t allow yourself to fully utilize these new, flexible, customizable products to their potential, ultimately doing the end-users we set out to help a disservice. But if these steps are implemented properly, and time and effort are spent learning and designing, as opposed to jumping right into building and testing, you can create simple, beautiful products that enrich the user experience and drive customer satisfaction to an all-time high.








How did I get here?

Not too long ago, there was a discussion here on SCN that triggered me to respond with one of my usual longish answers...  On Designers & Developers

 

Graham has posted another blog entry looking at SAP's BUILD tool too, which is also relevant to the broader discussion and interesting in its own right.

 

Graham's original post was really a discussion around the communications and working relationships of designers and developers.  I'd say it has become and will continue to be a very pertinent discussion point in our world for many years to come.  You could argue the engagement of designers and developers should have been very well established long ago in our industry, and in 2015 we would have much more pressing issues to discuss...  Sadly not.  The combination of designers and developers working together forms a massive foundation for broader UX considerations.

 

I want to focus on a key aspect of the designer & developer relationship that triggered my response - that of how the world of consulting, specifically SAP consulting, approaches this challenge.

 

From a broader perspective, I've worked in consulting for a long time now and up to very recently (i.e. 2months ago) never really experienced any proper engagement between a designer/UX consultant and the development team.

 

A better way?

If you have ever worked in an SAP consultancy or in a customer using an SAP consultancy, you will have noticed (if you bothered to look around) the distinct lack of designers available as resource to support any development effort.  My experience is that almost zero thought is given to the broad UX topic when SAP projects are initiated - UX just "happens".  I'll quote my own answer from Graham's post here, to summarise the situation again:-

 

Consultant - "we'll have a designer working 3 days a week for 6 months through the design/build phase, to ensure the developers are meeting the overall UI/UX guidelines and the app delivery is consistent with your user's requirements"

Customer - "sorry no, we don't want to pay extra for someone who isn't building."

 

6 months later...

Customer - "why do all of our app's look like they've been built with the 'data goes here' design approach?  They're horrible, we won't pay until they've all been changed and look better."

 

In that post, I suggested consultancies need to be "smarter" in how they engage with customers and ensure proper design consideration is given to the solutions delivered.  There is a massive responsibility on both consultancies and customers to work together, better when it comes to UX.  But here comes the challenge I outline above - that old favourite of cost.

 

We exist in a paradoxical world where customers expect solutions to look and feel amazing and have intuitive, forgiving and rewarding UX's; whilst they typically also want to see that solution delivered by the smallest possible team, hopefully at a very low day rate, in the shortest possible time.  Compounding this, there is still a broad mentality on the consulting side that focuses on "billable work".  They appear to struggle on how to accommodate a function (designers/UX consultants) who don't appear to have a clear route to revenue generation.

 

The model is broken.

 

You could argue any current SAP project will have a vast proportion of its deliverables heavily in the UX camp.  How the end result is measured will often come down to whether the end users like it and use it.  Or not.  To achieve that, investment in UX considerations up front are a must and yet they are often barely an afterthought.

 

Call to arms

It's not complicated.  I'm not suggesting a completely new methodology for delivery.  I'm not advocating a 6-month engagement with Saatchi & Saatchi before you even consider mocking up your first PO Approval app.  All I'm proposing is a sensible approach by both consultancies and customers.

 

If you're a customer:

  1. Ask your consultants about their UX capability, ascertain if it is a key value in how they deliver.
  2. Invest time with their UX consultants and designers to share key goals.
  3. Discuss how their resourcing model works to support this and what it means in terms of timelines and costs by all means but please, please, please don't just chop out resource simply to cut costs.  You WILL regret it.  UX focus should have equal billing along with architecture, security, support, testing, etc.  (Yeah, we've all experienced projects were testing is slashed, security is ignored, support is non-existant all to save money - that's a whole other blog post in and of itself...)
  4. Please stop measuring the value of a project with a massive weighting on its overall cost - success must and should be measured based on cost and benefit together, and I guarantee up-front and continued focus on UX aspects will improve the project no end.  It might actually reduce the timeline, the resources needed and the on-going support required - oh wow look, a cost saving driven by a benefit.  Woot.
  5. If you can't see how a quality UX approach could be a benefit, engage with someone who can help you understand this and ensure it is built into your success criteria for any future projects.

 

If you're a consultant/consultancy:

  1. Think about how you could embed a designer and/or UX consultant into your project methodology.
  2. Educate your entire team about what UX is and what it really means.
  3. Build a watertight resource and cost model that allows your non-directly billable resource to contribute indirectly to the success of your projects, whilst retaining a viable model to keep your customers happy and still pay all of your bills and wages.  Profit and success will quickly follow.
  4. Provide an environment where your designers and developers can co-habit and contribute together, that fosters an atmosphere of teamwork and sharing ideas.  Get your customers into that environment too.
  5. Please see point 5 above

 

UX & design applies to every aspect of any solution you are building and has different meanings and requirements to all stakeholders.  Get it right and everyone is a winner.

http://cdn.meme.am/instances/62860481.jpg

I am very pleased that our 2014 TechEd lecture was selected as 'Lecture of the Week' for the week of 13th of July 2015. In case that you missed the session or want to have a repeat, you can watch the replay below. - Special credits go to Matthias Heitmann for preparing and conducting the impressive demonstrations.

 

Session Abstract and Video

Bring your Big Data from SAP HANA, any DB, or ABAP BICS to the UI! Increase end-user productivity with powerful drill-down mechanisms, analytical charts, smart planning tables, and the intuitive Search and Find pattern. To provide attractive user interfaces, use the SAP Fiori-like Blue Crystal theme or utilize the cloud-based UI theme designer.

 


What comes next?

In the meanwhile we have invested into the UI Integration topic: WDA/FPM applications have adapted the Fiori Design with the new Blue Crystal theme. Fiori Interaction Patterns like the Fiori Filter Bar have been integrated seemlessly into WDA/FPM applications. Furthermore a Web Dynpro ABAP implementation for SAP Screen Personas will be released with SAP_UI 7.50 SP00.

 

fpm.png

 

Outlook: TechEd content 2015

At the upcoming TechEd 2015, we will demonstrate how to simplify and modernize WDA in the context of Fiori and how to bring WDA content into the Fiori Launchpad in a 2-hour Hands-On session. Besides this session, there are many other interesting sessions we are planning for you:

 

Session IDSession FormatSession Title
UX360Hands-On (2h)Simplify and Modernize Web Dynpro for ABAP in the Context of SAP Fiori
UX113Lecture (1h)Applying UI Theme Designer to SAP Fiori and SAP NetWeaver Business Client
UX606Mini Code Jam (1h)User Experience boost to Web Dynpro ABAP applications with Fiori principles
UX603Mini Code Jam (1h)Learn to integrate UI5 controls into Web Dynpro ABAP
UX704Code Review (30m)Navigate from Web Dynpro ABAP to SAPUI5 in the Fiori Launchpad
UX707Code Review (30m)Scripting with SAP Screen Personas for Web Dynpro ABAP


Hi all,

 

If you like the SAP UX Explorer and the exposed relations, I’m sure you are going to love the new Semantic Viewer (Beta) we are currently working on. I had the chance to demo it already during the ASUG webinar “SAP UX Explorer – Overview” with great feedback.

 

What is the Semantic Viewer?

 

The Semantic Viewer for SAP UX Explorer allows you to visualize the relations between different topics in our database. There are already hundreds of relations that can be explored. Up to now however, these relations were provided by text only:

 

Semantic_Viewer_3.png

 

Obviously, it is not easy to consume that information, especially if a topic holds a lot of relations or if you want to oversee the relations holistically. The screenshot below for example shows the direct neighbor topics of SAP HCP filtered by the relation type "delivered by". This is exactly the same information like the one in the screenshot above. At the same time however, you can also explore the neighbors of the neighbors which reveals additional interesting information. In this case we see that UI Theme Designer and SAPUI5 are not only delivered by SAP HCP but also by other delivery channels.

 

 

Semantic_Viewer_1.png

 

I have added the screenshot below, just to show the current state of the filter settings panel. Of course we want to further extend this tool so that it can become your best companion to easily navigate through our SAP UX Explorer content and explore helpful information.

 

Semantic_Viewer_2.png

 

 

How can I get access to the Semantic Viewer?

 

We plan to start a closed beta phase by next week (or latest the week after) with all users who have filled-out our satisfaction survey and left their e-mail address.

 

As a result, becoming part of this closed beta phase is quite easy. Just fill out the SAP UX Explorer – Satisfaction Survey, leave your e-mail address and add the words "Semantic Viewer" in the comments section at the end of the survey form. We are going to get in touch with everybody to provide detailed access information and the exact start date of the test phase.

 

Currently we plan to keep this closed beta phase going for at least four weeks and continue with an open beta running until end of this year.

 

If you would like be one of the first exploring our SAP UX Explorer data with the Semantic Viewer - it’s your chance.

 

I’m sure you are going to like it,

JJ

You are planning to attend TechEd 2015? Curious about how to improve User Experience and what comes next from SAP side? Want to learn more about how to develop state of the art SAP User Interfaces? Three times a yes? Perfect, you`re right here, this is your blog.

 

Similar to last year we set up a complete track for User Interface and User Experience design and technology.

The track will come up with more than 30 sessions all around UX.

As User Experience (UX) is one of the "hottest" topics at TechEd we will also see UX-related sessions in other tracks like "Mobile", "Analytics", "Security" and many more. All in all an offering of more than 70 hours of educational content.

 

Below you can find a listing of the UX track structuring and topics covered. (current state of planning, may be a matter of change):

 

[UX Track@ TechEd 2015]

TechEd1.jpg

 


[UX @ other tracks] .... just some highlights

  • SAP UX strategy
  • Implementation of SAP Fiori in SAP System Landscape
  • Authentication and Authorization for SAP Fiori
  • SAP Smart Business
  • Key UI Technologies in S/4 HANA
  • Development of mobile apps with SAP Web IDE
  • ....

 

 

[Additional formats and offerings]

  • Roadmap Q&A sessions
  • Code Review sessions
  • CodeJam Mini Editions
  • ASUG customer sessions
  • Customer Co-Innovation sessions
  • UX Pre-Conference day in planning



[Important dates]

  • Registration opens: June
  • TechEd Las Vegas: Oct 20 – 23
  • TechEd Barcelona:  Nov 10 – 12
  • TechEd Bangalore:  tbd

 

 

This blog will keep you up to date about news and facts all around UX at TechEd 2015 so stay tuned.

 


- Michael, Tracklead for UX@SAP TechEd

One of the real pains when developing SAPUI5 (or OpenUI5) applications is deploying them to your SAP ABAP server.

 

If you are using Eclipse as your IDE the SAP ABAP Repository Team Provider allows you to retrieve and submit your project to the ABAP server. The SAP program /UI5/UI5_REPOSITORY_LOAD does the same thing.

 

 

 

But these methods are really only suitable for an individual developer working in isolation - they don’t really work in team development situations where changes and deployments need to be coordinated.

 

Typically web development teams use a distributed version control system to manage their projects - such as GitHub. Then they build a continuous deployment solution that will take the GitHub project, add any required submodules or other prerequisite components, transform these artefacts into runtime ready states (e.g. minify .JS files) and then deploy them to the required runtime environments. To do this they may mix and match tools and technologies such as Grunt, Node.js, Maven, Gulp, Jenkins, etc.

 

maven.jpegjenkins_logo.png

 

While this might sound like a lot of bits and bobs cobbled together the reality is pretty awesome - within a few minutes of a new code version being merged into the master branch it will automatically be deployed and running.

 

But in our mainly ABAP world this has rarely been required before so this is a new concept. ABAP provides developers with a unified design-time and runtime environment so simply activating your code also deploys it. Web developers tend to use their favourite IDE (or simply a text editor) to build their code locally, then they unit test it with a locally installed web server using a reverse-proxy to access backend web services. In a SAP environment, once this unit testing is complete, we now need to deploy this web application to the ABAP system to be served up via the ICF.

 

When I have talked to my customers about setting up a system to automate the deployment of my SAPUI5 applications I typically hit problems. Because this is all new to the Basis people they pass in onto the Network team. Because it is a development task the Network team pass it onto the in-house Development team. Because the Development team are ABAPers they throw up their hands and say not my job - or if they are web developers they say “we don’t do ABAP” because in the end we need to deploy to an ABAP system. Frustrating!

 

problem.jpg

 

So I have build some ABAP code to perform this deployment task for me. It is available at http://yelcho.github.io/sapui5-deployer/ and includes all installation instructions.

 

It does the following

  • Download the Github Archive
  • Remove wrapper subdirectory from archive
  • Minify CSS & Javascript files
  • Build Component-preload.js file where required
  • Recursively perform above steps for any required Github submodules
  • Package up all artifacts into a deployment archive
  • Optionally save deployment archive to file system
  • Deploy to SAP Internet Communications Framework
  • Invalidate the UI5 cache buster

 

Because it is ABAP code I can copy and paste it into my customer's development system myself - especially as I only need to create local objects in $TMP. Usually the only infrastructure change required is configuration of the ICF to support HTTPS connections to GitHub. This is typically a task that any Basis person can do in 15 minutes and does not require a system restart - just a restart of the ICF.

 

Once installed you can choose to manually run a program to deploy the SAPUI5 application or automate the entire process. You may choose to write a ICF handler and allow GitHub to call it directly to trigger updates via GitHub Webhooks. This means opening up HTTP access to that ICF endpoint from outside your firewall perhaps via a SAP Web Dispatcher or other reverse-proxy. An alternative is to have an intermediary system receive the GitHub Webhook call and for it to trigger execution of the deployment code on the ABAP system. Or you could write a batch job to regularly check the SHA-1 hash of the project branch and perform a deployment when it changes. Plenty of options for you to choose between.

 

To give you an idea of how this could work for you I have recorded a short video demonstrating deployment of a simple SAPUI5 application to one of my customer's development system.

 

 

 

Again the project can be found at http://yelcho.github.io/sapui5-deployer/.

The event ran from 13 – 16 April in Berlin and organised by T.A.Cook.  I want to thank them for their tireless work in making the venue and organisation run smoothly.


I started with a micro-forum presentation on the SAP UX Strategy.  There were quite a number of customers attending and I was really encouraged by the quality of the questions.  The second session was a half-day workshop with a group of customers where we discussed how to work on UX improvement.

 

One thing is very clear to me from these sessions: Spend time to listen, think and discuss the SAP UX Strategy.  Then consider how to communicate this within your organisation.

 

From a planning perspective I created this slide purely as a commentary slide.  I want to highlight that there are 3  areas – separate yet connected – that require your thinking, planning and roadmap actions before they are eventually integrated again.

 

Picture1.png

a. NEW: What net New applications (new functionality e.g. SAP Fraud Management) and UX solutions do SAP offer your enterprise?

b. RENEW; ENABLE: What improvements can and should we make to realise business value through improving the current SAP estate?

c. NEW: Take full account of the new future that SAP is creating, based on S4HANA, which integrates applications and analytics with SAP Fiori UX.  Believe me this is a major step forward and with this SAP is creating the future standard of UX for business applications.  How different is this?  Totally, as it now utilises the s-Infinity code line and in the fullness of time will be what standard SAP will be.


The clear implication for SAP customers are that there are 3 states:


1. SAP GUI – The classical and 20 year old experience of SAP > No change in SAP UX.

2. Transition State – Specific UX improvements targeting key roles, and self-service.  This may include utilising the future SAP in parallel e.g. sFin.

Between these two states there will be a continuous movement where new functionality will become available as New, Renew and Enable items.  In addition, New in this context should be seen as Fiori UX solutions on S4HANA.

 

3. Future SAP – In this state the customer utilises mainly Fiori UX (S4HANA).


As with any major transformation programme from SAP, the creation of the future SAP applications and User Experience will be based on our portfolio and roadmap approach.  It is therefore my clear recommendation to you to kick-start the transformation and move from State 1 to State 2.  Waiting on State 3 will result in considerable lost opportunities, value and risks the business and user satisfaction demanded by all.

As my lecture was selected as "lecture of the week" starting with May 18th, you will find the recording of my lecture and information about the latest version of the UI theme designer in this blog.

 

UI theme designer lecture from TechEd Las Vegas'14

 

The UI theme designer is the tool for theming and branding of SAP applications. You can create your custom theme for a wide range of technologies and platforms, such as SAPUI5, SAP Fiori Launchpad, Web Dynpro ABAP, SAP Portal and the SAP NetWeaver Business Client for Desktop.

 

In this lecture you will learn about the purpose of the UI theme designer, and it's major features. You will get to know the themes, platforms and UI technologies that are supported by the UI theme designer. Of course, you will see a lot of demos and finally this blog will give you some technical insights and an outlook.


 

On SCN we bundle the information about the UI theme designer here: UI Theme Designer Developer Center

 

We also monitor the discussion threads in the UI technology community (User Interface Technology). Please make sure to check the "UI theme designer" box in the categories list for your dicussion or blog posts so they can be easily identified as related to UI theme designer.


UI theme designer 1.10 / 1.9


Since last year's TechEd the UI theme designer evolved and lately UI theme designer 1.10 was made available for ABAP and Java, see details here: UI Theme Designer - Version history.

 

At the same time UI theme designer 1.9 was released for SAP HANA Cloud Platform (HCP) for productive use. However there are some restrictions you need to be aware of. We intend to remove them in future. Please see the documentation for details: UI Theme Designer at SAP HANA Cloud Platform

 

On-premise version 1.10 and cloud version 1.9 are basically the same in-spite of platform specific differences.

 

Scenarios for using UI theme designer for SAP HANA Cloud Platform (HCP)

 

The UI theme designer still has no integrated server persistence on SAP HANA Cloud Platform. You can export a theme and import it later again into the UI theme designer. Themes can be temporarily stored in the browser - The use of Chrome is recommended.

 

The exported theme can be imported via SAP Fiori - Demo Cloud Edition or SAP WebIDE as an "HTML5 application".


This "HTML5 application" can be selected in SAP Fiori Cloud's theme manager or used by HTML5 applications by including it as a route into it's neo-app.json.


Please be aware of the fact that an exported theme is bound to a specific SAPUI5 version. Therefore, you will need to hardcode the SAPUI5 version for your application (which is only possible for self-created applications) according to the theme's SAPUI5 version. The UI theme designer will be regularly upgraded for newer SAPUI5 versions so you will be able to upgrade your theme as well (via import/export) and update your used SAPUI5 version.

 

Obviously this is a limitation that is desirable to overcome in future versions.

 

Both scenarios are explained in the documentation.

 

You can use a TRIAL account for a test drive:

  1. SAP HANA Cloud Platform -> Logon / Register -> Accept the terms and conditions
  2. https://themedesigner-themedesigner.dispatcher.hanatrial.ondemand.com/


New features for Expert Theming

 

The newest UI theme designer version comes with some handy tools in the Expert tab which make it easier for you to find the right parameters. This is especially helpful when theming Unified Rendering applications.

 

The first feature is searching for parameters used by CSS classes. You can use the development tools of your browser to find the CSS class which sets the desired property, such as in this example the color for the month text. With the query "css: .<className>" in the filter box all parameters used (and also indirectly used) in rules containing these classes are displayed. By this you can easily find the required parameter.

Searching for CSS Classes.png

There is also an excellent blog from my colleague Barbara that explains the naming of "Unified Rendering" parameters: Theming Web Dynpro ABAP and SAP GUI for HTML: Finding the Relevant Parameters

 

The second new feature is finding out the effects of a parameter on the current screen. For this you can simply click on the parameter name in the Expert tab and it will highlight all usages of the parameter on the screen. If the parameter is not used on the current screen, it will not be highlighted.

 

Highlighting Parameter Usage.png

 


Previews

 

In previous versions it was quite cumbersome to add the same preview pages again and again when you restart the UI theme designer. Now the tool will simply remember the previously selected set of pages, even added URLs.

 

It is also worth mentioning that the UI theme designer got some new preview pages:

 

FLP.pngPurchase Order.png

SAPUI5 Application Previews

  • Fiori Launchpad

UR Application Previews

  • PurchaseOrder
  • Search

 

 

Keep an eye (or better watch) our version history blog to stay in the loop: UI Theme Designer - Version history.

 

Happy Theming,

Uwe

 

@UweKlinger

 

Product Owner

PI UI / UI Theme Designer

SAP SE

I have just returned from the SAPPHIRENOW and ASUG Annual Conference in Orlando where I was fortunate to be part of the Media & Analyst Program for the event.

 

Many others have written about their overall impressions of the conference so I won't go over old ground other than to say it was huge!

 

Whilst there I had several formal and informal chats with Sam Yen - SAP’s Chief Design Officer. Sam is always generous with his time and willing to share his thoughts. He is responsible for SAP’s renewed focus on the user experience that we see delivered through products like Fiori and Personas.

 

If you are interested here are some of my previous blogs that cover - to varying degrees - other conversations with Sam.

 

Changing perception of usability at SAP

Fiori arrives - first impressions and thoughts

What is SAP Fiori? Maybe it's more than you think

 

Coincidentally whilst travelling home I came across a post from Ivana McConnell titled Designers And Developers: No Longer A House Divided. In it McConnell talks about how the roles of Designers and Developers are blurring together and the challenges this presents. She sees this change manifest itself with designers becoming pressured to stay on top of development technologies, and vice versa, and points out that really this is just a symptom of a communication problem between the two groups. Her suggestions include...

 

“...rather than focusing on understanding the mechanics of each other’s work ...,
we should focus on softer skills,…"  - emphasis is Ivana's

 

"We can only become better designers and developers by learning to communicate better with one another."

 

No argument from me. A designer and a developer working well together will produce better results that a designer who also codes or a developer who does the design. We have all seen those wonderful screens produced by developers who think a palette of 256K colours means you should use as many of those colours as possible.


Sam Yen pointed out another challenge - that of how to scale the design piece of work when there are so few designers working with developers? What is the ratio of designers to developers in your organisation? A quick Google search and I found responses that suggested optimum ratios from 1:2 up to about 1:10.


SAP have been focusing on design for a while now and their ratio is at least an order of magnitude higher. I asked a few people from some of the larger system integrators on the SAPPHIRENOW show floor and there was no one claiming better than 1:1000. Most of their standard “development” teams contained no designers at all. We seem to have a problem scaling-up the design piece.


In some respect the SAPUI5/OpenUI5 SDK attempts to address this issue by providing "pre-designed" pieces of the puzzle to help keep developers on the straight and narrow. The SDK contains documentation on a large suite of controls that follow consistent design patterns. It also includes samples that don't just show developers how to code individual controls but also how to use them to build a complete application.

Screen Shot 2015-05-11 at 3.31.04 pm.png


And there is also the Fiori Design Guidelines to help. This includes design stencils that can be used in the Axure tool for creating wireframes and mockups. Well worth a look.

 

Screen Shot 2015-05-11 at 3.33.29 pm.png

 

But the problem of scaling the design piece still needs to be better addressed. SAP have some ideas on this. We can expect to hear more later in the year - perhaps at SAP TechEd.

SAPPHIRE NOW! 2015 is about to begin and it reminds me
of the fact that SAP UX Explorer turns 2 years old.Survey_Promo_Image.png
It was in May 2013 when we launched the Explorer for the first time. Since then we continue to improve the number of topics and features.

 

Now, 2 years later we explain around 200 topics and have expanded the content towards customer UX strategies, methods and approaches. We have produced 21 videos (more to come) that explain several aspects from a holistic view. In addition we have aligned the overall design of the SAP UX Explorer towards SAP’s one digital experience.  Also this year we are going to continue to expand our content and provide new features. Some of these are almost ready to show up in the upcoming weeks and months.

 

To ensure that our enhancements cover especially those concerns for which UX Explorer currently provides no answer, we would like to gather your feedback. If you are a customer or partner and have used SAP UX Explorer more than once you are a perfect candidate for this survey.

 

I would highly appreciate, if you could spent 5 minutes of your time and fill out our satisfaction survey. As soon as we have a good amount of feedback, we are going to provide the results here in SCN.


Thanks in advance for your time and support,

JJ (@JJComment)

For Non-ABAP developers , if you want to practise SAPUI5 , the best way is to use the reference service from odata.org. You can use the Netweaver gateway service consumption system from SAP by requesting for credentials if you are specific on SAP system as backend.

 

Screen Shot 2015-03-30 at 1.28.11 pm.png

 

Build your model using the service URL. Make sure you are using the correct data service version.

 

Screen Shot 2015-03-30 at 1.35.00 pm.png

Use Table to display the products. Use the below link to get more properties on Table element

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.table.Table

Screen Shot 2015-03-30 at 1.37.44 pm.png

Add the UI5 table library in your resources

 

Screen Shot 2015-03-30 at 1.40.44 pm.png

 

Thats how the output looks like:)

Screen Shot 2015-03-30 at 1.43.40 pm.png

IMGP0577.JPG

On March the 12th, we've organized a UX event in Belgium to help our customers understand the SAP roadmap around User Experience, and help them to get on their way. To lure in customers, we invited Andreas Hauser - one of the bigshots at SAP - to perform the keynote.

 

It worked.

 

We've had a really good turn-up of customers, which proves that User Experience in an SAP context is still a very vague topic, and customers still have a lot of questions. Our goal for the event, was to provide practical tips and tricks towards the IT organization on how to support the different technologies and products introduced by SAP.

 

So we set about, showing how typical employees have to work in the SAP system today, using the plain old SAPGui with sometimes, cumbersome transactions that provide an information overload, and not always the information you need.

 

For each of the steps in that scenario, we then dived deeper during separate sessions on how this step could be improved. We positioned the different possibilities according to the target audience, and the available backend software.

 

There's an abundance of solutions available to improve your User Experience, mobilize applications and pimp the front-end, but the main questions still remain.

  • Which solution is the right one?
  • How do we support the technology?

 

So during the event, we explained that there is no "one-size-fits-all" solution. You'll have to mix them depending on the target audience, and the goal of the application. Sometimes Screen Personas may be the answer. Sometimes it may be the Netweaver Business Client, Maybe you need Fiori for some and mobility for others. And in many cases, you may require a mixture of different solutions.

 

So how do you set about introducing these technologies, and supporting them?

For each product or technology, we provided practical tips to make a jumpstart, get ahead of business and buy time for the IT organization to learn these new paradigms.

 

You can review the full report on PuurC or review the presentations and slides on SlideShare

 

IMGP0607.JPG

I’m sure that many of you have seen the curve in the SAP UX Strategy that illustrates the usage of screens and transactions at our customer base. It starts pretty high with transactions that are widely used in SAP’s customer base and ends with a “long tail” of hundreds of thousands of screens and their transactions used by customers throughout the world.

SAPUXStrategy_Curve.png

When you see this picture for the first time, you could be forgiven for thinking that the long tail is not especially important. Depending on the usage profile of your company however, it is anything but.


Of course, SAP does not collect this data to just draw a curve, but to have a lever to prioritize their work and thus improve the user experience for the customer. I can only recommend that you do the same. You need to know your environment and, by implication, you need to be familiar with the usage profile in your company too.



Let’s start with “Why do I need to know what my users are doing?”


I hope you already know that understanding your users, their behavior and their environment is key for you to succeed in providing them with a better user experience. Additionally, knowing the most important transactions helps you to understand where to start. If you are still grappling with the question “why” however,  maybe you could take a look at my blog The eight rules for a good UX improvement project. Alternatively, you could also look into the customer UX strategy topic in the SAP UX Explorer.

 

 

What can I do, once I have created my own curve?


Of course, what we are interested in is not the curve itself but the data behind it. This can be an entry point for embarking on a broader analysis of where your users are. We have recently uploaded two new videos that will hopefully provide you with a few ideas about how to combine your customer specific transaction data with other aspects: How can I identify a good starting point for my UX improvements? Part I and Part II

 

 

The fastest way to get the data we are searching for


I hope you are convinced now that gathering this kind of data makes a lot of sense.


But how can you get it? There are various ways of gathering the information you need. Some of them are pretty old and technical, but have the advantage of being available in your systems and ready to use. Others might require additional software or additional configuration in your environment. In return however, you’ll get very comprehensive data far beyond a simple list of transactions being used.


NOTE: All advantages and disadvantages that I will mention below are collected with the focus on getting the specific data we are searching for. It’s not about rating these tools in general.

 

 

Transaction ST03N (Workload Monitor)

 

Do you know good old transaction ST03N? It’s a very handy tool for analyzing the workload in your systems and identifying the root cause of performance issues. In our case, we only want to use ST03N to find out the number of dialog steps caused by a specific transaction.


Unfortunately, dialog steps are not the best data point for measuring how often transactions are being called. Transaction A might cause many dialog steps while being used for example, while transaction B causes only a few dialog steps. Even if transaction B is called more often, your top list might start with transaction A.


Quick guide to the transaction


Obviously, ST03N is a very powerful tool with a large number of functionalities. As a matter of fact, getting to the information we are searching for requires several steps and/or clicks. Let me roughly describe how to find the data.


  1. Start transaction ST03N and make sure you are in expert mode.
  2. In the upper left pane, search for “workload” and select total (or any individual server)
  3. Double-click on the day, week or month that you want to analyze the data for
  4. You will notice that a new pane appears at the bottom left. Here you need to double-click on “standard”
  5. As the results show up on the right, you need to set the aggregation (above the results) to “application”
  6. You can now select one of the application areas displayed (for example SD)
  7. In the new results, you might need to set the aggregation to “transaction”.
  8. Finally, sort the column “# Steps” to get a sorted list of all transactions in SD


For your convenience, my colleague Marcus Biemueller has created a very informative video about how to identify top transactions using ST03N.


Advantages and disadvantages


+ Comprehensive technical analysis of what’s going on in your system(s) beyond a pure top transactions list.

+ Is already in your ABAP system, so that you can quickly generate a first top transaction list.

+ There is nothing to be activated beforehand. You just need authorization for this transaction.

-  Dialog steps are not necessarily the best indicator to create a top transaction list.

 


Transaction SM20 (Security Audit Log)


SM20 is another pretty classic transaction. It was (and in some places still is) typically used to track security-relevant activities in the system. Of course, we are not interested in all the data and alerts that it might show us. What we are interested in is a tiny side feature that generates a list of the top transactions almost perfectly.


I should stress however that the security log needs to be activated in your system. If it’s activated already, and you have authorization for the transaction, you could give it a try right now. If not, get in touch with your system and/or security administrator. They should be able to activate it for you.


Quick guide to the transaction


  1. Start transaction SM20
  2. Specify timeframe and click “Read AuditLog”
  3. When you receive the results, just go back to the previous screen.
  4. The start screen now indicates that a number of log entries are available
  5. Mark one or multiple of the servers in the left menu and click on the “statistics” tab
  6. Check “transactions” and click “show statistics” at the very top of the screen. (hint: In my test case I noticed that “show statistics” appeared only when I clicked through all other tabs before. So you could give this a try if “show statistics” doesn’t appear)

 

Advantages and disadvantages


+ Is already in your ABAP system, so that you can quickly generate a first top transaction list.

+ Creates an attractive list that provides exactly what we are searching for.

-  Requires the Security Log to be activated in your system

 

 

Alternatives for gathering the information


There are a certain number of other tools available. If these are not already in use at your company, note that a number of pre-conditions have to be met, and configurations performed, before you can use them. As I want to provide a comprehensive overview however, I would still like to mention these.


UPL (Usage and Procedure Logging)

 

As a fairly new tool, the UPL is available in any ABAP-based system and can log all called and executed ABAP units like programs, function modules down to classes, methods and subroutines. It can also be used to evaluate usage of Smartform, Adobe print form and SAPscripts. All with no performance impact on the measured system.


As such, this tool is pretty interesting for custom code management and for us too, as it can report how often specific programs and/or transactions are called. You even can use the SAP Solution Manager system and numerous analytic options provided by its BW.


The UPL How-To-Guide (S-user required) seems to be the best starting point for further investigation.


Process Observer

 

Another option for acquiring the data we are searching could be the Process Observer. This tool adopts a different approach to the other ones I have mentioned. It looks into the processes based on your SAP Business Suite environment, while the other tools look into purely technical activities in the systems. It also needs to be mentioned that its purpose is to optimizing process performance and correctness rather than listing top applications. If you have more of a business background however and want to perform your analysis beyond pure lists of applications and UX, I strongly believe that you should check this out. The best starting point to learn more about it seems to be the blog created by Bernd Schmitt

 

 

I hope you enjoyed this blog, and that I have managed to persuade you check your systems and start compiling your own comprehensive list of information right away!  And please don’t forget to add the additional attributes to your top list as described in the videos How can I identify a good starting point for my UX improvements? Part I and Part II. I’m confident that this will set you on your way to creating a highly valuable set of data for your company.


You have questions or additional recommendations to share? Just post them in the comments section.

 

All the best,

JJ (Twitter: @JJcomment)

SAP is using iRise’s visualization software to provide advanced view of how software projects will look before they get off the ground.

 

irise scenarios

iRise Inc.’s Enterprise Visualization Platform, which is resold as SAP AG’s Application Visualization software, has now been incorporated into SAP’s ASAP methodology. The platform does something beyond mere prototyping, said Emmet B. Keefe III, CEO of iRise. In what he calls “light speed functional prototyping,” developers can create functioning simulations of applications in minutes in front of assembled business people. The simulation can then be iterated on the fly based on their feedback. For example, a fully-functional mobile banking application could be simulated and look and operate almost exactly like the real thing.

There’s also no coding or scripting involved, so non-technical business analysts, who already use Excel, Visio and PowerPoint to write requirements, can use the platform readily, he added. Instead of using mock-ups and screenshots, they can create much more interactive simulations. Through a three-way partnership between architect, analyst and user, “it transforms the communication with the business users and it also transforms the communication with the architects,” said Keefe.

“In a very short amount of time, they can get to a completed simulation where the business says, ‘yeah, that’s exactly what I want it to look like and how I want it to function, and the architect says, ‘yes, that’s feasible. We can do that within the budget and the timeline that we have.”

The advantage of using a visual platform is not only the speed at which projects can be put into action.

 

 

 

iRise has released iRise for SAP Solutions v2.0 that delivers an expanded set of pre-defined visualization content and speeds time to visualization for SAP projects.

iRise gives organizations a unique way to quickly experience proposed changes to a broad range of SAP implementations before configuring or coding. iRise for SAP Solutions v2.0 contains over 100 pre-assembled visualization assets for many types of SAP implementations.

 

Business analysts use iRise to quickly assemble working previews of SAP configurations, integrations, and customizations early in project life cycles to accelerate time to value and reduce risk for mission-critical SAP projects.

 

iRise can be used as a "virtual sandbox" for companies that want to avoid the time and expense required to code SAP sandbox environments to validate business requirements. For companies that already have invested in sandboxes, iRise can be used as an effective tool for identifying gaps between standard SAP and changing business needs. Visualizations can include non-SAP applications, allowing collaboration on the entire extended business process definition such as legacy applications, integrations, and mobile devices.

 

In both cases business analysts use iRise to quickly assemble a working visualization of proposed extensions or customizations that exactly mimic the look, feel, and behavior of the final system that can be tested by business stakeholders, accelerating understanding and driving fast consensus on what to build. iRise for SAP Solutions is a content module that includes a toolkit of generalized SAP solution-based page templates, masters, and styles that are used to accelerate the creation of visualizations.

 

"Companies that run their businesses on SAP now have a powerful way to speed up these projects," stated Emmet B. Keeffe III, CEO and co-founder of iRise. "Visualizing and fully experiencing SAP before implementation is a proven strategy to accelerate time to value for companies of all sizes."

 

A working preview of proposed SAP solutions can now be assembled in a fraction of the time it would take to set up and maintain a sandbox environment or generate paper requirements documents. Business stakeholders can 'test drive' the visualizations on their own or in collaborative meetings that directly involve subject matter experts. Comments can be logged and acted upon quickly, speeding consensus and eliminating confusion on what to build

 

A screenshot of the iRise studio is shown below.

sap irise vis 01

The purpose of the UX Opportunity Assessment is to rapidly identify business value opportunities and likely timescales/effort to achieve.  Typically this process is most useful when it is run in the earlier stages of a UX engagement, well before starting the UX Roadmap stage.  As a result the decision makers are able to form an initial view on whether there is both demand and enough potential value to invest further in a UX initiative.


NB: A UX Opportunity Assessment should not be confused with developing a UX Roadmap.  The latter is a far more rigorous approach to discover, assess and decide on very specific scenarios, end users, solutions and required landscape components.


Another benefit of this process is that it brings Business and IT stakeholders together to collaboratively discuss a topic with value potential for both parties.


The scope of this blog is not to delve into a full borne opportunity assessment programme, but rather to remain focussed on where, when and how to best utilise this within the UX context.


1. When to use the UX Opportunity Assessment?


As mentioned in my discussion in Blog 04 – UX Improvement Framework, the first stage should focus on knowledge and learning.  Within a UX engagement we also refer to this as enablement.


An UX opportunity assessment can work very well as one of the initial activities, even directly after the kick off meeting/workshop.

  • It sets very broad expectations
  • It validates business demand
  • It brings multiple stakeholders together quickly
  • It helps those involved to then better interpret the SAP UX Strategy and what SAP can offer in light of the discovered opportunities which represent a form of end user demand.


Equally, an UX opportunity assessment also works very well if run directly after the enablement stage of a UX engagement.  This assumes a level of commitment from the customer to continue exploring the value that UX improvement offer.  In this approach the opportunity assessment serves to better contextualise the UX Strategy discussions and formulation.

If your organisation has multiple business units/divisions/LoB who typically are on their own SAP instances, then the UX opportunity assessment can be used very effectively to assess each division before setting up a programme.  I regularly see this work well where one division is driving the UX improvement agenda and the other divisions are not sure whether there is sufficient value from their users.

 


2. Who to involve?


Although I have seen this work when primarily owned and driven by IT, it is clear that there is a better outcome when both business and IT participate.  Another key success factor from my experience is that there should be a sponsor with a small steering group who both commission the process and decide on how to move forward once they review the results.


A general list of roles to involve:

  • Business and IT sponsors
  • Business and IT senior management – get coverage of all the key areas
  • Business Process Owners
  • Business Improvement Managers
  • IT Business Partners
  • Solution / Process Architects
  • Enterprise Architects
  • Super Users


3. How to organise the process?


Firstly the process should validate that there is business demand for an opportunity as well as an initial estimate of both the value potential and the effort / timescale required to realise the value.

 

 

As far as techniques to identify opportunities I suggest using multiple in parallel:


i. Senior stakeholder > 1:1 interviews

ii. End users > End user survey

iii. Super Users / Power Users > Small Focus groups

iv. Business Process Owners; Business Improvement Managers; IT business partners; Solution / Process Architects > UX Opportunity Assessment Workshop.  You can also set up a series of workshops that focus on business or process areas.  For these also consider end-to-end scenarios e.g. procure to pay, order to cash etc.

  • At SAP we use the Design Thinking approach with great success
  • Plan the space; the storyboard of what attendees will go through and contribute to; Agree
    how you facilitate the session and capture the outputs


Note: The use of Enterprise Architects depends on how this particular skilful resource is used in your organisation.


4. An example result

 

UX Opp Ass_Funnel.png


In this example you see that we suggest a process with three steps:


(1) Identify – Gather as much input as possible

(2) Assess – What is the Value Potential vs. Time to Value (Quick Wins; Tactical; Strategic?)

(3) Progress – This is about further exploring and validating the opportunity through either Proofs of Concept or Prototypes.  These should mainly be time-boxed (set a time limit) so that this does not become a programme in its own right.  The purpose is to do some validation on the opportunities to mainly determine Value Potential &
Time to Value.  We are not trying to pilot solutions here.

 

In final analysis, the UX opportunity assessment process can be very effective in building up support or momentum for a UX initiative.

Actions

Filter Blog

By author:
By date:
By tag: