Image Image Image Image Image
Scroll to Top

To Top

User Experience

What’s designed. What’s built. What’s needed.

On 06, Mar 2012 | One Comment | In User Experience | By Ryan Feeley

One of the things that’s fascinating about developing products is the radical conflation of product planning, market appetite and the nuts and bolts of shipping software. When a project finally launches, it is invariably a product of the organizational culture from which it was created.

I needed to create this diagram, if just for myself, to make sense of the three forces that often collide when a product is created: planning and design, engineering and development, and lastly, user needs.

Ideally, these forces align perfectly, and not a single human calorie of energy is wasted; but in real-world applications, the overlap make not even occur at all.

  • Designed & built but not needed. When product managers don’t build products with a clear understanding of the customer, features will be built when they are not necessary. This needlessly complicates the project’s code, supporting documentation, vision, and testing process as well as detracts from the desirable aspects of the product.
  • Designed & needed but not built. In an agile environment, features are typically built in priority. When items are not ranked in order, there may not be a chair to sit in when the music stops.
  • Needed & built but never designed. In my experience, this is rare, but often there will be super hero developers that can catch design gaps at the last minute and compensate for it.

Can you think of some product examples that typify the various spots of the diagram and degrees of overlap?

Beyond Lorem Ipsum and why QWERTYUIOP ASDFGHJKL is not good enough.

On 27, Sep 2010 | 4 Comments | In User Experience | By Ryan Feeley

Whether you’re presenting designs for software interfaces, or working versions of software, using good example data can make the difference between a presentation that goes smoothly and a stuttering mess of interruptions.

Ham-fisted developers often have the tendency to SAgfjhtdFYT ITRYFITY their way through form fields when testing application forms, and this soon leads to an interface that bears no resemblance its real-world existence. Worse still, they erase all data from the application with each build so that the interface remains in an “infant” state.

Why use good example data?

  • Enjoy distraction-free presentations. Never again hear “Those dates are wrong.” “That name appears twice.” “That’s not in alphabetical order.” etc.
  • Identify short-coming in the design. Will designs scale to fit content? Will truncation handling be necessary?
  • Find bugs. Does auto-complete work properly? Will it handle non-alphanumeric characters?
  • Mitigate developer aversion to complexity Though it pains them, real-world data reveal bugs earlier and helps developers build better tests.

How can example data best be used?

  • Pre-sort the data so it appears in the desired alphabetical and/or chronological order.
  • For wireframes, use names consistently to better illustrate a real user scenario.
  • De-duplicate examples to avoid confusion.
  • Compile large example sets of data that populate the application with each build.

What tools can help me create better example data?

  • The classic Lorem Ipsum generator is best used sparingly for user-generated paragraphs of text like bio, notes, description. Using it to complete our incomplete design is not advised.
  • The Calendar Date Generator from RANDOM.ORG allows you to generate random calendar dates useful for inboxes, tables and… um… calendars.
  • The Integer Generator from RANDOM.ORG allows you to generate random integers for things like phone numbers, file sizes, and quantities.
  • The Random Name Generator uses data from the US Census to randomly generate male and female names. Most useful for names, but with a bit of processing can be useful to generate usernames, and domains.
  • Existing files are a great source of data. Use Google’s filetype operator to find Excel files, CSV files or plain text files

Have your own favourites? Please post in the comments and I’ll update this post accordingly.

Squarespace hear my plea!

On 24, Mar 2010 | 8 Comments | In User Experience | By Ryan Feeley

While my career is firmly rooted in user experience design, I often find myself rescuing websites stuck in old-world web-designer arrangements and migrating them to blog/CMS platforms like WordPress or Squarespace.

Squarespace It may not be free or open-source but Squarespace has become my #1 recommended solution for small businesses because it’s easy to get up and running, is reasonably priced, and I feel confident that when I hand over the keys to the site, the owner can manage the content succesfully themselves. I wish I had designed it!

Development on the product has been quiet for months, and I’m willing to bet a new release is on the horizon. Before it launches, I decided that I’d best make a wishlist for their team. Most are likely known issues, but even for a near-perfect interface, user feedback is never a bad thing.

  • Often buttons respond as if they’ve been pressed, but then action does not occur, as if they’ve been dragged not clicked. Increase hit area?
  • Allow pages to have different column layouts. I had to work some CSS magic to get Thom’s homepage to look like this. It’s common for homepages to have more featured content, but subsequent pages to have more room for core content.
  • It took me a while to realize that sections can contain either page links, or widgets, but not both together. Now that I know, this is fune, but is this a necessary restriction?
  • Change Widths interface too buried. Perhaps promote to become a sibling item of Banner & Navigation?
  • Applying a border is overly tedious for most common scenario (all-sided solid border)
  • Page links should usage page title as link TITLE. Best for SEO and hint text.
  • I have been on projects where the only horizantal navigation is the footer navigation, currently it not supported
  • Overhaul image gallery entirely
    • Debug image navigation on a slow connection. Loading can be spastic, and lack of loading indicators do not help.
    • Many image professionals do not want to, or are not allowed to, offer full screen versions. Lightbox should be optional.
    • Consider offering of host of jQuery-based slideshows, even my own Wideslide
    • Allow users to embed image slideshows inside blog posts

More comments will appear are they come to me!

Behind the Toronto Public Library’s New Faceted Search

On 19, Feb 2010 | 3 Comments | In Toronto, User Experience | By Ryan Feeley

My 2009 work-highlight was the opportunity to work with the great people at the Toronto Public Library on their new faceted search interface. We tested the interface with over a dozen users, and then made recommendations based on the findings. Almost all of my work has surfaced into the current public beta which is shaping up to be one of the better library websites in North America! Seriously, look around.

As a search-obsessed UX designer, the best part of the project was not the size of the collection, but the richness of their metadata. Most items are described with media type, language, age level, owning branch, subject, author, and more.

TPL Web Team Manager Dara Renton and I recently gave a presentation at UX Show & Tell so we thought we’d post the presentation for people to see the thinking that went behind the current design. We couldn’t get permission from our volunteers to post their Silverback sessions online, but their participation proved invaluable in helping us prioritize the interface.

Best viewed full screen!