Navimation Research

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.

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

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

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

OnLive: straming navimation

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: cloud computing, games, navimation, streaming, TV, video

What is navimation?

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: approach, definition, interface, iPhone, motion, navigation, navimation

Siftable Computing

For a while I have been thinking about how the principles of navimation can be embodied in the physical world. There is no reason why navigation intertwined with screened movement should only happen on the screens of mobile phones and desktop computers. Then suddenly I stumbled upon this ‘Siftable Computing’ video, demonstrating a new mixed-reality interface:

This is a student project by David Merrill and Jeevan Kalanithi from the MIT Media Lab, presented at the TED conference (via Wired).

The interface (or should we call them interfaces?) consists of many tiny cubes with screens. Each cube has motion sensors, and they react in certain ways when they are placed together. The video also shows how these small boxes can relate to a larger screen for different types of interactions.

Obviously this platform opens up for a range of possibilities for interaction design, and new and interesting ways of communicating through the interface. It raises questions of what an interface can be, and, for example,  how the sensation of space can be manipulated. The cubes can be rearranged in the physical environment (restricted by laws of nature), while the screen spaces allow representations of all kinds of spatial environments. When interaction and movement (both real and screened) is introduced, a range of combinations are possible. There must be a lot of possibilities to explore beyond those presented in the video. I hope the inventors will be able to make this into a commercial product, as it will allow for a range of new and exiting interfaces to be designed.

UPDATE: Lise gave me a hint on the nice presentation by David Merrill at TED.

Tags: interface, navimation, physical, physical computing, screen, small, spatial manipulation, TUI + GUI

For All Seasons

The application ‘For All Seasons‘ by Andreas Müller was originally launched for PC and Mac some years ago, but is now also available for the iPhone (iTunes link). So far this is one of the best examples I have seen of ‘interactive motion graphics’. The interface is rather experimental in form, and allows for continuous user interaction. It makes it even more impressing that it works so well on the relatively small screen of the Apple iPhone.

For All Seasons [iPhone] from CreativeApplications.Net on Vimeo.

The graphical expression and visual movement is smooth and elegant. To give an example, in the ’summer section’ (see video) of the application, the words of the text start swaying and swimming around like small fishes. If you touch the screen, the words tremble and swim fast away from the finger. The navigation is also very neat, if not particularly intuitive. By using two fingers you can rotate the ‘virtual camera’ around the scene, horizontally as well as vertically. The iPhone pinch can be used for zooming in and out.

I wonder how this type of interaction can be used for other and more utilitarian purposes. What if we could explore Facebook contacts or Flickr images by diving into a sea of swimming objects?

Tags: Apple, example, interface, iPhone, navimation, screen, touch, video

My project presented with Cooliris

Maziar Raein, one of the external lecturers in the PhD course, gave us the task to choose about 15 images related to our PhD project, and write something about them. As I understood the task, we were encouraged to experiment with modes of presenting text and images together.

I chose to use the Cooliris interface for giving a general presentation of my project. In my opinion, this form of presentation encourages a “non-linear exploration”. The presentation itself serves as an example of what the project is investigating: interfaces that make use of visual movement in navigation. I believe it also demonstrates how the presentation form (or the interface) can radically alter the understanding and experience of the content.

Click here to go to the presentation.

Tags: AHO, cooliris, experiment, navimation, piclens, task

Presentation: Bouvet

Today I presented my project for the Norwegian company Bouvet, which describes itself as “a provider of consultancy and development services within information technology”. About 20 people with background from dissimilar fields such as graphic design, information architecture and anthropology attended the session.

My presentation (in Norwegian): Grensesnitt i bevegelse

The reactions to my presentation were quite diverse. Someone argued that navimation is technologically difficult, expensive and time consuming to develop, while others argued that the technological constrains are not the real problem: rather the problem may be in our heads, related to attitude.

It was interesting to hear about the relationship between the design/development consultancy and the business customers. Naturally, the customers do not want to spend money on anything that appears “useless”, and this often results in rather conventional solutions. On the other hand, companies with plenty of resources are not afraid of taking some chances, and are thereby more willing to explore new types of interfaces.

However, Navimation is not useless or superficial styling, but can be used for functional as well as communicative purposes. I was happy to get good feedback at Bouvet, and also pleased to get some interesting links and tips to follow up in my research.

Tags: Bouvet, event, navimation, presentation

Conference: Multimodality and Learning in London

Andrew Morrison and myself did a presentation at the conference Multimodality and Learning: New Perspectives on Knowledge, Representation and Communication, held at the Centre for Multimodal Research (Institute for Education at the University of London) 19-20 June this year. The aim of the conference was to explore multimodal perspectives on learning.

The conference was just right for my project at that time, as we got to present some core ideas and get feedback. In addition, it was great to get introduced to a specific and relevant field of research, meet and listen to professional researchers. Keynote speakers were Charles Goodwin, Jay Lemke, Roger Saljo, and Gunther Kress.

Our presentation: The times are a-changing in the interface

There were unfortunately no written papers for the conference, but here is the abstract:

The times are a-changing in the interface

Digital media and technologies play a major role in formal and informal learning contexts. They have been widely studied in socio-cultural approaches to mediated meaning making. Little attention has been given to the interface as part of social semiotic production, mediation, analysis and communication. Interface design has tended to be framed within approaches Human Computer Interaction that have typically addressed structural and functional issues. Digital interfaces have seldom been cast as textual and mediational components in a wider social semiotics even in studies in multimodal discourse (spanning areas such as video concordancing, museum design and dynamic typography).

First, we situate research on interface design in relation to a wider notion of communication design informed by social semiotic approaches to mediated communication (Kress & van Leeuwen 2001, Jewitt 2005). We further connect these works to ones in ‘new media studies’ where interface design has been cast as part of changing narrative, rhetorical, expressive and expository discourses. We relate such approaches to the notion of ‘movement in the interface’ (Skjulstad & Morrison 2005). This notion was developed on the basis of practice-based design and educational inquiry into dance and technology. It was applied in the design of an interface to mediate multilevel perspectives with a focus on video. Core components of dynamic interfaces were identified. We relate these components to recent developments in spatio-temporal innovations in interfaces (Lemke 2005, Skjulstad 2007) on the Web and on mobile phones.

Second, we introduce the concept navimation to characterise developments in the interface that blend navigation with animation. We apply this to a selection of websites from a body of almost 100 examples. Using methods from social semiotic multimodal textual analysis, we examine these examples with reference to features incorporated from film, animation and hypertext studies. Screengrabs are included in this analysis.

Third, we argue that approaches to multimodal multiliteracies need to anticipate developments in interface design that include spatio-temporal elements.

The times are a-changing in the interface.

References:

Kress, G. & van Leeuwen, T. (2001). Multimodal Discourse: the Modes and Media of Contemporary Communication.

Jewitt, C. (2005). Technology, Literacy, Learning: A Multimodal Approach.

Skjulstad, S & Morrison, A. (2005). ‘Movement in the interface’. Computers & Composition. Vol. 22, No. 4. 413-433.

Lemke, J. (2005). ‘Place, pace, and meaning: multimedia chronotopes’. In Norris, S. & Jones, R.. (Eds). Discourse in Action: Introducing Mediated Discourse Analysis.

Skjulstad, S. (2007). ‘Motion graphics and communication design on the web’. Journal of Media Practice.

Websites we looked at in the presentation, all employing navimation:
http://www.xrs.pl
http://www.thewhalehunt.com/whalehunt.html
http://www.6pli.com/
http://www.leoburnett.com
http://www.piclens.com
http://www.nike.com/nikeacg/index-en.html

Tags: conference, London, multimodality, navimation