Und zwar habe ich mir den Riesenpaket Interface Design vorgenommen
und habe da auch irgendwie Literatur gewälzt für euch.
Ich weiß nicht, kennt keiner von euch die Bücher?
Auf jeden Fall, also größtenteils sind die Inhalte,
die ich berichte, sozusagen aus diesen Büchern,
plus ein bisschen, bisschen was anderes noch.
Also es geht um die Gestaltung von Screens.
Wir hatten ja bisher eigentlich uns mehr so auf Print
Und so die Grundlagen sozusagen ein bisschen umgeschaut,
wie man ein Corporate Design macht und so weiter.
Und jetzt wollen wir uns mal ein bisschen näher damit beschäftigen,
was man auf dem Screen macht.
Und ja, auch weil der Nutzer mit dem Computer,
mit dem an Corona meistens interagiert. Deswegen ein Interface sozusagen,
dass ein Mensch Computerinteraktion möglich ist und das studiert in Großtechnik.
Von daher kann ich das nur empfehlen,
diese Bücher sich einmal anzuschauen. So ein bisschen,
ganz klein bisschen Geschichtliches, was schätzt du,
wie alt das ist
Ja, 18 Jahre. 10, 20 Jahre. Ich glaube,
89, 92. Also es ist von 83, also genau,
30 Jahre alt. Und zwar ist das von der Apple Lieser.
Das war ja das erste, der erste, ja,
kommerziell im größeren Stil vertriebene Rechner mit grafischer Benutzeroberfläche unten aus.
Und ich war einfach fast erschreckte, nur wie viel auf
den Hots zu heutigen Rechnern davon zu sehen ist. Also die haben auch,
also erste Dokumente von Apple gibt es auch von 1980 ungefähr,
wo halt schon ziemlich genau das User Interface beschrieben wurde und wie wieder Nutzer mit diesen, mit dem Rechner interagieren können soll.
Also wie gehört es zum Beispiel dem, was Crollen sein soll und so weiter. Das sind tatsächlich über 30 Jahre,
wo man sich überlegt, wie viel sich in der Hardware getan hat,
wie wenig sich dann in einem Interface tatsächlich,
zumindest in vielen Dingen getan hat, das ist wirklich erstaunlich,
aber vielleicht, ja, ist ja auch so was,
das Gute an der Planung daran gewesen, dass man überlegt hat,
er nur an einen virtuellen Schreibtisch, also so an Metaphern.
Ich will heute nicht allzu sehr in diese Gestaltung von Betriebssystemen gehen,
weil das ist, ja,
da gibt es jetzt die Standards, ich glaube,
kaum einer von uns wird jemals in Betriebssystemen mitgestalten,
aber dadurch, dass auch Web-Anwendungen immer immer ähnlicher Desktop anwenden werden,
auch von dem, was sie können,
wird auch immer mehr von Ben bedienen, Möglichkeiten,
die man auf dem Betriebssystem hat, aus vom Web verlangen.
Dracon Bock zum Beispiel. For Ajax halt nicht so richtig
möglich gewesen. Und jetzt wird es einfach erwartet,
dass ich Dinge auch mit dem Maus Patrick und Joe verschieben kann.
Das ist so ein Groben, mein Outline, über die
ich sprechen möchte. Also zuerst nochmal ganz kurz,
weil das ist ja eigentlich nicht Thema von uns.
Aber man sollte es bei diesem Thema nicht außer Acht lassen,
dass man den Nutzer im Blick haben soll
Dann kurzer Abriss, was ist überhaupt Informational Architecture,
was bedeuten Patterns in diesem Rahmen,
dann einen Exkurs in Mobile Patterns, weil das halt so,
ja, im Grunde im Moment so das Ding ist,
was man verlangt, was man können muss,
wenn man halt sowas irgendwie gestalten soll.
Kurzer Abriss in Trototyping noch ein bisschen, was sowieso in Style.
Aber wie gesagt, alles nicht in der Tiefe,
wo ich jetzt sagte, das ist etwas,
worüber dann ihr nachher eine Bachelorarbeit drüber schreiben könnt,
sondern da ist es ein Abriss vom Themen
Und jedes dieser einzelnen Themen könnte man vertiefen.
Also es gibt zum Thema Interface-Design gibt es ganze Studiengänge,
die sind nur das. Aber als erstes halt den User im Blick,
weil es ist immer natürlich Ziel der Sache,
dass man ein Interface gestaltet,
was möglichst die Zielgruppe intuitiv versteht und dafür muss man
auch den Nutzer verstehen und verstehen,
was will er denn überhaupt mit dieser Anwendung anfangen
Das heißt, ich fange in der Regel an,
eine Zielanalyse zu machen, von wegen,
was soll denn ein Nutzer mit meiner Anwendung alles machen können?
Welche Ziele verfolgt er dabei? Also er möchte womöglich ein Flugbuch oder
er möchte einen für sich passendes Buch finden oder er möchte
einen schönen Ausflugsziel für das Wochenende finden oder irgendwie sowas.
Also er hat irgendein Ziel vor Augen,
deswegen er sozusagen eure Anwendung aufsucht und genau darum ging,
würde es in einem ersten Schritt gehen, dass man überlegt,
welche Welche Ziele möchte ich denn mit meiner Anwendung unterstützen?
Und dann erstellt man solche Use-Cases, also solche modellhaften Fälle.
Es gibt vielleicht drei verschiedene Arten von Nutzern, die man bedienen möchte.
Die haben halt alle unterschiedliche Ziele. Und wenn man das
halt sich auch mal aufschreibt, dann kann man das besser nachhaltig holen.
Zu diesem Thema gehört natürlich auch immer,
dass man dann auch sich direkt in Kontakt mit den Nutzern aufnimmt,
dass man User in die Search macht. Und das ist,
da habt ihr ja auch, Szenen,
es ist ja auch sogar ein Computerinteraktion, ein Teil des Studiums Psychologie,
damit man halt diese ganzen Statistik und diese ganzen Methoden gelehrt bekommen,
womit man halt auch Daten erheben kann beim User und gibt es halt diese Möglichkeit,
mit Zusammenfassen haltet.
Direkte Beobachtungen, Fallstudie, also Einzelfälle, Fragebögen, solche Geschichten.
Vielleicht nochmal gerade bei User Interface Design direkte Beobachtungen,
ist halt auch sehr gerne dann mit Blickbewegungserkennung,
dass man halt auch sieht, okay,
was guckt er denn an,
bevor er dort klebt und so weiter.
Das würde auch in dem Fall
direkte Beobachtung fallen
Und was man auch machen kann,
das vielleicht ein bisschen untypisch ist, dass man so Modelle erzeugt,
dass man sich so einen typischen User generiert.
Und dass man dann auch bei Entscheidungsfragen dann sozusagen überlegen kann,
okay, wie würde denn unser typischer User jetzt handeln?
Ich will nicht unmöglich sein. Aber ich glaube, das kennt alles schon intensiv,
weil das im dritten Semesterinteraktionsdesign auch so runtergemacht worden ist.
Also jetzt auch Personas und so.
Ja, ja. Also ich sage das nur,
damit du irgendwie nicht so in den künstlichen Raum möglichst.
Nee, das ist auch die letzte Folie zu dem Thema.
Nee, ich habe noch eine Folie dazu verhaltensmuster
Ich wollte es nur nicht, außer Blickklassen,
weil wenn man über User-Interface-Design spricht, gehört das einfach dazu.
Natürlich. Also ich werde jetzt nicht länger darüber reden,
aber solche Dinge wie Verhaltensmuster bringen natürlich auch manche Entscheidungen dann mit sich,
wo man jetzt etwas platziert zum Beispiel,
zum Beispiel über Habituation redet, dass man halt solche Dinge,
alles klar, dann machen wir da weiter.
Ist denn das Thema Informationsarchitektur irgendwo mit Thema gewesen.
Also wenn man dann diese Zielanalyse, Zielgruppen und so weiter,
nutzen Szenarien aufgestellt hat, würde man dann diese Ziele kopieren,
benennen und dann überlegen, welche Funktionen brauche ich,
um diese Ziele zu erreichen und dann eine Seitenstruktur,
in deiner Seitenstruktur aufzubauen.
Darf ich das fast fragen? Also ich hoffe,
das stört ihm nicht, wenn ich so ein bisschen ein bisschen einhake.
User Experience, wie definiert ihr das oder welche Definition davon
nehmt ihr?
Oder wie versteht ihr das
Also ich habe sozusagen das im Moment hier so als Arbeitsdefinition,
dass man halt sozusagen auch den Zustand des Nutzers sozusagen im Auge hat, welches Ziel verfolgt er und so weiter,
die nicht jetzt irgendwie, dass man Emotionen noch großartig mitteilt. Das könnte man auch. ERR ziehe ich positioniert. Kann ich dir jetzt, ich habe keine Definition. Nee,
ich frage insofern,
ich will dich da überhaupt nicht in die Bedrühung bringen oder so,
weil es halt sage ich mal,
eine sehr breit verwendete Formulierung halte, ist irgendwie was,
was Leute unter User Experience verstehen und die einen gehen halt so mehr in die Ecke,
wie du es sagst, die anderen orientieren sich dann,
je mehr an dem, was News oder Normenheit sagen,
das Gesamtnutzungserlebnis mit eben Emotionen dort an viel so Joy of Hewson,
den ganzen Kram und ich finde das halt insofern immer ganz wichtig,
dass man da irgendwie so mit meint,
was Verständnis einfach hat von so einem Wort, weil,
also ich habe das jetzt so ein klassisches Passwort,
aus diesem Buch genommen,
wo es halt auch keine wissenschaftliche Analyse des Begriffes ist,
sondern Es wird einfach im Englischen sozusagen als,
es ist quasi nur ein englischer Ausdruck.
Okay. Ja. Also man könnte jetzt anfangen zu überlegen.
Also deswegen würde ich auch sagen, es gibt ja diese beiden Sichtweisen,
die man jetzt noch die Emotionen und alles in rein nimmt.
Hier in dem Fall,
also im Hinblick auf Entscheidungen für Seitenstrukturen und so weiter,
wo es noch nicht darum geht,
wie gestalte ich das Ganze visuell auch.
Es ist erstmal
die Zielanalyse
Genau. So, also Ziel wäre hier sozusagen dann am Schluss
ein Flussdiakrank zu haben, wo man dann halt sagt,
okay, auf der Seite gibt es folgende Funktionen,
von da aus kommt man dahin und so weiter.
Das ist soweit auch klar. Da kann man sich überlegen,
welche Aufgabe eine einzelne Seite überhaupt erfüllen kann.
Und also entweder wird auf einer Seite ein,
also man kann, es gibt immer Mischformen,
also das sind sozusagen die Reihenformen davon,
muss man sagen,
man zeigt ein einzelnes Objekt anderen Zeiten,
eine Liste von Objekten an
Bietet ein Werkzeug zur Bearbeitung von irgendwas an oder die Seite erfüllt einfach
nur eine Funktion wie Login oder was weiß ich sowas.
Und es gibt natürlich diverseste Mischbaumen davon,
aber es ist vielleicht ganz gut, sich nochmal darüber klar zu werden,
was sind die Kernaufgaben von einer Seite ist.
Und je mehr man mischt, desto unklarer wird es vielleicht
auch für den Nutzer. Was soll er denn da jetzt
tun und was ist die Aufgabe, die ihr seid?
Und hier kommen wir so ein bisschen in diese,
in diese Pattern-Geschichten rein
Design-Patterns sagt euch das was, die uns schonen. Ja,
das gibt es natürlich auch in Programmierung, aber kommt ursprünglich aus der Architektur
und ist halt jetzt auch im Rahmen von User-Interface-Designheiten extremer Hype.
Also diese Bücher bestehen quasi nur in der Beschreibung von Fettern.
Das ist immer so ein bisschen allgemein davor,
aber es geht sozusagen darum, einen Pattern vorzustellen,
wo es darum geht, okay, Worum geht es überhaupt?
In welchem Kontext steht das? Welche Lösungen bietet das?
Beispiele dazu, vielleicht noch, ja, was kann dabei schiefgehen?
Wann sollte ich das nicht nutzen? Solche Dinge sind so Muster.
Brausmuster. Und für den Seitenaufbau im Interface-Design gibt es auch relativ,
das sind noch so, das sind sehr grobe Pattern,
die hier dargestellt werden.
Man kann sich das so ein bisschen hierarchisch vorstellen,
dass es halt Pattern gibt,
die eher so einen groben Überblick geben und es gibt Patterns
für so
ganz kleine Interaktionen
Also es gibt welche, so von wegen,
wenn ich ein Formular ausfülle, dass ich ein kleines X daneben habe,
um das Formularfeld wieder zu löschen, das ist ein ganz kleines Pattern,
wenn ich jetzt ein Pattern wie Picture Manager habe,
ist das halt ein sehr umfangreiches Pattern,
dass ganz viele Dinge wieder wegendeutet.
Hat ihr denn von Feature Search and Browns schon mal was gemacht?
Da ist die Fünf unten sicherst nicht. Ich habe das Gefühl,
ich erzähle nur, ich erzähle Dinge, die ihr alle schon wisst.
Also es ist ein ganz geläufig, also ein sehr,
sehr weit verbreitetes Pattern,
was auf ganz viele Arten von Webseiten
gebraucht wurde
So auf der Startseite von einem Web-Angebot diese drei Dinge anbietest. Also ein Feature,
irgendeine Herausstellung von einem Produkt oder von einer News oder von was auch immer,
was diese Webseite anbietet, dann die Möglichkeit zu suchen und
die Möglichkeit dann halt im Angebot weiter zu bausen.
Ich habe jetzt hier nur ein Beispiel,
da gibt es aber dafür Beispiele zu finden,
ist wirklich unheimlich einfach, weil man fast alle Startseiten so aufgebaut sind,
dass du halt einen Teaser hast, irgendwas,
was optisch auch schön groß und irgendwie,
wo es ein Angebot gibt,
also hier im
Häufig jetzt auch diese Slide-Shows. Du hast halt hier irgendwie vier verschiedene Ansichten.
Das rollt dann so nach ein paar Sekunden dann so weiter.
Also du hast dann Produkte des Tages,
haben wir ja das Angebot und was weiß ich.
Ganz prominent immer die Suche. Also man bringt die Suche
dann auch immer in der Regel sehr auffallend in der Kopfzeile irgendwo,
auch ein bisschen visuell hervorgehoben.
Hier durch Hinterlegung und den gelben Suchbutton da oben ist so sehr stark hervorgehoben.
Und Brows im Grunde alles der Rahmen hier denkst du,
zum Stöbern und zum Kategorien durchsieht und so weiter.
Also das war auf jeden Fall ein sehr geläufiges Pattern für Webseiten.
Ja, auch Shop, aber auch zum Beispiel so andere Beispiele.
New Stream würde jetzt auch dem wahrscheinlich verschiedene Beispiele einfallen. Ich habe jetzt einfach nur Twitter genommen,
also quasi die Auflistung chronologisch umgekehrt chronologisch von relativ kurzen Nachrichten,
wo man dann halt teilweise dann immer noch das weiterlesen,
weil man dann halt irgendwie einen größeren Artikel lesen will,
dann gibt es häufig die Möglichkeit, an solche Streams zu abonnieren,
dass man irgendwie Push-Nachrichten bekommt, solche Dinge, auch ein ganz geläufiges Pattern.
Der Picture-Manager, was immer so langsam ist, das reagiert nicht.
Picture-Manager gibt es ja auch verschiedenste inzwischen, aber die sehen eigentlich alle gleich aus.
Also man hat eigentlich immer in der Mitte verschiedene Möglichkeiten,
sich sich etwas anzahlt, Bilderanzünder zeigen zu lassen,
entweder so als Raster oder in Großbildvorschau.
Manchmal gibt es da noch so Korrekturfunktionen und in der linken
oder rechten Seite immer Sortiermöglichkeiten in den Algen und so weiter.
Es ist dann noch die Anzeige von den Metadaten,
also die sind wirklich fast alle identisch. Dashboard quasi,
den sie an Überblicksanzeige von Daten hier halten in solchen betitelten Sektionen
untergliedert und es ist so, man möchte möglichst schnell auf einen Blick umfassende Statistiken und Datenanzeigen.
Und da gibt es dann auch verschiedene Angänge,
ob das jetzt irgendwie Aktienkurse sind oder hier Zugriffszahlen auf eine Webseite.
Aber die sind alle sehr ähnlich aufgebaut, die Diagrammen ein bisschen individualisierbar womöglich.
Kein was und ein paar Leid,
also Leinwand und Palette ist halt für fast alle Werkzeuge,
wo man what you see is what you get arbeitet,
etwas erzeugt
Hat in der Regel immer dann diese weiße Fläche als Arbeitsfläche
und dann entsprechend meist auch eine bewegbare Palette,
wo dann die Werkzeuge da sind.
Die sind dann häufig auch in solchen,
hier sind es Tabs oder es sind diese Cyramonika-Geschichten,
wo man dann die Werkzeuge drin hat.
Das ist beim World im Grunde auch nicht anders.
Also es ist auch eine ganz geläufige Sache.
Die Wizards kennt jeder wahrscheinlich vom Installieren,
von irgendwelcher Software
Gibt es aber auch für Aufgaben im Web,
wenn ich mich zum Beispiel anmelde oder beim Checkout von irgendwelchen Jobs oder so,
hat man immer mehrere Schritte, die man durchläuft.
Das wird in der Regel jetzt auch immer so kopiert angezeigt,
dass du eine überschaubare Anzahl von Screens hast und dich dann weiterblätterst,
auch wieder zurück kannst.
So Missards sind in der Regel auch immer relativ gleich aufgebaut
und erfüllen immer so eine konkrete Aufgabe, konkretes Ziel,
was dann auch einen finalen Abschluss hat,
wo man dann sein Ziel erreicht hat,
ein schönes Pattern
Eine Settings, Editor, den gab es tatsächlich auch bei
der Lion Leiser schon, also auch wirklich schon sehr ähnlich.
Also so richtig so mit kopierten Sektionen,
wo man die Helligkeit des Bildschirms einstellen kann,
also Dinge, ein Betriebssystem kommt gar nicht ohne aus.
Gibt es aber auch bei Apps halt jetzt sozusagen,
dass man da auch in die Settings gehen kann,
oder ja teilweise auch bei so Webseiten, also so Portalen,
wo man dann halt so seine eigenen Einstellungen machen kann,
von wegen,
ich möchte E-Mails bekommen oder nicht
Das ist auch so eine Art Settings-Editor. Noch ein Pattern zur,
wenn es um die Anzeige von einzelnen Objekten geht,
war von wegen eine Seite, kann auch ein einzelnes Objekt auszeigen.
Hier werden so ein einzelnes Objekt eine Karte und ein Pattern,
was zur Anzeige von einzelnen Objekten gehört, ist auch,
dass man alternative Sichten auf ein Objekt anbietet.
Hier wäre es jetzt, das ist so schön einleuchtend,
wenn man halt bei Google Maps auf die Satellitenansicht wechselt,
aber aber man könnte sich auch vorstellen,
dass ich ein Objekt habe und ich wechsle die Ansicht hin zu
den Metadaten oder ich habe einen Musikstream und ich schaue mir dann an,
okay, wie viele Daten kriege ich denn,
welchen Datenrat hat das oder solche Dings.
Das wäre auch ein Alternative View sozusagen auf ein und dasselbe Objekt.
Auch etwas, wenn es darum geht, einzelne Dinge anzuzeigen,
aber auch bei Betriebssystemen natürlich, mehrere von gleichwertigen Arbeitsflächen nebeneinander aufmachen kann.
Kann man sich bei mobilen Geräten selten leisten,
aber da kann man halt auch vielleicht mit Tabs arbeiten.
Aber auf dem Desktop ist es halt ganz üblich,
dass man sozusagen zum Beispiel Photoshop, dass man mehrere,
mehrere Dateien aufmachen kann, wo man dazu womöglich sogar zwischen
den Arbeitsflächen hin und her kopieren kann und solche Dinge.
Wäre auch ein Pattern größerer Ort. Beim Seitenaufbau muss man immer so ein bisschen darauf achten,
dass man Dinge wie visuelle Hierarchie, visuellen Fluss beachtet. Ich weiß nicht,
wie weit das Thema bei euch ist, aber zum Beispiel,
dass man halt plant, welche Fixaktionspunkte sollen denn,
also es werden dem den Nutzer angeboten,
wie zum Beispiel halt, dass ich sehe,
das Suchformular auf einer Webseite ganz oben habe,
dass ich halt ein Keyvisuelle habe, wo ich sozusagen den Blick hinrichte.
Und das ist auch so ein bisschen so eine Kunst,
Den Blick des Nutzers zu lenken,
dass man halt nicht diesen Funktionssicht auf eine Seite hat,
sondern auch mal versucht, eine Seite aus dem Hinblick zu betrachten,
wohin guckt man denn jetzt als erstes?
Und da gibt es natürlich so dieses klassische West,
westliche Muster von links oben nach rechts unten, Leserichtungen und so weiter.
Aber man kann auch durch Merkmale visuelle Merkmale halt im Blick lenken.
Das sind halt auch strukturierende Dinge wie Überschriften,
dass sich halt etwas dunkle oder hell mache, also kontrastiere,
dass ich mit Farben etwas hervorhebe, mit der Größe oder solche Dinge.
Und da schaut man halt auch, dass man bei einem Seitenaufbau auch einen Fluss hinbekommt.
Also wenn es mehrere Fixationspunkte gibt oder mehrere Aufmerksamkeitspunkte,
die ein Nutzer betrachten sollte, dann schaut man,
dass das jetzt nicht sozusagen sprunghaft ist. Also erst soll er da hingucken,
dann da hin, dann da hin,
sondern dass man womöglich eine Linie oder so eine geschwungene Linie hinbekommt Man arbeitet auf jeden Fall ganz viel mit Linienführung bei solchen Dingen,
dass man auch sagt, ja,
wir haben jetzt hier eine Achse und da eine Art,
das sind so Begriffwilligkeiten,
die man halt auch bei der Gestaltung von visuellen Stoß beachtet.
Und in dem Zusammenhang kann man halt auch noch beachten,
dass sich Seiten ja durch die Interaktion mit dem Nutzer auch verändern können.
Gibt es dann Dinge, die erst angezeigt werden auf einer Fläche,
die sonst jäher ist, wenn der Nutzer irgendwo geklickt hat oder so.
So kann man durch die Dynamik natürlich auch den Blick lenken.
Also jede Bewegung auf einer Seite lenkt die Aufmerksamkeit auf sich. Und ja,
in dem Zusammenhang, dass man visuellen Fluss beachtet und den Blick,
die Fokussierpunkte und so weiter, ist natürlich auch das,
was jetzt immer gefordert wird, dass das Seitentuide sind,
ist, dass es halt auf verschiedenen Auflösungen,
wenn es gut aussieht, auch noch mal eine besondere Herausforderung.
Weil man halt nicht mehr mit einem fixen Layout arbeiten kann.
Für den Seitenaufbau gibt es dann halt auch wieder Patterns.
Ich habe jetzt keine Angst, dafür jetzt nicht alle Beispiele dabei,
aber Die finden sich halt auch in den Büchern,
sowas guckt man dann im Zweifel auch mal nach.
Aber das sind halt so Patterns,
die beschreiben, dass man halt auch einen visuellen Rahmen,
der sich nicht verändert und der Inhalt sich ändert oder dass man halt ein Raster,
Grid of Eagles, dass man einen Raster von gleichwertigen Objekten hat,
das war häufig dann irgendwie bei einem Shop oder was weiß ich,
dass ich so mit so Kacheln arbeite, wo halt verschiedene Dinge mehrmalander sind.
Oder Titan Sections, das hatten wir eben schon,
dass man halt Sektionen macht,
die eine Überschrift haben,
die möglichst voneinander visuell betrennt sind
Dass ich solche Tabs habe,
wie eben schon gesehen oder dass das angesprochene Akkordeon.
Vielleicht so viel dazu. Was halt noch ein bisschen überschaubarer ist,
weil es da noch gar nicht so viele Patterns sind,
ist der Bereich im Mobile-Design.
Ich kann mal Eine andere Slideshow starten. Das ist quasi
eine Präsentation von Theresa Neill, die dieses Pattern-Buch geschrieben hat.
Nur zu Mobile-Design-Patterns. Und das ist vielleicht ganz schön zu sehen.
Man erkennt auch viele Dinge wieder, wenn man sich
diese Übersicht mal anschaut. Das Springbore zum Beispiel,
das kennt jeder auch vom Smartphone-Anspruch von der Oberfläche,
dass sich halt ein Raster habe, wo Icons drauf sind.
Und von da aus sprünglich dann auf andere Screens
Das gibt es auch innerhalb von Apps,
dass ich dann um so verschiedene Buttons habe,
mit denen ich auf verschiedene Bereiche in der App springen.
Weil es halt schälchlicherweise ganz gerne auch gemacht wird,
ist, dass ich halt so ein Springboard benutze,
um ganz normal zu navigieren, quasi in der Liste zu navigieren.
Also da passt dann das Pattern eigentlich nicht zu dem Inhalt.
Also da würde man dann eher so ein List-Menü nehmen,
was man halt auch auf, gibt es dann dynamisch,
dass man das aufklappt, dass man ist,
oder es gibt statisch, dass man auch unterschiedliche Screens dann wieder wechselt.
Top-Menü kennt wahrscheinlich auch jeder von euch.
Das sind die Kleinfahrtens unten am Band. Oder The Galamy,
also gerade halt, wenn es um wieder auch ein Picture-Manager
oder Flickr-Apps oder was weiß ich was geht.
Da hat man dann halt immer auch so ein Raster,
wo dann die Bilder angezeigt werden.
Dashboard wäre sozusagen das, was wir eben von Google gesehen haben,
nur auf eine Mobile-App übertragen.
Oder es vielleicht noch ganz spannend ist,
sind diese Metapher
Hettern, das ist so,
dass ich quasi ein Gegenstand aus der reellen Welt relativ detailgetreu und
also dann Abbildung quasi als Interface benutze und dann die Anwendung zu bedienen.
Und da gibt es Dinge, wo das ganz gelungen ist und
das ist aber auch, kann auch ziemlich daneben gehen.
Also so je nachdem, weil unter Umständen die Abbildung
der Realität nicht wirklich übertragbar ist auf die Anwendung.
Also wenn ich jetzt, hier ist das Beispiel drin vom Weinhandel,
der dann halt an die Weinflaschen hinweg stehen hat und dann kann man sich durch das Regal scrollen.
Es geht vielleicht noch. Jeder kennt ja auch die Ei-Book-App.
Wir hatten ja auch dieses Bücherregal, kann man sich streiten,
ob das so sinnvoll ist.
Ja, auf jeden Fall ist das das Metapher-Pattern.
Und dann gibt es noch dieses Mega-Menü. Das ist quasi ein Tab-Menü,
wo er als oben und man klappt quasi nochmal so ein Sub-Menü auf,
wo dann wieder nochmal Icons sind und nicht eine Liste,
sondern dann halt wieder Icons.
Das sieht man auch sehr gerne im Web inzwischen,
dass man halt, eigentlich auch ursprünglich aus dem Bett.
Das sind diese riesen, riesen Menüs, die da oben aufklappen,
wo man dann halt eine große Anzahl und eine Auswahl hat oder halt jetzt noch mit Icons aufgerutscht.
Dann hat man einen Start, Startbereich. Ja,
und wir haben dann hier jede Menge Screenshots von solchen Dingen.
Ich habe die Präsentation auch bei uns im Urlaub hochgeladen. Also das ist,
wenn ihr auch überlegt, eine App zu bauen oder zu gestalten,
kann ich das euch nur mal ans Herz legen,
euch diese Patterns mal anzuschauen,
weil Viele Dinge sind die User inzwischen einfach auch gewohnt.
Und wenn man eine App bauen würde, die völlig konträr
dieser Gewohnheiten geht, dann wird es sehr schwer bedienbar.
Zwar kann ich mir vorstellen,
dass ihr vielleicht auch mal irgendwann irgendwelche seid,
die sich neue Interaktionsmuster überlegt, aber bevor man sich was Neues überlegt,
sollte man auch wissen, was es schon gibt.
Deswegen auf jeden Fall
diese Patterns mal anschauen
Gibt es also jede Menge Spring-Balls, auch im Kreis
abgebildet und dunkel und hell. Wir sind an Listen.
Es wird hier noch unterschieden zwischen Primary und Secondary-Navigation.
Das Primary wäre dann sozusagen die Startseite. Wie sieht der uns?
Wo hat meine Hauptnavigation aus? Und dann kann es sein,
dass ich aber zum Beispiel in der Hauptnavigation ein Spring-Board habe
und dann auf der Folgeseite dann aber eine Liste.
Oder ich habe mehrere Tabs und habe hier Nee,
das tat, bietet dann wieder eine Liste an oder andere.
Es geht auch diese Karussell-Geschichten, also diese Bilder,
die man dann, wo man dann weiter slidet.
Das kommt dann dir als Secondary-Argumentation auch irgendwann.
Ähm. Vielleicht hier mal ganz spannend.
Sie haben nur die Tabs an der Seite.
Das sieht man jetzt auch
immer mehr eigentlich
Auch so Slide-In-Menüs an der Seite. Das kommt auch so
ein bisschen daher, dass man ja bei den Tablets,
wenn man die im Querformat hat,
häufig mit zweiten in Gespalte fest hat links.
Und das lässt sich dann halt ganz nett auch am Smartphone dann
nur als Vinyl links sozusagen abbilden. Dann unterscheidet sich auch
die Smartphone von der Tablet persönlich mehr ganz so schwer.
Und die Agalemy, die secondary militation, Wir sind Metaphern.
Das ist egal, oder hier so, die seid deine Kartellkasten.
So ein Regal. Ja, die ins DJ-Tools und so
weiter. Also bei Musiktools eh sehr, sehr beliebt,
die Metapher
Das Megamenü, da muss ich meine Vorstellung davon bekommen.
Ich glaube, pass auf, und habe dann nochmal so richtig so Icons.
Ja, das ist, das wären diese Beispiele,
die es halt als Hauptnavigation eigentlich so gut wie gar nicht gibt,
sondern nur als Secondary Navigation,
dass ich halt das Page-Karussell habe mit den kleinen Pumpen unten drunter.
Ein Immels-Karussell, wo ich dann halt mit dem,
muss man da auch so weiterrollen kann. Oder halt dieses Inline-Expand,
was ich vorhin meinte schon, eine Liste hat,
die dann sozusagen aufklappt, so ähnlich wie ein Akkordeon.
Das ist dann auch wieder Beispiele. Das ist ja ein bisschen ungewöhnlich.
Also eher, das ist auch ein negatives Deutlich. Also man sagt,
eigentlich ist es bei dem Page-Cowsay nicht mehr als acht
Einträge und danach wird es eigentlich nicht mehr ernutzbar,
dass man halt dann irgendwie über 15 Seiten dann da
so durchscrollt.
Das würde man
nicht tun
Coverflow to dos. Ich wollte nochmal. Das sind so
die ganzen anderen Themen, wo es Patterns zu gibt,
also zu Formularen, zu Tabellen,
zu Suchmethodiken,
die man halt Listen filtert und so weiter
Wie man Werkzeug laufen und die Geräten anbietet. Wenn man so Diagramme darstellen kann,
Einladung, wie man man sich, ja, so Pop-ups gestaltet und so weiter.
Es gibt auch für Hilfe klassische Muster, wenn man eine App hat,
dass man sozusagen ein kürzestes Tutorial anbietet oder solche Dinge.
Also eine ganz sehr weit verbreitete Sache. Diese Shatterns.
Es gibt jede Menge Hatterns und es werden auch,
also das ist ja, die Bücher sind jetzt relativ aktuell,
aber es ist ja ein Bereich, wo immer auch neue Dinge hinzukommen.
Also so ein Vettern entsteht ja nicht,
dass jemand da sitzt und werde ich und ich,
ich denke mir jetzt mal ein Pattern aus,
sondern es ist eher so, dass halt irgendwelche Interface-Designer sich clevere,
neue Möglichkeiten überlegen und dann merkt man,
dass dann die nächste App plötzlich findet mal so eine Möglichkeit da auch und dann wird es immer häufiger und dann wird es so eine Muster,
also das ist ein Gebrauchsmuster, wo man halt auch,
wo der User das dann auch schon gelernt hat.
Also ich sage mal, dieses Weiterscrollen mit dem Finger
oder dass man aus einer Liste Dinge löschen kann,
indem man es nach rechts, glaube ich, so rausfischt.
Das ist eine Geste, die inzwischen relativ gebräuchlich ist bei Mobilen,
Anwendungen, aber die jetzt nicht so ganz intuitiv ist.
Also das muss man schon irgendwann mal gelernt haben.
Aber wenn halt viele davon ausgehen,
ich habe jetzt schon fünf Anwendungen,
da geht das so,
dann probiere ich das hier auch mal so und
dann wird es
... Gut
Was hast du schon gemacht? Habt ihr denn vom Showto-Typing
was gehört? Ich gehe mal davon aus. Kennt ihr
Werkzeuge, um Prototypen zu machen? Könnt ihr auch wünschen.
Kennt ihr. Also, warum? Ganz schnell nochmal zu sagen,
man würde in der Regel Wahrscheinlich erstmal auf Papierkunst halten,
also Skizzen machen und so weiter.
Man kann das auch. Leuten schon vorlegen,
dann wäre es mal ein Prop-Do-Typ und solche.
Man kann auch Papier-Screens vorlegen, jetzt dann vorlegen und so weiter.
Kommen wir im Grafikprogramm das machen oder halt animiert als Klickdummy.
Früher habe ich sowas mit Flash gemacht.
Inzwischen gibt es da halt schon ein Programm für zum Beispiel,
habe ich jetzt erschuhe genommen.
Ihr könnt als Studenten der Mensch-Computer-Interaktion eine Schuhe auch umsonst bekommen
Große, ja. Vielleicht ist es direkt auf der Website
von Ashua. Ihr müsst, ihr müsst nur nachweisen,
dass ihr im E-Studenten seid sozusagen.
Und dann könnt ihr eine Pro-Version sonst bekommen. Ehrlich?
Ja. Ja. Habe ich nämlich gerade eben erst.
Also ich habe dem geschrieben, ich gebe hier einen Unterricht
und jetzt mache ich davor auch Werbung. Nee,
aber weil das könnte man ja tatsächlich auch überlegen,
dass man vielleicht sowas auch mal mit einbezieht,
dass man da so der Prakt irgendwie ein Praktikum zu macht
oder irgendwie Workshops,
das schon
ein bisschen zu arbeiten
Also da kann man richtig voll funktionieren. Klick,
Klick-Dummies mitbauen, die auch, auch Mobile-Geschichten,
dass man dann halt eine Webseite über das Smartphone aufruft,
aber es sieht dann halt ruhig aus wie dir.
Das ist ganz, ganz nett. Genau,
dann reicht das vielleicht schon zum Phototyping, weil der Hinweis,
Sure gibt es auch als Ego-Version für Studierende kostenfrei,
zumindest Studierende der Mensch-Computer-Interaktion.
Es heißt, glaube ich, Good Students meistens,
also man muss irgendwie nachweisen,
dass man
eine 3 hatte oder so
Irgendwie sowas. Vielleicht dann so zum Abschluss, wo wir
dann halt auch uns, unserem Kernthema wieder etwas nähern.
Aber ich konnte sozusagen diese Strukturierung von Seiten oder wie baue ich überhaupt eine Seite auf?
Bestimmt ja schon auch, welche Elemente ich überhaupt gestalten kann, dann mit den Mitteln, die ich womöglich auch aus Visuelle gestalte. Eins mitgenommen habe,
weil ganz viele dieser Dinge,
die dann halt nachher das Look and Feel ausmachen,
sind halt wieder bestimmt von Schypografie, von Farben,
von auch Staltgesetzen, dass ich halt ähnliche Dinge werden halt zusammen,
als zusammengehörig wahrgenommen, Dinge, die nah beieinander stehen werden,
als zusammen wahrgenommen oder um den visuellen Fluss,
du hast dich vorhin beschrieben, hat die Fixationspunkte,
da geht es halt auch um diese, die gute Form,
solche Dinge, ja, dass ich halt,
das muss ja nicht mit einer Linie verbunden sein,
solche Bereiche, aber gerade diese,
deswegen machen wir ja auch diese ganzen Kerngrundlagen von Gestaltung,
weil im Grunde ist das das wieder das Handwerkszeug,
wenn es darum geht, okay,
ich habe eine bestimmte bestimmte Funktionalitäten, bestimmte Tools,
die ich anbieten muss.
Ich muss eine bestimmte Anzahl von Textfenstern irgendwie auf eine Seite bringen.
Und dann fange ich an, wie layoute ich das denn
alles so. Und da sind wir wieder bei,
das unterscheidet sich auch nicht großartig von im Kern zumindest,
auch von der Gestaltung, von irgendwelchen Printprodukten oder so.
Man hat natürlich andere Rahmenbedingungen im Web, aber der Inhalt
an sich macht das Look und Feel eigentlich wenig aus.
Und dafür ist es ein klassisches Beispiel, diese CSS Sengarden,
wo ein und derselbe Inhalt, immer mit unterschiedlichen CSCS, ein unterschiedliches Look in 4 bekommen.
Ich habe einfach mal ein paar Screenshots gemacht,
dass das hier so ein bisschen meldensartig oder also ein und derselbe Inhalt mit einem anderen CSS,
in anderen Gestaltungen, man sieht gleich irgendwie nach, ja,
danach sieht es aus, von Look and Feel, wenn man nicht lesen will.
Aber wenn man jetzt gar nicht liest, dass das steht,
was würde ich dir vermuten, was das er ist?
Was ist das über Shooter?
Richtung Ingo-Shooter
Passt auch nicht. Hallo, übrigens auch so ein
netter Action-Film geladen. Genau, auf jeden Fall mit Action
ist auf jeden Fall schon mal dabei.
Jugendstutter war ja echt ein Film. Ja,
ist es mal wieder so, wenn es drin ist.
Was habt ihr da für Assoziationen? Haben teuer.
Wie kommst du auf Abenteuer? Ich habe oder komische Sachen
dazu. Diese komische Zahl, genau
Okay, da arbeitet man allein mit Kernassoziationen.
Was ist das Ziel ist denn mit der Krake?
Ja, sonst war ich weg und so.
Der Casino vielleicht, keine Ahnung. Ja, so,
welche mussischen Geschichten lernen so die Kartensensorverrichten aus, die scheiß Karten.
Das ist sowieso, also dieser Hauptsensor,
der hat irgendwie da Luftbruch, diese...
Das ist auch irgendwie ein altes Team nennen,
eine Bordeurin.
Das kann auch sein, dass bei dem U-Boot,
das sieht ja auch so ein bisschen jurax bleiben mäßig.
Ja, ja, ja, also genau.
Auf jeden Fall. Also die Assoziation ist irgendwie sofort da.
Und dann denkt man an diese Geschichten und Abenteuer und was weiß ich.
Aber da merkt man halt, also welche Kraft die Bilder
definitiv haben. Und dann natürlich auch hier diese Typ,
diese Font hier, wirklich Überschriften genommen,
eine alte Abbildung und so ein bisschen Papierstruktur und solche Dinge.
Und das sind halt so die Handwerk,
das Handwerkszeug wird man
an sowas erstellt
Das ist schon die letzten Leute, okay. Schade. Können wir vielleicht noch ein paar mehr Beispiele nehmen können, könnten wir die Webseite nehmen. Gut,
ich hoffe, ich habe nicht allzu viel von dem erzählt,
was ihr schon kennt, aber ich wollte auf jeden Fall diese Geschichte mit den Patterns euch mal nahelegen,
weil ihr wahrscheinlich sonst an manchen Punkten,
wenn ihr Webseiten gestaltet oder Apps an manchen Punkten lange,
an Überlegungen hängt, wie kann man das denn jetzt machen,
wo man Wenn man den Fokus, wie wir ja eigentlich haben wollen,
auf die Gestaltung, die grafische Gestaltung im Netz,
kann man eigentlich auch auf ein bewährtes Pattern erstmal setzen,
weil es geht ja darum,
wie gestalte ich da in die Icons und die Farben,
die Texte,
wie setze ich die und so weiter.
Das ist dann eine andere Überlegung, ich kann einen Pattern
quasi nehmen und das kann auch ganz unterschiedlich aussehen.
Also wir vorhin das Slide-Show gesehen haben. Dashboard kann auch
ganz unterschiedlich aussehen. Von Rook and Feel.
Gut, soviel vielleicht allgemein zum Interface-Design. Wie gesagt,
das Thema ist extrem breit und ich kann euch da nur empfehlen,
noch weiter,
auch in der Lektüre reinzugehen