As we see rapid adoption of devices with multiple viewport sizes, responsive web design (RWD) is no longer optional. It is an aspect of user interface (UI) creation that demands serious consideration and decision making. Until now, we typically saw this as applicable just on websites that would be accessible on multiple devices. But now business users expect the same level of user experience while participating in enterprise business processes using enterprise systems. They want a user experience that’s equivalent to what they get when they use, say, their other social or retail apps! So, IBM Business Process Manager (BPM) has started offering responsive UIs to provide a tailored user experience to BPM users based on their devices. The reason for a BPM product to lead here is obvious, since good usability is one of the keys for the success of a BPM initiative.
IBM BPM V8.5.5 leads the way by providing a structured method to create responsive UIs. Ethan Marcotte, who coined the term responsive web design, recommends fluid grids, flexible images and media queries as the three technical ingredients of RWD. IBM BPM V8.5.5 does not merely adopt these technical recommendations. I think it adopts a much more comprehensive way of thinking for responsive UIs, with the goal of enabling optimized user experience across devices. It allows a UI creator to define grids with variations for different viewports. It allows flexible placement of UI controls within the grid, with the ability to configure viewports based on variations in visibility, style (for example, double radio buttons versus slider) and mode (for example, maps with or without satellite views) of the UI controls.
|Ethan's RWD recommendations||IBM BPM V8.5.5 responsive UIs|
|Fluid grids as a fundamental feature of the screen layout||Allows arrangement of individual horizontal and vertical sections into a table or grid|
|Text and images to be optimized while ensuring readability and quality||Allows viewport-based variations to be configured for text and images|
|Additional responsive characteristics||IBM BPM V8.5.5 responsive UIs|
|UI objects’ visibility||Allows viewport-based variations to be configured—for example, show or hide maps|
|UI controls’ style and mode||Allows viewport-based variations to be configured—for example, maps with or without satellite view, sliders versus double radio buttons or checkboxes|
Moving beyond the design characteristics in these tables, as devices evolve responsive design thinking should bring in many more exciting ideas such as the really cool transition effect when a viewport is resized.
Like many other technology topics, this is not a static technique for us to implement once and stop. I think the responsive way of thinking will egg us on to continuously understand new devices, their features and usage patterns, and to use them in responsive UI design to reward users with an ever-improving user experience. As I explore and create more UIs with IBM BPM Process Designer, the possibilities to delight the user seem immense.
There are also other design patterns to create device-optimized user experiences like responsive web design with server-side (RESS) and adaptive web design (AWD). Irrespective of the design pattern chosen, I think optimizing user experience based on devices and viewports will be a critical imperative for user interface creators.
The more I explore and visualize the user experience that I can offer to BPM users through IBM BPM, I feel excited as well as a bit greedy. I wonder if in the future we will offer even more than three viewport options—perhaps options based on size or pixels, or custom viewports that developers could define. I am sure we will see the evolution of these features based on market feedback and trends.
Do you prefer a UI that adjusts itself based on the device, as user or UI creator? Do you think such a design fits BPM UIs? I would love to hear from you if you have opinions or more information on this interesting area of UI design. Please leave a comment below, or follow me on Twitter at @adityapdutta.