{"id":392,"date":"2011-04-20T14:37:12","date_gmt":"2011-04-20T14:37:12","guid":{"rendered":"http:\/\/projektakte.sub.uni-hamburg.de\/?p=392"},"modified":"2011-04-20T14:37:12","modified_gmt":"2011-04-20T14:37:12","slug":"prototyping-the-old-school-way","status":"publish","type":"post","link":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/user-studies\/prototyping-the-old-school-way\/","title":{"rendered":"Prototyping &#8211; the old school way"},"content":{"rendered":"<p>Ich habe angefangen, einen ersten Prototypen f\u00fcr das neue Portal zu erstellen. Und dabei erstmal die Finger von der Tastatur gelassen und zu Papier,\u00a0 Schere, Stift und vielen, vielen Rei\u00dfzwecken gegriffen. Das war sehr ungewohnt, hat aber Spa\u00df gemacht.\u00a0 So sind beim Erstellen der einzelnen Seiten fast wie von selbst wiederverwendbare Templates bzw. Inhaltsbausteine entstanden, vor allem eine Reihe von kleinen Infok\u00e4sten oder Widgets, die ich je nach Hauptinhalt der Seiten gerne jeweils thematisch passend einbinden will.<\/p>\n<p>Fotos jeder fertigen Seite werden als Bild in eine ansonsten leere HTML-Seite eingebunden.\u00a0 Mit image-maps (<a title=\"image-maps auf selfthtml.org\" href=\"https:\/\/de.selfhtml.org\/html\/grafiken\/verweis_sensitive.htm\">danke, danke,\u00a0 danke an selfhtml.org<\/a>) kann man in den Bildern anklickbare Fl\u00e4chen definieren und so zwischen den einzelnen Fotos \u00e4hnlich wie im sp\u00e4teren Portal navigieren.<\/p>\n<pre>&lt;!-- Beipiel:\r\n&lt;map name=\"start\"&gt;\r\n &lt;!-- Navi --&gt;\r\n &lt;area shape=\"rect\" coords=\"10,140,112,172\" href=\"index.html\" alt=\"home \" \/&gt;\r\n &lt;\/map&gt;\r\n\r\n &lt;img src=\"suchen.jpg\" alt=\"bild\" width=\"1000\" height=\"838\" usemap=\"#start\"&gt;<\/pre>\n<pre>Ende --&gt;<\/pre>\n<p>Das geht \u00fcberraschend einfach, f\u00fchlt sich aber merkw\u00fcrdig an, denn das Produkt sieht eben nach dem aus, was es ist: ein allererster Entwurf als Diskussionsgrundlage.<a href=\"https:\/\/projektakte.sub.uni-hamburg.de\/wp-content\/uploads\/2011\/04\/pt-anpassen-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-405\" style=\"margin: 10px;\" title=\"Suche anpassen - Beispielseite im ersten ViFaPol-Prototypen\" src=\"https:\/\/projektakte.sub.uni-hamburg.de\/wp-content\/uploads\/2011\/04\/pt-anpassen-1-300x189.jpg\" alt=\"\" width=\"300\" height=\"189\" srcset=\"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-content\/uploads\/2011\/04\/pt-anpassen-1-300x189.jpg 300w, https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-content\/uploads\/2011\/04\/pt-anpassen-1.jpg 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a> Ganz ungestylt und vorl\u00e4ufig.<\/p>\n<p>So soll es aber auch sein: Denn in diesem Schritt geht es noch nicht um Farben oder Layouts, sondern grundlegend um die Frage, wie das Portal strukturiert,\u00a0 welche Elemente\u00a0 auf welchen Seiten eingebunden und wie die Klickwege aussehen sollen. Und daf\u00fcr taugt dieses Instrument meines Erachtens sehr gut.<\/p>\n<p>Beim ersten Durchgang durch alle Seiten habe ich bis zum Schluss immer mal wieder ein Template\u00a0 neu angelegt (d. h. : eine Karteikarte zurechtgeschnitten und beschriftet). Am Schluss fehlte aber eine der wichtigsten Recherchem\u00f6glichkeiten und der Platzhalter f\u00fcr die prim\u00e4re Navigation war leer geblieben, der f\u00fcr eine zus\u00e4tzliche, kontextsensitive Navigation aber in allen Seiten gleich genutzt worden&#8230;<\/p>\n<p>Heute vormittag habe ich daher eine zweite, schlankere und konsistentere Version erstellt. Nach ein paar weiteren \u00dcberarbeitungen werde ich den Prototypen ver\u00f6ffentlichen und hoffe auf Euer\/Ihr Feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich habe angefangen, einen ersten Prototypen f\u00fcr das neue Portal zu erstellen. Und dabei erstmal die Finger von der Tastatur gelassen und zu Papier,\u00a0 Schere, Stift und vielen, vielen Rei\u00dfzwecken gegriffen. Das war sehr ungewohnt, hat aber Spa\u00df gemacht.\u00a0 So sind beim Erstellen der einzelnen Seiten fast wie von selbst wiederverwendbare Templates bzw. Inhaltsbausteine entstanden, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,3],"tags":[],"class_list":["post-392","post","type-post","status-publish","format-standard","hentry","category-konzeption","category-user-studies"],"_links":{"self":[{"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":23,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/posts\/392\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sub.uni-hamburg.de\/akte\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}