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.
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.
(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.
The public defence of my PhD thesis took place at AHO, December 22. The thesis, entitled Navimation: a sociocultural exploration of kinetic interface design is now available online, through AHO’s open access archive ADORA.
The thesis consists of a metareflection (kappe) and three publications. All publications have gone through peer-review and have been published before. The metareflection situates and extends these publications by providing more theoretical background and introducing new concepts and models.
Download the documents below:
|Eikenes, J.O.(2010). Navimation: a sociocultural exploration of kinetic interface design. Doctoral thesis, Oslo School of Architecture and Design, Institute of Design, Oslo.|
|Eikenes, J.O. and A. Morrison (2010). Navimation: Exploring time, space & motion in the design of screen-based interfaces. International Journal of Design, 4(1), 1-16.
Also available from The International Journal of Design..
|Eikenes, J. O. (2009). Social navimation: Engaging interfaces in social media. Paper presented at Engaging Artifacts. The 3rd Nordic design research conference (NORDES). 31 August-1 September.
Also available from NORDES.
|Eikenes, J.O.(2010). Connecting motional form to interface actions in web browsing: Investigating through motion sketching. FORMakademisk, 3(1), 80-100.|
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.
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)
Music: ‘Rieth’ from Gesamtlaufzeit by Marko Fürstenberg. (Used with permission.)
(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:
Some time ago my second journal article was published by the academic journal FORMakademisk. This is an open-access journal, so the article is free for everyone to download as a PDF. In addition, I have made the article available as a webpage in order to embed videos and a Prezi presentation. The article is entitled ‘Connecting motional form to interface actions in web browsing: investigating through motion sketching’, and is based on work done in collaboration with Opera Software. Here is the abstract:
It is now possible to include complex visual movement in screen interfaces, including those that enable web browsing on different media devices. This article investigates the potential for employing movement in web browsing – or more specifically, how motional form may be connected to interface actions. The investigation is carried out through design experimentation. Techniques of ‘motion sketching’ have been developed and utilized in a practice-based research project. The resulting motion sketches are analysed as realizations of complex mediation – by drawing on social semiotics and the concept of action from Leont’ev. The article argues that motional form is made meaningful through connotations and experiential metaphors, and suggests ten provisional principles for how motional form may be used in web browsing. This challenges notions of form and function in current interface design and how social semiotic theory may be produced.
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!
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.
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.
This idea shows quite directly how the properties of paper can be used in motion sketching, in this case by folding the paper.
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 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.
(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 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.
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
- 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
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.
- (E)motional design paper at DANDE2012
- 3,5 års arbeid på 6 minutt og 40 sekund
- PhD thesis online
- New video: Kinetic Interface Design
- Presentasjon: Skisser utanfor boksen
- New journal article published
- ABB Interactive Collaboration Table (2006)
- First journal article published
- Sketching with time: student projects
- Presentation: Social Navimation
- Sketching in time
- Workshop: Designing dynamic interfaces for mobile devices
- To be presented: Social Navimation
- Materialising gender
- OnLive: straming navimation
- Think Quarterly by Google[…]
- 3D Models, Textures and Plugins at TurboSquidLots of 3D models for sale […]
- visualizing.org | Data Visualizations, Challenges, CommunityA community of creative people making sense of complex issues through data and design […]
- Five3 - Parallax WordPress ThemeParallax Wordpress theme (not free) […]