If you are a RadPHP XE2 customer, the first thing you will notice when running the IDE for the first time, is the new UI. The new UI breaks the link between RAD Studio and RadPHP, that is, in the past, both products had to look and behave the same, but this is not that way anymore. So we have taken that opportunity and we have come up with a brand new UI, specially suited for this tool. Probably, some concepts won’t work for another tools, not even for RAD Studio, but that was not the goal.
For the new UI, we have taken some basic guidelines:
- Simplify existing UI, as current product looks “scary” to new users
- Remove clutter as much as possible, as too many options in the screen at the same time, confuses the user
- Provide as much screen real state as possible, so user avoid scrolling
- Pay attention how users use the product and which tools are actually useful depending on what the user is doing
- And finally, the new UI must be modern and visually appealing
So, having all that in mind, let’s analyze the new UI step by step. Let’s first take a look at the Welcome Page on RadPHP XE2:
You can click the image to enlarge it.
Pay attention to all the red arrows:
- The Structure pane is empty
- The Object Inspector is empty
- The Project Manager is empty
- The Tool Palette is showing the repository items
- There is a lot of actions on the tool palette which are disabled
All this is wasted screen real state, and the Tool Palette showing the repository items is a “solution” in order to show something there when the content area is not showing the Form Designer. How many times have you used the Tool Palette to create a new form?
Now let’s take a look at the Welcome Page of HTML5 Builder:
As you can see:
- Most of the screen real state is spent showing the news instead being used to show empty tools
- No tools that are not needed at that context are shown. We have just open the tool and there is any project open, there is no need for Object Inspector, Structure, Tool Palette, etc.
- You have on the left the global options you can use, you will see more about this when I explain more about contexts in another ports.
On the other hand, the icons are bigger, we are using PNG with transparency, and the color scheme is dark, following the trend other tools like Photoshop or Visual Studio 2012. I will explain more about the dark style in another post.
I hope this article helps you understand the whys and hows of the new UI, and please, don’t hesitate to post your comments. HTML5 Builder UI is not tied anymore to RAD Studio UI, so it’s going to be easier to implement changes you request.