1. 1. WORDCAMP KLN dat hrchen
2. 2. Information Architecture @kirstenschelper Kirsten Schelper Mnchen Ausbildung: Designstudium Derzeitige Beschftigung: WordPress-Themes
3. 3. Information Architecture @kirstenschelper Kirsten Schelper Mnchen wpmeetup-muenchen.org die-netzialisten.de
4. 4. Information Architecture @kirstenschelper Information Architecture Buzzword
5. 5. Information Architecture @kirstenschelper Was ist Information Architecture?
6. 6. Information Architecture Wikipedia Informationsarchitektur bezeichnet sowohl die Struktur als auch die Gestaltung der Struktur eines Informationsangebots.
7. 7. Information Architecture @kirstenschelper Alles klar? www.pixabay.com/de/katze-hauskate-tier-augen-blick-278187/
8. 8. Information Architecture Pierre Croft Good IA considers users needs from the start. http://www.smashingmagazine.com/2014/10/20/improving-information-architecture-card-sorting-beginners-guide/
9. 9. Information Architecture @kirstenschelper Was finde ich wo? Wie kann ich hier [dies-und-das] machen? Information Architecture = stellt sich auf die Seite der Besucher
10. 10. Information Architecture @kirstenschelper Was bedeutet das fr unser konkretes Projekt?
11. 11. Information Architecture @kirstenschelper Richtige Reihenfolge 1. Content Strategie & Information Architecture 2. Design 3. Coding
12. 12. Information Architecture @kirstenschelper Aber wir haben doch schon einen Entwurf vom Designer!
13. 13. Information Architecture @kirstenschelper Gar nicht gut. www.ickr.com/photos/48509939@N07/5927758528
14. 14. Information Architecture @kirstenschelper Falsche Reihenfolge! 1.Design 2. Content Strategie & Information Architecture 3. Coding So ein Flow-Chart-Dings
15. 15. Information Architecture @kirstenschelper Warum ist das eine falsch und das andere richtig? 1. Ohne gute IA muss der Designer raten welcher Inhalt wo steht und welches Gewicht er hat. 2. Die Chance, dass er falsch rt, ist hoch. 3. Fehler werden erst kurz vor Launch am fertigen Produkt sichtbar.
16. 16. Information Architecture @kirstenschelper Lets do some IA!
17. 17. Information Architecture @kirstenschelper Moment, IA und Navigation ist das nicht dasselbe? Code is Poetry
18. 18. Information Architecture @kirstenschelper = UI-Elemente, auf die der User klicken kann. (Button, Links, Querverweise zu hnlichen Inhalten etc.) Navigation Information Architecture = alle Inhalte und Funktionen. (Position, Gewichtung, Reihenfolge, Bezge, Wege, Hierarchie etc.)
19. 19. Information Architecture Navigation
20. 20. Information Architecture @kirstenschelper Lets do some IA!
21. 21. Information Architecture @kirstenschelper www.flickr.com/photos/39908901@N06/9623792861/ Gehts jetzt endlich los?!
22. 22. Information Architecture @kirstenschelper 1. Ist-Zustand erfassen Content Inventory/Content Audit Zusammentragen und bewerten (R = redundant O = outdated T = trivial) *Redesign
23. 23. Information Architecture @kirstenschelper 2. Inhalte konzipieren (Content Strategy) Fragen an den Kunden Mit wem wollen Sie ins Gesprch kommen? Was genau mchten Sie vermitteln? Mit welchen Fragen kommen die Besucher der Seite?
24. 24. Information Architecture @kirstenschelper 3. Erkenntnisse festhalten 1. Ebene 1. Ebene1. Ebene 2. Ebene 2. Ebene2. Ebene 3. Ebene 3. Ebene3. Ebene Tabelle
25. 25. Information Architecture @kirstenschelper 4. Die Sicht der User einnehmen Michael, 34, Informatiker Zur Lebenssituation: Michael ist ein lebenslustiger Mensch. Er hat schon viel ausprobiert, ist weit gereist. Er mag seinen Beruf. Schwierig dabei findet er, dass er daneben wenig Raum fr sich findet. Er fhlt sich manchmal etwas verloren. Manchmal sieht er keinen wirklichen Sinn in dem was er tglich tut. Dann ist er mde und unzufrieden. Er tut sich schwer damit, eine Beziehung zur Amtskirche aufzubauen. Er hat allerdings den Eindruck, dass Orden etwas anders ticken. Ledig, keine Kinder Gute Freunde, aber keine dauerhaften Beziehungen Getauft aber wenig Berhrungspunkte mit Kirche Diplom-Informatiker, angestellt Hobbies: Reist gern, geht gern aus, hat aber oft keine Energie dafr Was sucht Michael bei den Franziskanern? Manchmal hat er schon darber nachgedacht, wie es wre, einem Orden beizutreten. Was muss man dafr tun? Welche Voraussetzungen gibt es? Wie viel Zeit hat man, ehe man sich entscheiden muss, ob es fr immer sein soll? Was sind berhaupt die Unterschiede zwischen den Orden? Auf der Startseite der Franziskaner-Website findet er einen Link fr Menschen wie ihn. Michael freut sich. Er kommt auf eine Seite, auf der seine wichtigen Fragen angeschnitten werden. Voraussetzungen, Kontaktmglichkeiten, ein Fahrplan. Man muss sich nicht sofort entscheiden, das ist gut. Er interessiert sich fr Berichte von Brdern, die vor derselben Frage standen. Was bedeutet es, Franziskaner zu sein? Was sind ihre Grundstze, ihre Ziele? Natrlich mchte er auch wissen, wo in Deutschland berhaupt Franziskaner leben. Er liest Berichte zu Projekten aber auch zur Geschichte. Der heilige Franziskus ist ein faszinierender Mensch. Von dort aus stt er auf spirituelle Texte, die ihn sehr ansprechen. .... Samstag, 15. Mrz 14 https://www.flickr.com/photos/uniondocs/5373477033/
26. 26. Information Architecture @kirstenschelper 5. Wireframes Mit echten Texten
27. 27. Information Architecture @kirstenschelper IA beantwortet folgende Fragen Wo steht was im Layout Wie werden die Inhalte gewichtet (gro/klein, erste Stelle/zweite Stelle, oberste Ebene/ weiter innen) Wie viele Elemente und Ebenen hat die Navigation Welche Seitentypen es gibt es Welche UI-Elemente brauchen wir, um den Nutzer zu fhren (Tabs, Buttons, Animationen etc.)
28. 28. Information Architecture @kirstenschelper Was fehlt jetzt noch?
29. 29. Information Architecture @kirstenschelper Stimmt, das Design. https://www.flickr.com/photos/calsidyrose/5029842979
30. 30. Information Architecture @kirstenschelper Die Arbeit des Designer verndert sich 1. Der Designer sitzt nicht vor einem weien Blatt 2. Wireframes geben die Position der Inhalt vor = Viele Entscheidungen sind bereits getroffen (z.B. Art der Navigation, Gewichtung & Reihenfolge der Elemente)
31. 31. Information Architecture @kirstenschelper Wie soll ich denn da kreativ arbeiten?
32. 32. Information Architecture @kirstenschelper Relax.
33. 33. Information Architecture @kirstenschelper https://www.flickr.com/photos/geyring/5290793496/ Wir sind ein Team!
34. 34. Information Architecture @kirstenschelper Der ideale Ablauf
35. 35. Information Architecture @kirstenschelper Coder mit Design-Erfahrung Code is Poetry
36. 36. Information Architecture @kirstenschelper Coder mit Design-Erfahrung + Designer mit Weberfahrung Code is Poetry
37. 37. Information Architecture @kirstenschelper Team aus Designer, Coder & Kunde Code is Poetry
38. 38. Information Architecture @kirstenschelper Arbeit im Team 1. Miteinander reden ausfhrlich, oft und von Anfang an 2. Nicht alleine vor sich hinwursteln 3. Auch mal was Unfertiges diskutieren, schrittweise und zusammen mit dem Kunden entwicklen = Discuss early, discuss often
39. 39. Information Architecture @kirstenschelper Zusammenfassung 1. Den Kunden an die Hand nehmen: Kunden lieben bunte Entwrfe, aber sie wissen nicht, dass das der falsche Einstieg ist. 2. Die richtige Reihenfolge einhalten: Vom Nutzer und vom Inhalt her denken (Content First) 3. Ein gutes Team: Designer mit Weberfahrung & Coder mit Design-Erfahrung 4. Kleine Schritte gehen, zusammen mit dem Kunden
40. 40. Information Architecture @kirstenschelper Eure Fragen!