Skip to main content

Reducing the Uphill Struggle to Build Great UIs with Pega 7.3.1

The project failed partly because the designers didn’t fully consider practicality. This wasn’t a software project, though, and it happened long ago. Nevertheless, this project failure provides a lesson that we can apply to UI design today.

Mostly completed by 1806 and terminating in the Massachusetts towns of Cambridge and Concord, the Cambridge and Concord Turnpike was purposely designed and implemented in a veritable straight line between the two towns, which are roughly 14 miles apart.

According to several historical publications, a humorous but serious problem arose soon after the turnpike’s construction: the turnpike’s route over the steep hill in the modern-day town of Belmont was, well, too steep! 

I imagine that the work animals pulling heavy carts laden with wares attempted to ascend or descend the severely steep, long hill and probably stopped and gave their owners a very hard time -- an animal-style protest, if you will. No doubt, the uphill incline was too gruesome and treacherous, while the downhill incline made the animals downright nervous. Instead of dealing with a modern-day flat tire or dead battery, imagine dealing with a set of unwilling work animals. The steep hill impeded traffic, and some historians believe it contributed to the turnpike’s failure.  Additionally, the straight-line mentality resulted in bypassing the thriving town of Lexington -- a mere two miles away --  which historians also attribute to the failure of the turnpike. But I’ll stick to the steep hill metaphor, because I like to imagine the more humorous scene of rebellious work animals!

Original turnpike route and the switchback that was added later
Original turnpike route and the switchback that was added later
 


What can we learn from this failure? In their rigid straight-line mentality, the original turnpike designers had overlooked practicality.  For the steep hill, a practical solution might have included a switchback (one was added many years later) to lessen the incline or routing the turnpike around the steep hill to avoid it altogether.

We know this type of thinking occurs in software engineering, too. There are many metaphorical “hills” we have to ascend to deliver software, and there are often practical solutions that can lessen or eradicate those hills.

Drawing on that same analogy, in Pega 7.3.1, many new -- and more importantly, practical --  UI features and tools have been added to lessen or avoid some of the “hills” that one might encounter when building great UIs.  I'm excited to share some of these features and tools with you, starting with a set of very powerful and practical design templates.

New design templates for section-level UIs

Have you ever looked closely at popular websites and mobile apps? A discerning look reveals many repeating UI patterns. As one example, Twitter, LinkedIn, Facebook, and many others use an inline UI fragment with an icon that is followed by a title and/or metadata that is followed by an icon for actions .

Inline UI fragments with an icon
Inline UI fragments with an icon


Since Pega 7.2.2, Pega Platform has offered the capability to capture patterns like this by creating a design template, which can be thought of as a blueprint.  When building a new section, developers can pick a template they want to use, and then simply drop UI elements into the template’s regions.

But why should you have to develop the design templates that modern apps have? To lessen the hill that you have to climb to build UIs like apps such as Twitter and LinkedIn, in Pega 7.3.1, we’ve introduced six design templates that you can use to leverage these popular patterns.

Design templates introduced in Pega 7.3.1

Design templates introduced in Pega 7.3.1

 

Collapsible left navigation

Here are some of those hills that you might encounter during app development:  How can I reduce the visual overload of my Pega app? How do I maximize the main work area as the screen size gets smaller? How do I get my navigation out of the way if it’s not needed?

In Pega 7.3.1, UIKit 10 tackles these hills by introducing an autoexpandable/autocollapsible navigation UI.  At a certain screen size, the left navigation automatically collapses to just icons, reducing the visual overload of your app and maximizing the main work area. Hovering over the navigation autoexpands the navigation.

While collapsed, if you hover over an item in the collapsed menu, the left nav auto-expands.

While collapsed, if you hover over an item in the collapsed menu, the left nav auto-expands.

 

New button and link formats

UIKit 10 simplifies the OOTB button formats to these main formats: Strong, Standard, and Simple. In addition to providing a fresh, new look and feel, the new button formats, based on the Pega UX Design System guidelines, also meet the WCAG 2.0 AA contrast ratio standards for users with visual impairments.

New button formats
New button formats
 

 

New link formats
New link formats

 

Go around the hill of developing your own design system for button and link formats and leverage ours.

CSS Helper classes

Often, developers create skin formats that are almost identical except for one or two minor tweaks. For example, a developer might copy the OOTB "Inline" Dynamic Layout format to change only one or two settings, such as the bottom item spacing (margin) between items in the layout. 

 

CSS Helper formats

An example of many inline formats that vary only slightly

 

This approach isn't optimal because it creates yet another skin format to keep track of . Over time, application skins often accumulate many similiarly named formats, and developers might not know what they're used for. More importantly, this approach creates another significant blob of generated CSS for an entirely new skin format, which degrades performance (because of bigger CSS payload, and so on).

Pega 7.3.1 introduces a set of highly curated, well-documented common CSS Helper classes that you can use to change the styling of visual elements.

These CSS Helper classes can be applied to layouts or cells by using their property panels. You can find helpers for:

  • Centering (horizontal and vertical)
  • Flexbox helpers
  • Margins (including top, right, bottom, left, top-bottom, left-right adjustments)
  • Padding (including top, right, bottom, left, top-bottom, left-right adjustments )
  • 1x and 2x helpers for padding and margins
  • Cursor
  • Height
  • Width[Office8] [WM9] 
  • Text formatting
  • Visibility

The solutions to the metaphorical “hills” addressed here include easily and quickly making styling changes with Helper classes and reducing the size of your generated CSS, a boon to performance.

 

CSS Helper picker

The little hills count, too. We might as well make it easy to discover and apply the CSS Helper classes.  One new practical UI tool, CSS Helper picker, does just that.

To access the picker, click the Gear icon to the right of the Custom CSS class field in the property panel.

CSS Helper class picker
In the helper picker that is displayed, you can browse, learn about, and select a picker to use.


 

CSS Helper class picker
CSS Helper class picker

The new Skin Preview tool, described next, also lets you explore the CSS classes in your app.

Skin Preview tool

The Skin Preview tool is a practical and nifty tool that lessens the hills of understanding the styling that is used across your app and generating a basic style guide.  
Open your app skin rule and click Actions > Launch > Skin Preview.  Explore the styles or click Export to print to create a style guide.
 

Skin Preview
Skin Preview

Taking heed from turnpike designers and rebellious work animals

Had the turnpike designers considered more practical matters, such as the steep hill, with simple solutions like switchbacks or routing the turnpike around the hill, they might have avoided obstinate work animals and frustrated merchants trying to negotiate steep hills.

Similarly, the hills that we encounter when delivering exceptional UI with speed and efficiency are sometimes steeper than they should be, but often practical solutions can be found.  The new and practical UI features in Pega 7.3.1 help lessen the hills that you encounter when building great UIs with the Pega Platform.

About the author

Sam Alexander is a Sr. Product Manager and Front-end developer at Pega. Passionate for all things web and mobile, his broad background before joining Pega includes consulting roles with enterprise customers to build web and mobile apps using other app dev platforms. To him, working at Pega is the dream job: working alongside talented engineers, integrating the latest technology into the platform, and producing software that really does solve business problems. 

Twitter:  @SamAlexand