unicef.ch Prozesse Schritt für Schritt

In folgenden Abschnitten stellen wir das Spenden- sowie das Formular-Widget vor.

Das Spenden-Widget kann für einen spezifischen oder einen allgemeinen Zweck verwendet werden. Bei der allgemeinen Spenden gibt es hier die Möglichkeit, wiederkehrende Spenden zu tätigen.

Allgemeine Spende
Spenden Widget mit Hero

Die Checkout Seite der hier als Beispiel demonstrierten Allgemeinen Spende zeigt zuerst ein Hero Element mit der Zusammenfassung der Spende mit dem Zweck und Betrag. Der Betrag kann hier bei Bedarf noch angepasst werden.

Checkout Seite Allemeinge Spende

Unterhalb des Hero Elementes kann zwischen den verschiedenen Zahlungsmöglichkeiten gewählt werden. Ebenfalls ist hier eine Seitenspalte mit Kontaktinformationen eingeblendet.

Auswahl Zahlungsmittel

Die Kontaktangaben sind auf eine persönliche Ansprache und dem E-Mail sowie der Telefonnummer reduziert und somit von den Adressangaben getrennt.

Formular für Kontaktangaben

Unterhalb der Kontaktangaben folgt die Adressangabe. Bevor die Checkbox für die allgemeinen Geschäftsbedingungen angekreuzt wird, kann diese noch anhand der Verlinkung aufgerufen und gelesen werden.

Adresse mit Spende Übermitteln Button

Das Formular-Widget wird in verschiedenen Grössen verwendet. Für ein simples Kontaktformular mit wenigen Schritten wie hier im Beispiel wird das schmalste Widget verwendet.

Formular Narrow

Für komplexere Formulare können für die Gruppierung von Feldern ein Grid-Layout und Abschnitte mit Titel als Schritte unterteilt werden.

Gruppierungen im Formular

Der gesamte Inhalt der Unicef Website wurde für verschiedene Geräte optimiert, damit sie den Bedürfnissen der mobilen Users gerecht wird.

Mobile Design von unicef.ch
Mobile Design von unicef.ch
Mobile Design von unicef.ch
Mobile Design von unicef.ch

Mehr über die verschiedenen Elemente, die bereits im UNICEF Relaunch 2018 umgesetzt wurden. Dabei wurden in einem ersten Schritt alle Inhaltsseiten auf Drupal 8 migriert und komplexere und tief integrierte Prozesse (wie z.B. Spenden) auf der bestehenden Drupal 7 Website erhalten.