UX / UI – Konzept & Entscheidungen
Die Informationsarchitektur wurde auf schnellen Zugang zu den Kernfunktionen optimiert. Bestehende Events führen direkt zum Videochat, während neue Events flexibel nach Datum, Rezept oder Freunden erstellt werden können. Die personalisierbaren Avatare (Noms) dienen als Markendifferenzierung und schaffen eine freundliche Atmosphäre. Animationen bestätigen Nutzeraktionen wie Event-Erstellung.
<div data-tn style="display:none">Umfrage: Kochverhalten</div><style>
.nn-pie-wrap{width:100%;background:#FFFFFF;padding:24px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.nn-pie-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.nn-pie-sub{font-size:13px;color:#6B7280;margin:0 0 24px;text-align:center}
.nn-pie-body{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.nn-pie-chart{width:320px;height:320px;flex-shrink:0}
.nn-pie-chart svg{width:100%;height:100%}
.nn-pie-seg{transition:opacity .2s ease,transform .2s ease;transform-origin:160px 160px;cursor:pointer}
.nn-pie-seg:hover{opacity:0.85;transform:scale(1.04)}
.nn-pie-legend{display:flex;flex-direction:column;gap:10px}
.nn-pie-leg-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;transition:background .2s;cursor:default}
.nn-pie-leg-item:hover{background:#F3F4F6}
.nn-pie-leg-dot{width:12px;height:12px;min-width:12px;border-radius:50%}
.nn-pie-leg-label{font-size:13px;color:#374151;font-weight:500;min-width:110px}
.nn-pie-leg-val{font-size:13px;color:#6B7280;font-weight:600}
.nn-pie-n{font-size:11px;color:#9CA3AF;text-align:center;margin-top:16px}
@media(max-width:640px){.nn-pie-body{flex-direction:column;gap:20px}.nn-pie-chart{width:260px;height:260px}}
</style>
<div class="nn-pie-wrap">
<p class="nn-pie-title">Triffst du dich mit Freunden um zusammen zu kochen?</p>
<p class="nn-pie-sub">Häufigkeit gemeinsamer Kochabende</p>
<div class="nn-pie-body">
<div class="nn-pie-chart">
<svg viewBox="0 0 320 320">
<path d="M 160 160 L 160.0 20.0 A 140 140 0 0 1 230.0 38.8 Z" fill="#E8967F" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="0"><title>Jede Woche: 3 (8,3%)</title></path>
<path d="M 160 160 L 230.0 38.8 A 140 140 0 0 1 281.2 90.0 Z" fill="#D4725E" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="1"><title>3x pro Monat: 3 (8,3%)</title></path>
<path d="M 160 160 L 281.2 90.0 A 140 140 0 0 1 230.0 281.2 Z" fill="#C0543C" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="2"><title>2x pro Monat: 9 (25%)</title></path>
<path d="M 160 160 L 230.0 281.2 A 140 140 0 0 1 52.8 250.0 Z" fill="#A0432E" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="3"><title>1x pro Monat: 8 (22,2%)</title></path>
<path d="M 160 160 L 52.8 250.0 A 140 140 0 0 1 22.1 135.7 Z" fill="#6B7280" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="4"><title>nie: 5 (13,9%)</title></path>
<path d="M 160 160 L 22.1 135.7 A 140 140 0 0 1 160.0 20.0 Z" fill="#9CA3AF" stroke="#FFFFFF" stroke-width="2" class="nn-pie-seg" data-nn-idx="5"><title>Unregelmäßig: 8 (22,2%)</title></path>
</svg>
</div>
<div class="nn-pie-legend">
<div class="nn-pie-leg-item" data-nn-idx="0"><span class="nn-pie-leg-dot" style="background:#E8967F"></span><span class="nn-pie-leg-label">Jede Woche</span><span class="nn-pie-leg-val">3 (8,3%)</span></div>
<div class="nn-pie-leg-item" data-nn-idx="1"><span class="nn-pie-leg-dot" style="background:#D4725E"></span><span class="nn-pie-leg-label">3x pro Monat</span><span class="nn-pie-leg-val">3 (8,3%)</span></div>
<div class="nn-pie-leg-item" data-nn-idx="2"><span class="nn-pie-leg-dot" style="background:#C0543C"></span><span class="nn-pie-leg-label">2x pro Monat</span><span class="nn-pie-leg-val">9 (25%)</span></div>
<div class="nn-pie-leg-item" data-nn-idx="3"><span class="nn-pie-leg-dot" style="background:#A0432E"></span><span class="nn-pie-leg-label">1x pro Monat</span><span class="nn-pie-leg-val">8 (22,2%)</span></div>
<div class="nn-pie-leg-item" data-nn-idx="4"><span class="nn-pie-leg-dot" style="background:#6B7280"></span><span class="nn-pie-leg-label">nie</span><span class="nn-pie-leg-val">5 (13,9%)</span></div>
<div class="nn-pie-leg-item" data-nn-idx="5"><span class="nn-pie-leg-dot" style="background:#9CA3AF"></span><span class="nn-pie-leg-label">Unregelmäßig</span><span class="nn-pie-leg-val">8 (22,2%)</span></div>
</div>
</div>
<p class="nn-pie-n">n = 36 Teilnehmer</p>
</div>
<div data-tn style="display:none">Umfrage: Lieferdienste</div><style>
.nn-bar-wrap{width:100%;background:#FFFFFF;padding:24px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.nn-bar-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.nn-bar-sub{font-size:13px;color:#6B7280;margin:0 0 8px;text-align:center}
.nn-bar-scale{display:flex;justify-content:space-between;font-size:11px;color:#9CA3AF;margin-bottom:24px;padding:0 20px}
.nn-bar-area{display:flex;align-items:flex-end;justify-content:center;gap:24px;height:280px;padding:0 20px}
.nn-bar-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:80px;height:100%}
.nn-bar-val{display:flex;flex-direction:column;align-items:center;gap:2px;flex-grow:1;justify-content:flex-end}
.nn-bar-count{font-size:20px;font-weight:800;color:#C0543C}
.nn-bar-pct{font-size:11px;color:#6B7280;font-weight:600}
.nn-bar-bar{width:56px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#E8967F 0%,#C0543C 100%);min-height:8px;transition:transform .2s ease,box-shadow .2s ease}
.nn-bar-col:hover .nn-bar-bar{transform:scaleY(1.04);box-shadow:0 4px 16px rgba(192,84,60,0.25)}
.nn-bar-col:hover .nn-bar-count{color:#8B3A28}
.nn-bar-label{font-size:14px;font-weight:700;color:#374151}
.nn-bar-foot{display:flex;justify-content:space-between;font-size:11px;color:#9CA3AF;margin-top:8px;padding:0 20px}
.nn-bar-n{font-size:11px;color:#9CA3AF;text-align:center;margin-top:16px}
@media(max-width:640px){.nn-bar-area{gap:12px;height:220px}.nn-bar-bar{width:40px}.nn-bar-count{font-size:16px}}
</style>
<div class="nn-bar-wrap">
<p class="nn-bar-title">Wahrscheinlichkeit: Kochbox-Service nutzen</p>
<p class="nn-bar-sub">Wenn es in der Nähe einen Kochbox-Abholservice gäbe, wie wahrscheinlich wäre die Nutzung?</p>
<div class="nn-bar-scale"><span>Sehr wahrscheinlich</span><span>Sehr unwahrscheinlich</span></div>
<div class="nn-bar-area">
<div class="nn-bar-col">
<div class="nn-bar-val"><span class="nn-bar-count">15</span><span class="nn-bar-pct">41,7%</span></div>
<div class="nn-bar-bar" style="height:100.0%"></div>
<div class="nn-bar-label">1</div>
</div>
<div class="nn-bar-col">
<div class="nn-bar-val"><span class="nn-bar-count">4</span><span class="nn-bar-pct">11,1%</span></div>
<div class="nn-bar-bar" style="height:26.666666666666668%"></div>
<div class="nn-bar-label">2</div>
</div>
<div class="nn-bar-col">
<div class="nn-bar-val"><span class="nn-bar-count">8</span><span class="nn-bar-pct">22,2%</span></div>
<div class="nn-bar-bar" style="height:53.333333333333336%"></div>
<div class="nn-bar-label">3</div>
</div>
<div class="nn-bar-col">
<div class="nn-bar-val"><span class="nn-bar-count">8</span><span class="nn-bar-pct">22,2%</span></div>
<div class="nn-bar-bar" style="height:53.333333333333336%"></div>
<div class="nn-bar-label">4</div>
</div>
<div class="nn-bar-col">
<div class="nn-bar-val"><span class="nn-bar-count">1</span><span class="nn-bar-pct">2,8%</span></div>
<div class="nn-bar-bar" style="height:6.666666666666667%"></div>
<div class="nn-bar-label">5</div>
</div>
</div>
<p class="nn-bar-n">n = 36 Teilnehmer</p>
</div>
<div data-tn style="display:none">User Flow</div><style>
.nn-fl{width:100%;background:#FFFFFF;padding:28px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.nn-fl-title{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 4px;text-align:center}
.nn-fl-sub{font-size:13px;color:#6B7280;margin:0 0 24px;text-align:center}
.nn-fl-steps{display:flex;flex-direction:column;align-items:center;gap:0}
.nn-fl-step{display:flex;align-items:center;gap:14px;background:#F9FAFB;border-radius:10px;padding:14px 18px;width:100%;max-width:440px;transition:background .2s}
.nn-fl-step:hover{background:#F3F4F6}
.nn-fl-icon{font-size:22px;min-width:36px;text-align:center}
.nn-fl-info h4{font-size:14px;font-weight:700;color:#1A1A1A;margin:0 0 2px}
.nn-fl-info p{font-size:12px;color:#6B7280;margin:0;line-height:1.4}
.nn-fl-arrow{color:#D1D5DB;font-size:18px;margin:4px 0}
</style>
<div class="nn-fl">
<p class="nn-fl-title">User Flow — Kochevent planen</p>
<p class="nn-fl-sub">Vom App-Start bis zum gemeinsamen Kochen per Video</p>
<div class="nn-fl-steps"><div class="nn-fl-step">
<div class="nn-fl-icon">👋</div>
<div class="nn-fl-info"><h4>App öffnen & Nom wählen</h4><p>Avatar (Nom) begrüßt den User — persönlicher Einstieg mit Wiedererkennungswert</p></div>
</div><div class="nn-fl-arrow">↓</div><div class="nn-fl-step">
<div class="nn-fl-icon">📅</div>
<div class="nn-fl-info"><h4>Event erstellen</h4><p>Datum, Uhrzeit und Freunde einladen — oder bestehendem Event beitreten</p></div>
</div><div class="nn-fl-arrow">↓</div><div class="nn-fl-step">
<div class="nn-fl-icon">🍲</div>
<div class="nn-fl-info"><h4>Rezept auswählen</h4><p>Gemeinsames Rezept wählen oder vorschlagen lassen — Einkaufsliste wird automatisch generiert</p></div>
</div><div class="nn-fl-arrow">↓</div><div class="nn-fl-step">
<div class="nn-fl-icon">🛒</div>
<div class="nn-fl-info"><h4>Einkaufsliste nutzen</h4><p>Zutaten abhaken, teilen oder direkt zum Lieferdienst weiterleiten</p></div>
</div><div class="nn-fl-arrow">↓</div><div class="nn-fl-step">
<div class="nn-fl-icon">🎥</div>
<div class="nn-fl-info"><h4>Video-Koch-Session</h4><p>Live-Videocall mit Rezeptanleitung, Timer und Gesten-Steuerung</p></div>
</div><div class="nn-fl-arrow">↓</div><div class="nn-fl-step">
<div class="nn-fl-icon">🎉</div>
<div class="nn-fl-info"><h4>Abschluss & Sharing</h4><p>Ergebnis-Foto teilen, Rezept bewerten, nächstes Event planen</p></div>
</div></div>
</div>
