The User Interface (Part 3)

Part 3

The Microsoft LightSwitch team chose to change the paradigm associated with the user interface of the HTML client.

SDI (Single Document Interface) instead of MDI (Multiple Document Interface) aligns with the ‘Responsive Design’ philosophy of starting with the mobile application and adding functionality for larger view ports. The SDI interface also provides a task oriented UI that works well with phones and tablets.

One of the things that was most difficult for me was to overcome my focus on packing as much on a screen as functionally possible. I focused on minimizing the number of clicks and screens/pages/forms that a user was required to interact with. On a mobile phone or table I really needed to change this philosophy and focus every touch on accomplishing something of significance.

The LightSwitch team also focused on screen reuse, tabbed documents and functional interaction to create the compelling user interface of the HTML client.

Navigation boundaries is another new, at least to me, concept that presents some interesting opportunities and challenges. The Save boundary, the Nested boundary and the None boundary have been defined to provide interaction context within the LightSwitch application.

Navigation Boundaries

Each time a user moves between tabs in a screen, shows a dialog or shows another screen, a navigation boundary is crossed. There are three boundary options that may be applied at a navigation boundary that affect both the navigation to the target and the return from the target to the source.

The Save boundary option is only applicable when showing another screen:

Before navigating to the target, if there are changes in the data workspace the user is prompted to save or discard these changes.
While showing the target, the shell exposes “Save” and “Discard” buttons.
Before returning from the target, if there are changes in the data workspace the user is prompted to save or discard these changes.

The Nested boundary option is applicable when showing a dialog or another screen:

Before navigating to the target, a new nested change set is started on the data workspace.
While showing the target, the shell exposes “OK” and “Cancel” buttons.
Before returning from the target, if there were changes made the user is prompted to keep or cancel these changes.

The None boundary option is applicable for all navigation scenarios (and is the only option available when moving between tabs in a screen):

Before navigating to the target, no specific behavior occurs.
If the target is another screen tab, the shell exposes the previously visible buttons.
If the target is a dialog or another screen, the shell exposes a “Back” button.
Before returning from the target, no specific behavior occurs.

Additional Reading

Responsive Web Design with Ethan Marcotte

LightSwitch HTML Client (Part 1)

Part 1

The new path forward?

I have been surveying the landscape recently trying to decide where to spend my professional development time for the next 12 to 18 months. I have shied way from LightSwitch in the past because it was based on Silverlight and XAML and I didn’t think that either of those technologies were worth any investment of my time. Recently I have been encouraged to take another look at LightSwitch in the HTML client version. I have decided to pursue this since it fits directly inline with my desire to master the HTML5 stack.

The following series of articles will chronicle my learning and evaluation experience.

The Overview

LightSwitch HTML Client is a HTML5 and JavaScript based application development “framework” environment for building touch based applications. Using a responsive design philosophy you can develop applications starting with the handheld device and increasing functionality based on the client environment. Using Visual Studio you can point and click your way to a functional application within minutes. I personally have done it in as little as 30 minutes.
LightSwitch Architecture

As you can see from the above graphic the application developer has a variety of options at their finger tips with the promise of new levels of productivity. Substantially gone are the days of spending hours and hours on plumbing code.

I am excited to embark on this journey and hope that you enjoy coming along with me.

Additional Reading

LightSwitch HTML Client Architectural Overview