What is morphing?

Bush-Obama morphing

Morphing essentially describes a state change on an element, transforming it into another. Many UI frameworks have helpers for morphing, usually in the form of class animations. jQuery UI has made it transparent to animate jQuery’s class manipulation functions like addClass, script.aculo.us has Effect.morph which essentially does the same.

Why is it useful?

From a higher level UI perspective, morphing really describes that one element becomes another based on the context. It is essentially very powerful because it gives your users a visual cue what is happening, how is happening and why it is happening. Instead of doing an instant change, the users eye can follow the motion and you therefore give them a better feeling of control over the whole situation.

Show me!

Let’s do an example. While working on smart.fm’s new item builder, I had to visualize the following steps: Clicking on a button to add text, then displaying a text input, and hiding the button since you cannot add text twice. Usually, it would roughly look like this:

However, with morphing, it not only looks hot but solves the issue in style:

This was a particularly lazy example, since it doesn’t even truly morph one item into another – it just animates the width of the button and fades in the input on top. But visually, the element clearly transforms.

Morphing in the wild: Inline editing

One technique that was is heavily inspired by morphing is inline editing. Essentially, you click on a paragraph or element, and it transforms into and editable element. Most solutions don’t actually morph, but you get the idea. There are thousands of other usecases out there waiting to be discovered, and if you have some, I’d love it of you share them with me!

Walt Disney was not only known as great entrepreneur, but also as an individual who could switch easily between many different roles. Quoted from Wikipedia, he was “film producer, director, screenwriter, voice actor, animator, entrepreneur, entertainer, international icon and philanthropist“, and that’s only his official roles. The Walt Disney method essentially strips it down to three, sometimes four roles: The dreamer, the realist, the spoiler and the neutral. It is a highly effective creative method inspired by Disney, and can handle almost any product creation process. Before I’m going to explain how it can be applied to the web development world, I’ll first explain the basics.

The Disney method explained

Essentially a role playing strategy, the Disney method is said to work best with four different roles (I usually skip the forth though..):

• Dreamer (visionary, delivering ideas)
• Realist (doer)
• Spoiler (critic)
• Neutral (consultant, reviewer)

Take four chairs and mark them with above roles. As single technique, it is recommended to start within the neutral position to analyze the problem. I, however, recommend to start as dreamer, since there’s in fact not always a problem you want to solve. When you’re sitting on the first chair, you start brainstorming until you have a beautiful complete vision. As soon as the dreamer in you is happy, you move on to the next chair, taking the role of the realist. You analyze the dreamer’s ideas and make sure they’re implementable, or strip them down accordingly. When you think it works out, you pass your product to the critic, who will then try to find anything possibly wrong with it. When the though review is done, take a deep breath as neutral consultant to review everything from a bird’s perspective, and explore if every chair role is happy. If they’re not, simply continue your circle: Pass the dreamer the finished implementation and critique, and let him explore different or additional directions. Do those steps, until everyone is considerably happy with the product.

The whole strategy can of course also be applied to groups of people, meaning you have a full discussion going on between the roles, and every couple minutes you move places. However, I highly suggest trying out the single variant, because it proved to be much more effective for me personally.

Applying it the web development

As already mentioned, the Disney method can be applied to almost any situation. Let’s apply our roles to the web development world and see how they would look like:

• Dreamer becomes Designer, Prototyper
• Realist becomes Engineer
• Spoilers become your users, investors

Note that I skipped the neutral role, because the new spoiler is essentially both, and it allows for faster iteration. Now that we have a fully working cycle for a web development situation, let’s narrow it down and focus on individual implementation aspecs:

Going into detail: Implementation roles

If it’s not working well enough on a high level like above, you can always narrow it down to more granular roles. As an example, I’m taking the engineer role, and splitting it up into three:

• Model
• View
• Controller

or how about this one:

• Rapid prototyper
• Frontend engineer
• Backend engineer
• Performance Guru

As you can see, there are endless possibilities.

Now why should I do it anyway?

The whole point about the Disney method is that it allows you to understand your co-workers, the flow of a product, and the most effective path to your end goal. It gives you the chance to have a look at each role’s unique perspective, how they see themselves and others around them, and when mastered, gives you a bird eye or global view that incredibly improves your leadership or individual role. If you do it a couple times, it’s very likely you start projecting your 4 chairs on your actual co-workers and naturally improve the workflow.

Switching between different roles is a unique and highly rewarding skill. I personally believe that this particular skill let Disney become the legend he is today. If Walt Disney was running a web business, he would simply add a couple more roles to his mind model and start to build up highly successful web products.

Now go ahead and grab some chairs!

Perfectionism vs. trying to be awesome

Note that all ideas I have, and everything I’ve presented so far is not related to being perfect or delivering the perfect web product. Perfectionism is extremely dangerous, and chances are you never get the job done. In fact, many of my labs demos are far from perfect, even stable, but they push the limits. They deliver awesomeness. They provide great experiences.

Looking at games

Why games? It’s actually really simple. While web developers have been whining for years and have been stuck in their despair, game developers never stopped to amaze with the little tools and possibilities they’re given. 3D on a Super Nintendo? Easy. Full blown 3D RPG on PlayStation 12 years ago? You bet. Yes, game developers deliver.

Cheating and optimizing

Why are game developers so different, and what are they doing? Well, for once, they’re simply cheating. Remember Final Fantasy VII, the greatest selling role playing game of all time that lead Sony’s success of the PlayStation? Since the limited 3D capacities where not enough to deliver a great experience at times, they simply uses prerendered scenes and mixed them with live renderings. Yes, 1997. The even bigger point though is the optimization efforts that are made. Web developers only optimize when they see performance issues. For game devs, they know from the beginning on that the console they’re developing for cannot handle the raw 3D data, so they need to find optimization patterns right away!

They for instance need to control the number of polygons on the screen, memory consumption and frame rates. Many 3D techniques developed in the last 10 years are in fact optimization techniques, that either deliver a richer experience with the current hardware, or consume much more energy to be able to use much more of the same.

Delivering

Most importantly, game developers aren’t afraid of going different routes if something doesn’t work out. They try hard to deliver the experience they’ve planned, not the actual expact specification. Whenever I work on new projects, I ask myself “how would a game developer do it in a game?”. This usually gives me brilliant new ideas, and I highly suggest you try it out!

Now if only I could convert some game developers to start over in the web world…

Update (2): Please find a working demo here: Hints demo

When building nifty UI solutions, always keep in mind that in order to make your target audience use your cool features, you must teach them. The iPhone is to a certain extend only intuitive because they have the marketing power to teach people on TV how to do pinches and swipes. Anyway, since most budgets are smaller, let’s try to achieve the same with contextual hints.

Contextual hints are basically help bubbles that pop up as soon as you are in a certain context. They can also serve as an application walkthrough or tutorial. If you build a todo list, the first hint you would show your users would be sticking on top of the “Create new todo” button, and would tell you something like “Why don’t you click here and create your first task?”.

I’m sure you got the idea, let’s build a very simple solution without any graphics (The downside: Will not look too good in IE..). First, we need to create the markup for the hint:

<div id="bubble">
	<span class="content"></span>
	<div class="pointer"></div>
</div>

Sweet. We just have the outer bubble element which has the id #bubble, a content div that will hold our text and a pointer div which we’ll transform to a nice triangle. Next, let’s do the CSS:

#bubble {
	background: rgba(255,255,255,0.9); /* use rgba to let the bubble shine through a bit */
	font-size: 1.2em;
	padding: 1em;
	width: 22em; /* the bubble needs a certain width since it's absolutely positioned */
	-moz-border-radius: 1em; /* give the bubble nice rounded corners */
	-webkit-border-radius: 1em; /* ...in both gecko and webkit */
	position: absolute;
	z-index: 100; /* give it a high value here to lie on top of all other stuff */
	opacity: 0; /* opacity must be set to zero at beginning (use filter: alpha(opacity=0) for IE) */
}

#bubble .pointer {
	position: absolute;
	bottom: -1em;
	left: 2em;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: rgba(255,255,255,0.9) transparent transparent transparent; /* make sure only one border side is shown */
	border-width: 1em 2em 0em 1em; /* this is called a border slant and creates the shape of the triangle */
}

Obviously feel free to customize everything related to styling, font size etc. Next, we want it to see come all together by doing the JavaScript/jQuery work:

$.fn.hint = function(msg) {

	var offset = this.offset(), // generate the offset position of the hinted element
		bubble = $('#bubble'), // cache the bubble as jQuery
		pointer = $('.pointer', bubble), // cache the pointer of the bubble
		fadeDistance = 50; // the distance from where the bubble will fade in

	// append the message to the bubble, position it and slowly fade it in
	bubble
		.find('span.content').html(msg).end() // insert the new message
		.css({
			top: offset.top - bubble.outerHeight() - pointer.outerHeight() + this.outerHeight()/4 - fadeDistance, // the element offset minus the height of the bubble, minus the height of the pointer, plus one quarter of the height of the element to be on top of it, minus the fading distance
			left: offset.left + this.outerWidth()*0.75 - 42 // the element offset + 3/4 of the element's width to position the bubble at the right side, minus the pixel width to the edge of the triangle
		})
		.animate({
			opacity: 1, // fades it in
			top: '+='+fadeDistance+'px' // moves it in from the fade distance that we substracted above
		}, 600);

	// make sure the bubble goes away when clicking on the hinted element
	return this.one('click', function() {
		bubble.animate({
			opacity: 0, // fades out
			top: '-='+fadeDistance+'px' // animate back the fade distance
		}, 300);
	});

};

That’s it. Now all you need to know is it’s usage, but you probably know it already:

$('#myButton').hint("Click here to make it explode.");

This will blend it your hint, and as soon as you click on the element, it will fade away again. Sweet, huh?

$.fn.mask = function(u) {
	return $(this).each(function() {
		var p = $(this).position();
		this.style.background = 'url('+u+') -'+p.left+'px -'+p.top+'px';
	});
};

Here’s how to use it:

// grab all li's on the page and mask them with a certain image
$('li').mask('http://farm3.static.flickr.com/2075/2509376094_737cce37d4_o.jpg');

Most interestingly, this was the first actually useful plugin that was tweetable in it’s entirety: http://twitter.com/pbakaus/statuses/2492305298. Enjoy!

First off, I was really impressed when I found out that Webkit now has now ported over 3D CSS Transforms over from the iPhone webkit fork, and they showed us some really cool demos a couple days ago. Obviously I couldn’t resist and grabbed a bunch of them, transformed them over hours only to recreate one of my plugins with some extra webkit spice. Meet the Ubercarousel!

Note: You need to download a nightly of Webkit in order to see this!

The Ubercarousel in latest Webkit nightly

The Ubercarousel is using almost every latest CSS enhancements build into Webkit (including CSS 3). Here’s a quick list:

• CSS Gradients for the overall background and the reflection (yep, shamelessly ripped from the webkit demo
• RGBA (on the control panel and the debug backgrounds)
• 3D Transforms (Rotation and translation on the Z Axis)
• CSS Animations (For the spinning animation and the wobbling)
• CSS Transitions (for the hovering of the images)
• CSS Reflections (using a gradient)
• Appearance (For the sliders, it’s a range input)

Functionality wise, it just grabs the 100 most recent interesting pictures from Flickr and displays some of them in the carousel, enlarging them when you hover. While working on this demonstration, I found out about a couple bugs and hit some walls, but generally I was extremely impressed of how well you can combine various new enhancements. To mention some issues, the inner <img> tag needs a “translateZ(0px)” or otherwise the images will be blurry, gradients don’t animate and are generally hidden when something is transformed, and transforms that are applied on :hover don’t play well with the wobble animation.  Anyway, have fun!

Uberplayer now in HD!

On a side note, Google finally added support for HD playback for their chromeless player, so from today on, the Uberplayer supports HD playback. Enjoy!

Dedication

When you are motivated, you start working on something. But to actually finish the job, you need dedication. Unfortunately, dedication and motivation are a bit hard to describe individually, but let’s try with some metaphors. Imagine drinking a bottle of cold water after a crazily hot day. The motivation in this case is the bottle. The technique you use to get it into your body (hopefully through swallowing) is the first part of the dedication – you’re making sure the motivation is converted into something that gets the job done. Unfortunately, you need to drink again in a couple hours – to think about it, and get a new bottle of water in advance, is the second part. So in other words, the two fundamental pieces of dedication consist of converting your motivation into creative energy and maintaining the motivated state.

Focus & Distraction

Focus and distraction is often considered as good and evil, but there’s a little twist to it. In general of course, you need to focus on your current task to keep being dedicated, and the worst thing that can happen then is to loose that focus again. Especially for most us (the internet generation), distraction is a real problem. The Web 2.0 gave us thousands and thousands of new opportunities to get distracted. Don’t worry though – there’s an answer to every problem.

Here’s a example list of things that will likely make you forget about your task, and how to solve them effectively:

• Twitter
  Ok, this one is simple. First off, do not twitter in the middle of a task, unless it’s specifically related to solving the task. For instance, if you have a technical question that you can’t solve, it’s perfectly fine to ask for it through twitter. Secondly, try to get twitter off your PC, and onto another device, and only use it from there (i.e. your phone). It helps you to completely (re)move the focus.
• Social communities
  Again, think about if using this particular community helps solve your specific task. If it doesn’t (Facebook for instance likely is a good candidate for wasted time – unless of course you’re developing a FB app), then simply don’t use it. If the community can actually help you getting your work done, then that’s great!
• Family (if you’re working remotely)
  It is extremely important to have a seperate office with a door that you can close. Make sure the process is the same than driving to another city – and make sure your family knows about how important it is not to get you distracted. Have them understand you’re collaborating with collegues online and via Skype, and let them contact you only if it’s really urgent.
• Instant messanging
  Set up seperate groups or accounts for work and freetime. Set your status to ‘Working’, and let your coworkers know that this is just to tell people you’re ‘in the office’.  Do not answer to IM’s from other contacts – or tell them politely that you can’t chat during business hours.
• RSS Feeds
  This one is dangerous, since chances are that most of the information is somehow important and relevant to you and your job, but not in this exact moment. That’s why I suggest to make sure to only open your newsreader once a day – after all, you wouldn’t bring a printed newspaper to the office and peek at it every half hour, would you?
• Everything else in your head
  To clear your entire head from everything else, I still highly suggest the GTD (‘Getting things done’) method and sort everything you have in your head into seperate todo lists that you can access at anytime. This basically is the essence of GTD.

Positively distracted

As mentioned above, it is possible to use distration as a tool to keep motivation and dedication flowing, and I highly suggest to use at least one or two of the following examples to relax during work hours, or to get into a different thinking mode.

• Music
  Music can be very inspiring and motivating if used right. Make sure though not to listen to audio books and songs that are focussing solely on the text – since listening actively distracts you too much.
• Collegues
  Talk to your collegues every hour or two, even if you think they can’t solve your problem. Ask them what they’re working on. It’ll most likely move your brain waves into another direction, and you’ll get fresh new ideas. Also try pair programming of you’re a programmer!
• Walking around in the office
  This especially goes well with pinging collegues. Don’t just shout around in the room, but relax your muscles a bit by getting out of your chair and walking around a bit. If you think it looks too silly, go outside and grab something to drink.

Goal orientation

Of course, there are thousand more ways to keep you in the flow, but some of them I feel are especially helpful. First off, try to split up your current task in the smallest possible pieces to work them off easily and always have an immediate feeling of accomplishment. Second, try to think about the goal! If you’re paid hourly for your work and your objective is money, think about what you earned already in the next couple of hours, and how much you’ll earn in the next ones. If you work in a team, think about how much your current work will help other people finish their job, and how much they’ll like you for it. There are many individual goals if you think about it, and those two are very generic, so try to apply them.

See you soon!

It gets lost.

This blog post is a wonderful example. If I hadn’t realized the fact above, you’d never read about this – since it’s a short blog post, but too long for Twitter. The constraint that you’re setting on yourself is dangerous, and you can see it here on this blog. I love talking about what I do, and I talk to people everyday, but as a matter of fact, very few things end up here.

The key to remember is that what counts is always quality, not quantity. If you have something in your mind that you think provides real value, then please write about it. Yes, even if it’s just one character more than your tweet can hold.

See you soon with more short blog posts!

‘How to change the world‘ sounds a bit high level, but everyone with high ambitions in his personal and business life is likely to share a common vision of wanting to work on something that makes a significant impact. To start off, it could of course also be read as ‘How to change yourself to change the world‘. The first entry in this series, and the most important one of all is motivation. But let’s first explain the order of how things work.

The productivity cycle

Visualization of the productivity cycle

Being productive is something many people can’t grasp easily. There are however a couple of directions to follow, and I personally call it the productivity cycle. I’ll go into detail for each of these in subsequent blog posts.

1. Inspiration
2. Motivation (today’s topic)
3. Dedication
4. Communication
5. Recreation

Very quick explanation: Before you can even start to work on anything, you have to be inspired. When you are inspired, you have to become really motivated to start working on it, and then you need dedication to stay on focus and do the job. After a couple hours, you need a recreation phase to start over with the whole process, but before that, make sure you communicate today’s work with your boss, comrades, coworkers to maximize the impact (sometimes you can leave out inspiration and motivation on the next cycles for a couple days).

Why motivation?

People who truly internalize those fundamentals can solve more tasks in 4 hours than a ‘normal’ worker could finish in 12. Even better, the guru won’t be exhausted mentally. Obviously, it’s a long way, but if you get today’s topic right, chances are that the others will come to you automatically.

That being said, off all things, motivation is the trickiest to master. You know it yourself. Even if you really love your job, you’re only motivated randomly, and it comes and goes. And when you’re not motivated, everything seems to take longer. Wait – it doesn’t seem to take longer, it does take longer! It happens to me all the time: I have this great idea (->Inspiration), I start working on it, get distracted, and the motivation’s gone. At that point, I still enjoy the original idea, but somehow my killer energy is gone. Sounds familiar? Don’t worry, all hope is not lost my friend!

Getting motivated

1. Set a goal

   If you don’t know your goal, you’re drifting and chances are you’ll circle around with your efforts and thoughts. If you have a great inspiration and a following idea, set yourself a uber nice but realistic goal, best with an attached date. Deadlines generate pressure, but no deadlines make you idle – the first is always preferable.

2. Make sure the outcome justifies the effort

   Only very few people like to work on projects just for the sake of their own satisfaction, most likely you have a greater objective. In many cases it’s money, but it can also be reputation, fame, power or the greater good. Whatever works for you, but make sure thinking about the possible outcome makes you feel great – it’s a motivational key factor.

3. Enlightening your office enlightens your thoughts

   This one is a very practical advice. Most living beings, including humans, need light, preferably sunlight (with more ‘blue‘ in it) to stay awake and feel comfortable. Scientists have proven already the receptors that fire off when light reaches our eyes stop the production of the sleep inducing hormone melantonin. But even if you forget science, light is, like fire, one of the greatest phenomena for all cultures. It gives us security and warmth, and it often stands as a symbol for intelligence. So start using it!

4. Communicate

   I can’t stress this one enough, being the most useful resource of all. Talk to people that likely want to listen to your ideas. It could be your wife, your children, your collegues or you best friend. Meet all those people before you start a big project, and encourage them to participate in a discussion. You will receive positive and negative critism, doubt and more inspirations, but most often they’ll back you up and encourage you. Even better, it works for the inspirational part of the productivity cycle as well. Remember those times when you met a former collegue for dinner and got your brain spinning again? It’s no coincidence. Inspiration through communication will be discussed in detail when we cover the topic.

Keep being motivated

So you’re motivated now. Excellent! The next step is to keep being motivated, or how I call it in the productivity cycle, dedication. It’s the next topic I will cover, along with the first missing piece – how do you actually find out what you’d like to do (read inspiration). See you soon!

Finally I can present you one of my newer interface experiments that has grown to something quite nice in the meantime.  With the transition from small movieclips to longer and bigger full length flicks, sites like Youtube still don’t really get the idea that the movie player has to give the user space, feel a bit like a theater for a overall greater experience. What we still receive is a bloated page with thousands of comments below, tags and whatever – things the user really doesn’t need or want to see while watching. This is why I started a new experiment – building a movieplayer for the web that doesn’t suck.

Shows only what’s needed

The first idea of the interface was that everything that’s not required during movie playback will simply not be visible. This effectively means that if the video is playing, nothing else should be shown. Under that requirement, I thought it will also need at least movie information somewhere, and a search interface.

The Uberplayer has slide-in elements for controlling the video. Every function or visibility can be controlled through either the mouse or the keyboard. At initialization and pause, all controls are automatically shown, since you’re not focussing on the video. During video playback, move your mouse towards the bottom and the search slides in – move it to the top and you’ll see current video information and the search bar.

Coverflow

I can also proudly state that this is the first time I actually integrated my experimental Coverflow plugin into an actual application. After you entered a search term and pressed return, the bottom view slides in and presents the search result thumbnails in a really nice flowing coverflow like view if you are using a webkit enabled browser. If not, don’t worry – the fallback looks nice nontheless! Additionally, the click-through rate is minimized by switching coverflow states on mouse over – clicking opens the new movie.

Integration with Youtube

I choose to integrate with Youtube because it allows me to do searches to their API’s through their JSON API. What does that mean? It means that the Uberplayer is completely backendless, therefore doesn’t need any server software / logic. It’s all JavaScript, baby!

The second reason was that Youtube has a nice chromeless player, which worked really well for my kind of interface. The only drawback is that the chromless player doesn’t support HD playback at this point, but I hope they’ll give us that feature eventually.

Feature overview

To get an idea, here’s a quick walk through all features that are probably worth mentioning and explain how the player works.

• Full-screen playback at all times (toggle full screen mode on your browser for a better experience)
• Fluid slide-in interface (move your mouse towards the bottom or top to blend in controls)
• Click on the video to toggle pause state and blend in all controls
• Rich keyboard interaction
  • ‘down‘ toggles the search results view
  • ‘up‘ toggles movie information and search bar
  • ‘space‘ toggles pause state
  • ‘s‘ focusses search bar and let’s you type in a new search (‘escape’ cancels)
  • ‘left‘,’right‘ let’s you navivate through search results when the search results view is active
  • ‘return‘ opens a new movie when the search results view is active
• Automatically generates hash urls that you can bookmark or send to someone – they will not only open the movie, but also the attached search results
• Completely backendless through Youtube’s JSON API

What’s left to do

This is a very early preview release, so please be merciful. Some things I would like to do for the next version is a playlist manager (sliding in from the left), and if I only could get access to a chromeless Vimeo player, that would totally kick ass.

Anyway, check it out, and leave a comment!