Photo credit Matt Harris

Last Friday, a few of us from splendid were lucky enough to go down to Brighton to attend dconstruct 08, a user experience conference that attracts experts in the field from all corners fo the globe. The pouring rain was not enough to put a dampener on the day, the impressive line-up didn't disappoint!
I had been looking forward to listening to Matt Biddulf and Matt Jones speak, the hugely amusing Jeremy Keith was a welcome surprise and took home my award for most entertaining! Other speakers included Danial Burka, creative director at digg and Tantek Celik. All of the speakers were very good, some interesting areas were addressed, all that will be very informative to the way we work at Splendid.

A few of our highlights...

Aleks Krotoski, our second speaker for the conference was a gamer. You may reasonably conclude from the name and preoccupation that we were about to hear a lecture given by a male speaker. However she turned out to be an astute female academic who's plight was to unite the world of gaming with the wider network of web designers and developers. She challenged the audience to consider the seemingly endless possibilities if the two somewhat self-serving disciplines combined powers to form an uber Voltron-esque, unstoppable force of interactivity and information. So does the elusive secret to alchemy lay before us? Maybe not, but we could make some freakin cool games such as Guitar Heropedia and World of Warcraftr.

Stephen Johnson talked about the use of information design and social networking that John Snow was able to use to pinpoint the outbreak of the cholera epidemic of London in the 1870's, drawing on this example Stephen was able to demonstrate to us the shear power of the social web and data.... Though we are long time rid of cholera it was the similarity of how such tools used in the physical world ran in such a close parrallel to how we use the social web today... The rise of Geo tagging in todays culture has opened up an entire new variable in which to interact with our environment, a true merging of the physical and online worlds. This information can be used to not only unite the world globally but refine our information into the community, thus help strengthining the networks that make up the world at it's most granular state.

Jeremy Keith was the final speaker at dconstruct.
He choose to tackle the rather large topic of 'The System Of The World' Beginning with a reference to Isaac Asimov's fictional science 'Psychohistory', I was skeptical that Jeremy was going to make a speech relevant to a room full of designers of the Social Web. But I quickly regained my confidence when he explained the science of Network Theory, whether man made or naturally occurring had a pattern of Nodes and Hubs. Hubs being a major connection and nodes being the weak ties in the network. This pattern has been proven through the Six degrees of separation experiment and can be seen alive in Social networking sites such as, Twitter or linkedin. Jeremy summed up giving us the secret formula for creating successfully social networking sites, there are known knowns

All in all it was a very productive and inspiring day, and Stacca got to hug a gorilla.

Look forward to seeing you all out there in the social web

Depending on who you listen to it looks like we might be in for some tough times ahead. Economic growth is slowing, property prices are falling, mortgage rates are rising and the darkening clouds of recession are gathering. If the American model is anything to go by this means consumers will soon be hanging up their shopping bags and tightening their belts and losing their appetite for spending wealth gains on consumption.

So what to do this year if you're an online retailer? Bring the sale season forward, drop prices and hope you can bag enough cash in the next quarters to see you through the lean months?

Whilst taking on a defensive stance is a common strategy in the high street, research suggests thinking smarter is what works in the online world.

Online enterprises are unique in that all customers visit businesses via a browser window which is for all intents and purposes identical across geographic and demographic user bases. This makes for a very level playing field in which participants are fundamentally bound by the same parameters. Within this small window competitors do not have the capacity to be bigger, brighter, louder, have more street frontage or be closer to home. They can only be better than their competitors.

In this environment it is clicks that count for users, and sites can be made or broken by how well they create a user experience online which matches or exceeds competitor offerings. These days web users are experienced and knowledgeable, they no longer have to put up with bad design and when confronted with it they will quickly vote with their cursor.

The basics of the user experience comes down to interaction design; i.e. how you can create a complex technical system that users (customers) find easy, engaging, and hopefully compelling to interact with. Visual design is important, but making something pretty counts for nothing if it doesn't result in sticky traffic.

You already know the companies that have mastered interaction design because they dominate the top of the online retail tables. The Amazons, Expedias, EasyJets, Tescos and Play.coms of this world are well versed in the art of user centred design and although they started with a viable business model they have overtaken the hundreds of competitors in their space to get to the top of the tree.

In the offline world the master of this discipline is Apple. As an icon of good useable design it's hard to go past the ipod to demonstrate just how potent getting the user interface right can be for a product or business.

Less obvious however are examples of how poor design can sink an idea just as quickly. Probably the best known interaction design catastrophes in the online world is that of the ill-fated Boo.com which went far too long on technology and three dimensional spinning shoes and far too short on usability.

There are thousands more where that came from, all united in the fact that you haven't heard of them and they have either gone bust or are well on the way.

The failure of companies to pay heed to interaction design is all the more astounding when you realise it is one of the most cost effective investments an online business can make.

With modern modular build techniques the web front end (visual layer) can be developed independently of the site infrastructure (business logic). This affords online businesses the opportunity to evolve and improve their proposition without making large investments in technical infrastructure.

If you keep an eye on the big players you'll notice they are making continual gradual improvements to their client interface. Earlier this year Play.com relaunched their site. This is not a functional step change, this is a refresh to improve the customer experience and clarify the site proposition. Similarly Ebay evolves their site design continually to cater to the increased complexity of the site.

We highly recommend businesses undertake some user testing. Putting yourself in the minds of your consumers is good, but getting their direct feedback is better and often surfaces issues you were unaware of. When we worked on OAG (the Official Airline Guide) testing revealed that users believed adding items to a "basket" would reserve a flight despite them not having provided any payment details.

From an investment point of view testing means you have a vast reduction in the risk of changing your site and can forecast with some certainty how changes will be received.

The benefits of good interaction design are evident in the numbers. With a new booking engine and site design GNER (now National Express Mainline) effected a 30% increase in site revenue and a 50% increase in percentage conversions.

On relaunch of their site last year Hays recruitment enjoyed a 25% increase in job applications and a 12% decrease in ineligible applicants.

Done well investment in interaction design will deliver your business better results with less effort. In our eyes it's a no brainer, especially in tough times. The only surprise to us is that it needs explaining.

Splendid have been asked to sit on the Connected Device Council by our good friend John Holdstock at Microsoft. The group is a select group of brands and companies (we are the only user experience company in the mix) that will help shape the future of all thing embedded, that's everything that isn't a desktop or laptop. So everything from cars to toasters.

The group includes Vodafone, easyJet, Road Angel and hosts Mclaren (the people who make those nice fast cars).

It was a great day, some good discussions (such as when Silverlight will be available for embedded devices) and the day ended on a high with a tour of the Mclaren F1 and SLR factory...

So we have shown you some pictures of the Aston Martin Keynote at Mix08 and a link to the video but how did we actually do the work...while we don't want to give all our secrets away here are some behind the scenes details...

This blog follows a section of the development of the Aston Martin silverlight presentation for Mix08. The content assumes prior knowledge of Windows Presentation Foundation and its xml mark up called XAML.
This blog will briefly detail how we made a custom template for the slider control. The custom template changed the visuals of the slider and added additional functionality to allow the Aston Martin car to rotate while showing a number of features of interest.

Figure 1 shows how the slider renders out of the box. The silverlight slider has the same basic functionality found in all GUI sliders. The control allows minimum and maximum values of the slider to be defined; dragging the thumb of the slider changes the value of the slide within it set bounds.
In the case of the Aston Martin project the value of the slider represented the frame number of a rotating car animation, so dragging the slider changed the frame index and therefore animated the car.

Figure 1: Visual of the standard Slider Control

The slider has the following default template shown in Figure 5, basically the template is made of a grid with two nested grids within it which allow the slider to define a different layout for the two orientation modes horizontal and vertical. Concentrating on the horizontal layout, the layout consists of a 3 column grid. The first column contains an invisible repeat button within it to automatically decrease the value, while the third column contains an invisible repeat button to automatically increase the value of the slider. The middle column contains a thumb control which can be dragged along the track of the slider which spans all the columns behind the other controls. When the thumb is dragged the slider changes the width of the first column, moving the thumb along the track.

Figure 2: Built in Template for Slider Control

This template can be found in the source code of the controls or by using Lutz Roeder's Reflector to save the resource (generic.xaml) from the assembly the slider is contained in.
The goal of the custom template is to

1. Change the visual of the track Layer
2. Change the thumb visual.
3. Add additional controls to move with the thumb, which show features of the car of sections of the sliders track, while communicating a picture and description for each feature associated the frame number, which is the slider value.

Changing the track layer is easily done with a simple rectangle with gradient alpha colours and the aid of Expression Blend.

Figure 3: Custom Track XAML

Basically this effect is created by defining four gradient stops allowing the middle 60% of the track to be a solid colour while the ends of track gradually fade out by altering the alpha mask from 100% to 0%

Equally the thumb can be given a custom template to be more visually appealing.

Figure 5: Built in Thumb Template

Figure 6: Thumb using a custom template

To add additional controls which move with the thumb an additional row is added to the control template and the additional controls are added to the middle column of the first row. Additionally another row can be added to the template to add a text block control spanning 3 columns and aligned centrally to describe any feature the slider should reveal.

To make things simple we can add an image to the middle column of the first row. When the slider is dragged, the slider value is changed; depending of the value of the slider different images can be displayed. In order to achieve this, the custom control overrides the OnValueChanged method. The On ApplyTemplate method can also be overridden to allow references to the image and textblock control to be found the template.

The basic XAML and code can be seen in Figure 8 and Figure 7. The final silder visual can be seen in Figure 9

Figure 7: Custom Slider Code

Figure 8: Custom Slider XAML

Figure 9: Final Slider Custom Visual

Conclusions:
The sliverlight control template framework is very powerful and is incomparable to prior web technologies, it allows full customisation of a controls visuals while retaining its functionality. It is a completely different world from working with technologies such a combination of asp.net and javascript.

If you want to know more about the Aston Martin project or our work with Silverlight 2.0 then all you need to do is get in touch.

Well I spent the day at the Welcome Trust today for the launch of Microsoft SQL 2008 (as well as Windows Server 2008 and Visual Studio 2008) and I am writing this while trying to get our keynote for Mix08 finished...

It was full day that started with a briefing from Gordon Fraser, UK MD of Microsoft, then the US team gave us some of the details of what the products had on offer. We had a bite to eat with Gordon and Paul Curtis from easyJet (see picture)

The highlight of the day for me was customer demos, forget what Microsoft say about things... lets see what the customers have done with the products, kinda selfish here as we had designed and developed one of the demos for easyJet.

We have been working with easyJet for the last 18 months on a number of cool projects including this latest POC (proof of concept in Microsoft speak). The work is based around what easyJet could look like in the future, what would a customer journey experience be? Could easyJet become a travel portal rather than a booking engine? these were some of the questions we were trying to answer, and according to the user test feedback we succeeded.

For the POC we used a good chunk of Silverlight 2.0, some AJAX controls on a Virtual Earth map and served it up with some cool geo spatial features from SQL2008. This allows users to define tourist attractions 10 minutes (or however far you want to walk) from your hotel based a predefined polygon of information. A more detailed technical post will follow as I am not a developer (as most people at Microsoft will testify) but what the technology allows us to do is create a great user experience, and that's what matters at the end of the day.

There was also a very cool demo by a Profesor and a Doctor from Cambridge University, looking at modeling data from 1820. Very cool demo.

We then ended with a live link up to Steve Balmers keynote in the States.