Navimation examples

(E)motional design paper at DANDE2012

Tuesday, September 18th, 2012 | Design and research, General, Navimation examples, Theory | No Comments

Last week I presented my paper on (E)motional design at Out of Control, the 8th International Design & Emotion Conference in London. With the paper, I argue that movement and emotion are highly interconnected, and that movement has the power to affect, engage and persuade us deeply.

The presentation was of course made with Prezi, using the new 3D background feature. Feel free to click through it:

In order to analyse and design kinetic interfaces (interfaces characterized by movement) we need to consider two things at the same time: how movement helps us to carry out actions, and how movement creates meaning (=double mediation). The paper includes an analysis of how movement is used on the screen interface of the Apple iPad, as well as a design experiment in which I used stop motion animation to explore how movement can be used in a mobile app.

Ready for some academic arguments about visual movement? Have a look at the paper: (E)motional design: double mediation in kinetic interfaces.

PS 1: the paper is based on the trial lecture I held for my PhD defence in 2010.

PS 2: download the magazine app I use as an example of a kinetic interface: Katachi.

Tags: , , , , , , , , , ,

3,5 års arbeid på 6 minutt og 40 sekund

Sunday, October 23rd, 2011 | Events, General, Navimation examples | No Comments

(In Norwegian only. English version underway)

For nokre veker sidan oppsummerte eg doktorgradsprosjektet mitt på 6 minutt og 40 sekund. Her ser du resultatet:

Denne presentasjonen vart laga for Pecha Kucha Night Oslo, som arrangerast med jamne mellomrom på DogA. Pecha Kucha skal vere ein inspirasjonskveld med lynforedrag om arkitektur, design og kunst. Kvar talar får ta med 20 bilete som kvart blir vist i 20 sekund, til saman 6 minutt og 40 sekund. Heldigvis fekk eg lov å bytte ut nokre av bileta med video – noko som var essensielt for å formidle arbeidet mitt.

Tags: , , , , , , ,

New video: Kinetic Interface Design

Friday, September 10th, 2010 | Design and research, General, Navimation examples | 1 Comment

In order to make my research more accessible I have created a video that shows a number of kinetic interfaces. Kinetic interfaces are here understood as screen-based interfaces that are characterized by movement.

Kinetic Interface Design from JonO on Vimeo.

In addition to the interface examples, a number of descriptive and analytical terms are presented. These terms have been developed through analysis of kinetic interfaces in academic publications. The kinetic interfaces presented in the video are:

The Apple OSX login box

The Iconist #1 (iPad)
Disney Movies (iPad)

Flipboard (iPad)


For All Seasons (iPhone)

Cooliris (iPhone)



Music: ‘Rieth’ from Gesamtlaufzeit by Marko Fürstenberg. (Used with permission.)

Tags: , , , , ,

Presentasjon: Skisser utanfor boksen

Friday, September 10th, 2010 | Events, General, Navimation examples | No Comments

(Only in Norwegian)

Her er presentasjonen min frå RECORD-seminaret på AHO 10. september 2010. Her argumenterer eg mellom anna for at utforming av grensesnittet er svært viktig i sosiale medier, noko som sjeldan vert snakka høgt om. Vidare snakkar eg om fire ulike måtar å skisse bevegelse på: 1) ved å bruke video + papirprototyping, 2) stop motion, 3) digital animasjon og 4) kode. For meir informasjon, sjå artikkelen Connecting motional form to interface actions in web browsing.

Skisser utanfor boksen

Sidan det ikkje er video i presentasjonen ovanfor, legg eg ved alle videoskissene mine her. Dei er sorterte etter handling, og viser dermed ulike måtar å 1) lagre medieelement (bilete) til ei samling, 2) navigere mellom ulike medieelement, og 3) opne ei samling av medieelement. Skissene er laga ved bruk av video, stop motion og animasjon i After Effects.

1. Ulike måtar å lagre medieelement til ei samling:

2. Ulike måtar å navigere mellom medieelement:

3. Ulike måtar å opne ei samling av medieelement:

Tags: , , , , , ,

ABB Interactive Collaboration Table (2006)

Thursday, June 3rd, 2010 | General, Navimation examples | No Comments

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!

What you see is a SmartBoard, and projected onto it some semi-interactive compositions created in Adobe Flash. Yes, it’s all ‘fake’…
Credits: Widget development: Tove Helene Hovd. Voice-over: Johannes Zachrisson. Mentor: Siri Breen.

Tags: , , , , , ,

Sketching with time: student projects

Saturday, October 10th, 2009 | Design process, General, Navimation examples | 1 Comment

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: , , , , , , ,

Presentation: Social Navimation

Tuesday, September 1st, 2009 | Design and research, Events, General, Navimation examples | 2 Comments

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: , , ,

Sketching in time

Saturday, August 22nd, 2009 | Design process, General, Navimation examples | 3 Comments

“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.

Video Sketching

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: , , , , , , , , , , ,

OnLive: straming navimation

Friday, March 27th, 2009 | General, Navimation examples | No Comments

This week the upcoming service OnLine was presented at the Game Developers Conference 2009. OnLine is a video game service that allows games to be streamed live from a data center onto TVs or computers, so that the users don’t need their own advanced graphics hardware. It is not even necessary to install the games, as the computer center does all the work. Welcome to cloud computing for games.

OnLive is also interesting in terms of interface and visual design. Just take a look at this video of the game interface:

As you can see, the service provides a visually rich interface. In the cinematic intro sequence, we fly through the logo and enter a new universe. The ‘virtual camera’ then flies over a globe that is filled with small tiles of videos, before it settles on the main menu. In navigating between different sections and games, a range of different animation techniques and transitions are employed. I looks like the rich environment will make it both easy and fun to find new games, friends, and other players.

I’m exited that the people at OnLive have developed a technological platform that reduces the disadvantages of employing advanced motion graphics, and that they have chosen to design such a rich navimational interface. I just hope it won’t be too long before we get this to Norway…

Tags: , , , , ,

What is navimation?

Thursday, February 26th, 2009 | General, Navimation examples | 1 Comment

This blog is about something I call navimation. But what do I actually mean by using this strange word? Before getting to the actual definition, we have to look at some background information.

It shouldn’t come as a surprise to anyone that we create, share and use a lot of digital information every day. We consume news, TV, music, images and movies through a diversity of computer screens, including those of mobile phones.

To be able to find interesting content, we all have to find our way, or navigate, in this huge volume of digital information. This is done in a variety of ways, such as search, browsing, clicking interesting links and so on.

The information is usually presented to us at the screen, which we can describe as being a part of the interface between the human and the computer. The interface is what makes people able to control the computer, understand the digital information, and in turn communicate with other people. The interface has therefore a very important task.

Screen-based interfaces have become advanced. They can now show millions of colours, detailed graphics, and movement that is generated at the same time as we see it on the screen. This opens up for a range of new possibilities. Maybe one of the most prominent and impressing examples is the Apple iPhone, which uses motion rather consistently in the various parts of the interface. This is especially apparent in the Cover Flow interface (see video).

We haven’t got many specific words to describe this kind of motion in the interface. This is different from the motion we see in videos or on film, because here it happens with and as a result of something the user does. It is not only a playback.

Over time, I noticed that motion in the interface often (but not always!) occurs when the user  navigates digital information in the “virtual space” of the interface. I haven’t seen anyone else talk about this phenomenon, and therefore a new word seems appropriate. Actually a colleague of mine was the first one to articulate the word navimation, as a combination of navigation and animation. So, if you want the formal definition, navimation is the intertwining of the activity of navigation with the appearance of visual motion. The word motion seems more appropriate than the word animation, since animation often is understood as a specific genre or technique for making movies.

There are many ways to study navimation. For example, using cognitive psychology one can study how navimation is perceived by a specific user, and how navimation can help the user perform a specific task. From computer science, one can study how the underlying software technology can efficiently support navimation interfaces. From an artistic point of view, one can look at how navimation can be explored aesthetically and used for personal expression. From a marketing point of view, one can study how navimation can be used for strategic purposes, for example as part of visual identity and branding strategies.

However, my focus is somewhere else. As a design researcher, I am interested in how navimation can communicate. What can designers communicate by using navimation? How do you actually go about to create a navimational interface? What does navimation offer that visually static interfaces cannot? And – how is navimation engaging us at the affective level? These are hard questions, and I don’t know how many of them I will be able to answer. But I will try.

Feel free to drop a line if you have any suggestions, questions or opinions on this. What do you think about navimation? Is it only a buzz word, or does it have anything to offer?

Tags: , , , , , ,

I am a Norwegian interaction designer and design researcher, currently working in Los Angeles and Oslo. This blog reports on topics related to my design research on interface design, navimation, and data visualization. About me.

Navimation is a concept denoting the combination of navigation and visual motion in screen-based interfaces. About navimation.


RSS My latest bookmarks