WebDynpro UIs – Usable?
Being an interactive shop means being involved in lots of projects where the user experience is “the”critical component towards achieving success. So, we’ve had our fair share of questions like “Can we make the UI look like this?” Or “Why does it look like that?”
And on SAP projects, those questions come up a lot.
When working with software that lots and lots of people use, those questions typically turn into statements such as “It needs to look like this” or “It needs to look like that”.
Today, more than ever, companies depend on their digital solutions to drive their business, so getting the user experience right is mandatory towards hitting the mark with the user base, internal or external.
And that’s no different for SAP projects.
So – where does SAP WebDynpro fit into the UX picture? How does it stack up as a UI technology?
Anybody who’s anybody who’s ever been involved in an SAP project has been exposed to WebDynpro to some degree, one way or the other. Web Dynpro is the default UI technology for SAP custom development projects and its also becoming used more for some of SAP’s packaged software.
But, having been involved now in a number of SAP projects where a key goal is creating a great user experience, it’s been somewhat challenging when working with WebDynpro. Designing great user experiences for SAP WebDynpro based projects is such an interesting phenomenon namely because constraints rule the roost and function dominates form.
But that needs to change.
Form should be just as important as function.
WebDynpro seems to value speed in UI creation – evident when an ABAP developer creates a WebDynpro screen with some drag and drop UI elements on them after spending hours and hours writing the ABAP for the back end business logic, to process the data into the screen. This is what typically happens, and I believe the scenario that SAP wanted to hit when designing the WebDynpro product as a UI technology – create less emphasis on the UI and more emphasis on the backend logic development. Then let “styles” sort the rest out.
There are a couple problems I see with this.
One – that theory in the face of today’s users expectations finds itself flawed. Users in today’s digital world have increasingly high expectations when it comes to how they interact and do business online; see Amazon, Google, and the iPhone.
But secondly, the person who codes the backend in this scenario is the same person who creates the user experience. It’s the same person. The. Same. Person. That’s like my dermatologist prescribing a medication for my heart. My dermatologist is a doctor too – and I’m sure he’s a good one. But does he have the skillset necessary to be a good cardiologist? The skillset required to design and develop the user experience is quite different from the skillset required to build the backend business logic. It’s like night and day. So, I can understand the speed in delivering screens like this, but ultimately users don’t care how long it takes to build a screen, only if it’s really easy to use and looks great.
Some will say that you can modify the UI – and this is true. But it’s not straightforward. The issue is dealing with the numerous style sheets that dictate the look and feel of WebDynpro. These stylesheets are both Portal and WebDynpro related, so you’ll have to negotiate both, if your porting your WDA apps into EP. The CSS is nested and deep, and care must be taken to align. I have the perfect example for you. Buttons. Good old buttons. The most classic UI element in the entire web. In WebDynpro out of the box, all buttons are square. So, what if you wanted to make them round? Sounds pretty simple right? Not so much. The way that “buttons” are laid out in the CSS, they are really sliding cells or containers, meant to grow as the text or label of the button grows. So, it makes it difficult to close the edges to be round. So, what should be really straight forward, is quite the opposite for such a simple concept.
The good news is that when the right skill set is applied, you can make WebDynpro UIs look great. Much of this depends on a lot of CSS massaging and granted, this is not something that “just happens” out of the box. But the right know-how and experience can turn rigid and square into pleasing and round. In the end WebDynpro can be what you want it to be. We’ve had clients look twice and ask us “is this really SAP?”.
Here are a few before and after examples comparing the familiar out of the box WDA UI to one that has been customized.
So when I ask is WebDynpro usable? The answer is yes. Yes it is – if you first determine that creating a great user experience is important to you and your company, and that accepting “out of the box” is not the answer.
That starts with the following:
– Augment the development team with UI Designers and UX Developers. This separation of duties pays off in spades.
-Create a process for UI design and development, and create a style guide that can dictate the layout and design patterns that developers adhere to.
Looking into the future, we’d like to share our WebDynpro experiences and pointers with SAP and ultimately work in some really critical UX flexibility points into the WebDynpro product. We’ve worked with it so much over the years that we know the things in detail which, if redesigned, would bring more smiling faces to WebDynpro users everywhere. Now WDA and Floor Plan Manager bridge the gap only so much. There is so much more that can be done with WebDynpro – it really is a powerful product that can do a lot from a functionality or process perspective. But the magic will really happen once the power of the front end finally matches the power of the back end.
That’s what today’s digital users want, and that’s what they should get.