Most of the customers using UI5 are pretty amazed by the visualization and nice interactive reports they can see using UI5.
UI5 javascript libraries opens up a huge realm of possibilities.
If you have seen D3JS then you would be wondering, is there something which can not be done by D3JS.
This we all will agree who have tried in some point or other to work with it, that the time to learn it compare to other JS library is little high.If you have used sap.viz library in your UI5 project before then you might know it as well that it also uses d3 internally.
Recently there were also attempt to integrate C3.js and Chart.js libraries with UI5. The GitHub project is called custom controls for charting.This also looks pretty amazing and it is responsive as well.
We will soon give this new JS library mashup a try and tell you the result !
In the first part of this article we discussed what UX means, what a Persona is and described the UX first design phase.
In this second phase, you have to map your critical ideas, customer profile and customer requirements into technical components.
It is the Wire Framing phase.
What is Wire Framing ?
Wire Framing is when your ideas and all of your design that are in your mind, which you got by talking with your customer in the workshops, will be drawn into sketches that will look like real solutions, like web applications or mobile apps.
There are some useful tools for Wire Framing, in the market.
What are the main Wire Framing tools ?
Moqups and Balsamiq
Moqups and Balsamiq are framing tools, you can use for free during the evaluation period.
They are very simple to use and with Moqups is even easy to share through Google Drive. You can give the link to your customers and let them share and find out if they really like the user interface of the final design.
We will be writing reviews of these tools in future articles.
SAP Protyping Toolkit
On the SAP side, you have the prototyping toolkit in SAP Experience, where you can download it.
Prototyping toolkit is not a tool, it’s a PowerPoint and it’s a smart approach by SAP to give a wire-framing solution.
In there you can find slides with sample applications, which is nothing but the components that you will change to show to your customers.
Go for SAP Experience and checkout. There are many small details that SAP has covered.
It is a wireframing tool that automically generates code and can be useful for designing very simple mobile applications. It is built in Node.js.
Topics to keep in mind during Wire Framing phase
Try to design the solution along with your Client since immediate feedback and many interactions will save time.
It is very important to get a fast feedback from the Customer regarding his requirements.and he should understand what they are going to get after this solution is being delivered.
SAPUI5 technology and Fiori are so much new that only a few customers have experience with this kind of user interface.
This iterative and incremental process will save you time and effort because you will have an idea of the development effort.
Bear in mind there can be situations where you can have the exactly same designs but the effort required are considerably different for each one. The UI is equal but the UX is much different.
If you don’t have any idea about the effort of the development then it will be difficult to choose the right design. For this reason every UX designer should have some idea about the development effort. It always helps.
In this article, we are going to talk about User eXperience a little more.
What is UX ?
Traditionally people are confused with what is user experience and what is the difference between User Interface (UI) and User eXperience (UX).
There are a lot of differences between UI and UX since UX is a very broad concept and it is not only design or the way the interface looks like.
Google definition of UX: “The overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use”.
The key point Google is mentioning here is Usability.
UX is the usability of one solution but keeping in mind its specific customer.
So when you are a UX developer, you are both a UX designer and a developer, since you are going to develop the solution based on your initial design, focusing on the usability and your customer needs.
What is a Persona ?
The first step of going towards any UX design is to find out your customers, your Personas.
So what is a Persona ? Persona is a personification of your real customer, who is going to use your application.
Generally, what we do when we go to a UX workshop is to know more about our customer users, the ones who are going to use our solution and see what is their specific age group, their thinking pattern, their working condition, their priorities, lifestyles and physical attributes.
This helps a lot while designing the solution because you can keep in mind your customer needs and goals.
So that’s the Persona.
In the second part of this article we will be talking about the Wire Framing phase and the tools you can use.
Today, in this article, we are going to see what is SAP’s new User Experience (UX).
But before going into more detail, there is a question:
Why has SAP introduced this new User eXperience in UI which is so much different from the traditional way of working?
The answer is simple: from past few years, people are using iPhones, tablets, doing more eShopping, using Twitter, Facebook and other social media applications to collaborate and share and this has raised consumer expectation of what interaction should be like and provided SAP to get a good opportunity to transform its 20 year-old UI design into a new look.
SAP New UX 5 Key Principles
If you take a deep look into this new User eXperience, there are 5 Key Principles that should be followed:
Keeping it simple – the application should be created for one user type with one use case and covered within three different navigations screens.
Role-Based – so that the same application can be used by many individual users at a different level, at the same time.
The application should provide Instant Value – which means the users can directly see the advantage, so they can go for the adoption.
There should be coherency for all the application, no matter the function domain.
The applicaiton should run in all devices, should be Responsive.
Application Categories
To bring this to the customer landscape within an existing business process, SAP has characterized applications in 3 different ways or categories:
New Applications – These applications are very innovative, totally new and many of them are native. New functionality and new skin.
Renew Applications – These applications are also out of the box and mainly for a wider audience, for example, the existing VA03 Sales Order transaction. The same funcionality but with a different skin.
Enablement Toolkits – There are many business processes which are specific to the customers for their own specific businesses. For these specific scenarios, there are technologies and frameworks like Floor Plan Manager, Script Persona or our Javascript library from SAP, called SAPUI5, that will help doing the mapping and fill the business gaps.
It all started four months back when my friend call me regarding some new development which he was doing with SAP UI5. He told me that he had learned UI5 and HANA from open SAP and he was now building a small application.
He got the code available in the internet but was having some confusion regarding a few components, as he was getting an error message. We checked the code for a while and found there was a data binding which was missing and once we fixed that, and some other small issues, we were able to make the app work. He was very excited as his first app was working 🙂
After 2 weeks, he pinged me because he got into a project and was going for customer workshop for requirement gathering and was bit worried, as working with this new technology from SAP is not that simple and he was also not having real time project experience.
We spent 1 hour in a call where we discussed about the UX, information architecture, personas, wireframing and prototyping tools from SAP.
He seems to be quite relaxed now as he has now been told what will happen and what he has to do. Again after 3 weeks, I got a call that the user workshop was done and the customer liked the new design and the way workshop was conducted, focusing on business rather than technology. He requested a short video on the topic, which we discussed on the call for his friends.
The Video Course
After a while guess my luck !!!
People got more interested on my videos and they wanted me to record more.
One thing lead to another and we formed a small group of people called UI5 Community which shares learning material and real project experiences.
Now, after lots of request from people outside of my organization, we decided to compile all content and present it in three series, so many people can benefit from it.
