HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die...
Transcript of HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die...
![Page 1: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/1.jpg)
HCI 15Einführung in die Mobile Usability
… am Beispiel der Android UX
![Page 2: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/2.jpg)
Quelle: www.redant.com – Whitepaper "Going Mobile"
MitdemiPhonebeganneinemobileRevolution
![Page 3: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/3.jpg)
Mobil – was ist anders?
• Gerät mit Identität (und Status)
• Multi-Media-Computer in der Hosentasche
• bezahlbar und verfügbar für jeden
• Apps - unbegrenzte Möglichkeiten für jeden erschließbar
• Alltagsgegenstand – jeder hat Anforderungen
• Konkurrenz um UX: Das Gerät ist so gut wie seine Apps!
![Page 4: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/4.jpg)
FOKUS AUF USER EXPERIENCE
• Das kleine Gerät soll nicht als unterlegen empfunden werden
• sondern als cleverer, flexibler, angepasster, universeller
• und vor allem persönlicher!
![Page 5: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/5.jpg)
Android Creative Vision – Design Guidelines
http://developer.android.com/design/get-started/principles.html
![Page 6: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/6.jpg)
Android Design Guidelines: Simplify my Life
v Keep it brief
v Pictures are faster than words
v Decide for me but let me have the final say
v Only show what I need when I need it
v I should always know where I am
v Never loose my stuff
v If it looks the same, it should act the same
v Only interrupt me when it is important
![Page 7: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/7.jpg)
Android Design Guidelines: Make me Amazing
v Give me tricks that work everywhere
v It's not my fault
v Sprinkle encouragement
v Do the heavy lifting for me
v Make important things fast
![Page 8: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/8.jpg)
Google Material Design
![Page 9: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/9.jpg)
Mobil – was ist anders?
• Kleines Display – Interaktion muss neu entwickelt werden
• Verschiedene Display-Größen, von Phone bis Tablet
• Responsive Design
• Netzverbindung intermittierend
• Seamlessness
• Telefon hat Vorrang – Unterbrechungen
• Texteingaben sind kompliziert
• Viele Sensoren für zusätzliche Informationen (z.B. GPS)
• Kamera, Lautsprecher und Mikrophon immer verfügbar
• Verschiedene Benutzergewohnheiten :
• Haltung: Cradled, Single-Handed, Double-Handed
![Page 10: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/10.jpg)
INTERAKTIONSDESIGN FÜR KLEINE GERÄTE
Kleine Geräte
• Optimale Nutzung des kleinen Screens
• Nahtlose Einpassung in das IT-Erlebnis
• Sensoren einbeziehen
• Vorteile gegenüber den großen Geräten entwickeln
à Weniger ist mehr
Konnektivität im Zentrum• Unkomplizierte Verbindungen:
• WLAN, NFC, Bluetooth• Seamlessness
• Überbrückung von Verbindungswechseln und -störungen
![Page 11: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/11.jpg)
Responsive Design
![Page 12: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/12.jpg)
(Android-) Interaktionsdesign
• Grundlayout für Screens
• Menü-Alternativen
• Android-Gesten
• Touch First – Eingaben
• Android-UI-Patterns
• Screen Use – Navigation, Übergänge, Orientierung
![Page 13: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/13.jpg)
Android UI
![Page 14: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/14.jpg)
Android Common App UI:- Keine Menüs!
• 1. Main Action
Bar
2. View Control
3. Content Area
4. Split Action Bar
![Page 15: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/15.jpg)
MENÜ-ALTERNATIVEN
• Kein Gesamtmenü
• Keine Sitemap
• Reduktion durch Kontextualisierung
• Aktionsmöglichkeiten nur dort, wo sie gebraucht werden
• Tab-Konzept für Contentbereich (View Control)
• Anzeigen in Kurzform, expandierbar
• Long Press und Burger-Menüs für kontextbezogene Aktionen
• Zusätzliche Action Bar oder Side Drawer für ständig verfügbare Aktionen.
![Page 16: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/16.jpg)
Android UI: Menu-Alternative View Control
![Page 17: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/17.jpg)
Android UI: Menu-Alternative Kategorien
Thumb Fixed
![Page 18: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/18.jpg)
Android UI: Menu-Alternative Shortcut/Details
![Page 19: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/19.jpg)
Menüalternative Side Drawer
![Page 20: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/20.jpg)
Menu-Alternative: Action Bar Overflow
![Page 21: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/21.jpg)
Kontextsensitiv: z.B. Longpress und Kontext-Overflow
Cloud Computing
![Page 22: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/22.jpg)
Kontextsensitiv: z.B. Pop Ups
![Page 23: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/23.jpg)
Mobile UI-Patterns
www.mobile-patterns.com/galleries
![Page 24: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/24.jpg)
GESTEN- UND SENSORSTEUERUNG
• Multi-Touch-Gesten
• Vorzug für "natürliche" Gesten (unpräzise Positionierung)
• Nutzung weiterer Sensoren
• Schütteln
• Neigen
• Umdrehen/Anlegen
• Klopfen
• Nutzung impliziter Informationen
• Helligkeit
• GPS
• Umgebungsgeräusche
![Page 25: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/25.jpg)
Android UI: Basi Touch Gestures 2013
Mehr ist möglich: http://www.lukew.com/touch/
![Page 26: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/26.jpg)
Android Touch Mechanics 2015
Das hat sich viel weiter entwickelt...
![Page 27: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/27.jpg)
TOUCH FIRST – UNKOMPLIZIERTE EINGABEN• Vermeidung der virtuellen Tastatur• Auswahllisten:
• Skala (Zahlen), Spinner, Slider• Picker (Aufzählungstypen, Listen, ...)• Autovervollständigung (Text)• Kontextlisten, z.B. Kürzlich, Häufig, ...
• Tastaturalternativen • Spracheingabe• Wischeingaben, z.B. Swype• Bilder oder Videos als Daten
• Sensornutzung • GPS, Kamera (Texterkennung, QR-Codes)• NFC
![Page 28: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/28.jpg)
Touch First - Spinner
![Page 29: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/29.jpg)
Touch First: Pickers
![Page 30: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/30.jpg)
Touch First: Sliders
![Page 31: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/31.jpg)
Nutzung von Kontextinformationen
• Kontextinformationen nutzen, um Eingaben zu sparen
• Aktuelles Datum
• Aktueller Ort
• Kontakte, Termine, Reiseroute, Ankunftzeit, Flugnummer, ...
• Das bedeutet Zugriff auf Apps und Sensoren
• verzichtbare Optimierungen!
• Ausschluss ermöglichen!
• Oder Freigabemöglichkeit einblenden
![Page 32: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/32.jpg)
NAVIGATION
• Navigation muss topologisch verständlich sein
• kleiner Anzeigebereich (Ausschnitt, Schlüsselloch)
• verstehbare Anordnung:
• welchen Ausschnitt sehe ich?
• "Wo" liegen die anderen Sichten, wie komme ich dahin?
• Navigationskonzept:
• Topologie
• Navigationshandlungen (Klicken, Wischen, ...)
• Übergänge (harter Wechsel, zentrale Überlagerung, seitliches
Hineinschieben,...
![Page 33: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/33.jpg)
Ursprüngliches Android-Navigationskonzept:Master-Detail-Relation
![Page 34: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/34.jpg)
Weitere übliche Informations-Architekturen
HierarchieFilterliste
Thumbnails
Schachtelung Registerkarten Dashboard
http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
![Page 35: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/35.jpg)
Übergänge
http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/
![Page 36: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/36.jpg)
Multi-Pane Layout
• Infos sind logisch in Zeilen und Spalten angeordnet.
• Handy navigiert darüber wie ein Sichtfenster.
• Wischgesten als natürliche Navigation.
![Page 37: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/37.jpg)
Multi Pane Layout:Überblick und Responsives Design:
Smartphone
Tablet
![Page 38: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/38.jpg)
Multi-Pane-LayoutSwipe in Detail
![Page 39: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/39.jpg)
Multi-Pane-Layout Yahoo-Wetter-App
![Page 40: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/40.jpg)
Multi-Pane-Layout Postkarten-App
Empfänger
oder als handschrift-licherText
Ihr Grußtext
Ihr Text
Absender
Versandoptionen
Freimachung
Bildfreigabe
Warenkorb
Summe
zur Kasse
![Page 41: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/41.jpg)
ZUSAMMENFASSUNG
• Fokus auf User Experience
• Interaktionsdesign für kleine, verbundene Geräte
• Keine Menüs – nur kontextbezogene Aktionen
• Gesten- und Sensorsteuerung
• Touch First – unkomplizierte Eingaben
• Topologisches Navigationskonzept
![Page 42: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/42.jpg)
10 Tipps für die App-Gestaltungwww.redant.com/articles/ten-tips-for-mobile-ux
1. Fang ganz von vorn an
2. Erkenne deine Benutzer
3. Beachte die 80/20-Regel
4. Gestalte aufgabenbezogen
5. Mach es einfach
6. Respektiere die Plattform
7. Nutze implizite Information
8. Entwirf unterbrechungs-stabil
9. Plane kontinuierliche Verbesserungen
10. Nutze Best Practices und deine eigene Erfahrung
![Page 43: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/43.jpg)
Fazit
• Mobile Interaktion hat und entwickelt eigene Interaktionsformen:
• Verzicht auf Menüs
• Gestensteuerung
• Nutzung von Sensoren
• Touch Input
• Sliding und Ebenenschichtung
• Topologisches Navigationskonzept
• Kriterien sind Übersicht, Handhabbarkeit und SPASS J
Bild: pixabay
![Page 44: HCI 15 Einführung in die Mobile Usability - schmiedecke · 2018-01-02 · Einführung in die Mobile Usability … am Beispiel der Android UX . Quelle: ... •Apps -unbegrenzte Möglichkeiten](https://reader033.fdokument.com/reader033/viewer/2022050106/5f4430cefee24c0d9b5dae44/html5/thumbnails/44.jpg)
Mobil bleibt spannend -
Viel Spaß beim Umsetzen J