---
tags: sfgz
---

# Ideation – Inputs, Erarbeitung und Austausch

### Studierende

* Patrick Hoffmann
* Chantal Hugentobler
* Selina Strickler
* Joshua Kehrer
* Nina Diem
* Dominique Willi
* Desiree Lanz
* Samira Duddek
* Flavia Tschumi
* Stefanos Gjotas
* Sam Diener
* ~~Dan Büschlen (abgemeldet)~~
* ~~Cheyenne Wäny (abgemeldet)~~

## Try. 15 min · Einzelarbeit · breakout rooms

* Erstelle ein [Google-Spreadsheet](https://www.google.com/sheets/about/)
* Formatiere alle Zellen etwa **quadratisch**
* Zeichne **drei** unterschiedliche Versionen eines «UI-Elemente», welches einen **Fortschritt** von etwa 60 % anzeigt
* Pro Element dürfen maximal **zwei Farben verwendet** werden
* 📄 Screenshot je Version mit Name und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Patrick

The classic one :)
> [name=signalwerk] yes! but still a good one

The classic one 2
> [name=signalwerk] uuh fancy. warum eigentlich als ring? 🤔

weil...*

* ... es sonst so aussieht, als hätte ich den Kuchen selbst gebacken :D

Selina
> [name=signalwerk] cheaating 🤓

Mit diesem Quadrat stelle ich den Ladevorgang, in diesem Beispiel 60%, auf eine spielerische Art vor.
> [name=signalwerk] nice!

Klassischer Ladebalken (schwarz ist keine Farbe ;) )

## Stefanos

Klassische Variante (Horizontal)

Klassische Variante (Vertikal)
> [name=signalwerk] good! Vorteile/Nachteile zu horizontal?

Classic with a twist :)

## Joshua

Ladestatus mit Punkten dargestellt (hier Quadrate, auf Grund der Pixel)


Klassischer Ladebalken


Ladeanzeige innerhalb eines Würfels mit verschiedenen Graustufen

## Nina Diem

Für alle Versionen gilt:
grün = bereits geladen, grau = ausstehend

V1
Klassischer Ladebalken. Man bekommt «live» mit, wie weit der Ladestatus ist.
Vielleicht auch etwa langweilig, da sehr weit verbreitet – aber mein Favorit, da klar & simpel!


V2
Durch die einzelnen Schritte kommt einem die Ladezeit kürzer vor. Man hat aber eher das Gefühl nicht «live» mitzubekommen wie weit der Ladestatus ist.


V3
«Kreativere» Version, die man auch kennt. Ähnelt einer einer Uhr bzw. Wie sich die Zeiger einer Uhr bewegen.

#

## Dominique
Standard Ladebalken

Standard aber etwas breiter

Wellenartiger Ladebalken

## Flavia

V1
Der Versuch eines Kreises

V2
Standard Balken

V3
Balkenversion à la Windows anno dazumal


## Chantal
V1
augelockerte Kreisversion mit einzelen Punkten

V2
Balkenversion (der Klassiker)

V3
Balkenversion in die Höhe, Eindruck wie bei einem sich füllenden Glas

## Desi

V1

V2

V3

## Samira
Version 1

Version 2
Version 3

### Nachtrag Birchermüesliquartier
Quelle: [Wikipedia](https://de.wikipedia.org/wiki/Siedlung_Stadtrain)

* Johannisbeeren (Johannisstrasse)
* Apfel (Apfelweg)
* Birnen (Birnenweg)
* Aprikosen (Aprikosenweg)
* Pfirsich (Pfirsichweg)
* Kirschen (Kirschenweg)
* Quitten (Quittenweg)
* Keine Haferflocken 😭

Fehlsichtigkeit im Browser (Chrome) prüfen:


## Repeat. · Gruppe · breakout rooms

* Farben: Weiss/Schwarz
* Muss für RTL und LTR genau gleich funktionieren
* Zwei Versionen pro Gruppe
* 📄 Screenshot mit Name und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Selina, Samira, Desi, Nina
V1
Vertikaleer Ladebalken ohne Leserichtung. Jedoch nicht so Platzsparend.

> [name=signalwerk] yes! nun zwei Farben aber passt schon... 🤓

V2
Spielerische Variante, die alle verstehen.

> [name=signalwerk] Finde ich nach wie vor eine tolle Lösung

## Stefanos, Chantal, Josh
V1
Ladebalken welcher von rechts und links in die Mitte geht

> [name=signalwerk] oh wow... 😲 🤯

V2

## Flavia, Patrick, Dominique
V1
Senkrechter Ladebalken

V1b

V2
«Uhr»

## Try. 30 min · Gruppe · breakout rooms

* 📄 Name und Recherche in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)
* Wireframe
* Macht eine Kalenderansicht eines Tages
* Darin eingetragen ein Flug von Zürich nach London
* Flug-Start: 13:15 Uhr (Zürich)
* Flug-End: 13:45 Uhr (London)
* 📄 Screenshot mit Name und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Selina, Patrick, Chantal
**Recherche:**

Kalenderübersicht (Hover)
> [name=signalwerk] hmm... recht gut gelöst!

Pop-up (Details)

**Wireframe:**

## Josh, Desi, Samira

**Recherche**

> [name=signalwerk] Problem gelöst. Aber schwierig zu verstehen oder?


> [name=signalwerk] I'm lost... Was wird hier wohl wirklich angezeigt? San Francisco in MESZ


**Wireframe**
- Zeitzonen sind aufgeführt
- Farbliche Markierung
- Notizen

> [name=signalwerk] Ich mag die Notation der Zeitzone. Aber ist natürlich für eine «Normale Person»™ auch recht schwierig. Aber ich finde es gut angedacht!

## Flavia, Stefanos, Nina
Recherche

Wireframe

## Sam, Dominique

Recherche

Wireframe

## Repeat. · Gruppe · breakout rooms

* Wireframe
* Kalenderansicht umbauen zur Darstellung der Dauer
* Kalenderdarstellung ergänzt um zwei Termine
* A – Start: 27. 10. 2024 – 0:59 Uhr (Zürich)
* A – End: 27. 10. 2024 – 2:01 Uhr (Zürich)
* B – Start: 27. 10. 2024 – 2:59 Uhr (Zürich)
* B – End: 27. 10. 2024 – 3:01 Uhr (Zürich)
* 📄 Screenshot mit Name und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Josh, Samira, Desi
**Wireframe 2**

## Sam, Dominique
**Wireframe 2**

## Flavia, Stefanos, Nina

## Chantal, Patrick, Selina
**Wireframe 2**
Szenario A

Szenario B

### Stefan
Lösungsansatz aus einem vergangenen Projekt:


## Try. 15 – 20 min · Gruppe · breakout rooms

* 📄 Name und Recherche in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)
* Wählt ein UI-Element aus der Liste und entwerft dies als Wireframe
* Sprachwähler
* Ein-/Aus-Schalter für Darkmode
* Einkaufskorb in CHF & Umrechnung in EUR
* 📄 Screenshot mit Name und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Samira, Chantal, Josh
#### Thema: Darkmode Lightmode Regler
Research

> [name=signalwerk] grundsätzlich ein guter Ansatz. Kann man das noch deutlicher machen? Ihr habt ja noch 6 min :)
> ist nur eine Recherche, noch nicht unser Ergebnis ;)

> [name=signalwerk] 👏

> [name=signalwerk] kann man bei der typo noch zeigen, was gerade aktiv ist? 🤔

### Wireframe V1

## Patrick, Stefanos, Nina

Sprachwähler
* Icon/Pikto = international verständlich
* Wording Sprache in jeweiliger Landessprache


> [name=signalwerk] ich glaube der globus ist ganz gut verständlich 👌


> [name=signalwerk] worin bin ich jetzt, wenn der Darkmode off ist? 🤔

> Im Anti-Darkmode

> [name=signalwerk] nice! ich hoffe es hat was mit schwarzen Katzen zu tun. Büsssiiis 😍

> Verstehe nicht ganz aber Büssis sind immer gut :)

> [name=signalwerk] ich auch nicht, aber viel büsis = viel gut

🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱🐱

> [name=signalwerk] Note: 💯

🙀

## Sam, Flavia
Sprachwähler


> [name=signalwerk] wieviele Sprachen haben wir auf der Welt wohl?! 🤔

## Desi, Dominique, Selina

Recherche

Währungs- und Sprachwähler vereint



## Repeat! · Gruppe · breakout rooms

* [Zieht **eine** Karte](http://brianeno.needsyourhelp.org/)
* Passt die bisher gefundene Lösung an
* 📄 Screenshot mit Name, **Text** und Überlegung in [HackMD](https://hackmd.io/@signalwerk/B1wv2aHqw/edit)

## Patrick, Stefanos, Nina

Sprachwähler
> Karte: «Do something boring.»
Anmerkung der Gruppe: Was bedeutet «langweilig» in diesem Kontext?

> [name=signalwerk] 😴

* Multiple Choice erinnert mich immer an Online-Formulare oder Prüfungen

* Langweilige Auswahl, die einfach nur funktioniert

## Josh, Samira, Chantal

Karte: Use "unqualified" people
-> Visuelle Unterstützung (Mond & Sonne) für unqualifizierte User


## Sam, Flavia

Unsere Karte:
Abandon normal instructions

V1

«Scroll through» im Web

V2

Keine Auswahl möglich

## Selina, Dominique, Desi

Unsere Karte: «Adding on»