Sean Landry Interaction Designer

CSS zealot and user experience maniac

Archive for the ‘interaction design’ Category

Review of Balsamiq wireframing tool

The folks at Balsamiq provided me with a no strings attached license for an honest review of their software.

Balsamiq is a tool for creating wireframes. It’s an Adobe Air application that loads fast (providing you already have Air installed). I installed it on a Friday morning and decided to see how quickly I could learn to use it. Since I wanted to test it’s complexity and flex it’s capacity, I chose a complex interface randomly from the web. The Expedia.com last minute deals page had a lot going on (probably more than it should) and would be a good test. Below is a screen capture of the original:

Expedia screen shot

Getting started was fairly easy. Not a ton of menus and I’m familiar with most design applications. I got started drawing the big objects, browser window, columns etc. Which turns out to be helpful since the application supports layering. I didn’t need much “bring to front” type of editing. After about 35 minutes I completed the wireframe.

Expedia wireframe

Some tools I’ve used previously to wireframe/paper prototype include: Quark, Illustrator, Photoshop, Fireworks, HTML and pencil on paper. Balsamiq felt much faster since many of the interface elements were already created (dropdowns, chekboxes, tables etc.) Only the things you’d find in an interface. Very simple.

Pros:

The interface is simple and easy to use. It uses many of the design application standards so it’s quick to get started. The sketched look of the wireframe ensures no one will mistake it for a “mock” or visual design. The focus of wireframes is to indicate structure not style. This tool does that extremely well. You can easily export your designs as PNG files for easy sharing or printing.

Cons:(Some of these may be “newbie” type problems since I’ve only had the application for a few days.)

Some of the constructs allow for font/text resizing while others do not. I would like to determine font size for all elements. Also it wasn’t clear to me how or if I could add my own elements to the application or if there was a community of users contributing to the app. Grouping shortcut made sense [Ctrl + G] where ungroup [Ctrl + Shift + G]. I’d prefer [Ctrl + U] (Quark Standard).

Overall, I was quite pleased with Balsamiq and would recommend (and have) this tool for any designer who wireframes as part of their day to day activities.

My user experience skills visualized

My skills as a User Experience Designer/ Interaction Designer from 1996-2008

Sean Landry’s User Experience Data Visualization

Selecting a JavaScript Library

JavaScript Libraries

At work I was assigned the task of evaluating the major libraries and selecting one for our web applications. I spent some time reviewing the major players and decided to switch from script.aculo.us to Jquery for the following reasons:

1. CSS syntax – Jquery uses the same syntax as CSS to identify elements within the DOM

2. Unobtrusiveness – Because the function identifies the object using the css selectors, there is no need to add any JavaScript in the markup.

3. Microsoft – It seems more and more apparent that Microsoft is hooking their cart to Jquery. Since we’re a .Net shop it was an easier sell than the others.

4. Support – There is a thriving community with examples, tutorials and forums for answering questions.

  • Comments Off
  • Filed under: User Experience, interaction design, web development
  • UIE 13 Day One – Morning

    I’m here at the UIE 13 Conference here in Cambridge MA. Day one is all day sessions. I’ve chosen the Bulletproof Ajax: Designing Interactive and usable Ajax solutions by Jeremy Keith.

    Jeremy went over the building blocks of Ajax and some of the history. I’m really enjoying the high level building block discussion. I always find it easier to embrace a new concept if someone explains the “why”. Jeremy has done a great job keeping the technical stuff light while balancing the need to understand the fundamentals. I’ll update later after we put some of the fundamentals into practice. Stay tuned.

    The ithermostat

    I’m feeling a little left out of the iphone, ipod, idog phenomenon going on. So I decided to take a look at some common items and see if I can add “i” to it and see how they would look/interact. The first design is a simple thermostat. I’ll take a look at it’s UI and basic functions and see if I can make it into an ithermostat. The first time experience is below. I’ll create some of the additional screens later. Let me know what you think.

    Default Interface

    ithermostat first time experience

    Unlocked

    Primary use - change heat

    According to several sources the mirror has been around since the 13th century (give or take). Just about everyone is familiar with it. You know, that shinny thing that looks back at you in the bathroom.

    But leave it to the product designers at LG to turn it into a “feature”. I think we’ve officially run out of new features for the phone.

    See commercial below:

    Now if you’re really into cutting edge check out the Jitterbug:

    Jitterbug phone

    Imagine that. All it does is make calls and keep track of your contacts! No games, no facebook, oh yea and no mirror.

  • Comments Off
  • Filed under: Software Design, User Experience, interaction design
  • Mouse with scroll wheelIf you use browser tabs as much as I do you’ll love this tip. Clicking the scroll wheel on your mouse will open a link in a new tab. I’ve been right-clicking > Open in new tab for years. This is a single action that does the same thing. Works in FireFox and IE7. Enjoy!

    Give it a try!

  • Comments Off
  • Filed under: Software Design, User Experience, interaction design
  • Sliders are a common way for users to adjust elements with fine granularity. They can offer more choice with a smaller footprint than a drop down menu. They also offer absolute variables so the user never enters into an error state. The problem with sliders is their accessibility. They require decent dexterity since the target for the mouse is ofter small but recently I found this new method that has full keyboard support.

    Accessible Sliders

    This method offer full keyboard capabilities as using unobtrusive JavaScript which is a method that separates the JavaScript behavior from the page markup.

    Here are some other examples of unobtrusive Javascript


    If you’re like me, you’ve got some version of iTunes running on your computer. And if you’re like me, you see a prompt to download a newer version of the software just about every time you launch the application.

    Install iTunes

    I guess since all the other upgrades were pretty seamless, I pretty much just agree to upgrade. I click on the “Yes” button on go on my merry way.

    But not so fast… I recently noticed a new icon on my desktop

    Safari Desktop Icon

    Hmmm. I don’t remember installing Safari. I did a little searching and it turns out my latest agreement to install iTunes came with an addendum (Safari). I guess I missed the news on this but I found it a bit intrusive.

    I’m going to keep Safari installed (I like to check my webapps in several browsers). But, I’ll be sure to read the Terms of Use a little more carefully before clicking “Yes” in the future.

  • Comments Off
  • Filed under: Software Design, User Experience, interaction design
  • How can you design an interface which is both easy to understand the first time you use it and efficient once you’ve learned it?

    This is a dilemma which designers wrestle with because it’s difficult to understand what domain knowledge the user has with your product and how easily they can execute certain actions. One common mechanism used in the first time experience is a wizard. The wizard is useful when guiding the user through a complex set of inputs. It breaks the series down into small manageable chunks of questions so the user isn’t overwhelmed.

    But what happens after the user has gone through the wizard and now has a reference? Understand what inputs are needed and can easily complete the task with little effort? Why force them through the same series of screens and ask the same questions?

    Adobe Dreamweaver has an interesting method to allow both user’s the ability to interact with their site properties based on their level of expertise and familiarity with the process.

    Basic View
    Dreamweaver Wizard
    Advanced View
    Dreamweaver Advanced view

    This method allows the user to become more efficient with each subsequent task once they have learned what each property means.

    Good user experience design allows the product to adapt based on the user’s knowledge of the product. Here is another example of how the design should remember what the user wants.

    Don’t show again

    Your application should account for all these user decisions and serve only what the user needs to successfully accomplish their goals.

  • Comments Off
  • Filed under: Software Design, User Experience, interaction design