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

     

    2 responses to “Visug : Building better user interfaces”

    1. [...] Thibaut put an intriguing blog post on Visug : Building better user interfaces @ Thibaut Van Spaandonck's …Here’s a quick excerptFaceted 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 … [...]

    2. [...] Among the authors, we can find Jason Beres who came at Visug talking about user experience (see related post here). This full-color book gives us an overview of what can be achieved using Silverlight 3. [...]