UXer : Nice picture of a park, right?

Person : Umm… that park is jacked up. The grass and hedges are all trampled…

UXer : You see people ruining perfectly good landscaping… I see patterns, in human behavior and desire.

Take a closer look:

We’ve all seen this and at one point or another use these desire-lines as a routine part of our commute.

As long as humans have roamed the earth, we’ve carved these paths… “I’m here and I need or want to go there.”  If you and others repeat the pattern enough times, a path is forged.

In photo overlays, the red paths are high through-put pathways and the white overlays are low-flow alternate paths.  In the landscape, we’re able to see these marks because the trends trample down plants and compact the soil to a point where things can’t grow.

Once the trends emerge, we can get a sense of what the original design deficiencies were and, as designers, set out planning design solutions to meet the expressed needs.

The interesting thing about human behavior is that, while we all have varying degrees of tolerance in design or system deficiencies, we all modify our behavior to make up for system deficiencies in the name of getting things done.  Often times, these behavioral changes take place subtly and over longer periods of time such that the users themselves aren’t even aware they have bent themselves around a broken system.

It didn’t take much to see these areas and make some hardscaping recommendations, where the evidence is tangible.  But as a system designer, a user interface designer…  a UXer, how do you “see” these desire-lines in the digital landscape?

You have a number of alternative methods depending on available data and resources.  I’m going to cover the following:

• Usage Metrics
• Usability Testing
• Contextual Research

1) Usage Metrics

2)Usability Testing

In any user dependent or focussed system, we say always say “test early, test often”.  5 users can demonstrate 85% of the problems in an interface, given that the probability a user would encounter a problem is about 31%.  Formal usability tests are great for spotting gross system deficiencies, and gathering both quantitative metrics on how a user performs in the system (time to completion, number of errors, task completed, etc) and qualitative metrics on how the system performs in the perception of the end user  (subjective satisfaction, ease of use, etc).

The pre-requisite is knowing what the usability goals are, which parts of the system to test (tasks, workflows, features, designs) and how to recruit for the test.   Usually a good look at the usage metrics should help point to areas that need testing.

For recruiting, you need to screen appropriately to avoid heavy biases that can skew the study results.  This takes some level of understanding about the users and behaviors that trend moderate-to-center of the behavioral dimensions you want to target.

You’ll see which specific design or workflow is tripping up or getting in the way of users task or goal completion.  But unless your moderator is asking the right questions, “Why did you do that?”, “What were you trying to accomplish by doing that?”, “What did you expect to happen when you did that?”, “How would you change this design to better meet your need?”  It’s difficult to get a glimpse into the human intent behind the usability problem.

Going back to the landscaping image, the “user” intent is quite clear…  ”I’m here and I want to go there” – but in the context of system usage, often times the interface is such a complex labyrinth to task completion that it’s difficult to understand all the subtle nuances that impact our behavior.  This is particularly relevant point because most often, usability studies are performed in a lab setting and or the user is removed from their natural context of use.  This brings me to Contextual Research.

3) Contextual Research

In the past 10yrs we’ve conducted a good deal of these studies and the results are always extremely insightful, not only for the system stakeholders, but often times for the subject who realizes how contorted their processes have become to make up for system deficiencies.

If you could draw marks in time and space, the general trend lines go from in-system workflows to jumping in and out of other systems, documents, emails, notes on paper, phone calls, IMs and back to the system to complete the any given task.  Most times when we ask, “Why are you doing that…”  they’re unaware that they’re doing anything out of the ordinary, and once it dawns on them, they realize… “Well… I need this piece of information to complete this task.”

BOOM!

This is a perfect example of a user jumping off and blazing their own to make up for gaps in the system design.  These contextual inquiries have been priceless engagements for our clients who not only discover opportunities for enhancements they were never aware of, but often times entirely new interaction models that had never been considered that bring widespread organizational efficiencies that can save millions of dollars.

Next time you find yourself walking along one of these…

 Think about what other things you do (in your job, online, or at home) interacting with any technology that feel “off the designed path”  and know that you’re probably not alone…  that somewhere in time and space is a beaten path waiting to be discovered and designed for.

I once heard Steve Smith (@orderedlist) say:

“Design is: Intentionally making things Amazing!”  I totally agree, but you need to know the problem space first.

By Jon Fukuda

Quick update: I just found a nice related post by Bella on www.uxgroundswell.com

Everyone’s getting excited about interactive technologies making their way into the automotive space. Social web features like twitter, facebook, foursquare and others have been in our cars for several years now, just on our mobile devices and not packaged as a piece of the overall dashboard experience. Product managers at all major car-manufacturing houses have been thinking about ways to bring technology of today and the future into our cars. To date, a lot of teaser videos and commercials have been showing Minority Report like heads up displays on the dash, touch screen windows and voice command interactions and some of these are starting to come on line… others are still in R&D and off in the distance. So where are we in the meantime?

Over the past several years, Onboard Touch Screen Consoles have been making their way into the market… and they’re all the rage! While the trend started in the mid 90′s with outboard GPS systems and LED media displays, there’s been a lot of momentum behind putting integrated systems into center consoles of vehicle and trying to pack it with as many features as possible.

While the gadget lover in all of us is starting to feel all warm and fuzzy, there are definitely some inherent risks. Basically, anything taking your attention off the road is bad. So it seems the “don’t talk on the phone or text and drive” sensibility is giving way to our gadget luv.

But let’s take a second and acknowledge some contextual realities. You’re in roughly 4000lbs of metal with a combustible engine moving 25-35mph in the city and 55-75mph on the highway. Does it make sense to be taking your hands off the wheel and eyes off the road? The National Highway Traffic Safety Administration (NHTSA) has taken the position that:

Some technologies are simply too distractive for most drivers. Touch-screen computers found in most Ford models used to control the radio, climate, and in-car navigation was said to be “overly complicated and distracting” according to Consumer Reports. And, some vehicles in the GM lineup offer communication tools to verbally update Facebook and Twitter pages – a feature too distractive for most drivers.

Here are some approaches to packing your car with technology and apps in a way that doesn’t interfere with your driving:

1) Interactive Apps in the Car are for the Passenger, Not the Driver




This is pretty straightforward… keep the distracting tech geared towards passengers and steer clear of putting the driver’s attention at risk.

2) You’re car is the interface… not your fingers/eyes.

This is the really innovative approach… the car and it’s native features are an extension of you. There is a lot of untapped opportunity to be explored in this concept.

Here are some other ideas worth exploring:
Take advantage of where the driver’s hands already are… the wheel. Thanks to advances in Mobile, tech and gadget users are getting used to a wide vocabulary of haptic gestures. Add text to speech and voice commands technology and you’ll really get some rich user experiences without taking your hands off the wheel or your eyes off the road.

Whatever the approach – there will be mishaps along the way. Today’s ubiquitous cup older has had a long journey from glove compartment trays and door holsters to armrests, center consoles and dash boards, the cup holder seems to be a feature the some manufactures “get” and others don’t.

The only way to continuously improve designs towards efficiency and usability is to explore opportunities, prototype, test, and tweak. Who knows this better than Donald Norman, author of Emotional Design. Donald states that Audi’s approach to the cup holder seems to “reflects the old-fashioned German automobile design culture, which proclaims that the engineer knows best, and considers studies of real people driving their vehicles irrelevant.”

We’re keeping an eye on interaction design in the automotive space, things are about to get interesting! Let us know what interactive automobile experiences you’ve had that either work or fail – we want to hear from you! Thanks for reading.

Learn how our friends at Promet are taking Cab services mobile with Green Cab.

It’s DrupalCon Week!  Our team has been busy getting our materials together for the convention and we haven’t had much time to blog or tweet about things, so here’s the skinny.

For nearly two years now, Limina has been collaborating with Rockstar Drupal development team Promet Source headed up by CEO, Andrew Kucharski (@akucharski).  Together, Limina and Promet have delivered SBA.gov, DiscussRH, CGCGinc, OptionIt, and two other amazing, (yet to be disclosed) projects currently underway that we can’t wait to share with you all. Together, the team has worked on customizing more than 18+ community contributed Drupal modules including:

• Organic Groups
• Drupal Forums
• Content Tagging/Rating
• Social Distribution
• Content Administration
• Category and Geo Targeting
• Cart Timer
• Open Selector
• Open Layers
• Mega-Dropdown Menu
• and bunch of home-brewed custom modules

Well, we got to see one in action and it is quite impressive! There are multiple fields of thousands of mirrors and all of the mirrors in each field are directed to reflect the sun’s light at a single point (called a ‘boiler’) to harness the heat and literally boil the water inside. The steam that is created is sent to the turbine where the electricity is generated.

Limina was asked by eSolar to help redesign the application they use to control the mirrors – essentially, controlling the amount of heat that is directed to the boiler.

eSolar designs and develops Concentrating Solar Power (CSP) projects that start at 46MW and are scalable to any size. Limina worked with eSolar to develop a sophisticated conceptual design for their solar power plant control system. Limina used in-person interviews to inform the requirements from a workflow perspective and met with members of the eSolar engineering team to understand the technical parameters of the design. The output was a set of detailed designs that effectively incorporated user and technical requirements – providing an engaging, intuitive, and interactive user experience.

The on-site interviews allowed us to see the users in action and design a concept that gave them the visibility they needed at the various levels of detail – from plant to field to heliostat (individual mirror). Our observations also helped us to understand the hierarchy of information, from most important to least, which allowed us to create effective dashboard designs. The software will be displayed on multiple monitors, and the Limina team designed the application to make full use the available screen real estate.

This was an exciting project for us, and it reinforced the importance of collecting first-hand data from actual users in a real setting as an input to any design process.

Key takeaways:
Project process

• Fast concept iterations helps to avoid unnecessary detailed design. We designed 8-10 concepts in one day and narrowed them down to two during our end of day meeting with the client team.
• Frequent communication with client team. We were able to get feedback early and often from our client that helped the design progress much more quickly.

Application concepts

• Users need to be aware of the plant status at a glance – situational awareness is key.
• Using flags and alerts is more effective than displaying raw data. It allows the user to focus on problem areas and drill into individual issues. They don’t have to spend their time scanning the data looking for problems.
• Tailored information displays will give operators an opportunity to build expertise in systemic trends across the power plant – allowing the user to head off potential issues before they become flagged as problems.

“The deliverable and the process was well above and beyond what I personally expected, and the work output will be (I foresee) extremely useful in our development of our software….It’s snazzy, it’s professional, it follows the operator workflow (which is important), and it makes operation clear and easy.  Thank you!”

- Matt Hartshorn (eSolar Development Engineer)

This coming Monday: 10/24/11 from 6-7:30PM Luke Wrolewski will be giving a a talk on The Impact of Social Models.  Sign up for the event here: The Impact of Social Models

When: 24 Oct 2011 6:00 PM – 7:30 PM

Location: The Microsoft Building | 5404 Wisconsin Ave, Chevy Chase, MD

Spaces left: 11

Join us afterwards to talk about local UX opportunities and learn more about what Limina is up to!  (Drinks on us!)

Between 2009 and 2010, Limina worked with a brilliant group of scientists and software engineers at Molecular Devices on their next generation digital microscopy software.  After a thorough review of their existing product, and some contextual reviews of the software in use, Limina conducted the following:

• Cognitive Walk-through
• Expert UI Evaluation (Analysis and Recommendations)
• Alternative Interaction Models
• Workflows, Storyboards and Wireframes
• Usability Testing
• UI Designs and Custom Iconography.

You can see some examples of our work here, but the video, with our client emphasizing the value of enhanced User Experience is the real success story.

-Jon

(Reblog)

IDEO released a five-minute video exploring the future of digital books. Their illustrated concepts highlight some interesting opportunity areas in the publishing industry through three distinct reading experiences:

Nelson reinforces books as critical thinking tools, providing multiple perspectives, references, and current conversations on a single subject. The layers of information beyond the book itself provide greater context and encourages a deeper dive into the book throughout history and into the future.

The Future of the Book. from IDEO on Vimeo.

Coupland addresses the challenge to stay on top of the thinking and writing in our world and professional field that so many of us feel. Readers can easily keep up with “must-reads” by following what colleagues are reading and interact with them through “book clubs” and other social layers (discussions, suggestions, lists, purchases) to help each other share and learn.

Alice explores new ways for users to interact and affect written narratives by introducing non-linear and game mechanics to reading. By introducing the reader’s active participation, this concept “blurs the lines between reality and fiction.” Certain interactions allow the reader to transcend traditional media by utilizing geographic location, communication with characters, and user contribution to storyline and plot.

A very cool blue sky project from IDEO to say the least. I enjoyed the way they chose to compartmentalize the functionality rather than attempting to redefine the book in a single all-inclusive interface (a failure we see in most of these concept projects). This project, and examples appearing all over the industry, only further prove that the future of books in the digital age does not lie in single solution but rather a utilization of technology to better address the wants and needs of users to share, interact, and learn more through specialized design solutions. We are certainly on the precipice of a whole new world for this morphed understanding of the “book.”If you are interested in hearing more about IDEO’s project, check out the interview with two of the project’s designers, Duane Bray and Robert Lenne, on WNYC’s Brian Lehrer Show. There’s also a conversation about the topic going on over at IDEO’s Facebook page.

Video and photos from IDEO.

This post was originally posted by Willem Van Lancker, 21 Sep 2010

• 20 Websites to Help You Master User Interface Design
• 10 Tools for Evaluating Web Design Accessibility
• 11 Inspiring Lessons from Web Design Experts
• Best Practices for Hints and Validation in Web Forms

Hope you find these helpful,

-Jon Fukuda

So, you’re lead engineer on the front end web team and you’ve just been handed your UI specs hot off the press.  They look great, the product management and design team are throwing high-fives…  but you’re worried about how to implement all of their fancy ideas; drag and drop, sortable tables, in-line editing, etc.  Moreover, how do you know when it’s appropriate to use them?  What are the rules?  When do you use an accordion over a tabbed UI and why?

Thankfully there are a bunch of UI Pattern libraries out there on the web.  Some are heavily information design focused others have user generated content and some that are more developer centric. In this post I’ll share some example sites, discuss their significance, benefits and short comings, then I’ll shamelessly plug the need for working with an experienced professional to help you navigate through UI Patterns… aka Limina.

The O’Reilly Guys

http://designinginterfaces.com/ (formerly http://time-tripper.com/uipatterns - soon to no-longer exist, or the 3yr old claim states).  Now, this is a great source of information if you’re looking to understand when, how and why to use various UI patterns.  Their web UI counterpart: http://designingwebinterfaces.com/explore.

Benefit: Both sites provide visual examples (not live demos) along with comprehensive writeups on each pattern.  If ever faced with making the decision between checkboxes vs. multi-slection lists or radio buttons and single selection lists.  This is your destination for truth.

Falling Short:  The site is static, no comments from the community, examples are slowly becoming out dated.  Most importantly, there is a lost opportunity to link out to live demos, and sample code to help the wayward front end developer to get their feet wet.

The New Guys

Okay, maybe Infragistics has been around for a while, but they just recently released Quince, while this site is yet to support user commentary, it does have a number of bells and whistles that give the O’reilly folks  a run for their money.  (Here is one other  dynamic / community oriented repository that I won’t expand on, but feel is worth mentioning -  http://ui-patterns.com/)

I have a personal problem with the over-use of  Silverlight which mearly adds “Pizzaz, for the sake of Pizzaz”.  The features, functions, organization and structure alone are what make this a great site, I can do without the crazy coverflow and overlays which is really tiresome after the first 5 minutes.  It’s a good example of “Just because you can, doesn’t mean you should.

Benefits: This repository is dynamically fed by a community of UI experts and patrons of the topic.  It provides a rating system which tracks implementations and approval of the patterns.  Community members can submit further examples and write ups of patterns.  Comprehensive write ups on the patters addressing; The Problem, Solution, Context, Rationale, Implementation, Resources and Tags.  They’ve integrated distribution and syndication tools to post or subscribe to content on their site.  They’ve categorized the repository by User Tasks, Tags and Wireframes and added some niceties like; Recently Viewed , and Simple Search and Filters.  Their broad and  deep repository is rich with examples and is growing daily.  Subscribing to the site makes it easier to keep up with the changes.

Previously overlooked by the Limina team: User Comments – currently below the fold on the Pattern Viewer. This will be addressed in their next major release.

Falling Short: While Quince took one step further to link out to live examples, they still don’t provide technical details or code samples for back and front end support for the patterns.  This may have to do with Infragistic’s presentation layer product and the need to conceal their secret sauce.  Correction: This is out of scope for Quince’s technology-agnostic and UX-centric UI pattern guidance. This is why the next category is so much more intriguing…

The Developers – JQuery

Who, in all User Experience Cocky-dom, would have thought that it would take a couple of smart developers to start pulling it all together?  Over that past 10 years a slow movement of front end javascript, css and html developers to iteratively produce, share and modify non-standardized functions, effects, controls and more on various repositories like DynamicDrive and JavaScript.com.  While these repositories had the beginnings of some good ideas, it lacked a stable framework for extensibility, consistency, and clean standards that would make for a manageable UI.

Not too long ago, frameworks like Script.aculous. Protoype, MooTools and JQuery unleashed their powerful js libraries.   For the most part, pitting these libraries against one another will demonstrate a mish-mash of pros and cons that more or less put them on a level playing field.  I singled out JQuery due to the earnest effort that have made to compile their components, modules, widgets, effects and interactions into a UI pattern repository, built on top of the JQuery Javascript library to create highly interactive interfaces.

Benefits:  One of the best parts about the JQueryUI library is that they not only provide working demo’s, but that their demos are hooked up to demonstrate subtle modifications that impact their use.  They provide code samples and technical overview and configuration options.  In all of their examples, they have taken into consideration; user feedback, interaction affordances, and high-level CHI principals, which makes huge strides towards closing the gap between standard usability heuristics and front-end development.

Falling Short: Granted, this is just their first pass at compiling their patterns and not to discount JQuery UI achievements, but they have just begin to scratch the surface.  Their repository will be greatly improved by rolling up components and widgets into mature UI patterns that take context into consideration.  Both Oreilly and Quince got this part right.

You have your homework cut out for you.  We recommend you study up on your pattern libraries, usage rules and stable code repositories.   Keep in mind, no combination of, or independant,  UI Pattern repositories are sufficient to replace a good user expereince research and design team.  Even the most rich interactions and highly functional UI’s will fall short in the face of un-met or miscalculated requirements.  We’ll be here for you when you need us.

-Jon

At Limina we spend a lot of time working on complex information display where users are making critical decisions based off of key content, often displayed in tables.  Therefore, it is very important that the formatting of tables be as consistent and clear as possible. Tables should clarify and enhance the information they present, not obscure it.

I like to think that most of us involved in GUI design (be it on the interface design or development end) have either read Tufte’s books or heard about his useful guidelines for laying out and designing tabular data. Yet, one of the most common issues we run into when performing Expert UI Evaluations is poor table design.

Googling around the web I found few sites discussing the topic of table design other than those providing libraries of CSS table designs; however in many cases these reference libraries actually add to the proliferation of bad table design. Developers get excited when they figure out a way to code up a new table style or interaction method and post it for others to use. But there is little discussion on where and when (if ever) these solutions are appropriate. Remember, just because you can doesn’t mean you should.

Here are the three areas where we commonly see the most UI design and usability mistakes and some guidelines that should help you create more useful and usable tables:

Design Style:

Help users focus on what they can learn from table data; the data should stand out, not the design of the table.

Minimize visual clutter and avoid over styling

• Do you really need horizontal and vertical grid lines and an alternating row color?
• I can’t think of any good reason to ever use a patterned background

Avoid over use of color

• A basic table shell does not need more than 2 or 3 colors to differentiate column headers, a content/grid and a selection highlight
• When you use colors use them consistently. Users need to know they can count on the visual cues you provide them so they can act efficiently
• When using an alternating line color keep the contrast to a minimum and use soft colors that are easy on the eye
• Don’t make the alternating line color too similar to your line item selection color

Content alignment (left, right, center)

• Know your content alignment rules. Typically content is aligned left. But numerical content can only be revealing if the column is appropriately aligned and left alignment is not usually the best choice.


SOURCE: http://blog.editage.com/?q=Aligning-Columns

Use cell padding and spacing – cramped table cells are much harder to read, make sure you provide enough space to allow users to easily scan content

Interaction style:

Unless explicitly called out, a user will typically need to spend time “discovering” interaction features.  In the case of tables, there are a number of visual cues you can provide to direct their interactions.

• Define a set of table styles that lets users know how they can interact with table content; read-only, editable, selectable, etc
• Apply the styles consistently
• Consider revealing controls on-hover to decrease visual clutter for scanning, but enable the table for interaction when necessary
• When designing complex tables that have mixed content types (e.g. read only and editable and/or selectable) provide a visual style that illustrates these key differences
• Clearly indicate which columns are sortable and which is the default
• Indicate whether users can resize columns and rows
• Consider using mouse over text to display lengthy cell data when truncating
• Avoid using fixed tables inside panes or windows that horizontally resize. The reason for this is because it will be easy for users to accidentally lose some columns by resizing a table-containing pane to be horizontally smaller

Table usage:

Is a table the best format for displaying your content? Sometimes viewing data in a tabular format doesn’t help your users see trends in the data. Ask yourself if the information would be better displayed using a simple (or sometimes complex) visualization. Or, consider providing both a tabular and visualization view of the content.

This list of considerations is not meant to be the definitive guide for good table design but it should help you avoid the most obvious pitfalls and put you on the right track.

-Maria