Kirby Sat, 22 Dec 2018 00:00:00 +0000 RSS-Feed von, der Website von Autor und Medienwissenschaftler Björn Rohles Chatbots with great user experience articles/chatbot-prototyping r Like with other digital products that are part of a strategy and build on thorough testing, you should first be clear about technological possibilities, business objectives, and user needs. When aligning these three areas, you have good chances of creating a successful chatbot. After this strategic planning, it is time for prototyping. Step by step, the chatbot is being developed, always close to the target audience and based on their constant feedback. With this basic explanation of the process, it is time to have a closer look at the various aspects involved.

Creating a good chatbot strategy

The basis of every successful digital product or service is a good strategy. Chatbots are no exemption. The following chapters explain the basics of chatbot strategy, while the following paragraphs dig deeper into prototyping.

Understanding chatbot technology

One of the advantages of chatbots is their flexibility. Chatbots integrate into websites, apps, social networks, and messengers (Skype, Facebook, Messenger, Slack, Telegram). As customers are distributed across more and more channels, this means chatbots are an important part of the communication mix.

Like voice assistants (Alexa, Siri), chatbots are conversational interfaces, allowing users to interact via language, in this case using a chat interface. Many platforms also allow integrating graphical elements like buttons, image galleries, or maps. However, the primary communication between humans and bots is written language. Chatbots build on three principal building blocks to analyze language: utterances, intents, and entities.

Utterances, intents, and entities, the basic building blocks of chatbots
Intents and entities form utterances in chatbot technology
  • Everything that users write is an utterance. These utterances are the basis of communication between users and bots.
  • Behind an utterance is the intent: whatever a user wants to achieve in a dialogue. This is what needs to be extracted. Developers often formulate intents as verbs with nouns, like “giveTrafficInfo” (in a bot about traffic information) or “showIBAN” (in a banking bot showing one's international bank account number).
  • Finally, there are also entities. These are parts of the sentence which modify the intent, like “A1” or “of today.” This information acts as a filter allowing to adapt the answers of a bot to the situation of the user: It should look for traffic jams on the A1, not on other roads.

First, a chatbot registers the text that users enter, e.g., “tell me about the current traffic situation on the A1”. As the communication with a chatbot happens in written language, it does not need to convert spoken words in writing to process it. However, the bot needs to be tolerant regarding writing errors.

Second, the bot needs to identify intents and entities in the registered utterances. The solution to this problem is Natural Language Processing, a technology that allows computers to process natural language. Services like Microsoft's LUIS (Language Understanding Intelligent Service), Google's Dialogflow, or Facebook's accept utterances in different languages as input. Then, they extract defined intents and entities. The result of this analysis, together with the context of a conversation, allows a chatbot to search for the right answer, e.g., by connecting to a company's data via an API.

There are different types of chatbots. Rule-based chatbots work with a range of predefined rules. However, this technology has its limits. In particular, the communication fails when users use phrases that the developer did not anticipate. For example, one might say “Is there a traffic jam on the A1 at the moment?” or “Should I leave now or continue working for an hour?” instead of the anticipated “Tell me about the current traffic situation on the A1”.

Alternatively, developers can use artificial intelligence (AI) technology to build chatbots. In particular, machine learning is a common solution, allowing a chatbot to learn from the communication with its users.

Finding use cases to build a chatbot strategy

Technological trends alone are no guarantee for a successful bot. It is also necessary to find the right use case. In principle, chatbots shine in smaller, well-defined use cases that allow for convincing dialogues. Bot directories like Botlist point to a large variety of bots that show the whole spectrum of use cases. However, case studies also help to understand the role that the chatbot technology can play. For example, Sharmadean Reid, who works as a social media influencer and runs the nail studio WAH in London, uses chatbots to organize appointments with her customers. Talking to Frank Pusch in iX magazine 6/2018, she describes that after just two months, 30% of the reservations are made using the automatic system. Thus, she is planning to expand the system and actively propose free slots to frequent customers. Reid's success story shows that even small and medium-sized companies can profit from chatbots.

Another case study shows the use of chatbots in marketing. The team behind the Jäm Bot of Jägermeister collaborated with the rappers Eko Fresh and Ali As. The artists created a large pool of fragments of a rap video. With the help of the bot, users could then create their own personal rap video.

Another advantage of chatbots is that users do not need to install them to interact. This means they are an alternative in situations where users might not want to install an app. An example of this strategy is the air company KLM (Netherlands) which allows customers to book flights via bots and receive information about their flights in Messenger.

Getting to know the users

If you want to create a successful chatbot, you should have a decent understanding of your audience. This understanding is likely the result of thorough user research. Surveys and statistics like the “2018 State of Chatbots Report” with 1,051 American consumers can provide a first orientation. This report contains evidence of the success of chatbots and gives ideas of using them. For example, around every seventh (15 %) consumer has interacted with chatbots. They particularly like that chatbots can give quick answers to questions, help to solve problems and provide details about issues.

Surveys like this can be a good reference point, but for an informed chatbot strategy, you should investigate the perspective of people from your right audience. The challenge is that the most straightforward methods are not always the best, which is particularly true for surveys like “What would you need a chatbot for?”. Potential users do often not know in detail, if and in which situations they would use a chatbot. As long as people do not know chatbots, they often cannot easily imagine use cases. In addition, what people do is not necessarily the same as what they say they will be doing. Thus, answers to surveys like this are always hypothetical and should be taken cautiously.

It is often better to ask people about what they do and how they experience it. How often do they take actions of interests that could potentially profit from a chatbot? What are their pain points, where do they reach limits? What questions, problems, and tasks do frequently come up?

  • Obviously, a good source for answers to these questions are all the channels where customers reach out to a company, like people working in customer support, analytics data of frequently visited pages, and search queries.
  • Another useful method is to provide potential users with something tangible, like a prototype or a story, which helps them to understand the vision of the creators. Then, you can invite these people to share their comments and begin understanding their needs.
  • Personas are an excellent way to make the results of this research actionable. They make it considerably easier to assess whether a chatbot is the right choice for your audience than abstract statistics.

User-centered chatbot prototyping

Based on the knowledge about business goals, technological possibilities, and user needs, it is time for the next step: prototyping. I suggest an iterative approach, where you develop and test solutions for interactions with chatbots step by step, one after another. You could start with very simple prototypes (low fidelity) which you continuously improve based on user feedback. Errors are an inevitable and valuable part of this process. Instead of trying to create a “perfect” first attempt, it is preferable to get prototypes as quickly as possible into users' hands and learn from the feedback you get in this process.

Creating dialogues for chatbots

Every medium has its peculiarities, and with chatbots, this is the dialogue with users. Accordingly, the first round of prototyping is all about how a bot can provide the user with the required information: which intents do they have, which information (entities) do they need, and how do they ask for it (utterances)?

A person is noting down phrases on sticky notes in front of a huge whiteboard
Prototyping a chatbot dialogue with the help of sticky notes, photo by Carine Lallemand
  • Sticky notes are an excellent choice to register the flow of dialogue. You can move them around endlessly on a whiteboard to test alternatives. If you include a single part of the conversation on every sticky note, you have a lot of flexibility to rearrange the flow.
  • Every utterance of the chatbot should move the conversation forward. It should also be rather short, but still, communicate the personality of the bot.
  • In the first phases of the prototyping, the focus is mostly on intents and entities: what do users want to achieve, and in which order will they probably express their wishes? What information does the bot, in turn, need to respond to these needs? How should it ask for this, and what should it infer from the context?
  • Typical elements of chat language are useful in the dialogues. This includes emojis and abbreviations like “LOL” (laughing out loud). The chatbot should know a reasonable answer to these utterances. Emojis and natural language allow a bot to communicate its own personality, like the Wienbot of the city of Vienna demonstrates. Besides its charming way of communicating, it also offers a ton of useful information about daily life in Vienna (like weather, parking, or directions).
  • It is also worthwhile to think about alternative dialogues. How could a response sound if the bot reacts in a slightly more humorous way? Or if it pokes fun at itself?
  • The onboarding deserves special attention. This means the entire process and the experiences that users make when they enter in the conversation with the bot, like welcome messages or how the bot communicates what it can do.
  • The default message is also very important. It is a kind of last resort which is always shown when the chatbot does not understand an utterance or cannot respond to it. It should be nice and offer help about continuing the dialogue at the same time.
Screenshot of the bot Mitsuku
Mitsuku shows its character with jokes and word plays, image used with permission

A default message is also meant to guide users back into the flow of conversation. Hipmunk's bot responds with nice graphics if you send a visual element which it does not understand. Afterward, it gently pushes the situation back to what it can do best: providing travel advice.

However, interacting with a chatbot should not only “work,” but also be fun and create a positive experience. With chatbots, personality carries a long way in this regard. It makes the bot unique and creates an emotional connection to the bot, but should obviously match the needs of users, business requirements, and tasks that the bot has to perform. A skateboard shopping bot will thus act differently than a support bot for upset customers. The bot Mitsuku by Pandorabots, for example, is a virtual personality based on artificial intelligence aiming to create realistic and friendly conversations. Accordingly, it responds with humorous replies if you ask about its well-being or future events.

Age, gender, character, kind (e.g., human, animal, machine), behavior, and origin are essential aspects to consider when creating a personality for a bot. A good method is to create a chatbot persona: a fictional character that often helps when writing dialogues. It is also possible to create several of these bot characters, create the appropriate dialogues, and then test how people from the target audience react towards them.

Fake it till you make it

When you have the dialogues and the personality ready, it is time to test your ideas – ideally, with the least effort required. One way is to use a method named after the Hollywood movie “The Wizard of Oz” by Victor Fleming from 1939. In the film, Dorothy meets the powerful wizard of Oz, but then discovers – be careful, spoilers ahead – his true nature: He is nothing more than a mechanical figure, controlled by a puppet master.

Likewise, you can start your chatbot prototyping with illusions: People from the target audience interact with a so-called-bot via a chat interface (e.g., in a messenger), but on the other end of the communication, there is a colleague of yours answering with pre-defined text blocks. It is, however, important to keep on track with the dialogue flow from the prototyping. This is easier said than done, especially when you discover situations that you did not foresee in your plan. It is important to note these situations down so that you can work on solutions for the next iteration. Everything that people say is valuable feedback to find out how they will communicate with the chatbot. After the sessions, you should also interview the participants about their experiences to find out how they evaluate their exchange with the chatbot.

In practice, details differ quite a bit between various projects. One setup would be the following:

  • First, you copy pre-formulated questions and answers in a Google Doc or in text snippets with a shortcut. The latter option is preferable because it is quicker. You can use a standard profile in a messenger as a fake bot and ask a colleague to mimic the chatbot. Obviously, humans will need longer to post the right answer into the chat, even with shortcuts – these are the kinds of constraints that you have to accept at this stage until you feel confident enough about your ideas to build a functional prototype.
  • With these prerequisites in place, it is time to recruit participants from your target audience for the test. In a lot of cases, you might be interested in their immediate responses, so that you invite them to your lab or another room. This allows you to observe them during their interaction with the fake bot.
  • A scenario can help participants imagine the situation in which they approach the bot, e.g., “It is 5 p.m., and you think about finish working for today. However, you also do not want to spend a lot of time stuck in traffic jams. A friend of yours told you about an automated tool that offers traffic information in a chat. You use this service for the first time now. Please comment on anything that comes to your mind.”
  • In the session, you note down any significant detail about what the participants say, how they react, and what they do – often, registering the interaction in audio or video is useful.
  • At the end of the session, you should interview the participants about their experiences. This is also the right time to inform your participant about the fake nature of the bot, explain the next steps of the bot development, and answer any questions they might have.
  • You repeat this process with more participants until you feel confident that you do not get new insights about the current bot version. Then, you analyze the results and start the next iteration.

While this approach offers a vast range of valuable insights, it is obviously also quite artificial. Thus, an alternative would be to let the participants stay in their usual context and interact with the fake bot on their own devices – this is more realistic but also harder to organize, and you collect fewer direct insights about the effects of the bot on the users.

Like with other user experience evaluations, it is important to understand that you test the digital product, not the people who are using it. Therefore, you should explicitly stress this and make the product responsible for any errors that might occur. The final debriefing interview should also make sure that any uncertainties of participants are taken care of. Furthermore, participants deserve appropriate compensation for their time.

Chatbot mockups and remote tests

After a few tests and some iterating over solutions, you start feeling more confident about the most important aspects of the dialogue and develop a feeling whether there is a need for the envisioned chatbot. Therefore, the next iterations use more realistic prototypes which require more effort in creating but are also closer to the final product. One variant of this is a mockup – still a fake chatbot, but one that simulates how it looks and behaves a lot more concrete then during the Wizard of Oz tests.

Tools like Botsociety can help in creating and testing the chatbot mockup. They allow to design interactions with the bot and share those as a video or a click dummy. These videos are also an excellent way to convince stakeholders of the opportunities. Click dummies are a superb input for a remote usability test, where you share a link with your participants. If they click on this link, they are taken to a simulated chat interface and can pick a couple of pre-defined utterances. You define the reactions of the bot on these utterances inside the mockup tool and ask your human test-takers for feedback.

Functional chatbots and transition to development

Moving on in your user-centered bot design process, you will sooner or later reach a point where simulated chat interactions are not enough. This is the time for a functional prototype (high fidelity). The good thing is that you do not need to develop the bot from the ground up to test it. Frameworks like the ones mentioned in the box below offer typical chatbot functionalities, often in combination with analytics, natural language processing, and artificial intelligence. Using one of these frameworks can substantially speed up the development. Thus, the functional prototypes are very close to the final chatbot – often, your chatbot will be based on one of these frameworks, and the transition from functional prototype to implementation of the real bot is smooth.

An alternative is chatbot platforms which allow building a bot using a click interface without writing code. With these tools, you can concentrate on defining the dialogues, but you also have to rely on the functionalities they offer. Examples are Chatfuel, Textit, Dialogflow, Dexter or Chatbot Builder.

Useful frameworks for bot development

There is a huge number of bot frameworks and platforms that can help developing a chatbot. They all offer a good documentation for a quick start of development. Here is a selection of services, without making claim to be complete:

Involve humans in the chatbot interactions

As said, chatbots can give relevant information and answer a lot of questions, but at some point, they reach their limits. Users tend to value human input, especially in complex cases. Fortunately, chatbots can turn the dialogue over to a human service representative at any point in time. From a user' perspective, this hand-over should be flawless, without breaking the flow of communication – there is hardly anything worse than having to repeat everything. Also, users should not be confused about whether they are currently talking to a bot or a human. The bot should, thus, explicitly propose to consult a colleague from customer service and provide the chat protocol if the users agree on talking to a human chat partner.

Testing and enhancing bots

Strategic thinking and prototyping lay the groundwork of a successful chatbot. However, like with any digital product, you should continue to enhance the chatbot after it is public. A good way to evaluate the chatbot success and find opportunities for enhancement is analytics:

  • There is a huge number of metrics that you might know from web analytics like the time users spend interacting with the bot or the number of returning users. These are equally important for chatbots.
  • Furthermore, there are some metrics which specifically target chatbots. These include the frequency of individual intents, the kinds of utterances users make at various points (conversation funnel), or the emotions they communicate in their utterances. Special metrics like these are available in analytics providers specializing in chatbots, like Dashbot or Botanalytics, but also in a lot of the platforms mentioned in the box above.

It is also possible to automate some of the technical tests. This means that these tests become an integral part of every development step and are automatically performed to test basic functionalities. A tool like Botium can help in doing so. It should look familiar to anybody who knows Selenium, a similar tool to automate browsers. Also, you should try to implement a way to collect continuous feedback from users. As needs can change over time, a chatbot has huge potential to adapt to such changes.


The current chatbot boom is not solely based on technological change. Advantages of chatbots are that users do not need to install the bot, have little difficulties to understand the interface and learn about the bot's capabilities via a simple, speech-based onboarding. Thus, chatbot technology has huge potential to retrieve users exactly where they are. However, strategic planning and careful prototyping are prerequisites to do so. Assuring these leads to a good chance to succeed with your automated communicative helper.

What is a digital strategy? articles/digital-strategy r With the risk of oversimplifying, a digital strategy defines how to reach business goals with the help of digital technology. Digital fundamentally changes the business landscape, and digital strategy is a reaction to these changes. However, there is more to digital strategy than business: It connects business, people, and technology. It is thus based on three questions:

  • What do people need?
  • What is technologically feasible and reasonable?
  • What makes sense from the perspective of the overall objectives, e.g., of a business, person, or institution?

The digital strategy aims to align these three aspects. Ideally, this creates a value-creating experience for customers and users. Furthermore, organizations have to constantly change their digital strategy in countless iterations, with the aim of moving to an ethical, sustainable future.

Digital strategy aligns organizations, people, and technology, with experience in the center creating a constant value loop, while iterating towards an ethical future
Digital strategy focuses on where organizations, people, and technology meet

Three pillars of digital strategy: organizations, people, and technology

While this offers a good starting point, there is still much to be said about digital strategy. So let's look at the concept in detail, one step at a time. We will start with what organizations seem to care most about: themselves. With ”organization,” I refer to enterprises, institutions, or even whole societies – each of these can profit substantially from a digital strategy. One could also argue that an individual would need a digital strategy.

Digital strategies explain the digital businesses of organizations

As being said, a digital strategy defines how an organization can reach business goals with the help of digital technology. In many industries, where ”digital” has not always been at the core of the business, this goes hand in hand with transforming the organization to profit from digitization. Digital transformation is one of the biggest changes in the history of economy. There are different approaches to understand what this means for an organization. It helps to think in three points of view that an organization could take:

  • retrospection: The first approach takes a historical point of view and is driven by fear. We look at famous examples like Kodak. Kodak invented the digital camera, but then failed to profit from it: Fear of ”cannibalizing” their business of analog films led them to leave the digital field to others. Stories like this scare us, and in hindsight, we can see similar missed digital opportunities in the history of our enterprise: We did not understand the significance of e-commerce, or the blockchain, or artificial intelligence before everybody was talking about it. How can we avoid making this mistake again? In this approach, digital transformation is viewed predominantly as a necessity, and organizations tend to react to the extent that digital transformation is essential to stay in the market.
  • inspection: The second approach is driven by current technology trends, which organizations want to exploit: mobile, social media, the cloud – whatever the technology, organizations do not want to miss out. In a way, organizations wait until they can be pretty sure which technologies are on the rise, thus taking a point of view centered around the present. Then, organizations start thinking about how these hot technologies could help them market their products. This approach views digitization as using digital channels, which can be exploited to reach audiences.
  • projection: The third approach takes a proactive stance, trying to enhance an organization's products and services with digital aspects. Digital thus becomes a source of revenue, making it an integral part of the business model. The point of view of this approach looks towards the future. Digitization is thus part of the shift towards a brighter, digitally driven future of the whole organization.

It is important to say that none of these viewpoints is a bad thing as such – each has its merits, but also its challenges. While the retrospective view can be compelling in convincing people, it suffers from the fact that the past is not always a good predictor of the future. The inspective view is a great way to broaden our perspective and make sure that we do not miss any current trends. However, it suffers from being too slow and relying on others to observe digital opportunities. Furthermore, we might misinterpret what we see. As the futurist Ray Kurzweil puts it, exponential change looks pretty similar to linear change until we reach the curve. A projective perspective offers excellent opportunities, but risks of being built on air, where it is not straightforward to get the buy-in of other stakeholders for the necessary investments.

Ideally, a digital strategy should thus take a holistic view, by incorporating all three points of view where appropriate. It involves looking at the past to find where an organization missed opportunities, to avoid the same thing from happing again. It means continuously observing the current discussions about digital technologies, to make sure that we miss no opportunity. Moreover, it means actively working on one's own disruption.

Digital strategies put people at the core

”People” is equally well represented in the image above as the organization and technology. This is no coincidence. People's needs are driving digitization, and thus the digital strategy itself. Audiences are rapidly changing in the digital age. For example, a study in the telecommunications industry by the consultants Oliver Wyman (article in German) found that customers increasingly take customer service in digital channels for granted. This makes these digital channels a real hygiene factor, not a distinguishing feature. Being in contact with audiences through digital channels has become a prerequisite.

”People” naturally includes customers, but is not limited to them. It is equally important to consider employees, the general public, and users (who might not always be customers in the sense that they pay for a service). For instance, successful digital transformation needs the support of all employees. A recent study by Microsoft found that only 11% consider the digitization in their enterprise a joint project. This number is a pity because it is unlikely that such a broad change like digital transformation will succeed if the people who are affected are not participating.

In the digital economy, organizations are built around the talents of the employees.
Ayad Al-Ani, organizational researcher

As digital trends like automation, crowdsourcing, and artificial intelligence make repetitive tasks more and more unnecessary, employees gain more time for finding new, possibly digital, solutions for their enterprises. This is a huge potential to capitalize on – great ideas arise from people working together with their talents.

A digital transformation like this does not come easy. It involves profound changes in culture and behavior. It needs planning, integrated thinking, and a long-term vision. Thus, a digital strategy should include reflections about the own employees. Thinking about the ways that digital technology could make their jobs better is a good place to start. How will their situation change? What will be their roles? How much time should they dedicate to digital transformation, and who will take care of what? Moreover, what do these changes mean for the organization as a whole? You should also try to motivate employees to actively participate.

Digital strategies think in ecosystems of technology, not only products

A digital strategy is thus a reaction to the needs of people, with a particular focus on changes of these needs and how digital technologies are used to respond to them. Therefore, understanding the needs of people and the technologies they use is crucial for a successful digital strategy. Understanding the needs of people is grounded in thorough research. Chances are that the needs of people do not circle around your products. Instead, people use a variety of products and services, as well as exchange with a lot of other people, to get a job done. It is thus necessary not to only think in products, but in ecosystems.

In biology, an ecosystem is a symbiotic system where organisms and environment exist together in a way that the overall system is stable and in harmony. Similarly, a digital ecosystem does not limit itself to the products and services of an organization, but on the entire ways these are embedded into the lives of people. An ecosystem thus considers

  • who the people are, and their networks with other people
  • what they do, and what services, technologies, and channels they use
  • how they feel in these situations, and how these emotions influence our experience with the product of the organization.

However, the notion of an ecosystem does not only point us to the connections between different aspects: An ecosystem also is not static, but continually evolving and fragile – a change in one area can affect the whole system. Digital is precisely like that. Furthermore, an ecosystem is not built around one species, but it is a network of species. Likewise, a digital strategy looks at the relationship between the products and services of an organization to the whole range of technologies.

The technological landscape has changed profoundly over the last years. Digitally driven competitors have entered the market in industries where, only a few years earlier, most of us would have never thought it could happen. Furthermore, using technology, competitors of a much smaller size can make a significant impact on the market. More and more data is becoming available, thus creating an ever growing need for data scientists. There is also an ever-increasing number of technological trends (like blockchain, cloud services, or machine learning, to name a few), which in turn influence how enterprises act (e.g., ”Bring your own device” initiatives that allow employees use their own devices for business purposes). Furthermore, the pace of digital change is enormous, making constant technological innovation a necessity.

Technology is a great neutralizer of company size.
Andrew Frawley, Brainfluence 51

However, it is not only the sheer number or speed of technologies that is impressive. It is also the magnitude of its effects. Let's take a brief look at some of the book titles that authors used to describe it: ”The Second Machine Age,” by Erik Brynjolfsson and Andrew McAfee. Or ”The Fourth Industrial Revolution,” by Klaus Schwab. Or Tim O'Reilly, who justifiably speaks of ”What's the Future” technology. Authors like these understand that digital change is a megatrend, which is influencing almost everything. It will undoubtedly continue to do so.

With all these impacts that technology has on organizations: A digital strategy is not about choosing one of these technologies because they are trendy. It is about choosing the right ones to achieve the goals. However, technology alone cannot tell us which ones are right. To answer this question, we thus have to merge the perspectives of organization, people, and technology and concentrate on where they intersect.

Experience as the key differentiator of digital organizations

One of the most important goals in traditional business theory is to create what is called a unique selling proposition (USP). In conventional economics, a USP is something which differentiates you from your competitors. However, in digital business, such a USP is increasingly difficult to maintain. When digital products are based on similar technologies and can be rapidly prototyped in software and hardware, it is likely that a technological advantage does not stay for long. Constant innovation is key to success. Furthermore, the market has become global, meaning that advantages based on location cease to exist in many industries. Low barriers to entry make the problem even worse because new competitors could arise at any time.

However, this does not mean that there is no way to differentiate ourselves from our competitors. The differentiator is just somewhere else. It cannot be found on the side of an organization alone but lies in the center where the goals of an organization, the technological possibilities, and the needs of people meet.

There lies experience, often in the form of user experience or customer experience. Thinking of experiences has a couple of advantages:

  • They depend on the needs and goals of people, while at the same time they have to be provided by an organization with the help of technology. They thus make sure that all three areas of digital strategy are accounted for. Even more so, none of these areas can determine experience on its own.
  • Experiences provide meaning. They thus distinguish between necessary things to do in a strategy and superficial activities.
  • Experience can be measured and evaluated, making it a very actionable concept. However, they are not too simplistic, thus avoiding the risk of oversimplifying of reality.
  • Experience is a holistic concept: It comprises what we anticipate an experience to be like, our experience at the moment, our memories of it, and the long-term effect.
  • Experience creates a value loop, where each of the three components of digital strategy profits. The more users use a digital product to achieve their goals, the more their use contributes to reaching the business objectives, while at the same time data is created. This data can be analyzed to make the technology better suit the needs of people.

Putting experiences at the core of what an organization does has two challenges worth addressing. The first is its complex nature. It is not easy to design for experience, and it is continuously changing. A digital strategy thus has to move fast, be ready for rapid testing, and continuously push things forward. The second challenge is that experience is only complete if its long-term effects are considered, calling for ethical considerations.

Over and over again, iteration after iteration

The digital world is moving fast. Digital opportunities, platforms, and user needs are evolving each day. In addition, there are far fewer trails and rules of thumbs than in other areas. Although there are best practices, you cannot be sure that they are valid in different contexts. A ”we have always done it like that” attitude does not lead you far in digital. There is just too much change, too many differences between industries, and too much experimentation needed.

The digital strategy should consider this changing nature of the digital landscape. It needs to be constantly evaluated and refined. It should be ready for the future. However, we do not know the future. At the core of digital strategy, experiences are also not fixed but evolve. Furthermore, we cannot design experiences directly. We can only design for experiences, meaning that we always have to get our digital products and services out to people, investigating which experiences they create, and then adapt our strategy.

Therefore, iterating is at the core of digital. Iterating a digital strategy means appreciating its fluid nature. Adam Cranfield of DigitalFWD suggests that a digital strategy should have a scope of about two years. This is a reasonable compromise between not too long, but also not too short.

Iterating also means that we need to consider new qualifications – suddenly, occupations become interesting in new fields. While developers, designers, media experts, or researchers are still mostly found in a well-defined range of industries (like companies with a clear focus on digital services, or agencies doing client work), my impression is that these jobs become more and more interesting in other fields as well. No wonder: these people have learned what is needed to deal with the digital uncertainty. They focus on a particular task, create endless variations of it, and thoroughly test it to see if it works. Moreover, they build on it to find the next solution.

Ethics in digital strategy

As said, experience does not stop at the moment when a user is interacting with our product or service. It includes what he experiences afterward. It also includes what others experience, and even considers the society as a whole. Also, it certainly includes sustainability issues, meaning what a product or service does to society and environment in the long run. Indeed, ”digital” needs ethics even more than other fields for two reasons:

  1. What ”digital” does is to a large part invisible to the naked eye. We cannot observe functionalities of digital media, like what an algorithm does (and on what it bases its decisions), which data is collected at which point in time, or which consequences a digital technology could have when it is connected to another technology. We only see the results.
  2. ”Digital” profoundly changes our lives, and digital technologies tend to become personal. The history of computers is indeed a history of digital technologies becoming closer to the human – from the shared mainframes of the 60ies to the ”personal computer” of the 80ies to digital devices we all carry with us, all the time, like smartphones or wearables.

We thus need to consider the role of ethics in a digital strategy. Digital design is not free of values – it always has a goal, so we ask what this goal means for our futures.

We need to fear the consequences of our work more than we love the cleverness of our ideas.
Mike Monteiro

Do we need a digital strategy?

People sometimes ask me whether their organization needs a digital strategy. While this is, of course, the individual decision of everybody, I would argue that yes, a digital strategy is required for most organizations:

  • Given the significant changes that digitization means for businesses, society, environment, and culture, it is doubtful that organizations will be able to deal with it when they have nobody to care for it. A digital strategy defines who that should be.
  • Furthermore, digital business processes can be scaled up or down, meaning that they are appropriate for organizations of any size.
  • Some industries have been affected by digital change early on, while others are still relatively unaffected. However, it is not likely that there is an industry which can afford not to deal with digital transformation. The Global Center for Digital Business Transformation has created the concept of the Digital Vortex, where industries closer to the center experience the need for digitization more urgent than those at the edges. However, there is only one direction in a vortex: inwards. (And remember the old saying: The early bird catches the worm.)
Digital vortex, where more and more industries are drawn to the center of digitization
The digital vortex by the Global Center for Digital Business Transformation

Why other strategies cannot cover what ”digital” means

Can ”digital” be accounted for in another strategy? Which strategies could be able to deal with digital transformation? The first obvious candidate would be business strategy. However, unless ”digital” is really at the core of your business (in which case ”digital strategy” would be identical to ”business strategy”), there are many difficulties in aligning digital and business strategy:

  • The business strategy covers the whole range of economic strategy, meaning it is often too broad to account for the opportunities afforded by digital technology.
  • Sometimes, you can directly derive objectives for digital strategy from business strategy. For example, when the business strategy states to increase sales by a certain amount, the digital strategy should include goals of how this translates to digital: Which part of this goal should be realized with digital channels? You could thus define that you want to ”increase our sales in our online shop by 15%”.
  • However, a digital strategy is also about finding new digital opportunities, which could themselves become part of the business strategy. The trouble is that the abilities that made a business succeed outside ”digital” are not necessarily the same that promise to be successful in digital transformation. As a business strategy focuses on what has been working well in the past, it risks losing sight of what might work well in the digital future.
  • In addition, the business strategy often has a focus of several years – probably too much for the rapidly changing digital landscape.

This means that, despite all the connections, business strategy is not the best place to answer the questions that a digital strategy poses for most enterprises.

Given the role that digital channels play in today's marketing, should we then account for it in our marketing departments? Well, we certainly could, but digital also goes beyond marketing, so that marketing strategy is not the best place to deal with digitization. It is true that marketing can (and indeed should) cover some aspects of digital transformation. However, in many cases, marketing also has to take care of non-digital areas, which tend to work according entirely different rules. Furthermore, marketing is looking at the customer, not the user – a meaningful distinction.

IT strategy might be another candidate, and sometimes the Chief Information Officer (CIO) takes this role as the digital strategist. However, the focus of the roles is different: CIOs need to focus on technology, while digital strategists work at the crossroads of technology, business goals, and user needs and experiences. Digital transformation does not only need introducing and taking care of technology. It requires a change of the culture and the structure of the entire organization. Including all of this in IT strategy would considerably extend the work of the CIO, and given the breadth that IT strategy already has, I am not sure that this would be a good idea.

Who is in charge of the digital strategy?

What had been outlined so far indeed argues for seeing digital strategy as something which should have a place in the board meetings of his own. Now, this still leaves one question open: Who should take care of digital strategy? I have already argued that I do not consider IT or marketing strategy the best places to deal with digitization. The apparent first idea would thus be the Chief Executive Officer (CEO) herself.

There are good reasons to say so: I often come across the idea that digital change is a top-down process, meaning that it needs significant buy-in of the CEO and is not likely to be successfully implemented ”from the ground up.” I agree with this statement, but with one modification: While it is true that the CEO should lead the organization towards digital, she still has a business to run. In some cases, this business might be so close to the digital world that the CEO is, in fact, a digital strategist – why would a company like Facebook or Amazon need anyone looking at digitization, if ”digital” is the core of what they do? However, in other industries, I do not think that a CEO can dedicate enough time to ”digital” to stay on top in this fast-moving area.

Another possibility is the relatively new, but rapidly growing role of the Chief Digital Officer (CDO): In their regularly updated CDO-Kompass (only available in German language), Oliver and Leon Merx found that the number of CDOs has been growing from mere 52 in 2010 to 2,500 in 2016.

One of the most interesting recent additions to the C suite that I came across is the CXO: the Chief Experience Officer. This job role is grounded on the growing importance of user experience (UX) as a key differentiator in business, making it the core of a digital strategy. The CXO might, therefore, also be the person in charge of the digital strategy.

Sometimes, digital change is implemented as a subpart of all the other departments. In this view, each department should look on its own at what ”digital” means for its way of working. While it is indeed imperative to have each department share its needs regarding digitization, somebody has to connect and enhance these inputs, take care of synergies and contradictions, and make sure that every digital opportunity is discovered. The whole is more than the sum of its parts, as the old saying tells us. This statement is especially true for digital.

A digital strategy is vision and objectives, not tactics

Now that I have explained what a digital strategy is, I want to emphasize what is it not. When I talk to people about what I do for a living, people tend to ask me about concrete things. How should a website look? How do I program an app? Which rules of thumb should I use to boost my sales? Which content management system (CMS) should I use?

These are interesting questions. However, they are not an integral part of the digital strategy, but of digital tactics. A strategy defines what to do, but not exactly how to do it. A tactic is a means to achieve the goals. Ideally, the digital strategy enables people to act and decide on the right actions on a daily basis. This means that the digital strategy should not be too vague, nor too complicated to understand. It guides behavior, but it does not spell out each and every step of this behavior. A strategy cannot give each and every answer that a practitioner needs. It just gives enough detail so that each actor stays free to quickly evaluate how to achieve it, and thus choose the appropriate tactic. Afterward, the success of the actions is evaluated with the help of the success criteria that the strategy defines. Like the strategy, a tactic also has to be adapted on the run as well.


In times of quickly growing digitization, organizations, institutions, and people are increasingly afraid of not profiting from the opportunities that digital change affords. Developing a well-researched digital strategy is one of the primary means to account for digital opportunities. A digital strategy aligns the needs of people, the goals of an organization, and the opportunities of digital technology. It makes sure that the three components together create valuable experiences. Digital strategy is improved continuously in countless iterations, while always having ethics in mind to make sure that its objectives are meaningful and sustainable. A digital strategy is thus an essential step in the digital maturing of organizations.

Buchtipp zur Konzeption von Websites articles/buchtipp-website-konzeption r Ich werde immer wieder gefragt, mit welchem Buch man den Einstieg in die erfolgreiche Konzeption von Websites finden könnte. Jens Jacobsens „Website Konzeption“ dürfte der Klassiker schlechthin sein, wenn es um einführende Werke in die Webkonzeption geht – und das nicht ohne Grund. Es erschien bereits 2001 in seiner ersten Auflage und wurde seitdem regelmäßig aktualisiert – mittlerweile ist es bei Auflage 8 angekommen.

Gliederung in Konzeptionsphasen

Natürlich ist es nicht einfach, ein so komplexes Thema wie die Konzeption von Websites sinnvoll in eine Struktur zu bringen – ganz besonders angesichts der Tatsache, dass sich der Prozess zwischen verschiedenen Projekten stark unterscheiden kann. Gerade in den letzten Jahren hat sich beispielsweise ein iteratives Arbeiten immer stärker durchgesetzt. Für ein Buch wie „Website-Konzeption“ bedeuten diese Entwicklungen: Es muss Orientierung und Werkzeuge bieten, die eine Leserin in der Praxis nutzen kann, ohne ein zu strenges Raster vorgeben zu wollen – und alles das zugleich, ohne die Einsteiger durch zu viel „Es kommt darauf an“ zu verwirren.

Cover von Jens Jacobsens Buch Website-Konzeption
Standardwerk in mittlerweile achter Auflage – „Website-Konzeption“ von Jens Jacobsen

Jens Jacobsen gelingt dieser Spagat bemerkenswert gut. Er unterteilt das Thema „Konzeption“ in logische und nachvollziehbare Phasen, die nahezu immer in der einen oder anderen Form angegangen werden müssen. In jeder dieser Phasen gibt er zahlreiche Tipps, und immer wieder spricht er auch von alternativen Vorgehensweisen, wo es angemessen ist.

Diese logischen Phasen bilden auch die einzelnen Kapitel von „Website-Konzeption“:

  • Die ersten Kapitel befassen sich mit dem Briefing, bei dem die Ziele des Projekts definiert werden, sowie dem Thema Kalkulation & Angebot mit zahlreichen Ratschlägen, wie man den Aufwand einer Website realistisch einschätzen kann und daraus einen Preis kalkuliert.
  • Im Anschluss beschäftigt sich Jens Jacobsen mit der eigentlichen Website-Konzeption. Sinnvoll ist seine Einteilung in zwei Phasen. Im Grobkonzept geht es darum, grundlegende Richtungsentscheidungen zu treffen – nicht selten werden diese Schritte auch vorgezogen, weil sie das Angebot stark beeinflussen können. Im Feinkonzept geht es dann darum, die gesamte Website möglichst genau zu beschreiben – alle anderen Projektbeteiligten sollten dort finden, was sie für ihre Arbeit brauchen. In diesem Kapitel gelingt es Jens Jacobsen, auf wenigen Seiten zahlreiche wichtige Grundlagen von Usability und User Experience zu versammeln – das Kapitel eignet sich daher auch sehr gut als Einstieg in die nutzerfreundliche Gestaltung von Websites für Menschen, die damit bisher nicht in Berührung gekommen sind.
  • Das Designkonzept legt anschließend die visuelle Gestaltung fest – in diesem Kapitel finden sich auch viele Grundlagen der menschlichen Wahrnehmung. Sehr gut gefallen hat mir, dass in „Website-Konzeption“ Usability-Tests als fester Bestandteil eines Projekts definiert werden – nicht selten entscheidet die nutzerfreundliche Gestaltung über Erfolg oder Misserfolg einer Website.
  • Die Umsetzung wird in die Kapitel Produktion Text (mit zahlreichen inhaltlichen Tipps sowie Grundlagen von Suchmaschinen-Lesbarkeit) sowie Produktion Grafik, HTML & Code (mit Accessibility, Responsive Webdesign und Projektmanagement) eingeteilt.
  • Im vierten Teil des Buchs widmet sich der Autor den Themen Launch (mit Qualitätssicherung und Dokumentation), dem Sammel-Kapitel PR, Inhaltspflege, Newsletter (mit sehr knapp gehaltenen Marketing-Grundlagen), Analytics-Grundlagen im Kapitel Besuchsstatistiken auswerten sowie Social Media.
  • Im letzten Teil des Buchs gibt es noch eine ganze Menge von Tipps zu verschiedenen Arten von Websites – sei es für Unternehmen, Shops, Vereine oder Bildungsangebote, um nur einige zu nennen.
Übersicht der im Text erläuterten Konzeptionsphasen
Schritte der Website-Konzeptions aus dem Buch von Jens Jacobsen

Naturgemäß wird vieles nur grob angerissen – die meisten dieser Themen füllen problemlos eigene Bücher. Das ist aber auch okay so – in einem Buch wie diesem geht es darum, in die Breite zu gehen, weniger in die Tiefe. „Website-Konzeption“ wird so zu einer Art Wegweiser, den Einsteiger immer wieder zur Hand nehmen können, um dann nach Bedarf tiefer in einzelne Themen einzusteigen. Bemerkenswert ist auch, dass der Autor die Themen so beleuchtet, dass sowohl Auftraggeber als auch Auftragnehmer viel lernen können.

Änderungen zur vorherigen Auflage

Jens Jacobsen hat sein Werk für die achte Auflage vollständig aktualisiert und wo nötig auf den neuesten Stand gebracht. Die augenscheinlichste Neuerung im Vergleich zur vorherigen Auflage sind dabei die sechs Interviews, die Jens Jacobsen an verschiedenen Stellen eingebaut hat. Sie sind nicht nur eine willkommene Auflockerung, sondern bringen neue Perspektiven und persönliche Einschätzungen ein. Jens Jacobsen deckt daher in seinen Interviews auch eine große Bandbreite ab: Es kommen Auftraggeber und Vertreter von Agenturen zu Wort, Designer und User-Experience-Praktiker. Diese Interviews bringen immer wieder neue Ideen, über die man nachdenken sollte – beispielsweise, im Rahmen eines „lean relaunch“ zunächst die Codebasis aufzuräumen und erst im zweiten Schritt eine neue Optik auszurollen. Oder Praxiseinblicke in agile Konzeption von Websites. Und: Alle Gesprächspartner geben einen Ausblick, wie sich das Web – und mit ihm die Konzeption von Websites – bis ins Jahr 2025 ändern wird.

Es wird einen großen Wandel geben in der Branche. Die Kompetenzen wachsen weiter, viele machen das selbst, was heute Agenturen machen. Das ist aber eine Chance, weil wir noch mehr zu User Experience arbeiten können, mehr zum Erlebnis, zu den Services, die um die Site herum angeboten werden.
Wolfgang Waxenberger im Interview über die Entwicklungen im Webdesign

Fazit: Gelungenes Standardwerk

Für Einsteiger ins Thema ist „Website-Konzeption“ uneingeschränkt zu empfehlen – es gilt nicht umsonst als Standardwerk zum Thema in deutscher Sprache, und es hat mir auch bei meinem Workshop zur Website-Konzeption viele wertvolle Inspirationen geliefert.

Personas in user experience design articles/personas-ux-design r What are personas?

Let's start with the words of Alan Cooper, who introduced the persona method into the user experience design community. He defines personas as follows:

Personas are not real people, but they represent them throughout the design process. They are hypothetical archetypes of actual users.
Alan Cooper, The Inmates Are Running the Asylum

Personas are thus not real, but realistic descriptions of users. They are archetypes, meaning not persons found somewhere, but also not purely inventions. On the contrary: an invented persona will certainly do a lot of harm, because it leads to wrong design decisions – you think you are designing for your users, but in reality you design around them because you do not even know them.

Personas represent target audiences, but are not identical to them

Example of a persona called "Michael" with detailed information
Personas make the results of user research readily available.

When I introduced the idea of personas in a marketing department, I looked into (seemingly) knowing eyes: right, target audience. But this is not exactly the case – personas represent target audiences, but they are not the same thing:

  • Target audiences are based on quantitative studies – you look for one (rarely a few) relevant parameter and study its occurrence in the population. Then you use these results to separate people into groups, for example the lifestyle based sinus milieus. Thus, target audiences make it easier to handle the many individuals in these groups, because they reduce complexity to a couple of parameters relevant for taking business decisions.
  • But designers need something else: empathy. They have to be able to put themselves in the position of the users, understanding their needs, emotions, and behavior. In order to do so, personas must not be average.

There is no such thing as the average person.
Don Norman, The Design of Everyday Things

This means: It is not useful to take a couple of statistics and combine the average results into a fictional character. Why? Because there are no really average people. In his book "Human Performance Engineering: A guide for systems designers", researcher R.W. Bailey studied 4,063 randomly selected people. His research question: How good is the fit of these people to average characteristics like height, weight, or height of knee? The results were clear:

  • 1,055 people, meaning 25.9% of the sample, corresponded roughly to the average height.
  • Taking a second characteristic into account, this number dropped to 302 people – only about 7.4% of the sample were average in two respects.
  • This number dropped even further when the researchers took more characteristics into account. After the tenth characteristic, there was nobody left.

This means: Thinking in averages in order to create a high reach is okay in marketing, where you reduce the population to one or a few relevant characteristics. But design is about looking holistically at people, taking their entire needs into account – and in this regard, thinking in averages is counterproductive, because it drops the typical human differences.

Personas are individually and vividly described representatives of the target group or a customer segment.
Marco Spies, Branded Interactions

Target audiences and personas are thus two sides of a medal, both trying to understand the needs and behavior of people. But while target audiences are about statistical representativeness, personas aim to be realistic descriptions of users, which then form the basis for design decisions.

Personas are based on user research

A good persona does thus not grow out of nothing, but is based on user research. Alan Cooper found that the results of this research are often too abstract to be a useful guide in the design process. Personas make these abstract results readily available. They cover all information necessary to make the needs of users comprehensible:

  • Identity of the persona: First, all personal information like name, age, profession, or family status is part of a persona.
  • Opinions, values, goals: Often information about goals and values, an individual motto, or the lifestyle of a persona is also of interest. In particular, aspects relevant for the product are valuable, like what frustrates or delights a persona. Furthermore, all character traits and skills important for the product should be considered.
  • Context of use: Finally, information about the context of product use helps. This includes the concrete motivations, frequency of use, and the environment in which product use takes place.

As a design tool, it is more important that a persona be precise than accurate.
Alan Cooper, The Inmates Are Running the Asylum

However, too many details are also not advisable, because a persona needs to be accessible quickly. This is one of the advantages in using of the templates mentioned later, as they have limited space, so that designers have to focus on the most essential information.

How to use personas?

Personas are particularly useful for ideation and taking or communicating design decisions.

  • Personas help not to lose the focus on the user – you can put them at some place where they can easily be seen. Every design decision can thus be related to the persona: Would this solution account for the needs of the persona?
  • Their concrete nature makes personas very suitable for developing empathy with the users, an indispensable prerequisite for user-centred design of products. This is also why personas should be based on user research, so that designers do not take unrealistic fantasy persons as their guidelines.
  • Personas make brainstorming and ideation easier. In a study, Brangier et al. (2012, cited in Lallemand & Gronier 2015) were able to show that personas can lead to a higher number and better quality of ideas.
  • They are also a good method of communicating the results of research, being more friendly than a document with statistics.

However, personas are not without their problems. A big disadvantage is their static nature. Dynamic processes like the individual steps a user takes in the interaction with a product, cannot be easily represented in a persona. Therefore, they are often combined with other methods, like experience maps.

What types of personas are available?

Personas can be grouped into several types:

  • Primary personas represent the users which are of primary interest for the product. Ideally, a product should only target one primary persona, but this is not always possible. However, it is important to remember that the more primary personas there are in a project, the higher is the risk of not satisfying anybody in the end.
  • It is thus often better to work with several secondary personas. Their needs are to be considered, but only if they do not contradict the needs of the primary personas.
  • Negative personas are explicitly not part of the concept of a product. However, it can be useful to define these personas to get a clear picture of what the product should not do.
  • Buyer personas are particularly useful in business. They do not represent users, but decide which product users have to use. Her needs are thus important for successful products.
  • A concerned persona is herself not a user of the product, but is affected by its use. For example, the availability of cameras in smartphones and smart glasses can lead to pictures of bystanders. Concerned personas are thus important for ethical reasons, and social factors play a vital role in making a product a success or a failure.
  • Finally, it is possible to take disregarded people into account with the help of additional personas. In their book "Design for Real Life", Eric Meyer and Sara Wachter-Boettcher propose creating imperfect personas. They can help respecting special needs of people that do not harm other users. Consider accessibility, as it creates value for everybody. And think about how people use a product in a situation of crisis.

Furthermore, a persona can represent a group of people, like a whole family, if this makes sense for the project.

How many personas do I need?

Designers starting their work with personas often ask how many of them are necessary for a project. I often stumbled upon the numbers 3 to 7 (though handling more than three primary personas becomes difficult), but this depends heavily on the project. I think a vague answer makes more sense: as few as possible, but as many as necessary to cover all relevant needs.

How are personas represented? Which templates exist?

Personas build on being quickly available, ideally as a poster that can be put on the walls of the office. Most UX designers work with an attractive template, where all relevant characteristics are presented in a visual way and using short pieces of text.

There are no limits to creativity, and a couple of templates are available. Here are some of my favorites:

Persona template by Christof Zürn
Part of the persona template by Christof Zürn

License: Persona Core Poster by Christof Zürn, CC BY SA

In most cases, these templates should be adapted individually: every project needs slightly different information to create compelling personas. While in one project computer literacy might be very important, personal nutrition habits play a bigger role in another.

Portraits of people are also useful in order to give life to the personas. You can find examples on Pixabay or Pexels – but consider the license, as always with images!

A field of study, close to the cutting edge of media articles/media-studies-20years r Keynote by Silke Burmester about influencers and journalists

"If you enter her name on Google, the auto suggest proposals give evidence of her huge diversity." With these words, professor Hans-Jürgen Bucher introduced the keynote of Silke Burmester. He was right: the journalist and author drew a funny, but also thought-provoking picture of the state of journalism during the last 20 years.

Create content, be content

Silke Burmester on stages
Silke Burmester gave the keynote at the celebration of media studies

"Media are about retaining the good", the journalist asserted at the beginning of her talk, before speaking about the fundamental changes in journalism of the past 20 years. The internet has changed all processes, like a worm you have to feed. And the internet "made media the hot shit", something that everybody wants to do.

Today, it is not only about fostering the net, but "to become the hot shit oneself": journalism is more important than ever before, but young people today want to become influencers — a democratic way in principle, not excluding anybody, as long as you manage to get enough followers.

Today, the media are the stage for all sorts of things. But these things push aside the necessary things, and this is the problem.
Silke Burmester

Moments of temptation also exist for journalists, especially in face of sinking wages of freelance journalists and photographers. Many young colleagues want to become influencers themselves, e.g. as moderators. "In this case, the ego is in the foreground: You do not want to disappear behind the content, but become content oneself."

Obviously, such desire of fame has led to great moments of journalism, e.g. in the case of Stefan Aust‘s Spiegel TV. However, vanity can also become a trap for journalists.

The loud journalism

It is not a good time for quiet people — today‘s journalism is loud, with journalists working on their own brand, being unsure in face of influencers. "The show pushes journalism aside", the journalist explained, not without mentioning that this has always been the case, especially in commercial television.

But still, as Silke Burmester said hopefully, readers also acknowledge journalistic work. It has been a valuable experience of realizing that her readers stand behind her, Silke Burmester said. Publishers have also started searching for solutions. Silke Burmester in particular referred to research groups which led to the publication of the Panama papers, for example. "Here, journalistic work is again in the foreground, and journalists stay journalists." And who knows, maybe there will be news influencers one day. Or all this might be a sign of a change of generation — "and such changes always hurt one side."

Panel discussion: The fight for attention in the media

The "loud media" were also the topic of the panel discussion, moderated by honorary professor Joachim Blum: "The fight for attention in the media". As I had to talk about a couple of details concerning the later tribute to our alumni, I did not attend the whole discussion, but I try covering the content as good as possible nonetheless.

Sven Teuber, spokesperson for social political matters of the party SPD in Rhineland-Palatinate, took the place of Katarina Barley, who participated in the coalition talks at the same time. With Thomas Roth (editor in-chief of the local newspaper Trierischer Volksfreund) and Anja Weckmann (leader of the local studio of the radio channel SWR), we had two additional experienced persons of the media on the stage. And obviously, we also recruited alumni of media studies: Cristoffer Coutinho (Nielsen Sport) and Anna Weilberg (Femastics).

Panel discussion at the celebration
The panelists, from left to right: Sven Teuber, Thomas Roth, Anja Weckmann, Joachim Blum, Cristoffer Coutinho, Anna Weilberg

The power of social media in political discourse

There was a lot of talk about the influence of social media in political discourse during the last months. Few weeks ago, the citizens of Trier had to decide in a public decision whether a gas station in the centre should be removed or continued to be leased. In the end, the pro gas station group won.

Joachim Blum gave this example in order to ask whether this has been a triumph of the pro group with the help of social media. “The word triumph goes too far in my view”, Anja Weckmann explained, and Thomas Roth supported this opinion: “In public decisions, it is always possible that a group which is smaller in numbers wins if it manages to mobilize more of its followers.”

“It has certainly be a political defeat for us”, Sven Teuber said, pointing to the fact that his party took stance against the gas station. He also blamed the communication strategy for the result. “The gas station was not meant to go away, but should be moved to somewhere else. But this message didn’t come across. In the discussion, the topic quickly concentrated on a metropolitan charisma.” To some degree, established media were also responsible for this impression, as they fuelled the corresponding emotions.

New relevance criteria

Starting from Trier, Joachim Blum switched to broader topics: On the 4th of March 2018, Swiss citizens decide about the financing of the public radio service, including its existence. “It is our task to reach the people”, SWR studio leader Anja Weckmann made clear. “However, there a more publications chasing us, and we have to ask ourselves how to react.” In general, the relevance of topics has changed. “Social media is an additional channel in public discourse”, Cristoffer Coutinho explained. This creates new topics, not possible without social media. In the end, however, it is important that journalism keeps its freedom.

Anna Weilberg stressed another aspect of the changed possibilities in digital media: Since becoming self-employed, she has more freedom to work on her own topics. “We can now more and more decide what is important on our own, not only keeping an eye on reach.“

In the later parts of the discussion, Joachim Blum also spoke about Silke Burmester’s thesis of the loud journalism. He critically asked whether these new criteria also lead to the calculated creation of scandals. Anja Weckmann and Thomas Roth had important remarks to make. It is not the case that only loud journalists have a chance, the SWR studio leader said. While it is true that an extroverted nature is typical for journalists, it is the heterogeneous mix of people which decides about the success of a journalistic publication. This also includes introverted and analytical people. And Thomas Roth pointed out that reluctance is also important, in particular in local journalism.

But is there a trend towards scandals? “We have to decide much faster”, Thomas Roth said. Sven Teuber mentioned a noticeable trend toward tabloidization, but also stressed that time plays a huge role: journalists have less and less time for researching a topic.

Social media as a discourse free of control?

Joachim Blum started the final round with a classic quote in media studies: “If everybody can publish on the social web, isn’t this the ideal of a discourse free of control, like Jürgen Habermas said?”

Joachim Blum talks to Cristoffer Coutinho and Anna Weilberg
“Is social media a discourse free of control?“ – Joachim Blum talks to Cristoffer Coutinho and Anna Weilberg

The potential of social media is positive, Femtastic publisher Anna Weilberg explained. “Furthermore, you do not get the attention for nothing, but you have to be heard and have a weight.” An important aspect, as Cristoffer Coutinho agreed. In social media, quality wins.

“And the pluralistic media also create new topics”, Anja Weckmann said. However, the role of traditional media is to stay calm: “This is the horse that we ride.” But still, as Thomas Roth added, you have to ask who controls this horse. It is important not to let algorithms and newsfeeds decide on topics. There also have to be others, like newspapers.

Sven Teuber agreed, but also drew a more pessimistic summary. The importance of algorithms is growing: “We are living more and more according to algorithms, and less according to our heads. This affects the fundamentals of a democratic society.”

Speeches: past and future of media studies

Hans-Jürgen Bucher
Hans-Jürgen Bucher opened the celebration with his speech and gave numerous insights into the history of media studies in Trier

Obviously, numerous speeches looking back and forth weren’t missing in the celebration. Professor Hans-Jürgen Bucher, university president Michael Jäckel, and Sebastian Hoffmann, dean of the faculty, gave insights into the creation of the field of study in 1997. Two developments determined the further path: the success of the internet and the reform of Bologna.

  • In 1994, the prevailing impression was that there was a lack of job opportunities, so there should be no major in media studies. Only a short time later, it became clear how wrong this impression was, as the internet started to become mainstream. “The high dynamics of the digitalization have been chance and challenge for our field of study at the same time”, Hans-Jürgen Bucher explained. He also gave various examples of this development in research and teaching: the introduction of digital learning platforms, experiments with new possibilities like the Twitter wall in the auditorium, or conferences like “newspapers between print and digitalization” in 1998.
  • Following the Bologna reform, the old magister degrees have been transformed into the system with bachelor and master degrees since 2007. The demand is still strong, as there are currently about twenty applicants for a single place.

6 million Euro of third-party funds, this is a sign of excellent research.
Sebastian Hoffmann, dean of the faculty II

Hans-Jürgen Bucher also had other figures: 450 graduates, ten promotions, two habilitations, 40 teachers and six millions of third-party funds – “this is a sign of excellent research”, as the dean agreed. Additionally, there is the unique orientation with two specializations: the audiovisual part around professor Martin Loiperdinger focuses on early cinema and other historical audiovisual media, while the team surrounding professor Hans-Jürgen Bucher covers the topics of print and online media.

Besides the speeches, the works by students created around the anniversary were particularly impressive. There has been a great video, created by the student union, which reminded me of many nice memories. The team of the online magazine explained what the audience can expect when the magazine goes online. I followed the work on the magazine from the side and am very impressed of what has been created under the supervision of Hans-Jürgen Bucher, Eberhard Wolf (Art Director/Head of Design at the newspaper Luxemburger Wort) and Paul-Josef Raue (journalist).

Emotional tributes

Martin Loiperdinger and Hans-Jürgen Bucher
Martin Loiperdinger, on the left, shaped the field of study during the past 20 years in a significant way

20 years of media studies – after a period of time like this, a field of study is also at a transition point. Professor Martin Loiperdinger took the opportunity to pay tribute to Marie Luise Sachs, long-year secretary, who will be retiring. I have never counted how often I have been in her office and profited from her accommodating way of work.

But, Martin Loiperdinger is himself also retiring in March, meaning that an emotional tribute was not missing. My personal highlight in this regard was the surprise film made by students in his honor. Naturally, it started with a train arriving at the Trier train station, reminding of "Arrival of a Train at La Ciotat", an early film by the pioneers Auguste and Louis Lumière – I do not think there is any media scholar in Trier who has not seen it.

Further tribute was paid to Professor Klaus Arnold, who passed away last year. He has not only expanded the field with valuable topics, but was also highly engaged in our alumni and students association Medianetz – the day of media studies and the media tandem are evidence of his work.

Digitalization at the center of the future

Thus, the anniversary had various tributes, with another one just around the corner, as Hans-Jürgen Bucher will also be retiring next year. No wonder that this created questions concerning the future of media studies.

"We want to realign the field of study from the ground up", the dean explained. The future focus is on digitalization, which should strengthen the profile of the University of Trier. The new focal points in research and education are thus on "digital and audiovisual media" as well as "journalism and communication". Two professorships are currently advertised. To me, these seem to the right directions, and a logical advancement. I am looking forward to seeing how this turns out in practice.

Tribute to the alumni

Our tribute to last year's alumni was also part of the program. Congratulations to you all!

Alumni of media studies in 2017
Alumni of media studies in 2017
Digital change in tabloid journalism articles/tabloid-journalism-digital r Oliver Auster on the digital change of "Bild"

"Bild Reloaded – how the media change affected our brand" – this was the title of the keynote by Oliver Auster, alumni of media studies in Trier and editorial leader of the German tabloid "Bild" in North Rine-Westphalia (NRW).

Oliver Auster at the day of media studies
Oliver Auster spoke about how media change affected the tabloid brand "Bild" at the day of media studies

Tabloid journalism in the age of digitalisation

"Bild is the radical orientation of journalism on the people", was the definition of the brand of "Bild" that Oliver Auster gave at the beginning of his keynote. The core of the brand was "being talked about", and he had impressive numbers serving as evidence: While the number of subscribers dropped from 4.3 to 1.96 millions since 2000, the tabloid still reaches ten million people due to shared content on the web.

But where is "Bild" going in the face of an edition cut in half? Digitalisation causes some things to die, the journalist explained, like the vinyl record – however, we are still listening to music, using iTunes or Spotify (I have to add at this place that there is still a group of vinyl lovers – on a way lower level than during the Golden Age, but growing). Music industry has thus succeeded in not having their content consumed on a purely illegal basis on the web.

There is no consistent approach in journalism. is very successful, with over 19 million users. "Tabloid journalism is when the father asks in the kitchen: 'Have you read what was in the Bild?'", and the tabloid aims to transfer this moment to the web. The monthly time of use is about 50 minutes per user. And with "Bild Plus", the tabloid has introduced a paid content model for selected stories.

The present is social and mobile

70% of the visitors use the home page as an entry. Position 2 is occupied by social media, Facebook in particular. This also has consequences for the contents. "Facebook Live is a revolution for us", Oliver Auster explained, "Video is the topic of the coming years." Accordingly, the tabloid has hired staff doing video, in order to realize exclusive stories, e.g. of a journalist accompanying a model while being tatooed.

There as an additional important finding: mobile first. "For us as media, there is nothing more important than the smartphone", as more of half of views are created by mobile devices. In particular, Oliver Auster spoke of a significant growth in use of mobile video – but obviously, there are special aspects to consider: "90% of our videos are watched without sound, because the people do not have headphones on the go. Accordingly, our videos have subtitles."

Mobile First also creates new challenges in other areas than video, in particular in order to sell advertising. Spikes in usage are in the mornings and in the evenings, when different topics are important than during the day – this also leads to a different focus.

Three theses for professional media

Oliver Auster closed his keynote saying that he does not want to make predictions. However, he had three theses for professional media:

  1. There is no substitute for professional media. For example, there were a lot of fake images circulating in social media during the rampage in Munich. Professional media play an important role in checking whether photos are real or not.
  2. Credibility creates sustainability for media.
  3. Professional media can only survive if they work together. A lot of publishers therefore took the step towards paid content.

Alumni talk about their work

In the following round table talk, moderated by Christof Barth, alumni spoke about their job roles and their daily work. We had Fabienne Aßmann and Corinna Trierweiler of Deloitte General Services in Luxembourg on the stage, as well as Steffen Büffel, self-employed media consultant (Media-Ocean).

Media change for a living

Round table at the day of media studies
Corinna Trierweiler, Fabienne Aßmann, Steffen Büffel, and Christof Barth spoke about their work

The start of the round table made clear that the digital change does not only affect brands like Bild, but also entire job roles. Following his academic career, Steffen Büffel found that the job he wanted to take did not exist. A lot of companies have not yet understood what was happening during the media change. He saw this as an opportunity, becoming self-employed as a media consultant. "My job is to put myself in the position of my client, taking them with me and accompanying them in their small steps", he summarized his work. "In hindsight, I can say: I had a good timing, because today, the market is crowded with social media consultants."

Corinna Trierweiler and Fabienne Aßmann also laid the ground of their way into marketing during studies. Languages (in particular English and French), software knowledge, and the experience developed during the frequent presentations proved to be valuable.

All participants agreed that the courses in media practice were important building blocks of a successful future "in the media". Fabienne Aßmann told us that she had to answer many practical question about media, for example how to structure a press release – she was able to directly profit from her knowledge of the courses. Steffen Büffel agreed and said, the frequent contact to media practitioners made the difference, because even today a lot of job roles do not really exist with a defined name. "But, we experienced the media change in our own lifes", the media scholar concluded. This blueprint can be transferred to other developments.

Perspectives for alumni of media studies

Accordingly, the summary regarding the job perspectives of alumni of media studies was pretty positive, although there has been a significant change. "Some alumni still find their way into journalism, but fewer than in former times", Christof Barth summarized his impression. The participants had made similar observations: A lot of freelance journalists are afraid of not finding enough jobs, and even some publishers have trouble recruiting people for their trainee positions. However, this does not mean that there are no job perspectives for alumni of media studies.

"You have to know what you want, but also be prepared to change yourself if necessary", Steffen Büffel explained and encouraged not to be afraid. This includes networking. In doing so, you should not only focus on the exam itself, but use your whole personality. This often creates new opportunities in networking.

Corinna Trierweiler additionally stressed the possibility of internships. "You can try different jobs for a limited time, realizing what you want. Normally, you find where you want to go during the job." The master is also valuable, because it is more prestigious and often makes a financial difference.

Tribute to the alumni

Like in the past years, the event closed with the tribute to this year's alumni. Their work showed an impressive range of topics in media - congratulations to your work!

Alumni of the year 2016
Alumni of media studies in Trier 2016
Computer games as media art articles/computerspiele-medienkunst r Stephan Schwingeler: "Computer games as media art"

Stephan Schwingeler explained that there are three approaches of academic study of computer games:

  • In the beginning, computer games were approached from the perspective of film and literature studies, considering them as texts.
  • In a reaction to this view, the critical game studies developed later, which focused on the playful aspects of games.
  • In the tradition of visual culture, games are explored as images, inviting us to immerse into new worlds. In this regard, Stephan Schwingeler talked about a "spatial turn" in game studies, considering games as navigable spaces.

Art history of computer games

Stephan Schwingeler talks at the day of media studies
Stephan Schwingeler talked about computer games as media art

After these introductory remarks, Stephan Schwingeler drew a short media history of computer games as art. "ArsDoom" (1995) is considered the first game to be shown in the context of the art festival Ars Electronica. Peter Weibel, today working at the ZKM in Karlsruhe, instructed the artist Orhan Kipcak with a concept in the form of a game – this resulted in a modification based on the shooting classic "Doom II". Players navigate through a virtual model of the Bruckner building in Linz, and are confronted with giant heads of several artists. The weapons of the original turned into artistic artefacts like the well-known Cross of Joseph Beuys, allowing to defeat the monster heads. Stephan Schwingeler considered "ArsDoom" a "satire", which acts like the "revenge of the medium computer games against the cultural activities".

After "ArsDoom", computer games became established as a medium of art. Stephan Schwingeler sees a new generation of artists, having grown up with computer games, as the reason for this move. Furthermore, it was important that artists had access to computer games as material.

Little history of computer games

The history of the computer game is itself closely related to the history of computers: "Humans started playing with computers as soon as they had access to them." As early as 1958, William Higinbitham developed "Tennis for Two", arguably the first video game of all times. It was based on an oscilloscope, originally meant to show voltage – a classical hack, using technology for new means. "Spacewar!" on the early computer PDP-1 followed in 1962, developed by Steve Russell. The game has been groundbreaking, not only for their character as a pioneer, but also in another respect: The source code was freely available, so that it was possible to copy or change it at any time.

The formerly oppositional computer games became an institution themselves in the 1970s. Since the late 90s only, artists are using methods of appropriation and rededidaction against them.
Claus Pias, Zukünfte der Computer (translation by myself)

In the 1970s, the computer game grew into a veritable mass market – source code became a secret, locked into automats and modules. This restrictive approach to source code made the work of media art harder. However, a little bit later, communities developed which modified games, often in terms of fan projects. The closed character of computer games was picked up by artists like Cory Arcangel and his "Super Mario Clouds", when he disassembled and modified the game modules. This only leaves the characteristic clouds of the game classic "Super Mario" in "Super Mario Clouds" – however, this is not a film, but still rendered live by the game.

Artistic strategies while working with computer games

How do artists use computer games as material of media art? Stephan Schwingeler identified four strategies to answer this question:

  1. New ornamentation: Games are modified in an artistic way. The aforementioned "ArsDoom" is an example of this approach, or Hunter Jonakin´s "Jeff Koons Must Die!", for which the artists constructed his own arcade automat. The task of the player is destroying the pieces of art by Jeff Koons.
  2. Reduction and abstraction: Games are reduced to their basic parts. Examples for this approach are the aforementioned "Super Mario Clouds" or "Mario Battle No. 1" by Myfanwy Ashmore. This games uses the game mechanics of "Super Mario Bros.", but in a new context: All enemies, items, and traps have been removed, rendering the game experience completely different.
  3. Action and performance: This strategy builds on games as actions. The focus of the artist is the idea that players act in games. These actions are used in order to create pieces of art. In "dead-in-iraq", a performance by Joseph DeLappe, the artist uses "America's Army". The game was developed by the US military in order to recruit soldiers. However, DeLappe uses it for his art, throwing his weapon away in the virtual battles and posting the names of soldiers killed in action in the chat.
  4. Destruction: The final strategy creates unplayable games. In "SOD" by JODI, the game mechanics of "Wolfenstein 3D" are changed so drastically that only fractions of the game are left. The screen is white, apart from geometric black objects, but the player can still navigate through this three-dimensional space. Fragments of the game rest available, like sounds or the weapon in the form of a single point. However, the player cannot really interact with the world in any reasonable way. The artists thus remind of other art works like Robert Rauschenberg's "White Paintings" or Nam June Paik's "Zen for Film".

Media theory: art with computer games between transparency and opacity

Finally, Stephan Schwingeler talked about some media theoretical ideas concerning computer games. Normally, the function of the medium is being invisible, as the players should immerse themselves into the game world, concentrating entirely on the content. Stephan Schwingeler referred to this approach as transparency: The medium itself becomes invisible. However, there are always moments where the game meets the limits, becoming visible again (opacity).

Art often plays with these differences. In the 256th level of Pacman, the characters of the game can get entangled in the source code. The software is based on 8 bits, meaning there are 256 possible levels. It is important to know that counting in bits always begins with 0, so there are values from 0 to 255. Normally, the game was supposed to be infinite in the way that as long as the player still has a life left, there should always be a new level provided. In case a player managed to beat the final level, the game should use the first level again. But a bug in the source code caused the level counter to jump to 256, causing a buffer overflow and executing code which does not make sense. The right half of the screen ist filled with letters, while in the left half, there are not enough points to be gained to beat the level. Players who got that far realize that Pacman is a game without a solution.

Media scholars talk about their jobs

Besides this inspiring brain juice on computer games as media art, there was also applicable advice for entering into a job. We had Lisa Keimburg of the Media Authorities and Julian Ermert of the agency zebralog (Bonn) on the stage, both alumni of media studies in Trier.

Protection of minors and civic participation

Lisa Keimburg is working as consultant for the protection of minors and public relations. She drew a picture of her daily business on the job, where she is not only writing texts or maintaining the web site, but also in charge of a huge part of project management. This is about concluding contracts and checking the results, organizing events, and planning fairs.

Julian Ermert explained what the work is like in a research oriented agency. Zebralog is concentrating on crossmedial projects of civic participation. His activities are the concept, editing and communication of all topics related to civic participation. Project management also plays a vital role in this work.

Three speakers on the stage
Lisa Keimburg and Julian Ermert talk about their daily work, moderated by Christof Barth

Most wanted: project management

Thus, project management is one of the topics not covered enough in studies, as both speakers agree. "There was a lot which I had to learn from the ground up", Julian Ermert explained. But project management is difficult to teach outside of practical work, due to the lack of context. However, both speakers said they acquired a lot of relevant abilities during studies. Lisa Keimburg stressed that she learned to work on her own at university. Additionally, the basic knowledge about the German media system, the relationship of media and politics, and media theories proved their value. She also mentioned her experiences in the reception lab, because it is good to know how humans understand content. Julian Ermert endorsed this, explaining that it is important to do research in unknown topics. "A while ago I had to investigate in a very short time which types of disposals exist. This means wading through giant documents", he explained. He stressed structural thinking like the question how stakeholders interact. His task is making complicated things easy to understand.

How to transition into a job

A striking similarity of both speakers was the fluent transition into working life. Lisa Keimburg finished her magister thesis when she already had her trainee position. Julian Ermert told that he started working for zebralog during his master thesis. However, Lisa Keimberg also stressed that it is not unusual to need a bit of time to find the right job after studies. She encouraged alumni: "I observed that with a lot of my friends, but all of them managed to find good job." It is also important to consider the long time periods that candidatures can take, making it reasonable to start applying during the phase of examination.

Naturally, the job life is a noticeable change. "During studies, there is a lot of flexibility, but structures of offices are more rigid", Lisa Keimburg told. "I created a structure with fixed working hours for myself during the process of my magister thesis – but I can image this to be harder for people liking to work at nights."

Julian Ermert said that for him, the biggest change was to be more precise. "Often, you only have a couple of days for a concept, before a colleague needs to take over. This means you have to get to the point." Effective work and a selective view of the essential is important.

Is the master degree worth it?

Should one stay with a bachelor, or continue doing a master? Julian Ermert observed that the master is the rule, but not a necessity. The second studies typically loom more in the work life and offer the opportunity to specialize. In general, it is important to listen to the inner voices and take the opportunities as they emerge. "To a certain degree, it is always a bit of destiny involved, determining where you land – but you can always influence it in the right direction by focusing on a particular topic", Julian Ermert explained. It is thus important to grow an expertise in a topic for which there is a market demand. "This does not mean being blinkered – you should try each area, but always return to your market."

Tribute to the alumni

The yearly tribute to the alumni of Bachelor, Master, or Magister degrees has grown into a nice tradition. It would certainly be too much to give each of the thesis topics the place it deserves – but I was impressed by the range of topics covered.

Proud alumni show their certificates
Honor to whom honor is due: the alumni of media studies in 2015

You can find some impressions from the tribute here:

Animationen im Webdesign articles/animationen-webdesign r Animationen im Webdesign waren lange Zeit negativ besetzt, als die Nutzer bei zahlreichen Websites zunächst auf „Skip Intro“-Links klicken mussten. Heute sind bewegte Elemente jedoch fester Bestandteil von nutzerfreundlichem Webdesign. Wer sich über die Animationen ein wenig Gedanken macht, bekommt nicht nur ein wirkungsvolles Gestaltungsmittel, sondern verbessert die User Experience seiner Nutzer.

Digitale Produkte wie Websites und Apps leben von ihrem Design: Es ist die grafische Benutzeroberfläche, die sämtliche Funktionen erreichbar macht. Design ist daher nicht nur die Verpackung, sondern ein zentraler Teil der User Experience.

Design is not just what it looks like and feels like. Design is how it works.“
Steve Jobs

Die breite Browser-Unterstützung von CSS3 bietet mittlerweile zahlreiche Möglichkeiten, im Webdesign mit bewegten Elementen zu arbeiten ohne auf JavaScript oder Plugins wie Flash angewiesen zu sein. Damit wird es auch für Webdesigner immer wichtiger, sich damit zu beschäftigen, wie eine Gestaltung auf die Aktionen der Nutzer reagiert – und was diese davon halten.

Transitionen und Animationen

Mit CSS3 gibt es prinzipiell zwei Verfahren, um Bewegung in Ihr Layout zu bringen: Transitionen und Animationen.

Transitionen: CSS-Transitionen sind weiche Übergänge zwischen verschiedenen Zuständen von Elementen. Dabei wird mit der CSS-Eigenschaft „transition“ festgelegt, welche Eigenschaft verwendet werden (alternativ steht das Schlüsselwort „all“ für alle Angaben) und wie lange der Übergang dauern soll. Zudem lässt sich ein zeitlicher Verlauf festlegen sowie eine Verzögerung setzen. Der zeitliche Verlauf bestimmt Charakter und Ablauf der Transition. Damit definieren Sie, wie natürlich sich die Transition anfühlt. Es stehen zur Auswahl:

  • ease = langsamer Beginn, dann schnell, zum Ende hin wieder langsam
  • linear = konstante Geschwindigkeit während der gesamten Transition
  • ease-in = langsamer Beginn, dann schnell
  • ease-out = schneller Ablauf, langsames Ende
  • cubic-bezier = Definition einer eigenen Verlaufskurve

Mit dem folgenden Snippet verwandeln Sie beispielsweise die Hintergrundfarbe eines Buttons sanft in einen anderen Farbton, während ein Nutzer mit der Maus darüberfährt oder den Button mit der Tastatur fokussiert. Solche Transitionen können natürlicher und angenehmer wirken als plötzliche Farbwechsel.

a.button { 
  background-color: #93be27; 
  transition: background-color 0.25s ease-out; 

a.button:focus { 
  background-color: #6a891c; 

Animationen: Etwas komplexer sind CSS-Animationen, bei denen Sie die Veränderungen mittels Keyframes definieren und anschließend aufrufen (wieder mit Angabe der Dauer). Auf Wunsch lassen sich auch hier Verzögerung und Verlauf der Animation definieren. Hinzu kommen Möglichkeiten zur Steuerung der Richtung und zur Anzahl der Durchläufe. Eine gute Einführung in die Möglichkeiten von CSS-Animationen bietet Ihnen das Mozilla Developer Network. Wenn Sie Ihre Animationen nicht selbst entwickeln möchten, finden Sie beispielsweise in animate.css aus der Feder von Daniel Eden ein praktisches Hilfsmittel. Es bietet eine Vielzahl fertiger Animationen und lässt sich mittels Grunt auf die für das jeweilige Projekt benötigten Klassen begrenzen. Auf diese Weise schrumpfen Sie die 58kb große Datei (min-Version) weiter zusammen.

Das folgende Code-Beispiel zeigt die grundlegende Arbeitsweise mit CSS3-Animationen. Es ist Teil von animate.css und bewirkt einen pulsierenden Effekt, bei dem die animierten Elemente kurzzeitig vergrößert werden. Dazu definiert es eine Animation namens „pulse“ mit drei Keyframes am Anfang (0%), in der Mitte (50%) und am Ende (100%) der Animation. Die CSS-Eigenschaft transform: scale3d() vergrößert das angesprochene Element und nutzt dabei unter modernen Browsern die GPU des Rechners, um die Performance zu verbessern. Die Animation wird anschließend an eine Klasse gebunden, so dass alle Elemente, die mit dieser Klasse versehen werden, den pulsierenden Effekt verwenden können. Aus Gründen der besseren Lesbarkeit enthält es nur die CSS-Eigenschaften ohne Vendor-Prefixes.

@keyframes pulse { 
  0% { transform: scale3d(1, 1, 1); } 
  50% { transform: scale3d(1.05, 1.05, 1.05); } 
  100% { transform: scale3d(1, 1, 1); }

.pulse {
 animation-name: pulse; 

Transitionen und Animationen verfügen bereits über eine breite Browser-Unterstützung von über 80%, verlangen jedoch teilweise noch nach Vendor-Prefixes. Ältere Browser wie der Internet Explorer 8 ignorieren die Angaben. Hier sollten Sie auf statische Hover- und Focus-Effekte zurückgreifen, damit die Zustandsänderungen auch in diesen Browsern offensichtlich bleiben.

Bessere User Experience durch Animationen

Wenn die Nutzer eine Website aufrufen, sind sie dabei nicht untätig: Sie klicken Links, öffnen Akkordeon-Felder oder orientieren sich in einem Menü, indem sie die Untermenüs öffnen. Bei ihren Interaktionen erwarten sie eine passende Rückmeldung. Transitionen und Animationen spielen dabei eine wichtige Rolle: Sie verdeutlichen, dass das System auf die Aktion eines Nutzers reagieren wird, überbrücken Ladephasen und verdeutlichen die Zusammenhänge zwischen den Inhalten.

Ein gutes Beispiel ist die Website von Mail First, bei der Transitionen die Orientierung erleichtern. Der One-Pager setzt auf eine Anker-Navigation, damit die Nutzer direkt zu den Sektionen springen können, und verwendet Animationen auf Basis von jQuery, um den Weg dorthin nachvollziehbar zu machen. Auf diese Weise wird es einfacher, den Zusammenhang und den Kontext der Inhalte zu verstehen. Transitionen wie diese stellen den Zusammenhang zwischen einer Aktion des Nutzers (z. B. Klicken oder Tippen) und der Reaktion des Systems her. Das ist besonders wichtig, wenn auf eine Aktion hin neue Inhalte geladen werden müssen: Gibt das Interface keine Rückmeldung, werden Nutzer schnell unsicher, ob ihr Klick richtig erkannt wurde. Eine kleine Animation kann das Vertrauen des Nutzers stärken, dass nun etwas geschehen wird. Dazu bietet sich beispielsweise an, die oft vernachlässigte Pseudoklasse :active mit veränderten CSS-Eigenschaften zu versehen – sie wird bei der Aktivierung eines Links aktiviert.

a.button { 
  box-shadow: 0 5px 0 #5c7220; 
  transition: all 0.25s ease-out; 

a.button:active { 
  box-shadow: 0 2px 0 #5c7220; 
  transform: translateY(3px); 
Normaler und aktivierter Button
Transitionen auf dem aktiven Zustands eines Buttons können den Nutzern verdeutlichen, dass ihr Klick registriert wurde

Zu einer guten User Experience gehört auch, das Interface so reduziert wie möglich zu halten. Verändert sich die Funktion eines Buttons, können Sie dies mit einer Transition verdeutlichen. Eine Möglichkeit dazu ist es, nur die Aktionen anzuzeigen, die im aktuellen Kontext sinnvoll sind. Ein gutes Beispiel bringt Adrian Zumbrunnen mit „Smart Transitions“: Ein Button mit einem Plus-Zeichen („Hinzufügen“) kann per Transitionen zu einem „x“ („Schließen bzw. Löschen“) verändert werden, wenn die Nutzer es sich anders überlegen und ein hinzugefügtes Element wieder entfernen möchten. Ein ähnliches Interface, allerdings ohne Animationen, verwendet beispielsweise Spotify in seinem Webplayer, um Songs in seiner Merkliste zu speichern.

Ladebalken mit schraffierter Füllung
Ladebalken wirken schneller, wenn man ihre Farbe oder ihre Schraffierungen animiert

Bei der Arbeit mit Animationen zur Verbesserung der User Experience sollten Sie immer ein Auge auf aktuelle Rezeptionsstudien halten. Viele dieser Studien zeigen: Bereits kleine Maßnahmen können eine große Wirkung haben. Ein Beispiel sind Ladebalken: In mehreren Studien konnten Chris Harrison und seine Kollegen zeigen, dass die Verwendung pulsierender Farben oder sich bewegender Schraffuren bewirken, dass der Ladevorgang subjektiv schneller wahrgenommen wird. Die Ladephase wirkt daher weniger störend.

Animationen als Gestaltungsmittel

Natürlich lassen sich Transitionen und Animationen auch als Gestaltungsmittel verwenden. Sie bieten sich beispielsweise dafür an, die Aufmerksamkeit von Nutzern zu steuern: Dort, wo etwas erscheint oder sich eine Bewegung verändert, werden unsere Blicke hingezogen. Fifty Three verwendet dieses Verhalten, um Aufmerksamkeit auf die Konstruktion ihres Produkts Pencil zu legen: Während die Nutzer nach unten scrollen, löst sich der Stift langsam in seine Bestandteile auf, während animierte Texte die Funktion erläutern.

Interessant werden Animationen auch bei der Arbeit mit verschiedenen Ebenen. Beim Parallax Scrolling beispielsweise bewegen sich Elemente auf den einzelnen Ebenen beim Scrollen unterschiedlich schnell. Geschickt eingesetzt lassen sich auf diese Weise interessante Effekte erzielen, wie es beispielsweise die Hochzeitswebsite des Designerpaares Jess and Russ vormacht. Scrollend erzählen sie ihre persönliche Geschichte, und dank Parallax Scrolling verwandelt sich ein Buchstabensalat schließlich in den Hinweis, dass sie sich im Internet kennengelernt haben.

Bei der praktischen Arbeit mit Parallax Scrolling helfen Technologien wie das JavaScript-Plugin Skrollr von Alexander Prinzhorn. Es erlaubt Animationen basierend auf der Scrollposition und lässt sich umfangreich konfigurieren. Verwendung findet es beispielsweise beim One-Pager „A History of Interior Design“. Die Leser erfahren hier Details zu unterschiedlichen Stilepochen. Die Übergänge zwischen diesen Epochen werden mit einer kreisförmigen Blende animiert. Diese Blenden passen gut zum illustrativen Stil der Website und machen ihren Reiz aus. Aaron Dicks, der Designer hinter dem Projekt, schreibt dazu:

Unserer Meinung nach sind es diese Animationen, die Nutzer zum Scrollen anregen. Die Statistiken sprechen für sich selbst. Von den 50.000 Page-Views in den drei Wochen seit dem Launch hat die Seite eine durchschnittliche Besuchsdauer von 3:46 Minuten.
Aaron Dicks

Die gestalterische Arbeit mit animierten Ebenen muss jedoch kein reines Stilmittel bleiben, sondern sagt auch etwas über die Wichtigkeit eines Elements aus: Je näher ein Objekt liegt, desto bedeutsamer erscheint es. Google macht in seinem „Material Design“, der Designsprache hinter der nächsten Version von Android, ausgiebig Gebrauch davon: Neben gewöhnlichen, „flachen“ Buttons (z.B. in Dialogfeldern) gibt es weitere Buttons, die über dem Design schweben. Aktiviert man sie, heben sie sich weiter nach oben – auf diese Weise lenkt man als Designer die Aufmerksamkeit der Nutzer auf die wichtigen Aktionen. Die Gestalter hinter Material Design haben sich auch Gedanken darüber gemacht, von wo und in welche Richtung sich neue Interfaces öffnen sollten – hier lohnt sich ein Blick in Googles Design-Dokument.

Button im Material Design
Visuell hervortretender Button im Material Design

Sie können die Aufmerksamkeit auch auf wichtige Elementen lenken, indem Sie sie mit einer kurzen Verzögerung auf der Website einblenden. Dieses Vorgehen unterstützt außerdem die Persönlichkeit einer Gestaltung – und der Effekt sollte demnach auch zur Designsprache einer Website passen. Die Designerin Val Head bringt dazu folgendes Beispiel: Rufen Sie eine Rubrik auf der damaligen Website von Apple auf, springt nach einer Weile ein Submenü mit den Produkten auf. Apple setzt dabei auf eine federnde, spielerisch wirkende Transition – aber passt das zu den geradlinigen Produkten und zu Apples Marke? Die Meinungen dazu gehen sicherlich auseinander (mittlerweile verwendet Apple eine andere Transition).

Keine Barrieren bauen

Als verantwortungsbewusster Webdesigner spielt bei der Verwendung von Animationen natürlich auch die Barrierefreiheit (Accessibility) eine wichtige Rolle. Animationen sollen die Nutzer unterstützen, ihnen aber keine Steine in den Weg legen. Einige Empfehlungen aus den Web Content Accessibility Guidelines (WCAG 2.0) beziehen sich explizit auf bewegte Elemente. Diese Richtlinien sollten Sie für weitgehend barrierefreie Websites berücksichtigen.

Alternativen in Textform anbieten: Alle Inhalte und Funktionen einer Website müssen als Texte vorliegen, damit sie auch für Screenreader erreichbar sind. Das ist besonders wichtig bei Animationen, die Bedeutung tragen. Tippen Sie beispielsweise bei Apples iCloud ein falsches Passwort ein, schüttelt sich das Anmeldefenster – ein interessanter Effekt, der aber nicht für alle Anwender verständlich sein muss. Apple setzt daher auf einen zusätzlichen Hinweistext, der bei der dritten fehlerhaften Eingabe erscheint.

Blinken vermeiden: Starkes Blinken von Inhalten sollte vermieden werden – diese Effekte können epileptische Reaktionen hervorrufen und haben ein großes Nerv-Potenzial.

Auf ausreichende Kontraste achten: Die unterschiedlichen Zustände von UI-Elementen sollten sich ausreichend voneinander unterscheiden. Das gilt beispielsweise bei Buttons, deren Farbe beim Fokussieren mit der Tastatur oder der Maus verändert werden soll. Zu ähnliche Farben wirken schnell zufällig und sind besonders für Menschen mit Farbfehlsichtigkeiten nicht einfach zu unterscheiden.

Nutzern ausreichend Zeit lassen: Besonders bei animierten Texten ist es wichtig, dass die Nutzer ausreichend Zeit zum Lesen haben.

Kontrolle bei den Nutzern lassen: Nutzer möchten die Kontrolle über ihre Browser behalten. Animationen sollten daher grundsätzlich nicht zu lang sein, damit sich die Nutzer nicht wie in einem Film vorkommen, den sie nicht anhalten können. Die WCAG 2.0 empfehlen eine explizite Kontrollmöglichkeit (Start, Pause, Stop) für alle Animationen, die

  • automatisch starten,
  • länger als 5 Sekunden dauern und
  • zeitgleich mit anderen Inhalten angezeigt werden.

Sinnvoll kann es außerdem sein, den Nutzern die Möglichkeit zu geben, die Animationen ganz auszuschalten. Auf diese Weise behalten die Nutzer die Kontrolle. Greg Tarnoff empfiehlt, zunächst den Endzustand aller Bewegungen zu definieren anschließend alle Animationen an eine eigene CSS-Klasse zu koppeln (z. B. „.animate“), die man einem Elternelement (z. B. „body“) mitgibt. Diese Klasse lässt sich anschließend mit einem Button im Seitenkopf und ein wenig jQuery deaktivieren.

<a href="#" id="animationOff">Animation deaktivieren</a>

$('# animationOff).on('click', function(e) { 

Hinweis: Dieser Artikel ist zuerst in Screenguide 24 (10-11/2014) erschienen.

The crisis of journalism and professional media articles/journalismus-professionelle-medien-krise r Keynote of Ute Schaeffer: "Share, post, rule? – Professional media between digital jihad and hybrid war"
Poster of the day of media studies 2014
Medianetz celebrates its 10th anniversary in 2014

An important part of each day of media studies is the keynote, directly out of the world of media. This year, Ute Schaeffer, deputy director and head of media development at the Deutsche Welle Akademie in Cologne, travelled to Trier. Her keynote had the interest provoking title "Share, post, rule? – Professional media between digital jihad and hybrid war" – and this showed the range of topics she covered pretty well.

How social media is used as a weapon

The point of departure was the question of how the net is used by lobbyists and extremists. Examples were the crises in Syria, Iraq and Ukraine, where social media play a new role. Two thirds of young Russians use social media as their primary means of information, not traditional media. They look at their smartphones about 150 times a day. This is used for targeted persuasion:

  • The rules of the medium are followed: Twitter is flooded with hashtags in order to get into the trending topics. On, questions are answered. YouTube videos are created in different versions – clean for the West, daunting for the local people.
  • The work is done in a highly professional manner by media agencies.
  • The demand for critical content in Russia (by the German radio Deutsche Welle, for example) is declining – people feel adequately informed by the state media.
  • Thus, media are becoming weapons in order to directly recruit and disorientate people.

What does this mean for professional media?

The central question of Ute Schaeffer was: If "nobody needs traditional media in 20 years in order to get news" – how should professional media react? Not by focusing on mere news, possibly even copied from news agencies. Ute Schaeffer calls for joy of experimenting and an awareness of quality without compromises: "We are only one voice of many. In the competition of these voices, we can only stand our ground based on quality."

Ute Schaeffer during her keynote
Ute Schaeffer talks about the digital jihad and the hybrid war

Some of her theses:

  • We should value the medial public relations – in this regard, she saw huge deficits. While there were only three media targeting foreign countries in the 90s, the number is now about two dozens. The budget of the Deutsche Welle is still on the level of the mid 90s, while the Kreml is investing several hundreds of millions in media targeting foreign countries, for example.
  • Professional media have to design the digital change. Quality and courage is key, in order to invent formats and storytelling in a new way.
  • Good journalism has to be at the place, where the crisis happens – ideally, even in advance.
  • Agenda setting should be done by the users: Deepening and integrating topics instead of mere news. Journalists have to know their users, making their questions the main points of their stories.

A further, interesting aspect was developed during dinner: Besides calling for a digital re-invention of journalism, the question of new digital business models is not asked often enough. This could maybe be a topic for the day of media studies 2015? We will keep investigating.

Impulses of 10 years Medianetz Trier

Logo of medianetz Trier
medianetz Trier organizes events of and for media scholars

In my role as chairman of Medianetz Trier, I had the pleasure of giving a short presentation about the aims of our alumni and students association. Topics were how we want to strengthen the networking of media scholars by means of regular events, how we want to take our knowledge back into education and how we want to give a helping hand to young students – and there has also been a greeting of the first chairman.

Panel discussion: journalism despite the crisis?

Journalism is in a crisis – but why do people still choose this job? At the panel discussion (moderated by Michael Harnischmacher), three young journalists with a range of background took part:

  • Nelly Theobald, who is still studying in a master program, but has been working as a freelance journalist for a long time, and was also awarded a grant of the Konrad Adenauer Stiftung
  • Bileam Bader of the channel WDR
  • Nathalie Stüben of the Deutsche Journalistenschule on the phone

All participants stressed the importance of the journalistic trainee programs, which are still the save way, often also prerequisites for a permanent position. Media scholars have advantages thanks to their knowledge and courage regarding journalistic formats and the media change – this is a "huge plus" (Bileam Bader). Nelly Theobald also pointed out there is a possible risk: There is not always a demand for specialists of media, because journalists with an economic, legal, or scientific background are also needed – experts in their fields.

Nelly Theobald, Bileam Bader and Michael Harnischmacher during the discussion
Nelly Theobald and Bileam Bader talk to Michael Harnischmacher

Bileam Bader said that a permanent position does not have to be the ultimate goal: The work of an editor is different from the work of a freelancer, meaning that not everyone even wants a permanent position. But the business of a freelance journalist is not simple. You should create a good network – quality alone is not enough. Additionally, a lot of students are already working as freelance journalists, taking considerable lower wages. All three agreed that journalism is a very interesting field of work – diversified, demanding, perfect for curious people. But all participants also stressed the difficulties – you have to be willing to work a lot (especially during unattractive working hours), start to get a foot in the door during studies, have a broad knowledge and focus on modern formats. However, there was also a positive summary: If you want to become a journalist, you will find your way.

Finally, we payed homage to this year's alumni.

Photos of the day of media studies 2014

Fast progress bars to enhance user experience articles/fast-progress-bars-user-experience r Faster load times…

It is logical, but still worth mentioning: the best optimization of load time is keeping it as short as possible. You should optimize data to avoid unnecessary transfers and keep the size of data as small as possible. It is not always necessary to use a high definition pdf file to show a magazine: web standards like HTML5 and CSS3 are considerably smaller. Progressive loading in the background helps in making contents available before they have been loaded completely.

progress bar with two marks – one dark showing the actual position, one light showing the loaded data
Progressive loading like in Apple's podcast app on iOS reduces the waiting time. Users can stark listening to a podcast even if it has not yet been fully loaded. Different colors show the actual position and the loaded data at the same time.

… or create a pleasurable waiting time

However, it is not always possible to avoid loading of huge data. Some apps show a little film or a couple of introduction screens while sucking the data from the net. This is not only useful to distract users, but can communicate small pieces of information like tips or usage instructions. Learning while waiting.

Instant loading, seemingly

The progress bar itself is also worth considering. Design is not only simple aesthetics, but a crucial influence of how users perceive a web site or app, and how they use it. Design decisions are therefore not only a question of visual style, but regulate users' perceptions. You can use this for your advantage: the right design decisions can data make seem loading faster than it objectively does. Of course, you might object this would mislead users. However, interaction design is about enhancing the user experience (UX), so making the waiting time as pleasant as possible is very legitimate.

Let's take a look at how progress bars can make the loading seem faster. Chris Harrison and his colleagues concentrated on this question in a couple of studies. They successively showed their participants two different progress bars and asked them which one of these seemed faster. Objectively, both progress bars took exactly the same time (5 seconds), but this does not mean that the perception of time was identical.

The pulse of time: pulsating progress bars seem faster

Pulsating progress bars are better suited to make the felt waiting time of users as short as possible. For example, you could make the color of the progress bar pulse in different hues.

Progress bars seem even faster when the frequency of the pulse changes, especially when it accelerates towards the end.

Beware of one color: gradients and animated shadings reduce the subjective perception of time

As Apple's OS X shows, progress bars need not to be one-colored, but can be composed of animated gradients or shadings. It is especially useful to let the gradient move in the opposite direction of the bar itself. Accelerating the animation towards the end creates the impression of faster loading.

Can the effect be measured?

Tiny visual details like this improve the perception of the loading progress. But does this effort really pays out? Yes, it does, and even the numbers prove it: Harrison and his colleagues investigated in another study how much faster the loading progress seemed. Participants of the study could adapt two progress bars until they seemed to be of the same speed. In this study, shaded progress bars seemed about 12% faster than non-shaded.

Conclusion: little "tricks" for a better user experience (UX)

Good interaction design is built on love to the details: little tricks like a pulsating progress bar or animated shadings enhance the user experience to a great deal. Additionally, you can use the waiting time to communicate information to your users. An alternative, which is especially used when data is loaded from the web and the duration cannot easily be determined: a spinning loading indicator in circular form – but this is another stylistic device with different use cases.