• PMs
• Analysts
• Business Consultants

Now that the UX role exists, which is the behavior by whom held his/her position in the past?

There are three different world which a UX designer deals with:

• product industry, that produces devices, appliances
• media agency, specialized in products that use interfaces, but throughout a software
• software enterprise, that is the field of the consultancy agencies.

My experience till now was made in these latest two world and between Italy and Belgium.
I started my carrier in the late ’90s working for a web agency and my role was manly to design nice and useful interfaces. The content organization, the navigation etc. were all competences owned by the consultants, or sometimes even the account that was in charge of the client. A designer could give some suggestions and for me was a daily fight, especially for choosing the way to present content.

Some years just to make a step forward

We went through accessibility problems and then more deeper into usability while the technology became more complex to manage. So the need of more specialization arose. Especially when the projects became bigger, the needs to split the work created new professionals.

In the last years there were a lot of changes, especially in the agencies, but a lot of work need to be done in the enterprise world, where I’m working now.
End-users are not so smart and sophisticated, but they need to use applications every day and I feel myself responsible for making their working life easier.
It is a very different target from the agencies’ end-user. Here the first thing is “do something new and smart to sell”, but enterprises buy software like its furniture, because they need it. So there is not so much interest doing it in the best way possible.
But sometimes, somewhere it happens that there is the request for someone to take care of ergonomics: the usability expert. Which takes over the tasks previously performed by other professionals. And conflicts arise:

• PMs that don’t understand who you are and why you are here
• Analysts that are suspicious
• Consultants that want to be the content ideas’ leaders and don’t want you as an interpreter of the client’s needs

How to deal with it and make an impact?

First introducing the culture of the “user needs” that is a plus for the business goals, and not just more effort and cost. Then showing that “usability” analysis is not a technical analysis, that can solve and prevent problems instead of adding more. But never forget to listen who work with you, there is always something to learn from who did part of your job before you.

I hope that the windows 8 UX revolution can help in this path, but the enterprise world is still much more old style than what we are used in our private life

How it all began

I try to look for sources of inspiration for my UX job in every new gadget that comes out, regardless of the system and last summer I was very curious to discover the new Microsoft smartphone. From the first screens they showed last year I saw it was not the usual minified desktop Microsoft always proposed in its previous versions of mobile systems. They changed their approach and made completely new UI inspired to the one used in the Zune.

I went to a presentation (it was REMIX10 in Belgium last September) and I listened to Kat Holmes and Karen Davis, from Windows Phone 7 Design Team, talking about the principles that guided the design of the new WP7 UI. And it was true, they really did it. Great work, I thought.

My curiosity for the new paradigm turned into a new challenge for me: designing an application that matched the new principles of WP7 and the Metro design.

Together with my husband, Simone Chiaretta, we decided to develop a Google FeedReader, with all the features we wanted in a feedreader for a smartphone.

In the next sections I’ll show you the steps we followed for building FeedTso.

Market Analysis and find the right Persona

The first step is finding the requirements and deciding what our target will be. This is usually something done by the marketing department, but if you do the application by yourself, you have to switch hat and apply the same methodology used by them: benchmarking, making polls, asking to the people that you know.

Also, it is very useful to read through the WP7 Design and Interaction Guide (PDF) to understand the personas for whom Windows Phone 7 has been thought: 30-something active people that want to simplify their busy personal and professional life using a powerful but intuitive and easy to use phone. It has not been designed with the teenager as primary target group.

After this analysis, I put on paper all the information collected and I tried to understand what to put into the application and to which element focus on.

The feeds are the main elements, but the WP7 user experience naturally put a strong accent on social features. So why not focus on it as well?
This is another element that I have to add to my app.

The Information Architecture (IA)

Working for mobile devices always puts me in the mental condition to think about how we use them. And I start to watch the persons around me, spying their “mobile” behaviors.

Stop to think that someone will use an application with all his/her attention. Usually we use the smartphone while we’re doing something else, going somewhere by train/metro, driving (even if we shouldn’t), walking. But there are also a few moments where we can give the application our complete attention (example, you are in queue for the doctor). It means that the contents have to be structured by hierarchy of importance and based on the favorite information.
Windows Phone 7 puts a strong accent on content, so this is the most important phase in developing a WP7 app.

Understand the Metro Design

The information architecture cannot be abstract from the device chosen as it is the skeleton of the user experience.

The Metro UX is different from any other mobile devices and the IA needs a specific approach: the goal of the Metro UI is to give a lot of emphasis on contents that are important to understand whether to dive into details or keep doing what we were doing. To achieve this, they introduced the concept of hub, whose role is to concentrate all information into one screen, like a dashboard or, probably with a better analogy, the cover of a magazine.

The concept of hub is materialized into two new paradigm of navigation, each with its own meaning and function: Panorama and Pivot. The difference between the two is subtle if you see them just in a short presentation.
I read and read again the documentation, but it took a while and some tests to really understand how I could use the new elements.

Choosing one or the other depends on the application’s purpose and on how we want to introduce the user to the contents:

• Pivot orders the elements in a perfect and logical way, splits the information in categories and gives the list of the elements available for each categories.
• Panorama gives a quick overview and pulls into the same screen information from different areas of the application.

I designed the content organization as a navigation through different services. How did I need to present them?
My answer was: an overview.

The Pivot is more analytical and used to show various aspects of the same content, while Panorama gives a “bird’s-eye view” over the various information available.
I like the idea of having an overview, a place where the user lands when entering the application. So I chose Panorama: it allows user to explore what’s new and find what is more relevant for him.
Furthermore, Panorama allows the usage of visual communication and images, for creating a path through blocks of content which draws a sensual and immediate link among information using the user’s perceptions.

Once decided the entry screen of the application, the next step was to organize the contents in groups and levels, to design how the user interacts with them, to built a navigation map and an outlines’ document.

Once created the content structure, I began to think how to highlight some content in order to create a path for the user.
First I prepared each screenshot (already in wireframes) trying to harmonize the content using minimal graphic to highlight the IA paths. The wayfinding’s example is a good paradigm to explain the metro graphic’s style.

For example I used accent color to separate title and others header’s information. I used little boxes to give a reading support and to highlight the number of the feeds.
Despite believing in design based on the IA and ergonomy, it so sad to view a Panorama with only text and a black background
So I chose two photos that matched with the Panorama’s content and with the app’s purpose, one for the white theme, one for the black.

And what about the other pages of the app?
After having taken the decision of using a Panorama as app’s first screen, the impulse was to find a place for a Pivot on the second screen.
No way! For the amount of the content that I had, putting a Pivot would have meant adding one more layer and I didn’t have so many complex information to categorize and to show in such a structured view.

Looking at the content and thinking about the possible user’s actions I decided to put a simple list, horizontally scrollable, to let the user go directly to the list of posts, one step closer to the content.

Gathering “beta” Feedback

How to make questions and have feedback to build a better app? This is was my problem, because I didn’t have the budget to realize a real usability test.
I chose to make polls using Twitter. The followers that answered didn’t represent all the users’ categories, I known that it was a imperfect solution, anyway I decided to go through this and I learned a lot from them.

After having asked to some users to test the app, to report bugs I sent them a form I prepared with a short survey

The last mile

We fixed bugs, we did the list of features to add in the next release and we released the application.

What is still missing?

The animations are part of the Metro UX, but I was very careful to use them. Why? Because in the past there was an excessive use of animations without meaning, and now I usually look at them very suspiciously. But I understand that animations have a great importance on metro UX, because they are the way to communicate a status to the user, to say that something is on going. So, for me, next actions is, use them more!

The last words

Finding guidelines about WP7 and Metro design it’s easy, finding the way to apply it, not so much.
I wrote my experience with the new Metro design concept, trying to give a personal prospective on my problems and on the solutions that I found. This experience left me with a lot of new ideas to test, maybe in the future I’ll come back on this topic. Also I will talk about how I designed FeedTso during the next MS WebCafé in Mons, on the 26th of May.

And if you have a Windows Phone7, you can try out the application (and buy if you like it):

Jumping from a post to a link and so on, I arrived here. A beautiful example of a different prospective to view things. In this case it is related to how a drawing can be animated

The simplicity of this act makes me think when we try to find something new, something different and we build complex structures when it could be possible to find something clean and simple and still appealing.

This “petit truc” is a  reminder that we should look for something effective without complexity.

• 3 different sites
• personal page on Flickr
• Twitter page
• Vimeo page
• Slideshare page

All of them under different names and nicknames. This is ok for the platform like Twitter and Facebook, but the rest couldn’t remain in that caos.

I realized that I basicly use my blog to publish something that I think could be really interesting, but I lost the opportunity to publish some “small” thing that are useful too, as photos, or links to something that is an inspiration.
I thought that it was the time to review all this information and to organize it under the same name and in a clear and structured way.
At the same time I decided to implement a new “professional” image for me, that could be a sign of the changement that happened in my life during this year.

All the process to collect and organize the information, to design a new communication image and a new graphic took some months. I chose a new platform to have the possibility to add more plugins and finally, with the Simone‘s help, I moved all the content of my blog here and I put on the header of this new site the other projects that are still running, the activity on video and processing on Vimeo and my page on Flickr, that is for me a way to see the world and to communicate with images something that I won’t say with words.

I chose HTML 5 to do that, because I believe that it can be really something on which it is possible to build the web’s future.

… and finally here is the result.
It was a challenging project, because is much easier to work for a client while it is difficult to find the time to work for yourself.
I want to say thank you to all of you that with your suggestions made it possible.

Maybe for small business is it too much to have an intranet, but it becomes important when there many employees and different locations.

An intranet shall be the image of the company and and a reference for the employees. This is by the book.
But in real life Intranet and employees a lot of times are not in the same universe.
Usually it is the repository for all the documents and the applications used for working. But without a strong mapping of the knowledge, it becomes quickly the black-hole of the documents.
Not only.
In fact an intranet is seen as an enforcement from the central company’s office.

To be effective, an intranet shall be a meeting point for the employees, where they could find information, news and usable stuff for their daily work.
My uncle, now retired, told me that he felt his company like a family, not like an external “object” which he had an interaction with.
I never forgot this words. I’m used to change job and working environment frequently: I worked a lot of time as freelance and as an employee too, but in any case, this feeling of belonging is something of the past. But not something impossible!
It depends a lot on the approach of the company. And what could be the main vehicle for it? A intranet.

I cannot decide it, but sometimes I can explain the importance of the communication choices to be used on the intranet.
My golden rules are:

• strong information architecture: everyone shall find the documents that he needs
• clear and usable news and information quickly available
• focus on employees interests and needs
• clear brand communication

And this one is NOT the last thing… but the FIRST!
The brand image is what the corporate communicates to the world, but to the employees too. An intranet shall have a clear and consistent branding image: all the information and areas that are inside of the intranet shall be part of it, not many single things each one with their own look&feel.

I’ve tried to put in this post all that I learned from my experience, but there are a lot of things that we can do to make the daily work of our user better.

In the last year, my free time to write consistently decreased: I spent at work more time than in my past freelance activity and when I was out, I spent all my time for family, friends and my beautiful mountains.
I presented to some conference and camps, talking about UIX. I like it very much.

But, I miss writing posts. For the new year I’ll try to change something in my working life to find the write balance and to spend more time in writing

I talked together with Cristiano  about Interfaces for elder users.
A very big part of our society is now excluded from Internet because the interfaces that we are using every day,  are too difficult for them. There is more attention on accessibility for people with disabilities, than there is for elder people. But they WANT to understand and use our technological tools, because they know that they are important for them as they are for us.
We have elder people in all our family, so Cristiano and I thought about some ideas for bringing Web Tools to our elder family.

You can find our presentation (it is only in Italian, sorry!) here:
www.slideshare.net/tso_da/senior-20

Thank you all, people there and organizers

Design pattern history
The concept of using a library of examples to find standard solutions to solve common problems was developed by Christopher Alexander in 1977 in a architectural book.

“The book provides rules and pictures, and leaves decisions to be taken from the precise environment of the project. It describes exact methods for constructing practical, safe, and attractive designs at every scale, from entire regions, through cities, neighborhoods, gardens, buildings, rooms, built-in furniture, and fixtures down to the level of doorknobs.”

This concept is widely used in software architecture to organize and to design software, but is a relatively a new concept in UI design.

How patterns could be useful for UI design
In the user interface design using a framework based on “pattern” began with the library of XHTML+CSS modules. Everyone of us knows very well the importance of these libraries and we usually use them to build our code architecture.
The same value has the UI pattern: they immediately give to us an idea of a possible solution to study and solve our personal scenario.Having some elements to begin to work, some answers to basic problems, puts our mind in the condition to think how to improve user experience and consistency related to whole application.
It is not only copy&paste, Patterns give us a different and rational way of approaching a problem, in a context that has very few rational things: design and user experience are not simple to categorize.

There are many examples of UI pattern on the web.
I used three, but I discover every days one new
http://quince.infragistics.com/
Is the first UI pattern site that I used. Here it is possible to find some solution organized by type of user tasks.
http://patterntap.com/
This one is a library of samples, not all are real “pattern”, but a collection of inspirationl graphic element, organized by kind of problem.
http://www.welie.com/patterns/index.php
This is a collection of pattern for interaction design, that explains what you can use for UI problems and how.

From the objections I received I understood that Agile developers think that UI prototyping is against incremental process, but this is not true.

When it come to prototyping the UX of an application, it doesn’t mean you have to prototype the whole application in the finest details. I think that is possible to prototype the concept of an application, with the macro functionalities, the graphics and usability behavior and give the imprinting to the client. Then when the project enters in the development phase, you can use prototyping to design and define the UX in a more detailed way and so develop the single feature in a vertical way.

You can design the functionalitis with the schematics, static graphic and functional mockup and put every single functionality on the client approval process and then implement it. It isn’t a closed process, there are a continuous dialog between designers, developers and clients.

Talking with a more precise Agile terminology, you can see the prototypes are a better way to define use cases: a way that shows the customer what he wants, not only from a functional standpoint, but also from a usability one (this is an interesting thought by Simone Chiaretta ). And since this use case is more similar to the final implementation than a bunch of sentences, the customer can understand earlier in the process that what he told you want not what he meant, or that he wants it in a slightly different way. And since this brings earlier in the process something that without prototyping would have been discovered only after the first iteration of the given feature, this save both you and the client time and money.

Obviously, since you are building something concrete (still a kind of sketch, but more concrete than just text) refactoring of the main plan is necessary. Since there are always continuing changes during a project, the process without a global view is too dangerous as it might lead to inconsistencies in the overall design and user experience of the application.

My grandmother says: the truth lies in the middle. Don’t think in absolute way, and don’t think without a global and elastic mindset. Approaching this you have to adopt the approach that works best with your team: every single project, like every single team, has a particularity that makes it unique.

It is about the project for the JRC of Ispra  where I worked till June 2008. It talks about association of indexes and how we can use them to organize a document. The article was split in three part:

• the first called “Networks of people” which analizes the history of tge JRC center
• the second one called “Networks of term and people”, that talks about the relation between the terms of controlled vocabulary and people that used them
• the last one called “Networks of terms” that analizes a specific thesaurus used by researchers of JRC.

All this work is around the new information retrieval system for the JRC based on the new thesaurus. This system is called SIRS, Scientific Information Retrieval System .

This is the only publicly accessible information about the work I did during the 2 years I worked for the European Commission at the JRC in Ispra.

There are many tech talks about it, but, instead, I wanted to talk about the approach to the prototyping.
For me, the most important concept is “user centered design”. An application becomes a RIA not for the technology with which it is built, but for its purpose.

RIA application takes behaviour from both, desktop and web applications. From the first one, it takes the standard menu terms (file, edit, save and delete), the tools menu and the direct manipulation of an object (like drag and drop). From the other one it takes the concept of design based on the content of the site, the information retrieval behaviour and the possibility to open my application and have my preferences everywhere.

All these paradigms have a very strong impact on the user. But we have to understand how we can use them.
The first thing to do is analyze the end user and his needs. At this stage the technology that will be use is not important. We have to analyze his working environment and the vocabulary used in his work.
The information architecture has the most important role designing a RIA: we need to have a strong foundation that is based on a common ground. A RIA is an application built to make a specific task, for example to write document (Gdocs) or to design wireframe (Balsamiq) and something like this. We have to think to a specific user, not a general user.

There are some other things to remember.
When we translate our analysis in a prototype, we have to remember that the user approaches a software first with his instinct and then with his rationality. This doesn’t mean that we have to make something for dummies, but that we have to design an interface that is easy to approach.

For example, I designed Rich Internet Applications (maybe I’ll design Rich Interactive Application based on desktop soon!) that are on the web and I found a paradigm to brake the web standard and create a “desktop area” on the web so the user can immediately understand the different environment: I think that this UI can help the user to have a correct approach with the application.

There are a lot of design concept that I put in my presentation. Here I talk about some of them. But I’ll come back to this topic again in the future.
You can find my speech here. I’m sorry but it’s only in italian for now.

When I designed the code of my blog, I choose some tag instead of others, why?
We usually forget the history of web and HTML language, when websites were only simple white pages with text and images. A lot of time has passed and we got used to complex graphic design.
We put all of our attention in it and when we design the code, we focus only in the graphic design and in building it in the best possible way. But we often forget to choose the right tags to translate the design in the code.

Every single element of the layout has a meaning and we can choose the right tags to translate the sign language of design in our code.
For example we use to identify our title with H1, H2, etc, but when we have a phrase, we have to think about: what type of sentence is it? How can I translate it in the correct XHTML to show its meaning throughout code?

This is my design:

I translate this design in XHTML as:

<small>5 Giugno 2008 </small>
<div class="entry">
	<p>
		<strong>Provenienza</strong>: Isole Mauritius<br/>
		<strong>Portata</strong>: Contorno
	</p>
	<p>La ricetta più richiesta dai nostri amici! Viene benissimo da portare alle cene estive o invernali che siano.</p>
	<h3>Ingredienti x 4 persone</h3>
	<ul>
		<li>4 manghi verdi</li>
		<li>2 cipolle</li>
		<li>3 spicchi d’aglio</li>
		<li>10gr di zenzero</li>
		<li>2 peperoncini verdi piccanti</li>
		<li>1/2 cucchiaino di senape</li>
		<li>1 cucchiaino di zafferano</li>
		<li>4 cucchiai di olio</li>
		<li>aceto</li>
		<li>sale</li>
	</ul>

	<h3>Preparazione</h3>

	<p>Sbucciare i manghi e tagliarli a fiammifero. Privare i peperoncini dei semi e tagliare anche loro a fiammifero. Preparare un trito di aglio e zenzero.</p>

	<p>In una padella far saltare le cipolle e poi aggiungere il trito, i peperoncini e lo zafferano stemperato in un cucchiaio di acqua calda. Aggiungere quindi i manghi, l’aceto, la senape e il sale. Rimestare ancora qualche minuto e servire con del riso bianco a chicco lungo (tipo <a href="http://www.cookingpiyo.com/2007/06/03/basmati-chawal-riso-basmati/" title="riso basmati">basmati</a>).
	</p>
</div>

Probably this isn’t the only way to write this code and maybe, it isn’t the better way, but I try to find the tags that show the meaning of the information that they have inside. What is important here is the decision, the process that we made to choose the right tag to match content and design.

Other example is to correct our behavior to use <B> in any case: we could use STRONG or EM instead of it!

The same thing happens with the tag SPAN: it isn’t a semantic tag, we can choose a better way to translate the phrase or the word inside of it focusing on the meaning of the role that it has inside the contest.

This is only simple and common example, but there are a lot of forgotten tasg in the (X)HTML as TH,CAPTION, DT/DD, SUB and SUP and so on: finding the right way to use them is up to you!

Technorati tags: semantic tags

A lot of our action are not immediately rational, we move fast at the beginning of an action (like to retrieve an information from a system) and than we use our rationality to understand it.
The designer has to stay in the middle: the design must be easy to understand and must allow an easy start of operations, but then must allow the user to wander through the design and use his intellect to understand the next steps.
It is very difficult understand the borders and stay within them. There are some books and authors that mark this way to me.
Here some of them.

The theory of Pirolli about Information Foraging. He says that the way humans search information is the same as our ancient instinct to search food and adapt ourselves to the ambient to survive. Information in our daily life is essential to work and live.
Many people that work in the UI design doesn’t know him directly, but thought the words of someone else. Reading him is more interesting and better than through the books and posts of many other more famous author that cite him.

• Ambient findability, the chapters about human behavior
• Bruno Munari. He talks about simplicity in design with enchanting way. Anyone of his books about design is good!
• Information Foraging, Peter Pirolli

These tree books are for me more important and useful than the thousands books from famous designers: they let me find my way to design in simplicity without direct laws.

Technorati tags: UIX

Balsamiq

LovelyCharts

LovelyCharts is a RIA application that allows you to designs most of the charts related to the application development, like flowchart, sitempas and Network diagrams.
Balsamiq is a more specialized tool, made specifically to design mockups only. It has a rich library of elements that you can choose and se to design without create it. It can cover a large part of the needs in designing an application from a simple website to complex rich internet or desktop application. It has a special library for iphone too.
And, there is also an external website which collects a lot of users’ designed “components” that can be reused in your own mockup: mockupstogo.com

Both applications use simple drag&drop paradigma, very clear content organization and architecture: the user can immediately recognize tool indexed by useful area.
For the use that I need , I prefer Balsamiq, for its clear tools layout and for multiple paths to find the right element (through a list for the novice users, and with more criptic but faster autocomplete search for power users). For example, I perfectly translated the mockup that I made in Illustrator for a Silverlight information retrival application I developed, in a very short time and simple way.
My application mockup made with LovelyChart

My application mockup design with Balsamiq

The original mockup made with Illustrator

Another element to consider is the different style of the two applications: Lovelychart elements style is like powerpoint, very simple and basic; Balsamiq uses an hand-drawn-like style for its elements. Even though this is not a functional difference, it is important for the look and feel of your presentation, because it give the sketch feeling.

To add to the big picture, Balsamiq can also be embedded in wiki and other web-collaboration tools. This allows to keep a centralized repositories of mockups.

Choosing the correct tool to realize your idea, in this case your mockup, can reduce the amount of time and let you to concentrate to your goal.

Technorati tags: UIX,data visualization,microsoft silverlight, mockup

Data visualization is becoming very important for the future application. With all the opportunities opened by  RIA applications you have to think about different way to design your applications: you can use both the web interaction patterns and usual desktop application’s ones. And the given that, the information architecture is different as well.

One important fact to remember is that if you have to represent complex information, you have to explain the meaning of the objects you use in your application to the end user, either in a direct way or making the “meaning” of the object very simple to discover. And once decided what a certain interface object does, use it in a consistent way throughout all the screens of the application.

The taxonomies have an important role to help the developers, because they use a clear paradigma to manage data and term meaning. You can apply them to your RIA application and declare it to the users so that they know how to use the same “vocabulary”.

I’ll speak about this and other RIA design techniques in May, at the all4Web conference, in Milano.
I think that I’ll come on this topic one more time in the future.
.
Technorati tags: UIX, WPF, RIA, data visualization,Adobe flex,microsoft silverlight

I work in a kind of media agency inside a big consulting company and I saw the following behavior: you have to to use Agile methodology with your team when you are in the development phase of a project, but the management behavior and the documentation required has to be written in a standard old and complex mode, like if you were adopting a waterfall approach, like Rational.

I think that talking and applying Agile practices even in little steps can create an interest about Agile also for the management side…hopefully . And if that fails it takes us into different way of thinking.

Technorati tags: UI design, Agile

For two years I was in a project for a scientific data visualization and I had the chance to dig into the theory of information visualization. I discovered a new world and a lot of paper wrote on this topic.
Nowadays, with new tools and framework for developing UI like WPF and RIA, it is becoming easy to develop interesting data visualization also for “everyday” applications.
But this requires a big mindshift in the way we design the user experience and we, as designers and developers, have to change the approach we use to represent data, and find more creative and meaningful way to represent complex data.

I think that data visualization is an important step in the future development of UI construction and for this reason I want to share with you some pointers that I found very useful during the studies in the last years.

Here are some books I recommend:
R. Spence [2007], Information Visualization, Design for Interaction – 2^nd ed., Perason Educated Limited
E. R. Tufte [1983], The visual display of quantitative information, Graphic Press
E. R. Tufte [1990], Envisioning Information, Graphic Press
Stuart K. Card, Jock D. Mackinlay, Ben Shneiderman [1999],Readings in Information Visualization, Morgan Kaufmann

A good online resource is http://www.visualcomplexity.com/ that contains a collection of many data visualazions, grouped by types and shapes.

And if you have the chance to attend to MIX09, there are a few sessions about data visualization as well.

Technorati tags: UIX, WPF, RIA, data visualization

Today I read this post on Noupe and I found something quite interesting:

• SenCSs that can give you a basic styling for forms, common classes and typographic standard across browsers, it’s very clear and basic and does not have grids;
• From the comment that I had read and by what I saw the 960 Grid System and Blueprint are very good and rich CSS grid framework.
• YALMseems good too, but you have to purchase the license if you want to use for commercial purpose.

SenCSs introduced a good idea: it builds a library of common element, but it is not a full grids system.

As I already said in a previous post, I think that CSS frameworks are very important because they allow a fast and easy start, but you have to chose the one is most suitable for your style of development. So, if you are not already use one, try to find some time to look for alternatives and play around a bit with them before you use them in a real project.

Technorati tags: frameworks, CSS, SenCSs, 960 Grid System, Blueprint, YALM

For the new skin of my blog I tried to use the “good old” simple tags, which I choose based on the content.
For example I preferred to use semantic tags if they were good for the content I wanted to display, like cite and quote for a citation rather than a using a generic span. This a thing that most web designers forget: there are tons of tags, but most of us always use div, span, p and lately the ul/li. But that’s the topic for another post.

I developed the skin on a Mac, so I developed it using Firefox, and then I tested it on Safari and then Opera and the skin was looking good on all these browsers, without any change needed. But then I fired up with Windows VM to test it with IE7… and here came the problems.
I accepted some differences, but I didn’t want to change my idea of using a definition list (<dl> with nested <dt> and <dd>) for the list of photos and titles.

The problem is that IE renders a definition list completely different from the other three browser. So, to solve the problem I decided to change the way I implemented the graphic separator between the images: instead of just having a background on the <DL> I decided to use a <hr /> to separate each item group (description + title) and then to give it a background in order to have the graphic rule instead of the usual boring solid line.
And again there was a problem: IE doesn’t render the background of the <hr />. A simple solution would have been to drop the line, replace it with a generic div, and give it a background. But then I would have missed the clean markup given by the <hr />.

So I decided for a mixed solution: I just write the hr in the html, to keep it clean, but then make it a div with a background at runtime, using jQuery.

Let’s start with the HTML markup that we want to achieve:

<div class="hr"><hr class="Img"></div>

But I don’t want to write that code, so here is the markup that I write:

<hr class="Img" />

And the CSS that I used to style the <hr>. Notice that this style applies both to the <hr> and the div that will wrap it.
The height property is set to the height of the image that I want to use to replace the <hr>.

hr.Img, div.hr {
background:#FFFFFF url(images/coolHr.gif) no-repeat center bottom;
height:20px;
}

Then it’s time for the javascript.
First in the <head> I called the library (here I used the minimized version of jQuery hosted on Google):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

And finally, in a script block, I put this javascript function:

$(document).ready(function(){
$("hr.Img").wrap("<div class='hr'></div>");
});

That code just selects the <hr> I want to replace and wraps it with the container div.

The results of all this work is the dark green line you see down below.

Technorati tags: css, IE, jQuery, hack

I think that it’s very difficult to make a “catchy” presentation using PowerPoint for such an user, because he is driven by the tool to a wrong approach. But PowerPoint is the most used application, the most usable software to share short presentation and it can be used for any topic and target.

After a series of boring presentation with speakers whose body language says the opposite of the concept they want to expose, my question is often the same: which was the message?

When we approach a presentation the first question should be: which is the message I want to transmit to the audience? How I can say it without boring and leaving a positive sign in the memory of my audience?
So I have to pay attention to the focus. Then organize the content in a logic way, that will be immediately clear to my audience.

We can put a summary in the beginning and other one at the end of presentation: it naturally drives to the conclusion.
We could introduce the topic area and then go to the focal point. It’s not necessary to write everything in the slides, only the most important things: pay attention to the words you write and give them the right place on the path of presentation!!

To better explain the content, metaphors and examples are very useful. We can introduce pictures, one per concept that we want to discuss. It’s not important the pictures’ quality, but the association of pictures and word. We have a visual memory, so if we use image and word associations it’s easier that we’ll remember a concept.
Don’t forget that people don’t have an infinite capacity in our memory, so if we use few concepts and spend time to explain each one, we help our audience to remember.

And don’t forget to repeat and summarize every important part of your discussion.

If you feel confident with the audience, you can introduce some jokes during the presentation, especially when the topic is very difficult and you see the person in the front raw close their eyes

So what do we have to remember for our next presentation?
One slide for each topic (more than one only if is really necessary), metaphor+concept association and leave EMPTY SPACE on the slide: don’t put a lot of phrases, pictures, data on it!
If we build our presentation that way, clear and simple, where we can introduce effects? And why? Are they really important to focus on our topic?

I leave the answer on your decision.

I leave you with two links:

@media 2008 (and the old version):  here are some presentation made by “designer” to designer. They are static pdf presentation and they are pleasant and useful .. this leads me to think…..

E. Tufte: One of the data visualization guru. In this article he starts with an example that puts the focus on the importance of organizing the content to expose the topic in more effective way.

Technorati tags: PowerPoint, presentations