Getting ready for UX Spain!

Yes, I owe myself a couple articles on whether designers should be able to code (not exactly earth-shattering) and air crashes and their UX implications (hopefully this one will be more original 8-) ), but they will have to wait: this upcoming weekend I am attending the first edition of UX Spain, which will be a nation-wide meeting for UX professionals in Spain.

I have been thinking about trying to create some kind of small scale meeting for UX professionals here in Barcelona for some time; there are quite some UX people around, and I think we should have some hardcore UX community event of sorts, more focused on spreading knowledge and thoughtful discussions (yep, I am jealous of the fantastic-looking UK and USA ones that I am hearing about on the Internet)than the usual “I-am-looking-for-work-and-networking” teaser-like meetings. I am hoping I will meet some like-minded people at UX Spain and maybe we could finally kick-start my idea?

Anyway, If you are attending UX Spain and would like to talk about UX and its fascinating implications feel free to contact me! just say “Hi!” and I’ll be glad to share stories and thoughts. If you’re just into mindlessly adding some more contacts to your LinkedIn account, I might not be THAT interested.

Data vs. Information in videogaming interfaces

A common problem in complex interfaces’ design is stopping at data display without going deeper towards information. To achieve a great user experience, we have to pull through data.

Those of you who follow me will know about my obsession with data vs. information (and deeper structures like knowledge and wisdom). This is a touchy subject, but suffice it to say that I understand data as just the representation of a value, while information is data presented in a context as to affect behaviour.

Problem arises when interfaces dealing with complex systems, where a lot of data is involved, stop at just data display, leaving transforming this data into information up to the user.

list of attributes of a sample player from Football Manager 2011
List of attributes for a player from Football Manager 2011, a football management game: is he a good player? how would he compare to others in your team? Football Manager tells you which of these attributes make up for a good defender as “hints” while loading, but omits this information here

People use systems to help them complete tasks, particularly data-crunching (where computers excel) ones. It can be very difficult to create an intelligent system that really interprets data, but heuristic strategies can be deduced from observation and then algorithmically applied to the system.

It is quite easy to spot a data-centric interface: it usually comprises some kind of long table with lots of different values (numeric is the norm here). If you are lucky maybe there are some ordering actions available, and even some filtering. From then onwards you will have to fight with the data to get the information you need. After all, like Ronald Coase said, “If you torture the data long enough, it will confess”.

list of potential brides and their attributes in Crusader Kings 2
Marrying is a critical task in Crusader Kings 2, a medieval rpg-strategy videogame; although we have a lot of values and icons on potential brides on display (seems medieval Meetic was highly advanced)… How can we understand what makes up for a “good catch” from this interface?

How could we, as designers, help users from becoming data-torturers and transform them into the much more pleasant information-gatherers? When you notice that your interface has the traits of a data-centric one, ask yourself:

  • Why am I presenting this data to my user?
  • What do I expect a veteran user to do with this data in order to complete his task?
  • What behavior would this information trigger?

After going through these questions you will have some ideas on how to pre-process data and start turning it into information.

If you are not able to answer these, you should start by observing your users. Ethnography rules, but online forums can also be an invaluable source of information: inexperienced users turn to forums for advice, and veteran users teach their (usually heuristic) strategies. You can get a lot of insights there.

I plan to expand on this topic in future articles showing some concrete examples: Crusader Kings 2 and Football Manager might be good candidates, as you can see from the figures illustrating this article. Stay tuned!

Trying out new web fonts

I have been having problems with my blog’s fonts since day one. I am all into the idea of CSS3 web fonts, and being a humble little blog I was looking for some nice free fonts hosted on external reliable servers that would support the “wireframy” look of the site.

I browsed Google’s webfonts service extensively and found a couple of fonts that I really liked. Permanent Marker had that bold and rough feeling of quick handwritten titles in sketch wireframes, and Muli was a lightweight paragraph font that added to the “airy” look of the site.

sample of header using Permanent Marker font
Permanent Marker was rough and vibrant, and looked good and legible at big sizes
paragraph sample using Muli font
Muli was simple, airy and easy to read at paragraph sizes

I designed my site using these fonts, and was quite happy at first. But then, with cross-browser testing problems arose.

First, Permanent Marker would not look good in webkit’s Chrome (due to sub-optimal anti aliasing) and older versions of IE (which I do not really care about a lot). I have been looking for alternatives, and though I have found a couple I really like and might suit the deed I do not think they would look great in Chrome anyway. Maybe some next Chrome version would offer better anti aliasing support? We’ll see, and I’ll keep playing with title fonts for a while.

Chrome vs. Firefox anti aliasing on Permanent Marker blog title
Sample of Chrome and Firefox anti aliasing: notice the sharp aliasing effect on G and E, for example

The problem with Muli was different; Opera Mobile 11.50 would not display “strong” text. You see, even though there is a Muli bold version it has not been offered on Google webfonts service yet. Therefore, browsers were creating faux bold characters “on-the-fly”, and it seems Opera would not display them. I tried some solutions but none seemed to work and I ended up filing a bug at Opera. A pity, because I think Opera Mobile is the best browser for Android smartphones. I was worried but I thought I could live with that.

Things got worse. New Opera Mobile (11.60) launched earlier this week, but the problem with Muli was still there. Moreover, I noticed something with Firefox. I suddenly realised the bold characters were gone in Firefox as well! Maybe has to do with the 10.0.2 update? I am not sure, but Firefox really matters to me. My advice: be very careful with faux alternative font weights with web fonts!

So, tl;dr, I changed body font to Open Sans. It is a little heavier than Muli, but nice and elegant. Moreover, it comes with bold weight version, so I hope there will not be any problem with that. Expect some other typographic changes to this blog in the near future… particularly now that The Elements of Typographic Style is in my reading list!

What do we deliver?

I have been working on my portfolio recently, mostly because I read a nice portfolio rant at LondonIA (sorry, you must be a LondonIA member to read it). It basically said that in order to get a job you have to share some work in advance. After all, how are they going to trust you if we cannot see what you have done in the past? (we humans do this all the time: expectations are set based on previous experience).

Working on your portfolio has you thinking over about your professional career. It is a wortwhile exercise, but be prepared to embarrass yourself over your early work. We all learn by doing, and we all make mistakes. Focus not on what you did wrong, but on what you learnt by doing it wrong. That would be my advice.

One thing I noticed was my transition from a document-centered craftsman into an experience-centered one. When I started in the field I was very worried about the document itself (probably because I come from an engineering background where blueprints are suppossed to be an objective way of describing products), trying to document my work as exactly as I could and having it comply with my (complicated) company’s standards.

Little by little you can see I stopped creating specification documents and started going for sketches and wireframes more and more. I understood that experiences are my deliverables, and documents are just communication tools. We have to create them because we have to explain our reasoning to our clientes and co-workers, and because we have to translate our ideas to other people, and documents are a good artifact for that. But nobody makes money out of documents as such. And we have to create value. Well, at least if you want to make a living out of UX.

So, why many of us are obsessed with documents as deliverables? I was talking about it with a good ol’ colleague, and what I got out of that conversation was that people on big companies have to justify their salary, and the easiest way to do that is by creating documents. Bigger documents seem to justify bigger salaries. Meanwhile, people fighting for their lives in smaller companies and start-ups are more worried about earning their salary (i.e. making real money thanks to good user experiences) to stay alive.

My point: we are user experience designers, we deliver experiences. Do not obsess with documents, obsess with experiences (perceived by users). Documents are there to communicate, they are not our deliverables. Have them be great communication artifacts, but go with the least amount of effort that can communicate your ideas.

How long does it take to be “good”?

I have been working on my online portfolio these days (it is currently set to “private”, but expect it to go public next week). Browsing through your old files looking for samples of work is like a trip down memory lane. A bad trip.

I was looking at some of my past work, particularly my first steps into usability and UX, and thinking “mmm… this could work better that other way… I should have done things differently there… looks OK, but could have been great…”. You know the drill. I am the kind of guy who always thinks his last work was alright, but looking back I always see ways to improve.

I understand that it all comes down to experience and knowledge, and you get these with time (and effort). But I think that this is a question that arises often when you are starting your professional career: we are all juniors at first, but how long will it take before we can be “good”?

If you take a look at the industry, a lot of recruiters and professionals out there start calling people “senior” after five years experience. I think calling that “seniority” is way optimistic. I have met very few people I would call “senior” in my life, and it had mostly to do with effort (and obsession to some extent) than pure experience. You can learn a lot from breathing UX 24-hour a day, while keeping at so-so level if you just UX for a living. But all things considered, it seems five years looks like a consensus on time needed to be considered a professional.

Why does this “five years” stuff rings so much to me these days? Because I am starting to realise that I have been into pure UX for about five years, and I have been feeling this sensation of going through a “turning point” lately. I will not add “senior” to my job title, but I know my stuff, have my share of UX stories to tell, and have gone through some failures and some successes. So maybe five years are OK to become a professional at your job. I prefer the word “craftsman”.

But there was also another thing that had me thinking about this “five years”. If you know about me you would know that I really admire Chris Coyier. The guy knows about HTML/CSS/PHP/Wordpress inside out, has some appreciation of usability/UX, loves semantics… a really good front-end coder with design skills and always sharing his knowledge with us poor apprentices.

Thing is, I was browsing his front-end programming site (CSS-tricks) lately looking for some stuff, and came to find this article “My 5 Favorite WordPress CSS Tricks“, dating back to 2007. I read the first one and felt an immediate embarrassment. Urghhh… it was the same thing that happened when I was looking at my first works. His first advice was completely wrong, and I am sure it would embarrass the hell out of current-day Chris Coyier (it was about suggesting using an “em strong” CSS style instead of H’s, given that it is much easier to create bold italics than headers in WordPress html editor: a semantic hell). It seems CSS-tricks started in 2007, so it has been around five years since Chris Coyier started going “public”. So, in five years Chris went from some good hands-on knowledge of his field to getting all the finesse he displays know.

My summary? It will take you around five years to go from having some shallow knowledge about your field to becoming a good “pro”, if you put real effort into it. If you think that it is a lot of time, you can just keep wondering whether it is worth until tomorrow. It would then take you five years and a day.