Top 5 Frontend-Lösungen im Einzelhandel - 2020

Die Menschen sind zunehmend loyal gegenüber Einzelhändlern, Produkten, Marken und Geräten, die einen echten Mehrwert ohne Reibungsverluste und ohne Stress bieten. 63% der US-Kunden geben an, dass sie ihre persönlichen Daten mit einem Unternehmen teilen würden, das ein großartiges Gesamterlebnis bietet.  

Und in der heutigen Zeit Welt, Daten das neue Gold. 

Viele Technologien können dem Einzelhandel helfen, eine hohe Kundenzufriedenheit zu erreichen. Zufriedenheit. In diesem Eintrag werde ich mich auf folgende Themen konzentrieren  a wichtiges Feld, das als Vermittler dientzwischendem Backend-Code der in der Cloud gespeichert ist, und einem menschlichen vor einer a Bildschirm: Benutzeroberfläche (UI). 

 

Angebot Ckunden ein Great Experience und Tsie werden Buy Mmehr.

 

Dein Recht, UI - also der Frontend-Teil der Software - kann helfen Unternehmen zu schaffen a großartiges Kundenerlebnis zu schaffen und die daraus resultierenden Vorteile zu nutzen; laut einer Studie, geben 82 % der leistungsstärksten Unternehmen an, dass sie der menschlichen Erfahrung im Zusammenhang mit digitaler und technischer Technologie große Aufmerksamkeit schenken [PwC]. 

Technische Lösungen die die Geschwindigkeit und den Komfort erhöhen, Freundlichkeit und Wissen - unbestreitbar Kernforderungen der Verbraucher - kann helfen Unternehmen zu verbessern die Art und Weise Menschen interagieren mit ihre Marke. Und es ist besonders wichtig wichtig im Jahr 2020 auf dem neuesten Stand zu sein, da die Erwartungen der Kunden ständig steigen.  

Im Einzelhandel sind UI-Lösungen ein Bereich, in dem viele Unternehmen scheitern. Wenn Sie denken dies gilt auch für Ihr Unternehmen - keine Sorge! - h ierist eine Liste von die Top 5 modern frontend Technologien und Technikenvon uns handverlesen, die wird Ihnen helfen großartige Schnittstelle Erfahrung in Einzelhandel und eCommerce täglich.

 

 

1. Einzelne-Seite Anwendungen 

In den 90er Jahren war es üblich, dass Webseitens fast eine Minute lang zu laden. Diese Zeiten sind natürlich längst vorbei, aber auch heute noch sind einige klassischen Web-Lösungen wie Multi-Page-Anwendungen nicht in der Lage, ihre Inhalte sofort bereitzustellen. 

Die Antwort auf diese Frage sind Einzelseitige Anwendungen; im VergleichmVergleich zu normalen Webseiten, SPAs erzeugen keine weißen Blitze auf dem Bildschirm - das Ergebnis des Ladens zusätzlicher Inhalte - sondern navigieren den Benutzer zwischen den Seiten mit a reibungslos, ungestörten Fluss. Und als Bonus ersparen Sie den Aufschlägen etwas Arbeit! SPA's  sind in der Lage neue Inhalte zu laden, ohne erfrischend, denn alles - bedeutet HTML-Auszeichnungs, Styling und JavaScript-Codee - ist vorgeladen mit der Hauptseite.

 

Was technisch Problem wird damit löst im Einzelhandel? 

• Seite wird neu geladen
  Nach einem Klicking auf a Link (Produkt Name, zum Beispiel) die Kernstück des der Anwendung's UI ist bereits heruntergeladen, also nur die Text und Bilder sind fehlen (aund sogar diesie kann im Voraus heruntergeladen werden unter Verwendung des vorhergesagten Cache, also produkt Details can sofort geliefert werden). 

• F Peitsche der leeren Seite
  Anders als bei der monolithischen Architektur, das Blättern zwischen Seiten in SPA kann glatt sein wie Drehen Seiten in a Katalog. 

• Ladezeiten
  Herunterladen der gesamten Seites jedes Mal a Benutzer klicken Sies auf a Verbindung ist streng korreliert mit monolithische Anwendungen. Entkopplung  frontend-Code mit Backend-Seiten spart Zeit und die bei jedem Klick erforderliche Übertragung. 

 

Was sind die Auswirkungen auf das Geschäft? 

• Team Skalierbarkeit und schnellere Bereitstellung
  Entkoppelte Architektur ermöglichts zu zwei Teile der Software durch unabhängige Teams zu lieferns. 

• Mehrkanalige Unterstützung
  REST (oder andere) API in der Cloud eingerichtet kann wiederverwendet werden für andere Geräte oder Anwendungen. Zum Beispiel, s ame Cloud API's c an verwendet werden, um Desktop-, mobil- Web als auch native mobile Anwendungen.  

  

Was ist die wahrscheinlich Auswirkungen auf den Kunden? 

• Reduzierung von Stress korreliert mit Verzögerungen
  Laut eine Erricson Bericht, Nutzer, die von Netzwerkverzögerungen betroffen sind, stehen unter ähnlichem Stress, wie wenn sie...  a Horrorfilm!  

• P alter Übergänge verursachen weniger Müdigkeit
  Ein menschliches Gehirn mag keine Leereiness. Wann immer esist ein Fehlen eines reibungslosen Übergangs zwischen Zustand A und B, das Gehirn muss es analysieren. Nach eine Konstante use von a Software die nicht so geschmeidig ist, werden wir müde. TDeshalb sind Übergänge und Animationen so wichtig für die Schaffung großartiger Erlebnisse - sie erleichtern der Geist. 

 

2. Mikro Frontends 

Die zweite Lösung auf unserer Liste, Micro Frontends, sind eine architektonischen Ansatz, inspiriert von der Microservices-Architektur. Die Hauptidee besteht darin, den Monolithen in kleinere Teile zu zerlegen, die unabhängig voneinander an  erstellen größeres Ganzes. Dies ermöglicht es Unternehmen, Anwendungen in Domänen zu unterteilen, die ihre Geschäftsbereiche widerspiegeln  und die Arbeit auf mehrere Teams zu verteilen, ohne die Lieferkette zu verlangsamen. 

 

Welches technische Problem wird damit löst im Einzelhandel? 

• Unabhängiger Einsatz
  Ähnlich wie bei Microservices, unabhängige Bereitstellung von Mikro frontendet ist die Schlüssel. Dies reduziert den Umfang einer bestimmten Bereitstellung, die  auch reduziert das damit verbundene Risiko. 

• Flexibilität der Technologien
  Jedes Mikro Vorderseite can geschrieben werden mit verschiedenen Toolsgeschrieben werden, je nach den Bedürfnissen. Zum Beispiel, React ist am besten für komplexe Visualisierungen, und Angular Form Builder vollbringt Wunder mit Formularen und Validierungen. 

• Einfachheit in großem Maßstab
  Diese kleineren Codebasen sind in der Regel einfacher und leichter zu arbeiten für Entwickler. 

 

Was sind die Auswirkungen auf das Geschäft? 

• Inkrementelle Upgrades
  Um zu vermeiden, dass die Nachteileeiner vollständigen Neuprogrammierung zu vermeiden, ziehen wir es vor, die beißen die alte Anwendung Stück für Stück abzubauen und in der Zwischenzeit unseren Kunden weiterhin neue Funktionen zu liefern, ohne von dem Monolithen belastet zu werden. 

• Autonome te a ms
  Die Teams haben die volle Verantwortung für alles, was sie brauchen, um ihren Kunden einen Mehrwert zu bieten. Das ermöglicht ihnen, schnell und effektiv zu handeln.
  
• Einfache Bereitstellung neuer Funktionen
  Autonomes Team, das sich auf Funktionen konzentriert, die nicht durch andere Teams oder den monolithischen Bereitstellungszyklus blockiert werden. 

 

Was ist die wahrscheinlich Auswirkungen auf den Kunden? 

• Nein direkt Auswirkungen , aber...
  Domain fokussierte Teams sollte gewährt werden ein besseres Verständnis für die Bedürfnisse der Benutzer - als Ergebnis, Spieling Benutzer Erwartungen zu erfüllen, sollte einfacher sein.  

 

3. Server-Seite Rendering 

Diese Lösung generiert als Reaktion auf die Navigation den vollständigen HTML-Code für eine Seite auf dem Server. Dies vermeidet zusätzliche  Rundreisen für das Abrufen von Daten und das Erstellen von Vorlagen auf dem Client, da dies erledigt wird, bevor der Browser eine Antwort erhält. Da die Seitenlogik und das Rendering auf dem Server ausgeführt werden, muss nicht viel JavaScript an den Client gesendet werden, was zu einer schnellen Time to Interactive (TTI) beiträgt. Dies ist sinnvoll, denn mit Server  Rendering, sind Sie wirklich nur Text und Links an den Browser des Benutzers senden. Dieser Ansatz kann für ein breites Spektrum von Geräten gut funktionieren s und Netzwerk Bedingungen und erschließt interessante Browser-Optimierungen (wie, zum Beispiel, Streaming Document Parsing).  

 

Welches technische Problem löst es löst im Einzelhandel? 

• I ndexierung von SPA-Seiten durch Suchmaschinen
  Heutzutage, Google Seiten mit JavaScript indizieren, aber die Ergebnisse sind besser, wenn der Inhalt schneller sichtbar ist - aund es gibt noch andere beliebte Suchmaschinen die man im Auge behalten sollte
  

• Rendering Seitenvorschauen für soziale Medien
  Server-Seite Rendering ermöglicht die Indizierung aller Seiteninhalte, die im Gegensatz zu SPA aufgrund von Ressourcenbeschränkungen für Crawler nicht zugänglich sind. Wenn Google Crawler können dynamische Seiten indizieren, doch dies war bei Kanälen wie Twitter, Facebook und LinkedIn. 

 

Was sind die Auswirkungen auf das Geschäft? 

• M odere Verkehr
  Indexation durch Suchmaschinen ist ein Weg, um lassen die Welt dass Ihr Unternehmen existiert.

• Erhöhte Konversionsrate
  Eine Verzögerung von einer Sekunde auf mobilen Geräten kann senken. Konversionsraten sogar um 20% senken. 

 

Was ist die wahrscheinlich Auswirkungen auf den Kunden? 

• S Suchen Sie nach Inhalten mit Suchmaschinen
  Eine bessere Indexierung bietet die Möglichkeit, direkte Links, die tief in der Seitenstruktur versteckt sind, in den Ergebnissen anzuzeigen. So können Benutzer direkt von der Suchmaschine zur Produktseite navigieren.  

• Bessere Erfahrung beim ersten Besuch
  Der erste Eindruck zählts. Dortist ein starker Zusammenhang zwischen Ladezeiten und Menschen's perctung eines Unternehmens. 

 

4. Progressive Webanwendungen 

A progressive Webanwendung verwendet die neuesten Technologien, um das Beste aus beide Web und mobile Anwendungen. It kann beschrieben werden als Website basierend auf modern Web-Technologien die Werke wie ein einheimisch app.  

Neueste Browser Weiterentwicklungen und die Verfügbarkeit von Cache- und Push-APIs have Webentwickler in die Lage versetzt es zu ermöglichen Benutzern die Installation von Webanwendungen auf auf ihrem Startbildschirm zu installieren, Push-Benachrichtigungen zu erhalten und sogar offline zu arbeiten. 

Lesen Sie mehr über das faszinierende Thema der Progressive Web Apps in diesem Artikel von Damian Kowalski !

 

Welches technische Problem im Einzelhandel wird damit gelöst? 

• O ffline Unterstützung
  Möglichkeit, geladene Ressourcen zwischenzuspeichern (d.h. alle Produkte in durchsuchten Kategorie, Reisedetails) und greifen Sie später ohne Internetzugang auf sie zu. 

• Push-Benachrichtigungen
  Benachrichtigungen können lokal durch eine geöffnete Anwendung ausgelöst werden, oder sie können vom Server an den Benutzer "gepusht" werden, auch wenn die Anwendung nicht läuft.
  

• Speicherung
  Verwendung von IndexedDB das ist eine lNoSQL-Speicheranwendung im großen Maßstab ist in der Lage so gut wie alles im Browser des Benutzers speichern. 

• Plattformübergreifende Entwicklung
  Eine Codebasis für alle Plattformen und Betriebssysteme ist kostengünstig und reduziert den Arbeitsaufwand erheblich. 

 

 

Was sind die wahrscheinlichen Auswirkungen auf das Geschäft? 

• Starker Anstieg der Konversionen
  Lassen wir die Zahlen sprechen. A l eading UK Bekleidungsmarke - George.com - erhöhte Konversionsrates um 31% mit PWA; Indien's größte Ticketing-Firma - BookMyShow's - erhalten eine Steigerung von 80%. Alibaba +76%, 5miles.com +30%, Flipkart +70%. Und es gibt viele, VIELE weitere Beispiele - zu viele für diesen Eintrag, der Sie sollten auf jeden Fall Sie diese Lösung in Betracht ziehen sollten!  

• Bessere Benutzerbindung
  PWA ist ein fehlendes Teil seinzwischen Responsive Web und nativen Anwendungen. Es 's eine einfach zu bedienende Channel, attraktiv für Menschen die die keine Lust haben native Anwendungen installieren wollen. Wenn a Benutzer besucht a Web-App a Paar von mal, ersie/er wird aufgefordert werden eine Abkürzung erstellen auf dem Startbildschirm des Geräts. Viele Fälle zeigen, dass Benutzersitzungen länger sind mit mehr Seitenaufrufen und Absprungraten sind oft unter. 

 

Was ist die möglichen Auswirkungen auf den Kunden? 

• Aussehen und Gebühr der nativen Anwendung l
  Die meigentliche Idee hinter PWA's ist es, eine a einheimisches Aussehen und Gefühl.  

• Möglichkeit zum offline zu browsen
  Eigentümer der Anwendung haben die volle Kontrolle über Cache. Dies bedeutets, die, zum Beispiel, alle die Informationen, die zum Durchsuchen benötigt werden den Produktkatalog mit begrenzter Netzwerkverbindung
  

• Anwendung Shortcuts
  PWAs müssen nicht installiert werden, instatt die Browser kann zeigen die Anregung zu hinzufügen eine Abkürzung auf dem Startbildschirm (und, zusätzlich, users kann dies auch manuell tun). 

• Empfang von Push-Benachrichtigungen
  Ähnlich wie bei nativen Anwendungen können Kunden Benachrichtigungen über Neuigkeiten, Angebote und Aktionen erhalten, die vom Server ausgelöst werden.

 

5. Systeme entwerfen 

Und nicht zuletzt: eine Lösung, die eine gemeinsame Designsprache einführt, um ein konsistentes und skalierbares Kundenerlebnis zu gewährleisten.  

Outputs von Design Systems definieren Blöcke - ausgehend von Token und Komponenten bis hin zu Molekülen und der endgültigen Entwurf. Es  minimiert (oder eliminiert sogar) Produkt Unstimmigkeiten und stellt sicher dass alle Komponenten gleich aussehen, egal in welchem Kontext sie verwendet werden werden verwendet werden.  

Mit der Fähigkeit zur Skalierung durch hochgradig wiederverwendbare und konfigurierbare Komponentens, schafft es eine solide Grundlage für E-Commerce-Lösungen, die White-Label-Systeme und Personalisierung unterstützen. 

Da wir gerade in dieser Gegend sind... Denken Sie daran PGS ist ein Experte für lieferningkompletteDesign-Systeme!

 

 

Welches technische Problem wird damit im Einzelhandel gelöst?  

• Nicht wiederverwendbare Komponenten
  Wenn es um technische Lösungen geht, stellt sich in der Regel die Frage, was in der Zukunft wiederverwendet werden kann.
  Design-Systeme basieren auf Atomic Design-Prinzipien und erzwingen die Verwendung von atomaren UI-Komponenten - ein integraler Bestandteil von etwas Größerem.  

• Wiederholbare Arbeit
  Es ist Zeitverschwendung, neue Produkte von Grund auf neu zu erstellen und ähnliche Benutzeroberflächenkomponenten in verschiedenen Teams zu implementieren.Wenn Projekte wachsen, ist es besser, eine gemeinsame Bibliothek von UI-Komponenten zu erstellen und diese als Bausteine in vielen Lieferteams zu verwenden. 

• Inkonsistenz in der UX
  Schließlich neigt die isolierte Entwicklung jeder Komponente zu Inkonsistenzen, was in diesem Fall kein Problem darstellt.   

 

Was sind die wahrscheinlichen Auswirkungen auf das Geschäft?  

• Nahtlose Konsistenz für alle Markenprodukte
  Verschiedene Teams können neue Produkte und Dienstleistungen erstellen und dabei auf eine gemeinsame Bibliothek zugreifen, um Ihr Angebot mühelos und elegant zu erweitern, ohne dass Sie die Designs abgleichen müssen. 

• Optimierte Lieferung
  Eine shared UI-Bibliothek spart Zeit bei der Entwicklung.Zusätzlich,guidelines von Basiselementen wie Schriftarten,Farbenurs, Auffüllungen(aber auch Tonfall und Sprache der Kommunikation)spart Zeit, die Teams zum Nachdenken brauchen aufwiezu Produkte bauen.  

• Whitelabeling
  ZentralisierteInformationenüberdie Aussehen und Funktion einer einer App ist eine gute Chance verschiedene Versionen zu testen und kann sowohl für A/B-Tests als auch fürWhitelabeling solutions. 

• Hyper Personalisation bereit
  Atomare Architektur zusammen mit genau definierten Regeln sind eine sind ein idealer Ausgangspunkt für die Erstellung erweiterter Anpassungen von Layouts und Komponenten auf der Grundlage von Benutzerpräferenzen.Die Verwendung von Big Data und maschinellem Lernen macht es möglich, eineine gut abgestimmte UI. 

• Bessere Zusammenarbeit in Teams
  Die communikation zwischen verschiedenen Fachgebieten und Teams in Design Systems ist einfach besser. 

 

Was ist diewahrscheinlichAuswirkungen auf den Kunden? 

• Nahtlose Erfahrung
  Heute's Kundenkommunizieren mit ihrer Marke über verschiedene Kanäle und erwarten auf jedem dieser Kanäle eine ähnliche Erfahrung.Using Design Systems hilft zusätzlich behalten Sie den Ton und Stimmevon Kommunikation einheitlich. 

• Personalisierte Erlebnisse
  Der Wandel hin zu personalisierten, zielgerichteten Einkaufserlebnissen ist größtenteils verursacht durch die Entwicklung von Marketing-Technologie ; mit maschinellem Lernen, künstlicher Intelligenz und biometrischer Identifizierung, die alle immer stärker miteinander miteinander integriert werden, das Design Systems Elemente sind die Bausteine für digitale Produkte, die können ein persönliches Inhalt und Layout.  

  

Zusammenfassung 

Und das ist unsere Liste! Denken Sie daran, dass t ies sind nur einige der Technologien die wir ausgewählt haben, aber es gibt auch noch viele andere interessante Frontend-Lösungen da draußen. Was derzeit erwähnenswert ist  Web und mobileLösungen teilen sich mehr und mehr TechnologienDies ist eine großartige Gelegenheit, Ihre Benutzeroberfläche zu verbessern.  

Es gibt auch viele andere Möglichkeiten, mit Benutzern zu interagieren.Gartner hat sogar einen Begriff für eine Denkweise, bei der es um Berührungspunkte und nicht um Kanäle geht: Multiexperience.Wenn Sie es noch nicht getan haben, mlesen Sie unbedingt mehr über diesen Trend in einem unsererfrüheren Artikels!  

 

Quellen: 

https://www.thinkwithgoogle.com/intl/en-gb/advertising-channels/mobile/milliseconds-earn-millions-why-mobile-speed-can-slow-or-grow-your-business/ 

https://developers.google.com/web/showcase 

https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report 

Erfahrung ist alles: So machen Sie es richtig, PWC 

2019 UK Customer Experience Excellence Analyse, KPMG 

Top 30 Progressive Web App Benchmarking Studie, Divante