Tuesday, January 22, 2013

The Mobility Iceberg

Doing Mobility well requires first of all that you build a fantastic app, and that needs to include designing a great user experience, making the app useful and productive, and a smooth deployment system such as an App Store or enterprise distribution. But those are just the visible, tangible parts of an app. There's a lot more that goes on behind the scenes, as the iceberg diagram below shows. Let's take a look at the ingredients of a superior mobile app.

There's more than meets the eye to mobile app development

User Experience
A compelling user experience is an absolute requirement: a high bar has been set for apps, and apps that don't meet expectations rarely get invoked a second time. A compelling experience, in contrast, will instill user loyalty. User experience design, as any UX designer will tell you, involves more than graphic and visual design and layout: there's also the user research that goes into ensuring the user audience and their objectives are well-understood.

The rest doesn't matter if the experience is not compelling
Good user experience design can turn a mundane app into an exciting one. One technique for this is gamification, in which a fun factor and element of competition is injected into the experience. For example, an app for field salespeople might include a leaderboard to show who is on top and encourage others to vie for the top spot. Or, your app might award badges based on achieving objectives.

A beautiful app that doesn't perform useful work isn't much good: you need both form and functionality.

Good mobile apps require deliberate design: a mobile app that is merely a bolt-on to your web presence may not be very usable if screens are hard to make out, controls are too small for touch, data entry is overly-complex, or forms have to be filled out in a single sitting. Mobile First by Luke Wroblewski is suggested reading.

Although many apps are consumer-oriented or about entertainment, mobile apps can serve business well. Below is a sales battlecard app we equip our sales staff with, which describes the service lines, showcase gallery, and leadership team for each of our consulting practices.

Mobile apps are for business, too

The above app is useful, but even more useful are apps that let you get work done.

The app shown below is used for talent acquisition, namely interviewing and evaluation of candidates. This process involves multiple interviews of a candidate (by phone or in-person), then integrating and considering everyone's feedback. Sometimes this takes longer than it should because people are busy or traveling--an opportunity for a mobile app to shave time off the process. By focusing on just this part of the talent acquisition process, the UI can use a simple approach: thumbs up/down and comments from each interviewer. By being able to register evaluations immediately even when not near a computer, the evaluation process advances more rapidly.

Great business mobile apps let you get work done
Your app needs to be distributed in a way that makes it easily discoverable, and it needs lifecycle management.

You'll typically use an App Store or enterprise method of mobile distribution on the deployment side. You'll want to ensure there are mechanisms for feedback and support for your app and that someone is servicing them.

Application Lifecycle Management (ALM) involves putting in place a process for handling updates that includes build automation, testing, deployment, and the store acceptance process. From revising the code to getting vetted app updates in the hands of users should be a well-defined process.

Back-end Services
It takes back-end services to properly support the digital lifestyle. With users expecting to get at their apps and data anytime and anywhere, on any convenient device, back-end services and data provide the highly-available backbone that makes it all possible. They need to be written for scale and reliability.

Global Infrastructure
There's no better place for your mobile back-end than in the cloud. The cloud gives you high-availability, redundancy of app servers and storage, and affordable global presence. It's the nature of mobile/social apps that usage can suddenly burst or just as suddenly deflate, and often the user audience is geographically dispersed. The cloud is perfect for fluctuating load and global reach because of its easy scale, consumption-based pricing, and worldwide collection of data centers.

Business Intelligence
Capturing and analyzing the activity of a mobile app across its user base can provide great insights for a business. For example, if you released an app and saw it being more frequently used in a particular geography or demographic, that would tell you something. If some of your app's features are used much more than others, that would likewise inform you. With sufficient tracking and analysis, you may realize great insights about your market, customers or employees.

Mobile apps are hot, but don't forget the mobility iceberg: a successful mobile app requires work and attention to detail in many areas. The outcome of all that work is worth it, but you shouldn't underestimate what's involved.

Monday, January 14, 2013

Adventures in Windows 8: Task Board, Part 2: An HTML5-JavaScript Windows Store App

I've been learning Windows 8 for the last year, and I blogged about the first serious app I developed last April: Adventures in Windows 8: Task Board, Part 1: An HTML5-JavaScript Metro App. Here finally is Part 2, where I'll describe what I did to bring the app from a prototype created during the preview days of Windows 8 to a functional app now listed in the Windows Store.

Project Task Board app in Windows Store Today

Original Version
You have to walk before you can run, and this app was never meant to be more than a simple one: if you have a project with tasks, being able to show them as "cards on a wall" is often useful to project teams. Implementing this would give me a good start on Windows 8 app development, as I'd need to learn app basics like the App Bar, handling different screen sizes and orientations, touch interaction, and styling. And, of course, there's that process of getting into the Windows Store. My goal was to have my app in before the end of 2012. I made it, but not without a certain amount of work.

I had to choose a development language: WinJS/HTML5, C#/XAML, or C++/XAML. I had equally good backgrounds in the first two, but as I've been immersed in HTML5 and JavaScript for the last year it made sense to go the WinJS route. I'm glad I did, because I eventually ran into a problem I don't think I would have been able to resolve in a XAML approach.

The first incarnation of this app was ready a full year ago in January 2012, and I showed it at various venues including a Windows 8 developer event in downtown LA. When Windows 8 went to release and the Windows Store became active, it was time to revisit Task Board and bring it home. I ran into a few hurdles, let's look at them and how they were addressed.

Original Task Board App during Windows 8 Preview Period

Breaking Changes
First, my project would no longer build under the Windows 8 release. That's kind of the chance you take when you jump into pre-release development. My acquaintances at Microsoft did offer to take a look at my project, but I ultimately decided to start with a fresh code base, for a number of reasons beyond API changes: I was better equipped to structure the solution properly now, and I had a problem in that drag-and-drop of cards no longer worked.

Drag and Drop
Drag and drop is an essential aspect of this app: being able to drag cards around is the whole point of its existence. The method I used for drag-and-drop in the original pre-release app simply no longer responded to touch in the release version of Windows 8. I would have to figure something else out.

I started experimenting with other ways to handle drag and drop, also asking Microsoft for suggestions, and ultimately found two promising avenues: jQuery UI, or the IE10 API for touch events. I chose to try jQuery UI first, and that worked just fine. This is where I think you have an advantage in WinJS over the XAML approach: there are a lot of great JavaScript libraries you can leverage, and it's possible to "get under the hood" when you need to.

jQuery UI drag-and-drop is quite simple and does not require a lot of code once you come to understand it, and it's well-documented. Here's what my code looks like to set up and handle drag-and-drop of cards:

function wireupCardsForDragging() {
        drag: function (event) {

    $(".draggable").click(function (event) {

        drop: function (event, ui) {

            var tileId = ui.draggable[0].id;

            if (tileId.substr(0, 4) === "card") {
                var cardNumber = parseInt(tileId.substr(4), 10);
                cards[cardNumber].left = ui.draggable[0].style.left;
                cards[cardNumber].top = ui.draggable[0].style.top;

A "card" is a simple entity. In HTML, this small markup renders a card:

<div class="card yellow draggable" id="card1" style="left: 50px; top: 140px;">
    <div class="heading">
        <span class="taskNumber">1</span>
     <span class="title">Ramp-up</span>
        <span class="priority">P1</span>
    <div class="desc">Wire up user interface.</div>

Internally, cards are represented by card objects, indexed by task number:

card = {
    top: '120px',
    left: '50px',
    number: 1,
    color: 'yellow',
    title: 'Requirements Gathering',
    description: 'Analyze requirenents and capture user stories.',
    owner: 'dp',
    priority: 1,
    hours: 80,
    status: 'in progress'

Arranging, Tiling, and Stacking
In the final edition of the app, I wanted the user to be able to drag cards around, but I also wanted an "arrange" command that would nicely glide the cards into an orderly arrangement. I'd implemented this in the prototype as tiling, where each card was fully visible. In the final app, I also added a choice for stacking, where each card is closely overlaid and all you can see are the titles.

Cards Stacked

Tiling or stacking are App Bar commands. To provide the glide effect during arranging the cards, I used jQuery animation.

Preparing for Store Submission
Now to tackle Windows Store submission for the first time.

One area I felt I should address was content: I'd used a green blackboard image as a background in my prototyping, purchased from a stock photo side. It wasn't clear to me if the terms would allow me to use that in app submitted to an app store, so I removed it. This gave Task Board a rather dull look with just a plain green background. Mindful of the approaching end of year and my goal of getting an app in the store before that, I decided to worry about fancier background another time. That meant the app as I submitted it looked like this:

Project Task Board in Windows Store, Release 1

Cloud storage was another area I wanted to address. The original app could save and load a "project file" of tasks from the local file system, but I wanted people to be able to share projects collaboratively. It turns out I didn't need to do anything special, as the file open and save picker dialogs include SkyDrive support. The user can browse to their SkyDrive folders just as easily as to local folders when opening or saving a project.

Store Submission, Release 1
The store submission process for a company first requires you to establish an account and have your corporate identify verified. This takes a bit of time and you need to ensure someone in authority is available to be contacted by Microsoft.

With verification out of the way, you're ready to try submitting an app. The Windows Store dashboard takes you through a nice guided experience where you register a name for your app (I couldn't get Task Board, but Project Task Board was accepted), describe it, upload packages, provide notes to testers, and so on. Here's what some of the application detail looks like, summarized.

Store submission passed on the first try, and my app was in the store!

Release 2
A few weeks later, I decided to upgrade the app. I wanted a more sophisticated background, and I also wanted to give the user a choice of background colors and solid vs .patterned background.

I found a good CSS background to use for a background pattern at the CSS3 Patterns Gallery site. This gave the app the appearance you see at the top of this post.

To allow the user to change the background color and style,  I added a flyout to the settings pane. Now, the user can get to an options flyout pane by selecting Windows+C and Settings, then Options.

Options Settings Flyout

My second app submission was accepted, a few hours ago as of this writing, and you can see its Windows Store listing here
Windows 8 has come a long way in the last year, and it doesn't take more than a simple app or two to get your "sea legs" with it. Creating Project Task Board and bringing it to the point where it was accepted in the Windows Store was educational, a bit challenging, and fun. I'm now working on much more sophisticated apps, but this first app was a very necessary exercise in getting started.