Da Gampa's Code

Writing your own Canvas Scene Graph

Tue, 15 May 2012 18:02:00 +0100

Writing a scene-what? The HTML5 Canvas api provides primitive methods to express shapes, strokes and fills, which is all fine and dandy, but in a lot of situations we tend to think of drawing as composed of objects. E.g. to draw what I see from my window I need to draw a tree, a house and some grass, not a sequence of paths.

This is true even more when we start animating, typically objects that are part of another object move when the parent object moves.

One way to abstract this is to have a graph of objects where some objects are contained in other objects and each object takes care of drawing itself. This is called scene graph rendering.

In this article I will show how to build your very own scene graph renderer for the HTML5 canvas. If you are simply looking for a full-featured, pre-built solution, I recommend checking out CAAT. But sometimes you need something easily customizable/lightweight. We will build a single CoffeeScript class that implements everything necessary.

The basics

The first thing that any computer graphics program has to deal with are coordinate systems. We want each object to have it’s own independent coordinate system and itself be defined in terms of it’s parents. In general this indepence is one of the best reasons for using a scene-graph solution, since canvas tends to have a lot of global state, and you might often face the situation that changing one part of your composition affects a very different part. We wish to avoid that.

The simplest way to solve this is to have each object be it’s own canvas. So let’s start coding:

class Entity
  width: 0
  height: 0

  constructor: (@width, @height) ->
    # Create the canvas we will be rendering the object to
    @canvas = document.createElement('canvas')
    @canvas.width = @width
    @canvas.height = @height

  # Call this function to render out the object, returns a Canvas instance
  render: ->
    ctx = @canvas.getContext('2d')
    # Clear the canvas, important for animation
    ctx.clearRect(0, 0, @width, @height)
    @draw(ctx)
    @canvas # return the canvas

  # This function should be overriden in subclasses  
  draw: (ctx) ->

Now each subclass has to only implement the draw method with it’s own set of drawing primitives.

Composition

We hover are still not a graph, there is no way in which objects can have no children. First we need to add a few more properties to our class:

x: 0
y: 0
children: []
parent: null

x and y are numbers that determine where will the object be drawn in the parent’s coordinate system. Let’s implement a default draw method, that will render the children:

draw: (ctx) ->
  for child in @children
    ctx.drawImage(child.render(), child.x, child.y)
  false # return some value, otherwise CoffeeScript will return an array

The drawImage method takes an Image, Canvas or Video object and draws it at specified coordinates. Since render returns a canvas instance with the object drawn in it, we can now render it in the parent canvas. A simple demo of this class:

Rotations

To make this even more worth it, we would like to support rotating any object and having all it’s children be rotated as well. Again we need to add a rotation attribute:

rotation: 0

and tweak our draw function:

draw: (ctx) ->
  for child in @children
    if child.rotation isnt 0
      ctx.save()
      ctx.translate(child.x, child.y)
      ctx.rotate(child.rotation)
      ctx.drawImage(child.render(), 0, 0)
      ctx.restore()
    else
      ctx.drawImage(child.render(), child.x, child.y)
  false

Canvas provides us with all the magic we need. We save the current context, then shift our origin point to the child’s coordinates (NB: we are going to be rotating children around their origin point, perhaps you would like to implement rotation around center point). Then we do the rotation and drawing and then we simply restore our context to it’s original point of origin.

Shaping up the API

First of all since most entity objects will want to override draw in one way or another we might simply use a Kestrel in the constructor and allow the user to optionally provide it when initiating the class:

constructor: (@width, @height, @draw = @draw) ->
    @canvas = document.createElement('canvas')
    @canvas.width = @width
    @canvas.height = @height

The @draw = @draw might look a bit awkward at first glance, but it assigns as a default our own implementation of draw if the user hasn’t provided one. The js looks like this:

function(draw) {
  this.draw = (draw != null ? draw : this.draw);
}

Next let’s have a single function for instantiating new Entities and simultaneously adding them as children:

add_child: (width, height, draw) ->
  child = new Entity width, height, draw
  @children.push child
  child.parent = @
  child # return `child` so that we can do stuff like `collection = scene.add_child 30, 30`

You might want to create another class that wraps up some common functionality as creating the top level Entity (typically called Scene) and setting its canvas as the one actually displayed in the document and setting up animation loops and so on. I’ll leave that as an exercise for the reader (hint: look at the fiddles, there you have the basics).

Caching

If you draw expensive things in your objects (and some things in canvas are pretty expensive like shapes with multiple gradients/shadows), you might not want to redraw them 60 times per second. Our architecture allows us to prevent that rather easily.

Again we add two more attributes:

# This is what the user sets
perform_caching: no
# This tracks whether or not we should render
is_cached: no

Now let’s modify our render function:

render: ->
  return @canvas if @perform_caching and @is_cached
  ctx = @canvas.getContext('2d')
  ctx.clearRect(0,0,@width, @height)
  @draw(ctx)
  @is_cached = true
  @canvas

We skip all the work when caching is enabled, since the canvas still contains all that was drawn into it.

Wrapping up

And that’s basically all there is to it. There are a myriad of features you can add like more transformations apart from rotations, primitive entity subclasses (think something like Sprite entity), etc. The complete class is here:

What bothers me about ACTA, SOPA, etc.

Tue, 07 Feb 2012 14:19:52 +0000

There is a significant problem with these laws (acts, agreements, whatever) even if you don’t care about IP legislation at all.

The current entertainment industry arose under a certain set of conditions. These condition have changed and the industry is failing to keep pace¹. So instead of transforming into something modern they attempt to change the conditions back to their outdated state via the law.

Let me make an analogy: imagine that Catholic priests started lobbying for the state to ban atheism because they were losing their jobs. The current legislation is the same thing for the entertainment industry.

Many people view the current protests as some sort of hippie free-lunch² absurdity. What is in fact at stake is however a core value of capitalism: if you can’t make a profit with your product, you don’t make the government protect your market, you make your product better or you shrivel up and die.

Actually it’s not even doing so bad, but that’s a separate issue.
The Pirate culture tends to elicit such views with slogans such as “Sharing is caring” .

I don’t believe that 2012 will be the end of the world,...

Sun, 01 Jan 2012 17:04:28 +0000

I don’t believe that 2012 will be the end of the world, but it’s a fun topic.

So: Good luck with surviving the apocalypse and any other similarly worthwhile endeavors in which you may partake! Happy 2012!

Zdeněk Miler1921-2011

Wed, 30 Nov 2011 21:34:00 +0000

Zdeněk Miler
1921-2011

Last words

Thu, 05 May 2011 00:14:00 +0100

Last words:

Airdrie, you were my best friend and my closest connection. I don’t know what we’d have been like without each other, but I think the world would be a poorer place. I loved you deeply, I loved you, I loved you, I loved you.

Those are one of the most beautiful and haunting words of a dead man.

Jesus' Game

Mon, 28 Mar 2011 23:51:00 +0100

A question I’ve often thought about is why is it that people that don’t believe in God are often not dramatically evil or immoral. I’ll take a look at one of the famous parts of the New Testament, Jesus’ Sermon on the Mountain. Many smart people have written much about it. However, some aspects of it are still very hard to understand and even harder to implement in your own life.

The passage I would like to discuss is Mathew 6, 38-48:

“You have heard that it was said, ‘An eye for an eye and a tooth for a tooth.’

But I say to you, Do not resist one who is evil. But if any one strikes you on the right cheek, turn to him the other also; and if any one would sue you and take your coat, let him have your cloak as well; and if any one forces you to go one mile, go with him two miles. Give to him who begs from you, and do not refuse him who would borrow from you.

“You have heard that it was said, ‘You shall love your neighbor and hate your enemy.’

But I say to you, Love your enemies and pray for those who persecute you, so that you may be sons of your Father who is in heaven; for he makes his sun rise on the evil and on the good, and sends rain on the just and on the unjust. For if you love those who love you, what reward have you? Do not even the tax collectors do the same? And if you salute only your brethren, what more are you doing than others? Do not even the Gentiles do the same?

You, therefore, must be perfect, as your heavenly Father is perfect.

Before I get to the text itself allow me to take a bit of an excursion to another famous and well discussed problem: the Prisoner’s Dilemma. This is one of the fundamental problems of Game Theory. Here is Wikipedia’s take:

Two suspects are arrested by the police. The police have insufficient evidence for a conviction, and, having separated the prisoners, visit each of them to offer the same deal. If one testifies for the prosecution against the other (defects) and the other remains silent (cooperates), the defector goes free and the silent accomplice receives the full 10-year sentence. If both remain silent, both prisoners are sentenced to only six months in jail for a minor charge. If each betrays the other, each receives a five-year sentence. Each prisoner must choose to betray the other or to remain silent. Each one is assured that the other would not know about the betrayal before the end of the investigation. How should the prisoners act?

Imagine you were one of these suspects. I presume you would be facing a tough moral decision. Ten years spent in prison is a big chunk of your life, and you can’t be sure how your accomplice will react?

It is well established that the rational¹ thing to do in a Prisoner’s Dilemma situation is to defect. In fact it is a strictly dominant strategy. For some time, this result turned out to be quite a wrench in the wheels of theories on why and how people cooperate with each other. It seems inconsistent with the notion that people are (mostly²) rational beings.

Take a moment to consider how you feel about the fact that human cooperation is irrational - that in fact, by helping others you are making your own life worse. Not exactly cool, is it?

Thankfully, Keneth Binmore comes to our rescue:

A whole generation of scholars swallowed the line that the Prisoner’s Dilemma embodies the essence of human cooperation… Rational players don’t cooperate in the Prisoner’s Dilemma because the conditions necessary for rational cooperation are absent³.

Doesn’t look that bad for the human race after all. But it answers the question I’ve started this essay with: Why don’t atheists sin a lot more? Why do we know pretty decent people who don’t believe in God? Why aren’t even satanists epically evil? If you are absolutely convinced that there is nothing greater than us, there seems to be no reason to adhere to basic morality, is there?

In a lot of situations behaving morally is rational. Or in other words, being good to others is in fact good for us (in a very materialistic sense). Jesus refers to this when he says: “For if you love those who love you, what reward have you? Do not even the tax collectors⁴ do the same?”

What I’m trying to get at with this digression into Game Theory is that Jesus tries to tell us that as Christians we need not be always rational - or specifically, not always rational in game-theoretic terms.

If you look at how this would turn out in the Prisoner’s dilemma then yes, at first you would get the sucker’s payoff. But now imagine a world where most people would try their best to turn the other cheek and when in a prisoner’s dilemma you would know that the other person will cooperate with say a 60% probability. Then defecting loses its strict dominance and you would be more likely to choose the option that maximizes social welfare, that is an option that’s better for every player taken together. Hence I believe that not only does choosing this “irrational” lifestyle make sense morally but also it in fact may affect other people’s lives and actually contribute to make the world a better place.

Also:

My thanks to Joachim Veselý for proofreading this essay.

What exactly constitutes rational behavior is of course debatable; in Game Theory it generally means to maximize one’s payoff.
Whether or not you consider humans as rational depends on which psychological theory you subscribe to and what notions of rationality you hold, but I would argue that humans are more or less rational in decisions that matter.
Imagine that in the prisoner’s situation if they both cooperate then they will be set free for lack of evidence and if only one defects he will get minor jail-time, then cooperation is the dominant strategy. Binmore argues that this type of situation is far more common in real life then Prisoner’s Dilemmas and this fact is why we cooperate in most situations.
Tax collectors were considered the scumbags of Jesus’ time.

All the best in 2011! A few technical details: I wrote a nice...

Thu, 30 Dec 2010 21:38:18 +0000

All the best in 2011!

A few technical details: I wrote a nice piece of js/canvas code to make the rendering (available here). I originally planed to do an ant colony intelligence inspired animation (so the source code still contains a function to draw an ant).

Popular passwords in 2010

Wed, 15 Dec 2010 01:26:00 +0000

A long story short: I got my hands on a data-dump of 184 550 hacked usernames and passwords from Gawker. With a bit of data-analysis magick I did a bit of research.

20 most popular passwords

Password	Count
password	1914
lifehack	648
qwerty	412
abc123	328
monkey	294
consumer	267
letmein	241
trustno1	240
dragon	229
baseball	211

Password	Count
superman	203
iloveyou	201
gizmodo	194
sunshine	192
princess	182
starwars	180
whatever	179
shadow	172
cheese	153
nintendo	148

Now the first entry is rather shocking: the most used password is also the most obvious password possible. A full 1% (and 0.11% of the full DB; see bellow) used this password! What didn’t exactly fit on the list was that another 111 people used ‘Password’ and 129 people used the slightly better ‘passw0rd’.

“lifehack” and “gizmodo” are both names of the sites these passwords were retrieved from. Not very secure. ‘qwerty’ and ‘abc123’ are also extremely obvious passwords. 15 of the remaining passwords are single words contained in any dictionary.

Password Strength

Next I marked the passwords with these simple rules:

+1 point for each of: uppercase characters, lowercase characters, numerals, punctuation
+1 point for passwords longer then 7 letters
0 points if they were part of the username

The following table shows the distribution of these strengths.

Score	Count	Percentage
0	8567	4.6%
1	96738	52.5%
2	65876	35.6%
3	12781	6.9%
4	586	0.3%

Now a score of 1 is very bad - it is the default unless you use the same password as your name. However a staggering amount of people use these very unsafe passwords.

A new year’s (a bit early, but well) promise should be a bit more online safety for all of us.

A few notes

The dataset is available here and the details of how it was obtained are here.
The full db contained ~1.5M records out of which the attackers obtained ~1.2M (presumably randomly). They proceeded to crack the week encryption algorithm of ~200K accounts. This I do not assume was completely random. Out of this I got a total number of 184 550 records.
The site apparently stored only the first 8 characters (sic!) of the password. This suggests caution with passwords of length 8 because these were possibly truncated. I set those shorter then 8 characters in an italicized font. However apart from “lifehack” which would be probably “lifehacker” all other passwords in the top 20 seem as complete words or phrases. As an aside a strong password is generally considered to be at least 16 characters long.
I would like to perform more research into password sharing with this dataset but I don’t have the time for that right now. I’d be interested if someone will investigate.

Designing a departures board with CSS3

Fri, 05 Nov 2010 15:54:00 +0000

Warning: Technical article ahead. Beware.

As I’ve written before, CSS3 is very good for designing things. Today we’re going to use it to do some fun pixel pushing. Behold our inspiration.

This article contains features and examples that do no work properly in the dashboard. Please follow to the version on my site.

Markup

Simple. Use any thing you like. We will be using a div called .board.

The basics

We’ll start with designing for Webkit for now. First the basic shape and color.

.board {
    padding:  5px 10px;
    display: inline-block;
    background: rgb(30, 30, 30);
    -webkit-border-radius: 3px;
    text-transform: uppercase;
    color: white;
}

yields:

London

Shadows

Now let’s make the dark shadow effects from the top and sides of the box. For this we’ll use multiple inset box shadow declarations:

-webkit-box-shadow:  
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9);

Gives:

London

Spinner

These sort’s of displays use a spinner and thin boards to display different strings. When you go to a train station or airport (that still use this magnificently old tech) you can see the dividing line between the two halves. We’ll recreate that here.

How? Using a pseudo element with thin boarders.

.board:before {
    border-top: 1px solid rgba(0,0,0,0.4);
    /* this line will be barely visible, but that's how we want it */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 0px;
    position: relative;
    /* you might need to ajust these positions to your layout */
    width: 110%;
    left: -9px;
    top: 11px;
    content: " "; /* we have to set this, otherwise it won't be visible */
    display: block;
}

This is how it looks:

London

Border

To make the spinner look realistic we have to also pay attention to the bottom border. It has to have a 3D effect an look plastic enough. We’d also like to see the board bellow it. So we modify our shadows definition and add a border.

border-bottom: 1px solid rgba(0,0,0,0.7);
-webkit-box-shadow: 
  inset 0 -1px 0 rgba(50,50,50,0.7), 
  inset 0 -2px 0 rgba(0,0,0,0.7), 
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9);

London

Lighting

Light’s and shadows are a crucial part of any visualization. So as a finishing touch we add a few light effects (with a subtle gradient and a few more shadows):

-webkit-box-shadow: 
  inset 0 -1px 0 rgba(50,50,50,0.7), 
  inset 0 -2px 0 rgba(0,0,0,0.7), 
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9), 
  /* This one is new and adds a light edge on the bottom*/
  0 1px 0px rgba(255,255,255,0.2); 
background: -webkit-gradient(linear, center top, center bottom, 
  color-stop(0.0, rgba(0,0,0, 1)), 
  color-stop(0.05, rgba(30,30,30, 1)),  
  color-stop(1.0, rgba(50, 50, 60, 1)));

Which yields:

London

Conclusion

As you can see, CSS3 enables us to do with a few lines of code some incredible pixel-pushing. So here’s the complete code with syntax for other browsers and fallbacks for graceful degradation:

Let me know if you’d like more articles like this.

Edit: For an animated version see this project by Paul Cuthbertson.

If you liked Inception and aren’t a huge fan of Escher...

Tue, 26 Oct 2010 14:13:13 +0100

If you liked Inception and aren’t a huge fan of Escher yet, now’s the time to start.

More pics:

Ethics on the net

Mon, 14 Jun 2010 20:43:00 +0100

The internet is an interesting place. It’s also a very new place and as such forces us to pass moral judgments on our actions and on actions of others in situations that don’t necessarily have equivalents in the real world.

Let me give you a few examples:

torrents, p2p, file-sharing, intelectual property and piracy: an incredibly complex issue with many shades of grey. There are types of piracy that are undeniably wrong and types that are undeniably right. The whole issue is complicated by the huge complexity of the whole media economy, no credible numbers or statistics and a dependency on obsolete law with very little correlation with any natural ethics.
(grey-hat) hacking: the act of showing the easiness of compromising someone’s system (especially army or energetics’ systems) goes a long way of making these systems more secure. Another fact is that most people have no idea how much they rely on systems that are spoofed extremely easily (like email - you knew that it takes like a minute to send a fake email from your address, right?). On the other hand the law is clear on this - a breach of another’s system is clearly illegal in most legislations. Obviously walking the line of morality can be difficult in this area.
privacy: The internet is turning out to be a valuable tool in sharing information. Yet there are many individuals that seek to control the internet and use this information for commercial purposes, or worse, for purposes of oppression of your freedom. What are the ethical borders for sites on privacy for their users? How should we treat the net - everything we post should be considered public?
responsibility for your word, netiquette: the net grants a certain type of anonymity that doesn’t enforce people to be responsible for what they say in the same way as in the real world (that is through shame and law). My view is that the general and most noticeable abuse of this reality (eg. youtube comments) does not enrich us in any way - but is probably the price we pay for having a medium where free speech can be more free than ever before.

It is very important to think critically about our actions online and how it impacts the world around us. Thanks to amazing technologies the world is becoming an ever more holistic system were every action we take can influence the whole - that in turn makes ethics incredibly important in this environment. It is also crucial to try to see more angles about issues before deciding whether they are right or wrong.

UX considerations of using Flash

Tue, 16 Mar 2010 11:07:20 +0000

There has been a lot of discusion around the web surrounding the use of Flash on websites. The discusion was geared mainly about the availability of Flash on some platforms and it’s general slowness on others.

That is not my point today.

What I do want to talk about is the value of Flash to the most regular user - the one who can run it reasonably fast and has it installed on his computer.

I’ll start with the benefits. Less work for the developer in bringing rich capabilities to inferior browsers. If you still use Internet Explorer I think you probably wish Flash was used a lot more. Especially today when developers are getting these dangerous ideas about things like graceful degradation and “your experience is only as good as is your browser”. Also if the developer can spend less time optimizing and testing on every browser he will have more time to polish other aspects of the app. Next I’ll mention the obvious: there are things that cannot be done without a plugin - you might as well use flash for them (full screen video and progress with uploading being the most prominent examples at time of writing).

Now the negatives: although Flash is improving in this area, I argue that it has small and hard to spot usability issues. These can be often circumvented with using a combination of html and Flash (but thus loosing some of the benefits). First imagine a login form in Flash. Now if you try to use 1Password or any other password manager to store and remember that password for you you will be disappointed. They can’t detect the form to be a login form. Neither does the browser’s native password manager kick in. This forces you to set a password that is easy to remember and thus making it much less safe.

Also, almost shamefully so, somehow Flash does not support undo when editing text. Again this is not a huge problem in most cases (since Flash is usually not used as a text-editing environment) but it is another dent in the UX facade that can irk your user.

However for me the most irking thing about a lot of Flash apps is scrolling. I’m using a MacBook and I’ve grown so used to the comforting double finger scroll that I almost forget how to use a scrollbar. That is until I use a Flash app. Somehow Flash scroll views don’t seem to support mouse wheels out of the box. This issue is somehow overridable but rarely does this happen.

There are other issues that I might have missed; the point is however when deciding what technology to use don’t forget to consider these smaller however important points, especially when designing software that people will need to use on a frequent basis (if you’re doing a casual game then Flash is quite probably perfect for you).

Designing with CSS3

Thu, 11 Mar 2010 10:57:00 +0000

Designing in an image editor

Designing compelling web pages can be a daunting task. Traditionally the method would start in an image editing application (although quite a lot of people have a pen & paper phase before that). The problem with this approach is the general lack of a proper tool for designing websites. Most designers today use Photoshop; either because they are used to it before they started with web design or because of it’s status as a industry standard. However the problem with Photoshop is that it was never designed as a tool for this kind of job. The tool that was designed for this type of job - Fireworks - seems somehow out of Adobe’s focus while feature creep slowly comes in to choke the program to a slow death (meaning that it’s been unusable since CS3 and frankly what we expect UI-wise has evolved since). There are many other tools out there, but few seem specifically designed for this type of job (with the notable exception of Opacity).

The reason this is important is that the web defines it’s own visual language by which designers either must or at least very often should abide to - things like links being different from other text or headers being of a larger type. However we also have to deal with flexibility - we typically need our design to be usable in various conditions like varying screen sizes, resolutions, quirks of CMSs etc. Another important aspect is the interactive part of web pages - unlike an image the web page changes when the user interacts with it (if only setting hover states for links). Some designers (typically beginners in web design) believe that the job is done at the moment they send the coder the finished PSD file. However that’s when the real design challenge begins.

Designing in the browser

So if not design in an image editor then where? How about the web browser? It supports a simple visual language out of the box, it can simulate perfectly effects such as flexible window sizes and it can be extremely interactive. Now a few years ago this proposition would seem quite insane. The browser didn’t support many of the visual elements and effects that form essential parts of almost any UI design out there - elements such as subtle shadows and lightning effects to give UI elements the appearance of real objects, gradients to blend colors smoothly and naturally and powerful transparency settings for objects to make the site appear appealing.

Browsers however evolve incredibly fast and with good ones (to make this clear: I’m speaking of Webkit browsers here) you can do this stuff a lot simpler then you can in Photoshop. Of course there is still a myriad of things you still can’t do with a web browser (my favorite being applying a simple Noise filter for a textured background), but it does cover the most needed visual elements uses in todays designs.

Plus of course the added benefit of having a reasonable stylesheet prepared that should require much less time to repare for production (the main job being preparing to work in not so good browsers).

I hope you consider this argument and maybe try this approach out at your next project (also check out this article for more info and an example).

A few tips

What I want to touch on however is that it might not be the best idea just to jump into TextEdit and hack away at your CSS. Since you are now going to spend much more time working with the language you might as well make it a bit easier. One of the things that has been around for some time are CSS abstraction languages which aim to provide a higher level language that then compiles into CSS (the best known is probably SASS). You may have heard about them or even tried one. However for me none of them really sticked when I was working the traditional way. However their better structuring and more extensive commenting facilities come in very handy when the CSS is not only an implementation of a design, but the design itself. The one I would generally recommend is named LESS and it’s main benefits include pretty much the same syntax as normal CSS. That means you don’t need to learn almost anything new. With that comes the very handy TextMate bundle that compiles LESS files on save. This works very nicely. I also would recommend using the LESS3 toolset (by yours truly) which abstracts a lot of the cutting edge quirks and makes your stylesheet automagically a lot more old browser friendly.

Next you should definitely make friends with the Webkit’s Web inspector. ~~Just right-click anywhere on your page and select “Inspect element”.~~ This is how to enable it in your browser. Explore and hack away.

I hope that this was inspiring to you and please if you indeed use some of these techniques, let me know about your experience.

"The iPad attempts to simplify computing not by some stroke of magic, but by doing less. You can’t..."

Tue, 02 Mar 2010 14:21:34 +0000

“The iPad attempts to simplify computing not by some stroke of magic, but by doing less. You can’t have full multitasking and multiple apps oncscreen at the same time and apps installable from everywhere and compatibility with Mac OS X and a physical keyboard AND simplicity.”

- Neven Mrgan

This is one of the nicer summaries of the Tablet.

Facebook login

Fri, 12 Feb 2010 14:15:00 +0000

The internet was stormed yesterday by the occurrence of a ReadWriteWeb article that is about the Facebook login process and quickly hundreds of completely confused users posted comments about their hate of this redesign of the Facebook login page.

As Neven Mrgan correctly says, the amount of information people were required to ignore is staggering:

People google for “facebook login” to log in to Facebook. I understand that they don’t use bookmarks and don’t type in facebook.com, but note that they don’t google “facebook”; they google “facebook login”. Clearly users don’t even see logging in as a function of the site itself; those are separate in the users’ mental maps. This is perhaps partly explained by the excess of websites which use Facebook as their authentication system, but it’s not the whole story.

They then click the small google result which says “News results: ReadWriteWeb” expecting they’ll be taken to Facebook.

They land on a page with an absolutely enormous heading saying ReadWriteWeb, below which is a headline, a byline, and endless paragraphs of what is even at the quickest glance obviously a news story.

They scroll all the way to the bottom of this completely un-Facebook-like page, with not a single thing in the way that would indicate this is a Facebook redesign.

They then go past the big heading saying Leave a comment and instead focus on the small link which says Optional: Sign in with Facebook. And don’t tell me these folks searched for “facebook” or “login” on the page itself.

The implications for the design and UX community are staggering. How are you supposed to design for this? It seems that the whole webapp metaphor is fundamentally flawed for a lot of users.

However there is a flickr screenshot of the facebook login page with similar comments. When I was quickly reading through these I recognized one of the commenters. I don’t know him personally but he clearly is an advanced computer user (probably dependent on it for his living). Yet he is confused with not being able to login into the tiny screenshot. This made me think of two possible explanations:

Statistics - Facebook has about 80 million users (I believe). So a few hundred comments on a few websites make for about 0.0001% users confused. There are probably more who didn’t post anything, but still a very small number. These people could be high for all we know or just this is a quantum level error of the transmission :)
Joke - somebody’s malware idea of a joke. It wouldn’t surprise me if somebody created a virus that would take peoples Facebook accounts and post helpless comments on top Google results for “facebook login”. The internet saw weirder things happen.

Anyway if it turns out to be a case of real honest user confusion, UX may as well change quite radically.

I wonder how many people notice the difference between these two...

Thu, 11 Feb 2010 23:52:33 +0000

I wonder how many people notice the difference between these two in normal life (especially considering what people are able to miss). Would you normally notice the difference between two different types?

Sticking a “that just works” on an error page can...

Sat, 16 Jan 2010 17:53:47 +0000

Sticking a “that just works” on an error page can make people that would normally love your product extremely angry at it.

Try avoiding that.

The age problem

Fri, 15 Jan 2010 15:43:00 +0000

The age problem:

A quick post about age discrimination by Dave Winer. I recommend reading the discussion below the blog post - it reveals a lot about a problem I believe will become much more serious in the years to come.

This comment by jawbaw is interesting:

In general I have noticed there is also a trend for people of the same age to stick together and reject other age brackets. Kids only hang out with kids of the same age, not older or younger.

He notes this as a particular disturbing trait of western culture. The general disrespect for people of other ages is astounding and also a lot more irrational then for example hatred of people of other cultures. The comparison is also interesting because most society (often hypocritically) scoffs at cultural racism but age based insults are taken as norm.

Google's dispute with China

Wed, 13 Jan 2010 03:07:02 +0000

Google's dispute with China:

Google just reported several extremely interesting things:

China launched a targeted and sophisticated attack against Google’s infrastructure (emphasis mine). I dare to speculate that China is following Russia’s lead in creating a highly qualified cyber-warfare unit and is not shy in using it.
Google (apart from posting it to the public) claims to have reported this to US authorities. These have traditionally ignored cyberterrorism. However this seems to be the clearest case of government endorsed attack to date. Lets hope that the US chooses to do something.
Google decided to revert it’s controversial decision to censor it’s Chinese results. This is clearly a retribution of some sort. Google also writes that it is prepared to leave China for good - clearly a statement of not being threatened. It is also quite a powerful threat.

Imagine if Google suddenly stopped working. I presume since you are reading this blog you would be fine. But there are millions of users for whom Google is the internet. Plus a lot of Chinese users (probably including government officials) would loose their Gmail data and their calendars.

I imagine China is facing a tough decision with this.

Merry Christmas and a happy new year!

Wed, 23 Dec 2009 13:25:04 +0000

Merry Christmas and a happy new year!