What Does SAP UX Strategy Means To You?

Long I have been talking about User Experience and importance of adopting modern design thinking for SAP Applications. My voice isn’t just an echo of what SAP has been promoting, in fact, I have been talking about usability and its importance in SAP Applications long before SAPUI, SAP UX Strategy, and SAP Fiori were announced publically. SAP’s stance of UX and design innovation is reassurance of the trend.

Why Do We Need a UX Strategy?

More than 80% of the SAP Screens that people use today are designed using a technology that was in use in 1992. That is good 14 years old! SAP always had an idea that consumer applications and its user experience is something that is changing the way people interact with a software or a website at home. For e.g. Imagine Facebook designed in old SAP R/3 or SAP Portal or even JSP Pages. Would you spend as much time on Facebook as you do currently? Answer is straight no. When it comes to business, people have no choice but use whatever available and we SAP developers help a bit to improve user experience of SAP Applications. That said, an user would never like to spend his leisure time at home on an SAP Screen ever and SAP always knew this. Just that we were not aware that SAP was closely listening and monitoring this change.

So, at this moment, we work with SAP Screens that has its base technology designed in 1992 and when we go home, we use consumer software that provide superior user experience. Such consumer software makes our life easy. To fill the gap between different user experience at work and at home, SAP finally decided to work on UX Strategy that would provide a seamless user experience and more important, that would make you enjoy working with SAP Screens.

Why is SAP Always Late?

This was the question I used to think and a lot of Non-SAP UI developers would ask me. Why SAP adopts a particular UI technology when it has passed its peak? Why is SAP so late in adopting new technology that we do in web design or web application design? I only got the answer recently.

SAP estimates that currently there are more than 400,000 supported SAP Screens in use. Now that is a huge number. If tomorrow I appoint you as the CEO of SAP and give complete freedom to change SAP Screens, would be able to do that? 400,000 screens! Think again!

This was the reason SAP released over 20 new technologies that would modernize the user experience at least a bit. For e.g. SAP released Visual Composer which definitely offered better user experience over simple JSP. Then there was WebDynpro for ABAP. For a while SAP thought that it finally found a solution and started moving everything onto SAP ABAP. A lot of business packages were moved from JAVA to ABAP. Then there was Ajax and SAP Portal 7.3, SAP Portal Mobile edition, SAP Portal On-Device and many more. All these technologies were introduced so that you can enhance user experience in whatever limited way possible. A lot of products came in between – SAP AjaxWeaver, SAP Mobile Infrastructure, and SAP SUP and so on.

Is UI5 Just Another Technology Then?

No! At least it looks like. SAP thinks that only after launch of HTML5, it has found a solution to bring all of its screens to one common design principle and unify the UI technology. SAP thinks that HTML5 offers stable platform for it to move its products to HTML5 and therefore, UI5 is here to stay. Not only to stay, but revolutionize the way SAP screens are developed and this is going this change our life. Please note that I am not talking simply in context of SAP Portal consultants, but this change is going to affect every damn SAP developer for good.

New, Renew, Enable

I wrote a post earlier – What is SAP UX Strategy?  and I also briefly mentioned what exactly these terms mean to an SAP Consultant. However, I must accept that I did not clearly understand then what this strategy exactly would mean to a client who is planning to adopt latest SAP Products such as HANA Cloud, Fiori, or UI5.

New – This is self-explanatory and simply means that all new SAP offerings and applications will be designed with HTML5 as a base technology or SAPUI5.

Renew – When SAP analyzed the usage statistics of SAP Screens and Transactions, it was noticed that 80% of the users use 20% of the screens. That means SAP can initially work on 20% of the most used screens first and that comes under renew approach. This is where SAP Fiori comes into picture. SAP Fiori comply with SAP’s vision of “From Transaction to Application” and by the end of this year, I think the number of Fiori applications will be around 900.

Enable – Of course when 20% of the screens are offers modern user experience, customers would definitely expect rest of the screens to offer similar user experience and this is where Enable strategy stands. This where people like you and me come into picture and develop applications or migrate old custom applications to UI5 applications with Eclipse, SAP HTML5 Toolkit, HANA Cloud Platform, HANA Cloud Portal, SAP Gateway Accelerator Tools and so on.

Take Away

SAP UI is no longer headache of SAP Portal or SAP ABAP. People have been developing SAP Screens in too many UI technologies and SAP intends to unify this. No matter whether you are an SAP Portal Developer, or an ABAP Developers, sooner or later, you are going to work on SAPUI5. Whether you like it or not! I am not saying this will happen suddenly, but 4-5 years down the line, SAPUI or SAP Screen would only refer to SAPUI5.

 

SAPUI5 Tutorial: Work with XML Views

SAPUI5 offers different options to build applications using a JavaScript, XML, JSON, and HTML Views. Almost every standard documentation published by SAP is written in JavaScript and therefore, not many have tried working with XML views. If you take a close look at SAP Fiori, you’d understand that all SAP Fiori applications use XML Views as its base technology. Simply because of the scalabiltiy offered by XML views and ease of parsign XML Views. In fact, SAP claims that XML Views can be parsed as quickly as JavaScipt views. This makes a good case to start using XML views for SAPUI5 development.

JavaScript Views are Cumbersome

Let us accept this! JavaScript views are too cumbersome to build and the syntax is complicated at first. A lot of SAP Portal developers prefer working with JavaScript views simply because they have at least some experience with JavaScript in SAP Portal developments. Rarely we use XML in SAP Portal development and I think this might be the reason why poeple initially hesitate to use XML Views in SAPUI5 application.

Help Documentation is in JavaScript

Almost entire of standard documentation published by SAP is in JavaScript. That means, all code snippets and examples are build using JavaScript. Of course, there are some exceptions such as SplitApp and so on. But majority of beginner level examples are in JavaScript.

Advantage of XML Views

XML Views are Declarative – You don’t have to bother about a bracket, or a comma, or even a semi-colon. XML Views simply use declarative UI building which is done using XML tags. Let us take an example.

XML View Schema

When you choose to build SAPUI5 application using an XML View, an empty view is created with <core:view></core:view> tags. We then begin building UI5 controls.

Note: You can directly start using controls such as table or list. You don’t really have to define everything inside <content></content> tags. I have done this just for the sake of maintaining code sanity.

Defining UI Controls with XML

Defining UI control is extremely easy in XML Views. Let us say if you want to create a button UI in your view. You can do that simply be using the following code.

 

This is it! With just this small declaration, your application will render a button with text “Test”.

Handling Events in XML View

Handling events is very easy and isn’t as complicated as it is with JavaScript views. Simply use following code to raise an event on press of a button we just defined above

Now when you click on the “Test” button, your application will raise an event “doListen” and it will call a function “doListen” with controller method controller.doListen. That means, you will have to write a function “doListen” in your controller.

Note: You do not have to use methof controller.doListen. Your application manages this all by itself.

Define a Function in Controller

Simply use following code to create a new function “doListen”. We will simply raise an alert to show that event raise after pressing the button is captured.

 Run the Application

Now let us run the application to see how it works. Simply right click on your application and run it as web app preview.

 

SAPUI5 Application with XML View

 

 

Click on “Test” button

SAPUI5 Application with XML View Button Event Handling

 

 

 

 

With this, you have just built your fist SAPUI5 application with XML Views and I am sure you’d love XML Views beause of its simplicity and ease of application building.

 

Custom Thumbnail and Text Overlay for Video in HANA Cloud Portal

Organizational branding is something that you cannot mend and as a developer, you have to blend your developments with branding policies. Further to this, if you are working on HANA Cloud Portal and have a site designed for some users, you might want to add organizational video that you want your users to watch. However, if you are simply going to embed a video from streaming site such as YouTube, then you cannot use HTML5 Video Tag. Simply because YouTube doesn’t allow its video streaming to be sent as an output to a HTML. That is why you have to embed a video using an IFRAME.

The Catch

Even if you are OK using an IFRAME, you have no control over setting up a custom video thumbnail or adding extra text block on top of video that basically describes what is this video is about. To achieve this, you have to develop a custom HTML and style that with CSS so that you can set any custom organizational image as video thumbnail and add any text.

The HTML & CSS Styling

 Result – 

I have published a blog on SCN that talks about this in more detail. Take a look at results and a bit more explanation on the code.

Custom Thumbnail and Text Overlay for Video in HANA Cloud Portal

 

Book: Getting Started with SAPUI5

Finally, SAP Press has released an official book on SAPUI5 titled Getting Started with SAPUI5 and it is authored by Miroslav Antolovic. As its name suggests, it is a beginner level books and therefore, I don’t expect to come across code and application examples. Pardon my opinion for I have not browsed through this book yet. Book covers fundamentals of SAPUI5, Tool Kit, JavaScript. HTML5, and jQuery. Following is the book excerpt.

Getting Started with SAPUI5Learn to develop next-generation UIs for mobile-ready, data source-agnostic, client-side SAP applications. First review basic HTML5 and CSS3, JavaScript, and jQuery concepts as a foundation for working with SAPUI5, and then explore the development and runtime environments, tools, and controls that you’ll use throughout the design process. Use step-by-step instructions, sample code listings, and a full-scale model application to develop and customize your own apps with advanced functionality from the SAP system. The future of app development has arrived, make sure you can speak its language.

1. Get to know the SAPUI5 IDE, control libraries, model types, and more

2. Design and extend modern user interfaces

3. Apply programming models, controls, and UI elements to real-life scenarios

Of all topics covered in the book, topics on – SAPUI5 File Optimization, SAP HANA Views, Customization, and SAPUI5 Libraries are the topics I’d love to read. Additionally, I do not think this books covers anything that isn’t available in the official document on SAP Help. However, If you think SAP Help is scattered and finding right solution is difficult, then this book for you. if you are just starting out to learn SAPUI5, then also this book will be useful. In sum, with this book you will save a lot of time that is otherwise spent on finding the right documentation on SAP Help. This books give you access to right content that is well organized and easy to learn. I am sure with this book, a lot of developers will be able to kick start learning SAPUI5.

Additionally Recommended

If you have already worked on SPAUI5 and are done with building basic applications, navigation applications, and so on, then next step is consuming OData Service in SAPUI5 application. SAP Gateway comes naturally to rescue and any additional experience or knowledge on SAP Gateway and OData would give you an advantage. Following book OData and SAP Gateway does exactly that and I feel this book will be immensely helpful when you start thinking about connecting ERP Systems and Consuming ERP data in your SAPUI5 applications. Following is the book excerpt.

OData and SAP GatewayGet the basics on the OData protocol and REST development paradigm Learn how to create OData services via service development and generation Explore examples of applications built using OData services and SAP NetWeaver Gateway With a foreword by Dr. Vishal Sikka Every developer appreciates a new tool in the toolbox and with SAP NetWeaver Gateway, SAP has just given you a big one: OData. Learn what you can do when you introduce your SAP system to the wide world of open standards. Whether you re building mobile, social media, web, or enterprise applications, OData and Gateway can help, and this book will show you how. OData and REST Brush up on the basics. Get a primer on OData and the REST development paradigm. Installation, Configuration, and Deployment Set it up. Learn about your first steps and what deployment options are best for you. Service Development Build the foundation. From data model definition to service implementation to service maintenance, get a deep-dive on code-based service creation.

 

 

Develop First HANA Cloud Portal Application

When I started working on HANA Cloud Portal about a year ago, I had a limited understand of the platform and capabilities. Moreover, I was totally confused with what set of software do I need to begin development for HANA Cloud Portal. There are 3 types of SDKs, HANA Studio, Eclipse, JVM, HANA Cloud Tools and so many things available that I was not able to understand what is used for what? In this post, I will try to answer some of the common questions. After this post, you will definitely be able to setup your HANA Cloud Portal development environment and deploy your first application on HANA Cloud Platform. Let us Develop First HANA Cloud Portal Application

The confusion

I feel SAP documentation on HANA Cloud Portal developer guide is great, yet incomplete. From developer guide, I was not able to clearly understand how do I use HANA SDK with Eclipse. The confusion was worsen when I read a document on “Installing HANA Cloud SDK“. I downloaded the SDK randomly from 3 choices I had and extracted the ZIP file. I was expecting an executable file and I did not find one. Then why name “Installing SDK”? There was absolutely nothing to install.

I thought let me at least take a look at Eclipse and install HANA Cloud Tools using “Install New Software”, but unfortunately, my organization had blocked network ports that’d connect me to install site. Again, I was at the dead end. After this, I decided to try from my home and I managed to develop & deploy my first HANA Cloud Portal Application.

What You Need?

First, check whether the Operating System of your machine is 64 or 32 bit. This particularly important because we were told that even though we are on a 64-bit OS, NWDS uses 32-bit JDK / JRE. This isn’t the case with Eclipse.

Second, download respective JRE from JAVA website and install

Third, download either Juno, Kepler, or Luna. Though I am not sure whether there is a separate HANA Cloud Tools released for Luna, you may be able to use tools released for Juno or Kepler

Fourth. if you have multiple JSD or JRE installed on your machine and you are getting a startup error with Eclipse that states – Cannot A JAVA Runtime Environment (JRE) or JAVA Development Kit (JDK) must be available in order to run Eclipse. No JAVA virtual machine was found after searching the following locatons…..

Then there is quick fix for this. Simply open Eclipse.ini file from your Eclipse directory and add path to correct JRE as shown below. Open Eclipse INI file preferably in wordpad. Your Eclipse INI file should look like below image.

Eclipse INI File JRE Path Entry

If you don’t see an entry starting with -vm, then manually add as shown in the image and save the file. Now, restart Eclipse and it should work without any additional issues.

Fifth, download Neo JAVA Web SDK from HANA Tools and extract in the Eclipse directory

These 5-steps completes the setup of development environment.

Developing Your First HANA Cloud Application

You first need to install HANA Cloud Tools by navigating to Help > Install New Software. Find a URL and Tools needed to begin your HANA Cloud Portal Development.

HANA Tools Software Install Eclipse

Select SAP HANA Cloud Platform Tools and UI Development Toolkit for HTML5. Optionally, you can also install SAP HANA Cloud Integration Tools.

Once you are done with installing required SAP HANA Cloud Tools, we will begin our first HANA Cloud Portal Application.

Step 1: Create a new Dynamic Web Project

SAP HANA Cloud Portal - Dynamic Web Project

Step 2: Enter Required Project Details & Click on Finish

SAP HANA Cloud Portal - Dynamic Web Project Details

Step 3: Create a New Servlet

SAP HANA Cloud Portal - Create a Servlet

Click on Next and REMOVE URL Mappings as shown below

SAP HANA Cloud Portal - Servlet Remove URL Mapping

 

Click on OK and then Finish.

Step 4: Now, let us write something in servlet. Let us write a simple message. Check following image for details.

SAP HANA Cloud Portal - Write Code in Servlet

Step 5: Configure HANA Cloud Portal for Deployment

SAP HANA Cloud Portal - Configure SAP HANA Cloud Platform

 

Note: You will need to refer HANA Cloud SDK while configuring HANA Cloud Portal Server for Deployment. Browse and set SDK location as shown above in the image. In account information section, mention your HANA Cloud Trail Account & User Name. For e.g. Your SCN user ID is p123456, then your account name for trial platform will be “p123456trial” by default. User name will also be the same. Set Account information and Click OK.

Step 6: Now, let us deploy our application to HANA Cloud Platform so that we can integrate our application into HANA Cloud Portal as a widget. Right click on your project and Run As > Run on Server. You should get a screen similar to below image.

SAP HANA Cloud Portal - Deploying Application to HANA Cloud Portal

Select SAP HANA Cloud Platform and then add “hanatrail.ondemand.com” as a Landscape Host. Click on Next to enter credentials used for deployment.

SAP HANA Cloud Portal - Deploy on SAP HANA Cloud Platform

 

Note: Do not forget to remove “trial” as shown and then click on Finish. This will start the deployment of your application on configured HANA Cloud Platform. Once the deployment is finished, you should see HANA Cloud Server – Started, Synchronized as shown below.

SAP HANA Cloud Portal - Deployment Finished

 

This completes the deployment of your first HANA Cloud Portal Application on HANA Cloud Platform. let us now check whether we are able to find deployed application on HANA Cloud Platform. Login to HANA Cloud Platform Cockpit and navigate to JAVA Applications.

SAP HANA Cloud Platform Dashboard Cockpit

 

My HANA Cloud Platform has two applications deployed. One is the application we just developed and one UI5 applications. I will cover deploying SAPUI5 application on HANA Cloud Platform in a separate post. For now, make sure you are able to find at least ONE application in Started state. Navigate to JAVA Applications section to find application details as shown below.

SAP HANA Cloud Platform JAVA Applications

 

You should see the application we just deployed in Started State. Click on Application Name to find further details.

SAP HANA Cloud Platform Application URL

 

Copy the URL so that you can create a URL or Custom Widget on HANA Cloud Portal.

Create a New Widget on HANA Cloud Portal

Navigate to your HANA Cloud Portal account and Edit the site you have created already. If you don’t have any site, you must create one first so that you can add Application to Site as a widget. Once the site is in Edit more, go to Content > URL Widget and drag drop URL widget on site grid and then enter application URL you copied from HANA Cloud Platform.

SAP HANA Cloud Portal Application URL Widget

 

Click on Submit and after this, you should be able to see widget displaying a message we printed from Servlet.

SAP HANA Cloud Portal - Application Widget

 

I hope now your are able to deploy & add your application to HANA Cloud Portal Site. This is the first step toward developing advanced & UI5 applications and deploying to HANA Cloud Portal. In next post, I will cover how to deploy SAPUI5 application on HANA Cloud Portal. I hope you enjoyed this article – Develop First HANA Cloud Portal Application

OpenSAP Course on SAP UX Strategy

I do not need to re-emphasize the importance of UX in SAP Applications development. We have discussed a lot about SAP’s UX Strategy, How to leverage SAP’s Strategy to create your own, UI & UX fundamentals in Information Architecture and so on. On this line, SAP has recently introduced a course on SAP’s UX Strategy in a Nutshell. The OpenSAP Course on SAP UX Strategy offered through is free of cost. I think this is a wonderful opportunity for all SAP developers who are working on UX or are willing to learn about UX. Though this course is more about SAP’s perception of UX, it will guide SAP developers toward designing a better UX strategy. Following is the course content.

  • Unit 1: Introduction of Design Thinking at SAP
  • Unit 2: Consumer Experience for Enterprise Applications
  • Unit 3: SAP Fiori UX
  • Unit 4: SAP Screen Personas
  • Unit 5: Business Case for User Experience
  • Unit 6: Wrap-Up

In my opinion, SAP has carefully designed the course and Unit 1 is the proof of that. You just cannot start UX practice unless you and your team have developed a thinking that is required to design UX strategy. Design thinking at SAP will make you aware of thought process, design process, and thinking that goes into designing UX for SAP Applications such as SAP Fiori.

It has widely been criticized that enterprise applications suck at providing better user experience. Thankfully, this situation is changing and SAP is aggressively pursuing usability, UX, and UI strategy and SAP Fiori is a great example of SAP’s vision.

Unit 3 precisely covers SAP Fiori UX aspect and I hope to see some really practical strategies that are easy to adopt and robust enough to act as a base to organization specific UX Strategies. SAP Fiori is built with SAPUI5 framework and I think that SAP Fiori UX Strategy will also be applicable to custom SAPUI5 developments.

In sum, this course is a great opportunity for everyone who has not got a chance to learn anything about UI & UX Strategy. Use this opportunity to prepare yourself for the change that is evident in SAP Development paradigm.

Here is the link to OpenSAP Course – SAP’s UX Strategy in a Nutshell by Sam Yen

Read more about SAP UX Strategy, Usability, and more on Ameyablog

How To Pass Data Between SAPUI5 Views With JSON Model

One of the major difficulties that Portal Developers today is lack of availability of reference points to develop basic applications. Guides and other reference material published thus far do not allow Portal Developers to relate their WebDynpro Java development experience with UI5 development. Basic navigation between two views is in majority of the cases be the first application that any Portal Developer try to develop when he / she picks up UI5 for the first time. Unfortunately, both WebDynpro Java and SAPUI5 differ significantly in terms of development methodology and that’s why SAPUI5 adoption rate isn’t that great among Portal Developers. That said, there are many developers you have swiftly moved to UI5 development, but for other folks, this article on Learn How To Pass Data Between SAPUI5 Views With JSON Model to build advance SAPUI5 navigation will be the first reference point to begin UI5 development.

Approach

At this moment, I cannot really comment that which approach is best in terms of performance. But, important is to learn how UI5 architecture works and how navigation concepts differ. I will discuss the easiest way to implement basic navigation in UI5 in this article.

A lot of developers have asked questions about basic UI5 navigation by using Page Navigations, HTML Views, or Event Bus. However, there isn’t anything around when someone wants to develop basic navigation with JS View, which is the most common view implementation used by developers.

Work with UI UX Shell

Relate UI UX Shell element with a parent level container that holds data at the runtime. By data, here I mean view that you want to display at any given moment. Official definition of UI UX shell describes Shell as a Frame based application that has in-built navigation capabilities. One of the major advantages offered by Shell is you can define Shell in Index HTML so that you can refer Shell from any of your JavaScript UI5 Views. Basically, a Shell is a global element.

Define Shell in Index HTML

Defining a Shell is easy. Use following piece of code to define shell in your UI5 application, and this is also the first step to implement basic UI5 navigation.

Once you define a shell element, you will also have to define default view that is to displayed on initialization. Use following piece code to do so.

As you can see in above code, we have defined view with id “idV11” to be initial view that should be displayed.

Take a moment here to understand concepts discussed thus far. If you wish, you can choose to keep your basic navigation lean and simply add navigation buttons to check basic navigation. However, if you are looking to develop a navigation application that accepts user input on first screen, stores data in model, and then displays user data on second view, this I am going to explain that now.

We will not take a while to see how JSON model works and how JSON model can be used in this application to pass data between SAPUI5 views.

JSON Model

JSON model is one of the types of model supported by SAPUI5. Other types of model are XML, and oData. However, JSON models are easier to start with and simple to implement. In addition, to learn how JSON model works in SAPUI5, you don’t need any SAP System connection. JSON model allows you to define data that can be stored in the model in JSON format. If you don’t know what is JSON format, following sample will explain that in detail.

As you can see in the code above, this code snippet defines the data to be stored in JSON model and is defined in a JSON format. JSON format is a list of key-value pairs as shown the code. In above code, first key-value pair is of firstName: “Ameya” which defines first line of data that is to be stored in the model. Similarly, the second key-value pair is lastName: “Pimpalgaonkar”. On the similar line, you can go on to add as many different attributes as you want to store in the JSON model.

Creating Global JSON Model in SAPUI5 Project

We will now see how to use JSON model that is globally accessible to all views of your SAPUI5 project. We will define a JSON model in Index HTML instead of a view of our application. Following code defines JSON model and sets the data to be stored when application is initially loaded. We will modify this default data by accepting user data at the runtime.

Define Content of the First View

In the first view, we will fist define a Data Panel function that will create an area within Shell where UI5 elements will be loaded. We choose to keep default createContent function as lean as possible to improve performance and that is why, we refer to another function that loads UI. Following is the code to define data panel in createContent function.

 Create function createCustomerDataPanel

We will use matrix design to create layout of our application and also provide a button to navigate to second view. Refer to following code to understand this in detail.

For some reason if you face difficulties to implement navigation, refer to application ZIP attached at the end of this article that has View, Controller, and Index Files.

Note – The ZIP file only contains files and not the actual project structure. You must first create an empty SAPUI5 application and then simply copy paste the code from the ZIP file into the respective files of your UI5 navigation project

Define Content of the Second View

In the second view, we will fetch the data stored in JSON model, and display the modified data. This is exactly similar to view based navigation in WD Java.

You will find second view a lot easier to understand once you are done with first view. In the second view, we will once again create a panel to hold UI elements and we will also keep createContent function lean.

Once again, the code for createContent function is same.

Next, we will create matrix layout once again and add a label and a text file that displayed user data entered on the first screen. We will then create a button that navigates user back to the initial view. Following is the piece of code.

As we have already defined the JSON model globally in Index HTML, we can access the data set in this model from any view of our SAPUI5 project. Binding a text view to model property value is easy.

Note – Do not forget to write “return customerDataPanel without which, your view will not display any data on the screen. In SAPUI5, we have to write return statements to tell our project what piece of UI to be rendered at the runtime. If you forget to write this return statement, your view will be rendered blank.

Working Screen Shots -

If you want to see how this works in reality, check out the screen shots below.

SAPUI5 Navigation Example First View

Figure 1 – First View of the UI5 Navigation Application

SAPUI5 Navigation Example Passing Data

Figure 2 – Enable user to enter custom data on the first view

SAPUI5 Navigation Example Second View

Figure 3 – Second view displaying data entered by user. Data is stored in the JSON model

SAPUI5 Navigation Example Navigating Back to First View

Figure 4 – One navigation back, user is taken to first view once again.

Final Thoughts

Navigation is one of the basic functionalities and almost every project has navigation between multiple views. At this moment, you will not only be able to explain how navigation works in UI5, but also implement working application. You can further concepts learned from this article to implement navigation in your other UI5 applications. In addition, we have optimized the code by defining custom functions instead of overloading default function.

Usability for SAP Developers: Information Architecture

I have been thinking to write about some of the fundamental usability concepts that can help SAP Developers, WebDynpro Developers, and SAP Consultants understand what SAP is really talking about UI & UX Strategy, and Why SAP regards usability so highly. I recently wrote on SAP’s UX Strategy, Rules to improve User Experience, and in fact, there is a complete section on Usability and Responsive Design. Yet, I never discussed fundamental usability concepts such as IA (Information Architecture), Wire framing, User Persona (Different from SAP Persona), UT (Usability Testing), and so on. I learned these concepts and got an opportunity to get hands-on when I attended certification track training from HFI (Human Factors International) called as CUA (Certified Usability Analyst). However, not many developers were interested into these topics then in 2010. You can understand SAP’s UI & UX strategy more clearly if you know usability concepts that I am going to discuss.

In this series of posts, I will discuss some basic usability concepts that will help SAP developers plan their applications more effectively and aim at higher user satisfaction. My aim is to make you understand how deeply usability adoption can affect quality of applications you design? And how relevant are these concepts even in a typical SAP application development paradigm?

In this post Usability for SAP Developers: Information Architecture, I will talk more about Information Architecture aka IA. Understanding how to arrive at correct Information Architecture is the key to improve user experience, minimize number of clicks, and put most important information upfront so that user can complete the transaction without any error.

Let us dive in!

What is Information Architecture?

Put simply, Information Architecture is a work that goes into determining navigational structure of an application or a website so that user can perform desired action or get required information easily. Information Architecture is a way to express navigation system of an application or a website. Information Architecture is same for web pages and applications. When someone asks you to develop an Information Architecture for application, you must work on to find out what screens should application contain? what should be navigation flow? which is the initial screen? and what actions will take user to which screens? This also includes what clicks, actions, and interactions user will perform with your application.

Points to Keep in Mind

Always remember, your ultimate aim is to make life easier for user so that application can meet its purpose. A good Information Architecture translates into increased user productivity, better use of application, minimized application support requests, and increase in a number of successful transactions. Note following points when you design Information Architecture for your project.

  1. Be Consistent – Make sure that navigation action or methods are consistent across the application. For e.g. if you provide a button for user action on certain function, do not use links to perform the same function on other screens. Be consistent.
  2. Think About Every User – Not every user is same. However, our aim is to design an Information Architecture that caters to majority of the types of users. For e.g. Some of the users may have high computer operating skills, while some users such as factory supervisors may not. We need a navigation that lets every user perform his / her work with same amount of efficiency.

Features of Good Information Architecture

A good Information Architecture always has following to help user at every step of interaction.

  1. Easy to Learn – A good Information Architecture considers a navigation system that is easy to learn. Even for naive users, navigating the application or system isn’t really a problem and users can learn to perform their task after using the application once or twice.
  2. Put Important Information First – For e.g. if a user wish to fetch his Leave Balance from the system. Unfortunately, this user is on a slow network and there is latency as well. If you are designing information architecture for an application that displays user personal information and if you make user click more than twice, then your design is poor or faulty. Never hide important information more than 2 clicks away. You must priorities which information is most important in context of the application and try to put that on initial screen itself. If this is not possible, provide access to this information with not more than 2 clicks.
  3. Feedback & Ease of Navigating Back – Breadcrumbs are the best example of what I mean. Breadcrumb is an excellent UI element that not only provides feedback to user about current position, but it also allows easy of navigating back without using application primary navigation menu. This is a great tool that enhances user experience. Unfortunately, it is also one of the most ignored UI elements by SAP developers.

How to Arrive at Correct Information Architecture

Designing a correct Information Architecture could be time consuming if you don’t know anything about users. Problem is even worse if you don’t know purpose of your application. Asking following questions might help you design a better, if not best, information architecture.

  • Always ask why will anyone use your application?
  • Think about first and last point of interaction of users
  • Think about what user intend to achieve and in what way your application helps user to perform the task
  • Think about application access from mobile, PDAs, tablets and desktop
  • Think how can you provide unified user experience irrespective of device and platform

This list isn’t really exhaustive and I encourage you to create your own list that considers scenarios specific to your organization and application requirements. However, always include these points in your list on top so that your information architecture design stays on the right path.