{"id":132269,"date":"2016-09-20T09:52:58","date_gmt":"2016-09-20T07:52:58","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/content-pillars\/iterative-design-process-at-tokbox\/"},"modified":"2025-02-18T13:11:26","modified_gmt":"2025-02-18T12:11:26","slug":"iterative-design-process-at-tokbox","status":"publish","type":"tc_content_pillar","link":"https:\/\/www.justinmind.com\/de\/kunden\/tokbox","title":{"rendered":"Web- und Mobile-App-Prototyping bei TokBox: iteratives Design in Aktion"},"content":{"rendered":"

Das Prototyping von Web- und mobilen Anwendungen bei TokBox bekam einen kr\u00e4ftigen Schub, als Interaction Designer Charles Diggs das richtige Prototyping-Tool fand.<\/h2>\n

Als Charles Diggs feststellte, dass er sich wegen scheinbar einfacher \u00c4nderungen an der Benutzeroberfl\u00e4che in vermeidbaren Nacharbeiten verstrickte, war es f\u00fcr ihn und sein TokBox-Team<\/a> an der Zeit, ein neues Prototyping-Tool zu finden.<\/p>\n

In seiner Arbeit als Visual Interaction Designer im San Francisco Outfit entwirft Charles Benutzerinteraktionen und visuelle Systeme f\u00fcr die webbasierte Kommunikationsplattform von TokBox.<\/p>\n

Aber er war frustriert, als seine Bem\u00fchungen, kleine \u00c4nderungen an den Bildschirmen in seinen Web- und App-Prototypen vorzunehmen, zu stundenlangen Neuentw\u00fcrfen der Bildschirme f\u00fchrten. Schlie\u00dflich fand er das Problem heraus – das Prototyping-Tool, das er verwendete, verf\u00fcgte nur \u00fcber wenige dynamische Funktionen und bot keine ausreichende Kontrolle \u00fcber die feinen Details seiner mobilen App- und Web-Prototypen. <\/p>\n

„Meine Erfahrungen mit anderen Prototyping-Tools waren nicht schlecht. Das Problem f\u00fcr mich war jedoch, dass ich zur\u00fcck in das Designprogramm springen musste, um Korrekturen vorzunehmen, und dann wieder zur\u00fcck in das Prototyping-Tool zu springen.“<\/p><\/blockquote>\n

Prototyping-Tools:<\/strong> Flexibel erstellen, iterieren und testen<\/strong><\/h3>\n

Das Prototyping ist ein fester Bestandteil des iterativen Design-Workflows von TokBox. Um die Ideen des Teams in ansprechende Endnutzererlebnisse umzuwandeln, setzen Charles und seine Designerkollegen von Anfang an Prototyping-Tools f\u00fcr Web- und mobile Anwendungen ein. <\/p>\n

Zun\u00e4chst werden die Ideen mit schnellen Klickversuchen validiert, um dann zu High-Fidelity-Prototypen \u00fcberzugehen, die dann auf der Grundlage von Feedback und Tests iteriert werden.<\/p>\n

Dieser iterative und schnelllebige Arbeitsablauf bedeutete, dass Charles dringend ein effizienteres Prototyping-Tool ben\u00f6tigte, mit dem er schnelle Iterationen in Echtzeit durchf\u00fchren konnte, ohne bei der Bearbeitung von Bildschirmen oder Abl\u00e4ufen von vorne beginnen zu m\u00fcssen.<\/p>\n

Charles stand kurz davor, ein Anmeldesystem f\u00fcr eine globale Navigations-Website einzuf\u00fchren. Er wusste also, dass er eine L\u00f6sung f\u00fcr seine Workflow-Probleme finden musste.<\/p>\n

\n
\n

Laden Sie Justinmind noch heute herunter und l\u00f6sen Sie Ihre Design-Workflow-Probleme!<\/span><\/h2>\n

Kostenlos herunterladen<\/a><\/p>\n

\n<\/div>\n

Ein Prototyping-Tool, mit dem Sie in doppelter Zeit bauen, iterieren und verbessern k\u00f6nnen<\/strong><\/h3>\n

Da schlug ihm ein Kollege vor, Justinmind auszuprobieren. Nach ein wenig Online-Recherche stellte er fest, dass es seinen Bedarf an einem Prototyping-Tool mit der Art von zeitsparenden Funktionen<\/a> erf\u00fcllen k\u00f6nnte, die es Designern erm\u00f6glichen, durch schnelle Iteration und Zusammenarbeit im Team, neue Ideen in greifbare Designs umzusetzen. <\/p>\n

„Ein Kollege hat mir von Justinmind erz\u00e4hlt. Ich hatte ein Projekt vor mir, f\u00fcr das ich Prototypen erstellen musste, also habe ich es mir angesehen. Es schien definitiv meinen Bed\u00fcrfnissen zu entsprechen.“<\/p>\n

Jedes alte Prototyping-Tool kann den Auftraggebern oder Kunden<\/a> die Botschaft vermitteln, wenn Sie gen\u00fcgend Stunden darauf verwenden. Aber oft sind diese Stunden kostbar, und jeder wei\u00df, dass der Schl\u00fcssel zu einem erfolgreichen Web- oder App-Prototyp in der F\u00e4higkeit liegt, schnell zu designen und auf der Grundlage von Benutzertests und Feedback zu iterieren. <\/p>\n

Charles war der Meinung, dass Justinmind dabei helfen k\u00f6nnte, aber er musste das Prototyping-Tool noch auf die Probe stellen.<\/p>\n

\"tokbox<\/a><\/p>\n

Web- und Mobile-App-Prototyping<\/strong> bei TokBox: der Prozess erkl\u00e4rt<\/strong><\/h3>\n

Wie hat das Team also Justinmind in seinen etablierten iterativen Design-Workflow eingef\u00fchrt? Grunds\u00e4tzlich durchlaufen die Designideen von TokBox mehrere Durchl\u00e4ufe eines vierstufigen Prozesses. Charles hat f\u00fcr uns die Dinge auf den Punkt gebracht: <\/p>\n

Brainstorming von Inhaltsideen<\/strong><\/p>\n

Beim Kick-off bewertet das Team alle Ideen und destilliert die besten Vorschl\u00e4ge zu einer optimalen L\u00f6sung, die alle Ziele erf\u00fcllt. Sobald sowohl die urspr\u00fcngliche Idee als auch die Ziele vereinbart sind, werden schnelle Click-Throughs erstellt. <\/p>\n

Ein schnelles Click-Through Mockup erstellen<\/strong><\/p>\n

An dieser Stelle kommt Justinmind f\u00fcr TokBox ins Spiel. Die vorgefertigten UI-Bibliotheken und funktionalen Widgets bedeuten, dass ein Durchklicken schnell und einfach ist. <\/p>\n

Mit der Rapid-Design-Methode von Justinmind wird eine schnelle Designl\u00f6sung erstellt, die den Gesamtfluss zeigt. So k\u00f6nnen Sie leicht beurteilen, ob Ihr Web- und Mobile-App-Prototyp den Anforderungen und Erwartungen entspricht.<\/p>\n

Team\u00fcberpr\u00fcfungen von Prototypen<\/strong><\/p>\n

Als n\u00e4chstes kommt das Feedback des Teams. Nat\u00fcrlich sind unterschiedliche Auffassungen dar\u00fcber, wie die UI und UX des Prototyps funktionieren sollten, ein gesunder Teil des Iterationsprozesses, daher nimmt sich TokBox Zeit f\u00fcr interne Feedback-Sitzungen. <\/p>\n

W\u00e4hrend dieser \u00dcberpr\u00fcfungen geben die am Projekt Beteiligten konstruktive Kommentare ab. Wenn dann Inhalt und Funktionen validiert sind, kann ein detaillierter HiFi-Prototyp gebaut werden.<\/p>\n

Naturgetreue Prototypen<\/strong><\/p>\n

Dieser High-Fidelity-Web- oder App-Prototyp besteht aus detaillierten Bildschirmen und einer 360\u00b0-Ansicht des endg\u00fcltigen Benutzererlebnisses und erm\u00f6glicht Tests, Iterationen und Validierungen in Echtzeit.<\/p>\n

In diesem Stadium bedeutet das Mapping und Testen des Designs, dass Designer und Pr\u00fcfer einen \u00dcberblick \u00fcber das gesamte UI und den Ablauf haben und sich auf die Details konzentrieren k\u00f6nnen, um die Einhaltung der Anforderungen und Spezifikationen auf allen Ger\u00e4ten sicherzustellen. „Das ist ziemlich cool“, sagt Charles. „Ich finde es wirklich toll, wie man einen mobilen Prototyp auf dem tats\u00e4chlichen Mobiltelefon mit der App erleben kann.“ <\/p>\n

Schlie\u00dflich kann der Prototyp der mobilen App oder des Webs dem gesamten Produktteam sowie den Entwicklern und Interessengruppen vorgestellt werden, bevor die Entwicklung beginnt.<\/p>\n

Verwandeln Sie Mockups mit sofort einsetzbaren UI-Elementen schnell in Prototypen f\u00fcr Web- und mobile Anwendungen.<\/h3>\n

Nachdem er zu Justinmind gewechselt hatte, stellte Charles fest, dass er robustere Prototypen erstellte und mit anderen teilte, \u00fcber die er mehr kreative Kontrolle aus\u00fcbte.<\/p>\n

Dank eines vereinfachten, aber leistungsstarken Prototyping-Prozesses konnte er die Entwicklungsspezifikationen und -anforderungen selbst bei schnellen Iterationen im Auge behalten. Er baute den Anmeldeprozess f\u00fcr sein neues Projekt auf und konnte ihn viel schneller validieren als zuvor.<\/p>\n

Durch die Verwendung vollst\u00e4ndig interaktiver Web- und App-Prototypen in der Anfangsphase des Projekts erhielt Charles fr\u00fches und relevantes Feedback, das es ihm erm\u00f6glichte, den Kurs zu \u00e4ndern und sicherzustellen, dass er die richtige Richtung einschlug.<\/p>\n

Er entschied sich schon in der fr\u00fchen Phase des Designs f\u00fcr Inhalt, Funktion und Treue und konnte so \u00dcberarbeitungen vermeiden, bevor er die Entwicklungsphase erreicht hatte.
\n„<\/p>\n

Justinmind unterscheidet sich von anderen Prototyping-Tools, die ich bisher verwendet habe, durch das hohe Ma\u00df an kreativer Kontrolle, das dem Designer zur Verf\u00fcgung steht.<\/p><\/blockquote>\n

“
\nMit einem Prototyping-Tool, das Drag & Drop, voll funktionsf\u00e4hige UI-Elemente und Karten sowie datengesteuerte Funktionen bietet, konnte TokBox ein hohes Ma\u00df an Interaktivit\u00e4t bei Prototypen erreichen.<\/p>\n

Justinminds umfangreiche UI-Bibliotheken mit gebrauchsfertigen Elementen und funktionalen Widgets bedeuten, dass interaktive Web- und App-Prototypen nur ein paar Klicks entfernt sind – die harte Arbeit ist bereits getan, so dass sich die Designer auf das Design und nicht auf das Prototyping konzentrieren k\u00f6nnen. So sollte es auch sein. <\/p>\n

\"Tokbox-web-mobile-prototyping\"<\/a><\/p>\n

Mehr \u00fcber Charles<\/strong><\/p>\n

Charles Diggs ist bei TokBox f\u00fcr visuelles Interaktionsdesign zust\u00e4ndig und konzentriert sich auf die Entwicklung herausragender visueller Interaktionen und visueller Systeme. In dieser Funktion erstellt er oft High-Fidelity-Prototypen und testet die Erfahrungen der Endbenutzer. Bevor er zu TokBox wechselte, arbeitete Charles Diggs in den Bereichen Gesundheit, Wellness und Unterhaltung f\u00fcr Unternehmen wie Mattel und Disney. <\/p>\n

Mehr \u00fcber TokBox<\/strong><\/p>\n

TokBos aus San Francisco ist eine webbasierte Kommunikationsplattform, die „eine branchenf\u00fchrende Reihe von Funktionen f\u00fcr die Echtzeitkommunikation“ bietet.<\/p>\n

Mit Funktionen wie Mobil- und Web-SDKs, Archivierung, Text-Chat, Messaging, Analysen, Firewall-Traversal, Unterst\u00fctzung f\u00fcr mehrere Parteien, Internet Explorer-Plugin und vielem mehr kann die Open-Source-Plattform Unternehmen dabei helfen, die Videoanforderungen ihrer Kunden zu erf\u00fcllen.<\/p>\n

Laden Sie Justinmind zusammen mit seinen vorgefertigten UI-Bibliotheken herunter und finden Sie heraus, ob Sie Ihren iterativen Design-Workflow verbessern k\u00f6nnen. Sie k\u00f6nnen es kostenlos ausprobieren. <\/em><\/p>\n

\"Kostenlos<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Das Prototyping von Web- und mobilen Anwendungen bei TokBox bekam einen kr\u00e4ftigen Schub, als Interaction Designer Charles Diggs das richtige Prototyping-Tool fand. Als Charles Diggs feststellte,…<\/p>\n","protected":false},"author":5,"featured_media":132270,"parent":0,"menu_order":0,"template":"","tags":[8597,8585,8574,8582,8593,8598,8608],"content_category":[],"class_list":["post-132269","tc_content_pillar","type-tc_content_pillar","status-publish","has-post-thumbnail","hentry","tag-anforderungen","tag-fallstudie","tag-vermaechtnis","tag-mobil","tag-prototyping-tool-de","tag-software-prototyping-de","tag-web-prototyping-de"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tc_content_pillar\/132269"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tc_content_pillar"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/tc_content_pillar"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tc_content_pillar\/132269\/revisions"}],"predecessor-version":[{"id":132287,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tc_content_pillar\/132269\/revisions\/132287"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media\/132270"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=132269"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=132269"},{"taxonomy":"content_category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/content_category?post=132269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}