Social Objects

I went to an ‘event’ a couple of days ago organised by the cartoonist Hugh MacLeod (www.gapingvoid.com).  Hugh talked about using cartoons as Social Objects.  He asked us to bring along a social object of our own and after some thought I came up with the idea of an App as a Social Object.

I only had a spare hour on the train on the morning of the event so the App was going to be pretty simple.

Without having to give too much thought I quickly turned the invitation to the event which had arrived via an email into the ‘social object’ App.  The images and text simply being lifted and re-formatted to suit to phone.

The event was being held at 1 Alfred Place in London and in order to get there I had to walk from Euston Station so I used Bing Maps and grabbed a section of the map, suitably zoomed for my image.  I added pan and zoom so that I could move around the image and created a directions page.  I used the Bing London Street Map which is far more useful than other forms for the tiny streets in the capital.

I didn’t use the the WP7 Maps for two reasons, firstly I didn’t have time to learn how to make it work and secondly the phone signal can be patchy and I didn’t want to have to rely on it for the App.  Also the London Street Map is not available on the phone.

Finally I quickly created a Tile image and deployed the App to my phone.  I had a social object…

I showed the App to a few people at the event and the general reaction was ‘wow’, the fact that I had created it specially being the main significance as obviously the App itself is trivial.  I do however tend to forget that outside the technologists and developers that I work with; for most people software is a black art…

I’ve spent a couple of hours since refining the App to implement clipping, though the screen shots above are from the original.

Using WP7 gestures for the image Pan and Zoom on the map was pretty simple to implement but the image moved outside the bounds of the canvas I created.  In order to clip the map so that it did not overwrite the rest of the text on the screen I had to implement a clipping behaviour.  Given that the behaviour is both quite simple to implement and of such obvious benefit I am somewhat surprised that it’s not available by default.

There are quite a few clipping examples around but none of them have the elegance of this solution which implements a clipping behaviour:

http://www.pitorque.de/MisterGoodcat/post/Windows-Phone-7-Pinch-Gesture-Sample.aspx

Oh and the evening? I can’t complain – free beer is a good way to encourage positive feedback! Hugh rambled a bit and didn’t make any effort to see the audiences social objects which was a disappointment as I’m sure there would have been a lot more audience participation.

Advertisement

Silverlight Metro Theme

The WP7 currently has a tiny market share so writing apps to target both the WP7 and the desktop using the same code base makes a great deal of sense to me.  Especially for tools such as Master Key which has as much validity (if not more) on the desktop as it does on my phone.

I picked up a copy of the Metro Theme from a project on Codeplex and copied one of the Master Key XMLA pages over.  It worked pretty well but in the end I’m left in the position of having to do a great deal of work to make the page fit into a browser window rather than the phone.

http://metrotheme.codeplex.com/

There are a number of issues.  Firstly the fonts and lines used to render on the WP7 screen look huge when viewed in normal Windows resolution; secondly the theme is incomplete and has missing features.  While all this can be fixed by modifying the theme it’s a lot of work.

Secondly, and obviously, the browser environment is significantly different to that of the WP7. The hardware back and close buttons have to be provided in Silverlight and handled in the browser. From a browser UX point of view these buttons would typically be at the top of the screen.  Handling ‘back’ is less of a problem as the browser supports this. However the browser also provides ‘forwards’ as well and the user can also pick an item from the navigation history and jump directly there, neither of which are possible in WP7.

Having experimented with directly porting the WP7 app and finding it a less than compelling outcome I searched around for the Silverlight theme to use.  After some experimentation I picked up a Window 7 theme that the Silverlight dev team released (see Tim Heuer’s blog http://timheuer.com/blog) and have used this as the basis for the Windows version.

The project template also provides a navigation framework which is really useful and this integrates into the browser navigation history providing back/forward support.

It was pretty simple to take a WP7 page and convert it to Win7, for the most part the XAML simply pasted directly and only needed to be lightly manipulated to fit.  Over the space of a couple of days I had pretty much replicated the App, however…

However, it was apparent pretty quickly that the integration into the browser navigation was not going to work, the history just kept getting bigger and worse I could jump forward when it was illogical to do so.  I spent a lot of time trying to make it work but in the end it was just too confusing from a UX point of view.  I switched it off and suddenly the navigation became a whole lot more logical as the framework is tabbed

The ApplicationBar in WP7 is a great little control and works really well on the phone.  It’s location at the bottom of the screen near to the where your fingers lay makes for a great UX. 

I considered briefly writing a version of this for Silverlight but decided against it as the more normal windows layout is better and the Ribbon interface is clean and well accepted.

In the end I decided that the simplest approach was to revert from having ApplicationBar based button back to a more traditional approach with the buttons embedded into the UI.  This is perfectly valid when there are so few buttons required to make the App work.

It was apparent as soon as I started to think about a Silverlight version of Master Key that combining the item selection and its content into a single page would be the best approach; so for WP7 the user is shown the Vault Entries as a list:

And when an item in the list is selected is is displayed on a separate screen:

This works really well – the UI is easy to use and quite clear in its intent.

Combining the two screens and modifying the UI slightly gives this screen:

Master Key on WP7 relies on the phone timeout kicking in to prevent unauthorised access, on my phone it’s set to a minute after which it will tombstone and the user has to re-enter the password to regain access to the information when the app is reactivated. 

In the browser environment this has to be done within the page by running a timer that will prevent access if there is no activity.  I’ve added a progress bar at the bottom of the screen – after 30 seconds of inactivity the page will close and revert to the login screen. Job done!

The core functionality of Master Key for WP7 has moved without change to the Silverlight version.  I’ve not had to touch a line of code in the data access layer to make it work and this includes the WCF service code (though to be fair I added the service reference to the new project and it auto-generated the appropriate code).

You don’t need to be too eagle eyed to see that the two vaults are the same – I simply loaded the demo vault into both versions of the App from the web service.

So the end result is that I now have a WP7 and Windows version of Master Key and the vault files are interchangeable between the two.  Also I now have a good idea as to how much additional effort has to be put in to convert between the two platforms.  I have a bit of work still outstanding to be able to launch the desktop version from the MasterKey service but I don’t anticipate this taking a lot of time.

One thing – I am pretty frustrated with myself for using the Windows 7 theme rather than Cosmopolitan as this is the closest the the WP7 Metro theme.  I was hoping I could simply swap themes but this failed on my first attempt to replace the Windows 7 theme. I’ll have to spend some time working this out when I have a chance.

Master Key version 2.0 published

I’ve spent the last couple of months working on upgrading Master Key to version 2.0.  It’s been quite an interesting process as it makes use of the remote storage facility I have written about previously. 

I had this working in version 1.0 to allow me to save/load my data while the App was under development but it was really just prototype code.  I have added full support in this version of the App so that Load Vault and Save Vault are fully defined in the UI and perform robustly.

Master Key version 1.0 was primarily about creating a completed and fully functional App and understanding the Marketplace publishing process.  Version 2.0 rounds this out to create, what I consider, to be a really useful App that can be used day to day to remember multiple passwords; I’ve surprised myself by currently having 21 items stored.

Oh and I’ve not been disappointed with sales either, as they have lived up to my expectations of being pretty minimal.   Writing Apps for the WP7 at this time was never going to be about the money as the potential market is tiny. 

However I have my doubts about writing Apps for any platform; there have been some notable successes but for the vast, vast majority of Apps the cost of development far outweighs the money that can be generated from sales.

I chose to write Master Key because I had a well defined requirement and it’s a very widespread issue that we all pretty much share.  However it is lost amongst a mass of other competing Apps, some good but mostly crap and it’s really hard to get noticed.

When I started writing Master Key I was slightly concerned that it might be refused because it is not unique but this was quickly dispelled when I saw how many password saving Apps had been published – clearly uniqueness is not a criteria that is applied otherwise there would be thousands of ‘squatter’ Apps blocking the quality or more functional solutions.  In an ideal world the quality Apps would bubble to the top but this is not the case, first mover advantage especially with a few good reviews reduce the chances of similar Apps quite significantly.  And of course its relatively easy to ‘game’ the system by creating false accounts and/or getting mates to post positive reviews.

Without throwing money at good old fashioned marketing and advertising its hard to see how an App really stands much chance of being distinguished and as the money to be made is pretty low to start with that’s something of a fools errand.