In unserem Alltag verbringen wir sehr viel Zeit mit der Suche nach bestimmten Dingen oder Objekten. Zum Beispiel suchen wir auf einem Konzert nach unserer Freundin. Wir wissen, sie hat blonde Haare und einen roten Pulli an. Also begrenzen wir unsere Suche nach ihr auf diese Merkmale. In der Psychologie würden wir die Personen mit blonden Haaren und einem roten Pulli als „Zielreiz“ oder einfach „Target“ bezeichnen.

Die visuelle Suche ist ein komplexer Wahrnehmungs- bzw. Aufmerksamkeitsprozess und befasst sich mit dem Problem, wie wir Objekte, die für uns relevant oder von Interesse sind, in einer komplexen Umwelt – also in einer Welt voller Objekte und Dinge, die auch irrelevant für uns sein könnten – zu finden. Im Psychologiejargon sind die irrelevanten Objekte sogenannte “Störreize” oder einfach: “Distraktoren”.

Der Prozess der visuellen Suche ist für unser tägliches Leben notwendig und sehr wichtig. Stellen Sie sich vor, wir müssten alle Informationen, die sich in unserem Gesichtsfeld befinden, auf einmal verarbeiten. Das ist aufgrund unserer begrenzten kognitiven Kapazität schon gar nicht möglich. Die visuelle Suche ist auch für den Bereich Interface Design sehr wichtig. Zum Beispiel könnten wir auf unserem Smartphone schnell eine bestimmte App suchen.

Ein Beispiel aus dem (digitalen) Alltag

Ich selbst tippe sehr oft versehentlich auf das falsche App-Icon, wenn ich die FaceTime-App öffnen will. Das passiert, wenn wir versuchen, eine bestimmte App zu finden, aber mehrere Apps das gleiche Farbmerkmal haben.

Die Feature Integration Theorie

Die Feature Integration Theory von Anne Treisman und Garry Gelade (1980) bietet uns einen Erklärungsansatz  für dieses Phänomen. Nach dieser Theorie nehmen wir Objekte in zwei Schritten wahr. 

Zunächst werden grundlegende visuelle Merkmale wie Farbe, Bewegung oder die Ausrichtung oder Form eines Objekts automatisch und daher sehr schnell erkannt und verarbeitet (sogenannte pre-attentive stage, da hier keine Aufmerksamkeit von uns verlangt wird).  

Die Kombination und Integration dieser einzelnen Merkmale eines Objekts hin zur Wahrnehmung des Objektes als Ganzes (auch “Konjunktion”) ist jedoch ein langsamerer Prozess, der unsere Aufmerksamkeit erfordert. Diese Phase (attentive stage) braucht wegen der bewussten Informationsverarbeitung mehr Zeit als der erste automatische Prozess.

Am obigen Beispiel konkretisiert bedeutet das: Ich habe sehr viele grüne Apps auf meinem Display. Die Farbwahrnehmung passiert sehr schnell und unbewusst (pre-attentive stage), so sind die Vertipper zu erklären.  Erst im zweiten Schritt (attentive stage) nehme ich “feinere” Details wie das spezifische Icon (Kamera, Pfeile usw.) in Kombination mit der Farbe wahr und mein Gehirn formt daraus ein Ganzes “Face Time Icon” oder “Whatsapp Icon”. Wir – bzw. unser Gehirn – integrieren bzw. “konjugieren” alle Merkmale des Objektes zu einem Ganzen.

Das klassische Experiment

Probieren wir es aus mit dem klassischen Experiment adaptiert nach Treisman und Gelade (1980): Versuchen Sie, in der folgenden Grafik das blaue “X” zu finden. Das blaue “X” ist unser Zielreiz, der von sogenannten für uns irrelevanten “Störreizen” umgeben ist.

Merkmalsbedingung: Finden Sie das blaue “X”

Ok, das war sehr einfach, oder? Wir können das Gleiche auch noch einmal mit mehreren Störelementen probieren.

Wir sehen, dass unser blaues “X” auch bei mehreren Störelementen “herausspringt” (Pop-out-Effekt), so dass wir es sehr schnell erkennen können. Wir schauen auf alle Objekte gleichzeitig und können das blaue “X” unter allen anderen Störelementen trotzdem super schnell erkennen. Das geht so schnell, weil wir die oben erwähnte automatische, parallele Verarbeitung nutzen: Wir schauen einfach auf die Objekte, die sich innerhalb unseres Gesichtsfeldes befinden, und können diese alle parallel wahrnehmen und unser Zielreiz “springt” uns aufgrund seiner einzigartigen Eigenschaft, die es mit keinem der anderen Objekte in der Umgebung teilt – der blauen Farbe – direkt  ins Auge. 

Machen wir weiter mit unserem Experiment. Wir versuchen nun, den grünen Buchstaben “T” in unsere Grafik zu finden (Integrationsbedingung):

Das hat wahrscheinlich länger gedauert, oder? Da wir nicht mehr nur nach einem einzigartigen Merkmal suchen, “sticht” unser Zielobjekt nicht mehr hervor. In der Folge erscheint die Suche nach dem Zielreiz viel schwieriger, weil es von anderen grünen Buchstaben und anderen “T’s” umgeben ist. Unser Zielreiz (das grüne T) teilt sich Merkmale mit allen unseren Störobjekten: die grüne Farbe des Buchstabens “X” & die Form mit dem lila “T”.

Daher müssen wir jedes Objekt genau betrachten und unsere Aufmerksamkeit darauf richten, um die Merkmale (Form und Farbe) zu kombinieren. Wir scannen also jedes Objekt, und wenn es nicht unser Zielobjekt ist , gehen wir zum nächsten Objekt über, bis wir unser Zielobjekt entdecken. Dies entspricht einer seriellen, schrittweisen Verarbeitung, einem seriellen Suchprozess. Wir müssen jedes Objekt mit gezielter Aufmerksamkeit prüfen. Das braucht Zeit.

In den ersten beiden Bedingungen (“Finde das blaue “X” – der sogenannten Feature oder Merkmalsbedingung”) wird die Suchzeit nicht von der Anzahl der Störelemente beeinflusst. Das Zielobjekt wird automatisch, unbewusst und somit sehr schnell auf einer prä-attentiven Stufe aufgrund seines einzigartigen Merkmals/Features “Farbe” erkannt. Wir brauchen keine gerichtete – d.h. bewusste Aufmerksamkeit, um unser Zielobjekt zu erkennen, sondern nutzen die schnelle parallele Informationsverarbeitung – und somit eine parallele Suche.

In der Integrationsbedingung allerdings erhöht sich jedoch die Suchzeit, weil wir unsere Aufmerksamkeit auf die Störobjekte richten müssen, was zu einer langsamen seriellen Verarbeitung und somit einer seriellen Suche führt. Wir “grasen” jedes Element ab und prüfen, ob dies die Merkmale unseres Zielobjektes besitzt. Die Suchzeit erhöht sich somit auch mit der Anzahl der sichtbaren Störelemente.

Was bedeutet das für Interface Design?

Wenn mehrere Objekte zu viele gemeinsame Merkmale aufweisen, kann es für uns schwierig werden, das zu finden, was wir suchen oder finden sollen. Die Feature Integration Theorie liefert uns einen wissenschaftlichen Erklärungsansatz, um dies bei Designentscheidungen zu berücksichtigen und begründen zu können. 

Erinnern wir uns an das erste Beispiel mit Google-Symbolen: Die Merkmale sind sich alle zu ähnlich, sie weisen sehr viele Gemeinsamkeiten auf. Sie teilen sich die Form und die Farbe, beides Dinge, die wir schnell und automatisch auf der sogenannten prä-attentiven Stufe wahrnehmen. Das macht es uns unmöglich, auf dieser schnellen Verarbeitungsstufe das richtige Objekt sehr schnell zu finden, da wir sie nicht so schnell unterscheiden können. Wir benötigen also die langsamere, attentive Stufe, um unser Zielobjekt zu finden – d.h., wir müssen also erst jedes einzelne Element bewusst abscannen und prüfen, ob es unser “Zielobjekt” ist – und das beansprucht Zeit.  

Das kann in Situationen, in denen ein schnelles Handeln und Reagieren erforderlich sind, ein Risiko bergen. Man denke hier an das Gesundheitswesen, die Transport- und Automobilbranche, an Flugzeuge, Spaceshuttles oder generell an die Industrie. Aber auch bei Produkten, die nicht in sicherheitskritischen Umgebungen eingesetzt werden, können wir die Erkenntnisse aus der kognitiven Psychologie nutzen, um Menschen das Leben etwas leichter zu machen.

Quellen

• Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. https://doi.org/10.1016/0010-0285(80)90005-5

Die überarbeitete Webseite des Deutsch -Französischen Bürgerfonds präsentiert sich ab sofort mit einer klaren Benutzerführung, an den Bedarfen der Nutzer*innen ausgerichteten Inhalten und einem optimierten UI Design.

Ziel des Relaunches war es, dass die Besucher*innen künftig die benötigten Informationen schneller auffinden. Dafür wurde eine optimierte Informationsarchitektur gestaltet, indem das Menü sowie die Themeneinstiege der Startseite überarbeitet wurden und klare Call to Actions für eine verbesserte Benutzerführung etabliert wurden. Zusätzlich wurden zur Optimierung der Auffindbarkeit von Inhalten neue Seiten und Inhalte gestaltet sowie zur Verbesserung der Usability zeitgemäße Anpassungen an Formularelementen vorgenommen.

Die Grundlage für das angepasste User Interface Design sowie der Gestaltung neuer Komponenten bildete eine bestehende visuelle Identität, einschließlich der Farben, Typografie, Illustrationen und Bildformate. Wir verwendeten zudem nuancierte Abstufungen der bestehenden Farbbibliothek sowie bestehende Illustrationen, um eine klare visuelle Hierarchie zu schaffen.

Zur Webseite des Deutsch-Französischen Bürgerfonds

Ihr könnt das Projekt auch in unseren Case Studies finden.

Keine Zeit zum lesen? Tl; dr

Auch mit einem kleinen Projektteam und begrenzten Ressourcen sind enorme Verbesserung hinsichtlich der User Experience möglich. Oft liegen Lösungen sehr nah, wie z.B. sich einmal anzuschauen wie kommuniziert wird: In der Sprache der Nutzer*innen oder der der Organisation? Spricht man die Sprache der Nutzenden wird für diese vieles plötzlich einfacher auffindbar und es gibt weniger Absprünge. Auch ein visuelles Design, welches sich an den Wahrnehmungskapazitäten der Menschen ausrichtet, kann wahre Wunder hinsichtlich der Auffindbarkeit von Inhalten und einer Verbesserung der Benutzerführung bewirken.
Zudem wird durch die Etablierung eines Design Systems ein aus betriebswirtschaftlicher Sicht ökonomisch und nachhaltiges Pool an Ressourcen aufgebaut, um zukünftige Anpassungen kosteneffizient und einfach durchzuführen.

UI Designers in Advertisement Land

As Interaction and UI designers, we insist on the necessity of „the big picture“. In fact, we are quite anal about it. This means that we never ever head into a project ready to pump out those visuals. We always start with taking a step back to have a good long look, even if you hit us with a pretty straightforward list of to-dos and deliverables. We just can’t help ourselves. We do this because we know that 10 minutes of thinking can save time in the long run and prevent lots of things like the frustration of endless revisions or repetitive and boring tasks that should be done by robots, not humans (sorry Rupert!).

So while we stood back, admiring the view we noticed repetitive patterns within the deliverables. We decide to call these patterns communication items. The communication items varied in their form of expression, depending on which target group or use case was currently addressed but they were all the same item. They were bits of information that we could arrange in groups. These groups were the communicational goals.

Group arrangement for a running shoe (example)

After we had arranged the various forms of expression in the communication goal groups we put them into an IA design context and found structural patterns for each communication item, which varied depending on the target group and use case. Next up was the visual for each form of expression and then the job was finalized with a style guide. So the outcome of the project, the media we delivered was quite similar to what we deliver when we work on projects that are not within Advertisement Land. What differed, however, was the process of the content arrangement. When building websites or apps we obviously have content groups as well but here we were dealing with an additional layer: different forms of expression, depending on different users.

The narrative structure and how to learn from creative writing

Imagine you are a creative writer and want to start work on your new story. Let us say the story is a fairy tale. You know exactly what type of story is meant when you read the words „fairy tale“ because it is a genre of literature and each genre follows certain rules: the narrative structure. A classic fairy tale will always have certain characteristics. It will be an imaginary story without temporal and geographical limits in which a hero will triumph and his nemesis (the bad guy) will not. The many, many fairy tales we know show that you can get pretty far with the same narrative structure without compromising entertainment value. But what does this have to do with us?

When taking a step back at the beginning of the project we first noticed the communication items and their forms of expression. These were the characteristics of our narrative structure, the narrative structure of our genre „advertisement campaign“. As we were producing interactive media and not static books we were able to create different versions of our story, which expressed themselves in various wireframes options and GUI patterns for the different forms of expressions. A certain fairy tale might appeal only to a certain audience but when choosing to express the form differently the same narrative structure can work for many different audiences. The story of a young man, with superhuman powers, who fights and defeats an overpowering opponent can have a form of expression that can be found in an old saga as well as a form that can be found in a modern-day sci-fi film series. Both stories share the same narrative structure but speak to a completely different target group.

If it works for creative writing…

….why shouldn’t it work in digital advertising?

We are used to working with wireframes, GUI patterns and their libraries. We use these tools to order content and create consistent designs that enable an enjoyable experience without interruption. When speaking to a broad audience about the same product we can, however, take it a step further and individualize the experience to even fit niches within the target group or even wacky use cases. If the message is as brief as in an advertisement campaign boiling down the information to the bare minimum, the communication goal of a communication item will be well invested time.

This is especially helpful if there will be a high demand for the output of the same or similar media. In our project, this did not only benefit the IA and UI designers but also the copywriters and marketing managers as well as the communication strategists. The message was clear and everyone knew what the forms of expressions had to pay into.

The most important lesson we learnt during this whole experience and reflection is, however, that we as designers can not only learn from other designers but also from any form of creative production. Even if the creative field seems to have a completely different output there might be work processes in there somewhere that we as UI designers can also benefit from. So we will be keeping our eyes open and who knows, maybe our first question in our next project will be „What would Alvin Ailey do?„.

photo credit:
Alice: mermaid99 via photo pin cc

Nowadays, as websites are turning more and more towards behaviour-driven applications, a polished, overall screen design of every page makes – in our opinion – no sense at all.

We can spend time more effectively and increase work on the concept and behaviour of the product instead of spending weeks pushing pixels. The concept and behaviour include interaction design, flow and user experience with rough scribbles and sketches or high-fidelity wireframes.

This does not mean that we believe visual design is not necessary or significant instead, we believe visual design is part of the UX. Our goal, however, is to keep it agile and slim.

We are both fans of modular design and discovered we have the same approach when creating visual designs. Our similar processes led us to come up with something we call GUI libraries.

GUI libraries and their benefits

A GUI library can replace a full-blown page-to-page screen design but will require an overview of the site in the shape of wireframes or scribbles. 

The advantages of GUI libraries:

• The designer must think closely about and decide what elements are in use.
• A GUI library provides a good overview of all existing elements.
• This overview will increase consistency and a coherent visual language throughout the entire design process, even if you (or someone else) continue to work on it years later.
• A GUI library is expandable and modular and thus perfect for agile projects.
• The library functions as documentation, making the lives of developers and fellow designers easier.
• Stressful and nerve-racking Photoshop layer terror will be a thing of the past, as will font-searching, colour-picking and other tedious tasks.
• Last but not least – it is a much faster process than designing all the main pages or even every single damn page in Photoshop!

If we reach a point in the project where there is uncertainty about the look of a specific page or the behaviour of an element we can sketch it out with scribbles or wireframes and have an answer more quickly than when working with high-fidelity visual designs of entire pages.

The importance of Master Layouts for GUI libraries

We work with GUI Libraries as an addition to one or two visual Master Layouts – finetuned screen designs of pages defined by the client. The Master Layouts define the general and global site layout as the grid, typography, colour scheme and universal elements such as header and footer, as well as page types.

When creating the page types in a Master Layout we also answer key questions like the following:

• What will the column layout of our page types look like?
• What are the sizes of the columns in the different layout types?

We provide answers by defining a grid and creating a visual composition with a visible grid that can demonstrate the usage of the grid and the different column widths. The information will prevent developers and fellow designers from having to dive deeply into a Photoshop file having to search for layer #666. Instead, they will receive the information at one glance at the document. It’s easy to use!

We present Master Layouts to the client. It informs them about the look and feel of the site and can also answer important questions concerning the entire product. It is a good foundation the client can use to provide feedback.

Once the Master Layout is approved we begin work on our GUI Library. The library may be one or two Photoshop files, containing ALL of the elements used within the product.

A GUI library could include:

• colour specs with hexadecimal definitions
• a typographic sample with all text variations such as headlines, paragraph text and links
• list elements, list header, even and odd list rows..etc
• tables
• all icons
• buttons (in all states)
• the primary call to action and secondary actions
• image sizes, image ratios and formats 
• default images, e.g. avatars
• all form elements 
• system feedback, e.g. error messages, warnings and notifications
• etc

The bonus: as your GUI library begins to fill up, your design documentation will become visible. At the end of the process, it will be complete and ready to scale when you add new elements.

Our workflow in detail – a summary

Summed up our workflow looks like the following:

1. Wireframes and the flow of the site (in the best case)
2. Master Layout with universal design definitions such as colour, typography, grid and global product elements (e.g. header and footer). We design one or two full visual screen designs depending on the site.
3. Client feedback and approval
4. GUI Library set-up and design
5. Optional graphics and image exports for the development team

This workflow works quite well for us as well as our clients. What does your workflow look like? We are curious to learn from fellow designers and developers!