Despite the best copy writing and most well intended navigational systems on the web… one of the most startling facts of web usage is… people don’t read. Sure, they see words and scan for key words and main points, but they don’t read in the traditional literary sense. Both focused web users on a mission to accomplish a task and casual web surfers, those just browsing freely, are not on a mission to read. Their purpose is more tactical and akin to hunting and gathering than reading.

Our reliance on visual and audio senses for survival and focused execution of tasks in the physical world, are equally important for successful orientation, navigation and consumption on the web.

In the majority of eye tracking usability sessions, you will note that the eye moves in a seemingly chaotic yet highly systematic way. Typically starting at the top left, the user will quickly scan across and down stopping a large and distinct blocks of color, chunky text and other visual punctuations. The same scan is repeated a number of times incrementally slowing and resting on the initial set of visual markers with some variance in sequence and jumps to neighboring content. Actual reading in a literal sense does not happen in the first three to five seconds.

You have roughly three seconds to accomplish the following:

• orient the user
• provide key visual markers
• enhance aesthetic experience
• avoid competing with high priority content and actions

It seems like a relatively simple set of tasks, but in three seconds it’s a relatively challenging task. The relative complexity and levels of difficulty vary depending on the site and content objectives. Fortunately, there are proven methods for optimizing the design for scanning and discovery.

1. be conservative. No matter how tempting, minimize the use of color and attractive design elements unless they directly align with a visual system to support content enhancement, clarity, and information of navigational visual cues.
2. be systematic. Patterns of use are driven by patterns in design. Establish punctuating visual treatments for key information, functions and features. Determine content and feature importance both from marketing, business, and functional aspects as well as from the users’ perspective. Once a clear priority is mapped, apply the appropriate visual emphasis the establish visual weighting and emphasis. You can use placement, size, proportion,spacing, color and graphic treatment to establish you visual hierarchy.
3. be consistent. Users rely on repetition to establish a mental map of your organizational system.
4. keep it simple. Users won’t be impressed with how much information you can get above the fold or on the page or in you navigation. Users are more apt to reward sites with clear, simple, and clean designs with repeat visits if they can consistently find what they’re looking for. Simplicity is the art of eliminating clutter while providing valuable content and contextually relevant visual markers for navigation and related features and functions.
5. have fun. Don’t be so serious… users will stay longer and take time to orient themselves if you can avoid chasing them off your site in boredom. Use informal and playful copy as appropriate, but remember the priority is not to distract, but to avoid banality.

Happy designing! Feel free to share examples of your work or other designs that achieve zen visual design.

-Jon Fukuda

As a practice, our methodology has been flexible enough to add value to every client engagement in our portfolio.  As our team engaged on increasingly more frequent Agile/SCRUM driven teams, a trend which began for us in 2006, we needed to make some adaptations to keep pace with rapid iterations.  The following is a rough breakdown of the adaptations we made by “activity”.

We tool a look at the activities and deliverables we execute in a more verbose and lengthy cycle and dissected each phase to  determine which tasks and deliverables dovetail with the Project, Incremental Release and Sprint cycles of an agile project life cycle. Each level invariably incorporates tasks and deliverables from the traditional Analysis, Definition, Design, Development phases.  Here’s what we came up with:

Product Cycle: Assuming 6-9 months.

Intense Observation and Analysis activity in the all important “Phase Zero” a period of three to six weeks.  In the absence of the waterfall lead time, this is the cycle where UX research seeks to identify the following in rank order:

• Task / Activity Model
• User Role Model
• Business Stakeholder Goals
• User Goals
• Competitive Analysis

Release planning: “Iteration Zero”.

While rough concepts are being established to determine technical frameworks and baseline use cases, the UX team takes 2 weeks to elaborate on the primary storyboards to cover feature definitions in the first iteration.

The At this phase, requirement gaps have been identified, rudimentary user typologies have been identified, development road map has been established based on technical complexity, feasibility, business benefit and user benefit.  Relevant personas for the user stories and features are drafted, usage scenarios are  drilled down, the draft interaction model is established and the associated process flows and wire frames are generated.  This iterative cycle is a lather, rinse,and repeat.

Ideally after 2 weeks iteration zero kicks off user stories, wire frames and mockups and will be available for itteration one development work.

While UX team is cranking out user stories and related assets for iteration two, custom asset creation and spot UI reviews run in parallel in support of iteration one.

This  completes the lather, rinse, repeat cycle.

Meanwhile, persona assets, user stories and related assets are aggregated up for incremental release review.  Any usability or user experience hurdles are triaged and assessed for re-insertion into the iteration plan.  Instructive text, user help documentation are written and evaluated for release.

Benefits and Lessons Learned

As a seasoned UX practitioner, I know the value of getting the requirements right before writing a line of code and my initial reaction to agile development was harsh to say the least.  It’s just a temporary jolt.  Once you get in the swing of rapid iteration and continuous design, you barely miss lengthy requirements gathering and documentation.  The clear benefit is low upfront project spend and near term return on investment.  In traditional models, upfront costs on analysis, strategy, definition and design don’t immediately translate to rapid deployment.  And the upfront cost is significantly higher to account for  end to end specification prior to development.

In an agile team, the analysis, strategy and definition are more light weight and design an development run in parallel.  If high yielding business benefits are addressed in the early release, you will be seeing a return on the investment   earlier than you would have if you staggered the design and development in waterfall fashion.

One major lesson learned for Agile UX in practice:  It is absolutely critical to get one or two iterations ahead of the development team. One slip, and you lose any runway for giving yourself the time  necessary to construct successful solution to meet the needs of your users.

Happy Sprinting UXers

-Jon Fukuda

Agile Usability is clearly blowing up and becoming a much more efficient model for addressing continuous design and development, so it’s no surprise that this page in particular has piqued some interest. We had not, however, anticipated that our concept was something someone would lift almost to the letter.

A small IT and Development Outsourcing company, BMBO, decided that they liked the visual concept enough to take roughly 90% of the design and visual concepts intact, while altering (minimally) the content.

Joost van de Wijgerd, Founder and Advisor to BMBO, has yet to respond to our email which acknowledges the uncanny resemblance. There’s no telling if they’ll attribute the design (which you may note they ironically watermarked as their own) to Limina, but in the mean time… we’re flattered.

Recently, intranets and enterprise systems are being met with s host of new “social web” requirements. How are these new requirements bleeding into the corporate culture? How successfully are these requirements being integrated? What are the challenges, what are the risks and how do you define success?

Our study looks at internal company networks and how they are or are not employing social media as a means of increasing or aiding communication, collaboration, process management and productivity. Our initial responses are giving us a better idea of the importance of social media on the company intranet as well as where issues currently exist that might be preventing companies from making use of the technology.  We’re confident this will be a valuable report.

Our responses are coming from hundreds and potentially thousands of people at all levels of their organizations. We expect that this approach will give us a more accurate representation of the current conditions.

Survey participants will receive a pre-release version of the report when the results are compiled.  Take the survey!

The survey should only take a few minutes to complete. For all questions, there is a “n/a” (not applicable) answer if the question does not apply to you or your company.

About Limina

Our user experience research and design consultancy specializes in user research and complex information design which includes multi‐layered workflows and complex visualizations. We improve user effectiveness, make products easier to learn, operate, and more meaningful in their function.

If you have questions regarding this report and our research program, please contact Mimi Knowels (mknowles at limina-ao dot com).

Limina is often faced with products that have been in the market for years with little to no professional user centered and UI design methodology applied. It’s typically apparent in the interface before delving into the history of development through issues including but, not limited to the following examples:

• inconsistent UI patterning
• obtuse, or in many cases, non-existent workflows where users are either left to their own devices to develop their own approach to the system or spend time in manuals or training
• random color and graphic treatments with little or no usage rationale
• core features and functions hidden in right click menus with no alternative access
• extensive use of dialogs and workspace changes to complete primary tasks
• random and inconsistent screen layout
• chop-shop iconography, cut and pasted from other applications

Most of these issues can be attributed to an engineering driven culture where usability has not been a core part of the methodology. Sure, the code is clean, the feature works, QA and Unit Tests have passed with flying colors… but is it usable or useful from an end to end experience?

A typical engineering approach to incorporating customer feedback
As a stop-gap to implementing user centered design practices, we’ve heard: “We’re meeting with our customers regularly to hear what they need and we keep them happy by feeding these requirements directly to the engineers to implement.”

First of all, we applaud you for going directly to the users with your product and taking back their requests into the design… but this is a slippery slope.

Although you may know your users and even have some working for you, how well are you capturing their needs? Are you asking the right questions? Are your users able to articulate what they need? You may have voluminous user feedback, support call logs, or error log reports on file, but have you put the user data into a framework that generates an actionable set of UI enhancements?

Equally important; when you have captured their feedback, how do you use it? Without a clear definition or roadmap for incorporating the user feedback, your product is at risk of losing competitive ground. When a company has to spend additional revenue in extensive training sessions, help documentation, call centers and product revisions, the margin of return on investment can take a massive beating.

Here are some activities to help you to incorporate user feedback into your agile development practice:

1) Give the feedback some context – What were users doing or attempting to do when they encountered the issue, and what are their roles? Usability specialists conduct a set of contextual inquiries to interview and observe users as they are performing various tasks in the context of their workplace to determine both system and non-system based activities, documents, and tools that are used to complete their tasks.

2) Quantify and qualify the user data – Where do you see common issues reaching a critical mass? Which are the exceptions and how do you prioritize them? What issues constitute a completely new set of features and possibly a new product?

3) Organize it – Once you have synthesized and prioritized the issues, determine their relationship not only to the system, but also to each other. Which comments are related and which ones are specific to a given task or feature?

The result is a set of researched usability issues that can be organized into enhancements prioritized by issue, prevalence, technical complexity, business, and user benefit.

Such a framework should be employed when embarking on a product definition or enhancement process. It allows parties from marketing, product management, and engineering to uncover the root of software design issues that challenge usability, and ultimately to gain a deeper understanding of their users. Product managers and engineers who gather and process user feedback assist their company by developing the right products and tools for their customers.

This post includes an excerpt from Limina’s white paper “Nine Ways to Improve Software Usability and Increase Market Share“.

Skipping this step leads to an iterative path of organically distorting the original design of the system and frankin-hacking patches and appendages to the product to the point where rebuilding from scratch is easier than overhauling the UI when your users start running to your competitors.

There are a great many development teams using agile methods, SCRUMing it out, getting the features out the door to see what sticks. In many ways, this is a helpful model to beat the first-to-market and innovation clocks, but if the net result is revisiting the feature again and again or playing “pass the trouble ticket” from developer to developer as the feature enhancement is punted to the next iterations for months… something isn’t working.

We are all for engineering driven product teams. In most cases, massive leaps in technical innovation are paved by developer teams and individuals unhindered by business and user requirements. But we’re talking about products in the market that have ROI, user adoption, marketability, competitiveness and other business considerations to name a few.

There’s something to be said for dealing with the cost up-front; for taking the time to build a sustainable product whether in its initial incarnation or when producing the next generation of its kind, because the hidden cost of maintenance, marketing and training can work against you in the long run.

Give us your thoughts and share your experiences with us and our readers!

Years ago, various UX gurus touted the coming of the ubiquitous computer– every device would have a computer built in and they would all talk to one another. Mark Weiser coined the term while at Xerox PARC in 1988 and Alan Kay of Apple called this the “Third Paradigm”. It began with mainframe computers (one compute -> many people), followed by the personal computer (one person -> one computer), bringing us to ubiquitous computing (one person -> many computers). Ubiquitous computing can be considered the opposite of virtual reality, rather than surrounding the person within a computer-generated environment, ubiquitous computing surrounds the individual with computers (in between, lies augmented reality). In other words, computers are made to live in our world and not the other way around. Donald Norman updated the term in 1999 and used the term invisible computer and information appliance to refer to the coming revolution of devices that that would have embedded computer chips and effortlessly communicate with one another.

To some degree that has happened, even if you disregard the multiple computers that most people own (desktop, laptop, netbook) even the simple electronic devices that surround us have considerable computing power. According to futurists, my toaster should be talking with my refrigerator to know what kind of bread I have and how I like it toasted or to notify my online grocer that I only had two slices left (some of the early predictions were pretty bizarre and stretched the definition of “usefulness”). But why did their prediction fail to materialize and we’re all living in remedial houses rather than the smarthouse we were promised? Even though my appliances are much smarter than the ones my parents had there is little chatter between my toaster, coffeemaker, or any other smart appliances in my household. Most of the things I own don’t really need to communicate with one another, nor do they have much to say to Net. In fact, most of devices don’t have much to say about anything. My refrigerator still doesn’t know when I’m almost out of orange juice, though, given Tropicana’s new packaging I wish it could tell me what kind I just bought and why it was not the one I wanted. Is ubiquitous computing just one more failed prediction like fifth generation computing (expert systems) or has ubiquitous computing shifting to something else?

Apple takes an interesting two-pronged approach to ubiquitous computing, instead of everything communicating with everything else, the iPhone says – “talk to me, and I’ll talk to those that need to know” and asks “no need for multiple devices, just give me a simple focused task and I can do that.” The latter approach is familiar to everyone who has ever downloaded an app from the iTunes Store, while the former is somewhat new and is made possible by the introduction of OS 3.0 and APIs that allow for easy communication with other devices. The application approach is akin to a universal Turing machine, and the API model is more like a universal interface. It’s not quite two-pronged, rather applications are developed that allow devices to integrate seamlessly with iPhone – I consider it a different enough model as to warrant it’s unique status. For example, Johnson & Johnson made a bit of splash at the Apple developer conference with their demo of LifeScan a tool that integrates a glucose monitor with the iPhone and provides a range of features from simple visualizations of historical data to food tracking to uploading data to your healthcare provider.

Whether or not one believes the hype surrounding LifeScan (is it vaporware or will it see production?), it’s easy to imagine a range of medical devices (or any category of devices) all communicating through the iPhone, all using the iPhone’s screen and its Samsung S5PC100 processor – one person, one user interface with many devices.

I’m not sure if Apple is going to be the one that finally surrounds us with computers or smart devices, but I think their model puts us in more control than the previous one of smart appliances “deciding” for us – when to order OJ, how to toast my bread, etc. My toaster can simply communicate with my iPhone, and I can set how the bread is toasted (silly ideas never really die, they just move around the ether). I think the future is looking less like Terminator Salvation and maybe more like Star Trek [Note: It is very hard to find good science fiction movies or shows that paint a bright picture].

–kipp

There have been some recent crowd-sourcing business models making their way on the Usability Research and User Experience Design scene.  The crowd source value proposition is, “High Volume Results – Cheap” – with some important variables like: Quality, Usefulness, Relevance, Focus, Strategy, and more.

How do you make the right decision on whether or not to crowd-source UX research for your project/product and where will you get the most yield for your time, money and energy?  Here’s a quick review of Feedback Army and Loop 11 as well as some tips for your back pocket.

FeedbackArmy

What is it?

We first heard of Feedback Army back in January ‘09.  This site is almost exactly what you think it might be.

1. You post up a URL and a list of questions/criteria to evaluate against (3-6 recommended)
2. You select the number of responders to your posting (3 tiers – 10 users for $10, 25 users for $23 and 50 users for $40)
3. Make a payment, wait and watch the reviews roll in.

What do you get?

Just what the site claims you get: “Simple, Cheap ‘Usability Testing’ for your Website.”

Depending on your questions and the range of responses you select, you have some variable control on the quality of the responses.  The site allows you to reject responses that are not of the quality you feel is deserving of $1.00 (or less depending on how many you selected).  The site has some tips on usability testing and some guidance on how best to use the service with a nice little endorsement for Steve Krug’s “Don’t Make Me Think“.  For what you pay, you get a fair shake.

As part of my research, I read over comments in the sample reviews, I submitted my own request for review, assessed the responses and I also nosed around some discussion forums where Feedback Army was the topic de jour.

Certainly, this service has it’s benefits (particularly on your bottom line) but there are the typical responses from folks disappointed by their own misguided expectations.  Look, you can’t use a service like this, then complain when you’re not handed a glossy analysis of your user findings broken down by persona & scenario that map 1 to 1 with your research goals.  It just won’t happen.  So when you get shorthand “unintelligent” lol-speak responses you really can’t complain.  Some users may/may not follow your posting to the letter and may spout off whatever comes to mind…  that’s the level of expectation you should have going in.

What you don’t get…

User Demographics & Targeted Personas – you’re dreaming.  The reviewer pool comes from Amazon’s Mechanical Turk – a crowd-sourcing work-in-progress.  While there are advantages here, there is limited control over who is actually doing the work.  The m-turk pool is 70% American… combine that with Feedback Army’s English only UI framework, and you’re limited to US domestic testing.

Quantitative Metrics – You won’t get time to completion and conversion rates,  and industry benchmarks.  If you outfit your test environment with Google Analytics, you can get at some success metrics around goals, popular content, and bounce rates, but with limited specificity on who’s feedback maps to which metrics.

Qualitative Metrics  – You can get if you’re explicit about ratings, but you’ll have to compile your own report if you want the pretty charts.

A Usability Report – this one is all you – if you played your cards right, you can get some decent raw feedback to compile into a report, but this requires a lot of planning.

How to make up the difference:

What are your research goals, what candidate  features/functions to test, what evaluation criteria, etc?  Ideally, you run a series of these to arrive at a more comprehensive view of your product’s usability, and compile the report in the end.  Hiring a consultant or using an internal dedicated resource to own this task will help ensure the value added direction setting and iteration planning for your product post feedback solicitation.

Loop 11

More recently we took a look at Loop 11.  Currently in private beta, Loop 11 is hooking up some usability testing bells and whistles.  I used ‘quotes’ around “usability testing” on my FeedbackArmy review because it’s really just a feedback machine.  Loop 11, however, has scratched the surface on tackling the tough stuff: Targeted Personas, Quantitative Metrics, Industry Benchmarks, and more.

What do will you get?

To be honest, I can’t tell you everything…  Loop 11’s closed beta is by invitation only.  Here’s what the site claims:

Create a user test. This is a lightweight form, but it takes more thought and detail than simply posting a URL.  A 3 step set up walks you through adding test details, tasks & questions and additional test options. The demo suggests you can organize tests into “projects” and save tests as templates.  (nice touch)

Invite test participants. This looks like a nice set of options: Get link to user test: presumably, you can send it out to a predetermined list of users (the ideal scenario), create pop-up invitation for your site: this gives you random users which may or may not be what you’re looking for (less ideal) or purchase from their panel users (needs investigation).  The site claims separation of test participants, making data roll up and drill down more interesting.

Everyone loves dashboards… so why not, a nice dashboard to give you high level data on average page views, avg. time per page, avg. task completion rate and average industry completion rates… That’s right, I said Industry Benchmarks.  Now that’s a rich claim – noting their closed beta partners, they’ve picked Amazon, Ikea, HSBC, Toyota…  these will be your benchmarks folks!  Not a bad competitive pool.  Well done Loop.

Here is a list of metrics you can get in the dashboard:

What you don’t might not get.

You already know that I can’t get a good handle on the truth here based on their current closed beta status.  But here’s a list of assumption you can make based on what they’ve exposed.  I found a posting by Ann Smarty who somehow got into their beta, she posted a light review here.

Validated qualitative metrics – you may get ratings, but you miss out on non-explicit reactions.  The classic,”users will say one thing but do another” is always in effect- you’ll get their feedback, but miss facial expressions, eye tracking, mouse hovering, heat mapping and general behavior surrounding their remarks.

That’s about it, it looks like you get a good set of data collection and analysis features – you still have to set up your test(s) properly.  This means well thought out targeted test goals and participant recruitment.

Online User Testing Service/Tool Limitations:

If you’ve found yourself staring down the barrel of some usability crowd-source projects you’re most likely dealing with tight time-frames and or budgets and you’ve ruled  out a lengthy and potentially costly full blown usability study.  What tips can you learn from user research professionals to make the most of your crowd-sourced efforts and build a design strategy from your study outputs?

1) You can’t meet everyone’s needs.  Take some time to look over the feedback and group them into “UI themes” or “issue categories”.  There will always be outliers – if your study was targeted and you knew the demographic weight of missing the mark on an outlier, then you can factor them in – or, if this outlier hit the exact note that all of the others missed – the note you have been attempting to hit…  then factor them in, but be careful not to upset the balance of maintaining a clear grasp of mass appeal.  You can alway run multiple targeted feedback sessions once you know what your issue categories are. Try your hand at feedback and observation analysis you may find affinity diagramming or mental modeling useful, but don’t forget to segment and simplify your feedback – “verb + noun = atomic task”.

2) User segmentation and personas.  Getting at the psychographics and demographics of your user takes a little extra time & thought and has very real user experience implications.  While no two users on any given system are the same, you can loosely characterize their behavior and relationship to information, objects and tasks into 3-6 types.  ex. Novice, Intermediate, Advanced, Specialist, etc.  The more comprehensive your view of your users going into a study, the more focused your test and test results can be.

3) Reconciliation – User requirements and business requirements don’t always map1:1 to each other, and the technical architecture may or may not support all of the requirements. Map out your requirements into a functionality matrix where you look at all of the system functions and features, making sure that you account for all business and user requirements (using excel helps you stay concise and color coded).  Rank each item by business benefit, user benefit and technical complexity (H/M/L).  Use the matrix to build an iteration plan based on your ranking.

4) Mapping study results to information and interaction design strategy.  You may have a head for this, and if you do, you’ve most likely covered your bases, but it never hurts to get an outside opinion.  Great design is rarely achieved without a great deal of planning.  Knowing where you are, where you’ve come from and where you’re going at all points of development can keep your tests and iteration plans focused and practical.  Understanding how to meet the needs of your users in rapid order with a long range view of feature extensibility will go a long way towards keeping your product on track.

Additional on-line usability testing tools:

Lightweight Usability Checklist

Remote Eye Tracking Service

Concept Feedback

Web Review Community

Remote Task Analysis

Remote Usability Testing

Application Testing

Other (unrelated) Product Crowd-Sourcing Sites:

Graphic Design

Automobile Design (just because it’s cool)

Feedback

Freelancing

Happy testing all.  Remember: “Test early & test often”.  Don’t be afraid to admit you need help, we’re pretty good at what we do.

-Jon Fukuda

Big news! Apple just announced the much anticipated iPhone3G S, along with the new 3.0 platform. As usual, Apple has done a stellar job of hyping the release, providing the 3.0 SDK (Software Development Kit) to their huge following of app developers in advance, encouraging them to take advantage of the new capabilities such as copy/paste, voice dialing, compass positioning, video support with editing, and, of course, improved speed (brought to you by the letter “S”).

New iPhone3G S

These are exciting times for Mac fanatics, and for those who were waiting for the new and improved version to be released before jumping on the iPhone bandwagon. The pricing structure for newbies appears relatively reasonable and assures Apple of many new iPhone customers. However, for existing iPhone customers it’s a bit more confusing, and expensive. This is where the ever present Apple user experience gets interrupted. AT&T, in their ultimate, and very typical wisdom, are essentially punishing their customer base for upgrading to the new iPhone – by charging premiums of two or three hundred dollars for those users who haven’t yet fulfilled their 2-year contract; which by the way is practically impossible seeing as it hasn’t yet been 2 years since the iPhone was released! In other words, just when everyone is getting excited about the new iPhone, loving their experience with the brilliant Apple brand, they get hit in the face with the harsh, predictably bad experience provided by AT&T. Not only are they charging premiums for making the upgrade, but there are doubts about whether the AT&T network will actually support the speed at which the iPhone3G S is programmed to run. And, one of the key features that will be supported across the globe (but not in the U.S. thanks to AT&T) is tethering – a feature many customers have looked forward to since the beginning.

During the preview of the new iPhone there were many app demos that didn’t go as planned, and actually completely flopped, but that doesn’t come anywhere close to turning the fan base away from their beloved brand. But now, thanks to AT&T, the supreme user experience has been interrupted. The question is, given today’s economy, how many current iPhone users will go for the upgrade and sustain the blows from AT&T? I know at least one who is determined to keep up with the Jones’, but how many more will do the same? Unlike AT&T, Apple’s user experience has only improved over the past few years. Let’s see how many users overlook the grey cloud of AT&T to continue their journey with new products from Apple.

- Mimi Knowles

pssst! Limina has embarked on developing our own iPhone app – “Top Secret” for now – but be on the lookout for the official announcement!

The set up

In October 2007, GE Energy signed a memorandum to deploy advanced energy delivery and metering technologies that will give residential and industrial consumers greater control over their energy usage and costs.  November 2007, Google announces investment in energy technologies marking the tipping point of a new era on our energy experience.  Just this month, Google revealed the iceberg tip of their Smart Meter consumer solution, harnessing the power of their analytic tool set, Google has settled in the keystone position of the smart meter user experience.

Earlier this month, Limina had the privilege to compete against leading technology consulting firms for a contract to research, design, deploy and test a consumer facing portal that would empower consumers to make the smart consumption decisions and, in the future, play a key role in consumption based home automation.

Much of how this future scenario is already in the works as demonstrated by LucidDesignGroup’s Building Dashboard product for schools, companies and homes.  With this dashboard you will, not only monitor and your building’s usage, but chart it against your usage history and, if you have on-site renewable power generation such as wind and solar, you can make smart decisions on when to sell back to the grid to maximize your return.

This display panel was featured in a Michelle Kaughman home on an Episode of NextWorld on the Science Channel, where she discussed live scenarios for home and energy automation with the dashboard as the centerpiece.

The Challenge:

1) Getting the energy providers, homes and consumers ready: In October 2008 the Government in the UK announced a mandate to have every household outfitted with gas and electricity smart meters by the year 2020.  On March 19 2009, www.whitehouse.gov posted the recovery act with an $11billion dollar investment in a smart-grid.  While there are no mandates, one can predict action is imminent.

2) Ubiquity: Google is about as ubiquitous of a technology service provider as you can get, their interest and investment in this space is a key indicator that this challenge will be met.  LucidDesignGroup’s Dashboard has thought forward to live case for interfacing with consumers in an easy to use way making the information and more importantly calls to action accessible and elegant.

Limina is always looking forward to turnkey technological and experience innovations in any industry, but has a special interest in contributing to the global efforts to reduce energy waste and build awareness in renewable resources.

-Jon Fukuda

Submit your RFP’s to services at limina-ao dot com

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

Design tips for Rich Clients

RIA’s have been sprouting all around us and every web application (and website) seems to have some ‘richness’ in the interaction that it provides to its users. From information browsing to task based applications, users now have a rich set of controls and interactions that allow them to have a more efficient and satisfying experience.

The interaction guidelines for making web applications ‘rich’ traditionally came from Rich clients (Desktop Clients). But as web applications were deployed in a web browser, they were unable to simply follow the guidelines; instead they had to adapt them to the platform.  As web applications evolved into RIA’s, they introduced some new interface and interaction styles.

Desktop applications have already implemented a few typical web idioms (Hyperlinks, Back buttons), and here are some newer interface and interactions that can be ported back to Rich Clients. These may not apply to all Rich clients but could be used creatively to enhance the user experience where possible.

Organizing without Menu’s (Tabs and toolbars)
Many RIA’s do not use traditional cascading menus as means of organising the applications functionality (normally this is to avoid having 2 sets of menus); instead they use tabs and toolbars. This reduces the time spent searching for functions and also allows for a better way to view and manage content.

Integrated popups

In order to reduce window clutter and to keep the interface visually lightweight, many RIA’s have rich interactive integrated pop-ups.  This allows the users to see the context of the popup content and also have multiple popups open. These popups can show details (Image and text) and also be used to add or edit object properties.

Motion

Although traditionally motion and animation has not been used widely, many RIA’s do a very good job of using transitions and effects to present information, convey organization and show movement from one part of the application to another. Motion provides the user with an added feedback of space and time rather than objects magically appearing and disappearing. Examples of this are: Steps in a Wizard flying in and out, panels sliding, window and objects growing/shrinking as they are brought into view.

Look and Feel/ Branding

Rather than simply inheriting from the operating system, RIA’s have their own look & feel and branding. We are seeing more of this in rich clients (Yahoo messenger, MS Office 2007), but there is a lot more that can be done to help products both stand out and achieve higher usability.

Although it may seem ironic that Rich clients are adapting designs from web applications, as designs evolve and more applications and users take to the internet, this maybe something that can help provide the users have a unified experience.

Creating and using the best design to make your product more usable is just one of the services provided by Limina.

-Vikram Dere