Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • 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