Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • ReMIX 09 @ Brussels : Summary

    Posted on October 7th, 2009 Thibaut No comments

    ReMIX

    This last 29th of September was organized at Kinepolis Brussels the 2009 edition of the ReMIX, which is a one-day summary of the MIX edition (held last March in Las Vegas).

    Two session tracks were available : the Web developer track and User Experience (UX) track. But before this, an introduction was given by some well-known people of Microsoft belgium.

    Introduction

    By Luc Van de Velde, Katrien De Graeve, Gill Cleeren, …

    Here are some key points of the presentation :

    • A demo of the Microsoft Web Platform Installer by Katrien De Grave. More info on her blog post about it
    • Demos of Silverlight 3 new features : smooth streaming, rich media capabilities, SEO & deep linking, improved performance, …
    • Zendster, the first belgian web hoster to provide smooth streaming for Silverlight
    • Companies (such as Elia) performing demos about their Silverlight apps for critical, line-of-business applications
    • A demo of SketchFlow by Arturo Toledo
    • Interviews of companies reflecting the important shift towards UX, which is given more and more importance
    • VTM news (a dutch television company) is using Surface, manipulating a newspaper as a support for presenting news but also to present election results

      Surface
    • A demo of the Surface application of Belgian Beer Cafe, featuring a wonderful background simulating beer liquid and providing infos about the beers you put on the table. Check out the video below :
    • The launch of WebsiteSpark, an Microsoft initiative for providing training, free licences for small companies, etc

    Session #1 : Prototyping with Sketchflow

    User Experience (UX) track
    By Arturo Toledo

    • No slides, live demo of prototyping an app using SketchFlow
    • More than a mockup tool, SketchFlow allows you to make it behave a real app (and used as is)
    • Effects, such as transitions, can directly be set easily in SketchFlow. No need to code to get everything working (although you can write some if you want to fine-tune some stuff)
    • The user (typically the customer) can test his app mockup as it’s a classic Silverlight application
    • Comments can be drawn on the mockups or feedback can be written in a column next to the mockup screens

      SketchFlow
    • The flow of the application can be designed visually, creating transitions by linking nodes representing pages

      SketchFlow
    • The creation of datasources is very easy in SketchFlow. Indeed, in a typical mockup, you need to create dummy data (lorem ipsum for texts, fake names or numbers for forms or grids, etc). Such data can be autogenerated by defining the type of data we want (ex: price, date, text, …), which is a great save of time

    Session #2 : Building Amazing Business Applications with Silverlight and RIA Services

    Web developer track
    By Brad Abrams

    According to Brad Abrams, the must-haves for a great app is :

    1. Professional feel
    2. Rich data query
    3. Validating data update
    4. Authentication
    5. Different views (of the same data)
    • A little Silverlight application was built in a RAD fashion using Entity Framework, featuring a GridView, a form to add/update/edit values and Regex attributes on the properties (code behind) for validations
    • A SiteMap of the app was provided in Robots.txt for indexing by search engines. Different views (html pages) were provided for search engines bots to parse the content of the application

    Session #3 : Creating Silverlight Experiences with Blend 3

    User Experience (UX) track
    By Arturo Toledo

    • An Adobe Illustrator file was imported in Expression Design (a character in a spaceship)
    • Showed then how to build a custom control (a button with glossy effects, mouseover growing animation effect without coding, …)
    • Custom button fires an event, starting a storyboard to make the spaceship fly on the screen
    • Timeline manipulations are performed to make the spaceship make a U-turn before flying back to its original position

    Session #4 : ASP.NET MVC Wisdom : building a real-world app in 60′

    Web developer track
    By Maarten Balliauw

    This session covered the following points in ASP.NET MVC :

    • Validation
    • Templated helpers
    • Security
    • Routing

    Slides of the presentation are available below and source code here

     

    Conclusion

    A very interesting event as you can tell, providing lots of news, demos and other stuff about RIA development in general. See you next year ;)

    Share/Save/Bookmark

  • REMIX 09 : I’ll be there !

    Posted on August 3rd, 2009 Thibaut No comments
    REMIX The REMIX, re-edition of the popular MIX event will take place at Kinepolis Bxl on September 29. This free event will propose two different tracks :

    1. User Experience Track : prototyping with SketchFlow, Surface, creating Silverlight experiences, …
    2. Web Developer Track : Silverlight 3 new features, Expression Blend, …

    And as usual, I’ll post a summary of the event on my blog so don’t forget to check it out. See you there ;)

    Share/Save/Bookmark

  • User Experience @ Vitra : the sum up

    Posted on June 6th, 2009 Thibaut 12 comments
    The 2nd of June was held in Antwerpen User Experience @ Vitra, an event in a design shop showcasing Windows 7, IE8, Surface, Silverlight and User Experience. This was not a magistral conference but rather little stands in the shop where you could meet some Microsoft Belgium guys and some companies using latest technologies. This proximity and originality of this organization made it, according to me, one of the most interesting event of the year !

     

    The first stand I went was the Surface stand, held by Hans Verbeeck (Partner Evangelist for Microsoft Belgium). As I saw his presentation about Surface this year at Techdays 09 and already tried it there (see this post), the point was not introducing it again but rather having a more deep discussion about that, the potential, companies using it, if it’s gonna be our future louge table, etc.

    The first thing to notice is that Microsoft is not intending at all for the moment to make it come into our lounges. As a matter of fact, with a starting price of 11 000 € and reaching 30 000 € for the SDK complete kit, and with no significant price drop to be announced soon, the market clearly resides for companies. Typically, hotels, restaurants but also hospitals. Indeed, Hans showed me an application enabling users to visualize the complete body, organs, what’s in them (show/hide skin), enabling doctors to clearly explain to patients of what they are affected, where it is located and how they’re gonna proceed to heal that. There is clearly a market for that as there’s nothing more scary for a patient not to be clearly informed about his future surgery.

    We then talked about Surface as a lounge table. Indeed, I tried the chess game application at Techdays and thought it would be perfect with some friends at home. But as Hans explained me, the projector inside makes it hot and noisy (quite a big fan inside of it) making it not applicable for home using. Maybe later with a touch-screen version, but according to him, it’s not part of Microsoft’s plans for now.

    Finally, I asked hans which companies are already using Surface or developing applications for it. He mentionned Wygwam, RealDolmen and some other partners who already had started projects.

    Surface with Hans Verbeeck

    Hans Verbeeck and me talking about Surface

    Then I went to the User Experience stand, held by Katrien De Graeve (Developer Evangelist for Microsoft Belgium & Luxemburg). As I arrived pretty soon, I was the only attendent for the first round of her presentations. So we talked about Silverlight, Blend, she also showed me how to build a great wheel menu in Silverlight. Indeed, you can work closely between Blend and Photoshop, layers are automatically recognized so you can work directly on them with Blend. There is also a nice collaborative tool in Blend enabling you to get fast and easy feedback from the client, who can comment on your mockups and prototypes before going to the next stage of the development process. She also mentionned deep linking, an interesting Silverlight 3 feature enabling you to have a precise url for any location in your app.

    I then went talking with Frederik Duchi (from the BESUG) at the Silverlight stand. After showing some impressive demos of Deep Zoom and some ass-kicking business apps, we then talked about the future sessions of the BESUG, the Silverlight Belgium User Group I’m member of. Future sessions are to be announced in September but stay tuned anyway because a barbecue may be organized this summer by the group !

    I then went talking with Gill Cleeren (Microsoft Regional Director) for some technical discussions about Silverlight. My first question was about going from a WPF application to Silverlight and vice versa as presented at the Techdays 09. Indeed, things are less simple as it may seem for one good reason : Silverlight is only a small plugin, a subset of .NET power, compared to WPF which benefits from the full power. Thus, you cannot obviously change a web app in Silverlight into a WPF one that easily. We then talked about Silverlight as a platform for business apps. New versions of Silverlight are to be released each year, which is really faster than ASP.NET (2-3 years), Silverlight features and richness should overpass ASP.NET and follow a faster evolution. As well him as me think that Silverlight is the platform of predilection for building web business applications in the future. Fast productivity and the richness of user experience are the reasons behind that. I also learned from him that he’s a reader of my blog, so “hello” if you ever read this Gill ;)

    After that, I talked with Luc Van De Velde (Director Developer and Platform Group, Microsoft Belux) about the low percentage of french-speaking people at Microsoft events in Belgium and how that could be improved. So tell your colleagues that there are plenty of free great events, where you learn a lot of useful things for your career ! Check out Micorosoft Community, a website connecting the Belgian users group and listing all future events.

    Katrien De Graeve, Gill Cleeren and Luc Van De Velde

    I had the chance to talk personally with Katrien De Graeve, Gill Cleeren and Luc Van De Velde

    And to finish, I assisted at the “Silverlight test case” presentation by DigiPoint, a webdesign company based in the north of Belgium. They shared their experience about building their first Silverlight application, the pros and the cons. The first limitation they encountered was that XAML files generated automatically were way too large so they had to split them manually. Otherwise Visual Studio became too slow when opening these files. Another noticeable difference compared to Flash is that in Silverlight, animations are timebased rather than framebased. So it requires minimal programming skills. Indeed, it’s harder for a designer to cope with a language such as C# than ActionScript. As Blend and Visual Studio enable the graphists and developers to work closely, they also mentionned the importance to have conventions (naming, structure, …) in order to get the work synchronized. According to them, they felt that Silverlight was still a young technology (they mentionned the lack of documentation for designers for example). Anyway they were pretty satisfied of the final result which you can see here.

    And this is it ! You can also check out the complete flickrset of the event.

    See you ;)

    Share/Save/Bookmark

  • Visug : Building better user interfaces

    Posted on June 3rd, 2009 Thibaut 2 comments

    Microsoft Belgium

    The 27th of May was held the latest session of the Visug in the (beautiful) offices of Microsoft Belgium about user experience. Presented by Jason Beres from Infragistics, a company specializing in user interfaces and user experience, the covered topic aimed to introduce people how to build great user experiences. Here is the overview of the presentation that was given :

    • Understanding user experience
    • Using patterns for better user applications
    • Platform issues
    • Problems solved
    • Wrap up

    From the icon a user double clicks, the splash screen and the visual of the application he sees, the user experience is every touch point with the user. It’s the branding and the image of your company you give to people so it’s very important.

    “User experience (UX) is about making great software… for people !”. Think about the user who uses your application every day, maybe full time ! It has a big importance from the user point of view. So making great software is understanding user needs while providing exciting and revolutionary UX.

    One first important concern is “how to build what people want”. This is where you start to make great UX. For this, UX experts interview users to determine what they need (and understanding the difference between what they say and what they really need), study how they interact with software to determine how to architecture your app.

    Understanding user experience

    1. Information architecture

    • It’s about organizing principles. What do you want ? Where are you in the application ?
    • Deliverables : navigation maps, glossaries, keywords, categories, search strategies, …
    • Need to think about it up front because this is what will determine the final result

    2. Interaction design

    • Discover and refine stories : coherent, consistent and effective UX
    • Deliverables : storyboards, usage scenarios, sketches, wireframes and prototypes
    • All of this to determine how the user will be actually using your app

    3. Visual design + user interface

    • Establish visual framework and style, strenghten communication, establish trust
    • Deliverables : themes, styles, palettes, mockups, images, visual guidelines and patterns
    • Patterns : this will be the focus of today’s presentation

    Patterns and user experience

    We’re gonna see patterns about designing interfaces. First, two recommended readings from O’reilly :

    Designing interfaces Designing web interfaces

    A first advice is to avoid to overpattern (eg : “caution : stairs !”) where it’s obvious there are stairs isn’t an added value at all. Let’s now introduce some UX pattern. Each one features a name (eg : “iconic navigation” for the iPhone interface), a problem (when/why/context) and a solution (implementation/examples).

    Paging

    • Prob : long lists of similar data (ex : search results)
    • Solution : present item grouped accross multiple pages

    Eg : the Flickr paging bar :

    Paging

    Faceted navigation

    • Prob : multiple elements from different categories to list
    • Solution : present them organized in facets (groups of data)

    Eg : the faceted navigation in the shop section of Amazon

    Faceted navigation

    Clear entry points

    • Prob : need to make very clear to the user what the entry point is
    • Solution : provide a page with minimal design with the emphase of what needs user’s attention

    Eg : the Google homepage :

    Clear entry point

    A tip with clear entry points : it’s difficult to provide some application an entry point when there are many options available. Microsoft Expression Blend uses an interesting trick to cope with that : the first time you start the application, you’ve got a little menu as a clear entry point, with the possibility to check “hide this next time” when you’ll have discovered the application more in details, thanks to the clear entry point.

    Titled sections

    • Prob : you’ve got many sections and want to give the user a preview of each of them
    • Solution : provide clickable section names which redirects to the full section

    Eg : Yahoo news

    Titled sections

    Liquid layout

    • Prob : a lot of information to display so maximizing user’s screen usage is wanted
    • Solution : provide a resizable window enabling the content to adapt to it just like a liquid would do

    Eg : windows explorer

    Two panel selector

    • Prob : two panels containing large information must be displayed at the same time but the width is too small
    • Solution : implement a vertical or horizontal bar enabling to resize both panels when dragged

    Eg : the windows explorer again, allowing you to resize folders hierarchy or folders content

    Overview plus detail

    • Prob : must provide the user an overview of something but there are also plenty of details to show
    • Solution : implement a zoom-in/out functionality allowing to have overview but also details

    Eg : Google Maps

    Overview plus detail

    Alternative views

    • Prob : same information but can be presented in several different ways
    • Implement a view selector to let the user choose how he wants his information to be displayed

    Eg : windows display mode menu (thumbnails, small icons, medium icons, …)

    Undo

    • Prob : the user can make wrong operations that need to be undone
    • Implement a undo functionality

    Eg : Gmail undo functionality :

    Undo

    A note about undo : I’ve read from articles on the web (a topic called “human interface”) that undo is way way better than the typical alert/confirmation box. Indeed, you’re so used to click that “ok” button that if you make the wrong decision, you’re done. Following some study, there’s nothing more frustrating for users than loosing their work so being able to prevent that is the best you can do for them. And undo is just the perfect choice for that, completely worth its extra cost in terms of development.

    Resources

    In addition to the two books listed before, some interesting web resources are :

    And last but not least, Quince, a really great UX Pattern explorer, developed by Infragistics and based on Silverlight.

    Wrap up

    • Build software for people
    • Use a process
    • Learn from patterns
    • Keep your eyes open

    And to finish, a very important information ! I’ve talked before the session with Pieter Gheysens (one of the founders of the Visug) who told me that Dino Esposito will be doing a session in October for the Visug. After Juval Lowy last fall, his colleague from IDesign will be teaching us some good architecture principles. So be sure not to miss him ! I’m currently reading one of his books .NET architecting applications for the enterprise which is really instructive !

    See you there !

    Share/Save/Bookmark