So you know the basics, where to start and etc., now the question is, “How do I turn UI design to an actual SAPUI5 Application?”
Today, I’ll be sharing my routine on how I develop SAPUI5 applications from a UI design.
The UX designer already involved with the UI designs and the users are now “very excited” to see the application. This routine may help you convert those design artifacts to something tangible. A simple guide to ease your flow to the development and bridge the designs gaps from the technical perspective.
Step 1: Data and Design
Every application, in my opinion, must start with the data. Users must know what data they want to display on the screen. This is where data gathering comes in. Data must be defined at field level if possible.
The UX designer then maps out this information to the screens. The UX designer may find opportunities for optimization and streamline the flow. Once the flow is sought, this is where the developers come in.
Step 2: Mockups and Prototypes
Once the flow is set up, the UX designer converts these to actual screens or mockups. In this stage, I usually discuss with the UX Designer the standards of Fiori Design Principle and the technical limitations of the framework itself.
Do take note, that not all UX designer is already familiar with SAP. It is advisable to consider the UX design perspective in general, SAP or non-SAP, in your application. I must admit that I myself committed this crime in my previous years as a SAPUI5 developer.
Remember to keep an open-mind for design patterns other than SAP. This helps the application to grow in design and User Experience. But don’t forget to consider the standard guidelines before crossing them and creating your own.
In the real world, not all mock-ups can be easily updated and produce in an instant. This is where free-hand design is very useful. A pen and a paper or whiteboard to draw the high-level mockups. Yes, all you need is a pen and a paper.
“I have a pen, I have an apple…pen pineapple apple pen…” (Sorry for the pun 🙂 )
From here you can easily see what works and what’s not. Free-hand is also easy to modify, you just need another paper or whiteboard to draw on and your set.
If you’re fortunate enough, there are tools like the following to help you:
The tools above can help you convert those pen and paper into actual screens together with your designer. This helps the users to visualize the application even without coding anything.
Just pick what suits your preference and budget. Yup, budget, some of these are licensed so also take note of that.
You have the screen designs ready, converting to actual Prototypes is an optional step for us. Usually, for my team, we do the prototype just to test if the actual design is feasible in SAPUI5. Always remember, not all UI design can be converted easily to standard SAPUI5. Some designs may take more time to develop or customize from scratch to achieve the behavior.
During prototyping I consider the following questions to help the team understand the challenges during development:
- Is this element or behavior have a similar SAPUI5 standard control or element?
- Is this a must-have feature? Does the application flow or usability is impacted by this behavior or control?
- Is there an actual value of this feature? Cost-saving, task completion rate, future maintenance, etc?
- If not, can we defer this behavior? Conduct test with the users if the standard behavior works for them?
- Is there another possible standard behavior or control replace it?
- Is there a less complex control or behavior?
- If not, what is the impact on the development timeline? effort?
From here, I discuss this with the team. Then we come up with a solution that fits the project need.
Step 3: Validation of Design
After the current design is mocked up and prototyped, we always go back to SAP Fiori Design guidelines. It is common to miss a lot of important guidelines along the way, especially, if the whole team is busy discussing the design.
Most of the time, because of so much discussion, the focus on following the standard is left outside the door. More importantly on fully customize controls, which are not part of the standard library.
Custom controls must follow the guidelines so that the Fiori Design Principles are still present in your application. Customizing doesn’t mean moving away from the standard, it’s more of complementing the existing. We develop custom controls to add richer content, and not to replace the standard ones.
In this step, you may encounter going back to design step and polishing the results. This is normal and highly recommended since the goal of mockups and prototypes is to continuously improve the design.
Step 4: Development
As you might notice, the true development only comes in, when the design is almost done.
Yes, you may start developing early on, especially on the high-level flow, but the details must follow right away. Sometimes, the minor details can impact the whole application itself.
After converting the design to pages and controls, etc., I do unit testing. Making sure the actually expected behavior is aligned with the UX design.
Does the button behave the way it should be? clicking? hover?
Does is prompt errors or validation messages?
Always go back to the design.
Continuously involve your UX Designer, so that you are aligned with them. Is this what they expect? Is this the actual requirement? Does the feature make sense?
Also consult the business, sometimes, along the way they realize that the design is not what they wanted. Actual users don’t need it and use it. There’s just a small population of the group that uses this feature. It’s not part of the target release, etc.
And so, if your not sure what controls to choose from on the development itself. Check out these Commonly Used SAPUI5 Controls, which tackle when to use them.
Step 5: Demo
And at last, always demo the application to your users.
Feedback is very important.
Take note of the pain points, improvements, suggestions. Also take note, what they like about it, the highlights, and the commendations. You can use these notes for your next development.
Go back and review, and reiterate if needed.
And at last, if you’re still unsure of the design-to-development. Don’t forget to collaborate. Go back to the design. Discuss and keep an open mind.
Don’t rush in developing the controls and converting them, it will cost you more development time to redo and update these designs. Focus on clarity and set the expectations.
Reiterate. Don’t stop improving.
And if you still don’t know where to start, check my Introduction to SAPUI5 post to guide you in your development.