Thursday, November 11, 2010
Wednesday, November 10, 2010
Principles of User Interface Design
from the theory of Larry Constantine and Lucy Lockwood in their usage-centered design, the principles are:
Structure Principle
Simplicity Principle
Visibility Principle
Feedback Principle
Tolerance Principle
Reuse Principle
The user interface of an application will often make or break it. Although the functionality that an application provides to users is important, the way in which it provides that functionality is just as important. An application that is difficult to use won’t be used. Period. It won’t matter how technically superior your software is or what functionality it provides, if your users don’t like it they simply won’t use it. Don’t underestimate the value of user interface design nor of usability.
Structure Principle
- organize the user interface purposefully
- make it meaningful and useful based on clear, consistent models apparent and recognizable to users
- put related things together; separate unrelated things
- differentiate dissimilar things, make similar things resemble one another
Simplicity Principle
- make simple, common tasks simple to do
- communicate clearly and simply in user’s own language
- provide good shortcuts that are meaningfully related to longer procedures
Visibility Principle
- keep all needed options and materials for a given task visible
- do not distract user with extraneous and redundant information
- do not confuse user with too many alternatives for performing same task
Feedback Principle
- inform actions or interpretations
- inform changes of state or condition
- inform errors or exceptions
- keep mode of communication – relevant, clear, concise, and in language familiar to user
Tolerance Principle
- reduce cost of mistakes and misuse by allowing ‘undo’ and ‘redo’
- prevent errors by tolerating varied inputs and sequences and by interpreting reasonable actions
Reuse Principle
- reuse internal and external components and behaviors; maintaining consistency with purpose
- reduce the need for users to rethink and remember
The user interface of an application will often make or break it. Although the functionality that an application provides to users is important, the way in which it provides that functionality is just as important. An application that is difficult to use won’t be used. Period. It won’t matter how technically superior your software is or what functionality it provides, if your users don’t like it they simply won’t use it. Don’t underestimate the value of user interface design nor of usability.
Tuesday, November 9, 2010
People Focus
inspired by one of my mentors, Thomas Ewe.
People.
We are in the people business. We may be software, consulting, and services vendor, but make no mistake; we are in the 'people' business. People make our world tick. We group people in two: External and Internal. While outsiders are very important to us, insiders are EVERYONE among and EVERYTHING to us. How we treat those on the outside is the subject of another philosophy.
In the definition of ourselves, we are interested only in people on the inside (employees, consultants, vendor partners) and it can be summed up in one sentence; "we take care of our own." For us to succeed, it takes all to make it happen. And therefore, we arrive at the fundamental concept of teamwork. What one person can accomplish is limited. But when all of us pull together in one focused direction, the result of our combined efforts will be multiplied. Suddenly it takes less to accomplish more.
As a team, we cover and make up for each others weaknesses. And when we come together; we expose none of them to outsiders. We compete against outsiders, never among ourselves. So to those on the outside, all they will feel is the brunt of one combined, focused blow.
As blood is to the body; 'information' is to the 'team.' So, information should flow freely and shared freely. It should be written up and cataloged for future reference, so that we don't reinvent the wheel again and again. Any work that we do or are about to do, we must think of how others can leverage and build on top of it; and then structure it just that way. Facilitate. And don't underestimate the power of hard work. The little additional time you spend now; reap enormous rewards even if your work is only reused once in future; and the rewards snowball as it is reused more than once.
Faith. We trust and love our people beyond religious beliefs. We respect humanity, while appreciating and honoring our individual decisions to come-together and work-together. Even though our love is secular; it is nonetheless applied with absolute conviction. Just as the army leaves no wounded behind; we strive to be inclusive, supportive, fair and appreciative. So we stand faced in one direction; and walk towards one destination.
"The automobile capital of the world is not Detroit; it's Toyota City; where everyone considers himself a brother of the other."
People.
We are in the people business. We may be software, consulting, and services vendor, but make no mistake; we are in the 'people' business. People make our world tick. We group people in two: External and Internal. While outsiders are very important to us, insiders are EVERYONE among and EVERYTHING to us. How we treat those on the outside is the subject of another philosophy.
In the definition of ourselves, we are interested only in people on the inside (employees, consultants, vendor partners) and it can be summed up in one sentence; "we take care of our own." For us to succeed, it takes all to make it happen. And therefore, we arrive at the fundamental concept of teamwork. What one person can accomplish is limited. But when all of us pull together in one focused direction, the result of our combined efforts will be multiplied. Suddenly it takes less to accomplish more.
As a team, we cover and make up for each others weaknesses. And when we come together; we expose none of them to outsiders. We compete against outsiders, never among ourselves. So to those on the outside, all they will feel is the brunt of one combined, focused blow.
As blood is to the body; 'information' is to the 'team.' So, information should flow freely and shared freely. It should be written up and cataloged for future reference, so that we don't reinvent the wheel again and again. Any work that we do or are about to do, we must think of how others can leverage and build on top of it; and then structure it just that way. Facilitate. And don't underestimate the power of hard work. The little additional time you spend now; reap enormous rewards even if your work is only reused once in future; and the rewards snowball as it is reused more than once.
Faith. We trust and love our people beyond religious beliefs. We respect humanity, while appreciating and honoring our individual decisions to come-together and work-together. Even though our love is secular; it is nonetheless applied with absolute conviction. Just as the army leaves no wounded behind; we strive to be inclusive, supportive, fair and appreciative. So we stand faced in one direction; and walk towards one destination.
"The automobile capital of the world is not Detroit; it's Toyota City; where everyone considers himself a brother of the other."
Thursday, October 28, 2010
Wednesday, October 27, 2010
Competition
inspired by one of my mentors, Thomas Ewe.
Competition; in the truest sense of that word, we have finite. But if we extend the definition of that word, to include anything or anyone that has the ability to stop us; then we have a ton; (i.e. Challenges.)
And so, for each that is identified; through discovery or retrospection; we will need a strategy to either mitigate or eliminate. And to do that effectively; we need ‘Clarity’ of our goals and the flexibility to ‘Change’; in essence; to learn.
Only by having ‘Clarity’ can we act decisively. And only by embracing ‘Change’ can we act purely to achieve our goals and not tinted by anything in the past.
‘Change’ can be painful; but it is the only way to get us from here to where we are going. So we embrace it. With that in place, we can pursue the course of continuous improvement. It works like this: We look into the past to see what didn’t work, identify how we want it to work, change and move forward to apply. Central tenet.
But this is a ‘Reactive’ in nature. Moving forward, we will need to move in ‘Proactive’ mode.
What does that mean? ‘Clarity’ and ‘Change’ still feature prominently, but instead of ‘Looking back to see what didn’t work’; we ‘look forward to see what we can do better’.
Taking the ‘Competition’ concept one-step further; we compete against ourselves!
To implement, think like a competitor. “If I were a competitor of myself today; what would I do?” How can I out-compete myself today? Is it faster implementation? Is it better service? Is it closer relationship with customers? How do I get better sales result, better communication; better credibility? How can we make my services obsolete in 6 months?
Then it is those we implement. We will ruthlessly compete against ourselves (not among ourselves!!) but ourselves as a team, a company. And since we embrace change; risk taking comes naturally. First have ‘Clarity’; then take the risk, take the responsibility and execute.
The above seem logical and simplistic, even commonsensical; but few truly live by it; hampered by their inability to see that ‘Change’ is such an important factor.
‘Change’ we embrace; 'Clarity' we pursue; improvement, continuous.
Competition; in the truest sense of that word, we have finite. But if we extend the definition of that word, to include anything or anyone that has the ability to stop us; then we have a ton; (i.e. Challenges.)
And so, for each that is identified; through discovery or retrospection; we will need a strategy to either mitigate or eliminate. And to do that effectively; we need ‘Clarity’ of our goals and the flexibility to ‘Change’; in essence; to learn.
Only by having ‘Clarity’ can we act decisively. And only by embracing ‘Change’ can we act purely to achieve our goals and not tinted by anything in the past.
‘Change’ can be painful; but it is the only way to get us from here to where we are going. So we embrace it. With that in place, we can pursue the course of continuous improvement. It works like this: We look into the past to see what didn’t work, identify how we want it to work, change and move forward to apply. Central tenet.
But this is a ‘Reactive’ in nature. Moving forward, we will need to move in ‘Proactive’ mode.
What does that mean? ‘Clarity’ and ‘Change’ still feature prominently, but instead of ‘Looking back to see what didn’t work’; we ‘look forward to see what we can do better’.
Taking the ‘Competition’ concept one-step further; we compete against ourselves!
To implement, think like a competitor. “If I were a competitor of myself today; what would I do?” How can I out-compete myself today? Is it faster implementation? Is it better service? Is it closer relationship with customers? How do I get better sales result, better communication; better credibility? How can we make my services obsolete in 6 months?
Then it is those we implement. We will ruthlessly compete against ourselves (not among ourselves!!) but ourselves as a team, a company. And since we embrace change; risk taking comes naturally. First have ‘Clarity’; then take the risk, take the responsibility and execute.
The above seem logical and simplistic, even commonsensical; but few truly live by it; hampered by their inability to see that ‘Change’ is such an important factor.
‘Change’ we embrace; 'Clarity' we pursue; improvement, continuous.
Usability and Re-usability
Why Re-use?
We are faced with the challenge of adapting to an increasingly complex software world with yesterday's tool sets and standards. Internet, social media, e-commerce, supply-chain re-engineering, CRM, etc. are all contributors to the growing demands on today's developer. Conceptually, the perfect system would be one in which we would reuse our software, describe software architecture so that a non-expert could successfully execute and simplify complex business modeling, and automate most user tasks. Re-usability. Instead, we look for investing in "corrective" systems that correct the needful in the main systems we use. And if we find that the corrective systems are not good enough, we shall invest in further corrective systems or attack the fundamental and non-measurable aspect of our main systems - the Usability?
Usability and Benefits.
Usability can layer into an organization's existing software landscape to seamlessly bridge together disparate systems to function for the user, by the user. With the ever-changing distribution patterns, globalization of commerce, mergers and acquisitions - allowing little time for reflection, it's imperative to focus on fundamental needs of the system and the users - for better repetitive decision-making. Systems that are easy to learn and use will ultimately yield better results. Increasingly. Why should we need a test system, if our development system can prevent errors?
Millions of operational costs can be saved every year, if we focus on doing it right the first time, than allowing it to be done wrongly and then correcting it.
Conclusion.
We should focus on building interfaces that are simple, clear, and intuitive - this has a multi-dimensional value - productivity, efficiency, delight, lower training and maintenance. Good UI visualizes complexity to make confusing and business technology issues clear, concise and concrete - helping people to make better, faster decisions, leading to actions and favorable results.
Paradigm Shift
Preamble.
Recently, had this interesting discussion with one of my mentors, regarding how the focus has seen itself changing teams in a software landscape - observed over 15+ years.
How Theoretical Innovation Would Kill Practical Usability?
My mentor gave me a great example where he was the eye-witness. Many years back, he was involved in some project proposal to demonstrate the *super* map-based route display on the dashboard of train-drivers in Japan. The idea was to make the jobs of the drivers easy by them visualizing the curves in their journey so that they can navigate/brake/speed up better. The drivers thought this would complicate their lives, as they have to now *forget* the fact that they are always going *straight*. Also, they can bid farewell to the natural physics laws they applied - in sensing the curves in the journey by push-pull feeling. Partial solution for access to functionality and unnatural UI did the rest in terms of killing the project.
Changing Trends.
Earlier, main focus was on Technology (close to 80%) and less on Functionality. Almost nil emphasis was given on the third aspect, the human aspect - the UI.
Later, as technology started changing faces rapidly, more emphasis was given on functionality. UI score didn't change much, except that it found few big takers (any guesses?) who were mostly criticized for selling mediocre functionality with a good face!
Now, when technology itself has become drag-drop, usable, template-driven (copy+paste), most focus is on functionality. What my team is struggling with is to educate the audience about the key importance of "access to functionality" - this would translate to UI and Usability taking at least half the focus in a software landscape.
Noteworthy Examples.
For example, Microsoft Office 2007 and Microsoft Office 2010 are essentially the same products in terms of main functionality. Yet, Office 2010 is being touted as a productivity tool by many organizations - all credit to the face-lift exercise due to which features previously unavailable (not accessible, hidden by design) suddenly were available and hence appreciated by most users.
Second example, SAP whose inherent strength of being 'the' ERP for more than 24 industries also has a known challenge - that of Usability. True to their stature, they had envisioned this many years back, and thus have bundled and supplied their customers with add-on tools like GuiXT that achieves a functional face-lift for SAP as a solution; the timing of promoting these tools again relate to the paradigm shift.
Thoughts?
Thursday, September 16, 2010
Case Study: White Labeling
Background
Early 2007 was when this Global Leader in Technical Support and BPO Operations Company envisioned a fully integrated Tech-Support Portal. The underlying value proposition to their clients was to have a channel to provide inexpensive support to the end-customers, by cutting down on the expensive mode of support – voice, email and chat. January 2009 was when a Beta version of the Tech-Support Portal – “NextGen” was made ready and tested. The success of this initiative would mean stronger client retention and a significant increase in the bottom line.
The Company approached IDYeah Creations in March 2009 with the high-level need of giving a user-centric face-lift to NextGen.
Challenge
The main challenge was to make the portal completely intuitive and user-friendly, as the target end-users spectrum was very wide, ranging from a non-working house-wife to a busy businessman to a technologist. Furthermore, the Company wanted to “white label” their portal – giving a customizable and a personalized interface respective to the client’s brand identity and strategy.
Business Goals
- Increase client satisfaction
- Grow competitive advantage
- Increase bottom line
Project Objectives
- Bring out the conceptual message
- Reduce development time and cost
- Reduce maintenance cost
- Eliminate over-design
- Create a show-case of underlying tools and technologies
- Create a good visual appeal
Project Constraints
- Overall Timeline of 10 days
- White labelling should be possible after-delivery in under 1 day’s effort
Process
IDYeah Creations could not take a completely scientific approach, with the established project constraints. A blend of scientific, emotional, and instinct based approach was taken.
User & Task Analysis
User Profiling and Task Analysis served as a foundation for validation of use case workflows. The range of user needs for access to information required a detailed “user to task” analysis exercise to determine what online functionality was most valuable to each identified user type. With the time constraints, we put 90% emphasis on one end of the user spectrum – that was converging towards computer-illiterate class of users. Once we established a usage pattern after conducting surveys and interviews with a sample of 40 users, we could easily extrapolate the pattern to cover other extreme of the spectrum.
Post-review of the features toolset of the portal, we established a master workflow that was aligned with the company’s vision of guiding the user through inexpensive, quick and easy support to the clients’ customers, while discouraging him/her to use phone as a channel.
Expert Evaluation
The then existing user-interface post-evaluation highlighted many areas of improvements – few of which were:
- Complicated structure of information
- Excessive navigation and lengthy workflows
- Confusing terminology
- Different channels of getting support (self-help, chat, email, etc.) are not obvious
- Difficult interface for white labelling
- Visual appeal missing
Above evaluation was backed up by findings that surfaced by referencing Jakob Nielsen’s Usability Heuristics.
| Usability Heuristic | Findings |
| Visibility of system status |
|
| Match between system and the real world |
|
| User control and freedom |
|
| Consistency and standards |
|
| Error prevention |
|
| Recognition rather than recall |
|
| Flexibility and efficiency of use |
|
| Aesthetic and minimalist design |
|
| Help users recognize, diagnose, and recover from errors |
|
| Help and documentation |
|
User Interface Design
IDYeah started working with a premise of having a singular page structure – one that is self-explanatory (even for a novice) and void of navigational steps. We toyed with an idea of having something similar to a real-world object that everyone identifies with and associates with as something that’s an information box – like a TV screen. This concept when sketched and shared with Sutherland team instantly created an excitement about the simplicity that was visualized. We had many more areas to cover, like adding conceptual messaging, allowing a customizable look, and covering all the functional aspects on a single screen.
Few Highlights
- Main focus (getting problems resolved) is on-the-face with a “search” interface
- “Conceptual messaging” is achieved by relevant graphics onto few tentacles, which echo what users think and also serves a functional purpose. We suggested to highlight the common problems of the month and link them to Knowledge base articles
- Login mechanism is inline
- All features are accessible and used within the TV screen interface
- Bottom part of the screen is reserved for some contextual elements that are specific to the client
- White labelling is made possible with an effort of approximately 4 hours
- Modern visual appeal
Benefits
The immediate benefits reaped by the Company were:
- Faster Release of NextGen
- Contextual Live Demonstrations to prospects due to easy white labelling
Long-term sustainable benefits:
- Marketability of NextGen
- Lower maintenance cost
- Quality of Sales Pitch
- Easy Showcase of Tools and Technologies
- User adoption and delight
- Strong client retention
- Profitability
- Brand Positioning
Summary
Usability increases customer satisfaction and productivity, leads to customer trust and loyalty, and inevitably results in tangible cost savings and profitability. Because user-interface development is part of a product’s development cost anyway, it pays to do it right. Most people view usability costs as added effort and expense, but the reverse is more commonly true.
The benefits of usability engineering can be achieved throughout the life of a product. Efficient methods and techniques can result in a faster release date allowing companies to unveil their products to the market prior to a competitor’s. A user-centred product can garner positive media reviews leading to increased sales. An effective, user-friendly user interface can increase customer ease of learning, ease of use, job satisfaction, and trust in the product.
Quotes
“Because the first 10% of the design process, when the key system-design decisions are made, can determine 90% of a product’s cost and performance, usability techniques help keep the product aligned with company goals.” (Smith & Reinersten)
“Incorporating ease of use into your products actually saves money. Reports have shown it is far more economical to consider user needs in the early stages of design, than it is to solve them later.” (IBM, 2001)
Business Value of Usability in IT
Recession or otherwise, there is an imperative need for the creation and deliverance of business value within companies. Businesses constantly look for ways of creating efficiencies, increasing productivity, streamlining processes, and reducing waste. They need to achieve more with less people. They need to identify and implement solutions bringing maximum value, while minimizing or eliminating resource expenditure and sunken costs.
IT investments such as software solutions, web sites, portals and applications or a full-blown ERP system – help companies take control of their entire business with the eco-system addressing multiple needs. However, measuring and leveraging on ROI on IT investments continues to be a challenge for most.
Based on a CIO Insight Survey,
• Only 60% companies measure the business value of IT
• 62% find it difficult to calculate the ROI
• 52% say executives are "skeptical" of ROI results
• 45% say metrics don't adequately capture business value
Business Value Dials are financial measurements of business value that map to the bottom line of the company. For example: Expense avoidance, Revenue increase, Working capital, and Headcount management.
One crucial dimension (and business value dial) that companies often overlook is leveraging upon Usability of IT systems in order to improve ROI. Usability, if employed at the right time and in the right manner - can yield one or more of the following "measurable" benefits, directly contributing to the company's bottom line:
• Better market position
• Faster growth
• Greater operational efficiency
• Increased productivity
• Improved asset utilization
• Increased margin
To summarize, Usability benefits in monetary savings, productivity increase, sales increase from IT products, services and operations.
Does your business value dial include usability?
IT investments such as software solutions, web sites, portals and applications or a full-blown ERP system – help companies take control of their entire business with the eco-system addressing multiple needs. However, measuring and leveraging on ROI on IT investments continues to be a challenge for most.
Based on a CIO Insight Survey,
• Only 60% companies measure the business value of IT
• 62% find it difficult to calculate the ROI
• 52% say executives are "skeptical" of ROI results
• 45% say metrics don't adequately capture business value
Business Value Dials are financial measurements of business value that map to the bottom line of the company. For example: Expense avoidance, Revenue increase, Working capital, and Headcount management.
One crucial dimension (and business value dial) that companies often overlook is leveraging upon Usability of IT systems in order to improve ROI. Usability, if employed at the right time and in the right manner - can yield one or more of the following "measurable" benefits, directly contributing to the company's bottom line:
• Better market position
• Faster growth
• Greater operational efficiency
• Increased productivity
• Improved asset utilization
• Increased margin
To summarize, Usability benefits in monetary savings, productivity increase, sales increase from IT products, services and operations.
Does your business value dial include usability?
Wednesday, September 8, 2010
Your Web - Your Reflection.
It's your Reflection.
Picture yourself at a public place. The way you dress, behave, speak, act is with the belief that hundreds of eyes are on you. More often than not, yes? And rightfully so. You're applying your thinking well in conducting yourself as a brand - your personal identity.
Let's borrow this philosophy and apply to your online business identity - your web site. The web site is always out at public places. To help comprehend this feature, think of your web as your child. You should want to dress it up, make it speak right, make it behave right, and make it perform right actions. The child *has to* inherit your features. That's nature. Does your web presence pass this *natural* test?
If the above argument has your attention, let's add a few points to how you can start your journey on realistic branding that will stand strong and grow over time.
- Define your business values and goals clearly.
- Discover moods and metaphors through association.
- Generate ideas and define a concept for your site.
- Create a visual language and design it (or get it designed).
Monday, July 12, 2010
Thursday, July 8, 2010
Friday, June 18, 2010
Thursday, June 17, 2010
Why great startups are often started in bad recessions
from a blog post on: www.forentrepreneurs.com by David Skok:
Around the years 1999 and 2000, the startup world was invaded by a range of newcomers that were attracted by the prospect of making a fast buck. They had seen all sorts of dot com companies with crazy business plans go public and get amazing valuations. In my opinion these newcomers were not really true entrepreneurs. They were not motivated by a powerful inner drive and passion to build something wonderful. They were motivated mostly by money. The net result were some of the worst startups we have seen.
When things changed in 2001 and the IPOs vanished, the startup world became a very tough survival environment. The visitors disappeared back to other jobs where they thought they could make more money. However the true entrepreneurs stayed. They battled the harsh funding environment even though they realized the chances of making money were slim. They did this because they were passionate about their ideas. Most had to live on substantial pay cuts. Not surprisingly many of the best startups were started in this kind of environment.
So if you are attracted to the world of startups, ask yourself this question: are you here because you are passionate about what you will be doing? Or are you here because you think this is a great way to make money? If it is the latter, I believe your motivations will have the effect of leading you to disappointment.
Around the years 1999 and 2000, the startup world was invaded by a range of newcomers that were attracted by the prospect of making a fast buck. They had seen all sorts of dot com companies with crazy business plans go public and get amazing valuations. In my opinion these newcomers were not really true entrepreneurs. They were not motivated by a powerful inner drive and passion to build something wonderful. They were motivated mostly by money. The net result were some of the worst startups we have seen.
When things changed in 2001 and the IPOs vanished, the startup world became a very tough survival environment. The visitors disappeared back to other jobs where they thought they could make more money. However the true entrepreneurs stayed. They battled the harsh funding environment even though they realized the chances of making money were slim. They did this because they were passionate about their ideas. Most had to live on substantial pay cuts. Not surprisingly many of the best startups were started in this kind of environment.
So if you are attracted to the world of startups, ask yourself this question: are you here because you are passionate about what you will be doing? Or are you here because you think this is a great way to make money? If it is the latter, I believe your motivations will have the effect of leading you to disappointment.
Wednesday, May 26, 2010
Emotions in Design
from a blog:
BY AARRON WALTER
We’re changing. Our relationships online and in real life are shifting as we become more public with our private lives. Online social networks have helped our real world social networks transcend time and space making it easy (and seemingly essential) to share the triumphs, tragedies, and trite moments of life. No longer do you simply tell your best friend that you’ve broken up with your boyfriend. It feels natural to many people to tell hundreds of Twitter followers, and Facebook friends.
No matter how you feel about the appropriateness of over sharing, the shift towards a public private life is changing our expectations of the relationships we create online. Remember the websites of the late 1990’s and early 2000’s that used formal language to create a professional, guarded persona and brand? The trend was towards the serious, because it seemed like you couldn’t land clients or entice new users if you weren’t stuffy.
Figure 1. Kenny Meyers uses humor in his portfolio to connect with his audience.
Oh how times have changed (figure 1). Today it’s typical for a web designer or developer to let her personality shine through on her websites. Many popular web apps are also tapping into emotional design techniques that are far from the stuffed-shirt approach of old. As users let their humanity show online, frontiers of communication are opening for web designers.
We’ve spent the last decade-plus striving to create usable web interfaces. It’s not always been easy to win over bosses and clients, but the value of user-centered design has made great strides. More often than not, we can count on it being baked into our professional process. But that’s a pretty low bar to shoot for.
When we go out to dinner at a fancy restaurant, we’re hoping for more than just an edible meal. We’re hoping for amazing taste and texture, clever presentation, and memorable ambiance. The pinnacle of a top culinary experience is extreme pleasure. Why don’t we shoot for the same target in web design?
Why do we settle for usable when we can have usable and pleasurable (figure 2 and 3)?
Figure 2: Basecamp is usable
Figure 3: Wufoo is usable and pleasurable
Wufoo is a business-focused app that goes beyond being usable. It was designed to be fun, because the task of creating forms to store data is inherently dry.
As Hale indicates, they were thinking of the way users might feel when using their app, and designed an experience that ensured the user’s emotional needs are met.
In 1943, Abraham Maslow proposed a theory of the hierarchy of human needs. He posited that humans have basic needs that must be met before other advanced needs can be addressed (figure 4). His theory states that humans flourish when the top tier of needs are fulfilled.
Figure 4: Maslow’s Hierarchy of Needs.
By mapping Maslow’s insights into human psychology over to interface design concepts, we can get a better understanding of the way our audience works (figure 5).
Figure 5: We can remap Malsow’s hierarchy of needs to the needs of our users.
The interfaces we design must first be functional – they need to solve a problem for us. Next, they need to be reliable – no fail whales please. Our interfaces need to be usable – easy to learn, easy to use, and easy to remember.
The piece we often overlook is the pleasure. It’s at the core of culinary arts, but we find it far too infrequently in the web apps and websites we use daily. Personality is the conspicuous difference between Basecamp and Wufoo (figures 1 and 2). Personality is the platform for emotion.It’s the framework we use to crack jokes, empathize, and connect with other humans. If we can bake emotion into the interfaces we design, we reap big benefits.
Babies create bonds with their parents through an interesting feedback loop. When they cry their parents respond by soothing them, which releases calming neurotransmitters in their brains. As this cycle repeats, the baby begins to trust that their parents will respond when they need them.
A similar feedback loop happens in interface design. Positive emotional stimuli can build a sense of trust and engagement with your users. People will forgive your site or application’s shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
Aral Balkan’s Twitter iPhone app – Feathers – deftly combines usability and emotional design to create a pleasurable user experience. As you type a tweet, a cute birdy mascot starts to fill with color to indicate how many characters you have left of the 140 maximum (figure 6). If you exceed 140 characters, the bird changes red to indicate your error (figure 7). While satisfying a basic usability heuristic to provide feedback about system status, Balkan has also created an interaction with which his audience can fall in love.
Figure 6: As you type a tweet into Feathers for iPhone, the mascot fills to give feedback on message length.
Figure 7: If your tweet is too long, the Feathers bird turns red giving feedback in a fun way.
The feathers bird creates a powerful connection with users because it’s a point of empathy. As @thetalldesigner states above, he doesn’t just like this app, he loves it. It’s not an application that’s providing feedback, it’s a fun little friend with personality, and personality is the platform for human emotion.
TapBots are following similar principles to create wildly successful utility apps that track your weight and do simple unit conversion. That’s no small feet. How do you get excited about tracking your weight loss (or gain)? The answer—create points of emotional connection.
Figure 8: TapBots apps use personification to create a cute robot personality that almost seems human.
The movie Wall-e was the inspiration for Weightbot and Convertbot.
It comes as no surprise, with the great care and attention Jardine has put into the relationship Tapbots have to the people that use them, that the feedback they’ve received confirms the emotional connection they sought to create.
Sometimes the emotional connection we make with our audience through design is less visible. There’s a magic about hearing a favorite song on the radio that playing it on your iPod just doesn’t have. The difference is the surprise discovery.
People love to discover treats in interfaces just as they do in real life. Perhaps you’ve been delighted to return to your hotel room to discover, “Oooh! A chocolate on my pillow!” The joy is more than the treat, it’s the discovery of the treat and the feeling that someone took the time to think of you.
Photojojo – a website for photography enthusiast – sprinkles treats throughout the shopping cart process. A little “learn more” balloon sits to the right of product images. When you click it, the ballon floats down to the product description. The ballon solves a usability problem by making users aware of the detailed information that may not be visible through a small browser viewport. But the interaction is pure delight.
An empty shopping cart shows a sad face, but when a product is added, it turns that frown upside down. When entering your name during the checkout process, a little robot appears to welcome you as a new customer.
The Risk of Emotion
As is true in real life, showing emotion in design has real risk. Some people won’t get it. Some people will even hate it. But that’s okay. Emotional response to your design is far better than indifference.
Showing personality in your app, website, or brand can be a very powerful way for your audience to identify and empathize with you. People want to connect with real people and too often we forget that businesses are just collections of people. So why not let that shine through?
Emotional Interface Design: The Gateway to Passionate Users
BY AARRON WALTER
We’re changing. Our relationships online and in real life are shifting as we become more public with our private lives. Online social networks have helped our real world social networks transcend time and space making it easy (and seemingly essential) to share the triumphs, tragedies, and trite moments of life. No longer do you simply tell your best friend that you’ve broken up with your boyfriend. It feels natural to many people to tell hundreds of Twitter followers, and Facebook friends.
No matter how you feel about the appropriateness of over sharing, the shift towards a public private life is changing our expectations of the relationships we create online. Remember the websites of the late 1990’s and early 2000’s that used formal language to create a professional, guarded persona and brand? The trend was towards the serious, because it seemed like you couldn’t land clients or entice new users if you weren’t stuffy.
Figure 1. Kenny Meyers uses humor in his portfolio to connect with his audience.
Oh how times have changed (figure 1). Today it’s typical for a web designer or developer to let her personality shine through on her websites. Many popular web apps are also tapping into emotional design techniques that are far from the stuffed-shirt approach of old. As users let their humanity show online, frontiers of communication are opening for web designers.
Usable = Edible
We’ve spent the last decade-plus striving to create usable web interfaces. It’s not always been easy to win over bosses and clients, but the value of user-centered design has made great strides. More often than not, we can count on it being baked into our professional process. But that’s a pretty low bar to shoot for.
When we go out to dinner at a fancy restaurant, we’re hoping for more than just an edible meal. We’re hoping for amazing taste and texture, clever presentation, and memorable ambiance. The pinnacle of a top culinary experience is extreme pleasure. Why don’t we shoot for the same target in web design?
Why do we settle for usable when we can have usable and pleasurable (figure 2 and 3)?
Figure 2: Basecamp is usable Figure 3: Wufoo is usable and pleasurable
Wufoo is a business-focused app that goes beyond being usable. It was designed to be fun, because the task of creating forms to store data is inherently dry.
“The inspiration for our color palette did come from our competitors. It was really depressing to see so much software designed to remind people they’re making databases in a windowless office and so we immediately knew we wanted to go in the opposite direction. My goal was to design Wufoo to feel like something Fisher-Price would make. We were determined to make sure Wufoo was fun.” – Kevin Hale, Wufoo
As Hale indicates, they were thinking of the way users might feel when using their app, and designed an experience that ensured the user’s emotional needs are met.
Hello, Maslow
In 1943, Abraham Maslow proposed a theory of the hierarchy of human needs. He posited that humans have basic needs that must be met before other advanced needs can be addressed (figure 4). His theory states that humans flourish when the top tier of needs are fulfilled.
Figure 4: Maslow’s Hierarchy of Needs.
By mapping Maslow’s insights into human psychology over to interface design concepts, we can get a better understanding of the way our audience works (figure 5).
Figure 5: We can remap Malsow’s hierarchy of needs to the needs of our users.
The interfaces we design must first be functional – they need to solve a problem for us. Next, they need to be reliable – no fail whales please. Our interfaces need to be usable – easy to learn, easy to use, and easy to remember.
The piece we often overlook is the pleasure. It’s at the core of culinary arts, but we find it far too infrequently in the web apps and websites we use daily. Personality is the conspicuous difference between Basecamp and Wufoo (figures 1 and 2). Personality is the platform for emotion.It’s the framework we use to crack jokes, empathize, and connect with other humans. If we can bake emotion into the interfaces we design, we reap big benefits.
Emotion in Design
Babies create bonds with their parents through an interesting feedback loop. When they cry their parents respond by soothing them, which releases calming neurotransmitters in their brains. As this cycle repeats, the baby begins to trust that their parents will respond when they need them.
A similar feedback loop happens in interface design. Positive emotional stimuli can build a sense of trust and engagement with your users. People will forgive your site or application’s shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.
Aral Balkan’s Twitter iPhone app – Feathers – deftly combines usability and emotional design to create a pleasurable user experience. As you type a tweet, a cute birdy mascot starts to fill with color to indicate how many characters you have left of the 140 maximum (figure 6). If you exceed 140 characters, the bird changes red to indicate your error (figure 7). While satisfying a basic usability heuristic to provide feedback about system status, Balkan has also created an interaction with which his audience can fall in love.
“I really *LOVE* the singing bird when you send a tweet. Twitter is fun all of a sudden!” – @thetalldesigner
Figure 6: As you type a tweet into Feathers for iPhone, the mascot fills to give feedback on message length.
“Confession: sometimes I make too long Feathers-tweets just to watch the bird turn red.” – @evbjone
Figure 7: If your tweet is too long, the Feathers bird turns red giving feedback in a fun way.
The feathers bird creates a powerful connection with users because it’s a point of empathy. As @thetalldesigner states above, he doesn’t just like this app, he loves it. It’s not an application that’s providing feedback, it’s a fun little friend with personality, and personality is the platform for human emotion.
“Before your application can create an emotional relationship with the user it must get the basics right. The emotional relationship, the delight, is what you layer on top of this base usability and technical competency.” – Aral Balkan, designer/developer of Feathers
TapBots are following similar principles to create wildly successful utility apps that track your weight and do simple unit conversion. That’s no small feet. How do you get excited about tracking your weight loss (or gain)? The answer—create points of emotional connection.
“We did want our users to have an emotional connection to our apps. Most people don’t have a love/joy for software like geeks do.” – Mark Jardine, TapBots Designer
Figure 8: TapBots apps use personification to create a cute robot personality that almost seems human.
The movie Wall-e was the inspiration for Weightbot and Convertbot.
“Our concept for the first 2 apps was selling our apps as if they were physical robots. That’s why the icons resemble the interface. We also gave the icons eyes to humanize them a bit. But we use this idea as a selling point and not to distract the user in the actual app. We want our apps to be used seriously, but also give the sense that they are more than just a piece of software.” – Mark Jardine, TapBots Designer
It comes as no surprise, with the great care and attention Jardine has put into the relationship Tapbots have to the people that use them, that the feedback they’ve received confirms the emotional connection they sought to create.
“ I adore the way their apps look and sound.” – John Gruber, Daringfireball.net
Treats & Discovery
Sometimes the emotional connection we make with our audience through design is less visible. There’s a magic about hearing a favorite song on the radio that playing it on your iPod just doesn’t have. The difference is the surprise discovery.
People love to discover treats in interfaces just as they do in real life. Perhaps you’ve been delighted to return to your hotel room to discover, “Oooh! A chocolate on my pillow!” The joy is more than the treat, it’s the discovery of the treat and the feeling that someone took the time to think of you.
Photojojo – a website for photography enthusiast – sprinkles treats throughout the shopping cart process. A little “learn more” balloon sits to the right of product images. When you click it, the ballon floats down to the product description. The ballon solves a usability problem by making users aware of the detailed information that may not be visible through a small browser viewport. But the interaction is pure delight.
An empty shopping cart shows a sad face, but when a product is added, it turns that frown upside down. When entering your name during the checkout process, a little robot appears to welcome you as a new customer.
The Risk of Emotion
As is true in real life, showing emotion in design has real risk. Some people won’t get it. Some people will even hate it. But that’s okay. Emotional response to your design is far better than indifference.
Showing personality in your app, website, or brand can be a very powerful way for your audience to identify and empathize with you. People want to connect with real people and too often we forget that businesses are just collections of people. So why not let that shine through?
Subscribe to:
Posts (Atom)