Evolution of BizTalk360 HTML5 UI from idea to reality

Published on : Oct 26, 2013

Category : BizTalk360 Update

Saravana

Author

I’m a big fan of great UI designs, in-fact it used to be one of my hobbies to play with new UI designs and do some part-time projects, that’s how BizTalk360 was born. I didn’t hire any graphics designers when I started BizTalk360 3 years ago, of course that time I couldn’t afford to have an information architect (that’s their official title these days). But when we were ready for BizTalk360 7.0 HTML5 migration the company is matured enough with enough funding to think about UX and UI designs and we hired few of them (yes, not just one). We know very clearly great designs are not just great visuals, it must be functional and last long testing time (at least 2-3 years). In this blog post I wanted to show you how we iterated our ideas over the past 10+ months.
You can download the entire article as a PDF document. Evolution of BizTalk360 HTML5 UI from idea to reality

Navigation

One of our key goal for the project is, it must be clean, simple and relevant. Don’t add any visuals to make it fancy, every line should have a purpose. We wanted to make sure the UI is learnable, we do not want users to use their critical thinking skills to navigate the application. Navigation is the heart of any application, and this is the area we have spend majority of our time. We explored various concepts, like versions of Stacks and Arrays patterns as well as Drilldown idea, but none of them enables easy switching between items (even though we were very drawn to Drilldown a lot). BizTalk360 HTML5 UI - Navigation Wireframe BizTalk360 HTML5 UI - Navigation Wireframe We looked at various applications for inspirations (ex: Azure Management Portal, AWS portal, some customer support sites like Zen Desk, APM solutions like New Relic + 20 others) and we finally settled down for a variation of Windows Azure Management portal for navigation. BTW what’s used in Azure management portal is not something new, it’s basically an adaptation of Miler columns design pattern introduced back in 1980’s, as one of good replacement for hierarchical organization like Tree View. BizTalk360 HTML5 UI - Navigation Wireframe As you read from the notes on the wireframe there are some clear advantages in using the pattern
  • Suitable for cases where switching between items is necessary
  • Path to the current location is always visible
  • We made a slight adjustment to the pattern, where the parent columns are not shown in full, but just icons with little bit text, and
  • The current column is always visible in full

Design Ideas

Apart from navigation, the other major part of the work is on the overall look and feel of the application.  Our original Silverlight version of BizTalk360 was gray/black dark UI application inspired by the design of Microsoft Expression Blend. So our initial inclination was to build something similar to keep the brand identity and we came up with something similar to the one shown below. BizTalk360 HTML5 UI - Design Gray The gray/black/orange/white theme quite didn’t work out in the new HTML5 design, since it gave a dull feeling and it was not pleasing for the eyes. Moreover we learned in the past 3 years, dark applications are not the most preferred ones when it comes to management/monitoring applications like BizTalk360. Once we decided we are not going to limit ourselves with brand colours, we explored some brave options like the ones shown below. BizTalk360 HTML5 UI - Design Green
You can download the entire article as a PDF document. Evolution of BizTalk360 HTML5 UI from idea to reality
We even attempted to put the navigation on the top as shown below, but the problem with this approach is the width is pretty limited and you cannot add indefinite items. Also I personally didn’t like the flashing orange, at end of the day someone need to stare at these screens for all day long. So we rejected this color theme. BizTalk360 HTML5 UI - Design Orange Finally we settled down for blue/white/orange theme and at one stage the application looked as shown below. There are few issues with this design, the grey header didn’t fit well with the over all design and also the UI for some reason looked heavy with bars all over the place. The blue bars for table headers seems not to serve any purpose and just filled the screen with solid colour, the buttons looked bit clunky. BizTalk360 HTML5 UI - Design First Blue Version We constantly removed things that are not relevant and didn’t adhere to our simple/clean UI pattern. After regular tweaking here and there the final app looks pretty close to what you are seeing here. Of course this is just one screen, but you’ll see this principle applied across the application in each and every screen (make it simple). Some of the things you can note
  • Tables do not have headers anymore, just a simple text with big more bigger font
  • The buttons gone simple
  • The top-left area is trimmed down with minimal icons
  • The design is pretty much flat (notice the tabs).
BizTalk360 HTML5 UI - Design Final Version (7.0)

Sliding Animation for Navigation

During our usability testing we received some valuable feedbacks from our testers and some of our beta testing customers. One of the constant feedback was on the navigation. In our original design, once the user navigates to the second or third level, only icons are displayed for the previous hidden levels. This of course was not practical, since the user need to know exactly what each icon corresponds to. This resulted in users always pressing the back button and navigating to the previous level before they can navigate else where. To address this limitation after various attempts, we finally settled down for sliding menu options, as soon as you move the mouse over the hidden menu, it will slide adjacent menus and show the navigation text as shown below. Now the user can navigate from place to place seamlessly. BizTalk360 HTML5 UI - Sliding Navigation

BizTalk360 in Tablet Devices

We also tested our design in tablet devices like iPad, even though we are not supporting tablets directly at this stage. This is something definitely in our pipeline based on demand. Here is a screen shot. BizTalk360 HTML5 UI - Design IPad View

Full Screen or Fixed Width

We are going to release BizTalk360 version 7.0 with a fixed width, the main reason we adapted this design is for our own convenience. The dynamic full width design is hard to work with, you need to cater for various screen resolutions right from tablets to all the way up to giant monitors. If you are not careful, you may be showing too much data in small screens and too little data in big screens. Working on dynamic layout requires lot of planning and that’s something in our pipeline. During beta testing few people commented on this feature. This is something we definitely going to consider in future versions.

Conclusion

Overall you can see there are lot of efforts gone into redesigning the UI for BizTalk360, now we have a solid platform which will allow us to add more and more interesting features to the product in the future. At end of the day design is a personal thing and I’m pretty sure everyone has a personal choice. We hope we designed something that can please wider audience, so far we received very positive feedback whenever we demonstrated the new UI. Do you know you can try BizTalk360 for free in your own environment for 14 days. Visit our download page, grab the MSI and see in action for yourself
You can download the entire article as a PDF document. Evolution of BizTalk360 HTML5 UI from idea to reality