{"id":1126,"date":"2016-09-06T11:01:22","date_gmt":"2016-09-06T09:01:22","guid":{"rendered":"http:\/\/usersnap.com\/de\/blog\/?p=1126"},"modified":"2016-10-07T15:49:27","modified_gmt":"2016-10-07T13:49:27","slug":"prototyp-website","status":"publish","type":"post","link":"https:\/\/usersnap.com\/de\/blog\/prototyp-website\/","title":{"rendered":"So entwickeln Sie einen Prototyp f\u00fcr Ihre Website oder Anwendung!"},"content":{"rendered":"<p>Einen Prototypen zu entwickeln, also ein Beispiel oder Modell, geh\u00f6rt heute zu jeder Software-Entwicklung dazu. Aber was sind die Vorteile eines Prototyps, im Vergleich zur einfachen Konzepterstellung? Und wie schafft man den Schritt von Prototyp zum fertigen Produkt?<\/p>\n<p><!--more--><\/p>\n<h2>Das bringt die Entwicklung eines Prototyps<\/h2>\n<p>Ein Prototyp kann verschiedene Formen haben und kann sehr wenig entwickelt sein oder sehr genau. Wikipedia definiert einen Prototypen folgenderma\u00dfen:<\/p>\n<blockquote><p>A <b>prototype<\/b> is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming.<\/p><\/blockquote>\n<p>Der Vorteil eines Prototyps ist, dass dieser schneller ver\u00e4ndert werden kann und \u00c4nderungen weniger Geld und Zeit kosten. Die Entwicklung eines Prototyps sollte daher am Beginn einer Produktentwicklung stehen.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1132\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/Bildschirmfoto-2016-09-06-um-10.14.22.png\" alt=\"prototyp entwicklungen\" width=\"714\" height=\"124\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/Bildschirmfoto-2016-09-06-um-10.14.22.png 2214w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/Bildschirmfoto-2016-09-06-um-10.14.22-300x52.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/Bildschirmfoto-2016-09-06-um-10.14.22-1024x178.png 1024w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/Bildschirmfoto-2016-09-06-um-10.14.22-140x24.png 140w\" sizes=\"(max-width: 714px) 100vw, 714px\" \/><\/p>\n<p>Ein Prototyp kann auch daf\u00fcr genutzt werden, Investoren \u00fcber ein Produkt zu informieren oder erste User-Erfahrungen zu sammeln. Ein Prototyp sollte ein konkretes und nicht ein abstraktes Problem beantworten.<\/p>\n<h2>Prototyp + User Testing = bessere Produkte?<\/h2>\n<p>Die Entwicklung von Prototypen kann Ihnen helfen, ein gro\u00dfartiges Produkt zu entwickeln.<\/p>\n<p>Es ist eine vergleichsweise kosteng\u00fcnstige M\u00f6glichkeit, eine Idee zu testen und erstes User Feedback zu erhalten. Wenn ein Prototyp durchf\u00e4llt, ist dies weitaus weniger schlimm, als wenn ein fertiges Produkt scheitern w\u00fcrde, da die Investition weitaus geringer war.<\/p>\n<p>Au\u00dferdem hat man bei einem Prototyp die M\u00f6glichkeit, diesen vollst\u00e4ndig zu \u00fcberdenken und neu zu konzeptionieren, was bei einem fertigen Produkt eher schwierig ist.<\/p>\n<p>Prototypen sind eine gute Gelegenheit erstes User Feedback zu sammeln und darauf zu reagieren. So schlimm wie hier dargestellt, sollte es allerdings besser nicht werden \ud83d\ude09<\/p>\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/3o7rbZcPqPW1D1ldRK\" width=\"480\" height=\"268\" frame allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2>High fidelity und low fidelity Prototypen<\/h2>\n<p>Wenn man sich mit Prototypen in der Software-Entwicklung besch\u00e4ftigt, st\u00f6\u00dft man auf die Begriffe \u201chigh fidelity\u201d und \u201clow fidelity\u201d, die auch mit \u201chigh tech\u201d und \u201clow tech\u201d gleichgesetzt werden k\u00f6nnen.<\/p>\n<p>Ein low-fidelity Prototyp kann z. B. die Konzeptionierung mittels Papier und Stift oder Post-its sein. Oftmals ist der low fidelity Prototyp auch der Ausgangspunkt f\u00fcr den high fidelity Prototyp.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1131\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/sketch-low-fi-high-fidelity-website-mockups.png\" alt=\"sketch-low-fi-high-fidelity-website-mockups\" width=\"496\" height=\"247\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/sketch-low-fi-high-fidelity-website-mockups.png 696w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/sketch-low-fi-high-fidelity-website-mockups-300x150.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/sketch-low-fi-high-fidelity-website-mockups-140x70.png 140w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/p>\n<p>Der high-fidelity Prototyp hingegen pr\u00e4sentiert das zuk\u00fcnftige Produkt auf high-tech-Ebene. Designs werden hier erstellt und oftmals ist der high-fidelity Prototyp vollst\u00e4ndig funktionsf\u00e4hig. Dies bedeutet jedoch auch deutlich h\u00f6here Kosten und Zeitaufwand, die in einen high-fidelity Prototyp einfliessen. Nat\u00fcrlich darf man low und high fidelity Prototypen als zwei Instanzen begreifen, sondern vielmehr als zwei Enden eines Spektrums, in dem es viele Zwischenm\u00f6glichkeiten gibt.<\/p>\n<h2>Wie soll Ihr Prototyp aussehen?<\/h2>\n<p>Bevor Sie beginnen, einen Prototypen zu entwickeln, sollten Sie folgende Fragen beantworten:<\/p>\n<ul>\n<li>Wie weit soll mein Prototyp entwickelt sein?<\/li>\n<li>Wieviel Budget und Ressourcen will ich f\u00fcr die Entwicklung des Prototyps aufwenden?<\/li>\n<li>Wer ist an der Entwicklung beteiligt?<\/li>\n<li>Wie wird der Workflow und die interne Kommunikation aussehen?<\/li>\n<li>Wie erhalte ich erstes User-Feedback?<\/li>\n<li>Welche Tools stehen mir daf\u00fcr zur Verf\u00fcgung<\/li>\n<\/ul>\n<h2>Die richtigen Tools<\/h2>\n<p>Gerade wenn Sie einen high fidelity Prototypen entwickeln, brauchen Sie die richtigen Tools f\u00fcr Ihr Projekt.<\/p>\n<p>Je nachdem ob Sie eine Mobile App oder eine Browser-Anwendung entwickeln, k\u00f6nnen die Tools, die Sie ben\u00f6tigen, sich stark unterscheiden. Auch abh\u00e4ngig davon, an welchem Punkt Sie sich in der Entwicklung befinden, ben\u00f6tigen Sie unterschiedliche Tools.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-1127\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/workflow-website-mockups-prototypes-tools.png\" alt=\"workflow-website-mockups-prototypes-tools\" width=\"500\" height=\"389\" srcset=\"https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/workflow-website-mockups-prototypes-tools.png 700w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/workflow-website-mockups-prototypes-tools-300x233.png 300w, https:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/09\/workflow-website-mockups-prototypes-tools-140x109.png 140w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Ich kann Ihnen daher diesen Artikel empfehlen, in dem Sie eine gute \u00dcbersicht \u00fcber Tools wie Briefs, Atomic.io oder Axure erhalten. Hier k\u00f6nnen Sie sehen, wie verschiedene Tools hinsichtlich Geschwindigkeit, high fidelity, User Testing und Customer Support abschneiden.<\/p>\n<h2>User Feedback<\/h2>\n<p>User Testing war fr\u00fcher der letzte Schritt in der Software-Entwicklung. Das hatte zur Folge, dass User-Feedback erst ganz zum Schluss eingearbeitet werden konnte und teilweise kostspielige \u00c4nderungen nach sich zog. Das hat sich inzwischen zum Gl\u00fcck ge\u00e4ndert und User Feedback ist nun ein Teil eines jeden Design-Prozesses.<\/p>\n<p>Wenn Sie ein Anwendung entwickeln, kann es Sinn machen User bereits zum Prototypen nach Feedback zu befragen. Alles was Sie in diesem Schritt lernen, ersparen Sie sich nachher mit aufw\u00e4ndigen \u00c4nderungen.<\/p>\n<h2>Fazit<\/h2>\n<p>Die Vorteile eines Prototypen liegen auf der Hand: Man kann ein Beispiel oder Modell sehr schnell herzeigen, man spart Kosten, Ressourcen und Zeit. Es lohnt sich daher, die Entwicklung des Prototypen genau zu planen, von den Tools \u00fcbers Team bis hin zu Kommunikationswegen.<\/p>\n<p>Wir von Usersnap hoffen, dieser Post hat Ihnen gefallen und freuen uns, wenn Sie uns auf <a href=\"https:\/\/twitter.com\/usersnap\"  target=\"_blank\"  >Twitter<\/a> folgen. Dort tweeten wir regelm\u00e4\u00dfig \u00fcber Web Development, Webdesign und UAT.<\/p>\n<p><em>Usersnap ist ein Bug Tracking und Screenshot-Tool f\u00fcr jedes Webprojekt. Erhalten Sie sofort Feedback von Ihren Website-Besuchern. Jetzt kostenlos testen!<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-107 size-full\" src=\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/02\/Bildschirmfoto-2016-02-24-um-14.58.05-e1458129781372.png\" width=\"600\" height=\"150\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Einen Prototypen zu entwickeln, also ein Beispiel oder Modell, geh\u00f6rt heute zu jeder Software-Entwicklung dazu. Aber was sind die Vorteile eines Prototyps, im Vergleich zur einfachen Konzepterstellung? Und wie schafft man den Schritt von Prototyp zum fertigen Produkt?<\/p>\n","protected":false},"author":2,"featured_media":1135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1126","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1126"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1126\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1135"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}