8/27/2009

Information Architecture: TV guide

Task: design an intuitive and accessible concept for an online TV guide of 50 channels. Work in group with Natasha Ruivo

This task was introduced by a presentation about Information Architecture by Are Halland. He showed us different examples of how the information is organized into websites; what are the processes to organize the information etc

Step 1. Analyse:

To start this task, with Natasha, we decided to browse into existing online TV guides from
different countries to see what was relevant to do and what wasn't but also other websites that could give us examples of features that could be interesting to put into our TV guide.












>website

Good Points:
- you can see the number and the name of the channel and not just the logo so you can go to it more easily.
- presence of a description box on the right side that gives you information about the programs.

Bad Points:
- some of the time buttons are not so easy to see and can be confusing.












>website

GP:
- the way they put in relief the main program of the day; the highlight.

BP:
- the high of the columns are not set by time, the fact that they aren't lined up is just for an "artistic" purpose.











>website

GP:
- you can search for a type of program easily by choosing between: the categories, the time and the date.

BP:
- if the user is just on the site for a quick view, he doesn't want all that set up before browsing.












>website

GP:
- the user can see very quickly thanks to the use of the black color in the boxes, what bunch of channels, what day and what hour he is looking in.

BP:
- on the left side, the user can select and deselect channels, which is a good thing but it takes 1/3 of the space and that is too much.

8/21/2009

"Sketching With Time"

Task: Paper prototyping album interfaces, using the stop motion technique.

For this project I decided to work with a touch screen interface.
My aim was to work on different ideas and to do lots of tests to see what was possible to do with that technique, what wasn't and mostly what it could bring to my prototypes.

Here are some examples of my work:

Album interface #1 from Fanny Monier on Vimeo.


For this first example, the user touches an album, the pictures spread out from it. By touching one of them, he can see it in a larger size and may edit it. During this time he is still able to browse into the loop of the other photos by dragging them (for a better view of the pictures motion in the video I changed the dragging action by touching the minus button).
In this prototype, the user can visualize from where the pictures come from and what kind of album they are part of.
......................................................................................

Album interface #2 from Fanny Monier on Vimeo.


In this other example, I still had in mind the fact that it was important and more confortable for the user to see the origin of his previous action (i.e the album before the selection of a picture).
I worked on how to use the screen space. After some tests on how organizing pictures and albums I had the idea to use perspective and not to consider the screen as a sheet of paper.
That way, it is still possible to see the album, to have a view on what's part of it and to have a good work space available.
......................................................................................

Album interface #3 from Fanny Monier on Vimeo.


That test was more oriented about pure animation and how to make a simple action like zooming funnier for people. We see that when the user touches the "-" button, the picture is creased and reduced, and when he touches the "+", the picture builds itself larger.
......................................................................................

Album interface #4 from Fanny Monier on Vimeo.


In that last example: I wanted to test how to represent a 3D animation by paper prototyping.
It works in the same way as the example#1 , the difference being that here the user can really visualize the loop of pictures.
......................................................................................

What I learned during this project is that the stop motion techique is an easy way to quickly show actions on an interface. That technique has its limits, because it takes loads of time and precision to do a video, but it's a good way to transpose 3D motions into 2D ones, obviously if those aren't too complicated to represent.
About the interface itself, I formed an opinion about what kind of features an user may want to see, depends on what he wants to do. The fact, that he may prefer to have a larger view on his actions, by seing what was before, what's coming next etc.