Kalkulator als Mockup

[BAGZZlash]

Ich bin Mitglied eines Teams, das einen Kalkulator ins Netz bringen wird. Hintergrund ist ein bestehendes Excel-File, bei dem allerlei Dinge eingestellt werden können, und dann werden dazu passende Ergebnisse angezeigt, d.h. Kennzahlen, Grafiken etc.

Dieses Excel-File ist natürlich total nutzerunfreundlich. Stattdessen wird ein Webentwicklerteam die dort hinterlegten Berechnungen nehmen und "im Web" (d.h. in JavaScript und mit ggf. anderen Webtechniken, z.B. Ajax? Keine Ahnung.) neu implementieren, dazu alles mit einem schönen Frontend aufbrezeln usw. Demnächst ist ein Meeting, bei dem "gebrainstormt" werden soll, wie das Ding nachher aussehen wird. Dazu soll jeder Teilnehmer (also auch ich 🙂) sich im Vorfeld ein oder zwei Beispiele im Netz raussuchen, die uns gefallen. Ich stelle mir vor, dass verschiedene Steuerelemente (z.B. Pulldown-Menüs, Slider, Regler, aber auch simple Eingabefelder für Kennzahlen) bedient werden und dann nach einem Klick auf einen "Okay"-Button die Ergebnisse angezeigt werden. Noch schöner wäre es, wenn die Ergebnisse mit auf der Seite wären (z.B. Regler links, Ergebnisse rechts) und sich in Echtzeit anpassen, z.B. die Kurven sich verschieben, wenn man an einem Regler spielt etc.

Nun, wisst Ihr ein paar schöne Seiten, wo sowas in irgendeiner Form realisiert und umgesetzt ist? Lediglich als Inspiration für uns: Es ist völlig egal, was dort berechnet wird, wichtig ist nur, dass das Frontend schön und möglichst DAU-freundlich ist und die Ergebnisse nett aussehen. 😎 Beispielsweise meine ich sowas wie Wolfram Alpha, zumindest das, was man mit dem "Interactive"-Feature der Pro-Version bekommt. Siehe z.B. hier. Schieber, Regler, man verstellt was und sieht das Ergebnis in Form von Zahlen und einer Grafik. Gern mehr davon.

Bin für jeden Link dankbar.

 

[Madman1209]

Hi,

verzeih mir die ketzerische Frage, aber: was genau haben jetzt funktionierende Beispielseiten mit "Mockup" zu tun?

VG,
Mad

 

[BAGZZlash]

Vielleicht verwende ich den Begriff Mockup ja falsch, aber mir geht es eben um "ein komplettes Produkt oder eine Attrappe, die genutzt wird, um Design und/oder (Teil-)Funktionen eines geplanten oder bereits eingeführten Produktes zu demonstrieren", also "ein maßstäbliches Modell [...] bzw. eine Nachbildung zu Präsentationszwecken". Einfach, um mal zu zeigen, wie sowas im Browser aussehen kann.

 

[Mike312]

Wenn es um GUI Prototyping/Mockups geht z.B. https://balsamiq.com/wireframes/ oder https://pencil.evolus.vn/

Edit:
UI Design ist aber nicht "mal eben ein schönes Design entwerfen". Da steckt weitaus mehr dahinter. Siehe Nielsen, Shneiderman etc. Hier ist ein evtl. hilfreicher Blogeintrag zum Thema: https://theblog.adobe.com/4-golden-rules-ui-design/

 

[Emanon]

Das es sowas "fertig" gibt kann ich mir nicht vorstellen - aber das heißt ja auch nichts .
Mit dem kostenlosen Tool InVision Studio solltest Du/Ihr das aber evtl. selbst erstellen können - sieht sogar recht cool aus.

 

[Madman1209]

Hi,

ok, aber es geht dir nicht darum selber so ein Mockup zu erstellen, sondern du suchst lediglich Beispiele - ist das richtig?

Falls ja ist eventuell da was für dich dabei:
ExtJS Kitchen Sink
Bootstrap Examples
TypeForm
ChartJS
uCalc

VG,
Mad

 

[BAGZZlash]

ok, aber es geht dir nicht darum selber so ein Mockup zu erstellen, sondern du suchst lediglich Beispiele - ist das richtig?

Richtig.

ExtJS Kitchen Sink
Bootstrap Examples
TypeForm
ChartJS
uCalc

Ja, da sind schon ein paar gute Sachen dabei, vielen Dank. 🙂

Ich hab' vielleicht zuviel geschrieben. Ich hätte wohl schreiben sollen: "Suche Webseite, wo man was einstellen kann und man dann was sieht". Das kann so blöd sein wie eins der Beispiele oben: Der Konfigurator beim Pizzaservice um die Ecke. Gern mit Bild der Pizza, wo man die Scheiben sieht, wenn man "Salami" anhakt. 😏

Weiteres?