Social Usability, like usability, is a quality attribute that assesses how easy social interactions are to make. The term “social usability” also refers to the methods for improving the ease of human-computer-human interactions during the design process.

Social Usability is defined by four properties (RICE):

1. Relations: How easy is it to find other people and connect to them? How easy is it to keep those connections active? How relevant are those connections?
2. Identity: How rich is one’s personal identity expression? How much are interests and passions expressed? How much are personal distinctive traits show? How much is privacy management detailed?
3. Communication: How fast can a message reach the other person? How many messages can one handle efficiently? How easy is it to handle conversations (1-to-1, 1-to-some, 1-to-many)?
4. Emergence of Groups: How easy is it to create groups, aggregate and talk around a common interest? How active are groups once established? How long do they last? How much is important to be part of a group?

The Social Usability Checklist

The Social Usability Checklist is a tool that I’ve developed together with the psychologist and researcher Gianandrea Giacoma inside our wider work on social networks. It’s built to be a simple instrument able to drive the analysis and the critical thought behind any good social network design process.

The checklist is based on the four RICE properties, each of them exploded in a few key terms with an associated question. All of them start with “Is there a way to…?”.

Relations:

• findability, inside: …find other people inside the network?
• findability, outside: …find other people outside the network?
• separation: …see friend-of-friend’s profiles?
• privacy: …allow or deny other’s contact?
• keep : …keep in touch with friends?
  • proximity: …see who is closer to myself?
  • time: …see who I’ve lost contact with?
  • themes: …involve your friends in common activities?
• public relation: …broadcast yourself?
• excellence: …give credit to relevant people you know?
• curiosity: …receive suggestions about interesting contacts?
• management: …categorize or group contacts?

Identity:

• amplitude: …express yourself?
  • mood: …express your mood?
  • appearance: …customize your profile?
  • person: …represent your life?
  • avatar: …create an online identity?
• interests: …show your interests?
  • offline: …show your offline interests?
  • do: …show your online activities?
• uniqueness: …distinguish yourself from others?
• privacy: …show who you are to who you want?
• group: …show your groups membership?

Communication:

• speed: …communicate quickly with your contacts?
  • sync: …meet together to talk?
  • async: …leave a message to someone?
• quantity: …handle a high amount of messages?
  • complexity: …have complex conversations?
  • parallelism: …manage muyltiple conversation channels with different users?
  • aggregability: …be supported by the system to handle many messages?
• richness: …send and receive rich multimedia messages?
• private conversations: …have a conversation with one person?
• public conversations: …have a public conversation?
• plural conversations: …have a conversation with a specific group?

Emergence of Groups:

• findability: …find and join a group that shares an interest with you?
• easyness: …create a group of friends or around a theme?
• bottom-up type: …show up in a group thanks to the things you do?
• liveliness: …see how much the group is active?
  • presence: …see the online people in that group?
  • production: …see how many contents the group does produce?
  • subscribers: …see how many people are there in the group?
  • frequency : …see how often people interact in that group?
• longevity: …see how long that group does exist?
  • short: …create short-term groups?
  • long: …create long-term groups?

The Social Usability Checklist is very useful since it allows the designer to be asking the right questions in order to build a good social infrastructure and to include or exclude specific features that might or might not be required.

You can download it as a cheatsheet here (PDF, 360kb).

The Checklist Process

The checklist is useful also because it’s a simple tool but can be used by different people with different skills and can also be used as a simple outline or as a guideline for a deeper analysis.

In the most complete scenario we have four possible steps:

1. Outline, made by anyone: skimming through the list and answering those questions is simple and is often enough to have a global view of the system.
2. Analysis, made by an expert: each question can be then associated with one or more user paths, outlining the single steps you have to go through and maybe counting the number of interactions in an approach similar to KLM-GOMS.
3. User tests, made by an expert with 5-10 users: the very same questions of the checklist could then be given to an user during a test in order to show problems and to see if there are different ways to do the same things. For existing systems it could be interesting to check both a new user and an expert user. The results from phase 2 and 3 can then be compared to have a complete view of the social interactions enabled by the system.
4. Merge, made by an expert: is then a way to correlate the design objectives with the social features that exists on the system, in order to see if, how and where they could be improved – or dampened.

The most interesting feature of the checklist and the related process is that it’s very flexible and can be used either if you have 5 minutes, 1 hour or a few days of work.

I think it’s a very useful tool in the hand of a good designer, but of course it can be improved and refined. If you have something to say, I’d love to hear your feedback.

The red one is from Gibson: “The future is here. It is just not uniformly distributed”:

The green one is from Vignelli: “If you can design one thing, you can design everything”:

The blue one is about Munari: “Progress means simplifying, not complicating”:

They’re licensed under a Creative Common license by 3.0.

I think that the home folder is an interesting topic because it’s very narrow in its scope but it has a critical role in enhancing the user experience, both for first time users and power users. It’s one of those things that should be transparent: so easy and so fast that you don’t even notice it’s there.

In fact I’ve designed many times a local ’start page’ for my own use, usually in HTML on my local server. I think that they were pretty good, but a few years ago I noticed that the real value could come from some form of integration with the browser, and that the bookmarks were the first element that required integration.

As you might guess, it was no surprise for me to see the start pages of Opera, Safari and Chrome, well designed in many ways, while at the same time I think they’re missing a real appeal for power users.

Things I don’t want in my home

There are a few things that I think should be avoided in the home tab:

1. Any search tool: the location bar – or awesome bar in Firefox – exists for a reason. One of its core roles is allowing search (and I think that the double location + search boxes should be unified). So, my home tab shouldn’t include any search field.
2. Any complex interaction: the home tab must be fast to load, fast to use. It isn’t a dashboard: if I wanted a dashboard I’ll make iGoogle or Netvibes my home page.
3. Any unrequested automation: what if you visit a website that you don’t want others to see? And what if automatically it appears on your home tab, because it’s one of the most used websites? Argh, it could be a real problem for many (think about porn…).
4. Any new tool to handle: I already have bookmarks, search and external services. I don’t want to manage another tool. It should be something automatic or a view on something I’m already using.
5. Anything with a mood: I think that tools must be neutral at the beginning, and I could customize them afterwards.

Things I do want in my home

I don’t have great visions about a browser home page, but a few ideas are:

1. I want my bookmarks: the interface should be a specific view on my existing bookmarks. More integration the better.
2. I want a visuospatial reference: I’d love to have items placed on a 2D space instead of inside a list, so I could train my memory to locate them faster.

The Foldable Home Tab Concept

I did some research looking at how people around me used the bookmarks and the home tab but of course a proper user test should be done in order to see real usage patterns.

To find an idea I started from my personal way of using bookmarks: I’m currently using just the bookmark bar or the location bar, while I don’t use the bookmarks manager almost at all.

My design have a home tab with visuospatial bookmarks that folds into the normal bookmarks bar. Probably a refined version of this idea could avoid a bookmarks manager.

The Mozilla Labs Design Challenge required a video, so here’s my explanation of the concept:

Mozilla Design Challenge Winter’09 – Foldable Home Tab on Vimeo.

What do you think? Would you have done any change or improvement?

“Most of what our mothers told us about our eyes was wrong. Sitting close to a television, or computer screen, isn’t bad for our eyes. It’s a variety of other factors that can cause physical fatigue.”

(Dr. Travis Meredith, chair of the ophthalmology department at the University of North Carolina)

“The new LCDs don’t affect your eyes. Today’s screens update every eight milliseconds, whereas the human eye is moving at a speed between 10 and 30 milliseconds.”

(Carl Taussig, director of Hewlett-Packard’s Information Surfaces Lab)

So, what exactly causes eye strain?

When we read a series of ocular muscles jump around and can cause strain, regardless of whether we are looking at pixels or paper. “While you’re reading, your eyes make about 10,000 movements an hour. It’s important to take a step back every 20 minutes and let your eyes rest,” he said.

(Professor Alan Hedge, director of the Human Factors and Ergonomics Laboratory at Cornell University)

It’s just a single source, “Do E-Readers Cause Eye Strain?” on NYTimes, but I think it could be right. We decided that “monitors are bad” in 1980 with green phosphors. Today things should be a ‘bit’ different.

Your customers can switch to a different application if they don’t like yours anymore. You can’t. Your customers don’t know how hard it is to support a feature. You do. Your customers don’t know how popular a feature really is. You probably have a pretty good idea. Your customers likely don’t even really know what features they want, even if they tell you that they do. It’s your job to figure out how to grow – or shrink – your application properly and responsibly. It’s your job to make the hard decisions and cut the features that did not work out.

— from Removing Features by Lukas Mathis

I agree with Lukas’ article, I just want to add one point, because I think it’s important within that discussion. I think that there’s one possible drawback: the developer could just ‘think’ that it’s right to remove a feature, without any evidence. It could happen.
This kind of decision must be based on data, as Lukas adds a few paragraphs above.

Sure, sometimes a decision could also be for personal reasons: “maintaining that feature was stripping me away the desire to work on that app”. Sometimes.

But it should never, ever be based on “intuition”.
It’s a process that requires one thing: humility.

At best, most product organizations have a list of requirements to meet, and, more typically, they simply have a set of features to develop. Designing and developing to requirements and feature lists leads to unsatisfactory experiences, because you’re no longer oriented to the perspective of the user. As you make decisions along the way, your concerns for features, data, and technology trumps serving the customer. This is in large part because you have those requirements and feature lists in front of you, but nothing to represent the experiential point of view.

— from Experience IS the Product by Peter Merholz (Adaptive Path)

I think that it’s very true. I often receive briefs with a ‘features list’ but without any objective. And often they want to spend tens or hundreds of thousands euros on it. With no precise objective to drive the design. That would be the first step.
The second step means going from generic objectives to experience objectives. One, two or three points about your project.

Take Flickr for example:

1. We want to help people make their photos available to the people who matter to them.
2. We want to enable new ways of organizing photos.

— from Flickr about page

But don’t miss the whole article, it’s interesting, with some bits of history that helps giving more examples than ‘Apple’ all the times. ;)

If it’s not already clear, this isn’t a particularly scientific experiment. If you performed the same tests you’d probably come up with different results depending on your proficiency with the various devices. But here are my results [...]:

1. Keyboard: 3′ 14″
2. iPhone software keyboard: 4′ 56″
3. Treo hardware keyboard: 5′ 23″
4. Pen and paper: 5′ 33″
5. Newton MessagePad: 9′ 17″
6. Palm Graffiti: 12′ 16″

— from Pen v keyboard v Newton v Graffiti v Treo v iPhone by Phil Gyford
(via DaringFireball)

Interesting test. It’s a personal benchmark, not scientific at all, but still an interesting overview.
The most surprising part for me is seeing pen and paper so slow…

1. Pick 6 habits for 2010.
2. Pick 1 of the 6 habits to start with.
3. Commit as publicly as possible to creating this new habit in 2 months.
4. Break the habit into 8 baby steps, starting with a ridiculously easy step. Example: if you want to floss, the first step is just to get out a piece of floss at the same time each night.
5. Choose a trigger for your habit – something already in your routine that will immediately precede the habit. Examples: eating breakfast, brushing your teeth, showering, waking up, arriving at the office, leaving the office, getting home in the evening.
6. Do the 1st, really easy baby step for one week, right after the trigger. Post your progress publicly.
7. Each week, move on to a slightly harder step. You’ll want to progress faster, but don’t. You’re building a new habit. Repeat this until you’ve done 8 weeks.
8. You now have a new habit! Commit to Habit No. 2 and repeat the process.

— from The 6 Changes Method by Leo Babauta

This is an interesting step-by-step method to make life changes. I agree with many parts of it, mostly break habit in baby steps (4), choose a trigger (5) and repeat (7).

Baby steps are critical, in order to “make changes without noticing” and the triggers are hooks to our brain ability to automate sequential and repeating tasks (think about walking for example).

I think those three elements work well for either one’s life, work environment or team changes. They’re also similar to some parts of BJ Fogg’s theories and, of course, my own Motivational Design. I also think that they could play an important role in games and adoption of new tools. :)

Nielsen’s Law of Internet bandwidth states that a high-end user’s connection speed grows by 50% per year.

— from Nielsen’s Law of Internet Bandwidth by Jakob Nielsen (1998, 2008, 2010)

It’s an interesting empirical analysis, even if I don’t think it has a direct consequence for designers and developers it’s something useful as an high-level estimation.

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

— from Crafting Subtle & Realistic User Interfaces by Mike Rundle

I agree. Materials are very important even for digital designs. More than many people think.

“I have only made this letter longer because I have not had the time to make it shorter.”
— Blaise Pascal, mathematician and physicist.

“Not that the story need be long, but it will take a long while to make it short.”
— Henry David Thoreau, writer and philosopher.

“If I had more time, I would have written a shorter letter.”
— Marcus Tullius Cicero, philosopher and statesman.

“You know that I write slowly. This is chiefly because I am never satisfied until I have said as much as possible in a few words, and writing briefly takes far more time than writing at length.”
— Carl Friedrich Gauss, mathematician and scientist.

“It is my ambition to say in ten sentences what others say in a whole book.”
— Friedrich Nietzsche, philosopher.

“The more you say, the less people remember. The fewer the words, the greater the profit.”
— François Fénelon, writer e theologian.

“No one who has read official documents needs to be told how easy it is to conceal the essential truth under the apparently candid and all-disclosing phrases of a voluminous and particularizing report…”
— Woodrow Wilson, 28th President of the United States.

“If you want me to give you a two-hour presentation, I am ready today.  If you want only a five-minute speech, it will take me two weeks to prepare.”
— Mark Twain, writer.

All those aphorisms are very aligned with the mood of this blog, I had to rewrite those here. I’ll probably use them sooner or later.
(via Dangerous Intersections)

Process

As any good project, I’ve started thinking about what should be the best, leaner and simpler process that I should have followed. I came up with this one, loosely on the lines of The Elements of User Experience:

1. Define the objectives
2. Find and analyze good solutions, good designs and best practices
3. Define the user experience — UX Design
4. Define the information architecture — IA Design
5. Define the interaction model — Interaction Design
6. Define the graphic layout — Graphic Design
7. Learn/update to the state of the art development techs
8. Develop

To support this I created a checklist. First on paper, then on Things. (but also The Hit List or paper again are good alternatives).

It’s of course a simplification: all those phases aren’t sequential (argh!) and aren’t separated, and some of you might also argue that interaction design is a part of user experience design, etc. This isn’t an essay on the One True Mighty Process, but a small analysis on how even a simple thing like this can – and should – have all those pieces, and for a good reason.

Objectives

At first I thought that the objective was just to show some skills within the design itself, but soon after I told myself that it would be pretty stupid, so I defined a more detailed outline:

1. Identity: build a space to be more “mine”
2. Discussion: build a space to show and discuss ideas
3. Process: build a structure that allows both rich articles and small notes

The objectives are in order by priority, and to tell the truth even at this time, writing this article, this list still makes me think (is it right? I’m sure? too much? not enough?).

There’s also a third point, but it’s more about content than an objective by itself: it’s spreading knowledge. If I feel good in something, I love to teach it. I think also that in any good teaching process the speaker receives something valuable. ;)

Not everything is measurable, but I think that it’s important to try defining some kind of metrics to be checked. I’ve defined a few simple ones:

1. Views and pages/visit
2. Discussions with interesting people (comments, mail, twitter, whatever)

The term of paragon is my previous blog, of course. In a broader sense, everything should be observed and analyzed. Metrics are just a simple and straightforward way to do that. Also, I don’t want any kind of advertisement: I’m not interested on money. I’m interested in quality. Quality can’t be intrinsically measured.

Find and analyze

Now that I knew what I wanted, it was time to find good solutions and good designs. I wanted something simple but powerful and the first one that came in my mind was – and still is – Daring Fireball:

It is simple, clean, very content-oriented but without killing the freedom of handling additional content. At it has a great brand identity. Also, every technical detail, if present, is well implemented.

Of course, one example isn’t enough, so in a few month I’ve collected many websites that in a way or another interested me.

I choose them for many reasons: layout, aesthetic, content, architecture, technical details. I was gathering every possible interesting idea in order to make a synthesis from them.

There are many interesting things: I liked the redesign cleanness of Evan Williams‘ blog by Vitor Lourenço, the free form of Dustin Curtis‘ pages, the physical feeling of the paper of Andrea Gandino, the amazing elegance and cleanness of Sean Sperte’s Geek & Mild, the typographic attention of John Boardley’s ILoveTypography, the layout structure of Area17 and iA, the simplicity and communication directness of Sofa, and so on.

I’ve analyzed them, reduced them, taken all the things I thought were interesting and checked they could work in some way together.

User Experience Design

I know quite well how users navigate inside many kinds of web sites, and I know it better inside my websites – even if in this case the numbers probably aren’t high enough to be statistically significant.

I chose to optimize four flows:

1. Homepage flow: blog homepages are often dull, while news websites are often driven by the attract-attention plus make-pageview pattern, that I don’t think it’s good for a quality-aimed website. I wanted to make the user able to get a global idea of all the content from the homepage and be at the distance of one (or two) clicks from the content itself.
2. Reading flow: I wanted the single article page to stand as a standalone document, without anything distracting the reader or luring it into making another click or discovering more. It’s the single content by itself should drive the reader to the bottom.
3. Discussion flow: the comment part is often something “attached” at the end of the post, in a way that makes it an appendix of the article. I wanted something that was clearly a comment, but that was also able to go on with the reading, like a text build by many hands. I wanted to make it a first class citizen in the page.
4. Discovery flow: I wanted to make the content discoverable without interrupting the reader. So the discovery of other content should be in specific points: at the end of the article, in the home page and in the menu. Nothing more than this.

Let’s not forget the other side of the website, often neglected:

1. Writing flow: I wanted to be able to add both long and detailed articles (such as this one) and short quotes and comments. I’m convinced that lowering the barrier to writing something is critical and that isn’t just a matter of usability, but also of mood. The way you think about your blog auto-selects the content you’ll write on it.

I also decided that I should start with a website a bit less “social” than I thought it would be. Maybe in the future I’ll add some integration with Twitter or Facebook. But I prefer to do it in small steps.

Information Architecture Design

A site like this is quite simple, but still you should think about what you really want to say and show. After a few reshuffling and analysis of what I wanted to write and how I wanted it to be displayed, I’ve defined this architecture:

• Home: the door of this website, but also the most important navigation key.
• About: the description of myself. I think this is quite important, both because it’s the first thing I read after finding an interesting blog and it helps in building a good trust relationship.
• Projects/Portfolio: a synthesis of the projects I’ve worked on, with lots of screenshots and a few insights.
• Articles: full thought out texts, like this one.
• Traces/Notes: links, comments, quotes and things I’m still thinking about.

Nothing too complex. What I find interesting and very useful are the “two ways” of writing expressed by articles and traces. I took this idea mainly from Gruber and Sperte and I think it works very well both from a reader point of view and from the writer point of view.

Interaction Design

In the various draft of all the structure above I’ve started also thinking how this could work all together. I’m a visuospatial person, so I had to visualize it on paper:

I already had an idea about the articles page from all the previous designs I made so I worked on the navigation part and the home page, the two critical parts in this project.

The most difficult part was about adding details but at the same time keeping everything clean and simple. I often reshuffled the designs after adding something because it cluttered too much the UI.

The idea of the top search dashboard came in mind just after one of those reshufflings.

At one point I noticed that I wasn’t anymore arguing about what and how the content worked on the pages, but I was thinking about the visual result. So I stopped making sketched, I took the best ones and I’ve started the graphic design phase.

Graphic Design

As I’ve already said, my first try was about learning the details of Daring Fireball and try to build upon them to make something unique.

As you can see it’s not the same, but you can perceive a feeling of it (also, at this time I didn’t know yet that the blog will be just in english and the logo wasn’t finished). I choose a dark blue instead of a slightly cold dark grey and I’ve reversed the logo position in order to give more value to the content. There’s also a small shading and a small colored bar on top.
The old images would have fit well also on a dark background (thanks to the alpha border I used), that was nice.

But as much as I like contrasts, dark isn’t really for me: I think it’s cool for a while, but in the end it doesn’t work out. I already went through this a few times. I tried on an inverted version of this layout (with white background) but it wasn’t as good as this one.

In the meantime I completed the logo so I started over and after a few iterations and some feedback I came up with the final layout.

Development

I’ve decided to try directly all the interesting things that I’ve seen and filtered in the last months, so I tried and then built upon some recent interesting technologies.

Crossbrowser

I usually skip past this part, since I assume that *anything* must be developed on one of the most standards compilant browsers, Firefox for me, and then tested on any other.

For this task I found very useful Internet Explorer Collection (all the IE versions installable on the same machine, from 1.0 to 8.0) with the Microsoft Internet Explorer Developer Toolbar, everything installed on a virtual machine, maybe VirtualBox.

960.gs

960.gs is an interesting approach to speed up development. The first HTML+CSS master was based upon it, but after a few checks I decided to use my own classes, incorporating the 960.gs maths I choose (39px column, 12px gap): I didn’t use the standard 960 grid, because I wanted a 600px wide default text column.
For me 960.gs is interesting but I think that a similar logic is intrinsically behind the best layouts, using meaningful CSS rules instead of “columns”.

Also, I think that building the “body” of the article using a grid system could allow dynamic page layouts (like Dustin Curt’s posts, see Smashing Magazine’s article about posts visual design) with a smaller development effort. On a flexible grid-based template you’ve something like a rough version of an InDesign grid, more easily controllable than custom CSS.

I designed this blog allowing a few “exceptions” to improve the overall layout.

HTML5

I decided to try HTML5 out. The last “push” was reading the online draft of “Dive Into HTML5″ by Mark Pilgrim and I noticed it was already possible to do something interesting (while, for now, I discarded CSS3 for anything with the exclusion of some minor features).

I don’t like the workarounds to use the new tags on Internet Explorer *sigh* (it’s JavaScript based) so I worked on a CSS that uses both tag declarations and class/id declarations (something like: “article h1, .article h1″). Using those “double declarations” I could switch quite easily between “<article>” and “<div class=”article”>” without rewriting any CSS rule.

I’ve validated the code using html5.validator.nu and the structure using the html5 outliner (thanks Matteo).

I’m still not sure on real-life usage of some tags, but I think I did a good guess with this site. Let me know if you would have done something differently.

Microformats

I wanted to use more Microformats, but in the end I’ve settled on just one, a hCard in the footer. Check it with a simple bookmarklet.

jQuery

For me jQuery is the script with the best code usability around. Simple, efficient and to the point. The few JS tricks on this websites are of course jQuery powered.

Custom Plugins

To ease the usage of the additional CSS styled boxes (the one on the side and the one with the big text) I developed a small WordPress plugin, bundled with the theme, that adds two buttons on the WYSIWYG writing interface and inject some CSS in order to display it in a good way inside the editor itself.

Print

I prepared also a print CSS, in order to show a clean and well-formatted page, without navigational elements and things completely unuseful on printed paper.
I optimized the article page in order to get the article well optimized for readability.

Optimization

I’ve optimized the page in a few ways:

1. I’ve put all the javascript code in a single file. In fact I’ve just added the libraries (jQuery) on top and just after my code and the initialization code.
2. When possible, I’ve used sprites in order to load more smaller images with a single HTTP request. Unfortunately it wasn’t possible to put everything on a single image – also for maintenance reasons – so at lease the icons are sprites with default and :hover states.
3. I’ve used the new Google Analytics asynchronous tracking code. For now, it seems working well.

There are also some optimizations here and there, but these are the most important ones.

IE6 dying and transparent PNGs

Internet Explorer 6 is, luckily, dying. IE7 still has some issues while I didn’t have to make *any* workaround for IE8. It seems that a new era is coming. About IE6: the support will last for a while but the stats are going down:

• December 2009, worldwide:
  20.99% (NetApplications)
  11.44% (W3Counter)
  14.04% (StatCounter)
• December 2009, Italy:
  7.97% (StatCounter)

My own stats are way lower, but I still wanted to give a good experience to IE6 users. So a few CSS hacks and a JavaScript library to allow transparent PNG in an easy way (Belated PNG).

Well, in synthesis, that’s all.

Any question, suggestion or hint? :)

My problem raises from the fact that I don’t have a vertical interest in anything. Well, yes, there are fields that sees me more “present” in some ways, but in the end they’re quite wide.

Having many interests and many things to be passionate about may seem a good thing. Well, it is, from a personal point of view. But from a communication point of view it’s a big issue. You can say you’re a programmer or a graphic designer in 140 chars, but trying to express all the complexity behind different passions is hard.

It’s also hard for other two reasons:

• profession: if you’re a vertical kind of person it’s easy to communicate yourself, so when someone “needs” someone like you, it’s easy that you’re the one that will be called.
• time: pursuing different interests is very enriching, but it takes a huge amount of time.

The simple answer is that I often “choose” between the different skills I have. Sometimes “I’m the interaction designer”. Some other times “I’m the developer”. Some other times “I’m the graphic designer”. And so on.

So, I’ve tried to think about something else. I’ve tried to abstract a bit.

Smart?

Many people tell me that I’m quite smart. Even if this were true – I leave this as an exercise for the reader ;) – you can’t tell anybody “I’m smart”. That’s a really bad presentation and it usually triggers a response very different to the one you’d like to have. In fact, “smartness” can’t be communicated, but only acknowledged.

Discarded.

Hypercritical?

The piece by John Siracusa “Hypercritical” in May 2009 was something that really made me thinking.

This acute awareness of deficiencies colors all my memories of childhood. Toys, in particular, were a focal point of dissatisfaction. I didn’t understand why toy manufacturers couldn’t see the countless ways that their products differed from the on-screen characters, machinery, or structures that they were based on.

I felt very similar to Siracusa here. But still there were two problems:

1. Being “hypercritical” isn’t a flattering explanation, by itself.
2. It still didn’t felt quite right.

Discarded.

Doubt?

I love doubt, by itself. I think that doubting is the driver of improvement. If you don’t doubt, you’ll never think that “maybe there’s a better way”. If you’re sure, there’s nothing more to add. Slip in some doubt and voilà, you are able to make the right question.
As you can see, the philosphy is interesting… but “doubt” by itself isn’t a skill!

Discarded.

Synthesizer?

No, not the musical instrument. I once thought about myself that my rational part is a huge synthesizing machine. I throw things inside it and it loves to find relations, abstract things, reduce to single words or sentences, etc.

There are many things that could reinforce this hypothesis:

1. I’m fast in remembering paths and I draw mental maps of the places where I pass through.
2. In any situation I’ll try building up an “abstract” structure to hold anything together.
3. I often use this ability passively, simply acquiring information (lot of) and notions in order one day to elaborate a result.

Yes, I’m sure to be quite good at this.

But still, the term is awkward.

Discarded.

More abstraction, less abstraction

I needed something more concrete than the “synthesizer” line of thought and something more abstract than the simple profession. In the meantime I was also thinking about the logo and I was analyzing the lists as I’ve explained in the post about the making of the logo of Intense Minimalism.

During this time I was also looking at the “lists” on Twitter that has me added. It’s quite interesting: interaction design, usability, social media, graphic design, user experience, speaker, tech, geek, and so on (yes, Twitter Lists are probably more useful to see how the others “categorize” you).

Then the “synthesizer” thing jumps in. I wrote the formula:

It’s nice. Complex, but simple in its form. Disciplines above the line and approach below. Simplicity is the result of some kind of complexity synthesis, so together they’re a pair.

Double checking

I think that the “Hybrid  Designer Formula” above is quite on spot, and it’s confirmed by some other sources.

Simplicity is something all around in the design field, almost in any kind of design.

Progress means simplifying, not complicating
— Bruno Munari

The simplest way to achieve simplicity is through thoughtful reduction.
— John Maeda, Law 1

Simplicity is a function of your scarcest resource at that moment.
— B.J. Fogg (2009)

Complexity is also there, while its important role isn’t always acknowledged.

Good displays of data help to reveal knowledge relevant to understanding mechanism, process and dynamics, cause and effect.
— Edward Tufte (2005)

The most important part is the relation between the two:

Simple design, intense content.
— Edward Tufte (2005)

Simplicity and complexity need each other.
— John Maeda, Law 5

The three elements above works in the means of the two below the fraction. Their interaction isn’t obvious sometimes, but it’s there. You have a technology, you have people (psychology), you have to make them interact somehow (design).
This is true for architects, industrial designers, visual designers, artists, engineers, while probably any of them will tell you a different story from a different point of view.

The term “Hybrid Designer” emphasizes the cross-relation between different fields. Still, it’s just for communication’s sake: for me, a good designer already does this. And the greatest already do and teach this. Any good designer must be intrinsically hybrid.

Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while.
— Steve Jobs

A designer is a planner with an aesthetic sense.
— Bruno Munari

More emotions is better than less
— John Maeda, Law 7

Good design is aesthetic
The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.
— Dieter Rams, Ten principles for good design

We as designers … we cannot do it alone, we need entrepreneurs, working together with good engineers.
— Dieter Rams (2009)

The more you feel that you can control your environment, and that the things you do are actually working, the happier you are
— Joel Spolsky (2000)

If you can design one thing, you can design everything.
— Massimo Vignelli

So, I can now explain something about me and my professional side in 140 characters.

I think that it’s, for now, a good way to tell something about me.

• What do you think?
• What about you and your identity? How have you solved this problem?

Make no little plans. They have no magic to stir men’s blood and probably themselves will not be realized. Make big plans; aim high in hope and work, remembering that a noble, logical diagram once recorded will never die, but long after we are gone will be a living thing, asserting itself with ever-growing insistency. Remember that our sons and grandsons are going to do things that would stagger us. Let your watchword be order and your beacon beauty. Think big.

— Daniel Burnham, Chicago architect (1864-1912)

Clusters of happy and unhappy people are visible in the network, and the relationship between people’s happiness extends up to three degrees of separation (for example, to the friends of one’s friends’ friends). People who are surrounded by many happy people and those who are central in the network are more likely to become happy in the future.

• Fowler and Christakis (2008) Dynamic spread of happiness in a large social network

This study analyzed a social network of 4739 indivisuals from 1983 to 2003. It’s a pretty solid research. A direct friend that is happy increases the probability of happyness by 25%.

It’s also interesting a following study about lonelyness (Cacioppo, Fowler and Christakis 2009 Alone in the Crowd PDF), showing the same three-degrees pattern. They noticed that one more friend in the network decreases the chances of lonelyness by 10%.

(via Granieri)

As you might guess by this, I’m also a logo lover.

What is a logo?

A logo is a form of expression, it’s a sign that maximizes a specific meaning (signified) while it minimizes the number of strokes (signifier) to represent it. As you can see: it’s intense and minimalist.

For me, the platonic idea of a logo is represented by a circle:

The circle is a very strong symbol. The one above is an ensō, by Kanjuro Shibata XX. “Ensō” is a japanese word that means “circle”. It symbolizes enlightenment, strength, elegance, the Universe, and the void. In Zen Buddhist painting, ensō symbolizes a moment when the mind is free to simply let the body/spirit create.

As you might guess, the circle symbol is so strong and so common that you can hardly build a logo with “just” it. But for me, it shows the characteristic a logo should have:

1. Simple: fewer lines is better.
2. Self-contained: it doesn’t need anything else to “stand” in a page, on a website, etc.
3. Balanced: it’s well distributed on the two spatial dimensions.

Some examples:

My first logo

When I was a kid sometimes I picked up a paper and started thinking about a “logo” for me. At first I wasn’t thinking about a logo, but about a monogram. I spare you those ones, they were plain ugly. Then one day, during my high school, I drew one I thought it was pretty good. Years later I vectorialized it in Illustrator. Here it is:

Today I think that’s quite naive, and that’s an euphemism. For the most part I regret using it for so much time. You can also see that it’s blue: my favorite color is blue. I just wasn’t sure on what shade of blue I should use, but that’s it.

Problems? A lot:

1. It’s a “D” from my name, but that’s not very clear.
2. The concepts it expresses were mostly in my mind, but they didn’t match anything real about me: yes, it’s something blooming up there (like the coat of arms of Florence). Yes, it resembles a comet. And a sail. Too much.
3. It has small parts so it can’t be very small.
4. It isn’t enough bold to be used with a filler image.
5. It is quite within the “enso”, but not enough.
6. Aligning it with text is a big problem.

So, 2009. I decided to evolve it.

The evolution

So I decided to evolve it. At first I thought I could blend it with the infinity symbol, but it was too pretentious. Still, the task of building it was interesting since very small variations on the curvature of any of its parts was able to “break” the perception of it. I forgot: it was a D, an infinity symbol and in a “perceived” 3D.

It’s unfinished, it was a nice experiment, but it’s still ugly, if not uglier than its precursor. It’s cool playing with the infinity symbol, it’s cool trying pseudo-3D, but well. No. Rewind.

So I simply decided to give elegance and boldness to the first one. Still an evolution, I was trying to build something new with old pieces.

This was fine for me. It was elegant. It solved many problems of the first one. It was also technically “perfect”, built with just a two ellypses in different sizes and positions:

If you read up until now, you should notice that I “forgot” everything I was saying in the first paragraphs of this article. My friends were saying “uhhh nice nice”: I had to convince them it was good.

The months were passing. One evening of october I was talking with Gaetano Grizzanti, a guru for me in the brand design field (go check his company, Univisual and its wonderful and powerful logo). I showed the logo to him.

“It’s good …for a military organization.”

That was it.
No more words.
He changed topic.

I went to sleep with those words in my mind. The next morning I looked again at the logo and it was clear to me that I was ignoring my own ideas. I was stuck in some mental loophole. The logo was good for a Space Marine legion.

I took again in my hands the book about japanese calligraphy I had on the shelf. Then I immersed myself in all the books and websites about logo design, to “clean” my mind.

The process

Designing a logo for a person is both easier and harder than doing it for a company. First of all, I wrote down all the things I wanted my logo to be able to express. A long list of words about me, my profession, my style. Then I killed all the words that were too much “external”: I wanted a logo able to express me, not what I can do or how I appear on the surface. Then I killed all the words that were too common, too “everyone wants this”, too abstract.

Then I did a little bit of copywriting on the remaining words, there were just a few. I wrote them alone on a sheet of paper.

• simplicity
• meaning
• hybrid
• synthesis
• pragmatism

And I simply realized that what I was trying to express was just a variation of Intense Minimalism.

I took another sheet of paper and then for the next two weeks I took some time every evening to draw logo ideas and the next day to think about it. I showed some of them to my friends, got some feedback and started again the next day.

• Simplicity called strongly for “just the circle” but as I’ve stated before, you can’t make a logo from just a circle.
• Meaning was intrinsic in the logo concept by itself.
• Hybrid. An unity made by different parts.
• Synthesis told me to do something that in some ways should converge to an unity (the last synthesis possible).
• Pragmatism meant that it should be some sort of geometry. Or something handwritten (like the enso above).

This is the last of the sheets I filled.

The Intense Minimalism logo

1. Simple an geometric. Just three circles (three one of the “perfect numbers”).
2. The middle part isn’t just the overlapping part between the two external circles: it’s a perfect circle by itself. It expresses well how the whole is more than the sum of its parts.
3. Also, it’s like the additive property of the RGB space: blue + blue = white.
4. It expresses well the hybrid concept: a unity made by different parts.
5. The two external circles are of light blue and dark blue.
6. It’s a little 3D, since it could be viewed as a ring, slightly angled.

My favorite meaning is the second one.

The typography

As Gianfranco hinted me, I didn’t add anything about the logotype itself. I skipped that because in fact it’s the same logotype I’ve used for years on my italian blog. It’s born alongside my attraction to the Univers typeface, mostly in its condensed variations.

The “leaves” are something I took from my first logo but they are there hinting to something living, something that’s blooming, while in a discrete way.

The interesting part about it is that John Boardley of I Love Typography fame gave me an hand in december of 2008 to correct some kerning issues (i.e. “a+l” tighter, “ten” to be readjusted). It’s a small detail but helps in defining a better result overall, and it was a short but interesting conversation with him. He’s a great guy.

Logosheet

As I always do when I complete a logo design, I made what I call a logosheet, an editable PDF with all the important traits of the logo, the inverted form, some rules on its usage and a few more details. The PDF is editable in order to take from it the logo when you need it.

Three takes on the “upcoming” Apple Tablet, or whatever it will be. I have to say, three smart and concrete takes.

I’ve got just two words to add: handwriting recognition. And a link.

This task involved a few different elements:

1. My personal identity
2. My professional identity
3. My brand
4. My color palette
5. My website
6. My coordinated image

So, this is my new website. I’ll expand the six topics above in some posts in the following days.