Da Gampa's Code

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.

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 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 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:

1. 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.
2. They then click the small google result which says “News results: ReadWriteWeb” expecting they’ll be taken to Facebook.
3. 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.
4. 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.
5. 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:

1. 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 :)

2. 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.