KEYWORD: INTERACTIVITY

The lait motif of this design & technology conference was the interactivity as part of everyday user experience. Both if you are navigating the Net or visiting an exhibition the most important thing nowadays is to interact with things around you.
We all like to click everywhere on the screen when there are buttons and icons showing that "something is going to happen then" and at the same way we would like to touch every paintings and sculptures or installations we see in exhibitions. We all want to interact, we all want more action, that’s the main point now. In the design process we must consider people necessity to use things, to find them attractive and even useful, we must create really fancy interfaces even when we follow the usability strict rules.
The world we live today it’s full of new technologies, futuristic approaches and everything it is changing so fast, our minds are most of the time incited by millions of images, videos and sounds so that it’s difficult to capture someone’s attention in a very effective way, in order to make him/her buy or use our product or service. And I doubt it will become easier in the future.
That’s why designers and developers are always looking for something new to surprise people.

At FITC I attended many interesting speeches about the way to use code to create amazing effects, 3d interfaces and website where users could interact with characters inside, and I got really useful advices on how to approach design projects. There were a couple of big company showing great examples of video installations or structures which could interact with the environment.

About the 3D and original interfaces I think that Carlos Ulloa’s work with Papervision3D was really something different for users, you can take a look to the Sony Bravia project to get the idea. The kind of interaction you can have with this tridimensional space is great and the way you can move between different levels to read information or to play with images gives you a real new experience.
It was interesting to see how GMunk use a complex 3d software as Maya, to create really nice special effects in his video ads, even if I found his website a little bit difficult to navigate:) have a look at some of the motion graphics work he has there. How dynamic media design and development converge was the focus of Remon Tijssen (Fluid) presentation, he showed some games’ interfaces where the most important thing was the entertaining part. Flash has been used just to let users play and have fun with characters or environment inside a game, not paying attention only to what a functional application is.

About the special effects I can say that we should call people like Joshua Davis and Erik Natzke artist more than designers, they found the way to use code to create pieces of art, to transform letters and numbers in beautiful moving effects, it was interesting for me to listen how they can found themselves, naturally, writing code in order to reach the final results they have in mind, that was something visible as a static image or a dynamic one.

Anyway, as I saw during the presentations about projects of big company as Imaginary Forces , Bigspaceship or designers as Nikolai Cornell, we can find interactivity not only on a computer screen, but even in exhibition or inside an event going around the showroom. It was amazing to see how architecture can be mixed with technology creating decorative video panel placed on buildings that interact with the weather, changing colors or movies to show, or the entrance door of a car expo that people could touch to get information. I think this is our future, the structure around us can be part of our everyday life not only because they are schools, offices, houses or bars, but also because we can mix pixels with glass, wood and every kind of material to make them interact with us in different way so to be even more useful.

On the other side of the interactivity concept there was a discussion about communication and how to approach design project even with different media. Keywords in these case were: simplicity, detail observation, sharing ideas, experimentation and passion. I agree with Aral Balkan when he says that software are only instruments like brushes for painters and that we must look around us to see how things change, we should use all kind of services on-line to understand better what’s going on in the Net.

If we think about communication generally it’s important for a creative mind to ask the right question while working on a project even if it’s a poster, a logo, a brochure or a video, and Robert L. Peters suggest us the most important ones: how, why, what, whom, when and where. Maybe this seems to be a commonplace idea, but when we are creating something for other people, not only for ourselves, that has to be seen by different people, that’s the way to think because we are part of a big world with lots of different cultures, different way of living, of behaving and we are most of the time responsible for what we do in our works.

In any case all the speakers at Fitc agree with one main point: the real secret for everybody success and to get satisfaction from the work you do, is to work hard, or like hell as someone said:)

It is interesting to see how big companies choose Flex to interact with costumer on their websites. We are used to see lots of nice widgets created with this kind of technologies but maybe a little bit less used to find useful and funny applications in the Net. Let’s give some example!

On Harley Davidson website there is a really nice application where you can customize a bike with all the accessories and even get an estimation of the price and of a monthly payment solution. The interface is really easy to use, it has a clean design with few icon, some boxes to show images and contents, they have used some of the classical Flex elements as accordion and tab menu.

You can see accessories in details and add them on the bike in order to see in real time how it will be the final result, for every pieces you can read detailed information and if you change your mind about one of them you can always take it away from the bike and start looking for something different.

This is a different approach to interact with costumer, you can tell that it’s not a game because of the professional interface concept, all the information are detailed and you can really buy a 14.000$ bike but at the same time you can just create your own perfect model dreaming to have it maybe one day:)

http://customizer.harley-davidson.com/GMA_customizer.jsp

---------------------------------------------------------------------------------------------------------------------------------

Another nice Flex application is the HP Print Studio, it’s free and you can use it to create customized calendar, greeting cards, invitations and even business identities.
The interface is user friendly and it is easy to follow every necessary step to print you project. In this case HP designed an interface with more interaction than the HD’ s one using elements as lighting menus, pictures floating, horizontal navigation and pop-up window to show the selected item and to see some advice from the company about the right paper to use in order to print the project. The zoom system is very useful.

That’s a good example of promoting products letting people have fun with a nice tool.

http://h30393.www3.hp.com/printing/app/us/en/launch.aspx

---------------------------------------------------------------------------------------------------------------------------------

Speaking about widgets there is a nice one created by AOL that shows music videos using main categories as pop, country, latin, hip hop, most watched etc.

It has a plain interface but very effective and easy to use, it gives you information about the artist and the song and the chance to create your list of favorites and share it with friends sending an email directly inside the application or even copy the code to post it on a website. It has some nice features to customize videos views and even the interface views as full screen mode or as side widget.

You can download it here http://music.aol.com/help/syndication/desktop-widgets

Have fun with all these applications!

Talking about graphic design and image editing I have tried two interesting Flex applications that you can use to work on pictures adding effects or just text layers. They have both a direct connection to some of the most famous community websites as Flickr, Facebook, Picasa or even to personal website.

http://www.splashup.com this is an image editor similar to Adobe Photoshop. The interface is plain but nice to see and very easy to use, it’s perfect if you don’t want to waste time to understand a professional image editor and you need just to do fast correction or adding some simple effects to an image.

The interface is designed in order to let the user move all the window inside the workspace which is one of the main characteristic of Flex applications.

The only thing I can say it would be nice to see updated soon, is the effects section which is a little bit too much empty, it would be nice to have the chance to play with many different kind of special effects and not only with blur, desaturate, emboss ecc. So let’s check in some weeks if there will be something new in this application:)

http://www.flauntr.com/ This editor it has more buttons, sections and tricks to use on your images.

The interface is not as user friendly as the other one, but you have the possibilities to transform your pictures in something different adding funny frames, overlay graphics, text, effects and then transform the image to fit the size of your mobile, some magazine covers or the profile picture of your social networks. This is a very useful and nice thing to have on an application like this.

The interface is more static that the one we have seen before, but you can navigate all sections using a TAB navigation for the main menu and using an accordion menu for the effects to apply.
It’s interesting to see how Flex is starting to be used not only to create widgets, commercial websites or private company applications but also to create alternative on-line tools for private or professional users to work with.

There are different way to skin Flex components when you design an interface, but the easiest for me is doing it using Adobe Illustrator. I’ll tell you why.
The first thing is that, most of the time, the kind of graphic we create for an UI is vector-based and Illustrator is perfect as a software to create vector-graphics: really handy and with lots of useful tools to help you drawing. Then it’s even more simple if you install the Flex Skin Design Extension from Adobe, you can customize standard components already created with all the status you need. But even if you want to create symbols from the start you can do it in few minutes. Of course you can use all Adobe design software to create graphics to design Interfaces, I guess it depends on what is the one you like/know/use more, personally I use often Photoshop also but still I think that Illustrator is faster and it coops with Flash very well.
After you got the Flex extensions, with few steps you can create a movie with buttons and all the components you need. Let’s say that you want to create a button set for your UI, so you open Illustrator, go to File > Script > Create Flex Skin (sorry but the pictures here will show an Italian version:))

Then from the list you see you can choose the component you need

And this is what you will get, if you go to see the Symbol list in the Symbol panel you will see all the Button components.

You can custom every symbol just with one click, but if you want to create a new symbol from the start it’s as simple as customize the standard one. Let’s open a new document, with the shape tool create a button

Then go to the Symbol Panel and save this as a new symbol, a movie clip with the scale nine option

And you will have the firs status of you Button component, isn’t it simple?:) and if you clik on it you can adjust the scale nine guide if you need it.

At the end of the work you can use the File > Script >Export Skin to generate the swf or you can select the symbols and with Copy&Paste bring them to a Flash file if you need to work with more properties. If you do that just remember that sometimes it happens that when you import a symbol from illustrator you must reset to zero the XY value because they change.

So, don’t you agree with me that Adobe Illustrator is a really handy software to create graphics for User Interface?:)

One word: cooperation.
This was the lait motif of this Adobe Max conference held in Milan this year.

The Adobe strategy is to create just one big set of tools (software) for designers and developers, that will really help them to be fast and effective doing their job. That’s why software as Illustrator, InDesign really talk to each other now. The new Adobe CS4 collections have inside everything we need to create 2d, 3d, video, animation projects. But the really good news is that designer and developer will really work together in the future and this is a big thing, believe me!:)

Adobe new technologies will help to fill the gap between the two worlds, with Flash Catalyst and Flex Gumbo designers and developers can create RIA with a different approach and this will streamline the project workflow. Designers can now create an entire interface using Illustrator, Photoshop or Fireworks and import the project into Flash Catalyst, so that every single element will be part of the skin and it can be customized with all possible effects. The generated code can be easily modified by a developer, they will have FXG file in common to work with. Flash Catalyst is only a preview version, but we can already use it to simplify the skinning procedure in our projects and to start to really coop with developers speaking a common language, so let’s try!

Another big thing was the use some company did of Adobe Air technology to reinforce a brand of a client creating animated widgets, the idea is that those widgets can implement a website traffic bringing contacts to it. A widgets must be more like a game you can play with and it has to be really good looking, that’s why icons, effects, colors and graphics in general play a key role in creating an Air application that people will want to install on their desktop and use constantly.

It has been a nice surprise to find out that 3D tools now are even inside Photoshop and Flash and that they are working more and more as they do inside 3d software, so a designer can create really nice graphics and effects for a project with all this new functionalities. In flash there are other interesting changes as the Bone tool that will help a lot to create animations and the motion tween function that now is so simple to add.

Costumers and users nowadays are really demanding and we must pay more attention to details when we work on projects , all these tools and software can help us to create effective applications, adds, videos or every kind of work we are supposed to do, the common aim is to work faster and to spend more time in creating than in trying to understand how to use the tools we have, Adobe has always been really good in designing their software interface and now they are trying to do more to help all of us to produce high quality works and I think they are doing it the right way;)

Between October and November we held a couple of events for the italian Flex User Group (FlexGala) and Adobe Italy (Adobe TechConnection events).
These are the urls to some of slides and examples showed at those events:

• Architecting ActionScript 3 applications using PureMVC, by Emanuele Tatti (RIA Engineer at Comtaste)
  
• Designing Flex and AIR applications, by Kira Garfagnoli (Creative User Experience Designer at Comtaste)
• Applying the DAO design pattern withing AIR applications, by Marco Casario (CTO Comtaste)
  
• A PureMVC example that invokes a Java remote object using the RemoteObject class and BlazeDS (zip file)
  
• JMS Java Producer (zip file)
  
• JMS Messaging (zip file)
  

I've created a project to explain how to use the "Flex Dashboard Panel library", here the link of the live application complete of source code.

The principal component of the library are:

1) DashPanelContainer
A canvas Container where we place all the DashPanel window.

2) DashPanel
The window container where you can put all your content.

3) DashLayoutManager
A static multiton manager to control the dashboard.

4) DashPanelEvents
Control your panel programmaticaly using events.

DashPanelContainer properties:
1) dashed:
All DashPanels inside will be tiled to fit on the container and panels can be only switched with each others and not resized.

2) snapped, snapSize:
All DashPanels can be moved and resized constraint to the guide drawed on the background and the snap size can be changed trough the snapSize propeties

3) Nothing:
All DashPanel can be moved and resized without constraint.

DashPanel properties:
1) closable, minimizable, maximizable, draggable, resizable
Control what the panel can do

2) titleBarHeight="20" default 35
Set the height of the title bar if your skin need this.

3) icon, iconXOffset, iconYOffset
Set an icon property an control the position with the offset

4) title, titleColor, titleXOffet, showTitleText
Set the panel title and decide if you want to show or not and where with the offset

5) status
Return the current status of the panel. This status is defined trough constants property of the DashPanel

DashLayoutManager methods:
1) getManager(container.id)
Retrieve the pointer of the manager by passing the container id instance

2) getManager(container.id).tile();
All DashPanel elements will be tiled to fit the space.

3) getManager(container.id).cascade();
All DashPanel elements will be cascaded.

4) getManager(container.id).bringToFront( dashpanel )
Set in fron the element if this is inside the container.

5) getManager(container.id).getOpenedPanelList()
Return the list of current opened panels.

DashPanelEvents:
Using the events you can listen what happen at your panel, but also you can dispatch an event to force panel do something.

1) MAXIMIZE, MINIMIZE, RESTORE, CLOSE
Listen or dispatch this events to control your panel

2) PANEL_MOVING, PANEL_RESIZING
This events can be only listened and inform when panel is currently moving or resizing

3) STARTLOAD, STOPLOAD
Dispatching this events you will freeze the panel and a progress bar will be shown

That's all! Now you can create a fully dashboard application.
Flex Dashboard Panel library Example

When I create components for applications, as I already said in one of my previous post , I usually use Adobe Illustrator. I found out that sometimes, when I export an swf with my skin directly from Illustrator, it doesn’t work properly, so I import my components into Adobe Flash and then I put all the properties I need and finally I export the SWF file.

During this process something happens and I want to share with You some problems I’ve got.
When I create a symbol as a button with some gradient and a little arrow inside or some other graphics

and I import it into Flash, sometimes this components are transformed into a bitmap image without any reason, or at least I’ve never found the reason:)

If I check the properties when I do Copy and Paste from Illustrator to Flash, the “paste as bitmap” voice is not selected so this is not the problem.

When I discover that my symbol is a bitmap instead a vector element I just import it again from Illustrator since it’s ok and most of the time the only way to have a symbol that works, is to take away the shadows effect... :(

Another problem I had during this interaction between the two programs is that when a symbol has inside more elements, like a button as the one I’ve used for the first example, when I import them into the stage in Flash this is the result:

The Icon seems to have some troubles and it doesn’t appear as a vector element. In this case when I open the movie clip I discover that the graphics inside is divided into groups of elements

so I just get inside the icon group (I mean generally inside the symbol that has a problem) and I copy and paste it directly into the Movie clip keyframe/stage, taking it out from the group and so, surprise surprise, it works!

The third things I want to show you is a problem I had with 2 panels.
This is the image of the two panels I had to put into my application, there is a header and a panel under the header that goes up and down as you want to see the menu or not

This was the skin I created

With the developer we put it into Flex as a skin and there were problems with the movement of the second panel, it was like when you opened it, this panel was not well aligned with the other one and the icon “close menu” was moving all around.
After many, many attempts…lots of stress and trying every single logical solution we had in mind, we thought to move a little bit the graphic inside the movie clip element, changing the X and the Y from 0,0 (the value they usually must have to work properly in the applications) to 2.1, 1.0

and we still don’t understand why everything worked perfectly!

All these examples are to say that, even if we respect all the rules we know designing interface, often strange problems occurs and we must try to find a new way to solve those problems thinking with a creative approach and trying all the possible solutions even when they seem not to have a logic reason:)

When you have to plan a Rich Internet Application from the start it’s quite easy, i mean that you have the freedom to follow the right workflow in order to guarantee your clients the best results. You can think about target, markets, you can plan the navigation and design the interface taking care of every important rules, but what happen when you find yourself in front an already made application and someone ask you to do the restyling?

Most of the time talking with clients it’s not so simple to make them understand that a very important part of an application is usability, that is not only a matter of “this or that color, this or that icon”, so in those cases we must work hard doing our best to get a good compromise between “the best and the worst”.

When we look to an application that we haven’t planned, the first thing is to see how the navigation works and what this application is supposed to do, how it is the interaction with the end users, if it’s handy or complicated to follow, then we can start to find some solutions to fix the problems about usability and, at the same time, we should give some advices about the look and feel of the entire application.

If there is enough time before the final deploy we can create graphical skins for components using Adobe Illustrator, Flash or Fireworks or we can change styles of component using CSS approach in Flex. This is the best choice if there is no time to create graphics and there are even good links to help us when we are in a hurry:)

The CSS style explorer of Adobe Flex is a big help when you want to be fast, it shows in real time how the style of a component can change and, after you have defined your own style, it is possible to copy and paste the code in your application

The same thing happen with the Components explorer, here we can see how most of the standard components we use in our RIAs are made

The difficult thing being a user interface designer or a designer in general, is to make people understand that our job is made of different parts, that we take care of some practical aspects not only of “esthetic”. We design, but first of all we follow a process which includes theory before practice.

In Adobe Flash Catalyst the states concept is really important but a little bit hard to understand immediately, let’s try to catch the sense of it together.

With this new Adobe tool for designer, working on Rich Interactive Applications will be a lot easier and the cooperation with developers will be as close as it has never been before. The software interface is not the final one, the version available now is a beta, but still we can use many functionalities. Flash Catalyst is different from other Adobe design tools, maybe who use Flash will be familiar with the general approach.

The states in Flash Catalyst are referred to Pages and to elements inside a page and they represent different views of the application. We navigate between different states but in the same way they can be referred also to a component, for instance a button has state such as Up, Over, Down, and Disabled.

In the interface the right side is dedicated to tools and panels as Libraries, Layers and Properties, up to the stage there are indications about pages, components and states.

I created a very simple application as an example that has two pages Start and End, where you can click on a button “click here” to switch to different states/pages.

In Flash Catalyst interface you can find the states also on the left side of the Timeline. Here you find the States transitions panel, remember that in this tools transitions are taken as separate parts of the entire navigation, this means that you must put properties thinking of a "round trip".

When you double click on components their states are displayed on the same part where the pages/elements are and this can be a little bit tricky, maybe the component state should be represented in a different way, graphically speaking. Anyway as in Flash, we can always go back to the previous element using the menu up on the left side of the stage.

We can say that the states represent the condition/status of pages and components, more generally the concept indicate what an element is doing before and when users interact with it.