1 2 3 4 Previous Next

User Interface Technology

50 Posts

The new key features of Google Chrome version 34 are:

SAP NetWeaver Test Center has been testing Chrome 34 on desktop in combination with NetWeaver versions 7.02, 7.30, 7.31 and 7.40.

For restrictions see the general Chrome general note: 1655306.

     I heard a great quote at the recent HR2014 conference in Orlando. The discussion was around ESS/MSS and how for many employees, that is their only real experience and/or interaction with HR. Therefore, an employee will come to believe ESS/MSS is a reflection of the HR department itself. Although it might offer all the great functionality in the world if ESS/MSS is slow, clunky, difficult to use or feels dated, then guess what? That becomes the employee's general idea of the whole HR department. Now, let's scale that up a bit. If some new hire is sat in front of a SAP "grey screen" and told, "welcome to the company....here's where you will be doing your work...we use SAP", what will be their impression of SAP? What will be their impression of the company they just joined?!?!?!


     It doesn't even have to be some young "kid out of college" out in the working world for the first time. I have heard as many complaints from people that have been working within companies for years..."oh yeh, we are on SAP...I only get on it when I have too...its so ugly". For as many years as I can remember (it gets harder and harder to do so in my "old" age haha), SAP has always seemed more focused on pushing out the latest and greatest, best-of-breed, (insert your buzzword here) functionality and features versus any really innovative or sweeping UI/UX changes...and that makes sense if you were to push the envelope in one but fairly soon after catch the other up too (ie. come back to balance). However, it seems as years passed the gap got wider and wider to the point where the UI/UX side seemed almost forgotten. Well, that is...until now.


     As you may have heard/seen/read, SAP has been trying to make it known by any means necessary that they have not forgotten the UI/UX and in fact, without us "common folk" even knowing it, they have been working behind the scenes to roll out their overall, sweeping vision of "New-Renew-Enable". This will be THE way that SAP totally revamps the old "grey screen" (using "personas"...enable) as well as anything new (new) coming out and anything "in between" (ie. what can be "ported" without disruption...renew). SAP figured out how to finally do it across all of their product landscape. Any and every screen, page, form, etc. will be "updated and future proofed". Sounds absolutely great, right?!?!? ....well, break out those checkbooks, because it comes with a price....and therein, lies the rub...."fly in the ointment"-much? haha


     "What did Chris just say?!!? They are charging for a UI?!?!"....well, in some people's perspective, yes, that is exactly what is going on...and battle lines have been drawn. On one side of course is SAP....justifying charging existing customers for a new UX (often shifting the discussion to the new apps/functionality that is enabled). On the other side, an army of individual voices is leading the charge for a "make it FREE" argument. You might have read the great blog "Should SAP Fiori by Freeori?" ( http://diginomica.com/2014/02/05/sap-fiori-freeori/ ) by John Appleby which might have been one of the earliest (first?) shots fired in this battle. And today, I just read "Time for a UX Revolution, Not Evolution" ( http://www.asugnews.com/article/time-for-a-ux-revolution-not-evolution ) by Geoff Scott (*thanks to Dennis Howlett for leading me to it!). There is definitely a rally cry out there in the world of customers/clients/users and a push back organizing.


     I can really see valid points on BOTH sides of the battle, but these kinds of discussions really make me laugh....more so for the fact that I am now finally old enough to actually have lived through these repeating cycles of technology/IT (rather than the days of hearing some old "greybeard" programmer sharing these stories of the "old days" with me over lunch or in some server room waiting on a SAP install haha). Does SAP really have such a short memory? Do we?!?! Does no one remember the wild west days in the ERP market around the mid/late 1990's? During that time, there had to be....geez, what was it?....about a baker's dozen or so ERP companies ("Baan" anyone? haha) all scratching and clawing to be "king of the hill". But there was one that was trouncing SAP left and right in sales (at least here in the US) simply because it had a very attractive interface that the sales guys could "ooo-and-ahhh" prospective customers with...often using a side-by-side comparison to SAP screens. It had far less functionality and flexibility than SAP, but the spiffy, pretty UI often won the day for JD Edwards. So what did SAP do? How did they react? Well, they stepped up their game too...remember the whole "enjoySAP" initiative to revamp the UI and UX? (*many people might remember this as the SAP Volkswagen contest give-away! haha) Here is a small blurb about it....


The enterprise-wide EnjoySAP initiative, launched by the management board of SAP AG in the beginning of 1998, redirected the focus of our software development from the customer's requirements and placed the spotlight on the requirements of the actual users. The aim of the Enjoy initiative was to improve the user-friendliness of the R/3 software in order to boost productivity and satisfaction ratings of our users and to reduce the total cost of ownership of the R/3 System for our customers. Essential to the success of the initiative were the cross-departmental approach, the development of distributed usability expertise and the specification of a user-oriented procedure model. Another key to EnjoySAP's success was the board's support for the project, reflected in the development resources made available (80% of development capacity in the period from July1998 to April 1999 was dedicated to the initiative).

(*from http://www.sapdesignguild.org/editions/philosophy_articles/hmd_enjoy_usab/) (*my HR/HCM friends will get a kick out of the title of that page too...far ahead of it's time eh? haha)


Sound familiar? haha Are companies like "Workday" the new JD Edwards of the world? You could just as easily replace the word "Enjoy" or "EnjoySAP" in the above paragraph with "Fiori" and it would sound just about like what we are hearing today. Everything old is new again!....except this time, SAP is trying to charge much more for it and the stakes are much higher for adoption/non-adoption in a market controlled by a far smaller number of big players (not to mention the fact that SAP is trying to push into the non-business suite world as well and become a platform player for developers, new web start-ups, existing companies, etc). I think a misstep here could be brutal for SAP if they really wish to be come known as an innovative and technology-leading/advancing company especially in the fickle, trend-sensitive UI/UX world. I am hoping that SAP changes this QUICKLY and rewards it's customers with this new UI/UX for free...personally, I would enjoy SAP much more that way (*see what I did there? haha)....and they can even keep the Volkswagens this time. haha


STEP 01:  Open the smartForms application with Transaction Code ‘SmartFroms’.

STEP 02: Go to the Form Interface and click on the Table Tab and enter the internal table name from the Driver Program (Suppose: ITAB).


STEP 03: Go to the Global Definition and provide the global data. (You need to construct a Structure Type (suppose: ZJOYJIT_LABEL) and a table type (Suppose: ZJOYJIT_STR_MARA) with its line type as the structure type with the fields to be printed in the label.


STEP 04: Go to the initialization tab page in the Global Definition. Enter Input and Output Parameters.




   Input Parameters                                                                      Output Parameters


              I                                                                                                IT_MAIN

           ITAB                                                                                               ITAB





Enter the piece of Code in the Initialization part.


I = 6.


I = I + 6.



STEP 05: Now create 5 New Windows except the Main Window and set the positions of the in the page and resize them in Form Painter.


STEP 06: Set the windows in the Form painter of the page and resize them.



STEP 07: Now, Create a Program line in First Window (Suppose, WINDOW_01).


STEP 08: Write the piece of Code in the Program Lines General Attributes Tab.


STEP 09: Create five texts in the respective five Windows one by one.


STEP 10: In General Attribute tabs of each texts, mention the heading and the fieldnames (Suppose: WA1-MATNR,……., wa1-MTART And for the other windows WA2-MATNR,……., WA5-MTART).
















STEP 11: Go to the Condition Tab Page of the five texts and set the conditions as follows.






STEP 12: Now, in the main Window Create a table.


STEP 13: In the table, go to the Data tab page and set the internal table (Suppose, IT_MAIN INTO WA_MAIN).


STEP 14: Go to the Main Area of the Table and create a Table Line with Line Type: %LTYPE1.


STEP 15: The Output Option tab of the Table line.


STEP 15: Create a text inside the cell of the table and set the headings as well as fields.




STEP 16: Now, create a Command in the main area of the table.


STEP 17: In the general Attribute Tab page, click on the Checkbox “Go to New Page” and Set the Page name (Suppose: %PAGE1) and in the Condition tab page set the ITAB NOT EQUAL TO INITIAL.



Save, Activate and Test the program in the display mode.

STEP 18: Now, go to the SE38 Transaction and write the Driver program to pass the data to the smart form from Mara Table (Suppose: ZJOYJIT_LABEL_DRIVER).


STEP 19: Write the Code in the report program to pass data to the Smart Form.


report  zjoyjit_label_driver.

tables : mara .

data : itab      type     zjoyjit_str_mara ,
type     zjoyjit_label ,
type     rs38l_fnam .

selection-screen : begin of block b1 with frame title t1 .
select-options   : s_matnr for mara-matnr .
selection-screen : end of block b1 .

start-of-selection .

select matnr
from mara
into table itab
where matnr in s_matnr .

formname                 =
*   VARIANT                  = ' '
*   DIRECT_CALL              = ' '
fm_name                  = fname
*   NO_FORM                  = 1
*   NO_FUNCTION_MODULE       = 2
*   OTHERS                   = 3

call function fname
*   ARCHIVE_INDEX              =
*   ARCHIVE_INDEX_TAB          =
*   MAIL_APPL_OBJ              =
*   MAIL_RECIPIENT             =
*   MAIL_SENDER                =
*   OUTPUT_OPTIONS             =
*   USER_SETTINGS              = 'X'
*   JOB_OUTPUT_INFO            =
*   JOB_OUTPUT_OPTIONS         =
itab                       = itab
formatting_error           =
internal_error             =
send_error                 =
user_canceled              =
others                     = 5

STEP 20: Save, Compile, Activate and Run the Program with the printer.









Thanks & Regards,

Joyjit Biswas

First off I'd just like to say that I am delighted that the interview I conducted for SAP TechEd Live 2013 in Las Vegas with Sam Yen (SAP's Global Head of Design and User Experience) has been selected as the interview of the week! It was my first SAP TechEd since 2006 in Amsterdam and my first as a freshly minted SAP Mentor. It was an honour to be asked to facilitate this session with Sam, it was fun and a little daunting to be on the big stage in the centre of the show floor. We had a small technical hitch (that thankfully was only ever to be seen by the live audience) when Sam's microphone didn't work... Take 2! Otherwise it all went great.


In this interview Sam and I cover the following main topics:


  • Sam explains the SAP User Experience strategy (New, Renew and Enable) that covers both new and existing SAP products and applications
  • We talk about Fiori - "What is Fiori?" Sam explains that Fiori is more than just a new colour scheme and some fancy tiles for mobile apps. Fiori as a paradigm is how SAP intends to harmonize the entire user experience across the whole SAP product portfolio both on premise and in the cloud. Fiori can be a bridge to deploying your organizations mobile, cloud  and HANA strategy.
  • Sam describes how SAP has had a steep learning curve and has needed to bring a whole new set of skills into the organization to build these new user experiences for their products. An outcome of this has been that SAP has been asked by customers to come in as consultants and help them build up their own internal capability to deliver "Fiori-like" user experiences.
  • Finally Sam gives some insight into what the future holds (some of which was subsequently announced at SAP TechEd in Amsterdam and Bangalore later in the year).


Here is the full interview, "Creating User Experiences that Drive Innovation for Businesses and Consumers".



I hope you enjoyed the interview. If you have any comments or questions please post them below. If you are interested in keeping up to date with user experience and user interface topics here on SCN I recommend you follow the User Interface Technology space.


In 2014, the SAP TechEd name will be retired and the conference will evolve into an exciting new program called SAP d-code, which will address education, collaboration, and networking for the entire SAP ecosystem of developers and technology professionals, incorporating the best elements of SAP TechEd. I am looking forward to seeing what d-code has to offer, I hope to see you there.



In this post I will describe the UX "laws" that we should take into consideration when designing our user experience.  These "laws" are really more generalized statements based off of research of user behaviors.  As with any law/rule there are always exceptions and non-believers.  I like to think of them as a guidelines.

Fitt's Law


What is it?

A model that tries to predict the time and effort to reach a specified target on the screen.  Generally targets that in the corners of the screens are easier to reach and targets that take up more screen real estate are easier to reach.  Also targets that are closer together make are easier to reach.


How this applies to UI design?

Make sure to place important content in areas of the page which are more easily accessible like the corners.  When designing action buttons make them easy targets by making them bigger.  Place commonly used buttons together.


Everyday application

Re-examine the layouts of your interfaces.  Are important items in easily accessible areas of the screen?  Do you have buttons that are commonly used in different parts of your interface.  Remember you want to help guide the user to what is important and reduce the time it takes for them to get to key pieces of functionality in your interface don't make them scroll across the interface to complete their tasks.


Further Reading?


Fitts's law - Wikipedia, the free encyclopedia

Usability First - Usability Glossary - Fitts' Law | Usability First

Interaction Design — When You Shouldn’t Use Fitts’s Law To Measure User Experience | Smashing UX Design (includes when NOT to use/ perils of Fitt's Law)



Teslers  Law


What is it?

Sometimes referred to Tesler's law of the conservation of complexity states that no matter what we do every application will have some complexity.  No matter how much you invest in the user experience, it will at some level be complex.


How this applies to UI design? / Everyday application

When designing user experiences we inevitably will be faced with many constraints with the big ones being time and resources.  Looking at the bigger picture if it takes a month to build a piece of functionality to reduce the user's process by a minute every day would your company do it?  We can certainly run an analysis to figure out the cost of building the functionality and try to determine if it would be worth pursuing. "Whose time is more important to the success of your business? For mass market sofware, unless you have a sustainable monopoly position, the customer's time has to be more important than your own." - Larry Tesler.  Don't pass off the work to your end user.



Further Reading?

Law of conservation of complexity - Wikipedia, the free encyclopedia

The Law of Conservation of Complexity



Hicks Law


What is it?

The more choices we have the harder it is to make a decision.


How this applies to UI design?

The more features we pack into a single screen the harder it is for a user to understand what the screen is for and where and how to take on that screen.  To increase usability we need to reduce the cognitive load on the user, don't make them think hard.  So when you are building you new Fiori app do not put 20 graphs and charts on their dashboard.  While it might look cool all those charts will make it difficult for your users to focus in on what you want them too.


Everyday application

Re-examine what fields are actually needed on your forms.  Look at your interface are there particular pages with tons of links  Show the screen to someone new who has not used it and ask the what it does can they tell what it is used for?  Or is it cluttered with too much information to denote what the purpose of the page is


Further Reading?





Poka- Yoke Principle

What is it?

Make a process or behavior "error proof".  For example if you are making a shoe make the shoe in the shape of your foot not in the shape of a circle with the diameter roughly equivalent to your foot length, where would the front of the shoe be? 


How this applies to UI design?

When designing UIs get down to the very minimum required to complete the task.  Try to guide the user whenever possible with visual cues, layout cues, and simple process flows.


Everyday application

Re-examine what your interfaces do you have extraneous information?  Try to remove the ability for users to get to error states.  Use real time feedback when possible don't make me submit the form before I see that a field is missing.

Further Reading?

Poka-yoke - Wikipedia, the free encyclopedia

Poka-Yoke | you can’t go wrong | The Toyota System




F-Pattern for reading

What is it?

Almost every user that reads in a "F" pattern starting with the upper left corner.  This applies to left to right languages that are read top to bottom.  There are some changes in the orientation of the "F" for readers who utilize languages that are read right to left


How this applies to UI design?

When designing UIs put the most important piece of interface for the user in the upper left corner as that will most likely be fore the first thing they see.  On the flip side do not put the piece of content you want every user to see in the bottom right hand corner as that will be last thing they read.


Everyday application

Re-examine what your interfaces do you have extraneous information?  Try to remove the ability for users to get to error states.  Use real time feedback when possible don't make me submit the form before I see that a field is missing.

Further Reading?

F-Shaped Pattern For Reading Web Content




Sturgeon's Law

What is it?

90% of everything is crap -lots of applications out there are very difficult to use.


How this applies to UI design?

When designing UIs/processes/ overall user experience think critically.  Its becoming very easy to produce a poor quality product - some even look nice until you use them.  This can also apply to any UX practitioners; focus on only a couple of areas to master there are no UX unicorns our there.  Don't be afraid to bring in additional resources for a singular aspect of a project.  In my personal projects I try to leverage graphic artists whenever possible to produce a better quality product.  Good products come from collaboration across expertise verticals not a lone Interaction Designer/Visual Artist/Front End Developer/Content Strategist/Product Manager/Back End Developer.



Further Reading?

Five Indispensable Skills for UX Mastery

90% of Everything is Crap, and What To Do About It  |  The Discipline of Innovation


There are some more laws/guidelines/principles out there that one could follow so I encourage you to do more research on your own.  (those include but are not limited to Gestalt Principles of Form Perception, Rule of Seven, Parento Principle- 80/20 Rule)


Also remember that UX design is both an art and science.  It is always evolving and changing so don't be afraid to try new things.

Stay tuned for the next part in the series..part 7

Part 1, Part 2, Part 3, Part 4, Part 5

Over the years, user experience has rapidly become a critical component in technology across the enterprises. In today’s changing world where people are highly tech-savvy, users demand ease of use and simplicity in the activities they perform and applications they use.


This teched, SAP announced their “UI and UX Readmap”. SAP is really going aggressively in this area.


What we see in the below diagram from SAP’s “UI and UX Readmap” is  Screen Personas , SAP UI5 and WDA/FPM are now their key UI Technologies”,

SAP‘s Key UI Tools & Technologies : < from SAP TEC149 - SAP UX Strategy and UI Roadmap>

UI Roadmap.gif

However as design architect, it becomes very difficult to pick and choose a right UI technology amongst these options. From all the various discussion forums and Teched documents, I have made an attempt to put all the various features of these three technologies together on a single paper. This might give you a starting point to your thought process while choosing a right UI for your business scenario.

  1. SAPUI5: The UI development toolkit for HTML5. SAPUI5 is a client-side HTML5 and Java Script based rendering library with rich extensible control set and a lightweight programming model. It combines openness and flexibility with enterprise readiness and product standard support. It is extensible regarding custom controls, application services, theming, or custom branding.
  2. Screen Personas: Screen Personas allows customers to personalize their SAPGUI (Dynpro) screens without any programming, allowing them to streamline transactions and improve user productivity. It provides the ability to meet business user needs for rapid screen changes, delivering improved user experience, and increased work efficiency. It is a Silverlight framework over the SAPGUI controls so the screen layout can be completely changed to provide an easy to use user experience.
  3. WDA/FPM : Floorplan Manager (FPM) is a framework for creation of User Interfaces. It is based entirely on Web Dynpro ABAP. FPM supports developers in creation of applications which are compliant to UI and Accessibility Guidelines. FPM is a set of tools, templates and classes, which ensures a more consistent look and feel to the user interfaces of SAP applications.


SAPUI5Screen PersonasWDA/FPM
Development EnvironmentWe use Eclipse as a SDK. The application can be
deployed on any server like ABAP server or Apache server… ,

SAP would also be coming up with a drag and drop, web based SDK soon, which will ease our development efforts.

Browser-based software to personalize SAP GUI screens

Drag-and-drop interface that allows you to see the results immediately.

You can use Web Dynpro ABAP development environment and

Floorplan Manager (FPM) Workbench to develop FPM applications.

Device UsageUI5 apps run on Mobile & Desktop. These are browser based apps and run with almost all the browsers.This is meant for Desktop usage only. Personas run on Windows 8 mobile devices. However, Personas is not designed as a mobile solution as it is.FPM apps are for Desktop usage only however they provide a tablet support with restrictions

Communication between SAPUI5 application and the backend database is done through secure oData services.

SAP Backend system’s business logic is exposed as oData services using SAP Netweaver Gateway as a middleware.

Personas is part of the NetWeaver ABAP stack. It is loaded into the ECC server.It is completely browser-based tool.

Personas 2.0 includes two separate Personas components, one based on Silverlight and one based on HTML Once installed, Personas Silverlight and Personas HTML run independently and do not interact. They solve different problems in different use cases.

Floorplan Manager (FPM) is a UI framework, that is, a set of tools, templates and classes.

FPM is based on Web Dynpro for ABAP and takes full advantage of its configuration framework. In an FPM application, the business logic is separated from the UI. The developers of an application take care of the business logic, and the FPM framework takes care of the user

Backend AccessSAPUI5 consumes oDATA services and thus this can be used as a frontend for any SAP / Non-SAP Backend database.Screen Persona’s are meant for ECC transactions and thus closely work with conventional ECC systems. They do not work with SAP CRM, SRM, PLM, SRM… systems and not with any other Non-SAP systems.WDA FPM is closely connected with SAP and works only for all SAP stacks.
Developer Skillset required

To build SAPUI5 apps , you should have knowledge of Java Script,
HTML 5,   CSS3. You should also need to know HTTP, LESS,    jQuery and Gateway   oData.

Building screens in SAP Screen Personas is fairly easy. It is mostly drag and drop along with some point and click. You do not need any HTML, Java,
or ABAP skills. This is more of end user tool to personalize their screens.
To build FPM apps , you should have knowledge of FPM, ABAP OO, WebDynpro
Theming and BrandingSupports theming and branding using SAP Theme Designer.Supports theming and branding using SAP Theme Designer.Supports theming and branding using SAP Theme Designer.
Backend Coupling Fully Decoupled. To adapt your application UIs without jeopardizing the
integrity of the business logic, SAPUI5 decouples the business logic from the
user interfaces, even across platforms and business process lifecycles (
software principle
This is Just a simplified subset view of big and complex SAP Transactions. Tightly Coupled with Backed ECC.

WDA/FPM provides Timeless software approach , as it separates the business logic and UI. Service Provider Infrastructure (SPI) is used by many applications to decouple UI and backend.

Integration with other UIs

The framework is lightweight and easy to consume, so that you can combine SAPUI5 apps easily with 3rd-party JS libraries to design an HTML page and integrate it into various application frameworks or server platforms.

Thus SAPUI5 apps can be called from any other SAP / Non SAP Web application.

We have a feature called  shortlink that allows you to place a Personas screen into another browser-based application (e.g an iView). Shortlinks also allow integration of Personas screens into NWBC. Clicking/opening such a short link is what opens a connection to the target system and authentication is required.

FPM apps can be integrated with other UIS like Portal , another SAPUI5 application.

SAPUI5 provides lot of security features like Data Protection and Privacy, Browser Security, Cross-Site-Scripting, encrypted connections and session handling on top of using either cookies or URL rewriting .

Check SAPUI5 seuirity guide for more informtion.

Personas supports certificate based login. Personas also support security authenticaion to the ECC backend. As Personas sits on top of existing SAP transactions, ECC roles are used in Personas and Personas cannot bypass ECC security.

Check SAP's security guide for screen Personas.

Security functions are available both for when you create Web applications as well as for when you operate them.

Check SAP's security guide for WDA / FPM


  Quick points that we might think for before Choosing the UI/UX option : .


Business scenarios to be covered by the application.

SAP UI5 is meant for lightweight apps having few screen fields and less navigations. Good Example of SAP UI5 application is SAP Fiori. With SAP Fiori, SAP offers UI applications for the most frequently used Business Suite transactions to allow users the same experience across different interaction channels – desktop, tablet, mobile. Fiori is intended to address core processes that invoke the most commonly-used transactions. Use for the business scenarios with limited transactional character.

Screen personas is ideal if you have working SAP transactions in your existing business and you want to improve look and feel of these transactions and make the transaction screens easy with only required fields on the screen. (like skip pages, carry values over, combine tabs etc)

The Floorplan Manager provides a highly-configurable framework for easy and efficient application development and adaptation. FPM is now mandatory
for the creation of most user interfaces in the Business Suite applications. It is a key technology for SAP Business Suite.

Use FPM if you want SAPGUI robustness with tight ABAP Integration. FPM applications are best suited for transactional state-ful applications.


If your business wants to address modification in common/ daily used transactions, then SAPUI5 apps (e.g. Fiori) will probably be a best choice for you. However, If you want to use more specialized SAP transaction with tight coupling with ECC, then Personas or WDA FPM are the right solution.


The device range for the application

Screen personas and FPM applications work only for desktop however if you want web responsive application across variety of devices like desktop , tablet , smart phones then SAP UI5 is the ideal option.


Browser  support

Screen personas and FPM works with almost all the browsers however SAPUI5 have certain limitations like it does not go with browsers with lower version like IE8 and below… If you already have such lower browsers running, then you have to take a call of choosing UI.


Complexity of the application

SAPUI5 applications and WDW/FPM applications do require coding.

As FPM apps are fully transactional stateful apps they are good choice for large and complex apps like Order to Cash, Talent Management, Procurement, (PLM) Product Development where the demand is to cover full business cycle with lot of screens and lot of fields per screen. The apps may have lot of navigations and links.

SAPUI5 apps are lightweight aps and complexity should not be too much. Use UI5 for lightweight scenario based small apps with less navigations and limited transactional flow.

Screen Personas is a drag and drop, no programming approach. This can be used only for ECC transactions. You really don’t touch the conventional transaction logic rather you only change the look and feel of the transaction screen. What you can't do with Personas is to change the screen flow across transactions or the embedded business logic. You can hide tabs, skip screens within a transaction and pass data between transactions. Personas allows you to modify classic ERP (Dynpro) to improve your users’ productivity by combining tabs and screens, automating keystrokes, and pre-filling fields.


With this what We can say is , None of these technologies are replacement to others.However we have to think deep before choosing a right option. Business might also choose multiple options running parallel for their different business scenarios.These technologies are rather complementary to each other and have their own distinct use cases where they excel .


Finally to add , while choosing the UI/UX we can also think for below checklist :

  • Does a new UI/UX allow my business process to be more efficient ?
  • Will the productivity of employees and users going to be improved by implementing this technology?
  • Are we able to find the numbers for this efficiency increase? For e.g. Can I calculate the total time reduced by the end user in performing certain transactions after implementing this UI/UX.
  • Will a new UI/UX allow the right business process to be followed ?
  • Does the UI/UX helping me to reduce time for user training ?
  • Will the new UI/UX reduce the number of clicks, tabs that user has to navigate?
  • Does the new UI/UX helping me to increase Data Entry Compliancy?


These are the few points that I have thought of …the checklist can grow bigger… However I trust with this checklist in mind we can definitely succeed in providing right UI solution to the business.

<References : SAP SCN Discussion Forums

TEC149_v3 : SAP UX Strategy and UI Roadmap>

Following the successful launch of Fiori 1.0 in May 2013, we now have the “Wave 2” apps which extends the Fiori family from 25 apps to 206 apps.


Wave 2 is now officially called “SAP Fiori for SAP Business Suite 7 Innovations 2013” and Wave 1 is called “SAP Fiori for Releases prior to SAP Business Suite 7 Innovations 2013” – I’m going to stick to Wave 1 and Wave 2 in this blog to keep the length down J


At the time of writing the experience.sap.com/fiori site has not been updated with the new portfolio (sure it will catch up). The best place to see a full list seems to be here.


So what is new in Wave 2 ?


New Apps


We now have content for ERP, SRM CRM, SNC, GRC, PPM (Wave 1 was only ERP and SRM).  SAP have also introduced the concept of application types. 3 Types of Application exist at the moment – Transactional (53), Fact Sheet  (69) and Analytical (84). The fact sheets require Business Suite on SAP HANA and the Analytical Apps require SAP HANA Live for Business Suite – more information can be seen here on the architecture. The picture below shows the recommended architecture if you were to run all 206 apps.


Screen Shot 2013-12-10 at 09.49.04.png


Enhanced LaunchPad


We now have an enhanced Fiori LaunchPad which allows for more personalisation  like favourites, groups and search. It seems to be evolving to offer a transactional alternative to SAP Portal and/or NWBC. You can see more information here. The picture below shows an example of this personalisation.


Screen Shot 2013-12-10 at 09.32.46.png


Enhanced Extension Guidelines


You can now extend Fiori apps in a modification free way, so that your modifications and the SAP standard UI are merged at run-time. You can get more information on this topic here.  The picture below shows the extension concept fot the UI components.


Screen Shot 2013-12-10 at 10.32.11.png



In summary, the SAP Fiori team have put a huge investment into this wave adding both content and architectural components that in my opinion mean that Fiori is now at a critical mass to be actively considered by anyone running Business Suite 7. It might be the catalyst to justify the upgrade to SAP Business Suite 7 Innovations 2013, run your Business Suite on SAP HANA and/or install SAP HANA Live for Business Suite.


The only way you will know will be to review the Fiori apps, figure out which ones add immediate value, figure out which one need to be enhanced and figure out what Fiori Style Apps you need to fill the gaps. This will give you your Fiori to do list which will drive your business case for adoption.


Well done Fiori Team.

Save the Date

As SAP's most awaited event, SAP TechEd, is around the corner and many of you plan to be present in Bangalore for this event, Incture is co-hosting a 2 hour workshop on SAP Ux on Tuesday, 10th of December.
Date: 10th December 2013
Time: 2.30 pm - 4.30 pm
@ Hoysala Auditorium,
Incture Technologies
STPI, 6th Floor Cyberpark,
Electronic City, Phase 1
Bangalore 560100

SAP and Incture Technologies invites you to join - "Creating consumer grade user experience through Smart Apps on SAP"

Who should join:
If you are an SAP customer, partner or an SAP professional interested in providing consumer grade experience to SAP users, this event is right for you so please read on!

What to expect in this interactive and engaging workshop:
  1. SAP UI Strategy and Roadmap - Michael Falk, Product Strategist and UX Evangelist at SAP Germany
  2. Smart Process Apps are The Future of Applications - CIO's are getting to realize that's the way to spend all their new IT project investments - Sachin Verma, Founder and CEO of Incture Technologies.
  3. Smart Apps on SAP - Customer show cases by Incture Technologies and Customers
Please register .....registration link

We look forward to meeting you there!
Thanks for your time in advance,


Let us know if you have any questions and please share this with anyone who may be interested. Any queries can be directed to -

A.K. Balan
Head, Talent Transformation
Incture Technologies
Cell # (91) 9008188400

In this post I am going to dive into Usability testing.  This post is aimed at towards an introduction to usability testing and is not meant to be a full on how to (note to self write another series on usability testing alone).  Ideally we will have created a high fidelity prototype of our design using Axure or some other prototyping tool.  While you can directly code a prototype I would say 95% of the time Axure (or your preferred prototyping tool) will be quicker to build especially when it comes to making changes.


Usability testing is a method by which we test users to see if our product functions for them.  During a test we will have a list of tasks for the user/subject to complete while observers watch, take notes, and listen.  According to Jared Spool (prominent UX research and lecturer) and UIE most failed designs are caused by a lack of information.  We conduct these test to gather information on our designs.

Usability testing should be done with specific goals in mind.  These goals should be directly reflective of the goals for the entire project that you set at the beginning of the project.  For instance if you creating more orders is the goal of the project it should be easy for the test user to create an order.  After testing you should be able to reasonably conclude if you design is going to meet the goals of the project.  Here is a quick very high level run down of the steps involved when conducting a usability test:


1.) Script/Planning - Develop a script for your test.  These script should have an introduction, a quick think aloud explanation, tests, and a conclusion.  Remember write your script around the activities you would like to test not just the entire system.   Also note that we what to not only see everything the user does but we would like to hear what they are thinking for this we can use the think aloud protocol.  We ask the test subject to act as if they have no inner monologue.  Here is a great article explaining think aloud protocol.  I find that having the user practice think aloud with a piece of candy tends to beneficial to both introduce the subject to thinking aloud and helping them let down their guard and be more open.


2.) Logistics - Determine how many users you are going to test.  Where are they coming from? Off-site? On-Site? Are you going to compensate them?  Nail down all the logistics of the test well ahead time.  Make sure to send reminders to your test users at least several weeks in advance.  Determine if you would like to use Morae or another piece of software to record the test.  Who will be conducting and observing the test.  Also make sure you get users that are in your target user group.


3.) Conduct the test - Conduct the test. Make sure to remind the user nothing they can do is wrong!  Also remember that they might have difficulty completing a task, let them struggle a bit and ask them what they are looking for.  This will give you vital information into solving the issue.  However you must walk a fine line between letting them struggle and getting frustrated don't be afraid to show the user where something is at if you notice they are getting frustrated.


4.) Analyze - After the test analyze your results.  How long did it take to complete tasks?  Was the user frustrated?  What worked what didn't work?  Here is a good article about usability test reports.  You can use this analysis to help you decide what the next steps should be.  Was the test successful?  Should we move forward or were their issue that we need to address before moving forward?


Bottom line usability testing is a very vital tool/method that can save money.  Using usability testing we can prove with a high degree of certainty that our design will meet the goals of the project.  Why spend a lot of money building a piece of functionality and then testing it if we can test it before using high fidelity prototypes built with Axure or some other tool.  Now I am not saying we can not test already built pieces of functionality.  Testing already built functionality will give us great insights into the pain points of our users.


Finally, if you are Jared Spool reading this I love the UIE blog and podcast UIE Brain Sparks.

Links to usability testing resources

Great Intro to usability testing

Planning a usability test

Comparison of Usability Testing Tools



Stay tuned for Part 6... Interaction Design Laws (well sorta laws)


Part 1, Part 2, Part 3, Part 4

To recap, we are in the design phase.  We have all of our research from our analysis.  We know what different about the different fidelity levels of prototyping.  Now we are putting 'pen to paper' and trying to address the design problems we have identified.  Many times people will ask 'How did you come up with that?' or have trouble with coming up with ideas to address design problems.  In this post I am going to describe some ideation techniques that anyone can use to address design problems.  (Ideation is just a fancy word for brainstorming)


Start Drawing

Start drawing your ideas on paper no matter how far fetched they are.  Draw lots of them too, don't stop at 2 or 3.  Surround yourself with these drawings and iterate, iterate, iterate.


Cross Industry

Look at other industry solutions or try to find design problems similar to the one you are addressing no matter the industry.  How did they address it?  Can we leverage any patterns they used?


Take a walk

There have been many studies conducted that prove stepping away from a problem and doing some exercise helps clear your mind which ultimately will (hopefully) lead to some clearer thoughts.  Or perhaps an 'aha' moment during your mental break.


Worst Idea

While this might seem counter-productive at first it is rather helpful.  Come up with the worst possible solution then determine why its so bad and start iterating on it.  These technique works especially well in group design sessions where people have a tough time making a decision.  Next time you go out to lunch with a group who has a tough time making a decision on where to go offer a suggestion of McDonalds and see what happens; magically those who can not make a decision will have some alternatives.


Problem Space Mapping

This technique involves categorizing ideas across 2+ plane space.  Lets look an designing a solution for insurance agents.  We could map the problem space on a 2-d plane.  We can on each axis put a single category/type/attribute, for instance the x-axis  might represent a more sales orientated approach while the y-axis might an agent focused approach.  We can map our ideas on this 2-d plane along the x and y axis based off of the characteristics then we can visually see what part of the idea space we have not explored.  Even though some spaces might not seem fruitful at first the change in direction can often be helpful and lead to new inspiration.


Pattern libraries

There are lots of wonderful UI pattern library resources available for free (http://ui-patterns.com/ , http://patterntap.com/ , http://inspired-ui.com/ , http://developer.yahoo.com/ypatterns/) .  Many times just going to these sites and exploring common patterns will lead you to sites you would have never visited before.  Exploring these sites often provide inspiration which can lead to new solutions for your design problems.


There are many more techniques one could use other than the ones I mentioned (here is a great paper on 12 different techniques),  no matter which technique or combination of techniques you use iteration is the key.  Iterate on each of your designs several times.


Feel free to comment on techniques that you have used which worked for you.


Stay tuned for Part 5... usability testing


Part 1, Part 2, Part 3

Before we do a deep dive into all the various things that go into design, I want to first talk about different types of prototyping.  One of my favorite activities when designing is prototyping.  That's when things start to get interesting.   There are three main categories of prototyping:  low, medium, and high fidelity prototyping.  Fidelity refers to the level of detail and completeness.  So low fidelity generally has no visual design and little-to-no details.  Generally we start with low fidelity and evolve into high fidelity.


Low Fidelity Prototyping

This should be done first.  Here you want to gather the main pieces of content on each page and try to establish a base page flow (i.e. Home Page -> Catalog Page -> Order Page -> Confirmation).  You should have no visual design at this point nor should you have any detailed content.  It should feel like a sketch, in fact it can be a sketch.  One of the techniques we have found very helpful in this stage is using giant sheets of paper to form a page.  Then within the giant page use 8.5x11 sheets to write a single word representing a content section.  You might then put multiple 8.5x11 sheets, each for the different content, on the larger page.  When you need a new page, grab another giant piece of paper.  If you want to get really creative for visual effect, you can use strings to show links between pages.  This technique is commonly referred to as paper prototyping.  Some folks will do paper prototyping at the medium fidelity level too, however we prefer not to use paper when making medium fidelity prototypes as you can easily get caught up in making everything more visually appealing.



Medium Fidelity Prototyping

During this stage of prototyping you are going to fill in all the content and starting linking the pages together.  Here you should begin to finalize your information architecture, or the page structure of your site.  I could write a whole series about information architecture, but for now check out this link.  Most people refer to medium fidelity prototyping as wireframing.  Your pages will look similar to architectural drawings of a house.  You will have your content in place, however you will have place holders for visual elements.  Also you should start building the interactions within the pages; expand collapse, drag and drop, hover effects, etc.  SmashingMagazine has a great article that lists lots of wireframing resources here.  You should also add in delighters at this stage of prototyping.  Delighters is a term coined by the Kano Model which are unexpected things where we try to delight the customer.  While we should aim to meet our users needs and wants, here we can stretch our creative legs and really push for some wild or the "wouldn't that be cool if" features.  I encourage you to do this when creating medium fidelity prototyping.


High Fidelity Prototyping

Now we have our medium fidelity prototypes which include content, some interactions, and navigation we can start to add the final touches.  This includes adding in the visual design, remaining interactions, any minor content updates, and finish any delighters.  We want to keep the visual design and aesthetics until last, otherwise you will get caught in a cycle of which blue looks best.  The majority of the design work should be spent on solving design problems not on aesthetics.  Don't get me wrong choosing aesthetics can help and hurt the overall user experience, especially when it comes to using grays on links.  In general (not 100% of the time) a great design will still be great even without colors.  Look at your designs, if you removed all the visual design would it still function?  Could you still use it if you only had access to black and white or just gray scale?


High Fidelity prototypes should mimic very closely what the real system would look and feel like.  It should not mimic every function but only the ones you set out to prototype.  One very important thing to note here is that the prototype should be all smoke and mirrors; it should not be connected to any backend systems.  Why you ask?  Connecting to any backend system takes time and resources.  Then if you need to correct any data you need to do it in the backend which depending on your organization's setup could take time. UX prototypes are meant to prototype and validate the user experience not the technology.  The prototyping tools I mention below help facilitate creating UX prototypes.


Prototyping Tools

There are a variety of tools available now to do prototyping.  Some of the major players are Axure, iRise, Balsamiq, and Just In Mind.  At User Euphoria we prefer to use Axure, however I encourage you to examine them all and determine which one will fit your needs.  (Spoiler Alert - at the end of this series I will be posting one of our Axure template projects)


Why is Prototyping so important

Most people have hear the old saying "A picture is worth 1000 words".  Well it is probably worth at least 10,000 in software development.  Prototyping allows all parties involved to get on the same page.  We at User Euphoria even take it a step further and suggest running usability tests with prototypes.  By doing this we can validate our designs and verify that we addressed the users needs and wants.


Stay tuned for Part 4...Ideation


Part 1, Part 2

Over the next several posts I will discuss the process we follow. While its different than design thinking, its also very similar.  We use the following process:


Plan -> Analyze -> Design -> Build -> Test -> Validate




Here we define what the scope of the project is.  What are the goals of the project?  What is the timeline?  What are the expected deliverables?  Many times during this phase we here the phrase "We need a better user experience for our customers".  This is a very vast and vague statement; do you want a better user experience online placing orders?  Receiving support online?  Viewing an online catalog?  In order to be successful you need to narrow down the goals of the projects.  Let's look at that original statement "We need a better user experience for our customers", why do you need a better user experience?  Are you losing customers to a competitor?  Do you need a better experience to facilitate more orders?  To have less errors?  More productivity?  Asking these why questions will help you get to the real goal of the project. 



Here we gather data in regards to our design problem.  We can use a variety of techniques to help us gather insights and analyze user behavior before we start to design.  Here is a list of some of the techniques we use:


Ethnography - we study the user in their natural environment and try to capture social meaning and ordinary activities.  Go to the user! You can learn a lot by being in their environment is it noisy? cluttered? friendly? stressful?


Contextual Inquiry - we think of a contextual inquiry as an internship with your user.  You want to go sit down with them and understand there day to day life.  Which processes do they use, which tools, and why do they do the things they do.  Just remember keeping asking 'why' questions can lead to a frustrated subject, sometimes its better to play that apprenticeship role and ask them to teach you how to do something.


Persona Creation - personas are a fictional representation of a user group based off of quantitative and qualitative research about an user group.  If you have multiple target user groups you should have a persona to represent each group.  Give them a name, i.e. 'Bob Smith'  Give them a bio!  Personas should be used throughout the process as a reference.  When working thru a design go back to your persona and think how would 'Bob' use this.  I have even heard of some companies making baseball cards of their various personas.


Along with the techniques mentioned above you can use user surveys, site analytics, and focus groups.  Just remember the goal in this stage is not to design a solution but to gather data on your user and their needs and wants.


Stay tuned for part 3 where we will discuss Design, more specifically low, medium, and high fidelity prototypes.


Part 1

In his demos during the keynote at the TechEd in Las Vegas, Sam Yen (Global Head of Design and User Experience at SAP) presented various Fiori apps as well as a Fiori cockpit based on a MRP-related scenario.




This cockpit  can also be depicted as a role-based personalizable launchpad / container for individual Fiori apps [SOURCE].


Here is another example of a Fiori cockpit:




As I viewed the MRP cockpit during the Keynote, I was struck by how much it reminded me of a portal with its personalized collection of applications.


This demo also reminded me of my recent blog about cloud scenarios for Fiori and Fiori-like applications in which I focused on the ability to create Fiori-like apps using various cloud-related technologies. Yet, this analysis focused on isolated apps – I had failed to depict how a user might interact with multiple apps in a logical fashion that reflected their particular role. 


I combined both thoughts and asked myself – were there options in the cloud that would provide the foundation for a launchpad for Fiori-like apps?


The obvious answer was the HANA Cloud Portal - it could bring together Fiori and Fiori-like apps from different sources.




The end-user really doesn’t care where the Fiori apps are based – more important is their relevance to the individual’s particular role. The HANA Cloud Portal could easily meet this requirement.


Although Fiori apps usually aren’t connected with OpenSocial, the associated user experience and their ease of usage within the HANA Cloud Portal would be enhanced if OpenSocial support was provided in such apps.  The fact that HANA XS supports OpenSocial might make this especially relevant for scenarios in which this platform was used as the development environment for such apps. Furthermore, OpenSocial would also allow Fiori-like apps in a Fiori launchpad to interact with one another.

I was fortunate enough to be invited to participate in the Bloggers Program at SAP TechEd in Las Vegas last week.


Among lots of interesting topics Fiori was one of the most discussed and debated. In fact a repeat of a 2 hour hands-on session scheduled on the Friday morning was filled to overflowing - quite an achievement when you consider many delegates choose to start their trip home on Thursday evening or Friday morning.


When the term “Fiori” comes up most people think about the 25 apps that were delivered as part of  what is now called “Fiori Wave 1” or of the distinctive look and feel of these Fiori apps themselves. *Fiori Wave 2 will arrive soon to be followed by Wave 3, etc.



But Fiori means more than that. It is a fundamental change to the way SAP are looking at delivering user experiences across much of the SAP product portfolio and it is also more than a few CSS style sheets and some Javascript.


Along with the Fiori look and feel comes something I have heard described as the “Fiori style” or “Fiori approach”.


In a recent discussion with Sam Yen, the global head of design and user experience at SAP, and Adi Kavaler, the SAP Product Manager responsible for Fiori, they referred to the "Fiori Design Principles". These principles are being applied to all the new Fiori apps that are currently under development - look for announcements soon.

Screen Shot 2013-10-29 at 7.26.35 pm.png


The above slide I lifted from the SAP TechEd handouts comes close to capturing the details of this discussion - or at least most closely relates to my notes.


Not surprisingly the first of these design principles is that the screens should support all device types, screen sizes, form factors, versions and channels. Of course implicit in this is a "mobile first" principle as well. This means "responsive" design where a single code base produces a client experience that adjusts to best support the device characteristics. For example a tabular display should not be wider than the device width so the user does not have to scroll horizontally. So using responsive design techniques less important columns can be suppressed or rendered across multiple lines based upon the available screen width. This is a feature that is delivered as part of the mobile controls delivered in the SAPUI5 library. For a SAPUI5 working example go here and start resizing your browser window to see how the layout adjusts in response to the changing screen width.


Another design principle is to break a business function down into small independent pieces and build a UX for each piece. That is in stark contrast to how SAP have traditionally built Dynpro transaction screens - and Web Dynpro screen as well for that matter.


Take the example of the transactions for working with purchase orders in ERP. Sure there are different transaction codes for create, display and change of a PO - but they are really the same program with different entry points. SAP built a monolithic program for everyone who might need to touch a purchase order - a classic example of code reuse contributing to end user confusion. Because the PO transaction screens allow you to do absolutely anything you ever wanted to do with a PO it is a mass of different navigation areas, toolbars, menus, tab strips, drop downs, tables, etc. It is a screen that no one could navigate without at least some training - probably quite a lot.

Screen Shot 2013-10-29 at 7.18.46 pm.png


The Fiori Design Principles call for a much more focused user experience targeted at a single role and user. This means that each app is designed with much more conservative and practical goals and does not aim to be all things to all people.


SAP advocate a design principle known as 1-1-3 (“one one three”). This means each screen should be designed with a single user (or role) in mind, a single task that this user wants to accomplish, and a maximum of three levels of navigation to perform this task.


Another design principle is that the apps should all have consistent look and feel, navigation principles, etc. So, for example, if we decide that clicking on a header record should navigate directly to the item records then we implement this feature identically everywhere so the users intuitively know how to drill down to item level in every app. This is what is described in the above slide as "coherence".


And finally the apps should be able to be delivered quickly and easily to provide instant value and the lowest possible barriers to adoption. SAP primarily achieve this by using NetWeaver Gateway to publish lightweight web services at the backend and the SAPUI5 libraries to build the user interfaces that consume these services. Both these technologies are readily available for the vast majority of existing SAP customers. I don't know how far back the SAP Fiori apps will successfully run on older versions of Business Suite, but the SAPUI5 library and NetWeaver Gateway technology are available to all customers.


I can’t argue with any of these design principles - after all they are pretty close to the same UI design principles I have been advocating and implementing for many years. On top of that I can take the SAPUI5 libraries and construct my own apps using the Fiori look and feel and add them to the Fiori Launchpad.


IMO - all good stuff.

As one of the few SAP UX consultants working for the only SAP UX specialist consulting company (at least that I know of - if you work for one message me I would love to here from you), I have heard a lot about UX from SAP during the course of TechEd this year. However no one has yet to go into the real nuts and bolts or practical applications...how can I implement "design thinking" / ux process in my organzation?  Seeing this need I have decided to write a blog series about real life SAP UX process and how we at User Euphoria work. This will include the process we follow, the tools we use, the user experience "laws" we follow (yes they are "laws"... well, really some basic observation of human behaviors) and finally some documents that you can use as templates to help get the UX process off the ground .


Here is a quick preview of some of the content I will be sharing:



Hicks Law


What is it?

The more choices we have the harder it is to make a decision


How this applies to UI design?

The more features we pack into a single screen the harder it is for a user to understand what the screen is for and where and how to take on that screen.  To increase usability we need to reduce the cognitive load on the user, don't make them think hard. 


Everyday application

Re-examine what fields are actually needed on your forms.  Look at your interface are there particular pages with tons of links  Show the screen to someone new who has not used it and ask the what it does can they tell what it is used for?  Or is it cluttered with too much information to denote what the purpose of the page is


Further Reading?





Stay tuned for Part 2


Filter Blog

By author:
By date:
By tag: