UI-prototyping: Welche Umgebung für eher komplexe Prototypen?

[Audiopulse]

Hey,

ich habe hier in unserem Produktdesignstudio einen Auftrag bekommen unser entworfenes Menülayout als interaktiven Prototypen umzusetzen. Normalerweiße kenne ich solche Aufträge in eher simpel: "Zeige dem Kunden wie er sich durch das UI bewegt - mit welchem Button er z.B. ins Untermenü XY kommt, etc. Einzelne Schalter, Checkboxen etc sind reine Grafiken und wurden einfach erklärt.

In diesem Fall ist das nicht so. Es gibt insgesamt lediglich 3 Buttons mit welchen eine Zahl erhöht bzw. verringert werden und etwa drei Statusanzeigen die An- oder Ausgeschaltet werden sollen. Diese Elemente sollen tatsächlich so funktionieren, dass ich mit hilfe meiner drei Buttons die Zustände der drei Statusanzeigen switchen und die Zahlenanzeige erhöhen bzw. verringern kann. Alle aktiven Elemente sind immer auf dem Display sichtbar und können nicht in Untermenüs versteckt werden, da es sich um ein segmentiertes LCD handeln soll.

Der althergebrachte Weg wäre für jede mögliche Konfiguration des Displays eine Folie zu erstellen - das frisst aber ziemlich viel Zeit und ist recht umständlich, da ich noch keinen Weg gefunden habe wenigstens einen Teil der Arbeitsschritte zu automatisieren.

Hat jemand hier vielleicht manchmal ähnliche Aufgaben und kann mir einen Tipp geben, wie ich das am besten realisiere? Da natürlich alles am Besten bis gestern fertig sein soll müsste das Programm/die Arbeitsumgebung eine sein, die man sich in maximal 1-2 Tagen für soetwas aneignen könnte. :/

Viele Grüße,

Matthias

 

[qed]

Hallo Matthias,

ich bin mir nicht so ganz sicher, ob ich das jetzt wirklich richtig verstanden habe oder nicht.

Du willst also einen "funktionalen" Prototypen für eine UI machen die dann auch wirklich ein Display ansteuert?

Naja wie schauts den mit HTML/JS & Co aus? Gibt ja auch von Adobe brackets wo Du dann auch ggf Designs von der CC übernehmen kannst und die dann verfeinerst.

Grüße

 

[Audiopulse]

Hallo qed, danke für deine Antwort. Für die Kurzversion kannst du einfach am Schluss ab "TL,DR" lesen


ja das ist glaube ich auch verständlich. Ich bin mir selber nicht so ganz sicher ob ich den Auftrag verstehe - ich finde die geforderten Funktionen gehen ein bisschen über einen Prototypen hinaus

Nein, ein Display soll nicht mit diesem Prototypen angesteuert werden, aber das Display auf dem mein UI später angezeigt wird ist ein Custom-segment-LCD. Daher: Es hat keine Pixel sondern vorher bestimmte Flächen die entweder an- oder aus sein können. Flächen können sich auch überlagern, durch die entstehenden Schnittflächen steigt die Zahl der Segmente dann aber schnell an was das Display wieder teurer macht.

Mit anderen Worten: Ich bin nicht so flexibel und muss mich um die Darstellung aller Elemente gleichzeitig kümmern. Ich kann nicht wie bei einem Pixeldisplay bestimmte Anzeigen in einem eigenen Untermenü verstecken und den Kunden dann wie an einem roten Faden durch meine Navigation führen, sondern ich habe für das ganze UI nur einen Screen auf dem ich alle möglichen Konfigurationen zeigen müsste:

1. Temperatur 16 Grad, Heizelement an, Belüftung an, Power 1/5
2. Temperatur 16 Grad, Heizelement an, Belüftung an, Power 2/5
...
6. Temperatur 16 Grad, Heizelement an, Belüftung aus, Power 1/5
...
11. Temperatur 16 Grad, Kühlelement an, Belüftung an, Power 1/5
...
16. Temperatur 16 Grad, Kühlelement an, Belüftung aus, Power 1/5
20. Temperatur 16 Grad, Kühlelement an, Belüftung aus, Power 5/5

... etc. etc. - Und das ganze dann jeweils nochmal für die Temperaturen 17 Grad bis 29 Grad

Versteht mans jetzt? Ich müsste einzelne Elemente auf einer Zeichenfläche unabhängig voneinander verändern können. Die Temperaturanzeige z.B. mit einer Plus- und Minus-taste herauf und herunterregeln.
Andernfalls muss ich über 200 Folien erstellen was mir wenig wirtschaftlich erscheint.

TL,DR:

Mit einem Programm wie Brackets, Edge Animate/Flash oder Java könnte man sowas sicher machen, leider wissen wir im Team wenig bis garnichts über Programmierung - wir sind eher fit mit CAD, Photoshop, Illustrator und verschiedenen Fertigungsprozessen (-> Produkt- / Industriedesigner) und müssen jetzt einen Weg finen wie wir das vom Zaun brechen. Ich dachte ich frage hier einfach mal, ob jemand zufällig ein Wunder parat hat.


Von allem was ich bisher gesehen habe scheint Adobe xD ein heißer Tipp zu sein (Mit Muse bin ich nicht ganz ans Ziel gekommen) - allerdings werde ich da glaube ich auch nicht in der Lage sein alle Anzeigelemente einzeln so zu regeln, dass sie ihren jeweiligen Status behalten. Ich denke ich werde es so machen dass der Kunde immer eine Funktion einstellen kann (z.B. Temperatur von 16°C bis 29°C regeln), dieser Wert aber wieder auf einen Startwert (z.b. 22°C) zurückspringt wenn er die Funktion verlässt.
Jedenfalls sehe ich nirgendwo eine Möglichkeit das schnell und einfach so zu realisieren dass ein Prototype sich gewisse Zustände merkt, ohne dass Programmierung zum Einsatz kommt.

So - und jetzt entschuldige ich mich für die Text-mauer.

 

[qed]

Hi,

ist entschuldigt aber eine wirkliche Antwort kann ich Dir dann nicht auf Deine ursprüngliche Frage geben.

qed

 

[Sargas]

Hab das bisher so nicht gebraucht, aber ein Kommilitone hat mal einen Vortrag gehalten, an den ich bei deinem Problem gerade denken muss. Ging um den Workflow von Sketch zur App. Er hat da das Programm "Pixate" benutzt, hab gerade gesehen, dass das nicht mehr entwickelt wird, gibts aber wohl noch einen Download(?)

Als Alternativen nannte er "Origami" und "Framer", müsstest du mal schauen was die genau können und ob dir das weiterhilft.

 

[Fugel]

Ich arbeite sehr oft mit Adobe XD, man ist sehr schnell eingearbeitet. Leider kommst du bei XD aber auch nicht um viele Folien drumrum. Ich denke aber auch das die Anforderung vom Kunden da sehr weit vom Prototyp weg gehen.

 

[Audiopulse]

Dank euch für die vielen Antworten

Mittlerweile sind ein paar Tage ins Land gegangen und ich kann Einiges berichten:

www.Proto.io ist meine Lösung

Mit Adobe Xd (Experience Design) hab ich auch zuerst angefangen. Adobe hat man halt und es kann schon manche Vorteile bieten in der Programmfamilie zu bleiben.

Allerdings ist Xd halt noch recht frisch und ziemlich schlank. Viel mehr als das altbekannte durch-zig-Folien klicken kann man da noch nicht machen. Ist halt angenehmer als Powerpoint durch die Zeichenfläche auf der die Folien schön nebeneinander angeordnet werden können und das einfache ziehen der Links.

Danach hab ich mich weiter umgesehen und bin über Mockplus, InVision und Marvel bei Proto.io gelandet. Dieses Browserbasierte Programm tut sich leider manchmal schwer mit vielen Objekten auf einer Seite und laggt dann ziemlich herum ... könnte aber auch mein Browser sein.
Dafür bietet es ziemlich reichhaltigen Umfang und auch ein paar vereinfachte programmier-elemente wie Conditional Logic (Wenn beides "true" ist, dann tue dies...) und Variablen setzen. Die Einarbeitung hat bei mir etwa 2 Tage gedauert - die Einsteigervideos auf Youtube erklären aber alles ganz gut.

Durch letzteres konnte ich z.B. einen "Container" mit meiner Temperaturanzeige erstellen, für die ich einfach für jede mögliche Temperatur einen "State" erstellt habe und kann den dann auf einer einzelnen Folie rauf- und runterklickern. Ne Menge Arbeit gespart.


Ausserdem kann man den fertigen Prototypen als HTML-verzeichnis herunterladen und offline nutzen. Hab ich bei den anderen Apps entweder vermisst oder übersehen.