Navimation Research

ABB Interactive Collaboration Table (2006)

This was a student project I did with ABB R&D in 2006, in which I designed a multi-user interactive collaboration table for use in control rooms. Now, 4 years later, I’m allowed to show it!

Tags: ABB, collaboration, control room, evidencing, interactive, navimation, table

First journal article published

Finally! My first journal article, which is co-written with Andrew Morrison, has now been published by the International Journal of Design. This is an open-access journal, so the article is free for everyone to download as a PDF. The article is entitled ‘Navimation: exploring time, space & motion in the design of screen-based interfaces’. Here is the abstract:

Screen-based user interfaces now include dynamic and moving elements that transform the screen space and relations of mediated content. These changes place new demands on design as well as on our reading and use of such multimodal texts. Assuming a socio-cultural perspective on design, we discuss in this article the use of animation and visual motion in interface navigation as navimation. After presenting our Communication Design framework, we refer to relevant literature on navigation and motion. Three core concepts are introduced for the purpose of analysing selected interface examples using multimodal textual analysis informed by social semiotics. The analysis draws on concepts from multiple fields, including animation studies, ‘new’ media, interaction design, and human-computer interaction. Relations between time, space and motion are discussed and linked to wider debates concerning interface design.

Tags: article, finally, ijdesign, navimation, publication

Sketching with time: student projects

Some time ago the interaction design students at AHO did a short project in which they experimented with stop motion for prototyping a photo album interface. Before giving the task to the students I tested the technique myself using the free Mac software FrameByFrame (see earlier blogpost). This is the first time we have instructed students to use stop motion, so the project was partly an experiment in itself. In addition we wanted to find out more about the potentials and challenges of using stop motion for prototyping navimation.

Let’s look at some of the videos.

Synne Frydenberg

This idea shows quite directly how the properties of paper can be used in motion sketching, in this case by folding the paper.

Natasha Ruivo:

Natasha makes use of what I call virtual kinetics, by giving the sensation of gravity and mass as the images fall down.

(UPDATE: this video stopped working, and has therefore been removed)

This video shows nicely how stop motion can be used to show how a specific task or action in the interface can be accomplished. This would be much harder to sketch and present without such a video.

Fanny Monier

Fanny shows how stop motion can be used to create a sensation of transformation and three-dimensional space by simply substituting one drawing with another. This technique seems highly effective.

Another way to create the sensation of a three-dimensional space is of course to physically set it up in three dimensions. This efficiently takes us away from the page metaphor and allow us to rather conceptualise the interface as a stage or a theatre.

Svein Inge Bjørkhaug

(UPDATE: this video stopped working, and has therefore been removed)

The idea behind this video is to make a way of sorting images as they are imported from a digital camera to a computer. I think the motion sketch communicates quite well how this idea could be realised, by showing how the user actions are linked to what happens on the screen.

Ivan Milanovic

Ivan was the only student working with a real device, the iPhone. It must have been quite hard to work with such small elements and the small screen space. The first part of the video is a bit too rough, but the last part of the video shows nicely how a tilting gesture can be used to move between images.

Theo Tveterås

A simple but nice idea: touch the surface, and images appear underneath each finger.

As Theo argued, the principle that is sketched out here could be used in a screen interface by using other ways of controlling the navigation. I also think it could be a fun way of navigating a device with screens on both sides!

A playful way of engaging with photos: a memory game!

What did we learn?

Stop motion prototyping obviously has its advantages and disadvantages. These are the main advantages:

• quite easy and quick to prototype visual elements that move, especially in three dimensions.
• easy to show how user action and screen presentation may be related over time
• the rough style of stop motion is suited for rough sketching
• physical space and physical elements (such as paper) may inspire and induce new ideas. Great potential for experimentation.
• effective for communicating and presenting ideas

The challenges:

• requires some equipment and software tools (camera, tripod, light, PC, software)
• it may take some time to prepare the visual elements (i.g. paper pieces)
• there are limits for what you can easily do in front of a camera. Some things are more easy to do on a computer
• it is hard and time consuming to produce subtle and sophisticated movement by using stop motion

Tags: animation, Design process, navimation, sketching, stop motion, students, teaching, techniques

Presentation: Social Navimation

Yesterday I presented my paper on Social Navimation at the NORDES conference Engaging Artifacts. I used the online presentation tool Prezi to create the visual presentation, which includes videos of interfaces I have designed. The videos are also available at the Design page.

How to see the presentation: use the buttons in the lower right corner. The second button opens the presentation in full screen, while you push the button to the right to go further in the presentation.

Social Navimation is the phenomenon of engaging with social media through a navimational interface, or more specifically, to intertwine navigation with motion in
social media applications. In this paper I analyse a set of design examples of how social navimation can be realised.

I got a lot of positive comments after the presentation, especially on the visual presentation. Overall I am happy with the Prezi tool, even if I have discovered some bugs. It took me quite some time to make the presentation, but now I know the tool and will definitely use it for future presentations.

Tags: NORDES, presentation, Prezi, social navimation

Sketching in time

“Since they need to be able to capture the essence of design concepts around transitions, dynamics, fell, phrasing, and all the other unique attributes of interactive systems, sketches of interaction must necessarily be distinct from (traditional) types of sketches…” Bill Buxton: Sketching User Experiences

This week I have been involved in teaching a group of interaction design students at the Design for interactive and social media course at AHO. The topic has been ‘Sketching with time’, and has focused on using stop motion combined with paper prototyping to sketch interface ideas. The week’s assignment was to make a photo album interface and experiment with navimation.

Before introducing the students to the technique I had to try it out myself. I found the Mac application FrameByFrame which has been brilliant for this purpose. The functionality of the software is limited, but it is free, extremely simple to use, and serves the purpose for quick motion sketching.

Here are two of the quick stop motion sketches I made:

I also tried using video, recording my actions in real time:

The video quality is quite rough (partly because I am using a really old DV camera), but I don’t see this as a big problem. The technique is primarily to be used for quick sketches early in the design process.

The students got three days to make their video sketches. During these days many of the students managed to do a lot of experimentation and test out different ideas. The task was in many ways an experiment from our side, so I was positively surprised by the diversity and quality of their work. I also got the impression that they had learned a lot about timing, response and communication in the interface.

The technique has clearly some disadvantages – it is for example hard to make subtle movements and deal with details and many elements at the same time. However, it seems especially suited for 3D motion sketching, since this often requires a lot of time and skills to do on a computer.

UPDATE: see some of the videos the students made.

Tags: animation, design, method, navimation, paper prototyping, prototype, prototyping, sketch, sketching, stop motion, technique, video