Sean Landry Interaction Designer

CSS zealot and user experience maniac

Archive for the ‘web 2.0’ Category

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.

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


Transparency and the interface

I recently upgraded to Windows Vista. Something I noticed is it’s use of transparent elements within it’s UI.

Here’s an example of the corner of a Vista window:

Vista border

Another common Web 2.0 method is the lightbox which is essentially a pop-up using JavaScript but rather than creating a new window within the browser it keeps the user on the same screen. It can be a powerful tool in the user experience design.

Lightbox calendar

In this example the user is able to select a single date and view the details without leaving the page. There is no additional browser windows allowing the user to focus on a singe action. In addition to opening a window the lightbox method “shades” the window below to reduce the level of noise on the screen.

  • Comments Off
  • Filed under: Software Design, graphic design, web 2.0
  • That was sooooo last week

    Being informed of new technologies and innovation on the web not only makes you a complete geek but also helps you think of problems in different ways. Seeing how new ideas explode onto the scene and watching their influence forces you to approach problem solving from “outside the box” (one of the most overused terms to which few know the origin). Here’s a list of sites I use to keep current with new technologies:

    Digg
    Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as voted by users.

    Del.icio.us
    A social bookmarking tool that lets you see what are the most popular things being bookmarked. Also if you use the networking feature you can tap into your friends and family to share new cool sites.

    Bloglines – Really any news reader will do but it’s a great way to ingest loads of content with very little commitment to reading absolutely everything. I equate it to reading the headlines of the paper and only taking a deeper look at those articles which interest you.

    Below are a list of blogs which are in my account which I find particularly timely with new ideas:

    Boston Business Journal (I live in the Boston area)
    Techcrunch
    The official Google blog

  • Comments Off
  • Filed under: Information Architecture, Software Design, web 2.0
  • There’s so much information out there on the web sometimes it’s difficult to find just the right level of intake versus filtering. I’m a bit of a visualization junkie. I’m a trained graphic designer turned web designer turned UX designer. I found by combining several technologies it helps me reach the right information.

    1. First I search for visualization on del.icio.us

    delicious_vis.gif

    2. Second, I grab the RSS feed from the executed search:

    RSS from Delicious

    3. Third I add the feed to my Bloglines account

    4. Fourth I scan the results…

    There are usually about 100-200 new results per day. I scan the list looking for a high number of users who have tagged sites with the term “visualization”.
    Bloglines Display

    Here’s an example I found the other day which is great graphic design and information display. It informs in an entertaining way. There are loads of these gems out there. I’s just a matter of being able to find them.

    Vampire Energy
    Vampire Energy


  • Comments Off
  • Filed under: Information Architecture, graphic design, web 2.0
  • Widgets and your brand

    Widgets come in all shapes and sizes. They live on your desktop, MySpace, web pages, PDAs, phone etc. They are small applications that are surrounded by other components and other brands. So how do you balance your own brand and still allow your widget to “fit in” with the other ones? Take a look at the NBA widget.

    The NBA has a prominent brand which they would like to protect but they also need their creative to compliment the environment in which it is to be displayed. It also needs to look “cool enough” to engage a user enough to include in their personal space.

    I looked through many of the web’s top Gadgets and Widgets an found a few similarities amongst the most downloaded:

    • Simple – (don’t try to tell me weather trends in the US, just tell me if it’s raining outside)
    • 3D – Use shadow, highlight and perspective to make your widgets “pop”
    • Use logos and colors to maintain your branding but keep the saturation level low so you don’t conflict/compete with other environments.
    • That “We 2.0″ look -Glossy surfaces, large fonts, gradients, textures etc.
  • Comments Off
  • Filed under: Software Design, Widgets & Gadgets, web 2.0
  • A few weeks ago I attended the REMIX Boston even. I wasn’t overly excited about any of the presentations which usually causes my mind to wander. Being a designer I began inspecting the marketing collateral associate with the event and noticed not only a style but what I consider a new trend, “ornamental design”

    Here’s an ad for the event:

    REMIX Boston

    Notice all the ornamental swirly flower like designs to the left? Their only purpose in this ad is style. It doesn’t provide the user information, directions, venue or any other useful information. It’s purely style. Not only that but it takes up about half of the available ad size. I’ve started to see this style more and more in web design. Check out one of my favorite sites The Web Designer Wall.

    I wonder if we’ve somehow moved from the Tuscan (Web 2.0 look and feel) to the Corinthian (ornamental look and feel)?

    Tuscan and Corinthian column styles

  • Comments Off
  • Filed under: graphic design, web 2.0
  • Web 3.0 Seriously?

    I stumbled upon this (actually on Digg but who’s counting)
    Web3.0 Is Coming

    I think in some ways it’s a repeat of our past. The early 1.0 days were all about creating sites and worry about the finances later. In some ways we’re back in that mode. There’s a lot of VC money out there being placed in companies with cool Web 2.0 applications but very 1.0 business models. This article is about how to cross the threshold of cool and making money.

  • Comments Off
  • Filed under: web 2.0