Top ways to stifle innovative ideas :: #innovation #ux

Just read a great article on the stifling of innovation from companies that want to just keep doing things the same way.  Here are some of the top ways your company can also stifle innovation and the steps that you can take to actually encourage innovation inside your workforce.

Acting in these nine ways guarantees that there will be little or no innovation of any significance, because no one had the time, money, or motivation to innovate:

  1. Be suspicious of any new idea from below — because it’s new, and because it’s from below. After all, if the idea were any good, we at the top would have thought of it already.
  2. Invoke history. If a new idea comes up for discussion, find a precedent in a an earlier idea that didn’t work, remind everyone of that bad past experience. Those who have been around a long time know that we tried it before, so it won’t work this time either.
  3. Keep people really busy. If people seem to have free time, load them with more work.
  4. In the name of excellence, encourage cut-throat competition. Get groups to critique and challenge each other’s proposals, preferably in public forums, and then declare winners and losers.
  5. Stress predictability above all. Count everything that can be counted, and do it as often as possible. Sweep any surplus into master accounts, and eliminate any slack. Favor exact plans and guarantees of success. Don’t credit people with exceeding their targets because that would just undermine planning. Insist that all procedures be followed.
  6. Confine discussion of strategies and plans to a small circle of trusted advisors. Then announce big decisions in full-blown form. This ensures that no one will start anything new because they never know what new orders will be coming down from the top.
  7. Act as though punishing failure motivates success. Practice public humiliation, making object lessons out of those who fail to meet expectations. Everyone will know that risk-taking is bad.
  8. Blame problems on the incompetent people below — their weak skills and poor work ethic. Complain frequently about the low quality of the talent pool today. If that doesn’t undermine self-confidence, it will undermine faith in anyone else’s ideas.
  9. Above all, never forget that we got to the top because we already know everything there is to know about this business.

Following these rules ensures that innovation will wither on the vine, if it even surfaces in the first place. That is often just fine with established interests, who would rather be protected against the nuisance of change. It’s not so fine for success in a highly dynamic environment that demands new solutions.

Leaders who want to nurture innovation can reverse the anti-innovation rules and eliminate the practices that stifle innovation, in order to create a pro-innovation culture. For each of these innovation-stiflers, innovation-promoters can move to the opposite behaviors. In a culture of innovation, these actions allow innovation to flourish:

  • Encourage new ideas, especially from below and from unexpected sources.
  • Look ahead, not behind. The past is prologue but not necessarily precedent.
  • Leave some slack for experimentation, whether spare time or seed money.
  • Look for improvements, not critiques. Encourage collaboration toward common goals.
  • Be flexible. Stress substance over form, action over calendar. Allow for unplanned opportunities.
  • Open strategic discussions to new voices.
  • Accept that stretch goals mean some things won’t work. Avoid public humiliation; promote public recognition for innovative accomplishments.
  • Foster respect for people and their talents.
  • And know learning is an imperative. Everyone, even the most experienced, must be open to learning.

Leaders seeking innovation should adhere to these pro-innovation principles. But it might also be a good idea to keep the innovation-stiflers posted as a reminder of what not to do.

source:  Harvard Buisness Review

iFrame to parent communication across domains :: #JS #iFrame

iFramed content may be less than ideal to use, but in many cases it provides a way to easily bring in 3rd party content.  If there is communication that is necessary between the content inside the iFrame and the parent all hope is not lost.

You should use a postMessage event to talk from the content in the iFrame to the Parent window.  The below will work across domains and will not throw a JS security violation.

On your parent page:

window.addEventListener(“message”, function(){}, false);

On your content being iFramed in:

parent.postMessage(“myMessage”,”*”);

Don’t design pages, build the Atoms and Molecules that make up Pages

Atoms are abstract and aren’t often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.   Atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.

Templates are comprised mostly of organisms combined together to form page-level objects.  Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.

Pages are specific instances of templates and swap out placeholder content with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are essential for testing the effectiveness of the design system. This final form allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

 

 

#UX :: One bad experience and poof…customers are history

This is so very true.   Your website may be the first time that a consumer has a chance to interact with your brand online.  If you provide a bad experience to them they are more than likely to never return.  This is why the experience of the consumer is so important in the process of developing a site.  You may code something to specifications, but as a consumer is it something that would be easy for you to use?

 

Google :: Multi-Screen Resources – Build a website that showcases your business on every scree

There are some great resources at this link below along with some conversion rates related to companies that have made their sites responsive.    All future development should be thought about from a multi-screen standpoint.

 

Responsive Full Screen Phaser Test :: #html5 #canvas #phaser

Have you created a Phaser app and wanted to make it take up the entire page height/width as well as re-size when the browser re-sizes?

The below is just a piece of a game I was testing with to make it full screen, but based on this you should get the concept.  In mobile this also allows for it to re-size on device rotation to match the new width/height of the display.  You would also need to add logic to allow your elements to re-position themselves in the game based on the new width/height.

JS:

$( document ).ready(function() {

var setup = {

init:function(){

var firstheight = window.innerHeight;
var firstwidth = window.innerWidth;
var game = new Phaser.Game(firstwidth, firstheight, Phaser.AUTO, ‘game_div’);

$(window).resize(function() { display.resizer(); } );

}

};

var display = {

resizer: function () {

var myheight = $(window).innerHeight();
var mywidth = $(window).innerWidth();

try{

game.width = Number(mywidth);
game.height = Number(myheight);
game.stage.bounds.width = Number(mywidth);
game.stage.bounds.height = Number(myheight);

game.renderer.resize(Number(mywidth), Number(myheight));

Phaser.Canvas.setSmoothingEnabled(game.context, false);

}

catch(e){

console.log(“Error description: ” + e.message + “”);

}

}

};

setup.init();

});

 

html:

<!DOCTYPE html>
<html>

<head>

<meta charset=”utf-8″ />
<title>Full Screen Phaser</title>

<style>

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color:#000;}

</style>

<script src=”assets/js/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”assets/js/phaser.min.js”></script>
<script type=”text/javascript” src=”assets/js/main.js”></script>

</head>

<body>

<div id=”game_div”> </div>

</body>

</html>