Blog discontinued… but there’s a new one!

So, I have some bad news here… this blog is discontinued and will not be updated again :-(.

But wait, I have some good news too ;-)! I have started my new self-hosted blog at Javiergala.com. Go there for my latest articles!

See you there!

Learning HTML and CSS with CSS tricks videocasts

This blog is still “resting” because I am still busy. I have been doing some freelance work (I think I will be posting some of the wisdom about e-commerce I got out of it soon here), but mostly I keep learning. I am determined to learn the “practical” tools of my trade, that is HTML, CSS, some PHP, a little WordPress stuff… I have noticed by now that the little I have already learnt has improved my understanding of web design and the quality of my deliverables (it might seem ridiculous given its “sketchy” look, but as of now I cannot start wireframing in Balsamiq without using grids), therefore I think I am on the right path.

I agree that good professionals have the responsibility of sharing their knowledge with the pro community to improve our craft. Alas, I do not feel I have this responsibility upon me so far, and that might be one of the reasons I write so little here, and most of what I write is a mere review of other people’s work. But I have been thinking that maybe I can help others learn given my recent experiences, and I plan to start a series here about it. Soon. In the meantime, I will offer just a good starter.

CSS tricks videocasts for HTML/CSS beginners

Well, not absolute beginners, I must say. My first advice is to learn the very basics of HTML/CSS on your own with any nice book / online course / whatever (although there is a particular videocast that can help you with that). I will give some advice in the future about that too, but I do not have a good single resource for this. The internet is your friend, libraries and bookstores too depending on your budget… in these times I think that the question is not “How do I learn this?”, but “Where do I start?”. Information is plentiful. Usually too plentiful.

Once you know some HTML tags and CSS properties you should learn what to use them for. Get real. And here comes my golden advice about it:

Go to CSS-tricks. Proceed to videocasts. Browse.

Chris Coyier‘s videocasts are really good. They can be a little chaotic from time to time, given the guy is really a master in his field and sometimes deviates from the main concept and rambles about minor points (that you will start worrying about later on, but might seem too minor at first), but they are priceless. They are mostly unedited, and you will observe him fumble, debug and correct. You will see a true professional doing his job. It can be as fascinating as watching an old french impressionist painter dressing his canvas with the colour of nature, but instead of turning your subjective impressions of light into painting you will be trying to objectively turn a PSD into a working web. Once you get to think about it, it is not that different.

There are a lot of videocasts, and although most of them are really worthwhile they can require very different HTML/CSS knowledge. I will offer you my proposed starting “route” through videocasts.

• Start with 058 (HTML&CSS – The VERY basics). This is very basic indeed, but will give you either a good reminder or some tips on how to start understanding what HTML and CSS are for.
• Continue with 001, 002 & 003 on “Converting a Photoshop Mockup”. If you are pretty new to HTML/CSS they might be a little difficult to follow at first, but they will help you understand a lot about how a front-end developer’s trade: describe content with HTML, describe presentation with CSS (after getting PSD and slicing it), and the sometimes complete with behaviours in JavaScript (particularly jQuery these days). I recall that some time after watching these videos some of the techniques looked a little “outdated” to me, just take into consideration these videos are now (09/2011) almost three years old.
• Go on with 012, 013 & 014. Same subject (“Converting a Photoshop Mockup”), but a more interesting case and some more details. A good follow-up to the previous series.
• Proceed to 071, 072 & 073, “Building a website”. This time Chris starts with Photoshop, creates an HTML/CSS/jQuery version of the site and then implements it through WordPress. Ideally you should study a little about WordPress to fully understand this, but you do not need any deep knowledge.

If you have gone this far then you understand the basics and you will no longer be scared when facing your first PSDs. Well, maybe shaky, but you know you are not the only one trying to learn and improve, and some of the real pros (like Chris) are out there looking to help you out.

Now get your hands dirty!

P.S.: By the way, after learning some WordPress basics I am so ashamed about my WordPress articles… arghhh, I had some real fumbles working with images in my previous posts… well, I am working on my new blog and I will probably “reset”/review content when time for migration comes. Stay tuned. But it will take some time. Take a sit.

Has the social networks’ bubble burst?

When I was working at Telefonica I+D I took the time in 2008-2009 to impart some courses on Online Social Networks. In one of my opening slides I showed some data from top online social network’s value to help people understand the real business value of those services. These were huge numbers, and some people were surprised.

I’ll show some of them here:

• News Corporation acquired MySpace in 2005 for $580m.
• AOL bought Bebo in 2008 for $850m.
• May 2009 investment in Facebook valued it at $10b (that’s 10,000m!).

During my talk I explained that these numbers suggested a new “bubble” effect on Social Networks, given that at that time Facebook had just been able to start getting some positive cash flow, while having around 300 million active users at the time.

My point was: if Facebook needed 300 million users to be profitable, how come social networks are so highly valued?

A couple of years after my talk, there have been some moves in the social network’s arena:

• News Corporation sold MySpace in June 2011 for $35m (with Justin Timberlake, of “The Social Network” movie fame, coming in as part of the deal… doh!).
• Bebo was sold in June 2010 for $10m.
• Friendster, the first really successful social network, which was displaced by MySpace, was sold by $26m and later became a casual gaming site.
• Meanwhile, Facebook was valued at $85b in a March 2011 investment (although we already know not to trust this kind of valuations too much), while Zuckerberg himself states that Facebook has 750 million active users.
• Late June 2011 Google launches Google +, to go against Facebook’s dominance head-on.

So, what does all this tell us? I would go with:

• Facebook has dominated the “general” social networks market, trumping over other options, to become almost a monopoly.
• Social networks are really difficult to monetize, needing a huge number of users (unless you can find a good niche, like LinkedIn).
• Living in this difficult market needs experience & passion. You can’t just buy a social network and expect it to work.
• Google is one of the few who can get into this field. He has had some experience (through Orkut and Google Buzz), has the users and the smarts… though it has enjoyed more success in data-driven fields (search, ads, maps… you name it) than in the mundane human communications (Google Wave anyone?). But at least now we have two contenders and we can have a fight!

What happened to this blog? Ok, I will talk about my real life for a second here…

Sorry for the inactivity. What happened to this blog? I have the #1 excuse sitting here at my side: a lot of stuff has been happening in the real world, and this blog became low priority.

And what happened in the real world?

Well, some things changed at my work’s organization. Some new bosses came, new projects came, and we were all excited to see where this would carry us. Unfortunately, I do not share their views on what User Experience is. Long story short, I decided it was time for a turning point.

I am passionate about my job. I am passionate about building experiences for my customers. I do not believe one pays $10 a month just to be able to use some weird online service just because it looks good, or because the boxes in the homepage are perfectly aligned… I think one “buys” an experience, and to create a good experience you have to research users, understand them, draft your experience, test it and iterate. Creating a good user experience comes from research, test, practice-based wisdom… I do not believe in “experts” or magic recipes, I believe in hard work and learning from research, books, experience, testing, and errors.

I was stressed, with a lot of work to do, not much recognition from my top managers (but fortunately a lot of recognition from fellow designers, programmers, and project managers), and the feeling I was not doing what I really wanted to do, what would help me understand User Experience, customers, people… I wanted more research, more interviews, more conversations… focus on quality based on facts, less opinions… research-design-test-learn…

The part where I talk about the Wroblewski anecdote

In 2010 I was at UX Lisbon. Luke Wroblewski was there. I can’t recall the name of his lecture, but I remember that I found it very inspiring. When the time for questions came some folks asked him what to do if your company does not really believe in User Experience (although they may publicly say they do because it is a good selling point)… well, you know the drill…we guys that are working in an environment where UX is still thought of as a luxury (I would argue that creating an online service without understanding your users IS a real luxury) like to know if the top guys had to face our same problems, and how they did went through that.

Then, somebody stated an apocalyptic scenario: What to do if your company does not believe in UX at ALL? They would not let you conduct research, they would interfere in your work, take decisions by committee based on preconceptions… the guy threw all the problems one can face in a company at once to Luke… would he be able to walk out of that with a good answer?

Wroblewski took some seconds to think about that… it was a horrible scenario. How could someone fight all those problems? He candidly said “Well, life is too short…” and basically told that sometimes you have to go look for greener pastures. We all smiled.

Why this story?

After a lot of thinking I decided to quit my job. I learned a lot there, had good times and bad times too… but I think I have to go elsewhere to keep growing, somewhere that shares my views on User Experience and that values hard work and knowledge over titles and opinions. I want to keep growing, and I want to grow doing something I wholeheartedly believe in.

What I am doing now that keeps me so busy?

I am learning. I love learning. I always wanted to play with Adobe CS. I come from an engineering background and never knew my way with Adobe. Now I can do some nice shapes with Illustrator, apply some effects with Photoshop and finally create a mockup in Fireworks. Then, I went the HTML/CSS route. A long time passed since the last time I HTMLed a website, so I had to update myself. CSS is great! And HTML5 and CSS3 look very promising… also, I am learning JavaScript and jQuery, although I think this will take me a little longer… and my goal would be creating some mobile app by the end of summer by myself! Will I be able? Mmm, that’s the beauty of challenge.

Any future plans?

Now I am into learning, but when summer goes near the end I will look for a move to UK, which is the best UX market in Europe; I have some good memories of London, where I worked creating the Giffgaff IA a couple of years ago. But we will see…

 

 

P.S.: As a result of learning HTML/CSS and the like I plan to get a “real” WordPress site in the near future, someplace where I can play with plugins and styling, so I am not sure about this blog’s future… but I will keep you updated of future developments in that area!

P.S. II: After some feedback (hey, I am a UX guy, I love feedback!, particularly that which hints me on how to improve something) I decided to refine the post and shrink it a little, adding some structure here and there as well. There might be some folks out there that do not know the context of my post, and I would not like them to misunderstand me.

Kotaku redesign, this one hurt

Yesterday I was mirroring some comments about Gizmodo’s redesign, but I must admit I was not a Gizmodo’s big time reader. I usually went there just because some link or the other, and that was all.

Today I decided to allow myself a five-minute recess and remembered the Gizmodo redesign. I browsed around a little and found about other Gawker sites. One of them is Kotaku. I am not a big time Kotaku reader neither, but I sometimes gave it a quick look. Until now.

Kotaku has been redesigned too. It seems the same idiots lovely designers are the culprits, because today Gizmodo and Kotaku look mostly the same. And boy, is this redesign painful.

Oh, Kotaku, I thought we were friends… and now you backstab me!

Previouly a five-minute browse at Kotaku was funny stuff. You scrolled down while doing “information foraging” for images / keywords that triggered my curiosity. The basic interaction was scrolling down with my mouse and some casual click, and in the end you always found a couple of surprising articles. Simple and works every time if you have nice content.

No more. Now you have a big story on your left under a huge story’s image, three little images down there that you suppose would take to some other articles (you cannot see the titles unless you scroll down in my current screen resolution), and if you do not find something interesting there you have to fight with the right side panel.

The right side panel sucks. Big time. Please, try it out. You have to be careful positioning you mouse over the panel, and then scroll. There is no scroll bar. The scroll is clunky. Images in the side panel are big, so you can browse three articles’ titles at most at the same time (thanks to the big ad at the top). Browsing articles now is painful as hell.

At least you can switch to “classic” view with the small “Switch to blog view” icon at the top. It is still quite slow, but will be more like the old times. Somewhat worse, but you will be able to browse some articles at last.

Well, they did not kill the site completely. When I am fed up with browsing the other one hundred sites with gaming news I might end up visiting Kotaku for a while.

 

 

 

The little hint that tells you that your re-design might be off

It seems that Gizmodo has updated its design. At a glance there is some weird stuff about having independent scrolls for the left and side parts of the web, a general “slowness” about it, and this idea about having your sight jump from left to right while searching for titles that look like links.

Oh dear. Well, I’ve coped with popular blogs’ redesigns before, this one would rank as “standard trendy-hip nonsense”.

Anyway, there is something that might tip the Gizmodo guys into thinking this new redesign is a little off.

What about somebody linking to your site at reddit.com with the title “Gizmodo’s complete redesign: A textbook example of how not to do it“, and then this link going to 1838 comments?

Furthermore, Mr. Osuka pointed me to this particular comment by “Seedypete”. If somebody writes this about your site, you’d better give it a look to see its grounds.

I will copy the text here so you do not have to strain your sight too much:

“Heh, marginally funny relevant anecdote. I, like every single other person on the Gawker network, was bitching about the godawful new site redesign. A blogger responds to me and says he liked one particular quote and asked if he could use it. For the life of me I cannot fucking figure out how to reply to him and say “sure,” now. I can’t find the original thread I posted in because the comments are a trainwreck. I can’t just go to his profile and message him directly because the profiles are a mess. I can’t just reply to the message he sent me because apparently putting a “reply” button anywhere in someone’s inbox is some crazy new idea that hasn’t caught on with whatever hack web designer Gawker hired to make this AOL-in-the-90s style abomination. On the plus side the one button that completely works is the ad banner, so if I came to my news site this morning because I wanted to buy a Toyota instead of reading news I am all set, motherfuckers.

The site design is so fucked I can’t even talk to someone else about how fucked it is! That is cracking me up. It’s like a Mobius strip of shit.”

Not that I am suggesting that you should just trash your redesign because some users’ reluctance to change (hey, we all now this is natural and expected), but when people point out that the new design crumples customer interaction I’d probably check it.

 

Designing for wisdom

This new post tries to tie what I was discussing in one of my previous posts (Data, Information, Knowledge, Wisdom) with the common practice of design. It was another article at Information is Beautiful what fired my brain.

It seems that one of their designs won a Wired design competition about re-envisioning medical data. That was what caught my attention, given that I am currently working on some e-health projects. They redesigned a cholesterol level test (you can see his whole post here).

The original design looked like that…

Whereas Information is Beautiful redesign turned it into this…

I really liked their redesign. There is some basic Information Architecture at work here. Formatting is pleasant, the numbers guide our sight through the report (although I would argue that using the same kind of bubbles for the “steps” and the actual data is a little confusing), context information about our results is also displayed (again, I am not sure about their choice of colors and bubbles, some “warning” indication might help, although it might be too stressing), and the “what now” at the end of the report is a good ending to the story.

All in all, it’s a very nice design. I disagree on some details, but given that they have dedicated a lot of time and effort to it and I just gave it a cursory review I admit that they are probably right.

But there is something more in this design than just some formatting and coloring, and this is what elevates it. This design is created to be read by somebody. Furthermore, it is created as to educate this somebody. After browsing through this report you end up knowing something about yourself and something about what this means in relation to the world, how you should act upon it.

Its purpose is not displaying data, nor it does stop at just relating this data to some other data (what was called information in the DIKW model). It keeps going up the ladder to Knowledge, and tries to integrate this knowledge and suggest action. It has been designed for wisdom.

This, designing for wisdom, I understand should be the motto of any conscious designer.

Some samples of my work in Giffgaff

I finally took some time to gather some of the work I did to help create Giffgaff, and have created a “portfolio” page based on that. They are just some wireframes and a couple of paragraphs talking about the work I did back then.

My work on Giffgaff

If you are interested in that please feel free to contact me. I will gladly answer your questions (as far as business privacy allows).

Weekly post coming!

I have to excuse myself for the inactivity. My idea is posting once or twice a week, but these late days have been exhausting.

There are a couple of ideas that come and go and I will post them here soon, hopefully I will have a new post tomorrow. Also, I am trying to add some of my work to the portfolio section this week.

So, come back in a couple of days and I will have some new stuff to share.

Data, Information, Knowledge, Wisdom

One of the precious legacies I keep from my brief stint as a philosophy student is the lack of trust in “knowledge”. That is, I tend to question what we assume that knowledge is, and look for its source. I remember the evenings I spent at the university library reading Peirce‘s “How to make our ideas clear”.

So, when I found at the appropriately named Information is Beautiful blog an interesting post comprising this beautiful graphic. I felt compelled to share it with you.

I think that this graphic represents quite well the relationship between data, information, knowledge, and wisdom, and how we construct our thought from raw data towards wisdom. I browsed the comments in the original post and found a link to the DIKW model in the Wikipedia, and learned that this model is already well-known.

It is really amazing how in this hyperlink days we can go gather data and information at the speed of light. Unfortunately it seems wisdom is still analogue.