Die Ausgangssituation

User Interface? Ein innovatives Unternehmen aus der Textilbranche wandte sich mit der Frage an _Gemeinsam digital, wie es einen Online- Konfigurator für individuelle Produkte umsetzen kann.

Deshalb hat sich das _Gd-Team vertiefend mit den spezifischen Herausforderungen eines Konfigurators für die Textilbranche beschäftigt. Als Material, dass kofiguriert werden soll, wurde Strick gewählt.

Besonderes Augenmerk wude auf das User Interface, die Nutzeroberfläche gelegt.

Die Herausforderung

Eine Software, die optisch nicht ansprechend und nicht intuitiv bedienbar ist, führt zu einer hohen Absprungrate von NutzerInnen.

Die Herausforderung bestand deshalb darin, ein logisches und benutzerfreundliches User Interface ( Benutzeroberfläche) für den Strick-Konfigurator zu entwickeln und dabei alle technischen Merkmale und Nutzerbedürfnisse zu berücksichtigen. Die einzelnen Prozessschritte sollen während des Konfigurationsprozesses selbsterklärend und dynamisch implementiert sein, damit die Anwendung angenehm zu nutzen ist.

Zudem müssen besondere Designfragen für eine ansprechende Optik einbezogen werden.

Vorgehensweise

Das _GD-Team bewertete Bildbearbeitungstools und andere Konfigurationstools im Web hinsichtlich ihrer Nutzerfreundlichkeit. Außerdem werteten die EntwicklerInnen verschiedene Elemente und Icons von Nutzeroberflächen (Interface Elemente) bestehender Design Frameworks (Design-Vorlagen) aus. Als Ergebnis setzten sie eine erste ausschließlich grafische Visualisierung auf. Diese testeten sie vor der Umsetzung und optimierten sie fortlaufend.

Lösung

Interface Elemente sind nutzergesteuerte Eingabe- und Interaktionsmöglichkeiten, um die Anwendung zu bedienen. Buttons, Hervorhebungen, klickbare Bilder und Veränderungen der Oberfläche können dazu dienen den Nutzenden die Oberfläche zu erklären und bei der Bedienung zu unterstützen.

Deshalb gibt es im Bereich der nutzerfreundlichen Gestaltung von Software, eine Vielzahl an wiederverwendbaren Elementen aus bewährten Open-Source Projekten. Dafür arbeiten sehr viele EntwicklerInnen sowie DesignerInnen zusammen, um die gesammelten Erfahrungen in sogenannte Design-Frameworks aufzunehmen und verfügbar zu machen. Die Design-Frameworks beinhalten bereits vorgefertigte Designs, Icons und Buttons, welche EntwicklerInnen lediglich in die Anwendung integrieren müssen.

Design Frameworks werden von einer Vielzahl großer renommierter Plattformen eingesetzt und gewährleisten einen Wiedererkennungswert in der Oberflächenbedienung.

Beispielhafte Design-Frameworks sind:

  • Bootstrap
  • UI Kit
  • Material Design
  • Kube UI

Die Oberfläche des Strick-Konfigurators entwickelte das _Gd-Team mittels eigens erstellter Design Elemente in Anlehnung an das Design-Framework UI-Kit. Für die von den Nutzenden anklickbaren Werkzeuge verwendeten sie allgemein bekannte Icons aus dem UI-Kit für die Bildbearbeitung.

Verwendung allgemeiner Icons für die Werkzeuge

Ergänzend designte das Team die Icons der Produktpalette innerhalb des Konfigurators.

Design Icons für Produktpalette

Nach mehrmaligem Testen fügten das Entwicklerteam zu jedem Icon auf der Oberfläche ein Wort zur Beschreibung der jeweiligen Schaltflächen hinzu, um die Verständlichkeit für die Nutzenden zu optimieren.

Das UI-Kit von _Gemeinsam digital ist wiederverwendbar und einfach einzusetzen. Interesierte Unternehmen können auch ein eigenes Kit erstellen oder ein vorhandenes auswählen. Bootstrap Icons und Material Design werden im Rahmen von Design-Frameworks sehr häufig benutzt.

Lesen Sie auch, wie eine Produktion in Losgröße 1 möglichst optimiert abläuft und was bei der Wahl der Programmiersprache zu beachten ist.

Suchmaschinen-Stichworte für Lösungsanbieter

  • UI-Elemente
  • UI-Framework
  • Design Bestpractises
  • Konfigurator Oberflächendesign

Art des benötigten Umsetzungspartners/ Dienstleisters

Web-Designer, UI Designer

Komplexität bei der Entwicklung und Einführung der Lösung

Mittel*

*(Die Komplexität kann je nach Anforderungen, Investitionsbedarf, Schulungsbedarf, etc. der Aufgabenstellung stark variieren.)

Dauer der Einführung

2 Monate

Systemkosten für den Betrieb der Lösung pro Monat

ohne*

Investitionskosten für die Lösung

unter 1000 €*

*(Kosten variieren je nach Umfang individueller Elemente. Bei Verwendung purer Standard Elemente aus Design-Frameworks sind die Kosten in der Entwicklung der gesamten Anwendung mit inbegriffen. Bei neuen Designelementen können Kosten für die Erstellung durch einen Designer entstehen. )

Strick Konfigurator User Interface
Konfigurator Strickmuster Berlin
Verwendung allgemeiner Icons für die Werkzeuge
Verwendung allgemeiner Icons für die Werkzeuge
Design Icons für Produktpalette
Design Icons für Produktpalette
Kontaktieren Sie uns.

Bei Fragen und Anmerkungen helfen wir Ihnen gerne weiter. Schreiben Sie uns!

Nicht lesbar? Neues Captcha anfragen. captcha txt

Start typing and press Enter to search