WORDCAMP KÖLN

dat Öhrchen

Information Architecture

@kirstenschelper

Kirsten Schelper München

Ausbildung: Designstudium Derzeitige Beschäftigung: WordPress-Themes

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 Struktur

eines Informationsangebots.“

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/2014/10/20/improving-information-architecture-card-sorting-beginners-guide/

Information Architecture

@kirstenschelper

» Was finde ich wo? » Wie kann ich hier [dies-und-das] machen?

Information Architecture = stellt sich auf die Seite der Besucher

Information Architecture

@kirstenschelper

Was bedeutet das für unser konkretes Projekt?

Information Architecture

@kirstenschelper

Richtige Reihenfolge

1. Content Strategie & Information Architecture

2. Design

3. Coding

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. Coding So ein Flow-Chart-Dings

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.

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 ähnlichen Inhalten etc.)

Navigation

Information Architecture= alle Inhalte und Funktionen. (Position, Gewichtung, Reihenfolge, Bezüge, Wege, Hierarchie etc.)

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 AuditZusammentragen und bewerten (R = redundant O = outdated T = trivial) *Redesign

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?

Information Architecture

@kirstenschelper

3. Erkenntnisse festhalten

1. Ebene 1. Ebene1. Ebene

2. Ebene 2. Ebene2. Ebene

3. Ebene 3. Ebene3. Ebene

Tabelle

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 KinderGute Freunde, aber keine dauerhaften BeziehungenGetauft aber wenig Berührungspunkte mit KircheDiplom-Informatiker, angestelltHobbies: 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/

Information Architecture

@kirstenschelper

5. Wireframes

Mit echten Texten

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.)

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ßen Blatt

2. Wireframes geben die Position der Inhalt vor

= Viele Entscheidungen sind bereits getroffen (z.B. Art der Navigation, Gewichtung & Reihenfolge der Elemente)

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 alleine vor sich hinwursteln

3. Auch mal was Unfertiges diskutieren, schrittweise und zusammen mit dem Kunden entwicklen

= Discuss early, discuss often

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

Information Architecture

@kirstenschelper

Eure Fragen!