Mobile XPages: Wireframing the User Experience

03/16/2011 02:17:00 PM by Chris Toohey

In this series, you will be creating a multi-platform mobile device user interface and enhanced user experience for a Domino Server-hosted NotesDatabase app using the Personal Address Book Template.

One of the more important but often overlooked phase of a development project is often the inclusion of representation of the target audience -- or most importantly any project champions -- in the "Design" phase.

Involving a user in the process is apparently taboo... and I find that not many developers actually do this. Let's take a look at an example scenario that, sadly, I've seen play out far too many times:

1. Process Owner/Project Champion Requests an App

   Most of the time, this falls into two categories:

   1. PO/PC has an existing business process, and is simply tired of using Microsoft Excel spreadsheets to run their multi-million dollar organization.

   2. PO/PC is looking to the app to help shape a new business process.

   Either way, the PO/PC absolutely has something in mind... and has simply come to you as a tool to bring their idea to life.
   [..."The hammer is my SDK"]

2. You take the requirements... and disappear!

   At least, that's what the PO/PC thinks. As far as they're concerned, you've used your geekiness to Vulcan Mind Meld with them, you know exactly what they want, "Hell, I gave him our app [spreadsheet]!", and you're off doing... whatever the hell it is that you do.

   For your part, the very best of you may take the requirements documents, look around to see what else kinda works, and use that as a jumpstart in an attempt to improve your delivery time of the alpha release.

   The very worst of you (and me at times, I'll admit), will use this as a pilot project for some brand new, cutting edge, untested (within your organization or skillset, at least) technology or development techniques.

   "Wouldn't it be cool if we could use HTML5 with SQLite offline data access and re-write an entire replication API of the NotesData so I could put this app on Every Single Mobile Device... even tho we only have those old blue BlackBerry devices running OS4 and all they're really asking for is an emergency contact list... BRB, downloading PhoneGap!

3. The next time you call a meeting...

   Based on the PO/PC perception, you're meeting to deliver the solution that is exactly what they had in mind. Even down to the background color.

   "Neon Green" just screams Sales!

   You're calling the meeting to show them your latest portfolio app. It's something that kinda meets their needs, but will rock when you show it off at your next job interview.

   ... and adding iOS Application Development to your resume is just l33t!

4. You both walk away... unsatisfied.

   Your PO/PC can't see how cool your app is, and how amazing of a display it is of the new technology available on the platform.

   I mean, just look at how that background color changes when you mouse over it. That's slick!

   The PO/PC is frustrated. You walked away for like a month... He's been telling his people that the app would be ready any day now. In fact, he didn't even both reading the meeting invitation, but upon receipt of the invite sent a department-wide email to his team telling them that the app would be launched on the date/time you planned to meet.

   But what's this? Half of the columns in his app are missing. It was a lot easier to just enter the data in the columns. He knows where the columns are... so well, in fact, that he doesn't need to look up from the keyboard while he tabs from cell to cell. Sure, there were 65 columns... but he's used to scrolling to the right for 5 minutes looking for the 5th backup fax number for a given contact!

   And where the hell's the neon green background?!

   You both leave the meeting disgusted with one another.

   The PC/PO can't see your genius!

   "That guy from IT doesn't know what the hell they're doing!"

5. Lather, Rinse, Repeat

   You'll eventually get to the point where you're scheduling status meetings for the project every Friday at 4PM... and you take turns every other weekend canceling and rescheduling the status meeting for the following Monday at 7AM.

   When you finally do deploy the application... neither of you are happy with it. Sure, it tracks some contact information, but it's sure not something that you'd show to a potential employer, and the PC/PO still doesn't know why he can't have his Neon Green background.

   You finish the project in disgust, and pray that phase 2 never comes.

   ... and it won't, because the next version of the app [as well as any other projects from this PC/PO] are going to get outsourced.

... yikes, that got dark.

But there's a very simple technique that you can use to make sure this never happens.

Wireframing!

I highly recommend, in the "Design" phase of the project (which should be well before you open any development tools or write a single line of code), that you employ wireframes for User Interface and User Experience development. More importantly, include the Project Champion in the initial "wireframing".

From my personal experience, including the PC in the "Design" of the application -- not to the point where they are weighing in on what technologies are used, of course, but rather how the various user types will interact with the app, etc. --is critical to the short and long term success of the project.

See... the PC will leave the wireframing meeting feeling much more invested in the project since -- per their perception -- it's their design. They've worked with the guy from IT to create something that really works.

They've seen how the app will appear on a mobile device, and can grasp actually understand why having 65 fields on a UI Form just wont' work.

They've seen how their Neon Green background actually looks on a screen... and realize that a more subtle hue is easier on the eyes.

And it's their decision! Sure, we can guide them in certain directions and try to keep them far from others... but at the end of the day, you will have a more invested Project Champion when they feel like they're driving every decision.

... and you'll see an interesting by-product of wireframing with the Project Champion:

The Project Champion will often address scope creep, manage user expectations both upward and downward in the corporate reporting structure, and ultimately become an adoption and usage evangelist for the project!

And at the end of the day, that makes your job a lot easier!

Okay, enough justification, let's get into Wireframing the User Interface for our Mobile XPages app.

Getting Started

[Yeah... this turned out to be a long post!]

There are many rich, full-feature wireframe solutions on the market today. Depending on your needs however, you may be directed to a collaborative-friendly cloud-based solution like Balsamiq Mockups. For me [and for the majority of you out there], there is a free solution that you might not even know about.

The Pencil add-on for Mozilla Firefox Web Browser is a free add-on that I've been using for some time now.

I recommend using the Sketchy Collection (or another drawn-like Collection) to give an approximate look to your wireframes and negate the chance that your PO/PC would think the end-product app UI will

Since I'm acting as the Developer and the Project Champion for the build project in this series, wireframing out a UI/UX was really simple.

Let's take a look at our Home/landing page for our mobile device application:

A simplified UI that will support both touchscreen and non-touchscreen mobile devices.

Keeping with the theme, here's the Contact page:

A simplified but feature-rich Contact page/form for our mobile device app, we start to leverage more on-device external functions like the ability to call, text/sms, email, and even map the address of our contact via an omni-present footer action bar.

In Conclusion...

Now that we understand the desired UI and UX for our app, we can actually start coding!

We can use our wireframes in combination with our requirements documents as development blueprints while our Project Champion is evangelizing the app with authoritative information and not speculation. They're managing scope creep for you -- this is their project after all -- while you deep-dive into the actual project coding.

The next post in the Mobile XPages series will discuss the development of our Home and Contact pages.

Series Permalink: Mobile XPages for Smartphones and Tablets