Subscribe via Email

Subscribe to RSS feed


Follow Us on Twitter

CSS Frameworks – Does Your Client Need One?

shutterstock_244578541Many a times, when I start a new project, often the client gets excited when the word ‘bootstrap’ or ‘foundation’ comes around during the inception phase. They want to know more and get excited. They hope that their site would look great if is it built with a framework and typically look towards the UX developers/designers for advice and recommendations.

Listed below are the benefits of a CSS framework, which can help to educate the client on why they need it:


The biggest advantage of a CSS framework is the grid system it comes with, which provides adequate breakpoints for different devices (phone, tablet, desktop, large screen), making your site truly responsive for different device widths. If the client persists their site need not be responsive, it is easy to disable the responsive feature for now and make use of the other benefits it provides. This way, if the site wants to be responsive few years down the lane, the foundation is already there in the form of a framework and should not be a hard task to make it responsive again.  

Uniform Styling & Branding

A CSS framework typically provides a uniform structure and styling for all the different html components such as buttons, navigation, panels, lists, etc. This is extremely useful and makes it easy for the design team to look up to and create the branding/styling of the site’s elements based on the framework’s styling. If there is no visual designer in the project, then the framework is already providing a base level of branding for the new site to be built.

JavaScript Components

Every website today makes use of several JavaScript components such as modal dialogs, panels, accordions, tooltips, carousel, etc. Traditionally, without a framework, one would need to write or import a custom JavaScript/jQuery plugin for each of these components. The downside of this method is that, some of the plugins can become obsolete and with no proper documentation or support, it is hard to debug and customize. Today, most of the popular CSS frameworks (bootstrap, foundation, skeleton, etc.) come packaged with these JavaScript components and makes it easy to implement, debug and customize.  


Accessibility is increasingly becoming an important feature of a website. The emphasis is on front end developers to at least provide a base level of support, and one could refer to section 508 checklist for that. Popular CSS frameworks like bootstrap and foundation do already include adequate support for accessibility in their html elements (form elements, modal dialogs, tooltips, panels, images, etc) which a front end developer can use and leverage upon to make the site more user-friendly.

A CSS framework also provides many other advantages such as native support for pre-processors (sass, less), customization for different needs, extensibility, ease of showing/hiding content on different devices, to name a few.

Here is a list of the most popular CSS frameworks currently being used in the industry – 

It is also extremely important to select the right CSS framework for the application you are building. Because, once you select a framework, it is a big overhaul to migrate to another framework and not advisable. Some of the deciding factors in selecting a proper framework would be –

  1. Browser compatibility
  2. Learning curve
  3. Ease of customization
  4. Ease of integration with the backend application
  5. Ease of migration to newer versions
  6. Usage, development community and support 
  7. Number of open issues with the framework 

What is your preferred CSS framework of your choice ? What factors do you consider before choosing one and how do you advice the clients on selecting the right one ? Let us know below.

HOW Design Live: Top Three Takeaways


A few of my coworkers and I recently went to the How Design Live conference in Chicago, IL. I would have to say that taking the train there was actually really enjoyable and the right decision. We were able to get some work done so by the time we got to Chicago we were all set to tackle the conference and the city. When we arrived there we realized that there was an opening keynote speaker and booths set up with a bunch of different companies. We grabbed our swag and did some networking! Of course, the next day was more serious as we started the day off early to take in as many of the speeches as possible. After two long days of soaking in as much knowledge from amazing leaders, we were left in an inspired daze. But I wanted to share some of the key takeaways of the conference that seemed to be repeating themes:

  1. Work Hard, Play Hard:
    I was inspired the most by the thought of having fun in the office and still getting work completed. The first speaker Tina Roth stressed the importance of this in order to have the right work environment to foster creativity. Also with keeping work fun, she stressed the importance of being generous as much as possible. The more you help others in the workplace, the more your coworkers will want to follow suit. She shared a quote that said it perfectly, “If you are lucky enough to do well, it’s your responsibility to send the elevator back down.” (Kevin Spacey) She went on to say that everyone needs a confetti drawer at work! We don’t have drawer filled with confetti but I believe that here at XD we strive to keep that creative atmosphere afloat. We make sure to set aside some time to talk about anything that drives us or discuss what we are working on and get some feedback.quote
  2. How to Handle Rejection:
    We went to a really informative talk about handling the rejection of our creative work. I know I’ve been in that boat before. Taking criticism of your work that you poured your heart and soul into. It is very difficult to not take it as an attack to you personally. Mark McGuiness stressed that we are not alone in this and that it is normal to feel this way. We ask ourselves on a daily bases, “why does it hurt so much? Its only work.” He says to roll with the punches. Each time you have to get yourself past it, you end up building resilience. It’s ok to take a break or breather and feel what you need to feel so that the next time you face this rejection you will react with less emotion. Then give yourself a process or a system. This is only the beginning, things are still happening in the process so you don’t feel like it is coming to an end and that helps you have something else to focus on. He also talked about the different types of criticism; constructive, destructive and abuse. Of course the constructive is the most common and most effective type in helping the creative process. But there are always those who like to feed the destructive type. They like to be vague and say things to devalue your work. The way you react is critical. Always reply with specific questions to understand why they feel the way they do. “If I change this, will it make it better?” Then the abuse type is said to cut you down and usually has nothing to do with your work. Another thing to help you through is to think of whom the rejection is coming from. Are they important? Are they a mentor or are they just the general public that maybe doesn’t even understand design? So no matter how hard the rejection is, the key is to breathe and learn how to fall and land softly.
  3. Sustainable Insanity:
    As we go through our creative workdays, things can get out of hand and become hard to juggle. We all want to multitask to get stuff accomplished and can end up feeling burnt out. I know this has happened to me on more than one occasion. Jim Krause spoke to us on “Sustainable Insanity.” I came out of this talk knowing that I could use some of his tips to help me keep up with the daily grind. Give yourself two goals for the day: do the best work you can do and get out of the office at a reasonable time. It’s all about the pace and focus. You can actually get more accomplished if you slow down and work on one thing at a time. It is said that every time that you change focus it takes about 10 min to get completely focused back into the task. Lists make everything better. Put even the small things on the list like grocery shopping and lunch. This helps you keep the focus through the day. Try to avoid those task killers such as social media, emails, and bad food. He stressed the importance of a good diet to also keep focus and feed the mind. In your non-working hours don’t talk about work, and find things to do that keep your mind off it. “Work when you’re working, and don’t when you’re not.” I find that I have to turn off after work. After being on the computer all day, the last thing I want to do is turn it back on when I get home. But I know a lot of people who do more creative work in their free time. Other problems arise that can stress you out at work such not growing your skills. “If your design skills are not growing than they are dying.” This is where you may need to create on your own time.



Posted in News

Lessons Learned from an Accessibility Summit

AccessU Summit

Last week I participated in AccessU Summit, a daylong online conference sponsored by Knowbility and Environments for Humans. I have ‘sketched out’ some of the key ideas I took from each session, and I’ve grouped them into sections to steer you in the direction of the material that interests you the most. In addition to these, there are 3 more sessions that I will post next week. Also, I will share recordings from the sessions when they are available. My raw notes are on the Research SharePoint site.

“Developer” Sessions…

Web Accessibility Essentials Using WAI-ARIA and HTML5

Eric Eggert, Member of W3C’s Web Accessibility Initiative / slides:

Eric previewed many codes samples (see slides) and then showed code working in Chrome.  As he ran this demo, Eric pointed out that people using assistive readers are used to hearing prompts such as “new menu item 1 of 3.” Eric showed several W3C tutorials, and highlighted the “why it’s important” justifications. Eric stated the obvious, it’s more effort to design to these standards, and yet it’s a standard to design to. Also, Eric uses Chromebox, as a screen-reader testing environment He said, “It’s not perfect but mostly works okay.”

Getting Ahead of the Curve: Scalable, Accessible, Enterprise-class Video on the Web  

John Foliot, Co-chair of W3C Accessibility of HTML5 Media Elements / slides:

I took from John’s talk that the future of video will be more extended dialogues (i.e., windows) with extended descriptions that a user can access by pausing and viewing the details. Also, he said that “clean audio” is coming, an option users can take to mute unnecessary background sounds. John provided some great resources for how to handle captioning. More vendors are offering this service so it’s driving down costs. There is video captioning software (DIY approach), and John recommended going with a service because using software is more laborious than a service, but less expensive. Video description software is out there and John recommended it to save time. Read the rest of this post »

Designing for accessibility does no one any favors


For some time now I have contemplated, as a design practitioner, is my perception of design for users inclusive, empathic and universal? This has been nagging at me for some time. Actually it’s been calling my name, Psst. Lisa, you’re behind the curve in your understanding of designing the user experience for people that are, well, disabled.” Let me be more candid; my own perception of disabled people hasn’t been accurate, empathic or inclusive of the various impaired users attempting to access and benefit from the online world. My thinking on this topic needed a significant update, a DIY project in the making.

To start, I didn’t have an accurate definition of disabled people, nor of impairment. To my credit I had read the important book Design meets disability about two years ago. The author, Graham Pullin, raised my awareness of several issues and possibilities when designing for disabled people. For one, he helped me understand that disabled people is an appropriate expression “in the context of an environment or society that takes little or no account of impairment.” This is a troubling thought – “people disabled by the society they live in” due to the “designed” barriers and restrictions that limit participation in hmmm…life.  Read the rest of this post »

Five Reasons to do a Content Inventory

Whether you are redesigning your website, working on your content strategy, or simply managing web content, it is important to take the time to review and catalog existing content by putting together a Content Inventory. Here are five reasons why:

content inventory

1. Discover. It is very common for different people to publish content on a site and to not have a plan in place to review it, making it harder to get a big picture of the existing content. A Content Inventory allows you to dedicate the time to go through every page and click on every link, and discover content, blank pages, and broken links.

2. Understand. Meanwhile going through the tedious process of cataloging everything, you will start getting a better understanding of the types content, and you will likely notice differences in tone, user experience, look and feel, etc. (always have a “Notes” column to capture all of this.)

3. Evaluate.

  • If there is a Content Strategy (CS) in place, does the existing content follow that strategy? How can the content or strategy be updated to align with the company’s objectives and provide the best user experience for the target audience?
  • If there is no Content Strategy in place, take advantage of the understanding you now have to establish a structured plan to guide future content creators, curators and managers.

4. Organize. Once you have accounted for the existing content and you are aware of the content strategy, you will be able to answer the following questions and make decisions:

  • What content will be reused?
  • What content is missing?
  • What content needs to be repurposed or rewritten?
  • What content will be deleted?

5. Manage. After organizing and taking action, update the content inventory. It is important to schedule time to periodically update the inventory, audit the content, and train any new content creators, curators or publishers, to avoid losing control and to make sure everyone is on the same page regarding the overall content strategy.

OMG, it’s TGIF!

socnet-17On Acronyms, Abbreviations, and
User Experience

I may be taking a risk here, guessing that you know exactly what my title means. But I’m willing to bet that you understand the abbreviations I’ve chosen because of the audience this blog reaches.

Abbreviations and acronyms have become part of our natural vocabulary. Both are useful in quickly communicating a big idea using a small space: fewer letters and syllables, smaller visual blocks in a design, and less time to speak or read.

If your company is like most companies, you and your coworkers have developed your own “shorthand” vocabulary. You have reference documents, processes, and systems known by the first letters of the actual name or phrase. You may work with clients or vendors whose names have been simplified to their initials and many clients have specific company-used abbreviations.

Abbreviations are, basically, linguistic shorthand constructed of ideas known by a shared group of people. Some abbreviations are easily adopted, and others (for me it’s the text phrase “smh”) never seem to sink in and fail the quick comprehension test.

Acronyms are abbreviations that can be pronounced, triggering audio recognition and the mouth feel of a tangible idea. In English, this is achieved by a combination of vowels and consonants that create the mix of hard and soft sounds our brains identify as words. Mignon Fogarty of Grammar Girl provides a great overview of acronyms, abbreviations and initialisms.

The differences between the two are important, and relevant to user experience considerations and decisions we make on every client project. Consider the following:





How many of the above have a single, quickly defined meaning for you?

Acronyms and abbreviations are helpful communication tools, but does that mean they are the best way to communicate with your audience? What if English isn’t their first language? What if they were raised in a family that couldn’t fit multiple smartphones in their budget? What if they were born before cellphones were commonplace?

The key benefit of acronyms is they are structured for recognition and easy recall by an audience. As the list above demonstrates, acronyms are frequently successful for naming a product or key concept or business. On the other hand, the use of commonly understood abbreviations can quickly communicate audience and industry relevance to the people looking for you online.

Recently, I’ve also been hearing my coworkers voice their frustration with the overuse of acronyms. Combined with our use of social media channels, part of this frustration may be “translation fatigue,” the resulting mental, and sometimes physical, lack of energy people experience when language – and any content – is not clear to them.

Fatigue kills enthusiasm and negatively impacts a user’s perception of a company or brand. It is a particularly important consideration when dealing with very technical information and internal communications. When considering the organization of content from multiple sources or developing a framework for a complex project, we need to provide the reader with an easy path to clarity.

Glossaries that include the most commonly used abbreviations and acronyms can be quite helpful and need to be developed with a plan for updates and review. Duplicate abbreviations should be identified and resolved as quickly as possible. Then deliver definitions and assistance in context, on an as needed basis. As a user experience team, we must research and understand the audience reaction to the use of abbreviation.

Check that abbreviations aren’t easily confused with or fighting against already established definitions. The abbreviation CSR, for example, has multiple definitions: Customer Service Representative, Corporate Social Responsibility, and Customer Sales Receipt, to name a few. If our client has a “Conductive Solar Responder” product to promote, we need to encourage them to explore other variations and recommend against simple abbreviation.

When working with clients and considering the use of contextual shortcuts, testing and contextual review are important, but should be augmented by our combined experiences in and out of the office. People are accessing your content as part of their daily routines; there are distractions, tasks and other conversations to compete against. We need to consider whether the user will have the same understanding of the abbreviation as we intend. We’re busy people, too, and so are our clients. We can all relate, and we should relate. TTYL.

Posted in News

The Rules of Designing “Microinteractions”

Earlier I posted on the importance of designing the small details (aka, microinteractions) with as much care as we design features. Dan Saffervirtualscreen_shutterstock_wordpress, the author of Microinteractions – designing with details, refers to them quite simply as “small pieces of functionality.” He goes on to say they tend to be simple and brief, and either delightful or frustrating.

Designing rules, start with the goal

In this post I wanted to focus on the “rules” that guide creating a satisfying microinteraction. As Dan would say, we need smart rules to guide smart interactions. Rules govern how the microinteraction can be used or “played.” So before I can make a rule for a microinteraction I have to decide on its goal − intended purpose – which is simply the end state of the microinteraction. A cautionary note from Dan’s book is to “make sure the goal isn’t a step in the process.”  So for example, I want users to login to their Pandora account; that’s the goal, the end state. Prompting uses to enter their login information is a step in the process. The main thing to remember here is that when designing microinteractions, keep your goal in mind so that the interaction will be successful.

From my experience the point of crafting good rules for interactions, in this case microinteractions, is that it affects the user experience by “determining what happens and in what order.” Rules are by nature limiting to users so instead of creating an experience that might feel confining, it’s better to design to create a natural flow so users are “gently guided” through an interaction.

A rule that worked!

A recent project comes to mind where we created an important rule so that the employees of an intranet portal would be satisfied with a key microinteraction – finding some specific things. Through user research we learned that employees had too much trouble finding their paystub, 401k, timesheet, job listings and health benefits (to name a few) in their current intranet (i.e., too many clicks and too much hunting around). So, our goal was to reduce unnecessary complicatedness. To achieve this the information architect created a rule to replace multiple tabs, which users had become accustomed to, with only two mega drop-down menus. Those menus stored the main categories of information along with specific keywords such as “job openings.” In usability studies, we learned we had made the right choice; for example, we found that the categories within these menus were easy to discover, and better still, just one click away. If we had asked users ahead of time if that was a good idea, it’s likely all would have wanted to keep tabs. We confirmed in testing that our rule was solid and participants “got” the paradigm shift and liked it.

Rules of thumb for microinteractions

As you design a microinteraction, there are some rules of thumb to be continuously thinking about so that your designs are usable, even satisfying.

Know as much as you can about users, their context of work and their environment. This is by far the best way to know how to set the goal, create the rules and design the interaction. And, know as much as you can about the previous and current behavior of users. Like the previous point, when we have this data we can use it to predict or enhance the microinteraction and to make smart choices and good defaults.

Decide how much complexity and decision-making the user must “absorb” and how much will be absorbed by the product (i.e., system). Taking my earlier project as an example, we had enough research under our belts to know that employees would be more than happy to relinquish control of the task of finding new job listings, or their pay stubs for instance, to gain the benefit of an easy to use experience. As Dan put it, “computers are simply much better at handling some kinds of complexity than humans.”

Here are some tasks Dan advises the product / system handle for users:

  • Rapidly performing computation and calculations
  • Doing multiple tasks simultaneously
  • Unfailingly remembering things
  • Detecting complicated patterns
  • Searching through large data sets for particular item(s)

Limiting the number of options you give users is typically the best way to go; and, it’s better to create smart defaults than to make users work harder than is necessary to complete a task. Dan advises being “ruthless” about eliminating options. This, in turn, reduces the number of rules you have to create. Another bonus.

Design for perceived simplicity and avoid operational simplicity whenever possible. With perceived simplicity, a single control does multiple actions and that is better for microinteractions performed repeatedly.

Design microinteractions to prevent users from making an unintended choice, a mistake. Good design should do everything in its power to prevent user error.

A final rule of thumb, don’t forget about microcopy (labels and instructional text) as part of understanding how to craft good microinteractions. Don’t use instructional text when a good label will do the job and when you do need to include text, keep it as short as possible.

A last thought

Keep in mind that the most important rule of microinteraction design is knowing what the user is intending to do, what is he/she finds meaningful and valuable.


Posted in News

Less PowerPoints, More Prototypes

At the 2015 Adobe Summit, Todd Copeland of the National Australia Bank described how his organization is able to deliver digital experiences with the speed and velocity that customers expect. As Todd stated, “it’s a pretty simple equation: Less PowerPoints and More Prototypes. Less detailed specifications to justify business cases and more iterative customer testing.”

That “simple equation” is one of the key principles that is driving digital transformation. In today’s world, organizational velocity wins. Companies that are quick to adapt and respond to customers have a clear advantage. Those that are slow to respond are subject to digital disruption (see Blockbuster). In order to effectively compete, organizations must find ways to provide better customer experiences more efficiently. Enter Lean UX.

Lean UX abandons the idea of deliverables as milestones in favor of a progressive working model developed across multiple sprints. This is an important concept when you think about organizational velocity. Because deliverables eat up time. There is time required to create the deliverable, time to develop a presentation around the deliverable, time to present the deliverable and time to review and revise the deliverable. That is time that could be spent developing the actual solution. Lean UX enables the designers and developers to work collaboratively to establish a shared understanding without the need for detailed specifications or other paper-based deliverables. It also promotes transparency and trust, which can lead to a better solution.Lean UX Model
The Lean UX process involves 3 core steps:

  • Think: In the think stage, designers, developers and business owners collaborate on a particular problem and sketch out ideas for the solution. The goal is to get the core components of the solution visualized quickly so the development team can provide insights on the direction of the design, including feasibility. The initial investment in sketching is so minimal that there is no significant cost to completely rethinking the direction.
  • Make: Once a general direction is agreed upon, the team elaborates upon the solution through interactive prototypes. The interactive prototypes define the layout, functionality, relative importance or priority of information of the user interface and allow the team to experience the solution faster.
  • Test: Once the prototype is developed, it can be used to test the effectiveness of the design. By conduction usability testing sessions with representative users, the team can collect valuable feedback that will improve or enhance the solution. Based on the feedback received in the usability testing, the team makes revisions to the design concepts. And the cycle continues until all features and functionality are designed an incorporated into the working model.

Through this approach, a small, focused team can quickly prototype a working model that demonstrates the solution within a matter of weeks, instead of months. That difference is huge in terms of velocity, and may be the difference between meeting expectations and leaving your customers dissatisfied.


Why You Should Really Put Down Your Cell Phone at Lunch (Really)

Last week I read an article about cell phone usage that summarized where American adults are using their smartphones most often, and how it’s affecting their day-to-day personal interactions. This information was astonishing and saddening all at the same time, reflecting these eye opening statistics:

Screen Shot 2015-04-29 at 2.29.22 PM

I will be the first to admit that I myself have a hard time putting down my phone at the movie theatre or when I’m out to lunch, but I’ve come to realize that it’s completely disrupting the way people interact with each other “in real life” or without a cell phone present. People make significantly less face-to-face contact and are not as engaged in the conversation as they would be without a cell phone nearby. I feel that if I’m speaking with someone while they are scrolling through Facebook or checking their email, they aren’t listening as well or as engaged in the conversation. It almost feels as though nowadays, people don’t know how to engage in a conversation without their “security blanket” i.e. smartphone in their hand or their pocket; they need something to look down at if they don’t know how to respond.

This just as easily translates into the work environment. Everyone has their cell phone in hand, ready to answer a call or respond to an email. When giving a presentation, how many people are on their cell phones while “listening” to the presentation. “Even without active use, the presence of mobile technologies has the potential to divert individuals from face-to-face exchanges, thereby undermining the character and depth of these connections,” reads a study from researchers at Virginia Tech.

In addition, Forbes recently interviewed Molly Ringwald about “The Breakfast Club” 30 years later showing. When Forbes asked what the movie would look like if it was made in 2015, her response was, “No one would have talked. We would have all just been sitting there with our phones texting our friends.”

For Valentine’s Day I went out to a nice restaurant in New York City with my boyfriend, dad, and step mom. We didn’t even make it to the appetizers before my stepmom was “checking in” on Facebook and my dad was tracking my younger brother and sister via a family-tracking app called Life360 on his iPhone. This brings up my second point; while cell phones can get in the way of daily social interactions and important dinner meal conversations, they also bring a sense of comfort and security to the engagement. While my younger brother and sister are old enough to be left alone, they often walk from Starbucks, to a friend’s house, to a pizza place, to another friend’s house, and back to the local ice cream shop, which can be worrisome to most parents. By having Life360 readily available on their phone, my parents are less stressed about leaving the house for a long period of time, and are more apt to be engaged in the dinner conversation. My dad may check the app a few times to see their whereabouts, however, he doesn’t have to call them, leave a voicemail, worry about them lying about their location, or even spend time texting them back and forth while at the dinner table.

So, what is your perception on how cell phone usage is affecting the way you interact with your peers?


Posted in News

Gamification: UX strategy increases results and retention

No doubt you have heard the term gamification, and maybe you have already designed an application using this relatively new interactive strategy.

Here, we’ll define the term, review the fun behavioral science behind the scene, and wrap up with some practical concepts.   (If you reach the end of this blogpost, you will get your Spark-Blog Diamond Badge!)


What is Gamification?  

 Rewards for actions or thresholds.

That’s it!   In the science discussion we will use terms like motivators, variable-ratio scheduling, and human need analysis.   But its simple: human behavior demands recognition and status symbols.   In the real world, we have thrones, crowns, sheriff’s badges and corner offices. These now have the digital analogs of avatars, points, scoreboards, challenges, levels, quests, badges, rewards and “social graphing”.

Let’s consider an example of gamification.   Below the training site Treehouse uses colored shapes, game cues, and flat/game-board design to draw the user in ( I like the blue badge).   Notice the game-like directions, a 1-2-3 seemingly easy and achievable process resulting in the “win”: in this case, a dream job.

Treehouse Badging Sample


Does Gamification work?

  • USA Networks had a recent popular show Psyche.    They gamified their show’s app and generated a 130% increase in page views and a 40% increase in return visits. That added up to a decent financial pay off, including direct ecommerce.
  • Deloitte gamified their Leadership Academy training site, and even though this was a voluntary resource, they saw 37% increase in return users.
  • ExactTarget created ROI from sales and savings by using the Knowledge Guru game engine for CSR and increased first-call resolution by 45%.

These companies and hundreds more see result from gamification via accelerated feedback cycles, clear goals and rules of play, a compelling narrative, and tasks that are challenging but achievable.


The Psychology of Gamification

Lets start with B.J. Fogg, and his model of Behavior. His model has three parts: Motivation, Ability and Trigger.   Let’s focus on the first factor, Motivation.   What motivates us are needs.   Human needs have been identified in this order:

  1. Physiological: air, food, water, sex, sleep, etc.
  2. Safety: health, personal well being, financial/employment stability, security against accidents, etc.
  3. Belonging: love, intimacy, friendship, family, social cohesion, etc.
  4. Esteem: self-esteem, confidence, achievement, respects, etc.
  5. Self actualization       ( – Maslow, 1943)

Needs 3, 4 and especially 5 are the gamification sweet spot:   we want to belong and we need self-esteem: these derive from self-actualizing acts that benefit ourselves. Here we begin to collide with another behaviorist you may remember, BF Skinner, of the school of Radical Behaviorism which involves reinforcement via operant conditioning.

Skinner did research on learning and motivation that used a criteria of “reward scheduling”, that is:   when, how many, and at what rate rewards are given or removed? He found that a fixed-interval schedule like a countdown or appointment is useful for established behaviours – like driving.   But to maintain or spur new behaviors, a variable-ratio schedule is far more efficient:  think surprise.  This is called an operant conditioner and explains, for instance, the motivation for gambling addiction.

At a recent TED talk, Tony Robbins made the case that our primary psychological need is certainty, but the second is uncertainty.   This supports Skinner’s findings: we want the jack-in-the-box, the gotcha-moment in the movie …the unexpected positive reinforcement.  This is the core driver of gamification.


Working with Gamification

Gamification is now a mainstream UX strategy.   Platforms such as Bunchball’s “Nitro” are now deployed by companies like IBM, who use it to increase usage of their Connections product (USA Networks used this as well).   But many applications can integrate gamification into their UX from the design git-go.

Towards this, here are some tips:

  1. Keep your eye on the ball: what is the primary problem we are solving for the user?   Paste that sticky at the top of the whiteboard:   every game aspect must support and never impede solving this problem.   Therefor, game rules and elements should support the solution, be clear, be simple, and even be visually secondary.
  1. Application type: the issue is then what kind of system or application are we talking about? Gamification applies best for applications with repeat users, and even better, expert users who work in a community. This is why many community/knowledgebase environments use gamification.   For example, many repeat-contributors at AT& Community can earn the title “Community Expert” and this badge appears next to their names.
  1. Application complexity: Another aspect that supports gamification are intermediate steps or functions that support or create the user’s main goal: think selective complexity. Unselective complexity- like a sequential sales wizard with numbered steps – is the exact wrong time for a game (it’s a fixed-interval schedule!).   But if I have choice as to how I use the system, either in order, features or depth, this is gamification opportunity knocking.   Motivate users to explore features, reward new actions, or use the competitive-carrot of “social graphing”:  e.g. … you are now in the top 90% of expert users!
  1. User competition: If users “see” each other, allowing avatars and score achievements to be visible can motivate younger markets.   Broadcasting user achievements in the UI can bring the competition up a level and serve to remind users about aspects of the application they may not be using.
  1. Narrative: Can you create activities that are fun, friendly and that works for the cross-section of your demographics? If not, say no to gamification!   But if a narrative can be created that is engaging and goal-supporting, this can add penetration into your user-base.   For instance, Nike uses a narrative of a race-car like dashboard for their top-line sneaker website with which you can track your speed and distance.   Foursquare uses a royalty narrative: you can earn the title of “Mayor” for their geographical app.The narrative can also include a race, challenge or quest metaphor: this type of gamification can be layered on the UX- it does not need to be embedded into the UI. It can also be real world:   a narrative based on season or holiday, event-oriented, celebratory, or coordinate with a marketing campaign.
  1. Metrics: a persistent or even temporary gamification attempt should be measured in code-based quantitative and feedback-based qualitative methods.   Not everyone will buy in, but if more do than not, your clients are the winner.


There it is, Happy Gaming everyone.   And if you have read this entire blog post, thank you..   Here is your Spark-blog Diamond Badge!



Links & Further Reading

A good review of samples is in an Information Week article

That’s what happened when Deloitte gamified their Deloitte Leadership Academy (DLA).

Anthony Robbins enters the picture with his set of human needs (TED talk 2006)

IBM is using a company called BunchBall’s platform Nitro

Posted in News