I travelled back from London yesterday after a great couple of days at the BETT show.  Last year was the first time we’d really shown off any of our applications, demonstrating our Silverlight and SharePoint based VLE, but this year we were launching our new brand OPENHIVE and releasing our full suite of products to the world.

there were a number of other stands I wanted to visit during my time there having heard a lot of chat on twitter (#BETT2010) in the days before and at the start of the event.  So here are a few of my personal highlights…

OPENHIVE Launch

It was Wednesday morning when we unveiled the stand to an expectant crowd.  I was at home after a couple of long days ensuring everything was up to scratch with our application interfaces and some of the digital aspects of the marketing.  We had some positive feedback get back to the office, but it wasn’t until I arrived and could for myself see how well everything had come together – the stand, branding, demo pods, screen animations and ‘freeBees’ including of course – the bee balloons!  What really got me was how positive and excited everyone on the stand was, clearly ‘buzzing’ from the great feedback and reception we’d been getting.  A great launch, bringing together almost a year’s hard work.

Futurelab

I’d come across Futurelab via a reference on twitter and noted them as being an interesting company doing interesting things.  Aside from some game-based learning apps and some great creative use of display and interaction, something that caught my attention was a Haptic feedback HCI device.  Using a pen type element mounted via universal joint on an articulated arm, the user is able to manipulate a cursor on screen, interacting with an elastic 3d plane and receive feedback provided via resistance in the movement of the device’s arm.

It’s one of those things that gets you thinking about potential applications.  The technology isn’t brand new, being employed in medical training (think surgery without the patients) and neither is the concept of feedback to anyone who’s played a games console in the last 5/10 years.  But it should be considered as another option in the ever growing menu of ways to interact with a digital environment (especially where feedback is an important factor), as well as being really quite cool to play with.

SIMS Discover

For those who may not be familiar with technology in the UK education sector, SIMS from Capita education services is the MIS used in around 80% of schools in England, Wales and Northern Ireland.  They were attracting quite a bit of attention with their prototype Discover application which interested me for a couple of reasons.  Firstly they are now a (step?) sister company to my employer, Synetrix.  Second, I’d heard that it had been developed in Silverlight – a technology we also make much use of in presentation of schools data, often derived from SIMS.

I was quite impressed with their consideration of touch, and drag and drop functionality.  The interface itself is nothing ground breaking, and in it’s current prototype form seems slightly limited (though doing a small number of things well is no bad thing) but it’s great to see some real thought being given to how an everyday user can manipulate a large range of data sources, in a usable manner, to gain some real value as a result.  Their mantra during development of ‘as easy to use as an iPhone’ is a good one when considering touch based interfaces for the masses.

Smart Augmented Reality camera concept

Continuing a 3D theme that many thought was the hallmark of this years BETT (from a new technology perspective at least), Smart technologies had a proof of concept being demonstrated using one of their document cameras and some clever software.  Making use of plastic cubes with 6 different patterned sides, the software is able to recognise the shape ad position, displaying a 3D model in the position, angle and direction of the cube.  It was set up so that on shaking the cube, an new model was loaded.  Alternative methods showed flash cards and a book with different patterns on every other page, presenting the possibility of having a truly 3D popup book ‘experience’.

Garlic and Shots!

Finally, apologies to anyone who visited the stand on Saturday and got more than they bargained for during a demonstration or conversation.  I suspect it may have been a joke on the part of a certain member of staff who recommended the Olsson Bros restaurant for the team dinner on Friday night but while a great time was had by all, Saturday found us munching the mints, and trying hard to talk to people without breathing on them!

All in all – a great show for lots of different reasons, it doesn’t get much BETTer than that ;)

It’s my intention that this would be supported with demos of our real world, existing Silverlight (2 and 3) applications, and the content comes from the experience we’ve gained at i2Q/Synetrix over the last two years we’ve spent working with Silverlight.

Please cast your vote here and help me spread the word on…

“Baking a great Silverlight UX: the recipe for successful designer-developer collaboration”

Abstract:

In order to make the most of a User-Experience focussed platform like Silverlight, we need to adopt a design-led development process.

To achieve this successfully requires close communication and collaboration between designers and developers.  We have the tool in Expression Blend, but how do we best utilise it to ensure the end solution remains true to the vision?

Find out some of the best practice and tips of complex Silverlight application development, learn how to avoid the pitfalls and enable designers to best leverage this powerful toolset for a great user experience.

Draft Outline:

• User-centric design
  • Keeping the user in mind at all times, focussing on how best to help them achieve their goals. Which in turn leads to a…
• UX led development
  • Where the user requirements and client specification inform the interface and workflow (in the View), which in turn informs the interaction and logic (in the ViewModel)
• MVVM FTW!
  • Not technical, but what the benefits are from a designer’s point of view, and what it means for “Blendability”
• Blendability
  • How easy it is to view and edit a data-bound user control, custom control or template from within Expression Blend. (Not whether or not you can turn an iPhone into a smoothie)
• Communication & understanding
  • Ongoing, regular and close collaboration between designer and developer in the context of an agile, iterative development process.
• Improved results
  • The combination of all of the above empowers the designer to exert greater control over the evolution of the application’s user experience.

Take Away:

At the end of this session attendees will take away an understanding of the real world benefits of user-centric design with a Model-View-ViewModel architecture, and practical tips on how to achieve the best possible end result through effective collaboration.

Knowledge Areas:

Silverlight, MVVM, designer-developer workflow, Expression Blend

Level of this presentation:

Aimed at beginner to intermediate practitioners, maybe of interest to advanced Silverlight developers / designers too, dependent on their current working practices.

The fundamental elements of win…

Twitter = Air

The Twitter platform seems pretty ethereal at times, especially when trying to nail down the business model.  But like air it pervades everywhere, if it’s not there we certainly miss it (though perhaps not quite as crucially :), and – this is my favourite analogy – sound cannot communicate in a vacuum.  Twitter acts as the molecules in air, with sound waves emanating from one source and radiating out.

Tweetie 2 = Water

Angela Dodson: So why water?
John Constantine: It’s a universal conduit. Lubricates the transition from one plane to another.

Constantine, 2005

Tweetie offers an attractive UI and experience that smoothes the process of transmitting and receiving, acting as filter, magnifying glass, and multi-channel broadcaster.

iPhone 3Gs = Fire(?)

Probably the most tenuous analogy, but I’m sticking with the theme.    Services like video and Image publishing on yfrog wouldn’t exist without the technology providing the need, and kindling the ‘fire’ of development and innovation.

Combined

Recently I got a new iPhone 3Gs as warranty replacement, and while I’d tested out video in a “yep, that works” cursory fashion – I’d not yet tried to do anything useful with it.

So I found myself at the excellent Yardbird in Birmingham where DJ Vadim was playing live with his band. Wanting to share the moment but feeling just sending an image to twitpic doesn’t really cut it, I thought I’d just see if it was possible to send video attached to a tweet via tweetie 2 with its improved functionality and UI.

So…

1. new tweet
2. write some text
3. click word count / features button
4. “use camera” hmm … sounds promising, it’s not specifying ‘photo’
5. record video
6. “use”
7. send!

Stuck the phone back in my pocket and checked back a couple minutes later to find it had posted the video to yfrog, and the message to twitter.

http://twitter.com/spacescape/status/5108928191

Now I know all this sound very simple, child’s play even – but that’s kind of the point – the ease of use of the whole thing.  So many times you try to use an application or piece of technology in a way that you *think* it should work, and find yourself disappointed.

Brilliant – another glimpse of the future, and I’m liking what I see.

By the time HTML 5 is prevalent across all major browsers, say maybe up to two years away (and I suspect still to be largely reliant on how long the fully HTML 5 supporting version of IE has been available), Silverlight should be up to version 5, going on 6 – by the current rate of progress.

The talks given by Bruce (of Opera, opinions his own :), and also Aza Raskin (of Mozilla) at FOWA point towards the future of HTML web applications and their integration with the browser.  By adding more application oriented standards to the markup, and increasing the intelligence of the browser, they are becoming a more powerful tool in themselves, devolving some of the control from the applications within.

With Google’s approach to creating a web based operating system via Chrome – providing their suite of apps, new /old methods of communication via Wave and Gmail, and access to more content than you could shake a stick at… i can see why MS may find themselves playing catch-up here.  Though I’m glad to hear that (at least for now) that MS are not going with Silverlight for their forthcoming Office 2010 web apps,  from what I’ve seen of Outlook Web Access 2010 - if they can deliver a similarly well implemented UI, they may be onto a winner with the scale of their existing user base.

Via the AIR runtime, Adobe have stolen a march (cross platform at least) on Microsoft but it seems based on a slightly flawed technology (Flash/Flex) not designed for purpose from the outset.  I’ve also just been shown the latest Apps on www.acrobat.com, and it looks like Adobe are having their own go, allowing you to create, share, collaborate and export as PDF documents via a Flash based word processor… though I’m not sure why you would want to.

What MS have in Silverlight is a very powerful, easily deployed platform with the potential for delivering really bloody complex, bespoke applications with advanced, custom, tailored user interfaces.  And games, probably games too.

But you don’t really want to be experiencing this experience within the environment of a browser.  With HTML 5 providing the capability of features like Canvas (shame video may be consigned to politics hell) and more consistent cross browser implementations of  the scripting supporting it, Silverlight and Flash developers will have to work harder to to justify their use versus an increasingly sophisticated, plug-in free and fully open standards based, browser-native platform.

MS have taken the first step in unleashing Sliverlight in version 3, with Out Of Browser support.  This enables you to run your Silverlight application from the desktop, off the internet, at your convenience.  Except that right now, it isn’t as convenient as it could be, if it had some more of the features of its parent – WPF.

When Silverlight is able to step out of its sandbox and wear its own chrome, OS independent, it will be a true platform in it’s own right, without need or limitation of the browser.   Sounds a bit prophetic, but I wonder if that may be its making or breaking.

The idea behind this set of talks was to take a look at the options currently available, or on their way for creating Rich Internet Applications.  Unfortunately we couldn’t get representation from the Flash community, but Bruce Lawson was there to give his popular talk from FOWA on HTML5, and I offered an insight into the features of Silverlight and Expression Blend 3.

The slides are available…

• On Slideshare
• Or as a PDF, including my speaker notes [3.5Mb] for extra info (click or hover on the pink note icon top left on each slide)

I’ve also uploaded the example project I used in the demo [2.5Mb]. Included within the root of the Project folder is the XML I imported using the sample data function to populate the list box if you want to try it out yourself.

Details of the features demonstrated in the sample:

• Grid Settings & Layout
• Custom fonts & embedding
• Pixel Shading - Drop Shadow
• Sample data XML import
• Create List box from sample data
• Template resources (listbox item)
• Element > element binding between Listbox & text block
• Storyboard timeline animation
• Behaviours to trigger animation
• Out of Browser / save to desktop

Links mentioned in the talk:

• Silverlight smooth Streaming Demo
  • http://www.iis.net/media/experiencesmoothstreaming
• SketchFlow
  • http://www.microsoft.com/expression/products/SketchFlow_OverView.aspx
• Expression Blend trial
  • http://www.microsoft.com/Expression/try-it/default.aspx

I have a load more links detailed under a previous talk, all around getting started with Silverlight – lots of useful blogs and resources if you’re new to the platform:

http://www.space-scape.com/index.php/2009/04/01/silverlight-insight-talk-real-world-experience

Finally, I realised afterwards that i didn’t demo our latest app which came out of the work we did with SketchFlow.  I’ll see if I can get a screencast done, as it’s certainly one of the most polished products we’ve produced, and a good example of the more conventional line-of-business type apps.

Thanks again to the Multipack for another cool Presents Session.

The future of Front-End Engineering

Britt Selvitelle – Twitter Inc.

Check out the forthcoming Tweetie2 - http://www.atebits.com/tweetie-iphone/ - Nice new features – that’s what gets twitters devs excited.

Twitter = Platform … twitter.com = the Twitter ‘web client’

Announced here - ‘twitter labs’ (to be renamed)   - facility to allow them to be more playful and experimental with features – relaeasing them to a small subset of users

• Dark coding(?) – turning features down according to demand // capacity / issues.
• If you’re creating a service, aim to release an API with alpha 1.0.

The Future of the Cloud

Simon Wardley – Canonical

to summarise – either ‘the cloud’ is based on open source, or we risk losing internet freedoms.

What we need to avoid some of the pitfalls – is open source and standardised method of switching betweensproviders.

The Future of Agile (and Rails)

Yehuda Katz  - Engine Yard

Responding to Change is the key statement… or Preserving the ability to change in the future.

Basically … Suggestion is that Ruby, and Rails offers a framework that is supports the above ethos.

Creating a Mobile Widget

Interesting demo – showing how easy it is to create an App for use on the Vodaphone 360 device (and others). USing HTML/CSS/JS, runs in chromeless opera browser

• JIL – joint Innovation Lab (consortium of Vodaphone, Verizon and others)
• App star comeptition, and HelloApp widget comp

How to increase the Accessibility of your web app

Robin Christopherson – AbilityNet

Literacy, Dyslexia… Accessiblity is importnt.  It doesn’t jsut benefit disabled users – able users are better able to complete tasks.

Great demonstration of how a disbaled user experiences Facebook.  Such a different experince with the voice.  Mobile version make for a much more streamlined and less confusing experience – due to the lack of functionality related javascript and markup

• MVDA video accessibility
• JAWS very much the more advanced screenreader.  Using WAI-ARIA, elements like drag and drop list boxes become usable with alternative options for making selections
• Captchas – bad.  see zurb.com. Plenty of alternatives; such as

Marketing your Web App – The future of online marketing

Alex Hunter

Most developers believe that ‘Marketers are the cancer on the nutsack of creativity’

However – it is important.  Without it, your app or brand is set up for a whole load of Fail.

Important thing to remember when looking at social marketing and networking is that people don’t want to connect with ‘Brands’ they want to connect with ‘people’

why – because we feel they care.  Staking your own reputation on it.  Belief in your product says a lot.  Belief equals credibility.

The Future of Print Journalism

Lynne D. Johnson - (ex FastCompany.com) … Advertising Research Foundation

Print will continue, in one form or another – most likely at a premium, subscription tyope affair.  Print IS in decline.

• Craigslist took the classifieds
• eHarmony took the personals
• Google to the little ads for niche products
• … and Argos can email its customers itself, if it wants to announce a sale.

Social is where it’s at… as we know.

SodaHead and The Huffington Post are examples of the personalised news, from social sources.

As per the Guardian yesterday (with their Data store and platform), the New York Post has a developer centre.  Traditional print organisations need to start thinking like web developers… platforms and apps. CONTENT PROVIDERS.

Start-up Metrics for Pirates

Dave McClure – Founders Fund

• Acquisition
• Activation
• Retention
• Referral
• Revenue

The notes were mainly written during the talks, and may include some thoughts of my own around the potential applications of the technologies and approaches mentioned.

First up after the introduction was Kevin Rose – founder of DIGG.com…

How to go from 1 to 1 million users

1. Ego…

It’s about enhancing user’s self worth…. experience – improve how they feel about themselves during or following their interaction.

Achieve this by providing emotional rewards, and visible rewards… badges.

For example, one can see twitter followers as social currency, a user’s high follower count is considered an indication of status. And one with a relatively low following count even more so, etc…

Leader boards can work, as long as they are inclusive, and don’t put users off.

2. Simplicity…

take stuff out – don’t overbuild a feature

3. Build & Release…

don’t second-guess the users – get it out there and see how they use it

4. Connect with community

podcast… launch party…

engage and be an active participant in the community you’ve created

Look at ways to bring people back into your system… real-time notifications of events, leaves users not wanting to feel left out…

wefollow – is an example of people wanting to be included.  “My peers have added themselves to this, so i should too” – particularly relevant in a professional context.

take new user through a series of positive tasks to introduce them to the app or network, and show the etiquette that will enable them to get the best out of it – reward them as they achieve the tasks.

Advanced Web App Marketing strategy

Chris Abad, Irrata Labs

again – empower your users to do the marketing for you… give exposure to those raving fans, construct the framework that allows them to evangelise on your behalf and gives them the buy-in and ownership that keeps their interest and encourages their contribution.

Future of Facebook Connect

Cat Lee

• building blocks:
  Identity
  connections
• reasons to connect; sharing, having experiences with friends – more interesting and fun
• widget central – facebook widget… check out the recommendations
• facebook connect wizard and playground
• translations – allowing facebook to take over the world..
• May be applications in language learning?
• WTF is XFBML ?!?!

HTML  5

Bruce Lawson

Generally awesome – check out the slides at www.brucelawson.co.uk

How people will use the web in future

Aza Raskin – Mozilla

making the web ‘You-centric’

1- identity

• Mozilla looking to make Roboform obsolete!

2 - ?

• Mozilla is bridging the gap between the desktop and the web – THIS IS THE OBJECT OF A BROWSSER!  enter email – get suggestions of  people from your address book,
• Issue with SQL-based local storage, is that front-end devs DONT DO SQL!

3-integrated

• problem is the separation of the data… used to be important stuff on desktop
• ‘whatever’ button
• bold hope – turn tech prob into personal prob
• trust site? who else uses|?

4-making revolve around ___

ubiquity – natural language “check weather in London in C”.. and it does

interesting solutions form both Mozilla and Facebook around translations…

another glimpse of the future… on a foreign trip with your courier pad, make photo of sign in station, pad identifies text, scans, renders, translates.

IE 8 accelerators offer the beginnings of similar function

Web links to check out:

• Cappuccino
  http://cappuccino.org/
• …by 280 North
  http://280north.com/
• Revision 3
  http://revision3.com/
• Spymaster
  http://playspymaster.com/
• …by Irata Labs:
  http://iratalabs.com/
• Facebook developer site
  http://www.facebook.com/developers/
• modernizr.com
  http://www.modernizr.com/
• html5demos.com
  http://html5demos.com/
• Jet pack – Mozilla extensions
  https://jetpack.mozillalabs.com/

This work is licensed under a Creative Commons license.

On the whole it’s been a good first couple of weeks getting to know version 3.  I would have got stuck in sooner but we still had Silverlight 2 development and bug fixing to do, and i didn’t have a spare machine… or the time!

First impressions overall are that it’s a much better tool for the job.  There are fewer hiccups in the workflow, and everything just seems more robust and fit for purpose.  Another tell-tale sign of its maturity is the number of choices now available in the Options menu.  It seems a much more malleable application, easier to fit to the users’ needs and preferences.

As part of this improved user experience I’ve been compelled to document some of the neat features I’ve come across – partly by way of record, partly to share, and partly to get me back into the blogging habit I’ve fallen out of.

Nugget 1 : Handy VSM info

In Blend 2, the Visual State Manager [VSM] was a pretty decent bit of kit, but as with a number of the features in version two – you were left to your own devices, with free reign to screw things up as you saw fit.

Before:

I encountered issues on a couple of occasions during our last Silverlight / Blend 2 based project.  Wanting to animate icon styled buttons between custom states; using elements common to all states. I had neglected to consider what would happen if the button received the focus or was moused-over.

We found out down the line, when testing revealed some strange behaviour in the button – changing state according to a status update, then reverting as soon as the user went near it.

After:

Blend 3 offers some useful advice to avoid the above problem.  If you forget yourself in a flurry of creative expression, a small alert icon appears to inform you that you might want to take some time to think about your last edit a little more.

In this example, I’ve changed the opacity of the focusBorder Border object, in the Checked state (as well as the Focus state).

A neat little bit of functionality that quietly alerts you to the item in question, the change, and the States which it is modified in.  Handy.

Was a small crowd of academics and educators who had spent the day getting (for the most part) a first look at Silverlight.  The day was intended to describe what Silverlight is, what it isn’t, and via a couple of hands-on workshops – give an experience of how one might go about developing for it.

My talk came at the end of the day, as a suggestion of how everything discussed in the previous hours can be applied in the ‘Real World’.   It covered how we reached our decision to use Silverlight, the learning process, progress made, the achievement of reaching launch, and what the future may hold for our application with the launch of Silverlight 3 and Blend 3.

Unfortunately I can’t upload the slides just yet, but if you attended and would like a copy just email me.  I have however included links below to some of the resources I mentioned during the talk.

Silverlight Related Blogs

• Scott Guthrie
  http://weblogs.asp.net/scottgu/
  http://weblogs.asp.net/scottgu/pages/silverlight-posts.aspx
• Tim Heuer
  http://timheuer.com/blog/
• Jesse Liberty
  http://silverlight.net/blogs/jesseliberty/

Silverlight.net

• http://silverlight.net/
• Getting Started
  http://silverlight.net/GetStarted/
• Samples Gallery
  http://silverlight.net/community/communitygallery.aspx

CodePlex Silverlight Control Projects

• Silverlight Toolkit
  http://www.codeplex.com/Silverlight
• Silverlight Contrib
  http://www.codeplex.com/silverlightcontrib
• BlackLight
  http://www.codeplex.com/blacklight

…I could list some of the other 3rd Party control projects & vendors at this point, but others have already done it better… Namely, Mr Tim Heuer:
http://timheuer.com/blog/archive/2009/01/28/comprehensive-list-of-silverlight-controls.aspx

Other key sites and blogs to keep an eye on

• Silverlight Cream
  http://www.silverlightcream.com/
• Silverlight Team Blog
  http://team.silverlight.net/
• Expression Blend team blogs
  http://blogs.msdn.com/expression/

If there’s anything you think I’ve missed, let me know and I’ll update the page accordingly

My old boss sent me this as way to get working again when I get back but it looks a bit like you do loads of graft to submit treatments for free along with lots of other hopefuls, then the project originator takes the one he likes best and pays for it and can then incorporate the best of the rest for free.

http://www.crowdspring.com/
Am i being overly cynical?

I wouldn’t say cynical – I’d tend to agree.  Spec work is the bane (…well ok, one of many banes) of an experienced designer’s life… You don’t get 15 plumbers round to do the work in various different ways, and you don’t ask for 25 developers to write 25 different pieces of code before you choose the one that you think works best.

You pick one, based on their quote, experience, portfolio and any number of other variables - and you work together with them, rather than picking them like one of many lobsters from a grubby fish tank. (No, I’m not sure this metaphor works - but I’m sticking with it because I like the photo…)

The line is blurred at times, with Carsonified getting into trouble this week for their ‘design competition’ - http://www.carsonified.com/fowd/new-competition-design-the-fowd-2009-holding-slide .  In fairness, they’re good people - and it was a tongue in cheek comment from Paul Boag which seems to have kicked the whole discussion off… and they’re now offering a free pass to the winner.

CrowdSpring does remind me of the old website (the name i forget) which I looked into many many years back (end of jungle era) which had freelancers and companies BIDDING for work, as well as providing designs in some cases… it inevitably turned into a bun fight as to who could provide the lowest cost, and with clients who didn’t value good quality - you’d always end up losing out on a logo design to some 14 year old in Minnesota, and to the developers in India who could knock you up an Amazon replica in 48hrs for $200.

Was also surprised to discover recently that the speculative design thing isn’t just restricted to young designers trying to get a foothold and build up their portfolio (for which, i can see its benefit - responding to a real world brief etc).  Was hanging out with the directors from a very well known and respected London agency the other week, who were telling me that they’d found themselves having to do spec work again.  Admittedly for altogether larger, better budgeted organisations than you’ll get on CrowdSpring, and with the opportunity to bill for the work should they get the gig… but i had thought it was something you were able to leave behind as you became a more established designer / company.

I’d also like to say at this point, that if you’re an experienced web designer/UI expert - this is a very good career/industry to be looking for work.  I still receive a call or two a week, though I’ve not been in the market for a year and a half.   So, while I guess I wouldn’t totally rule out CroudSpring as a potential source of income (and there will always be clients who don’t see the value of quality) – I personally wouldn’t spend too much time on it… and only once you’d finished redoing your website, revising one’s cv, writing covering letters, going to interviews and generally doing all manner of things that would help get a well paid, well respected gig… assuming that’s what one wants.