Visual search is a frequent part of daily life. For instance, at a concert, we might look for a friend by focusing on distinguishing features such as blonde hair and a red jumper. In psychology, this person is referred to as the"target stimulus"or simply the"target".

Visual search involves perception and attention, helping us locate relevant objects in complex environments. In psychological terms, irrelevant objects are called "distractors."

Visual search is essential because our cognitive capacity cannot process all visual information simultaneously. This process is also critical in interface design, enabling users to quickly locate specific apps or elements.

An example from everyday (digital) life

I often tap the wrong app icon when trying to open FaceTime, especially when multiple apps share the same colour. This illustrates the challenge of distinguishing between similar visual features.

The Feature Integration Theory

The Feature Integration Theory by Anne Treisman and Garry Gelade (1980) offers an explanation for this phenomenon. According to this theory, we perceive objects in two steps. 

In the first step, basic visual characteristics such as colour, movement, or the orientation or shape of an object are automatically (and therefore swiftly) recognised and processed (so-called pre-attentive stage, as no attention is required from us here).

However, the combination and integration of these individual features of an object to perceive it as a whole (also known as "conjunction") is a slower process that requires our attention. This phase (attentive stage) is needed because conscious information processing takes longer than the first automatic process.

In the example above, I have many green apps on my display. Colour perception happens very quickly and unconsciously (pre-attentive stage), which explains why one taps on the wrong app. Only in the second stage (attentive stage) do I perceive "finer" details such as the specific icon (camera, arrows, etc.) in combination with the colour, and my brain forms "FaceTime Icon" or "Whatsapp Icon". We - or rather our brain - integrate or "conjugate" all the characteristics of the object into a whole.

The classic experiment

Let's try it out with the classic experiment adapted from Treisman and Gelade (1980): Try to find the blue "X" in the following graphic. The blue "X" is our target stimulus, and it is surrounded by so-called "interfering stimuli" that are irrelevant to us.

Feature condition: Find the blue "X".

Ok, that was very easy, wasn't it? We can also try the same thing again with several disruptive elements..

We can see that our blue "X" pops out, even with several interfering elements (Pop-out effect), allowing us to identify it very quickly. We look at all objects at the same time and can still recognise the blue "X" among all the other interfering elements very quickly. This happens so fast because we use the automatic, parallel processing mentioned above: We simply look at the objects that are within our field of vision, perceive them all simultaneously, and our target stimulus still "jumps out" at us due to its unique property, which it shares with none of the other objects in the vicinity - the blue colour. 

Let's continue with our experiment. We will now try to find the green letter "T" in our graph (integration condition):

Did you find the green T? If yes, that probably took longer, didn't it? Since we are no longer just looking for a unique feature, our target object no longer "stands out". As a result, finding the target stimulus seems much more difficult because it is surrounded by other green letters as well as other "T's". Our target stimulus (the green T) shares features with all of our interfering objects: the green colour of the letter "X" & the shape with the purple "T".

Therefore, a close inspection of each individual object is required to combine the features (shape and colour). If an object is not our target object, we move on to the next object until we discover our target object. This corresponds to a serial, step-by-step processing or a serial search process. That takes time.

In the first two experiments ("Find the blue X" - the so-called feature or characteristic condition), not even the search time is affected by the number of interfering elements. The target object is recognised automatically, unconsciously, and therefore very quickly during a pre-attentive level due to its unique feature. "Colour"has been recognised. We do not need directed, i.e., conscious attention to identify our target object, but use rapid parallel information processing and thus a parallel search.

In the third experiment (integration condition), however, the search time increases with the number of visible interfering elements, as we are forced to focus our attention on the interfering objects in order to find our target object. This leads to slow serial processing and, therefore, a serial search. We "scan" each element and check whether it has the characteristics of our target object.

What does this mean for Interface Design?

If several objects have too many features in common, it can become difficult for us to find what we are looking for. The Feature Integration Theory is a scientific approach explaining this phenomenon, allowing us to take it into account when making design decisions. 

Let's remember the first example with Google symbols: The features are all too similar; they have a lot in common. They share the same shape and colour, both of which we perceive quickly and automatically at the so-called pre-attentive stage. This makes it impossible for us to find the right object quickly during this fast processing stage, as we cannot distinguish between them fast enough. So we need the slower one, attentive level to find our target object - i.e., we first have to consciously scan each individual element and check whether it is our "target object" - and that takes time.  

This can pose a risk in situations where rapid action and reaction are required. Think of healthcare, the transport and automotive sectors, aeroplanes, space shuttles, or industry in general. But even for products not used in safety-critical environments, we can utilise the findings from cognitive psychology to make people's lives a little easier.

Literature

• 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

The revised website of the Franco-German Citizens' Fund now presents itself with clear user guidance, content tailored to the needs of users and an optimised UI design.

The aim of the relaunch was to enable visitors to find the information they need more quickly in future. To achieve this, an optimised information architecture was designed by revising the menu and the topic entry points on the homepage and establishing clear call-to-actions for improved user guidance. In addition, new pages and content were designed to optimise the findability of content and modern adjustments were made to form elements to improve usability.

The basis for the adapted user interface design and the design of new components was an existing visual identity, including the colours, typography, illustrations and image formats. We also used nuanced gradations of the existing colour library and existing illustrations to create a clear visual hierarchy.

To the website of the Franco-German Citizens' Fund

You can also use the project in our case studies find.

No time to read? Tl; dr

Even with a small project team and limited resources, enormous improvements in terms of user experience are possible. Solutions are often very obvious, such as taking a look at how people communicate: In the language of the users or that of the organisation? If you speak the language of the users, many things suddenly become easier for them to find and there are fewer bounces. A visual design that is aligned with people's perceptual capacities can also work wonders in terms of making content easier to find and improving user guidance.
In addition, the establishment of a design system creates a pool of resources that is economical and sustainable from a business perspective, allowing future customisations to be carried out easily and cost-effectively.

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 finalised 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 "advertising 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 individualise 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 form 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!