WORDCAMP KÖLN
dat Öhrchen
Information Architecture
@kirstenschelper
Kirsten Schelper
München
Ausbildung: Designstudium
Derzeitige Beschäftigung: Wor...
Information Architecture
@kirstenschelper
Kirsten Schelper
München
wpmeetup-muenchen.org
die-netzialisten.de
Information Architecture
@kirstenschelper
Information
Architecture
Buzzword
Information Architecture
@kirstenschelper
Was ist 

Information Architecture?
Information Architecture
–Wikipedia
„Informationsarchitektur
bezeichnet sowohl die Struktur als
auch die Gestaltung der St...
Information Architecture
@kirstenschelper
Alles klar?
www.pixabay.com/de/katze-hauskate-tier-augen-blick-278187/
Information Architecture
–Pierre Croft
„Good IA considers users’ needs 

from the start.“
http://www.smashingmagazine.com/...
Information Architecture
@kirstenschelper
» Was finde ich wo?
» Wie kann ich hier [dies-und-das] machen?
Information Archi...
Information Architecture
@kirstenschelper
Was bedeutet das 

für unser konkretes Projekt?
Information Architecture
@kirstenschelper
Richtige Reihenfolge
1. Content Strategie & Information Architecture
2. Design
3...
Information Architecture
@kirstenschelper
Aber wir haben 

doch schon einen
Entwurf
vom Designer!
Information Architecture
@kirstenschelper
Gar nicht gut.
www.flickr.com/photos/48509939@N07/5927758528
Information Architecture
@kirstenschelper
Falsche Reihenfolge!
1.Design
2. Content Strategie & Information Architecture
3....
Information Architecture
@kirstenschelper
Warum ist das eine falsch und das
andere richtig?
1. Ohne gute IA muss der Desig...
Information Architecture
@kirstenschelper
Let’s do some IA!
Information Architecture
@kirstenschelper
Moment, 

IA und Navigation
–ist das nicht
dasselbe?
Code is Poetry
Information Architecture
@kirstenschelper
= UI-Elemente, auf die der User klicken kann.
(Button, Links, Querverweise zu äh...
Information 

Architecture
Navigation
Information Architecture
@kirstenschelper
Let’s do some IA!
Information Architecture
@kirstenschelper
www.flickr.com/photos/39908901@N06/9623792861/
Geht’s jetzt endlich los?!
Information Architecture
@kirstenschelper
1. Ist-Zustand erfassen
Content Inventory/Content Audit

Zusammentragen und bewe...
Information Architecture
@kirstenschelper
2. Inhalte konzipieren (Content Strategy)
Fragen an den Kunden
• Mit wem wollen ...
Information Architecture
@kirstenschelper
3. Erkenntnisse festhalten
1. Ebene 1. Ebene1. Ebene
2. Ebene 2. Ebene2. Ebene
3...
Information Architecture
@kirstenschelper
4. Die Sicht der User einnehmen
Michael, 34, Informatiker
Zur Lebenssituation:
M...
Information Architecture
@kirstenschelper
5. Wireframes
Mit echten Texten
Information Architecture
@kirstenschelper
IA beantwortet folgende Fragen
✓ Wo steht was im Layout
✓ Wie werden die Inhalte...
Information Architecture
@kirstenschelper
Was fehlt jetzt noch?
Information Architecture
@kirstenschelper Stimmt, das Design.
https://www.flickr.com/photos/calsidyrose/5029842979
Information Architecture
@kirstenschelper
Die Arbeit des Designer verändert sich
1. Der Designer sitzt nicht vor einem wei...
Information Architecture
@kirstenschelper
Wie soll ich
denn da kreativ
arbeiten?
Information Architecture
@kirstenschelper
Relax.
Information Architecture
@kirstenschelper
https://www.flickr.com/photos/geyring/5290793496/
Wir sind ein Team!
Information Architecture
@kirstenschelper
Der ideale Ablauf
Information Architecture
@kirstenschelper
Coder mit Design-Erfahrung
Code is Poetry
Information Architecture
@kirstenschelper
Coder mit Design-Erfahrung + Designer mit Weberfahrung
Code is Poetry
Information Architecture
@kirstenschelper
Team aus Designer, Coder & Kunde
Code is Poetry
Information Architecture
@kirstenschelper
Arbeit im Team
1. Miteinander reden –ausführlich, oft und von Anfang an
2. Nicht...
Information Architecture
@kirstenschelper
Zusammenfassung
1. Den Kunden an die Hand nehmen:

Kunden lieben bunte Entwürfe,...
Information Architecture
@kirstenschelper
Eure Fragen!
Nächste SlideShare
Wird geladen in …5
×

Buzzword Information Architecture

4.965 Aufrufe

Veröffentlicht am

WordCamp Köln 2015

Veröffentlicht in: Präsentationen & Vorträge
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.965
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3.422
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Buzzword Information Architecture

  1. 1. WORDCAMP KÖLN dat Öhrchen
  2. 2. Information Architecture @kirstenschelper Kirsten Schelper München Ausbildung: Designstudium Derzeitige Beschäftigung: WordPress-Themes
  3. 3. Information Architecture @kirstenschelper Kirsten Schelper München 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 
 für 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.flickr.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 rät, ist hoch. 3. Fehler werden erst kurz vor Launch am fertigen Produkt sichtbar.
  16. 16. Information Architecture @kirstenschelper Let’s 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, Bezüge, Wege, Hierarchie etc.)
  19. 19. Information 
 Architecture Navigation
  20. 20. Information Architecture @kirstenschelper Let’s do some IA!
  21. 21. Information Architecture @kirstenschelper www.flickr.com/photos/39908901@N06/9623792861/ Geht’s 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 Gespräch kommen? • Was genau möchten 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 für sich findet. Er fühlt sich manchmal etwas verloren. Manchmal sieht er keinen wirklichen Sinn in dem was er täglich tut. Dann ist er müde 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 Berührungspunkte mit Kirche Diplom-Informatiker, angestellt Hobbies: Reist gern, geht gern aus, hat aber oft keine Energie dafür Was sucht Michael bei den Franziskanern? Manchmal hat er schon darüber nachgedacht, wie es wäre, einem Orden beizutreten. Was muss man dafür tun? Welche Voraussetzungen gibt es? Wie viel Zeit hat man, ehe man sich entscheiden muss, ob es „für immer“ sein soll? Was sind überhaupt die Unterschiede zwischen den Orden? Auf der Startseite der Franziskaner-Website findet er einen Link für Menschen wie ihn. Michael freut sich. Er kommt auf eine Seite, auf der seine wichtigen Fragen angeschnitten werden. Voraussetzungen, Kontaktmöglichkeiten, ein „Fahrplan“. Man muss sich nicht sofort entscheiden, das ist gut. Er interessiert sich für Berichte von Brüdern, die vor derselben Frage standen. Was bedeutet es, Franziskaner zu sein? Was sind ihre Grundsätze, ihre Ziele? Natürlich möchte 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 stößt er auf spirituelle Texte, die ihn sehr ansprechen. .... Samstag, 15. März 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 führen (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 verändert sich 1. Der Designer sitzt nicht vor einem weißen 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 –ausführlich, 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 Entwürfe, 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!

×