Articles: Mark Chamberlain

Tags:
View Cloud
 
 
Authors:
 

Why in the world are we doing this?

For years my career has benefited from being able to open a web browser, issue a simple web search, and learn from the trials and tribulations of those who have gone before me. I know I’m not alone here! The unfortunate thing is, up until now, I had not begun contributing back to the community that has helped make me an effective IT professional.

So, that’s what this blog is for: giving back. We as software developers have occasion to run across something new and interesting as we create, and I have challenged my team to share those things so they may possibly be a help to others. We’re pushing the technology envelope in an industry that is not known for technical prowess, and I believe we should have regular breakthroughs that are worth sharing. Stay tuned!

Our flagship contribution is an Open Source framework we call “Workflow Carousel” (WC) and the “Workflow Carousel Library” that sits on top of it, both written by Bob Fornal (you can see his introductory set of posts about WC here). Soon after joining Select Sires in 2013, I had some ideas on using a mobile website to streamline an internal process, and the team put together a pilot of an “app” that is highly gesture-based. The real-world process follows a repeated workflow, so the app was built to repeatedly guide the user through the necessary steps to complete their job. WC came together in the second iteration of our pilot after originally trying to accomplish things with a mixture of a traditional carousel and vertically-oriented lists.

The best part of my job is being able to take crazy ideas and have our team make something out of them. I believe the original inspiration for what I wanted to do came from seeing Internet Explorer’s Flip Ahead feature, but things didn’t come together for me until I saw the Hammer.js carousel example. I’m not sure why, but I tried swiping up from the bottom on their example. It didn’t do anything of course, because Hammer.js isn’t built to do that. Once I realized what I did it just hit me: we need movement in 2 dimensions!

After displaying my poor drawing ability to the team for a while on the whiteboard we came up with the following understanding and concepts:

  1. Each step in the real-world process should have a dedicated screen (called a Card in WC) that is aligned on a horizontal continuum, so you transition from Step 1 to Step 2 and from Step 2 to Step 3 etc. by swiping from the right-hand side of a device’s screen toward the left (a modern carousel forward-action).
  2. Each step in the real-world process may have multiple options for the user to choose from, each with a significant amount of useful information (in other words, not suitable for a simple list). These options should each have a Card and be aligned on a vertical continuum, so while on Step X you transition from Option A to Option B and from Option B to Option C etc. by swiping from the bottom of the device’s screen toward the top. Once you have made your choice you can continue along the vertical continuum to the next step.

    image source: http://adventuretime.wikia.com/wiki/File:Kevin-Butler-Mind-Blown.gif

  3. Cards should natively support forward/backward/up/down, however each implementation of a Card should be restricted to only the actions which adhere to the rules of the real-world process workflow.

Here’s a visual example of a workflow with dependent and independent interactions between the choices made in each step:

Step 1 Step 2 Step 3 Step 4 Step 5
Dashboard Option 2A (default) <-> special action/information chained to
Step 2 Option A
Option 4A (default) Complete - go back to Step 1
Option 1A Option 2B <-> special action/information chained to
Step 2 - Option B
Option 4B
Option 1B Option 2C <-> special action/information chained to
Step 2 - Option C
Option 1C
Option 1D


Bob’s articles do a great job of setting you up for success with using the framework. We have published the source on GitHub and welcome contributions back. Happy swiping!

 
by Mark Chamberlain
16 May 2014
Tags:
  • Workflow Carousel
  • Philosophy


 

You are not allowed to post comments.

 

Why in the world are we doing this?

For years my career has benefited from being able to open a web browser, issue a simple web search, and learn from the trials and tribulations of those who have gone before me. I know I’m not alone here! The unfortunate thing is, up until now, I had not begun contributing back to the community that has helped make me an effective IT professional.

So, that’s what this blog is for: giving back. We as software developers have occasion to run across something new and interesting as we create, and I have challenged my team to share those things so they may possibly be a help to others. We’re pushing the technology envelope in an industry that is not known for technical prowess, and I believe we should have regular breakthroughs that are worth sharing. Stay tuned!

Our flagship contribution is an Open Source framework we call “Workflow Carousel” (WC) and the “Workflow Carousel Library” that sits on top of it, both written by Bob Fornal (you can see his introductory set of posts about WC here). Soon after joining Select Sires in 2013, I had some ideas on using a mobile website to streamline an internal process, and the team put together a pilot of an “app” that is highly gesture-based. The real-world process follows a repeated workflow, so the app was built to repeatedly guide the user through the necessary steps to complete their job. WC came together in the second iteration of our pilot after originally trying to accomplish things with a mixture of a traditional carousel and vertically-oriented lists.

The best part of my job is being able to take crazy ideas and have our team make something out of them. I believe the original inspiration for what I wanted to do came from seeing Internet Explorer’s Flip Ahead feature, but things didn’t come together for me until I saw the Hammer.js carousel example. I’m not sure why, but I tried swiping up from the bottom on their example. It didn’t do anything of course, because Hammer.js isn’t built to do that. Once I realized what I did it just hit me: we need movement in 2 dimensions!

After displaying my poor drawing ability to the team for a while on the whiteboard we came up with the following understanding and concepts:

  1. Each step in the real-world process should have a dedicated screen (called a Card in WC) that is aligned on a horizontal continuum, so you transition from Step 1 to Step 2 and from Step 2 to Step 3 etc. by swiping from the right-hand side of a device’s screen toward the left (a modern carousel forward-action).
  2. Each step in the real-world process may have multiple options for the user to choose from, each with a significant amount of useful information (in other words, not suitable for a simple list). These options should each have a Card and be aligned on a vertical continuum, so while on Step X you transition from Option A to Option B and from Option B to Option C etc. by swiping from the bottom of the device’s screen toward the top. Once you have made your choice you can continue along the vertical continuum to the next step.

    image source: http://adventuretime.wikia.com/wiki/File:Kevin-Butler-Mind-Blown.gif

  3. Cards should natively support forward/backward/up/down, however each implementation of a Card should be restricted to only the actions which adhere to the rules of the real-world process workflow.

Here’s a visual example of a workflow with dependent and independent interactions between the choices made in each step:

Step 1 Step 2 Step 3 Step 4 Step 5
Dashboard Option 2A (default) <-> special action/information chained to
Step 2 Option A
Option 4A (default) Complete - go back to Step 1
Option 1A Option 2B <-> special action/information chained to
Step 2 - Option B
Option 4B
Option 1B Option 2C <-> special action/information chained to
Step 2 - Option C
Option 1C
Option 1D


Bob’s articles do a great job of setting you up for success with using the framework. We have published the source on GitHub and welcome contributions back. Happy swiping!

You are not allowed to post comments.