same shit, different wrapping

Final result

A walkthrough of the end result of my master thesis. English captions are available! Video also available in HD.

Every day we spend hours staring at different screens. Each screen has its own context and size. It is fairly unusual to see someone crossing off items on their shopping lists on their iPads in the stores. Or, for that matter, to see people reading their favorite magazines on an iPhone. Still all of these users are often treated identically on the internet.

My MA-project investigates the difference between the various touch-screens we use every day, and how these differences affect my role as a designer. How can I design the best possible solution for the multitude of screens which exist? The outcome of this project is a reinvention of how Wikipedia may appear on smartphones and tablets. The content remains the same, but the appearance has been adapted to the various platforms. The tablet version enhances Wikipedia’s visual content and promotes a mode which allows you to move from one article to the next, learning new things. The smartphone version is made for speed and rapid retrieval of information without spending too much time downloading.

A major part of my project has been dedicated to simplifying both versions as much as possible, making content the key focus. Reading, for instance, is not disturbed by links or references, but can be retrieved if necessary.

Details

Searchfield

The search field is placed on the bottom of the screen to naturally connect with the keyboard when it’s expanded. This also makes it easier to reach. This location of the searchbar is more natural on these touch-screens, where the keyboard expands from the bottom.

Speed

When you start the program on your smartphone the keyboard is already expanded and ready to type on. Nothing is downloaded before you search, or choose to click on one of the menu-elements. This way you are ready to search at once when the program is started.

Simplicity

To focus on the content and text, no references or links are shown by default. You have to manually turn these on in the menu. On the smartphone images doesn’t download either so that the article can load as fast as possible. The images are available in the menu where you can browse them one by one..

Focus

The tablet version presents articles in to different modes: text-mode and image-mode. This way you can focus on the text when you read, and study the images in their own large and beautiful image-mode. In the top of the text-mode you’ll always see the connection to the images while reading.

Contentscroll

On the tablet version the table of contents is combined with the scrollbar. This way you can visually scroll through the article and quickly navigate to the information that you are looking for.

Screencapture

Screencapture from the smartpone version. Video available in HD.
Screencapture from the tablet version. Video available in HD.

Contact meFollow me on Twitter