Wer mit seiner eigenen Website oder seinem eigenen Webshop ins Netz gehen will, der stößt schnell auf jede Menge Fachbegriffe. Das User Interface (UI) und die User Experience (UX) sind zwei davon. Beide werden oft verwechselt. Damit Ihre Besucher zufrieden sind und gerne wiederkommen, sollten Sie UI und UX Ihrer Webseite auf Ihre Zielgruppen ausrichten. Wir erklären Ihnen, was sie bedeuten und worauf Sie bei Ihrem Internetauftritt achten müssen.
In der Anfangszeit des Internets sahen Webseiten völlig anders aus als heute. Zu einer guten Bedienbarkeit von den neuen Online-Auftritten gab es noch keinerlei Erkenntnisse. So schuf jeder Web-Designer seine Seiten nach ganz eigenen Regeln und Vorstellungen. Das Internet der 1990er Jahre war bunt, mit Informationen überfrachtet und voller komplizierter Menüpunkte – und später dann auch noch blinkend und mit Musik unterlegt. Einer der Wendepunkte war Googles radikaler Schritt, die Startseite seiner Suchmaschine bis auf das Eingabefeld und minimalistische Einstellmöglichkeiten leer zu lassen.
Nach und nach setzten sich Erkenntnisse durch, mit denen die Entwickler von Webseiten heute eine intuitive Bedienbarkeit schaffen. Auch die Anpassung an unterschiedliche Nutzertypen und wechselnde Endgeräte ist inzwischen eine selbstverständliche Überlegung im Entwicklungsprozess.
Im Gegensatz zu den Anfängen des World Wide Webs liegen die Aufgaben des ursprünglichen „Web Designers“ heute verteilt bei zahlreichen Spezialisten. Dazu gehören Marketing, Grafik, Text, Technik – und eben auch UI und UX.
Das User Interface – die richtige Verbindung zwischen Mensch und Maschine entscheidet über den Erfolg
Jede größere Website verbindet zwei Welten: Das Frontend, das Benutzer:innen sehen und die Datenschicht, die tief im Inneren des Web-Servers verborgen liegt. Aufgabe des UI-Experten ist es, beide Ebenen zweckmäßig miteinander zu verbinden. Dabei sollen Website-Besucher:innen
alle gesuchten Inhalte auf direktem Weg erreichen,
dank eines übersichtlichen Designs alle anzuklickenden Objekte wie Schaltflächen oder Bildlaufleisten schnell erkennen und verstehen,
übersichtliche Formulare vorfinden, die sie schnell, intuitiv und ohne lästige Doppelungen ausfüllen können.
Typische Fehler im UI: Kein Nutzungskomfort
Kaum etwas vertreibt Website-Besucher:innen so zuverlässig wie ein miserables User Interface. Umständliche Eingabemasken sollten beispielsweise vermieden werden: Müssen Kund:innen Ihres Webshops beispielsweise ein Adressformular ausfüllen, wollen sie sich nicht umständlich durch lange Listen klicken.
Ein verbreitetes Beispiel für vermeidbare Fehler ist die Länderauswahl im Drop-Down-Menü mit allen 185 Ländernamen dieser Erde. Unangenehm ist es, wenn etwa Deutschland versteckt unter G für „Germany“ einsortiert ist, weil die Software Ihres Webshops im Original mit englischen Ländernamen arbeitet.
Richtet sich Ihr Webshop etwa an bestimmte Zielgruppen, sollte Ihr Web-Team das berücksichtigen: Gehören die Kund:innen überwiegend zu einer älteren Zielgruppe (sogenannte Silver Surfer), sollte die Auswahlliste der Geburtsjahre nicht beim Jahr 2020 beginnen.
Ebenso, wenn es ohnehin ein Mindestalter von 16 oder 18 Jahren gibt. Warum wollen Sie Ihren Kund:innen zumuten, sich umständlich durch eine lange Liste aller möglichen Geburtsjahre zu scrollen. Ein User Interface sollte möglichst einfach aufgebaut sein, um auch die Erwartungen an die Conversion Rate erfüllen zu können.
Wichtige Aufgaben des UI: Sicherheit und Datenqualität
Daneben muss ein/e UI-Designer:in aber auch auf die Logik von Formularinhalten achten. Fehleingaben können erkannt werden, und gar nicht erst in Ihrer Kundendatenbank landen: Geben etwa neue Benutzer:innen persönliche Mailadressen ohne @-Zeichen ein, sollte eine Fehlermeldung erscheinen und dieser Adressdatensatz nicht gespeichert werden. So bauen Sie eine Datenbank mit validen Kundendaten auf.
Das User Interface hat eine weitere Aufgabe, nämlich die Abwehr von Hackingangriffen. Hacker:innen könnten versuchen, gefährliche Steuerbefehle in scheinbar harmlosen Formulareingaben zu verstecken. So könnte Schadcode auf den Server der Website eingeschleust werden (sogenannte Buffer-Overflow-Attacke). UI-Designer:innen gestalten also nicht nur Menüs und Formulare, sondern sind auch für die Datenqualität und die Gefahrenabwehr mitverantwortlich.
Sinnvolles UI, gut durchdaches UX-Design: Eine positive Erfahrung auf Ihrer Webseite sorgt dafür, dass Kunden gern wiederkommen.
Die User Experience – positive Erlebnisse schaffen den Unterschied
Anders als beim UI geht es bei der User Experience in erster Linie um die Kundenzufriedenheit: Alle Besucher:innen Ihrer Website sollen nicht nur schnell finden, was sie suchen. Sie sollen auch einen positiven und wertigen Eindruck von der Website gewinnen und gerne wiederkommen.
Um dies alles zu erreichen, machen sich UE-Designer:innen am Anfang viele Gedanken über Nutzungs-Typen und Nutzungsarten der Website. In der Regel werden gemeinsam mit dem Marketing die typischen Kund:innen mit ihren wichtigsten Eigenschaften definiert, sogenannte Personas. In dieser Phase eines Webprojektes werden möglichst umfassende Daten genutzt: Erkenntnisse aus einer Vorgänger-Webseite, Marktforschung oder Branchen-Informationen.
Maßgeschneiderte UX: Auf die Zielgruppe kommt es an
Diese Erkenntnisse wirken sich auf Design, Inhalte und Technik aus. Zwei Beispiele:
Soll eine Website für Heimwerkerinnen erstellt werden, stehen bei der Konzeption möglicherweise praktische Handwerks-Tipps im Vordergrund. Je nach Art Ihres Geschäfts kombinieren Sie die Tipps mit einem Webshop oder Affiliate-Links zu nützlichen Produkten rund ums Heimwerken.
Die hierfür skizzierte Persona ist die geschickte und selbständige Macherin. Sie interessiert sich für regelmäßige Projektvorstellungen, nutzt Foren zum Ideen-Austausch mit Gleichgesinnten und plant ihre Vorhaben sorgfältig. Das bevorzugte Endgerät ist vermutlich ein Desktop-Rechner während der Planungsphase – und ein Tablet, mit dem Tutorials während der Ausführung angesehen werden können.
Eine Website für Fußball-Interessierte wird den Fans des runden Leders eher einen Newsticker zu einzelnen Teams, Ligen oder Turnieren bieten oder die aktuelle Tabelle als Schnellansicht – das aber sekundengenau und optimiert fürs Smartphone.
Whitepaper: AR/VR mit 5G
Augmented und Virtual Reality mit 5G: Expertenwissen teilen und mit Service punkten. Erfahren Sie mehr in unserem 5G-Whitepaper zu AR/VR.
Die User Experience gestalten: Die wichtigsten Fragen
Lernen Sie immer weiter aus den Erfahrungen, die Nutzer:innen mit Ihrer Webseite machen. Stellen Sie sich die folgenden Fragen bei der Planung Ihres Webprojektes, doch lassen Sie es nicht dabei bewenden. Unter anderem werden Ihre potenziellen Kund:innen von Trends und Mitbewerberaktivitäten beeinflusst, so dass sich ihr Verhalten mit der Zeit ändert. Für eine gelungene UE stehen diese Fragen im Mittelpunkt:
Welche Benutzungstypen (personas) besuchen die Website?
Was sind die Interessen der Benutzer:innen und welche Informationen erwarten sie von Ihnen?
Welche Ziele haben Sie als Website-Betreiber:in und wie möchten Sie Ihre Inhalte den Kunden am besten präsentieren?
Wie erreichen Sie eine hohe Conversion Rate und regelmäßig wiederkehrende Besucher:innen?
Wie schaffen Sie wertige Inhalte, die auch von Suchmaschinen leicht gefunden werden?
All diese Fragen stellen sich UE-Expert:innen – und um diese zu beantworten, greifen sie auf zahlreiche Informationsquellen zurück. Neben regelmäßigen qualitativen Benutzungs-Interviews gehört dazu beispielsweise die Auswertung von Server-Daten: Wie lange bleiben Nutzer:innen auf der Seite? Welche Unterseiten rufen sie häufig auf? Welche Suchanfragen stellen sie auf der Website? Finden sie, was sie suchen? Füllen sie Formulare aus und abonnieren sie Newsletter oder brechen sie Bestell-Prozesse regelmäßig ab?
UE-Designer:innen prüfen auch im laufenden Betrieb regelmäßig, ob die Besucher:innen mit den Angeboten der Website zufrieden sind und steuert nach, wenn es hier Probleme gibt. Daneben suchen sie – genau wie UI-Designer:innen – regelmäßig nach Verbesserungen, um Wege auf der Website zu verkürzen oder die Conversion Rate zu verbessern.
Empfohlener externer Inhalt
Hier ist ein Video-Inhalt von YouTube. Er ergänzt die Informationen auf dieser Seite. Sie können ihn mit einem Klick anzeigen und wieder ausblenden.
Ich bin einverstanden, dass externe Inhalte angezeigt werden. So können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr in unserer Datenschutzerklärung.
Am Ende müssen also beide Disziplinen gut zusammenarbeiten, damit die Besucher:innen Ihrer Website auch alles finden was sie suchen, ein angenehmes Nutzungserlebnis haben und gerne wiederkommen. Eine gute Website ist eine Website, die in den Lesezeichen Ihrer Besucher:innen ganz oben gespeichert wird. Denn für Ihre Website gilt, was auch für Ihre Lieblings-Restaurants gilt: Zahlreiche Stammgäste sind das schönste Kompliment und der beste Beweis, dass Sie alles richtig gemacht haben.
Flexible Speicher-Lösung: Vodafone Total Cloud Storage
Storage wird zu einem der größten Kostenfaktoren unter den IT-Ausgaben.
Buchen Sie unsere Angebote einfach zu Ihrer Vodafone Total Cloud-Lösung dazu.
Vodafone Total Cloud Storage hat die ISO 27001-Zertifizierung und basiert auf aktuellster Technologie.
Wir garantieren wir Ihnen bis zu 99,99 % Verfügbarkeit, je nach Lösung.
Durch umfangreiche Back-up- und Restore-Lösungen schützen Sie Ihre Produktionsdaten vor Korruption, Verlust und versehentlichen Löschungen.
Unser UI/UX-Glossar: Diese Fachbegriffe sollten Sie kennen
Bei Projekten rund um Ihre Webseite werden Sie mit verschiedenen Fachbegriffen konfrontiert. Damit Sie sich mit den Expert:innen in Ihrem Team besser verständigen können, haben wir Ihnen die wichtigsten Begriffe einmal zusammengefasst:
User Interface: Die Benutzungsoberfläche (englisch: User Interface) ist die Verbindung zwischen Mensch und Maschine. Ist diese Oberfläche gut gestaltet, finden sich Benutzer:innen schnell zurecht, haben alle gewünschten Informationen auf einen Blick und freuen sich über ein angenehmes Besuchs- oder Einkaufserlebnis.
User Experience: Mit diesem Begriff aus dem Marketing wird die Benutzungserfahrung von Besucher:innen und Kund:innen beschrieben. Gefallen ihnen Gestaltung, Funktionsumfang und angebotene Inhalte des Produktes – hier also der Website – oder wenden sie sich frustriert ab und kommen nie wieder?
Frontend: Die für Besucher:innen der Website sichtbaren Inhalte zum Beispiel Ihres Webshops sind das Frontend, vergleichbar mit dem Schaufenster oder dem Verkaufsraum eines Ladengeschäftes.
Backend: Hier liegen auf Ihrem Server die Kunden- und Produktdatenbanken Ihrer Website. Für Besucher:innen sind diese Datenbanken nicht direkt sichtbar und erreichbar, vergleichbar mit dem Warenlager oder den Büroräumen Ihres Unternehmens. UI-Designer:innen stellen eine intuitive, kundenfreundliche Verbindung zwischen Backend und Frontend her – die auch vor Eingabefehlern und Missbrauch möglichst gut geschützt sein sollte.
Conversion Rate: Die Conversion Rate gibt an, wie viele Besucher:innen die Inhalte Ihrer Website tatsächlich genutzt haben. Das können bei einem Webshop alle Besucher:innen sein, die etwas gekauft haben. Das können bei einer reinen Informations-Seite aber auch Besucher:innen sein, die beispielsweise Ihren dort vorgestellten Newsletter abonniert oder an Ihrer Umfrage teilgenommen haben. Die Conversion Rate beschreibt hierbei in Prozent das zahlenmäßige Verhältnis von Gesamtbesucher:innen (Klicks) zu Besucher:innen, die die Seite so genutzt haben wie von Ihnen geplant.
HTML: Die Hyper Text Markup Language (HTML) ist die grundlegende Seitenbeschreibungssprache, in der Internetseiten programmiert sind. Daneben gibt es mittlerweile noch eine Vielzahl von weiteren Sprachen und Standards wie JavaScript um Bewegtbildinhalte darzustellen oder die Cascaded Style Sheets (CSS) um beispielsweise das Aussehen von Dokumenten und Schaltflächen zu definieren und zu vereinheitlichen.
Responsives Design: Eine technisch gut gemachte Website funktioniert heute auf möglichst vielen unterschiedlichen Endgeräten. Das Benutzungs-Interface passt sich dabei an die Besonderheiten des jeweiligen Gerätes an. Auf einem Smartphone werden Menüs automatisch kompakter dargestellt als auf einem großen Computermonitor. Auf einem Tablet mit Touchscreen haben alle Schaltflächen die richtige Größe, um bequem per Fingerdruck ausgewählt zu werden; und selbst auf der Smart-Watch sind wichtige Inhalte schnell erkenn- und aktivierbar. Responsives Design gewährleistet, dass Ihre Besucher:innen mit jedem Endgerät das gleiche positive Nutzererlebnis haben.
Empfohlener externer Inhalt
Hier ist ein Video-Inhalt von YouTube. Er ergänzt die Informationen auf dieser Seite. Sie können ihn mit einem Klick anzeigen und wieder ausblenden.
Ich bin einverstanden, dass externe Inhalte angezeigt werden. So können personenbezogene Daten an Drittplattformen übermittelt werden. Mehr in unserer Datenschutzerklärung.
0800-Nummern: Mit kostenloser Inbound-Telefonie das Kundenerlebnis verbessern
Eine 0800er-Nummer ist für Anrufer:innen normalerweise kostenlos. Rufnummern aus diesem Nummernkreis sind ein nicht zu unterschätzendes Service- und Marketing-Tool. Denn die Kosten für Anrufe zu diesen Nummern tragen diejenigen, die die Nummer anbieten. In der Regel sind das Unternehmen, die auf diese Weise ihre Kund:innen enger an sich binden möchten –
beispielsweise im Servicebereich. Was noch hinter der 0800-Vorwahl steckt, wie Sie eine solche Nummer beantragen können und welche Abrechnungsmodelle es gibt, erfahren Sie hier.
Für viele ist ein Telefonanruf immer noch das erste oder zweite Mittel der Wahl für die Kontaktaufnahme mit Unternehmen. Laut einer Studie von Capterra nutzt sogar jede:r zweite Millennial weiterhin das Telefon, um Unternehmen zu kontaktieren. Trotz Konkurrenz durch E-Mail- und Messenger-Servicedienste bieten laut Studie 72 Prozent der befragten Unternehmen weiterhin Servicerufnummern an.
Kund:innen erwarten hier in der Regel eine für sie kostenfreie 0800-Nummer. Laut der Capterra-Studie wünschen sich zwei Drittel der Konsument:innen auch bei Onlineshops eine 0800-Gratisrufnummer.
Power over Ethernet (PoE): So sparen Sie sich den Stromanschluss
Geräte im Büro einfach über das geplante oder vorhandene Netzwerk mit Strom versorgen? Der Standard „Power over Ethernet“ (PoE) verspricht genau dies und vereinfacht in der Praxis die Installation von neuen Telefonen, Netzwerk-Hubs oder Überwachungskameras. Was ist dran am Strom über das Netzwerkkabel und wie genau funktioniert die Technik?
Je mehr Geräte sich in Ihrem Büro ansammeln, desto unübersichtlicher wird die Verkabelung. Power over Ethernet (PoE) kann hier Abhilfe schaffen, indem es bei vielen Geräten das zusätzliche Stromkabel überflüssig macht. Doch damit das funktioniert, müssen Netzwerk und Endgeräte bestimmte Voraussetzungen erfüllen.
MPLS: So funktioniert Multiprotocol Label Switching
Videokonferenzen mit Fernost, Datenuploads für eine Niederlassung in Spanien oder vertrauliche Entwürfe, die Mitarbeiter:innen innerhalb Deutschlands hin und her schicken: Vernetzte Firmenstandorte benötigen besonders gute Latenzzeiten und Bandbreiten sowie eine hohe Netzwerksicherheit. Netze auf Basis von Multiprotocol Label Switching (MPLS) sind in der Lage, diese Anforderungen jederzeit zu erfüllen.
Unternehmen, die Daten zwischen Standorten über das Internet versenden, müssen zwingend darauf achten, dass diese schnell ankommen und nicht in falsche Hände geraten. Davon abgesehen ist kaum etwas ärgerlicher, wenn etwa eine wichtige Videokonferenz wegen zu hoher Latenzzeiten stockt oder gar abbricht. Das MPLS-Verfahren garantiert Unternehmen, dass Ausfälle und andere Probleme mit der Standortvernetzung nahezu keine Rolle mehr spielen.
Wie MPLS funktioniert und das Verfahren mit anderen Technologien zur Standortvernetzung zusammenhängt, erfahren Sie hier.
„So geht Corporate Influencing” – mit Céline Flores Willers
Céline Flores Willers ist LinkedIn-Pionierin und Top Voice der "The People Branding Company". Wie Unternehmen gezielt Reichweite und Einfluss gewinnen, verrät sie in dieser Podcast-Folge.
Raspberry Pi als Firewall aufsetzen: So gehen Sie vor
Der Kleinstcomputer Raspberry Pi ist nicht nur unter Do-it-Yourself-Enthusiasten sehr beliebt. Egal, ob im privaten Bereich, für das Prototyping oder im Job: das kompakte Gerät ist ein Alleskönner. Erfahren Sie hier, wie Sie auf dem Raspberry relativ einfach eine leistungsfähige Firewall aufsetzen und so ihr Netzwerk absichern.
Jedes internetfähige Gerät sollte heute durch eine starke Firewall geschützt sein. Als Ergänzung zum Virenschutz kann eine gute Firewall viele Angriffe bereits im Keim ersticken. Mit dem allgegenwärtigen Mini-Computer Raspberry Pi und der Robustheit einer Linux-basierten Firewall-Distribution ist es einfacher denn je geworden eine kleine, aber effektive Firewall zu erstellen.
