Applications created in Excel rarely look good because Excel was actually never intended to be an UI design platform. The real power of Excel is its ability to allow business users to build powerful business applications and tools. In this tutorial, we will look at various techniques that can help make your Designer Applications look more compelling and easier to interact with.
Enhance your Web Interface with Stylesheets
Designer Applications in SpreadsheetWEB can feature different visuals with the use of Stylesheets. Using CSS (Cascading Style Sheets) code, Stylesheets will give your applications a unique style which will set it apart from others, and can also help you customize the user interface in ways the User Interface designer can’t – such as adding custom spacing between elements.
You can choose from existing templates in the system, or create your own, either from scratch or building on an existing code template. The Stylesheets manager currently comes with over you can choose from and each will change the UI theme substantially.
When you select from available templates, the CSS code will automatically populate in the Stylesheet code area. Below is a sample application with and without Stylesheets applied.
Use Containers to Group Controls
All UI elements (inputs, outputs, visualizations etc.) are placed into, and grouped by Containers and Sections in the User Interface designer. Sections act as “rows” and actually consist of Containers. Containers, on the other hand, can be defined as “columns” which can be split into 12 adjustable areas.
Furthermore, you can change the style of each individual Container or Section by choosing from a well size, as well as color style. Well option determines the padding outside of a container, which can useful for focusing application controls into the center. The last option, Panel, will display the entire section like a card, in one bundle.
Each Stylesheet template comes with a set of Color Style options like Primary, Success, or Warning. You can choose from available color themes and assign a Container or Section the appropriate colors. These colors can be modified from the Stylesheets menu.
Ultimately, playing with container and section settings can give your application a more concise and compartmentalized structure.
Use Background Images to Improve your User Interface
You can add Background Images to your designer applications to display the selected image on all pages, behind all input and output fields. A Background Image will add to the story, and can help better describe the purpose of the application, while giving it a nice look. Below is an application that calculates calories burned.
Create Multi-page Applications with Simpler Interface
Data on a grid structure, like in Excel, makes it easy to gather many controls in a small area. However, this doesn’t work well with web applications, as it makes them too cluttered and difficult to navigate, especially on mobile devices.
Usually, it makes more sense to distribute application controls to multiple pages and group them. This will result in fewer controls on each page, but will prevent long pages that will require a lot of scrolling and not confuse your users. With this approach, pages can be connected through Next/Back buttons, and you can even add a top or side menu for easier navigation.
Use Different Input Controls
Most Excel applications are built in a way that the only controls are textbox and dropdown type of simple modules. This is usually a flexible way to collect any type of data, but you would then have to add constraints, as well as explanations to let your users know about such limitations in the model.
Enhancing your applications with other types of controls can greatly improve the look-and-feel of the page, as well as the user experience. Let’s go over some controls that designer applications feature.
Radio buttons are great for cases where you want to offer your users a handful of options to choose from and don’t want to accept free-form entry. This will also result in less effort when it comes to reporting.
Sliders can define a maximum and minimum range for numeric data entry. This will subsequently show the end users that they can’t enter any other value outside these ranges, and make the data entry more interactive in showing where their choice lands in the spectrum. For example, it makes perfect sense to use a slider input for age fields, where you might only want to accept a certain range.
Calendar inputs can make date entries a breeze. This control pops up a small calendar where users can navigate to the desired date and time to enter, resulting in a uniform data type. You won’t have to worry about converting “January 1, 2019” to “1/1/2019”.
If you have several textbox-style inputs in a tabular format, a Grid control is the best way to handle this instead of using many textbox controls. This approach will declutter the screen, remove the need of vertical scrolling drastically, and allow you to export the data in a nice table format.
Below, the image on the left is the underlying Excel file for the application created on the right. This is a perfect example of how a simple application can be enhanced substantially by using different types of controls for various inputs.
