ENOR Technologies

UI/UX DESIGN

Klare Erlebnisse.Oberflächen, die den nächsten Schritt verständlich machen.

Bei ENOR gestalten wir, wie Besucher Ihre Website verstehen und nutzen. Wir verbinden Struktur, Navigation und visuelles Design zu Abläufen, die sich an den Bedürfnissen der Nutzer orientieren.

UI/UX-Projekt besprechenAblauf ansehen
Szenario: Leistung finden → Angebot verstehen → Anfrage sendenIllustratives Konzept
  1. 01 · Leistung finden

    Start → Leistungen

    Menü mit drei Leistungen

  2. 02 · Angebot verstehen

    Leistungsseite

    Was enthalten ist und wie es abläuft

  3. 03 · Anfrage senden

    Formular

    Drei Felder und Bestätigung

Ausnahme: ungültige E-Mail → Meldung erklärt die Korrektur

  1. 1Ablauf
  2. 2Wireframe
  3. 3Finaler Screen
  • Struktur und Navigation
  • Wireframes und Prototypen
  • Nutzerzentrierte Oberflächen

EINLEITUNG

Eine Website sollte verstanden werden, nicht mühsam erlernt.

Besucher kommen mit einem Ziel: Informationen finden, ein Angebot vergleichen oder eine Aktion abschließen. Erschweren Struktur und Oberfläche diesen Weg, erfüllt selbst ein gepflegtes Erscheinungsbild seinen Zweck nicht.

Bei ENOR gestalten wir den Nutzungsablauf, bevor wir die visuellen Details abschließen. Wir ordnen Inhalte, klären die Navigation und legen fest, wie die Oberfläche bei jedem Schritt reagiert.

Diese Leistung liefert das Designprojekt: Struktur, Abläufe, Screens und Prototyp. Programmierung und Veröffentlichung sind Aufgaben der Entwicklung.

UI UND UX

Wie das Erlebnis funktioniert und wie es aussieht.

Zwei Teile desselben Erlebnisses, gemeinsam gestaltet.

UX

Nutzererlebnis

Befasst sich damit, wie Informationen geordnet sind und wie Nutzer ihr Ziel erreichen.

  • Struktur
  • Navigation
  • Abläufe
  • Inhalte
  • Formulare
  • Usability
UI

Benutzeroberfläche

Legt fest, wie diese Elemente dargestellt werden und visuell kommunizieren.

  • Typografie
  • Farben
  • Buttons
  • Felder
  • Icons
  • Abstände
  • Interaktionszustände

Wir gestalten beides gemeinsam, damit Optik und Nutzung dasselbe Ziel unterstützen.

PROBLEME, DIE WIR ANGEHEN

Wenn Nutzer stocken, müssen wir verstehen, warum.

Typische Situationen und der jeweilige Designansatz. Die konkrete Ursache wird in der Projektanalyse ermittelt.

  1. Situation: Navigation mit unklaren Kategorien

    Ansatz: Ordnung nach Inhalten und Aufgaben

  2. Situation: Seiten ohne Hierarchie

    Ansatz: Reihenfolge von Botschaften und Aktionen

  3. Situation: Lange oder verwirrende Formulare

    Ansatz: Überarbeitung von Feldern und Hinweisen

  4. Situation: Buttons mit unklarer Bedeutung

    Ansatz: Verständliche Beschriftungen und Zustände

  5. Situation: Prozesse ohne Bestätigung

    Ansatz: Rückmeldung zum Ergebnis und zum nächsten Schritt

  6. Situation: Fehler ohne Lösungshinweis

    Ansatz: Meldungen und Wege zur Korrektur

LEISTUNGSUMFANG

Vom Verständnis des Problems zu einem bewertbaren Prototyp.

Der Umfang wird je Projekt festgelegt. Nicht jedes Angebot umfasst alle Forschungsmethoden.

  1. 01

    Anforderungs- und Nutzeranalyse

    Ziele, Zielgruppen, Aufgaben und Rahmenbedingungen.

    Ergebnis: Zusammenfassung der Bedürfnisse und offenen Fragen

  2. 02

    Informationsarchitektur

    Gruppierung der Inhalte, Bezeichnungen und Hierarchie.

    Ergebnis: Sitemap und Navigationsstruktur

  3. 03

    Abläufe und Wireframes

    Schritte, Entscheidungen, Ausnahmen und Abschnittsfolge.

    Ergebnis: Ablaufdiagramme und kommentierte Wireframes

  4. 04

    Interface-Design

    Typografie, Farben, Komponenten und Zustände.

    Ergebnis: Detaillierte Screens und Komponenten

  5. 05

    Interaktiver Prototyp

    Verknüpfung der wichtigsten Screens und ausgewählter Interaktionen.

    Ergebnis: Klickbarer Prototyp für Diskussion und Bewertung

  6. 06

    Bewertung und Übergabe

    Die vereinbarte Prüfung und Aufbereitung der Unterlagen.

    Ergebnis: Änderungsliste und Dateien für die Umsetzung

NUTZER VERSTEHEN

Entscheidungen, die bei Bedürfnissen ansetzen, nicht nur bei Vorlieben.

Je nach Projekt sammeln wir Informationen im Unternehmen, aus vorhandenen Daten und – sofern vereinbart – bei den Nutzern selbst.

Methoden je nach Projekt

  • Workshop mit dem Unternehmen
  • Definition der Zielgruppen
  • Anforderungsanalyse
  • Prüfung vorhandener Daten
  • Interviews
  • Beobachtung von Aufgaben
  • Analyse von Supportanfragen
Illustratives Konzept

Informationen aus einer bekannten Quelle.

Die meisten E-Mail-Fragen betreffen die Planungsdauer.

Quelle: Supportanfragen der letzten 3 Monate (Beispiel)

Die Seite „Leistungen“ führt nicht zum Formular.

Quelle: Prüfung der bestehenden Website

Wechseln Sie die Reiter: Jede Aussage nennt ihre Quelle oder wie sie überprüft wird.

Illustrative Personas stellen wir nicht als Ergebnisse echter Forschung dar.

Eine interne Diskussion ohne Beteiligung von Nutzern nennen wir nicht „User Research“.

INFORMATIONSARCHITEKTUR

Informationen gehören dorthin, wo Nutzer sie erwarten.

Wir gruppieren Inhalte und wählen Bezeichnungen, die zur Suchweise der Besucher passen, und machen aus der Struktur eine Navigation.

  • Gruppierung der Inhalte
  • Kategorien
  • Bezeichnungen
  • Sitemap
  • Hauptnavigation
  • Sekundärnavigation
  • Breadcrumb
  • Suche, wenn nötig
  • Verknüpfungen zwischen Seiten

Wir schlagen keine riesigen Menüs vor, nur um jede Seite zu zeigen; das Menü zeigt die Hauptwege.

Illustratives Konzept

Ungeordnete Inhalte

  • Innenarchitektur
  • Wohnungen
  • Möbel nach Maß
  • Büros
  • Beleuchtung
  • Über das Studio
  • Häufige Fragen
  • Kontakt
  • Materialien

Wie suchen Besucher diese Seiten? Mit welchen Begriffen?

Ansicht wechseln: dieselben Inhalte vor und nach der Gruppierung in die Navigation.

NUTZUNGSABLÄUFE

Jede Aktion hat einen Weg und einige Ausnahmen.

Wir gestalten die ausgewählten Abläufe vom Einstieg bis zur Bestätigung – mit Fehlern und dem Weg zurück, nicht nur das Idealszenario.

Beratungsanfrage
Illustratives Konzept
  1. 01

    Einstieg

    Leistungsseite

  2. 02

    Auswahl

    Projektart

  3. 03

    Angaben

    Name, E-Mail, Beschreibung

  4. 04

    Prüfung

    Pflichtfelder

  5. 05

    Bestätigung

    Was als Nächstes passiert

Hauptweg: fünf Schritte bis zur Bestätigung, mit den nötigen Informationen bei jedem Schritt.

Wählen Sie einen Weg: Hauptweg, ungültige E-Mail oder zurück.

  • Leistung finden
  • Angebotsanfrage
  • Buchung
  • Produktsuche
  • Registrierung
  • Kontakt

Für jeden Ablauf gestalten wir

  • Den Einstieg
  • Die Schritte
  • Die Entscheidungen
  • Die nötigen Informationen
  • Die Fehler
  • Den Weg zurück
  • Die Bestätigung

WIREFRAMES

Wir klären die Struktur vor den visuellen Details.

Wireframes helfen, Inhalte, Hierarchie und Funktion jedes Bereichs zu besprechen, ohne von Farben und Dekoration abgelenkt zu werden.

  • Abschnittsfolge
  • Navigation
  • Überschriften
  • Platz für Medien
  • Formulare
  • CTAs
  • Ergänzende Inhalte

Wir verwenden repräsentativen Text in realistischer Länge. Die Freigabe stützt sich nicht auf Platzhalter, die den echten Inhalt nicht abbilden.

Illustratives Konzept
  1. 1Überschrift und AngebotWas das Studio tut und für wen.
  2. 2HauptaktionEin klarer CTA im sichtbaren Bereich.
  3. 3LeistungenDrei Hauptwege mit klaren Namen.
  4. 4ProjekteArbeitsnachweis mit Link zu Details.

Wechseln Sie vom Wireframe zur UI: Die Notizen erklären die Rolle jedes Bereichs.

INTERFACE-DESIGN

Visuelle Hierarchie, die das Handeln unterstützt.

Wir gestalten die visuellen Elemente und ihr Verhalten, damit Seiten und Komponenten einheitlich bleiben.

  • Typografie
  • Farben
  • Abstände
  • Raster
  • Icons
  • Buttons
  • Felder
  • Karten
  • Navigation
  • Benachrichtigungen
  • Dialoge

Zustände für die relevanten Komponenten

  • Default
  • Hover
  • Focus
  • Active
  • Disabled
  • Loading
  • Empty
  • Error
  • Success

Ein Status wird nie nur über Farbe gezeigt: Wir ergänzen Text oder ein Icon.

Illustratives Konzept
Beratung buchen

Zustand

Visuelle Spezifikation · Default: Die Grundansicht.

Wählen Sie Komponente und Zustand, um die Spezifikation zu sehen.

FORMULARE UND OBERFLÄCHENTEXTE

Kleine Wörter, große Wirkung.

Beschriftungen, Hinweise und Meldungen sagen Nutzern, was gebraucht wird, warum und was danach passiert.

  • Beschriftungen
  • Hinweise
  • Button-Texte
  • Fehlermeldungen
  • Leere Zustände
  • Bestätigungen
  • Abbrechen oder zurück

Fragen, die wir beantworten

  • Welche Daten gebraucht werden
  • Warum sie nötig sind
  • Was nach dem Absenden passiert
  • Wie ein Fehler korrigiert wird
Illustratives Konzept

Beratung anfragen

Hinterlassen Sie Ihre E-Mail, wir antworten mit den nächsten Schritten.Hinweis

Wir nutzen sie nur, um auf diese Anfrage zu antworten.Grund

Nach dem Senden sehen Sie eine Bestätigung, und das Studio schreibt Ihnen die Details.

Ohne E-Mail absenden, um den Fehler zu sehen, dann das Beispiel ausfüllen. Es wird nichts gesendet.

Ein Platzhalter ist nie die einzige Beschriftung eines Feldes.

In der echten Umsetzung erscheint ein Erfolg erst nach abgeschlossener Aktion. Im Prototyp sind die Zustände Demonstrationen.

RESPONSIVE UND BARRIEREFREIHEIT

Das Erlebnis behält seine Logik, wenn sich der Bildschirm ändert.

Derselbe Ablauf muss auf Smartphone, Tablet und Desktop verständlich sein – per Touch, Maus oder Tastatur. Im Design prüfen wir Reihenfolge, Fokus, Kontrast und lange Texte.

  • Mobile Hierarchie
  • Navigation
  • Formulare
  • Touch
  • Tastatur
  • Fokus
  • Kontrast
  • Lesbarer Text
  • Zoom
  • Lange Inhalte
  • Verschiedene Sprachen

Visuelles Design allein garantiert keine vollständige Barrierefreiheit. Das Ergebnis hängt auch von Umsetzung und Tests ab.

Responsive Design ansehen

INTERAKTIVER PROTOTYP

Testen Sie den Ablauf vor der Umsetzung.

Wir verknüpfen die wichtigsten Screens zu einem Prototyp, der Navigation und ausgewählte Interaktionen zeigt. Das erleichtert die Diskussion und macht Unklarheiten vor der Entwicklung sichtbar.

Klickbarer Prototyp · sendet keine Daten

Atelier Linea

Räume, die sich wie Zuhause anfühlen.

Innenarchitektur für Wohnungen und Büros.

  1. Start
  2. Menü
  3. Leistungen
  4. Leistung
  5. Formular
  6. Bestätigung

Der Prototyp ist keine funktionierende Website und verarbeitet weder Zahlungen noch echte Daten. Eine Demonstration ersetzt nicht den Test eines programmierten Systems.

USABILITY-BEWERTUNG

Wir prüfen, ob der gestaltete Weg verstanden wird.

Je nach Projekt ist die Bewertung ein Expertenreview oder ein Test mit repräsentativen Nutzern. Das sind unterschiedliche Methoden, die wir getrennt berichten.

  • Expertenreview
  • Tests mit repräsentativen Nutzern
  • Definierte Aufgaben
  • Beobachtung
  • Interviews nach der Aufgabe
  • Dokumentation der Probleme
  • Priorisierte Verbesserungen
Illustratives Konzept

Das Designteam prüft den Prototyp anhand etablierter Usability-Kriterien. Ohne Teilnehmende.

BeobachtungWoPrioritätVorschlag
„Senden“ sagt nicht, was danach passiertFormularHochKlare Beschriftung und Folgetext
Zwei Leistungen mit ähnlichen NamenMenüMittelKurzbeschreibung im Menü
Die Bestätigung bietet keinen nächsten SchrittBestätigungMittelLink zu Projekten

Illustratives Beispiel eines Expertenreviews am Konzept; kein Testergebnis.

Vergleichen Sie das Expertenreview mit der Berichtsstruktur eines Nutzertests.

Wir erfinden keine Heatmaps, Erfolgsquoten oder Zitate von Teilnehmenden.

A/B-Tests im Livebetrieb sind eine eigene Leistung: Sie brauchen Traffic, Umsetzung und einen Messplan.

KOMPONENTEN UND ÜBERGABE

Ein geordnetes Projekt für das Umsetzungsteam.

Die Lieferungen werden im Vertrag festgelegt und so organisiert, dass das Entwicklungsteam Struktur, Verhalten und Zustände nachvollziehen kann.

  • Struktur
  • Abläufe
  • Wireframes
  • Freigegebene Screens
  • Responsive Varianten
  • Komponenten
  • Zustände
  • Prototyp
  • Assets
  • Interaktionsnotizen
  • Offene Punkte

Zwei verschiedene Dinge

  1. 01Komponentenbibliothek des ProjektsDie Komponenten und Zustände dieser Website.
  2. 02Unternehmensweites DesignsystemRegeln und Governance für mehrere Produkte; ein eigenes Projekt.

Quelldateien, Lizenzen und Nutzungsrechte werden im Vertrag geregelt. Programmierung und Veröffentlichung sind keine Lieferungen dieser Leistung.

Übergabe · Atelier LineaIllustratives Konzept

Quelldatei

  • 01 Struktur und Sitemap
  • 02 Hauptabläufe
  • 03 Wireframes
  • 04 UI-Screens
  • 05 Komponenten und Zustände
  • 06 Prototyp

Exportmaterialien

  • SVG-Icons
  • Bilder je Seitenverhältnis
  • Schriften gemäß Lizenz

Interaktionsnotizen

  • — Der E-Mail-Fehler erscheint beim Verlassen des Feldes.
  • — Die Bestätigung erscheint erst nach dem Speichern der Anfrage.
  • — Offener Punkt: Suche auf der Website, Entscheidung ausstehend.

ABLAUF

Vom Problem der Nutzerzu einer gestalteten Lösung.

Anzahl der Screens und Feedbackrunden wird im Angebot festgelegt.

01

Briefing und Ziele

Wir definieren Zielgruppe, Aufgaben und Rahmen.

02

Analyse

Wir prüfen die Informationen und die vereinbarte Forschung.

03

Struktur und Abläufe

Wir ordnen Inhalte und Schritte.

04

Wireframes

Wir bewerten Hierarchie und Funktion der Screens.

05

UI und Prototyp

Wir gestalten Oberfläche und Interaktionen.

06

Prüfung

Wir bewerten und verbessern im vereinbarten Umfang.

07

Übergabe

Wir bereiten die Unterlagen für die Umsetzung auf.

Welcher Ablauf braucht am meisten Klarheit?

Projekt besprechen
Eine Prüfung der Umsetzung gegen das Design kann separat angeboten werden.

WARUM ENOR

Klarheit in der Struktur. Sorgfalt in der Oberfläche.

Im Portfolio erläutern wir die tatsächliche Rolle von ENOR und welche Teile umgesetzt wurden.

  1. 01Gestaltung entlang echter Aufgaben
  2. 02Inhalte und Navigation verbunden
  3. 03Einheitliche UI
  4. 04Aufmerksamkeit für Zustände und Ausnahmen
  5. 05Feedback mit Freigabepunkten
  6. 06Geordnete Übergabe

HÄUFIGE FRAGEN

Häufige Fragen.

Weitere Leistungen

Weitere Lösungen für die Anforderungen Ihres Unternehmens.

Wo haben Ihre Nutzer Schwierigkeiten?

Erzählen Sie uns von Website, Zielgruppe und den Aktionen, die Sie verbessern möchten. Wir legen einen konkreten Umfang für das UI/UX-Design fest.

Z. B. welche Seiten, Abläufe oder Formulare Schwierigkeiten bereiten und für welche Zielgruppe.

Was unsere Kunden sagen

5.0
A
Arben Hoxha, CEO

Logistikunternehmen (Beispiel)

“Sie übersetzen komplexe technische Konzepte in klare Entscheidungen für unser Team.”