I’m restoring my blog after that it was hacked. It will take me a while and some thoughts about my visual identity.
In the meanwhile, you can always find “all about me” on my Twitter and here following.
I was born in Italy, but I call Brussels “chez moi”. I’m curious especially of the little simple things of the everyday life, how we interact with the world around us and I’m in love with the nature.
I developed my carrier into the User Experience world starting from the philosophy of language through the art, to realise a creative communication for human beings.
Art is my intuition and User Experience Design my vision.
I applied to the media design the research on the personal and intimate perception, to conceptualise our instincts and our approach to the world.
In the last years I moved my interest more on the cognitive and psychology studies for creating an emotional experience of the information.
Starting from the previous post in which I talked about the relation between visual art and UX , I would like to share with you more insights about a methodology coming from the narrative, that is actually part of your daily life as UX designer: the Storytelling. I asked to an artist with who I worked with, Diego Mazzaferro, to introduce the subject of Storytelling applied to the visual art, to give a better understanding on how this works. Building the bridge between the Storytelling’s usage in visual art to the User experience design, is evident from this post.
Me: Why do you create this link between art and Storytelling? Diego: It is possible to successfully apply the logic of Storytelling, originally intended for the art of writing, to the visual art. Especially because it is still an unchallenged domination of spontaneity without rules, but we need some rules to create… Rules are made to serve, not to enslave the mind and exceptions are a way to better-fit rules into your work! Here following, I can explain you how.
Me: Could you introduce the Storytelling methodology? Diego: A narration is composed of two basic elements: time and contingency. The narrative is strongly tied to memory. Memory places events in ordered sequence that you can see as a “straight line”. Narrative does the same: it defines an order of key events one after another, it records a sequence into your mind, like the memory’s straight line.
As it’s made for humans, art is a social object: it has its own space, has its own time, and its existence depends critically on the perception of the subjects. “A sculpture that size can only be seen from Mars cannot be a work of art” (ref. Maurizio Ferraris).
If you think to the art in terms of communication, you can define the similarities between the act of Storytelling and making art.
Both forms of expressions first start from a pretext (the idea) and then define a text (structure) amending and redefining the pretext itself by giving a new view, that we can also call, new morality. Why this name? Let me do an example. If I use an old story to express a modern concept, my audience will not understand the goal behind, because it’s too far and old related to their lifestyle. So we need to “create” a new story based on the old one to adapt it to our time.
Beyond this first point in common, there are others numerous points shown in the following graph:
Each of the points expressed in the chart deserves a separate discussion, but to better define the situation, we are now going to develop the concept of structure, comparing the structure used in narrative to the structure of a visual work.
Looking at the chart, you can recognize the cyclic structure of a narrative. The same you can apply to a visual work, switching from an ordinary world (reality) in an extraordinary world (utopia) and then finally return enriched to feel and know in an ordinary world, in reality.
Vogler, a writer that worked for Hollywood, wrote clear guidelines about this structure. Starting from the schema that he defined for screenplay (Hero’s Journey), you can recognise: ● The main character that has to accomplish a mission and to realise it, starts a “trip” > the public that goes through your work ● The mentor >the introductory concept that explains your work ● Characters that help him/her accomplishing the mission and Characters that are against him/her > There are helpers comparable to the objects represented in the art work ● There is even the antagonist who is identifiable in that part of the work that goes some way to obstruct the clear understanding of the message ● There is the reward and the return to reality enriched by a new feeling and a new idea.
For me, these concepts that I’m telling you, are the basics to start exploring and understanding how certain rules can help creativity.
Me: I think that there so many useful point to inspire the design and not only the art, I even don’t know where start to point them out!
Conclusion. Also if literary text and a visual work use different approach to provoke emotions, one describing and the other evoking, it’s evident as you can use the same rules applied to the storytelling to structure your project working on making art. It’s also evident how Storytelling works for art, much more can be useful into user experience design, to structure users’ stories. Maybe you already use this, but now you can have a deeper knowledge and references.
Some months ago I worked on a project together with an artist, and now I’m working with him again. I would like to share this experience with you this it shows very well how UX can benefit from an artistic point of view.
If I had to chose a pitch to describe my carrier, it would be this one: “I evolved in carrier as User Experience Expert starting from the philosophy of language through the art, to realise a creative communication for human beings.”
Working between visual art and design inspired me, pushed me to accept rules to manage creativity and at the same time, gives me the vision to break them with consciousness. I always leave an open door between the two, both for professional and personal reason.
My artist friend Diego Mazzaferro, asked me an help to make a video animation.
What I did was to analyse the concept that he wanted to communicate and the media chosen.
Then I applied my knowledge about human behaviours in order to better match the purpose with the user’s attention through a bunch of guidelines, more or less the same approach used on my daily working life.
The result was a full video (here the teaser) and a beautiful experience. I had part in other art project and I worked with him other projects, but in this I applied the user experience design with consciousness for the first time.
What did I learn?
He uses the Storytelling technique to design his visual works. And working with him gave me the possibility to think and to deep understand how this technique works. I use it since long time, doing storyboarding, personas, user’s journey, but I never asked to my self where it comes from and why it works so well.
This experience gave me two inputs:
how I can improve the visual work of an artist (video, photography, installation, etc.) thought the UX knowledge
the will to go deeper into the storytelling technique.
In a future post I will share with you more about the Storytelling technique.
Marketing needs UX, more then ever. And when they meet each others? A SEO campaign is an good example. It’s more work on webmarketing side, but without a proper UX is not possible to apply the marketing strategy.
What is a SEO campaign? It is an investment from a medium to long period in order to improve the findability of a website.
Which are best practises?
Quality and updated content
Relations with other website and media
Technical side: sematinc HTML and keywords
Social network presence
In the early beginnings, for SEO campaign we tought only to the technical side, keywords and code written in a semantic way. But we thought only for search engine, while a SEO campaign is much more. To influence the search engine there is a real strategy to adopt, especially now the the google’s algorithm gives less importance to the keywords and more to the content graph. The content needs to have a user context in which is enhanced. I imagine a marketing specialist and a UX designer talking about content and building the interface with it, driving the users and creating consistent way to talk with them.
Think to the pay-per-click campaign or the A/B testing, do we use them to understand and to improve the conversion regarding the number of visits in your website? This is another perfect mix between UX and marketing. Designing a different user’s context, giving a disposition and a visual weight to the content, it’s the way in which the designer adds value to the information. The designer drives the marketing specialist to find how to communicate the content.
Creating a consistent experience throughout the social network and website starts from the image’s planning: another time UX and marketing can influence each others through a dialog oriented to balance the marketing goals and the respect the users’s perspective.
Building an experience starts from the team that is working on it. We cannot think to work anymore in closed circle, where everyone does his own task, but we should be aware of the tasks of each one si involved in a planning with an horizontal vision, it will increase the consciousness and the respect of the other’s work and the product’s quality.
In my past experience, design was just a mean for the marketing, but time are evolving and user experience design is much more involved in “marketing matters” then before. The SEO campaign, the A/B testing and the planning of a consistent content experience are just some examples on how UX and marketing can work closely, but there are many others to cover together, thinking that it is a team’s work in which each one gives its contribute.
Once your application is ready, the last step is to publish it correctly on the Windows Phone Store, so your effort to develop it will be not vane.
First thing is to open an account on the Windows Phone dev Center. To do that you have to pay a fee of 15$ per year and waiting that your identity will be verified.
The app’s authorization process takes generally one week and it begins as soon as you fill the required data that are the following:
● App’s title
● Keywords, that users will use to find your app in the Windows Phone Store
● Detailed description
● Pay-off, a short sentence that can catch the user’s attention on your app
● Max 8 app’s screenshots
● Small icon for the app’s list in the phone
● Big image for the Zune that run on a PC
● The image that will be used if the app will be chosen as feature app on the Windows Phone Store
● If your app uses a custom service protected by user/password, you should give access to the Microsoft’s team to verify the functionality
The app is first verified by automatic tools, then manually, to check if it meets the basic rules (UI consistency and correct implementation of the functionalities).
During the process there are some mistakes that occurs often. Here some tips about them and how to avoid the rejection.
First you have to remember the two main theme, dark and light. Only if you have a strong brand is suggested to not give the possibility to customize the theme, but you have to be careful keep the readability of the text on the background: the app that shows non readable content, will be rejected.
Another recurrent mistake is related to the implementation of the Back button. It should always follow the rule to go back to the previous action: for example, if you are in the third content level (hierarchically speaking), clicking on the Back button you should come back to the second level.
But this rules doesn’t affect only the navigation sequence, also the actions. If you open a menu, clicking the Back button, you should close the menu and only clicking again we’ll move yourself into the navigation levels.
Another important point is when the users that are using an app click the Start button, they should come back to the Start Screen. The app should “freeze” their status in the last page that they were viewing and entering again, they should automatically come back there.
This behavior doesn’t come with the framework and it should be implemented by the developer.
Here are the most common mistakes that can block the certification process of your app. Be aware of those can help you to be ready without loosing time in refactoring.
The best is to read the UX checklist for Windows Store apps, a complete list of mistake that you can avoid building your app.
There are also a couple of other articles that you can use as references before to publish your app on the Store,
Working in UX field can be very different from a professional to another, sometime you are the only designer in a developers/managers team, sometimes you are “one” designer among others.
Currently I’m the only designer in a team and to be honest I miss when I was “one” in a team. Why? I miss sharing thoughts, ideas. I miss teaching juniors and at the same time, learning from them. I miss the team workflow, where each does his specific part of the project, but In the same time you see all those parts merging together as a whole.
Sure in a designer’s team there are difficulties, contrasts, evangelism to do and you have to give motivation and to take away stress. That is the most difficult side of the work in a team when you are leading it. But I think that what you can gain in terms of personal grown, it’s not comparable with the challenge of working alone inside a mixed team (developers, analysts, PMs).
How it works the development of a project? You start from the clients requirements and define the target and the content type. You have an idea on which kind of experience you want to give to the users. And from here? You confront yourself with the rest of the design team and each of them gives you a piece of their experience that enriches your idea and you move form a skeleton to a full beautiful body, capable of making sophisticate interactions.
You listen, collect, give order, choose or give indication about your idea, that in the same time changes and maybe, it was not so a good idea and you build another a variation, based on the suggestions that you collected.
I’m not saying that all this work is easy, sometimes cooling down, be modest and able to accept critics from which is younger that you is not easy. I work for half of my carrier in a large designer’s team, leading the projects and we made always a great work, overcoming the moments of stress and problems.
I recognize that I’m much more a user experience designer and information architect than a visual designer or an interaction designer. I use to have an overview of the project that dive into the details, I follow the invisible line of the overall experience, made also by great details, but it’s very difficult that a single person can cover every aspect in excellent way. This is the strength of being a design’s team.
I took advantage from this post to thank all my ex-colleagues, from which I learned so much.
The Live Tile in start screen shows a brief notification with the most important information of the application, similar to the abstracts used in online magazines. A designer needs to think of this space as a way to provide meaningful content that is immediately usable. It is a pattern used in Windows 8 and also in Windows Phone with the same behaviour.
A nice example of Live Tile is the one used in Weather Flow, a weather app. Here it’s used to show the current weather conditions. The users don’t even need to open the application if they just want to check the weather because all the basic information is already there. But if they want to see five-day forecasts or other details, they can open the application.
The Live Tiles can also be designed to flip and show various bits of information in a rotating manner, so you can creatively use multiple tiles in the space of one tile.
You can find amazing way to use and personalize the Live Tiles, also in the language. In Weather Flow the language used to summarize the information is extremely linked to the daily way to describe the weather (is cooler than yesterday): in this way users can immediately has an emotional perception of the data.
The Live Tile is the
front door to your app, make it compelling can better drive the attention of the users and give to them valuable information. Creating continuity from the information showed to the tile and the app’s home page and maintaining the same content hierarchy, helps to build a pleasant user experience.
The Live Tile should be frequently updated. Adding the users interest, or location, finding on top information regarding his interest, in order to help them in the management of the daily life, these things can be an answer to the users needs. But you also have to keep easy access on a much more detailed information.
Remember that the Live Tile layout doesn’t support links and clickable elements, so it is better to avoid the visual pattern that can recall this element’s behavior.
Which is the best way to show if the content is updated? It is important to think about how the users consume the content during their daily life. Showing relative measures of time doesn’t give a recognizable parameter to contextualize the content. The purpose is to follow and absolute measures of date and time that the users can easily identify.
Also branding the tile in a way recognizable by the users helps they to recognize the app and to drive their focus when he is looking for it. You have to think the content of the live in a different sizes, prioritizing the content related to the space (square or horizontal view). For the users point of view this means giving a different value to the apps, from the most important to the less one, not only ordering, but also deciding the Live Tile’s dimensions. In this context of going in the direction of the users needs, putting ads or spamming messages in the tile is something to avoid.
Let that everything becomes different depending on the content that the users add and you’ll design a great Live Tile. Another good example for personalizing the content of the Tile, is pinning the relevant app’s information and let the users select the ones they are interest to.
You have many way to fill this small “door” to attract the user into your app or to create different information level, urgent on top and diving into detailed content inside the app. Choose the best one, is up to you and to the content type of the app that you are designing.
I’m not going to spend many words talking about the specific design patterns for Windows Phone, because there are already a lot of useful documentation about it spread in all the web. But I would like to talk about how using them.
Windows Phone uses a hub and spoke navigation model. This means there is a single entry point from which the user navigates through. Entry points are usually referred to as hubs. From a hub comes a series of spokes. The spokes are the navigation paths of the users. Both hubs and spokes can be defined by different UI metaphors: Panoramas, Pivots or Pages. The Live tiles are the door into this world and the clean and light layout, based on the Typography leads us into the content.
How you can use these principles and pattern in the designing process?
The Information Architecture (IA) is the structure around which you build the experience of an app. It is the development of the first idea that becomes concept and then information organization. When you think about building a IA for your app, you always have to think to the whole experience. IA is part of building a user experience, not only information organization. With this attitude you should look to the Windows Phone Design as a way to explore your creativity a different way. For example, you have to create an application. You start thinking about it, talking about the idea, with the team, with colleagues and why not, with friends. You share and collect suggestions and options as you can. I’m not talking about the perfect design flow, the one that you know and you would like to have, but that is not always possible to build. I’m talking about the workaround that you can do not to give up.
Let’s see here which are the phases you go through when defining the IA of your application.
Ideation & Concept stage
The app is built to convey a specific content. Once you have a clear idea of your content, you should find your target user. The choice of the application’s target user is very important, because it is not possible to build an application that universally fits all possible users. I found storytelling really useful, in the way that fits better with your project’s needs, from writing to sketching storyboard. Defining a central point for the story, creating characters that play the user’s role, thinking them as real persons that are doing tasks and not as abstract concepts, is really what change the quality of the app. And also, the work of the whole team. Remembering that you are developing something used by a real person, with a name and a story pushes you out of the mentality of coding and from the machine-human tasks attitude.
How can Windows Phone Design be included in this flow? Knowing the patterns helps you find the best way to build your app’s UI: this will let you dive into the correct mood. This is the beginning.
Your goal is to emphasize important content that helps the reader determine whether to dive into details or keep doing what he is doing.
Choosing the wrong elements means that the users will not understand how to reach the content they need. If you have clear what Fierce Reduction means, you can start to apply it from this point. Content has to be structured by hierarchy of importance and based on what the designer decides to push to the users. In this context designing a flowchart can help you clarify the information flow and build the path that the users has to follow navigating the content.
Step by step you are developing relations between information and tasks (the action that the users do to interact with the content). The result of this map is the navigation flow.
Through this navigation map you can see where are the good points and where are the weaknesses.
You can also start to think to which content to push into the Live Tile, remembering to build a consistent navigation through it to the main page content.
Then you can go through an advanced prototyping, finding out a way to test your ideas with real persons (if you can do it also from the navigation model it would be great!).
Low Fidelity Prototyping
Once you have chosen the information’s layer and how to guide the user to interact with this structure, you go deep into the content structure definition. Once you choose the paradigms and test it, you can continue defining the layout of the different app’s screens.
There’s no restriction to customization, you can take what guidelines suggest you or customize pattern and controls to fit your idea. And now you can test your choice. There are a lot of different templates that you can use to simulate your choices, from Photoshop, Illustrator, etc. but the first step is wireframing in basic grey, without visual branding elements, just to test the basic. Also testing it with a paper prototype lets you simulate the path through the content with real proportions. The wireframes that you are creating will include motion styles and UI controls specifications. At the end of this stage you have a solid set of wireframes for your entire app made out of out-of-the-box and customized design patterns.
You finally arrived to the stage in which the structure will be dressed, the Visual design stage. At this time you will choose your color palette, designing custom icons, backgrounds, incorporating branding to user experience. You can apply all the suggestions that you saw in the previous paragraphs about how to build icons, how to choose images and photos and how to better personalize the app. For what I saw in my experience, this stage is the most difficult to perform for developers that are building apps by themselves. If you already shared with the client the route till now, the level of expectation is increased and to maintain the standard and the quality, the suggestion is to hire a visual designer, at least, to finalize this stage.
What you saw here are not the specifications about design patterns or principles, but the methodology to apply them in the workflow of designing an app for Windows Phone. You can apply this methodology also for designing a Windows tablet app, using the specific pattern for it.
We are moving more and more into a “touchable” world and there are many different surfaces that can be interactive. They can be mini or big like a wall.
Defining the user experience depends a lot on the context and on the size. But while touching a wall pushes you to use all your body to find the balance and to be able to interact with the object, while you are using small devices is much more difficult to find the stability to do what you need to do. In this case, defining a correct target area is vital for an application.
Touch Gestures & Targets
Designing for touch screens means that you have to combine software ergonomics with the physical ergonomics, because the users will assume a certain position while interacting with your app through the device. You can think to your users walking, stopped at a traffic light, travelling or just doing shopping. You design for hands and fingers: think to their position and movement while consuming the app’s content. Once you have defined your users’ profile, you can refine the number of the actions required to interact with your app, focusing on those to improve the usability.
For each interaction there should be an instant and visual feedback: never let the users wonder what is going on in your app.
The gestures’ library is already well known in the designer’s community and it’s quite standardized, but for every system the question is: how to choose the right gesture? The focus goes first to the content that you would like to make interactive, not to the type of gesture that you would like to apply to it. The first question is how would you like to explore this object? At this point you can apply the proper gesture. As you can see, choosing the correct gesture to interact with content is becoming part of the information’s organization. For this reason, describing interaction in the scenarios and making a paper prototype to simulate the usage are useful steps to build the UI.
Defining a target area is another important
interaction point. Usually we think in term of “icon’s shape”. But this is not always evident, especially on the Windows Phone, due to the chrome cleaning, you have to think in terms of “object and shape”.
And this is can be a very useful exercise to clean your attitude and habit to think the target area in terms of control or icon’s space.
Don’t forget to use your experience and port it in your design. For example, if you decide to reduce the target size, you know that touching that space will be much more difficult especially if you put it near to other elements, also clickable. And you already know that adding more space among the controls can solve this problem, because you experimented on yourself.
This can be the list of questions that you can ask yourself when you create a clickable object: ● What is its shape? How should users react to a rounded (or rectangular) shape? ● Where is it located into the context? How the user can locate it? ● What is its function? ● How often it will be used? ● How can you prevent user’s errors and how can you create a way to recover from them? Answering to these questions means think how your users will interact with the application.
Will your users use the app while they are moving? Or sitting on a sofa? Look to the mistaps especially for the application, like dialer, used while the users don’t have a stable touch.
Starting from my experience, here I talked about one single problem in designing small touch screen, because it is the most common one with which, as a designer, you have to deal every day.
Which is your job? I’m a user experience designer And exactly, what do you do?
Ok, this is a standard question in my daily life. In the old continent UX is still a big mystery, especially out of the big agencies. So that’s why I thought to write this post. I already talked about the problems of my role inside the standard IT structure, but I really want to talk about my daily routine. What does it means to be a UX designer for me?
First. How I approach a project? I start by the requirements, obviously. And how I find them? Only because they are given to me like the rules written in the stones, like Moses? Ehm, not really. Also they can change a lot depending on the situations! So, how do I start?
There are three sources to find requirements for a project. I can match them together or I can just take the best that I can find:
The possible outcome from gathering requirements can be different, but if I have to find an average in the documentation that I’m currently doing are:
•Personas (creation of user profile to identify the target) •Heuristic evaluation of the current application/website to find the pain point to improve.
Information Architecture phase
In order to propose an organization of the content, I usually work on:
•Content analysis •Outlines. It’s the content organization. Usually it’s a mix of the existing content with the new one. Doing this exercise, it is possible to find where and how to improve the content itself. •Navigation tree. At this level it is possible to involve the client’s side (like with the card sorting, that is a great possibility)
Building the experience
Building the content structure and talking with the client, I should already have an idea on which type of communication proposing to the target user. So I start to define some user’s path and interactions:
•User stories, Scenarios •Task’s grid (it works very well to communicate among the team’s members, especially in projects that use Agile methodology) •Mock-up (wireframes)
I found an example of task grid in one of the millions of feeds that I read every day…. I’m not able to find the source again! But, that was just a starting point, that I personalize based on the project’s need.
Implementing the experience
Once that the application’s IA and the mock-up are ready, usually it starts the visual design part:
•Defining the look and feel according to the target and the user’s description •Applying the usability also to the visual graphical elements (icons, etc) •Writing the Style Guide, for internal use and/or external agencies that will implement the application/website
This is always a pain point. Usability test can be done:
•At mock-up level (reducing the loss of developing time) •When the first functional prototype is ready •After that the application/website is in production to check how it goes and how it can be improved
I found very useful this source, to take inspiration for the documents that I wrote and to prepare the test environment. Unfortunately it is not always possible to run usability test for budgeting issues. What is possible to do is to apply the “guerriglia testing”: it doesn’t have any additional cost and it is always better than anything.
Work’s visibility issue
Due to the fact that I’m working on internal client’s application with a sensitive content, I cannot show the content of what I do every day. This is a mess, that’s what I can say, because I’m not trustable for who doesn’t know me. What I can share, are the templates that I prepared and that I fill with the requirements and the interpretation that I give to the content.
This is what I share with you, reader, hoping that what I discovered, changed and personalised can be a good starting point also for you. This post doesn’t describe all the things that I did or I’m doing, but it gives you an idea of my current daily routine…where exceptions and new discovers always find place