With the rapid development of Silverlight as a line-of-business technology, we are seeing more and more interesting, attractive, user-friendly business applications based on it. One such application is successfully showcasing the works and achievements of its author.
We introduce you to Silverlight MVP András Velvárt and the story behind the creation of his portal http://response.hu/, and two of his award-winning projects.
Q. András, how did you decide to present all information about yourself, your company, your projects in a short, yet eye-catching and really convincing Silverlight-based intro on http://response.hu? Most companies would post long pages of information on their corporate portals.
A. We used to be “most companies” ourselves. We explained what we meant by our slogan “User Experience Outside the Box” in many-many paragraphs, and still felt that something was missing. And in fact, nobody was reading it, and even if they did, the reaction was “so what?”
Then we managed to step outside the box for our own website, too. The idea was to show our vision instead of trying to explain it. We created a video intro that captures the emotional difference between being in the box (meaning conventional thinking) and being outside. And then we put short videos of our most interesting projects after the video, on the “outside”, gluing the two parts together with Silverlight animations.
The short product videos also helped cutting the amount of project descriptions we had to write and which nobody read. Our hope was that they would still view the videos, which work better than long texts and screenshots anyway. This is a classic case of “less is more”.
Q. What is the feedback on the intro received from your website visitors? Are you able to track how many people actually watched the whole intro, how many got in touch with you right after watching the intro?
A. First I asked a few friends to have a look at it. This turned out to be a good idea - they helped identify two or three usability problems that we would have never thought of ourselves. But still, the intro animation, the transition effects and the videos themselves made everybody go “wow”. What is more important is that these friends actually looked at all the videos because they were interesting, and thus we could familiarize them with more of our work.
The next step was to replace the old website with the new one. Then I tweeted a few times about it, and people started retweeting, which I think is a pretty good indicator of success. The showcase application even made it to the Silverlight Cream newsletter, and later it was featured in the official Silverlight showcase - this really brought us a lot of visitors.
As for the results, we did have more people getting in touch with us after launching the new website. The interest in our Zoomery product also grew measurably as people saw the short intro video and clicked on the link.
Q. You plan on posting a number of articles on SilverlightShow describing different solutions used in your website intro application. Could you name a few of the challenges or unique ideas realized in this project, the implementation of which will be tackled in those articles?
A. I still don’t have a final plan for the articles, but I my goal is to emphasize how much difference a good designer can make to the user experience. The articles will also serve as introduction to Expression Blend - an indispensable tool even for developers. First we will start from an ugly “developer” version, and work our way up to the finished project. Here are some key points:
-
The application uses Blend’s sample data feature as the data source for the videos and related information
-
Templates: how to use advanced ListBox styling and templating to achieve the skewed listbox effect and the glass borders
-
How video playback and displaying playback status information was solved
-
A handful of actions and behaviors were written for the project and existing ones were used, so I will definitely discuss what behaviors are and how to write them
-
Using Visual States to control the UI
-
Creating animations and making them more natural and interesting with easings
Q. In the intro you present two projects which won you the Microsoft Innovation Award for 2008 and 2009. One of these projects is Zoomery. Could you introduce this project? What was the motivation behind creating it?
A. When Silverlight 2 came out, we were immediately drawn to the Deep Zoom feature. Our goal was to step beyond what Deep Zoom composer could do, and find out just how far we could go. Zoomery is actually the name of a Deep Zoom generator and presenter framework that helps both the content generation and the Silverlight side.
Zoomery Gallery is a product to be used when you want to create searchable zooms from a lot of images automatically, with the name of the images also displayed, along with some nice borders.
Another interesting use of Zoomery technology is the Presentation Browser tool. We processed all of the 124 PowerPoint presentations of the mix’09 conference, and shown the entire conference in Deep Zoom, with metadata and tags. It is harder to explain than to watch yourself, so I suggest going to http://mix.zoomery.com/ - there is some awesome content there!
I would also like to mention that for the end of 2008, we had an interesting project with one of Hungary’s biggest news portals, Origo. They provided us with photos for every day of the year, and we arranged them in a calendar view and created a deep zoom application. The url is http://www.origo.hu/foto2008
We have experimented with some other concepts - processing entire folders with Office documents, or even C# code. We managed to get away from the restrictions of Microsoft’s tools: we can really make zoom scenes out of any digital data, not just pictures. You can check out all of our (public) samples at http://www.zoomery.com/.
Q. Could you name a few of the challenges faced while developing Zoomery, and how did you resolve them?
A. The biggest challenge was to understand the Deep Zoom file format and create our own Deep Zoom content generator. Even though Microsoft made its generator API public since then, we keep using ours as it provides more control with file size and file formats - something we really need in high volume scenarios.
When creating the data offline, we use WPF to do the initial visualization of the data, and then the WPF scene gets rendered to Deep Zoom. We had a lot of performance and memory issues to overcome with this approach, but at the end it allows us to go beyond pictures, and create several desktop applications for different scenarios that can be used to customize and preview the final Deep Zoom scene.
Creating a transparent way to transfer metadata from the server to the client was also non-trivial. We finally opted for an XML-based data transfer, and created APIs both on the generator side and the client side to create and process this data. At the end, we could create the WPF Module almost entirely in Blend, and attach metadata to the scene items via databinding. This makes creating the previously mentioned Presentation Browser and the Photo Calendar application a breeze - for example, the latter was done in merely two days from start to finish.
Q. What is the next step for Zoomery?
A. We are gearing up our Zoomery Server, which is moving the Deep Zoom generation to the server side. Zoomery Server will be able to handle millions of images, perform searches and present the result in a highly customizable Silverlight application.
The first application we are building on top of Zoomery Server is Zoomery Community Gallery: a cloud-hosted offering that can be integrated into any community website, and allow the members of the community to create their own galleries and tag the pictures. The unique feature about this application is that it is easy to go from one set of pictures to another: clicking on an image tag or a user’s name displays all images with that tag or that user from the entire site. If the readers of Silverlight Show would like to join our closed beta, just send a mail to info (at) zoomery.com
Q. What aspects of this application brought it the Microsoft Innovation Award for 2009? How did this recognition reflect on the popularity and integration of Zoomery in business projects?
A. I think the general concept and the potential of the technology and possible applications all played their part. Microsoft also emphasized the fact that the end user could use an intuitive user interface, to navigate or search through huge amount of different information.
Q. So far, what are the most interesting and successful uses of Zoomery for business purposes?
A. Apart from the Photo Calendar mentioned above, we sponsored the Website of the Year contest in Hungary. The screenshots of the websites were uploaded to a PHP site, and Zoomery Community Gallery processed them, and added the new image immediately. This is another unique feature of Zoomery Server - we can add images to an existing gallery without recreating the entire scene.
We have also cooperated with the Internet Explorer 8 campaign of Microsoft Hungary, where screenshots of favorite websites running with IE8 could be uploaded and browsed.
Our current project involves a real business use: it will help our client in manually sorting and classifying tens of thousands of scanned pages per day.
Q. The ERP Client “MÛVÉSZ” also got you a Microsoft Innovation Award, for 2008. The architecture of this application is well-explained in the first ever case study of The Architecture Journal. What were the main innovations introduced with this project, and how did the idea for this project evolve?
A. The WPF client was designed to run on a UMPC: a small touchscreen device with merely 512 megabytes of RAM and a 900 MHz processor, and no keyboard. The users of the application are not expert computer users, but technicians, who work with the insides of ATM machines, POS terminals and so on. Our goal with the project was to create a never before seen user experience, with emphasis on productivity and ease of use. The application works well with touch navigation, and text input is done with an on-screen keyboard or handwriting recognition.
Q. What were the major difficulties you faced while developing the project? How did you resolve them?
A. The first version of the technician’s client was developed for Pocket PC’s, using .Net Compact framework. The biggest challenge here was solving the issues with the clients being occasionally connected: data synchronization, uploading, change sets and working offline. The WPF client was our first ever WPF project. We had to climb the WPF learning curve, and work with buggy Visual Studio and Blend versions (the project started in 2007). Luckily, we could migrate most of the business logic from the Pocket PC version.
Another kind of difficulty was creating the concept itself. We wanted to get rid of the menus and screen-by-screen navigation, and create a lot more fluid experience with much less navigation and much more information visible and accessible at the same time.
The target hardware was also pretty slow. We learned that turning off hardware acceleration for WPF actually helped performance even on that 900 MHz CPU. Still, we had a lot of performance optimizations to do - the biggest gains came from using less complex layout containers whenever possible (for example, using Canvas instead of Grid).
Q. In what directions will be the next projects your company will be working on?
A. There are some projects I can’t discuss, but we continue to refine our Zoomery system, and we are also focusing on LOB applications. The most motivating challenge for us is looking at old problems in a new light, and creating new, refreshing user experience - one that can only be designed with real out of the box thinking.
Thank you András, for sharing your experience with the community at SilverlightShow! We'll be looking forward to your set of articles (first article expected within the end of January) revealing the solutions and code behind the most interesting and challenging pieces of your Silverlight applications.