latest post :: week 1 :: week 2 :: week 3 :: week 4 :: week 5 :: week 6 :: week 7 :: week 8 :: weeks 9 and 10 ::
weeks 11 and 12 :: week 13 :: week 14 :: weeks 15 and 16

This journal was built during the 20 weeks of development of my Master Thesis in Umeå Institute of Design, Sweden,
in order to serve as a dialog space with partners and with myself and also as an organizing document. It contains
decisions, doubts, and directions that led to the final design, and others that have been abandoned along the way.

Friday
Apr032009

structuring walkabout

The week after the mid presentation was a bit disturbed by a fantastic event held at the Institute of Design here in
Umeå. We, interaction design students worked together like crazy to organize the event and host our guests. More
about it here. Anyways, some work could be done before the event, and the presence of such important designers
was an opportunity for great feedback. [Thanks Jack!!]

From the comments I got in the mid presentation I selected some of the ideas I had and decided to try them graphically,
developing the interface in some directions to make the final decision on which way to go. Previous discussions with
Mattias Andersson and my classmates had already pointed to a more fun and entertaining experience, but still I had to
give them a face and behaviors.

 

Some aspects that I started thinking: where is the best place to reference the user, in the center of the screen or in
the bottom? Iam considering how this will affect the perception of movement and the localization of experiences. Other
issues have been either to use full screen for the application or contain it into a shape, like I had in the prototype. Finally
I started sketching some key modes to the interface and then would work in the transitions. In the image you can see
these two squares in the lower right. [SU stands for Setup - where the users applies the filters :: AV stands for Active
Visualization - when the user will actively engage with the system giving it full attention :: MV stands for Minimized
Visualization - when the system is running but the user is not paying attention to it.]

 

I started playing with the radar - like interface and the graphic problems didn't take long to appear: size of the experience icons,
how to visualize what is in them, how to call attention to them etc. I was also concerned here to make the interface in a
way that I could have the Setup and Active Mode as two faces of the same coin so to speak.

 

Looking closer at the "radar" interface in AV mode [on top] and setup [below].

 

So, after the Sensing and Sensuality event on Friday, I had a discussion with Jack Schulze about my project last Saturday.
His feedback was sharp and generous. "Mate, this is way too complicated." He showed me some other examples of
located media services and pointed out the virtues of their simplicity. The metaphor of the compass was appreciated, but
should it be so literal? How could I bring the experiences closer to the surface of the screen and not require the user to
dig for them so much? 

Specially for the content I am dealing with, that I decided to call Contemplationable Knowledge, it's not essential that
the user gets the information on the experience, so I should bring it forward from the start. This feedback in a way
answered the question regarding the use of full screen or not. I have to use more space in order to show what's each
experience is about. Time to think it over.

 

This matrix helped me think what should happen to each kind of media present in the experiences [rightmost column]
according to some parameters I defined to level of notification [top row]. From this point I took a break on the
interface per se and started structuring the system before, to find out which would be the variants and aspects
to be designed. By this time I had a name to the service: Walkabout and the knowledge that it sould happen in
the mobile device and have a website companion. So I started wireframing them both.

 


Walkabout companion website plan. Once I had the proto-screens on paper, it helped me think and evaluate the service
and what should and should not be developed in the scope of the degree project.

 


The Walkabout service is intended to happen in the mobile device, this is the focus of the project. However this was the
first time I was laying out in some details the whole process. Although I didn't concentrate at all in the graphic problems,
the interface here is already completely different from the radar-like one. I am now exploring the wallpaper as the container
of experiences that would be updated over time and of course according to location.

The main axis on the diagram represent the basic path from receiving an invitation to Walkabout to engaging with an
experience found. The lateral screens show alternative interactions. [Such as: from the invitation the user can either
install it (screen down) or learn more (screen to the right)].

 

With these wireframes at hand I had two very interesting discussions yesterday with Mattias and Rahul. The result was
that as a framework it is good, I can consider it done, but the interface must be developed and refined a lot. The grid as
it is breaks the sensuality of the content and as much functional as it is, doesn't convey the fun and serendipity that
I am defending in the service's concept.  Time to redo it again.


Monday
Apr132009

Graphic Explorations

Once the service wireframe has been defined, it was time to start giving it a face. So this last week has been on intense
graphic explorations, with many unsuccessful but necessary attempts, important steps to get to a working and coherent
layout.

This first image shows one of the last layout schemes, using the experience colorful squares as the base point for the
interface. I am searching for a playfull and inviting layout that conveys interest and curiosity and also the light
and relaxed nature of Walkabout.

This is another possibility that was developed. It also uses the colored squares but the ring that controls the timeline
is more evident and more important, influencing the other dials. This screen is used to setup the time period that
you want the experiences to be displayed and fine tune the moods, represented by the color dials.

The following images show the creat account screen when installing the application on the device, the upload to screen
when adding a new experience from the device, the common visualization with the navigation pointer to the "take me
there" function to take users to the exact point of the experiences and the icons in the menus in the common screen.

The icons in the basic screen show two menus: on the right is the add experience and on the left is the quick access to
the notification setup, going from don't notify me when talking, don't notify at all and mute system.

All the screens and icon design have been done and tested in the device screen for size, legibility and usability verifica-
tion. It has been a process of going back and forth from design and testing sometimes placing two different ideas side
by side to make sure what works best.

It has been an interesting experience to design to a small touchscreen, when the roll over function is basically useless
the design must work its way around this constraint. The hit area of the buttons must also be considered in a different
way from the screen to accomodate the less precise pointer, our fingers.

Next steps, evaluate the screens all together with users, update the feedback given and apply the behaviors to the
interface elements for the final feedback session.

Monday
Apr202009

Walking about


This is the first video scenario of Walkabout. Some of the behaviors are still incomplete, but that's the focus
of work at this stage. Refine is the word!

 

This week as the graphic explorations are becoming more concrete, I started adding the behaviors and trying the
Walkabout service in motion. The first try resulted in the video above. Incomplete as it is, I could get important
feedback from it, regarding the transitions when the user turns direction.

This movement of turning has range, could be a wrist motion, an elbow motion or even a shoulder or torso motion.
I want now to run a quick test with users to observe this detail and refine the transition accordingly.

Users regarded the Walkabout interface as being too serious, and looking more as a professional tool than a playful
service that should be used in the spare time. I guess that I was imposing my own aesthetic values upon the interface
and the refinement is bringing it to a more appropriate configuration to the purpose of Walkabout.


I ran a quick user test and research on the web to find out the elements that can sense playfulness. I wanted to find
out what are the criteria behind the choices, not which combination I should use in the project. I found that roundness
beats sharpness by far, but the dark background had some interesting votes, being associated to cartoon and because
the colors stand out more. One user replied that to him, the light background, to his kids, the dark one.  The gray
background didn't get any votes.

The most curious decision came to be between lightness or boldness, represented in the study by the text. In the samples
12 and 15, the only difference is the typeface.

An equal number of people picked each of them, some arguing that playfulness comes from lightness, from being free
and moveable. Some others argued that playfulness comes from a sturdy robust and break-free shape, that is soft and
you can mess around with harmlessly.

My conclusion is that they are both right, it's a matter of choice, context and being appropriate to the project.

On the web I looked for the most famous Video Game consoles to see how they solved the same problem of graphically
inviting users to play. Curiously Nintendo Wii, Sony Playstation and Microsoft XBox use the three profiles I selected, each
one going in one direction. The common elements would be contrasting vibrating colors and roundness, but a different
radius to each one of them. I understood that the bigger the radius the more friendly.

This research also confirms the apropriateness and what degree of friendlyness the service should convey. Playful can
have several faces.

 

Finally I have done some work with the companion website of the service, trying
to establish a common language with the mobile interface and incorporating the
more playful profile.

City homepage, before the user logs In.

 

User page, with the list of experiences, data, contacts and recommendations.

 

User page, showing the contacts panel expanded and data and recommendations closed.

 

The website as well as the mobile interface has been going a long way with many hours spent on finding the right elements
and the right language. See some examples of the wireframe and the previous, more serious version.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Some Graphic Chaos to finish the post. = )

Tuesday
May052009

Final Lap

As the finish line comes closer the working hours increase enormously and the track of time gets lost.
It has been one long week since the last post, and I believe that is how it is going to be from now on.
I have been working on the report and fine tuning the screens, behaviors an animations for the final
presentation.

Here is a second video prototype of Walkabout. I got very good feedback over it and have been working on
the isolated parts for the new version. I'll upload it soon.

The evolution of the first video, still a lot of details to take care of, but a big improvement from the first concept.

 

Also soon I'll post some report pages

Page 1 2 3