Umsetzung
UI- und Vertrauens-Refresh
Ein neuer Entwurf für eine bestehende Seite, auf Desktop und Mobil. Mit geordneten Inhalten und Hinweisen für die Entwicklung.
Umsetzung / Product Design · UX Design
Umsatzsteuerbefreit gemäß § 19 UStG
UX Design: Nutzungsweg & Prototyp
Wie soll der Ablauf aussehen, bevor er entwickelt wird? Wir entwerfen bis zu fünf Screens oder Zustände und verbinden sie zu einem klickbaren Prototyp.
2.099,00 €
Gesamtpreis · einmaligUmsatzsteuerbefreit gemäß § 19 UStG
- Ein zentraler Nutzungsweg mit bis zu fünf unterschiedlichen Screens oder Zuständen
- Eine vorab vereinbarte Geräteklasse
- Informationsfolge und kommentierte Wireframes
Du fragst unverbindlich an. Ein Auftrag entsteht erst, wenn du unser Angebot annimmst .
Bild 1 von 4
Leistungsumfang
Dein Ergebnis
- Kommentierte Wireframes und ein klickbarer Prototyp für den vereinbarten Weg
- Übergabe mit Interaktionen, offenen Annahmen und fachlichen Abhängigkeiten
Enthalten
- Ein zentraler Nutzungsweg mit bis zu fünf unterschiedlichen Screens oder Zuständen
- Eine vorab vereinbarte Geräteklasse
- Informationsfolge und kommentierte Wireframes
- Klickbarer Prototyp mit einer gebündelten Überarbeitungsrunde
- Übergabe der Annahmen und Interaktionen sowie eine schriftliche Rückfragerunde
Nicht enthalten
- Kein vollständiges Produkt, fertig ausgearbeitetes UI oder Designsystem
- Keine zweite Geräteklasse, zusätzlichen Nutzerwege oder Codeentwicklung
- Kein Nutzertest und keine automatische Aussage zur Akzeptanz des Entwurfs
- Bereits gelieferte Strukturarbeit wird bei einer folgenden UI-Ausarbeitung nicht erneut verkauft
Für welches Vorhaben passt die Leistung?
Passt, wenn …
- Du möchtest einen Ablauf besprechen oder testen, bevor die Entwicklung beginnt.
- Die Aufgabe lässt sich auf wenige Screens oder Zustände beschränken.
Passt nicht, wenn …
- Du erwartest eine fertig entwickelte Anwendung oder ein komplettes Designsystem.
- Der gesamte Funktionsumfang ist noch offen und lässt sich nicht auf einen Ablauf eingrenzen.
Mögliche Überschneidungen mit: UI- und Vertrauens-Refresh, UX Writing: Oberflächentexte. Fragst du diese Leistungen für dasselbe Projekt an, prüfen wir vor der Beauftragung, welche Arbeiten sich doppeln. Auch im Warenkorb siehst du einen Hinweis dazu.
Darum geht es
Wie können wir einen neuen Ablauf prüfen, bevor er programmiert wird?
Wie soll jemand einen Termin verschieben oder ein neues Konto einrichten? Wir entwerfen die Schritte und verbinden die Ansichten zu einem klickbaren Prototyp. Damit könnt ihr den Ablauf durchspielen, bevor er entwickelt wird.
Das Paket entwirft einen zentralen Nutzungsweg mit bis zu fünf unterschiedlichen Screens oder Zuständen für eine vereinbarte Geräteklasse. Du erhältst kommentierte Wireframes und einen klickbaren Prototyp. Ein Wireframe ist eine vereinfachte Darstellung von Aufbau und Inhalt; Farben und visuelle Details stehen dabei noch nicht im Mittelpunkt.
Erst die Informationsfolge klären, dann die Oberfläche ausarbeiten
Ein klickbarer Prototyp verbindet die Ansichten, damit du den Ablauf durchspielen kannst. Wir halten benötigte Inhalte, fachliche Regeln und offene Annahmen fest. Vor Beginn wählen wir die nötigen Zustände aus; dazu kann auch eine Fehlermeldung gehören.
Der Prototyp ersetzt keine fertige Anwendung und enthält keine echte Geschäftslogik. Er kann deinem Team bei der Abstimmung helfen und als Grundlage eines getrennt beauftragten Nutzertests dienen. Eine gebündelte Überarbeitungsrunde ist enthalten. Die visuelle Ausarbeitung für weitere Geräteklassen, ein vollständiges Designsystem und Codeentwicklung sind eigenständige Aufgaben.
Kommt dir das bekannt vor?
Die Idee ist klar, der konkrete Ablauf noch nicht
Das Team weiß, welchen Nutzen die Funktion haben soll. Welche Angaben zuerst gebraucht werden und wie es danach weitergeht, ist offen. Im Entwurf wird daraus eine Folge konkreter Schritte.
Ein bestehender Weg ist unnötig schwer verständlich
Ein Formular fragt Informationen ab, die man erst im nächsten Schritt erhält. Wir ordnen den vereinbarten Weg neu und prüfen, welche Entscheidungen tatsächlich voneinander abhängen.
Vor der Entwicklung braucht es eine gemeinsame Grundlage
Alle haben dieselbe Anforderung gelesen, stellen sich aber andere Abläufe vor. Der klickbare Prototyp zeigt Übergänge und Rückmeldungen, damit ihr diese Unterschiede vor der Entwicklung besprechen könnt.
So gehen wir vor.
Aufgabe und Geräteklasse festlegen
Wir legen eine zentrale Aufgabe und die Geräteklasse fest. Darauf stimmen wir die bis zu fünf Screens oder Zustände ab. Mehrere unabhängige Abläufe gehören nicht in diesen Umfang.
Informationsfolge und Wireframes erarbeiten
Wir ordnen, welche Informationen und Entscheidungen an den einzelnen Stellen gebraucht werden. Wireframes zeigen diese Struktur; Farben und ein vollständiges Designsystem arbeiten wir damit nicht aus.
Interaktionen verbinden und übergeben
Wir verbinden die vereinbarten Screens oder Zustände zu einem klickbaren Prototyp und kommentieren Interaktionen und offene Annahmen. Eine gebündelte Überarbeitung ist enthalten. Der Prototyp ist keine fertige Anwendung.
Nach der Übergabe
Gehe den Prototyp mit einer konkreten Aufgabe durch, etwa einer Terminverschiebung. Prüfe, welche Angaben du brauchst und woran du erkennst, dass die Auswahl übernommen wurde. Halte offene Fragen direkt am betreffenden Screen fest.
Für eine spätere visuelle Ausarbeitung eines Seitentyps ist der UI-Refresh verwandt. Bereits gelieferte Strukturarbeit wird dabei nicht nochmals als neue Arbeit verkauft. Wenn die Akzeptanz des Ablaufs offen ist, gehört ein Nutzertest in einen eigenen Untersuchungsrahmen.
Notiere die Produktfrage, die du klären möchtest, und den vorhandenen Stand: Idee, Entwurf oder nutzbare Anwendung. Das besprechen wir nach Eingang deiner Anfrage.
Bei Interviews und Tests stimmen wir die Auswahl der Teilnehmenden und den Umgang mit Forschungsdaten vorab ab. Für den ersten Kontakt brauchst du keine personenbezogenen Interviewdaten oder vertraulichen Projektunterlagen.
Begriffe aus der Leistung
Was bedeutet das?
- Wireframe
- Ein einfacher Oberflächenentwurf, der vor allem Anordnung und Inhalt zeigt. Farben und Bilddetails treten zurück, damit sich die Reihenfolge der Informationen prüfen lässt.
- Klickbarer Prototyp
- Ein Entwurf mit verbundenen Ansichten, in dem man einen Ablauf ausprobieren kann. Eingaben und Rückmeldungen werden simuliert; eine echte Datenverarbeitung ist damit noch nicht gebaut.
- Zustand
- Eine Ansicht zu einem bestimmten Zeitpunkt im Ablauf, zum Beispiel ein leeres Formular, eine Fehlermeldung oder die Bestätigung nach einer Eingabe.
Vor deiner Anfrage
Fragen zum Angebot.
Was gehört zur Leistung, was brauchst du dafür und wie geht es nach der Anfrage weiter?
Der Ablauf im Detail →Ist ein Prototyp schon eine funktionierende App?
Nein. Er zeigt den vorgesehenen Ablauf und ausgewählte Interaktionen. Eine Datenbank, verlässliche Speicherung oder andere produktive Geschäftslogik ist damit nicht automatisch vorhanden. Die technische Entwicklung erfolgt in einem eigenen Schritt.
Sind Desktop und Mobil gleichzeitig enthalten?
Das Paket umfasst eine vorab vereinbarte Geräteklasse. Ein Ablauf für Desktop und eine eigenständige mobile Ausarbeitung würden zusätzlichen Umfang erzeugen. Wir wählen den passenden Schwerpunkt anhand des tatsächlichen Nutzungsvorhabens.
Wird der Prototyp auch mit Nutzern getestet?
Ein Nutzertest ist nicht enthalten. Der klickbare Entwurf kann aber als Testgrundlage dienen, wenn Aufgaben und Zustände dafür geeignet sind. Aus der Fertigstellung des Prototyps wird noch keine bestätigte Verständlichkeit oder Akzeptanz abgeleitet.
Was unterscheidet Wireframe und Prototyp?
Ein Wireframe zeigt vor allem Struktur, Informationen und ihre Anordnung. Ein klickbarer Prototyp verbindet Screens oder Zustände zu einem bedienbaren Entwurf. Beides kann unterschiedlich detailliert sein. Entscheidend ist, welche Frage damit für den vereinbarten Nutzungsweg geklärt werden soll.
Sind fünf Screens fünf vollständige Seiten?
Vorgesehen sind bis zu fünf unterschiedliche Screens oder Zustände eines zentralen Weges. Auch ein wichtiger Fehler- oder Bestätigungszustand kann Teil dieser Abgrenzung sein. Welche Zustände benötigt werden, wird vorab vereinbart, statt nur nach URL-Anzahl zu zählen.
Kann die Entwicklung den Prototyp sofort übernehmen?
Der Prototyp liefert eine gemeinsame Grundlage und Übergabehinweise zu Annahmen und Interaktionen. Technische Details und weitere Zustände müssen mit der Umsetzung geklärt werden. Codeentwicklung ist nicht enthalten; ein klickbarer Entwurf ist noch keine produktionsfähige Anwendung.
Wann beginnt die Bearbeitung?
Nutzungsweg, Geräteklasse und Bearbeitungsfenster werden vor Beauftragung festgelegt.
Welche Zugänge werden benötigt?
Ein vorhandenes Produktziel und priorisierte Anforderungen Ein abgestimmter Ablauf und eine ausgewählte Geräteklasse Die fachlichen Regeln und benötigten Inhalte sind ausreichend beschrieben Zugangsdaten gehören nicht in die Anfrage. Details werden erst nach schriftlicher Beauftragung abgestimmt.
Was passiert nach der Übergabe?
Eine schriftliche Rückfragerunde ist enthalten. Welche Analysen, Entwürfe oder technischen Änderungen zum Paket gehören, steht im Leistungsumfang. Zusätzliche Arbeiten stimmen wir mit dir ab, bevor sie beginnen.
Zum Thema weiterlesen
Website bekommt Besuche, aber kaum passende Anfragen
Prüfe, ob dein Angebot verständlich wird, die nötigen Informationen erreichbar sind und dein Formular den nächsten Schritt erklärt.
Zum Ratgeber ↗Verwandte Leistungen
Das könnte ebenfalls passen.
Analyse
Nutzertest · Usability Testing
Finden sich fünf Testpersonen in deinem Produkt zurecht? Wir beobachten sie bei bis zu drei Aufgaben und halten fest, wo sie Hilfe benötigen.