Design portfolio

Selected design work

2006

DN.se zoom interface

My previous research revealed two main issues for online news front-pages. First, scrolling the front-page could be compared to browsing the printed newspaper. Second, many users read online newspapers using a back-and-forth strategy of clicking a link to read a full text, and then hitting the back button to return to the front page.

An alternative front-page design solution, inspired by these findings, would be to use a zoom interface, where the user can zoom in the full text, instead of browsing to a full text page. With this solution, the article heading and puff are replaced with the full text, when the user zooms. A screen shot of the interface is shown below. To the left, the user views the front page. To the right, the user zooms in on the “Migrationsverket kräver en extra miljard” news item.

2006

Prototyping by user scripting

This example illustrates how user scripting can be used to prototype and explore design solutions. In the example, I show how a traditional article archive can be used to power a dynamic hyperlink browsing design. A user script is a piece of javascript code, stored on your computer, which is injected into a web page, when it has loaded into your browser. Through the user script, you can alter the form, content, and functionality of the web page you have loaded.

2005

ShapeCMS

To further explore the design principles I worked with in my doctoral thesis, I developed a web site design tool. The purpose of this tool is to explore different interaction design principles for web design. The tool, shapeCMS is a content management system, for multi-channel and multi-format publishing. Currently, the system supports any number of (edited) channels, and the formats HTML, RSS, and PDF. What shapeCMS does, is to provide a digital material in which it is relatively easy to work with these four design principles. The properties of a digital material can be compared with traditional materials, which can be easily bendable, hard, etc. The difference is that the properties of digital materials can be designed. In this case, the digital material makes it relatively easy to define page elements described by the four principles; structure, hypertext, static element/stream and search.

2005

Form is content

Using the shapeCMS prototyping tool, I developed two site designs rendering the same set of (automatically generated) contents. Using the first design, the contents emerge as a web log. Using the second design, they emerge as a traditional hierarchical discussion forum. The difference is not just style, the form determines what genre the contents belong to, and consequently how the contents are interpreted.

2004

Hyper video

In the Electronic Newspaper Initiative (ELIN) project, new technology presented the opportunity to use hypervideo (clickable objects in the video stream). However, it was far from clear that news presentation would benefit from using that opportunity. Below, I present the alternatives we considered for hypervideo, during the design of the ELIN prototype news site. Some of the alternatives were presented in earlier research, and I created other alternatives for this project. Most of the alternatives were also implemented in an interactive prototype, by a design student. Using that prototype, and also findings in previous research, I created a list of advantages and disadvantages for each alternative, by interacting with the prototype and comparing the soluations. The alternatives were subsequently shown in workshops with online newspaper staff, where one alternative was selected for use in the ELIN prototype news site.