Using Windows 8 design guidelines to build an ExtJS application

The design language surrounding the new user interface introduced by Windows 8 and the Windows Phone operating system is a huge change from the old WIMP (Windows, Icons, Mouse and Pointer) style of interface. There has been a huge shift in user interface design since the introduction of touch interfaces on devices.

This design language is not perfect and has a garnered a lot of criticism from some very established usability experts (see Jakob Nielsen’s Review)

There are however some very interesting use cases in the Enterprise however, which I believe can greatly benefit from the new flat design offered by Metro/Windows 8 – in particular applications in the CRM/ERP space. I’ve seen many CRM and ERP implementations over the last decade which frankly were terrible.

Here are a couple examples:

  • A Salesforce.com customer record which contained several hundred fields on a single page.
  • A Peoplesoft form also containing hundreds of fields that was completely themed in a hideous orange colour which made me nauseous  nauseated to look at for more then 30 seconds.
  • An ERP form which shoved so many components into a tabbed panel, that the tabs were almost impossible to click – let alone read.
Since most of these systems were built in the early 2000′s (or earlier) already heavily customized and firmly entrenched into the enterprise, they are difficult to update, let alone replace without taking on substantial IT and monetary risk as a new project. This is the major reason most banking systems still rely heavily on COBOL for mainframe banking systems – but I digress.

One of the biggest issues with some users of enterprise software, especially in the CRM space is considering the workflow of users on the system. A CRM on its own can not provide accurate insights if data is not entered by the sales team. Issues cannot be resolved if they are not entered and tracked properly.

The Metro design language provides an eloquent way to organize application workflows to optimize for both consumption (think dashboards, notifications and reporting) as well as production (think data entry and business workflow) in an efficient manner.

Compartmentalization

One of the biggest issues with enterprise software deployments is that the out of the box solution does not fit the way the underlying business actually works. This leads to the ‘hacks’ mentioned above and quickly makes the software unwieldy. The Metro interface allows for the application to be broken down into a hierarchical system which can then provide units of functionality which are optimized for the end user.

Lets turn our attention to the design pattern:

hierarchyThe design pattern describes an application being laid out in a 3 tier hierarchy where the upper levels provide either direct access to lower levels or a summary section of related items.

The top level of an application in the hierarchy is referred to as the Hub. This is the topmost level and consists of groupings or sections of what Microsoft calls Live Tiles.

These live tiles can easily form both a navigational structure as well as provide some at a glance dashboard functionality as the tiles themselves are capable of receiving and displaying both data as well as realtime notifications.

Each section header can take the user to the next level in the hierarchy called a Section page which again contains more tiles specific for that grouping. The final level in the design guidelines is the Detail page which contains the actual item details.

Ok, that is the general outline – so where does this leave us with ExtJS? Well there are a number of things about the ExtJS framework which give us immediate benefits such as the ability to layout arrangements of containers to implement the design language. Secondly, theming enables the construction of absolutely gorgeous interfaces which look nothing like out-of-the-box apps using the base theme. The greatest benefit was just announced at SenchaCon 2013 – that fact that ExtJS will be supporting touch! Windows 8 applications utilize significant amounts of horizontal and vertical layouts which require the ability for the user to scroll seamlessly. When these features are implemented, it will be a cinch to either scroll with a mouse or your finger – making it a perfect choice for building applications suitable for both desktop and mobile use.

So what is possible? Well here are a couple screenshots of a demo app I created to implement a Metro-style theme. Here is the main Hub:

hub

For inspiration, I used some screenshots of the upcoming MS Dynamics ERP Refresh which is starting to percolate online. Here I have the ability to create a number of live tiles capable of containing a wide variety of information including icons, notification badges, text items and even charts! From this screen, a user can be presented with at-a-glance data elements, then drill down to the corresponding item. To implement the Section level here is a sample screenshot from the theme I’ve been working on:

section

Now as for the Detail screens – I’ve been spending a lot of time working on the theme to be able to show wide variety of possible detail screens. The possibilities are truly endless. Stay tuned and I’ll post some screenshots of these in the coming weeks.

ExtJS provides all the features required to implement innovative and powerful Windows 8 style applications.

Plug

Hope you enjoyed reading this article. If your project could use some of the theming I’ve developed – please feel free to give me a shout. I’m currently available and looking for projects. Contact Information

Resources

Microsoft Windows 8 Design Patterns

Google+