Adaptation

Irina Palichorova — Tue, 21 Aug 2007 20:20:00 GMT

Last week, Nike and I attended Adaptive Path's UX WEEK 2007 conference. It was great to meet colleagues from all over the world and exchange ideas and thoughts. Also, it was pretty cool not having to explain what user experience is - everyone there just knew :). And there was a lot of "I see what you mean" and "Yeah, I felt the same way back then" and also "We had to deal with the similar issues in our work" and stuff. I must say that felt great. User experience at the moment is more like an evolving theory or science in progress - nothing is written in stone, we learn mostly from our own mistakes, from reading blogs, articles and books. This is why creating a strong UX community is important to all of us.

Adaptive Path has done an impressive job collecting speakers from different areas and covering various topics, view points and work approaches. From agile development to research and documentation, from mobile technologies to adaptive interfaces, from user centered design to usability and accessibility techniques, it was all a treat. Among the speakers were Deborah Adler, Jessie James Garett, Jared Spool, Liz Sanders, Dan Saffer and more. The keynotes were truly inspirational - we saw happy faces of people who are helping children to get better education in countries that have no electricity, helping diabetics lead a normal life without worrying about their insulin levels all the time, creating new pill bottle that is easier to read and user oriented or leading innovative research programs and traveling all over the world to study people's behavior in their natural environment.

My personal favorites among the sessions were Best Buy case study of user behavior research, Joshua Porter's lecture about the psychology of social design, CNN.com relaunch case study, Stephen Anderson's presentation of the adaptive interface, Kate Rutter's powerful demonstration of the use of post it notes in brainstorming and last, but not least, Liz Sanders's workshop of participatory design. Most of the session slides are available online, so feel free to download those you find interesting. You can also check photos on flickr, lots of precious moments there :).

UX WEEK sent one message trough all lectures - work together, don't just stay in your team, step into other people's shoes - sales, marketing, development, users. All of the great products and applications, demonstrated during the sessions were presented as a result of collaborative effort. In fact, I believe every great product is.

How to Make Design 2.0

Irina Palichorova — Mon, 16 Oct 2006 23:43:00 GMT

When they gave me a task to make a web2.0 skin, I was absolutely sure: web2.0 has nothing to do with design. All 2.0 sites are 2.0 because of their functionality, not because of their appearance. It's as simple as that. No skin on earth can single-handedly turn your application into web2.0 if it's not 2.0 already.

So what is web 2.0?

These are user oriented applications providing services instead of selling product. Usually the service is free (gmail), or low-cost (flickr paid accounts), rarely requires installation and it is updated and maintained on a daily basis (flickr). Web2.0 apps are also exclusively data driven - they live trough their content and cannot exist without it (myspace). The content is generated and in some cases even maintained by the users, creating "the network effect" - the more people use the service, the better it gets (bittorrent). Web2.0 allows for much more intuitive categorization of information by using tags (flickr). It encourages remixing, rewriting and contribution.

Ajax plays a major part in web2.0 in terms of technology. People don't have to wait for something to load, they see it immediately.

From a marketing point of view, web2.0 is the exact opposite to web1.0:

In web1.0 you have a product and you try to promote and sell it trough the internet;
In web 2.0 you build a community by providing a free service and then make a profit.

How is the 2.0 concept connecting with design?

All this results in simple, friendly, and intuitive applications. Minimalism & usability are the key words when it comes to web2.0 layouts. It is all about making things easy, soft, light, and smooth. 2.0 apps should feel like cute, big-eyed pets. These are some of the most common graphical elements that get the job done:

Oversized Fonts
It was something we all grunted about in the beginning: Why is everything SO BIG? I have only one answer to this and it's the exact same thing the big bad wolf said to the little red hood: "So you can see it better, my child". It's all about improving readability. While 11 was the normal size for reading text in 1.0, nowadays 12 is the new 11 and 18 (even 20) is the new standard for titles. Big sized fonts are simply a must - ask anyone.

Arial
Web2.0 returned Arial back to its glory days thanks to oversizing. While it looks cramped when used in sizes like 8, 9 and 10, it is ok on anything above 11 and shows its full potential over the 14th pixel. Arial is much more 'rounded' and smooth compared to Tahoma, for example. Used in: skype, digg, last.fm, del.icio.us, etc.

Of course, Arial is not the only web.2.0 font - Verdana and Trebuchet MS are also widely used, Interstate Black (37signals) and Arial rounded (skype) are popular in logo designs.

Bright Colors
Remember when we talked about user friendly applications? Look for airy, innocent, childish palettes:
pink (candy) + blue (innocence)= flickr
green (fresh, clean, young)=newswine, wayfaring
blue(sky) + green(grass)=blinksale
blue(sky)= skype, myspace, del.icio.us
blue(sky) +yellow/orange (sun, fresh, fruity, juicy)= digg

Bigger text fields
I love those. They make user data look so important. And Big. And readable. They are suitable for username/password sections, newsletters, search fields, anything significant that needs to be seen. 2.0 apps usually have big and small text fields. The small ones are used in large forms or for less important data.

Big Icons
Icons help people navigate. Lots of 2.0 apps are using them to visually explain their content - take a look at last.fm and wayfaring. Because of their size they look like illustrations or cartoons, but still keep a slightly scientific appearance.

Blue underlined links
Jacob Nielsen's favoriteJ. Since web2.0 is about drastically improved usability, no wonder they are such a hit. When you are building web2.0 application, you want people to know where to click.

Rounded shapes
Well, it's not like they are a must. Of All 37singals products not a single one employs a rounded shape but they are all as 2.0 as it can get. To achieve a smooth, softer look, it certainly helps to have some, though. Examples: wayfaring, digg.

Gradients
Some use them (yahoo, last.fm, 37singals, digg) , some don't (flickr, del.icio.us, google). They come handy when you want to achieve smooth, soft surfaces.

Shadows, Glassy effects, Reflections
I am putting these together since they are all not mandatory. I think of them more as of a fashion line that does not define 2.0-ness, but exists within the 2.0 breathing space and is therefore often associated with it. I believe minimalism is a distinctive feature in all web2.0 apps and these design approaches conflict with its idea. Still, they help achieve the innocent and smooth look and this is the reason they are used so broadly.

In conclusion

I don't think there are rules written in stone what makes your design a 2.0. All you should have in mind is that the user comes first and design serves a greater purpose than simply promoting your skills. Be generous. Design for all people. This IS an art too.

Irina Palichorova's blog

Adaptation

How to Make Design 2.0