Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Visual Interfacedesign – Documentation

Visual Interfacedesign – Documentation

This course was about the basic knowledge in Interfacedesign.



The first lesson was how to orientate in the whole and confusing „User Experience Design“.
For that Constanze Lager used the following visualizations by Dan Saffer, „The Disciplines of User Experience“.

from 2008

from 2009

from 2013

Obviously the „The Disciplines of User Experience“ are very fluid and often changing. Interaction Design is a very technology based and fast growing design-part. It's an interdisciplinary transmission of something between art and information technology with the current focus on visualization.

Design Thinking is an interactive process and always influenced by the surrounding of each participant. Creativity and research are probably the most needed parts of designing. All these proceedings merge in the prototype and „finally“ in the implementation and evaluation.
But „finally“ means only finally in this case. Designing is never ending, because of this ongoing process of interaction and influencing.


For understanding the Visual Interfacedesign and the complexity of the User Experience behind this, we analyzed an own chosen semi complex Visual Interface. The given example was a bicycle speedometer.


In early 2014 I bought an action cam by SONY. It was the HDR–AS20.
Although I had this cam so long, I did not understand the Interface or what kind of functions it has.
I decided to analyze the Application Structure of it, to solve the problem with understanding the operation.
While navigating through the Interface I realized the low complexity of it. My confusion about the understanding problem got bigger.
How may a low complex Interface be so confusing and seeming complex?


The red lines navigate into the deep of the Interface by pressing the the Video-Button.
Other colored lines navigate to the circle with the same color of the line.
Navigating left or right around the circles is possible with the „PREV“- or „NEXT“-buttons.
In the first, blue, circle you get by pressing „PREV“ or „NEXT“.

For making a video, you need to press the Video-Button, for taking a picture, too. The decision for what the cam is doing when you press the Video-Button depends on what has been selected in the blue circle, „MOVIE“ or „INTVL“.
Getting to know which settings are selected for video or taking a picture is very uncomfortable.
Also uncomfortable is to navigate to desired settings in generell. There is no visual feedback where in the Interface you are. You need to test and click around...
What's the difference between „BACK“ and „CANCEL“ in this case?
There is no feedback for the battery status or the memory space.
But you are getting three different kinds of feedback for starting or stopping recording, apart from your own pressing finger: blinking light, beep sound and dots on the screen.



For directly choosing taking a video or a picture i added a Photo-Button. Now the Video-Button is only for recording a video and the Photo-Button has its own function.
I also added two buttons on the side of the cam for switching between the levels. As you see in the Interface below, pressing the „UP“- and „DOWN“-buttons navigates through the categories inside one level; Pressing the „LEFT“- and „RIGHT“-buttons navigates through the levels.
Finally I enlarged the display, for an better operation with switching between hierarchies and because of aesthetic reasons.


In the Start-Mode you are on the left side directly in the first level of the hierarchy, on the right side you may see the battery status, the chosen settings for taking a picture in the rounded rectangle, the chosen settings for taking a video in the circle and the left memory space.
The chosen settings in this case for taking picture are „Stedy“, for taking automatically pictures every 5 seconds, and an angle of 120°.
For taking a video the chosen settings here are HD quality and an angle of 170°.

Now navigating to „SSlow“ and pressing the „RIGHT“-button will select it. Then pressing the Video-Button will take a video in super-slowmotion with an angle of 170°.



The course gave me a little insight into analyzing interfaces.
I realized how important specified designing is. In some cases the interface of the SONY HDR-AS20 might be useful, intuitive or understandable but not in this.
You need to analyze the target group and their claims to the product, always.

Ein Projekt von




Prof. Constanze Langer

Zugehöriger Workspace

Grundlagen Visual Interfacedesign


Wintersemester 2015 / 2016