Responsive Web Design

Responsive Web Design ist eine Herangehensweise an die Website-Gestaltung, die theoretisch unabhängig von den Ausgabegeräten, bzw. deren Bildschirmgröße ist.

Es bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert also auf den Nutzer und dessen Anforderungen.

CSS3 Media Queries ermöglichen es, mittels entsprechender CSS-Eigenschaften individuelle Darstellungen eines Layouts für verschiedene Ausgabemedien zu erzeugen:


Abbildung: Kulturbanause (Hellwig 2011)

So werden großflächige Keyvisuals auf Smartphones (Breite: Bsp. iPhone 320px) und zum Teil auch auf kleinen Tablets (small tablet = ca. 480px) ausgeblendet und die Seite beginnt mit Textinhalt oder der Navigation (siehe Abbildung links).
Mit zunehmender Displaygröße nimmt für gewöhnlich auch der Bildbereich zu. Gab es vorher nur eine Textspalte, so werden daraus nun meistens zwei Spalten, bei Websites mit drei oder vier Spalten werden diese oft erst bei Aufrufen der Website auf Laptop oder Monitor angezeigt.

Kersley (2011) stellt ein praktisches Webtool zur Verfügung, mit dem beim Entwickeln der Website alle Ausgabegrößen im Auge behalten werden können:


Abbildung: Webtool zum Test des Responsive Web Designs (Kersley 2011)

Kersley unterscheidet für tragbare Geräte fünf Größen:

• 240 x 320 px (small phone)
• 320 x 480 px (iPhone)
• 480 x 640 px (small tablet)
• 768 x 1024 px (iPad – Portrait)
• 1024 x 768 px (iPad – Landscape)

Das Tool spiegelt die Funktionalität des Endgeräts allerdings nicht zu 100% wieder, da nicht alle geräteabhängigen Einstellungen berücksichtigt werden können, sondern lediglich der Viewport des Endgeräts simuliert wird – trotzdem ist es für schnelle Tests zwischendurch durchaus brauchbar.

Gute Beispiele für Responsive Web Design:

http://mediaqueri.es/ (Website-Sammlung!)
http://mattkersley.com/
http://www.smart-urban-stage.com/

Weitere Informationen z.B. in „Responsive Web Design“ (Marcotte 2011).

Quellen:

• Yeebase media GmbH, t3n (2011): Responsive Webdesign mit HTML5 und CSS3-Grundlagen (06.10.2011)
http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/
• Webstandard (2011): Responsive Webdesign – Verschiedene Devices simulieren und testen
http://webstandard.kulando.de/post/2011/09/21/responsive-webdesign-verschiedene-devices-simulieren-und-testen
• Jonas Hellwig (2011): Kulturbanause
http://kulturbanause.de/
• Matt Kersley (2011): Test your own site
http://mattkersley.com/responsive/

Weiterführende Literatur:

• Ethan Marcotte (2011): Responsive Web Design

F.lux

Bildschirmbeleuchtung passt sich an die Tageszeit an – gegen schmerzende Augen bei langen Nächten am Computer ;)

http://stereopsis.com/flux/

Mobile Recruiting

Definition: Mobile Recruiting bezeichnet die Nutzung eines Mobiltelefonanschlusses für die Personalgewinnung.

Immer mehr Unternehmen sprechen Bewerber auf deren Lieblingskanal an – dem Smartphone. Diese Entwicklung sei unausweichlich, prognostiziert Stephan Böhm, Professor an der Hochschule Rhein-Main in Wiesbaden. In einer Umfrage zum Thema M-Recruiting (eco 2011) fand er heraus, dass 89 Prozent aller Unternehmen erwarten, in Zukunft Bewerber über mobile Endgeräte auf sich aufmerksam zu machen. Böhm vergleicht die Situation mit den 1990er Jahren, als die ersten Jobbörsen online starteten: “Auch damals dachten viele Unternehmen aufgrund der geringen Reichweite des Netzes, das sei nur ein Gimmick – heute ist dieser Kanal Standard.” Seine Prognose: Mittelfristig rekrutieren Unternehmen standardmäßig über mobile Medien.
Jobportale haben bereits diesen Kommunikationskanal entdeckt und bieten mobile Apps zur Stellensuche an, so z.B. Jobstairs oder StepStone.

Carolin Kanja (Kanja 2011) gibt in ihrer Diplomarbeit einen Einblick in die Trendentwicklung bei Recruiting-Aktivitäten. Demnach nutzt das Mobile Recruiting das Potential der Beschaffungskanäle Internet, Print und direkter Ansprache und kombiniert es mit den Möglichkeiten des mobilen Internets: „Durch das Nutzen von mobilen Endgeräten wie Handys, Smartphones und Webbooks und [...] verbesserter Bandbreiten der Handynetze kann eine innovative Personalbeschaffung von potentiellen Bewerbern stattfinden (Kanja 2011:85, vgl. auch eco 2011).
Zu beachten sind dabei insbesondere Zielgruppen, die mobil-affin sind. Im Folgenden listet Kanja einige Tools aus dem Bereich des Mobile Recruitings, so z.B. SMS, MMS, RSS-Feeds, Twitter oder Mobile Tagging.
Mobile Tagging bezeichnet die Möglichkeit, durch Barcodes Informationen zu vermitteln (cf. QR Code & MS Tag). Dabei erhält ein Plakat, Flyer oder ein Stelleninserat einen Code, der mit einem kamerafähigen Handy abfotografiert werden kann und dann auf die Online-Stellenanzeige oder weitere Informationen weiterleitet.

Ein Wettbewerbsvorteil gegenüber anderen Unternehmen, die (noch) kein Mobile Recruiting nutzen, entsteht durch den zusätzlichen Kommunikationsweg und die bessere Erreichbarkeit von potentiellen Bewerbern, vor allem bei der Zielgruppe der Berufseinsteiger sowie Studenten und Schüler.
Ein Nachteil entsteht durch den zusätzlichen Aufwand, den eine mobile Optimierung aller Informationen erfordert.

Das Forschungsprojekt ReMoMedia – Recruitig in the Mobile Media der Hochschule RheinMain unter der Leitung von Prof. Dr. Wolfgang Jäger und Prof. Dr. Stephan Böhm beschäftigte sich von 2008 bis 2010 mit den Chancen und Perspektiven des Mobile E-Recruiting (cf. eco 2011, Studie).

Die Schlussfolgerungen der Studie lauteten:

• Über viele mobile Technologien herrscht zum Teil noch große Unkenntnis, bzw. Möglichkeiten sind unbekannt, aber es besteht großes Interesse am Thema.
• 89 Prozent der Teilnehmer sind grundsätzlich der Meinung, dass die Bewerberansprache über mobile Endgeräte zukünftig an Bedeutung gewinnen wird.
• 42 Prozent können sich vorstellen, dass in ihrem Unternehmen innerhalb der nächsten zwei Jahre eine mobile Recruiting-Kampagne entwickelt und umgesetzt wird.
• 70 Prozent glauben, dass Unternehmen jetzt Kompetenzen für Mobile Recruiting aufbauen und das Thema organisatorisch verankern müssen
• Das höchste zukünftige Nutzenpotenzial im Rahmen von Mobile Recruiting wird der mobilen Karriere-Website beigemessen: 74 Prozent schätzen den zukünftigen Nutzen als hoch oder eher hoch ein. Es folgen Karriere-/Job-Newsletter per SMS/MMS (64 Prozent) und Mobile Tags auf Stellenanzeigen (58 Prozent).
• Zur Zeit verfügen jedoch nur 8 Prozent bereits über eine für das mobile Internet optimierte Karriere-Website. 14 Prozent planen zumindest einen speziellen Web-Auftritt für mobile Endgeräte.
• 88 Prozent der Teilnehmer können sich grundsätzlich vorstellen, dass ihr Unternehmen Stellenangebote über mobile Endgeräte zur Verfügung stellt. 70 Prozent würden auch Einstiegsmöglichkeiten, 69 Prozent Ansprechpartner und 68 Prozent allgemeine Unternehmensinformationen über diesen Kanal kommunizieren.
• Vor allem Studenten/Absolventen und Schüler/Azubis scheinen prädestiniert für die Ansprache über mobile Endgeräte: Bereits heute schätzen 83 bzw. 78 Prozent den Nutzen zur Ansprache dieser Zielgruppe als hoch oder eher hoch ein. Schaut man fünf Jahre weiter in die Zukunft, steigen diese Werte auf 90 bzw. 87 Prozent.

Praxibeispiele:

Die recruitwerk GmbH (jetzt: Personalwerk GmbH) setzte für E-Plus eine mobile Kampagne um, bei der mit einem QR Code auf Flyern zu mobilen Stellenanzeigen weitergeleitet wurde (recruitwerk):

Aperto move setzte zur Internationalen Automobilausstellung 2008 eine Mobile Recruiting Kampage für Volvo Trucks Gemany um (aperto move 2008):


Chancen:

Udo A. Völke, Geschäftsführer bei Personalwerk (Full-Service Agentur für Personalmarketing) über die Chancen des Mobile Recruiting (HRmarketingblog 2011):

„Aus Rekrutierungs-Sicht: Ein potenzieller Bewerber kann sich dort informieren, wo er sich gerade befindet. Er muss nicht warten, bis er zuhause ist oder den Laptop aufklappen kann. Aus Marketing-Sicht: Ich erreiche den Nutzer mit meiner Arbeitgebermarke oder mit meiner Botschaft in Situationen, in der ich ihn sonst nicht mehr bekomme – etwa, wenn er zuhause auf dem Sofa sitzt und sich schnell per I-Phone oder I-Pad über Nachrichten informiert, Entertainment-Angebote nutzt oder einfach Online-Games spielt. Das gleiche gilt für die Situation unterwegs.“

Quellen:

• arbeits-abc.de (2011): Was ist Mobile Recruiting?
http://arbeits-abc.de/was-ist-mobile-recruiting/
• Computerwoche (2011): Jobsuche per App (05.05.2011)
http://www.computerwoche.de/karriere/hp-young-professional/2484052/
• Aperto move (2008): Mobile Personal Recruiting Kampagne für Volvo im Rahmen der IAA
http://www.apertomove.de/kampagne_volvo.php
• eco – Verband der deutschen Internetwirtschaft e.V. Arbeitskreis W-Recruiting (2011): Job finden über das Handy: Innovatives Personalmarketing immer beliebter
http://www.eco.de/2011/pressemeldungen/job-finden-ueber-das-handy-innovatives-personalmarketing-immer-beliebter.html
Studie: http://www.djm.de/download/mob-rec/Studie_Mobile_Recruiting_2011_Ergebnisse.pdf
• Kanja, Carolin (2011): Recruiting und Assessment im Wandel: Ein kritischer Vergleich konventioneller und elektronischer Personalbeschaffung und Personalauswahl, insbesondere unter arbeitsrechtlichen Aspekten
• recruitwerk GmbH: E-Plus Gruppe – Anzeigenkonzept, Flyer, Give Aways
http://www.recruitwerk.de/E-Plus-Gruppe.86.0.html
• HRmarketingblog (2011): An Mobile kommt auf Dauer keiner mehr vorbei (veröffentlicht am 17.11.2011)
http://www.wuv.de/blogs/hrmarketingblog/personalmarketing/an_mobile_kommt_auf_dauer_keiner_mehr_vorbei

Recruiting at its best – Kaufland Fleischwaren auf Mitarbeitersuche…

… das einzig Gute, was man hierzu wirklich sagen kann:
Wenigstens haben sie ihr Konzept ordentlich durch die gesamte Kampagne durchgezogen ;)

Die Fleischwaren-Traumfabrik:
Flyer.pdf

Semantic Web

Definition: “The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation.”

Ziel des Semantischen Webs ist es, die Bedeutung von Informationen für Computer verwertbar zu machen und damit automatisch für die interessierten Nutzer im Zuge einer Abfrage zu ordnen. Die Informationen im Web sollen von Maschinen interpretiert und automatisch weiterverarbeitet werden können. Informationen über Orte, Personen und Dinge sollen mit Hilfe des Semantischen Webs auf der Basis der Inhalte miteinander in Beziehung gesetzt werden können (vgl. Wikipedia)

Das Sematische Web ist damit eine Zukunftsversion des jetzigen World Wide Web, in dem die Inhalte so aufbereitet sind, dass sie nicht nur für Menschen, sondern auch für Maschinen lesbar und interpretierbar sind. Dadurch könnten beispielsweise Suchmaschinen optimale Treffer liefern. Derzeit sind die Suchmaschinen mehr auf Vermutungen angewiesen – basierend auf einigen Regeln ordnen sie die gefundenen Seiten so, dass diejenigen oben stehen, die am wahrscheinlichsten die gesuchten Informationen enthalten (cf. Jacobsen 2009).

Das Semantic Web, derzeit das Thema einer W3C Arbeitsgruppe, ist eine Vision von Tim Berners-Lee, dem Erfinder des World Wide Web. Das WWW hat unsere Kommunikationsstrukturen, unsere Geschäftsprozesse, die Suche nach Informationen und Unterhaltung revolutioniert – es hat unser tägliches Leben tiefgreifend verändert. Als nächsten Schritt in der Entwicklung des Internet definiert Berners-Lee das Semantic Web als ein “Netz von Daten, die direkt und indirekt von Maschinen verarbeitet werden können.”

Eine Vision des Semantic Web wurde schon 2001 im Scientific American von Tim Berners-Lee, James Hendler und Ora Lassila vorgestellt:

At the doctor’s office, Lucy instructed her Semantic Web agent through her handheld Web browser. The agent promptly retrieved information about Mom’s prescribed treatment from the doctor’s agent, looked up several lists of providers, and checked for the ones in-plan for Mom’s insurance within a 20-mile radius of her home and with a rating of excellent or very good on trusted rating services. It then began trying to find a match between available appointment times (supplied by the agents of individual providers through their Web sites) and Pete’s and Lucy’s busy schedules. (The emphasized keywords indicate terms whose semantics, or meaning, were defined for the agent through the Semantic Web.)

(Dazu: Zusammenfassung der Informatics Review)

Ein weiteres Szenario beschreibt Altova:

“Ihre Firma muss ein dringendes Projekt in ihrer Zweigniederlassung in San Francisco durchführen, für das sie Sie als Berater benötigt. Sie bittet Sie, so bald wie möglich nach San Francisco zu fliegen, um mit der Arbeit zu beginnen. Sie nehmen Ihren Handheld Computer zur Hand, aktivieren den Semantic Web Agenten und weisen ihn an, einen Non-Stop-Flug nach San Francisco zu buchen, der morgen noch vor 10 Uhr Vormittag abfliegt. Wenn möglich hätten Sie gerne einen Sitz am Gang. Sobald Ihr Agent einen passenden Flug findet, in dem noch ein Sitz am Gang frei ist, bucht er den Flug mit Ihrer American Express Card und weist die Kosten in Ihrer Buchhaltung dem Konto Ihres Kunden zu. Gleichzeitig weist er Sie darauf hin, dass Sie daheim einen Zahnarzttermin versäumen und fügt eine Anmerkung zu Ihrem Kalender hinzu, dass Sie den Termin verschieben müssen. Als nächstes geben Sie an, dass Sie eine Limousine benötigen, um zum Büro des Kunden zu gelangen. Ihr Agent sucht daraufhin nach Limousinen-Services mit der Service-Bewertung “sehr gut” und bucht einen Fahrer, der Sie 30 Minuten nach Ankunft des Flugzeugs abholt. Außerdem reserviert Ihnen Ihr Agent ein Zimmer in Ihrem Lieblingshotel in San Francisco und sichert Ihnen dabei mit Ihrer Reward Card-Nummer den günstigsten Preis. Schließlich aktualisiert der Agent Ihren Terminkalender und den Ihres Chefs, trägt die Reiseinformationen ein und druckt die Reisebestätigungen im Büro aus.”

Altova: Der Semantic Web Agent basiert nicht auf Artificial Intelligence, sondern auf strukturierten Gruppen von Informationen und Inferenzregeln, die es ihm erlauben, die Beziehungen zwischen verschiedenen Datenressourcen zu “verstehen”. Der Computer versteht die Informationen dabei nicht wie ein Mensch, kann aber auf Basis der vorhandenen Informationen logische Verbindungen herstellen und Entscheidungen treffen.

Zur Implementierung des Semantic Web müssen semantische Metadaten, also Daten, die Daten beschreiben, zu Informationsquellen hinzugefügt werden, sodass Maschinen die Daten anhand der beschreibenden semantischen Informationen effektiv verarbeiten können.
Wenn genug semantische Informationen mit den Daten verknüpft sind, können Computer Rückschlüsse über die Daten ziehen, d.h. sie können verstehen, worum es sich bei der Datenressource handelt und in welchem Zusammenhang sie mit anderen Daten steht.

Zur Verwendung des Semantic Web müssen Daten aus verschiedenen Domains anhand ihrer Eigenschaften und Beziehungen zu anderen Daten klassifiziert werden. Zu diesem Zweck werden Semantic Web-Technologien wie RDF, RDFS und OWL verwendet.
RDF (Resource Description Framework), eine offizielle W3C Recommendation, ist ein XML-basierter Standard zur Beschreibung von Ressourcen im Internet, Intranet und Extranet. RDF baut auf bestehenden XML- und URI (Uniform Resource Identifier)-Technologien auf, wobei URIs zum Identifizieren der einzelnen Ressourcen und zur Angabe von Statements über Ressourcen dienen. RDF Statements beschreiben eine Ressource (die durch eine URI identifiziert wird), die Eigenschaften einer Ressource und die Werte dieser Eigenschaften. RDF Statements werden oft als “Triples” bezeichnet. Durch Erstellung von Triples mit Subjekt, Prädikat und Objekt in RDF können Maschinen logische Annahmen auf Basis der Assoziationen zwischen Subjekt und Objekt machen. RDF bietet zwar ein Model und eine Syntax zum Beschreiben der Ressourcen, gibt aber keinen Aufschluss über die Semantik (die Bedeutung) der Ressourcen. Zur Definition der Semantik werden RDFS und OWL benötigt.
RDFS (RDF Schema) dient zum Erstellen von Vokabularen, die Gruppen verwandter RDF-Ressoucen und die Beziehungen zwischen diesen Ressourcen beschreiben. Aufbauend auf demselben Triples-Modell wie bei RDF, bestehen RDFS-Triples aus Klassen, Klasseneigenschaften und Werten, die die Klassen und Beziehungen zwischen den Ressourcen in einer bestimmten Domain definieren. Grob gesprochen ist RDFS eine einfache Vokabularsprache zur Beschreibung der Beziehungen zwischen Ressourcen. OWL baut auf RDFS auf und ist ein viel umfangreicheres Vokabular zur Definition von Semantic Web Ontologien.
OWL (Web Ontology Language) ist die dritte W3C-Spezifikation zur Erstellung von Semantic Web Applikationen. Aufbauend auf RDF und RDFS definiert OWL die Arten von Beziehungen, die in RDF mittels eines XML-Vokabulars ausgedrückt werden können, um die Hierarchien und Beziehungen zwischen verschiedenen Ressourcen zu veranschaulichen. Und genau das ist die Definition von “Ontologie” im Zusammenhang mit dem Semantic Web: Ein Schema, das die Hierarchien und Beziehungen zwischen verschiedenen Ressourcen ausdrücklich definiert. Semantic Web-Ontologien bestehen aus einer Taxonomie und einer Reihe von Inferenzregeln, anhand derer Maschinen logische Schlüsse ziehen können (cf. Altova).

Zusätzlich zu den hier beschriebenen Technologien sind auch sogenannte “Proof”-Funktionen bei Semantic Agents vorgesehen, die es Menschen gestatten, die Schritte des Semantic Web Agent, mit denen er zu einer bestimmten Schlussfolgerung gekommen ist, zurückzuverfolgen. Außerdem gibt es Sicherheits- und Trust-Mechanismen in Form von digitalen Signaturen.

Bewertung der Vision des Semantic Web durch Altova:

Beachten Sie, dass die Implementierung von RDF, OWL und dem Semantic Web schrittweise erfolgen wird. Die Fragen: “Was ist das Semantic Web?” und “Wie können es Unternehmen und Einzelpersonen zu ihrem Vorteil nutzen?” erinnern an die anfängliche Verwirrung über den Nutzen von HTTP und das Internet, bevor “WWW” in die Alltagssprache Einzug fand. In Anbetracht des steilen Aufschwungs dieser Technologien ist es aber wahrscheinlich, dass auch die Vision des Semantic Web eines Tages Wirklichkeit werden wird, wenn auch anfangs nur in kleinem Rahmen.

Außerdem wird das Semantic Web – wie derzeit auch Webservice-Implementierungen – anfangs möglicherweise auf Intranet- und Extranet-Applikationen beschränkt bleiben, bis die Probleme der Informationssicherheit zufriedenstellend gelöst sind.

Welche Auswirkungen das Semantic Web haben wird, wird sich erst viel später zeigen, die Möglichkeiten sind jedoch atemberaubend. Einige Verfechter des Semantic Web behaupten, dass es zu einer Evolution des menschlichen Wissens selbst führen wird, da es Menschen dadurch zum ersten Mal möglich sein wird, die Unmengen der auf dieser Welt vorhandenen Daten auf relevante und produktive Art zu filtern und zu kombinieren.

Quellen:

http://semanticweb.org/wiki/Semantic_Web
http://de.wikipedia.org/wiki/Semantisches_Web
http://semantisches-web.net/einleitung/definition/
http://www.w3.org/2001/sw/
• A scenario: http://www.scientificamerican.com/article.cfm?id=the-semantic-web (u.a. von Tim Berners-Lee, dem Begründer des World Wide Web)
• A scenario: http://www.altova.com/de/semantic_web.html (Altova ist ein Unternehmen mit Sitz in Österreich und den USA & Markführer im Bereich XML-Entwicklungstools)
• Jens Jacobsen (2009): Website Konzeption.Addison-Wesley Verlag, München, S. 53
• Diplomarbeit mit dem Titel „Chancen und Auswirkungen des semantischen Webs“ (von Holger Sistig) unter http://semantisches-web.net/
• Lektüre zum Thema unter http://semantic-web-grundlagen.de/wiki/Semantic_Web_%E2%80%93_Grundlagen
• Tim Berners-Lee ursprüngliche Vision des WWW: http://www.w3.org/People/Berners-Lee/Weaving/
• Zusammenfassung Informatics Review: http://www.informatics-review.com/thoughts/semantic.html

Wireframing/Prototyping

In der nachfolgenden Pdf befindet sich ein von mir erstellter Vergleich einiger gängiger Tools zum Erstellen von Wireframes und klickbaren Prototypen.

Natürlich gibt es eine größere Vielfalt an Software-Optionen als hier dargestellt; es handelt sich um meine Endauswahl.
Informationen gibt es über Axure RD, Adobe Fireworks, OmniGraffle Pro, Protoshare, Pidoco und Microsoft Visio.

Ich habe mich letztendlich für Axure RD entschieden – nicht zuletzt wegen der Professionalität des Tools und den unzähligen Features, die das Programm bietet.

wireframe Vergleich

Die Niehaus Wireframe-Technik

Methoden zur Konversionsoptimierung von Neuprojekten

Sandra Niehaus stellte dieses Wireframe-Konzept im Mai 2010 auf der Conversion Conference in San Jose vor. Es wird bereits von verschiedenen Konversionsoptimierern bei Relaunches oder der Neukonzeption von Shops erfolgreich eingesetzt.
Niehaus zeigte, dass normale Wireframes zum Zweck der Orientierung im Ordnungssystem der Website, zur Vermittlung der Basisprinzipien und Strukturierung des Contents nützlich sind, aber in dieser Form noch gewaltige Schwachstellen beinhalten (Schwachstellen: Fokus, Relevanz und Konversion).
Sie regte an, dass das Wireframe über das strukturelle Maß hinaus auch eine konversionsstrategische Komponente bekommt. Aufzuteilen ist diese strategische Komponente in Zielgruppenrelevanz, Objektrelevanz und inhaltliche- und strukturelle Ordnung

Im Punkt Objektrelevanz schlug sie vor, alle Elemente nach Wichtigkeit in Graustufen einzuteilen und jedem Seiten-Element dann eine dieser Graustufen zuzuweisen. Das wichtigste Element bekommt dabei den stärksten Grauwert; alle anderen Elemente entsprechend geringere Werte.

Daraus entsteht ein Wireframe mit unterschiedlich grauen Flächen, die dann bereits im Vorfeld einer Neukonzeption gemäß ihrer Relevanz strukturiert werden können.
Das Besondere am Niehaus-Wireframe zeigt sich dann, wenn man bestimmte Regeln setzt, wie z.B. die Begrenzung des Einsatzes von Call-to-Actions (CTAs) auf max. 2 CTAs. In diesem Moment wird man sowohl als Gestalter und Konzeptioner, aber vor allem auch als Stratege gezwungen, über Zielgruppen-Clusterung, Darstellungsqualität und Produktvielfalt stärker nachzudenken; man wird gezwungen „relevant“ zu sein.
Vor der Erstellung der Niehaus-Wireframes macht es daher Sinn, die Zielgruppen noch einmal intensiver zu beleuchten, denn die Relevanz ist grundsätzlich von Kundenerwartungen und Fokussierungen abhängig.
In der Folge wurde der Vorschlag gemacht, das Wireframing prinzipiell auch dreistufig anzulegen (entsprechend der drei strategischen Komponenten):

1. Stufe: Erstellung eines Zielgruppen-Pareto-Wireframes

Basis der Idee sind die Verwendung bestehender Zielgruppendefinitionen, um Tools, Bedienhilfen, Navi-Elemente, Basis-Element und den gesamten Content-Bedarf grob zu formulieren und zu beschreiben. Ohne jegliche Gewichtung könnten das hunderte von Elementen oder Objekte werden, d.h. sie bedürfen einer späteren Priorisierung nach dem Pareto-Prinzip.

Um zu einer Prioriserung zu gelangen, werden in den unterschiedlichen, skizzierten Zielgruppen Wertschöpfungspotenziale zugewiesen und in einem dritten Schritt werden die entsprechenden Relevanzwerte (grüne Prozentwerte in Grafik) den einzelnen Elementen zugeordnet.

2. Stufe: Erstellung eines Relevanz Niehaus-Wireframes

Die Niehaus Wireframes sollen zunächst den Blick der Konzeptioner auf die wesentlichen Elemente lenken.

Hellgrau: Alle must-have Elemente wie Logo, Meta-Navigation, wichtiger Content aber z.T. auch Hauptnavigation
Mittelgrau: Tertiär-Fokus. Dazu können Hauptnavigation, Kontaktebene, Eingabefelder, Trust-Signals, etc… gehören
Dunkelgrau: Diese Flächen stellen den Sekundär-Fokus dar. Dieser Grauwert wird alle Elementen vergeben, die entweder zum Primär-Fokus führen sollen, oder aber einen anderen wichtigen Beitrag liefern, der diesen Aufmerksamkeitswert berechtigt
Schwarz: Primär-Fokus. Die direkte CTA.

Es wird ausserdem entschieden, ob ein Element “below the fold” oder “above the fold” positioniert wird.

Das spannende an den Niehaus-Wireframes ist, dass sie fast schon eine Eyetracking-Simulation ermöglichen. In folgender Abbildung sieht man, dass bei einem Eyetracking-Test durchaus alle Elemente gemäß ihrer Wichtigkeit fokussiert würden.

3. Stufe: Übertragung der Wireframes in ein finales Storyboard-Wireframe

Das Storyboard-Wireframe ist eigentlich das „klassische Wireframe“. Es stellt bereits einen detaillierten und sorgfältig ausgeführten Prototypen der eigentlichen Website dar. Hier wird der strategische Part der vorherigen Erkenntnisse mit dem echten Content verschmolzen und mit Details versehen.

Fazit: Das vorgestellte Wireframe-Konzept füllt die Lücke zwischen Zielgruppen-Bedürfnissen und Gewichtungen, den daraus abzuleitenden Hypothesen und der realen Umsetzung. Speziell die Niehaus-Wireframes helfen, den User-Fokus stets im Auge zu behalten und sich nicht in der Vielfalt von Tools und Möglichkeiten zu verrennen. Das Wireframekonzept ist ideal für Neukonzeption, eigenständige Landinpages und ReLaunches.

Quellen:

• Niehaus Wireframe-Technik (vollständiger Artikel) http://www.konversionskraft.de/tipps/die-niehaus-wireframe-technik-methoden-zur-konversionsoptimierung-von-neuprojekten.html
• Sandra Niehaus, co-author of the book “Web Design for ROI” (Return on Investment) http://www.wd4roi.com/sandra-niehaus.html
• Niehaus Blog http://www.closed-loop-marketing.com/blog/

Was macht eigentlich ein Konzeptioner?

Synonyme:

Online-Konzeptioner, Konzepter, Konzeptionist, Informationsarchitekt, auch: User Experience Berater

Im englischen Sprachraum:

Information Architect, bzw. User Experience (UX)/User Interface(UI) Designer, die dann hauptsächlich mit analytisch-abstraktem (IA) oder visuellem (UX/UI) Schwerpunkt arbeiten, auch: Concept Developer, Information Designer, User Experience Architect, Experience Director

Um beschreiben zu können, was genau das Berufsfeld eines Konzeptioners beinhaltet, ist zunächst zu erläutern, was unter dem Begriff Informationsarchitektur zu verstehen ist.

Informationsarchitektur

Informationsarchitektur bezeichnet die Konzeption und Definition der Struktur eines Informationssystems, meist eines Computersystems. Weiterhin werden die für den Nutzer des Systems möglichen Interaktionen beschrieben und die An- und Zuordnung sowie Benennung der in dem System enthaltenen Informationseinheiten und Funktionen festgelegt.
Der Begriff wird z. B. bei der Konzeption von Websites verwendet, aber auch bei mobilen Anwendungen und der klassischen Software-Entwicklung. Die Informationsarchitektur folgt in der Regel den Prinzipien der Usability und ist Bestandteil des User Centered Design (Kloppenburg 2011).

Diese Informationsarchitektur wird vom Informationsarchitekt, bzw. dem Konzeptioner erstellt.
Dazu Jacobsen (2009: 98): „In den großen und erfolgreichen amerikanischen Web-Agenturen gibt es hauptberufliche Informations-Architekten. In Deutschland ist das noch die große Ausnahme. Die Funktion des Informations-Architekten übernimmt hier gewöhnlich der Konzepter.“

Durch Recherche der Tätigkeitsprofile von Informationsarchitekten und Konzeptionern in deutschen Stellenanzeigen entstand für mich der Eindruck, dass der Informationsarchitekt im deutschen Sprachraum den Konzeptioner um die Kenntnisse im User Experience Design erweitert und zusätzlich in stärkerem Kundenkontakt steht (vgl. z.B. Jung von Matt – Jobs). Daher:

Informationsarchitekt = Konzeptioner + Usability Berater

Trotzdem spielt die Benutzerfreundlichkeit des entstehenden Internetauftritts für beide Berufsgruppen eine zentrale Rolle.

Konzeptioner

Der Konzeptioner erstellt gemeinsam mit Projektmanager, Screen Designer und Programmierer das Konzept für eine Online- oder Multimedia-Produktion.

Der Arbeitsschwerpunkt des Konzeptioners liegt dabei nicht in der pixelgenauen Gestaltung von Oberflächen (Interfaces), sondern bei der medienintegrativen Gestaltung von Handlungsabläufen bzw. interaktiven Ablaufstrukturen. Dafür erstellt der Konzeptioner zunächst ein Exposé oder Strategisches Konzept, das in einer Grobkonzeption erweitert wird. Nach Abnahme vom Kunden wird dieses Grobkonzept im Detail als Feinkonzept ausgearbeitet (z.B. mit Wireframes). Das Feinkonzept bildet die Grundlage für die Gestaltung der Inhalte (zusammen mit den Textern) und der Oberflächen (zusammen mit den Programmierern und Screen Designern).

Typisches Anforderungsprofil für einen Konzeptioner:
• Kreativität
• Strategisches, analytisches und strukturiertes Denken
• hohe Team- und Kommunikationsfähigkeit
• Kenntnisse in Kunden-, Marken und Werbekommunikation sowie Informationsarchitektur und –vermittlung
• Interdisziplinarität, gutes Ausdrucksvermögen, Beherrschung von Präsentationstechniken
• Grundkenntnisse von Internet-Technologien, Programmierung, Marketing, Werbung und Design

Konzepterstellung

Ein gutes Konzept legt die Basis zum Erfolg. Wichtig ist die Reihenfolge:
Zunächst wird die Zielgruppe und ihre Ziele im Grobkonzept definiert. Anschließend wird erarbeitet, welche Mittel eingesetzt werden. Feinkonzept und Design Konzept sollten abgeschlossen sein, bevor mit der Umsetzung begonnen wird.

Grobkonzept (Jacobsen 2009)

(Einzelne Elemente können auch schon vor Erstellung des Angebots sinnvoll sein)
• Recherche zu Unternehmen/Branche
• Überblick verschaffen, im WWW generell und bei der Konkurrenz
• Recherche zur Zielgruppe/Benutzerprofile entwickeln
• Nutzungsszenarien entwickeln
• Ziele definieren
• Funktionen festlegen
• Ideenfindung/Brainstorming/Mindmapping
• Erste Screens in Zusammenarbeit mit Screendesigner
• CMS/Anbindung an bestehende Systeme
• Mobile Anwendung
• Schreiben des Grobkonzepts und Abnahme durch Kunden

Feinkonzept (Jacobsen 2009)

Das Feinkonzept ist der Fahr- und Konstruktionsplan für die Site. Darin ist jede einzelne HTML-Seite beschrieben (zum Beispiel in Wireframes/ klickbaren Prototypen). Alle Texte, Bilder, Interaktivitäten usw. sind vermerkt, Dynamische Sites (mit Datenbankanbindung) kommen aber nicht mit ins Feinkonzept. Auftraggeber, Projektleiter, Texter, Redakteure, Grafiker, HTML- und Flash-Programmierer – sie alle finden im Feinkonzept sämtliche Informationen, die sie für ihre Arbeit brauchen.
Eine mögliche (bewährte) Vorgehensweise:

1) Informationen sammeln
2) Informationsarchitektur erarbeiten
3) Navigationsarchitektur erstellen
4) Eventuell Layout anlegen (Designkonzept erstellen)
5) Prototypen erstellen und testen (Usability-Testing)
6) Architektur anhand der Testergebnisse überarbeiten
7) Das eigentliche Dokument erstellen (z.B. mit Wireframes inkl. Anmerkungen zu den einzelnen Seitenelementen):

    Informations- und Navigations-Architektur beschreiben
    Übergeordnete Funktionen beschreiben
    Startseite beschreiben
    Inhaltsseiten beschreiben (Text, Bilder, Funktionen)
    Dokument korrigieren lassen (z.B. von Kollegen)

-> Feinkonzept an Auftraggeber schicken und abnehmen lassen

Die Site soll möglichst benutzerfreundlich konstruiert werden. Es zählt immer die Regel: Der Benutzer hat immer Recht. Dort, wo er Dinge sucht, dort sollten sie sein. Wo es das Budget erlaubt, sollten so oft wie möglich die Benutzer miteinbezogen werden, um immer wieder zu testen, ob die Ideen auch ankommen (dazu bald mehr unter -> Usability Testing)

Quellen:

• Cloppenburg, Klaus (2011): Informationsarchitektur. interactive tools GmbH, Berlin. (pdf)
• Jens Jacobsen (2009): Website Konzeption. Addison-Wesley Verlag, München.
http://de.wikipedia.org/wiki/Konzepter
http://www.jvm.com/de/jobs/offers/

Steve Jobs (1955 – 2011)

Here’s to the crazy ones.
The misfits.
The rebels.
The troublemakers.
The round pegs in the square holes.

The ones who see things differently.
They’re not fond of rules.
And they have no respect for the status quo.
You can quote them, disagree with them, glorify or vilify them.

About the only thing you can’t do is ignore them. Because they change things.
They invent. They imagine. They heal.
They explore. They create. They inspire.
They push the human race forward.

Maybe they have to be crazy.

How else can you stare at an empty canvas and see a work of art?
Or sit in silence and hear a song that’s never been written?
Or gaze at a red planet and see a laboratory on wheels?

While some see them as the crazy ones, we see genius.
Because the people who are crazy enough to think they can change the world, are the ones who do.

Steve Jobs, Apple Inc.



Steve Job’s vision of the world in 46 seconds:
watch?feature=player_embedded&v=UvEiSa6_EPA

Quelle:

http://en.wikipedia.org/wiki/Think_Different

Außerdem: Barack Obama: “He changed the way each of us sees the world.”

QR Code und MS Tag

QR-Code (engl.: Quick Response)

QR Code

• zweidimensionaler Code
• Verwendung ist lizenz- und kostenfrei.
• wurde zur Markierung von Baugruppen und Komponenten für die Logistik in der Automobilproduktion des Toyota-Konzerns entwickelt (die konkrete Entwicklung des 2D-Codes übernahm die Tochterfirma Denso Wave)
• Der QR-Code besteht aus einer quadratischen Matrix aus schwarzen und weißen Punkten, die die kodierten Daten binär darstellen. Eine spezielle Markierung in drei der vier Ecken des Quadrats gibt die Orientierung vor
• QR-Codes können mit einem Schriftzug, Logo oder Bild und durch Farbveränderung individualisiert oder mit mehr Aufwand komplett grafisch gestaltet werden. Durch geschicktes Vorgehen und Ausnutzung der Fehlerkorrektur bleibt die Funktion dabei erhalten. Solche QR-Codes werden häufig als „Design-QR-Codes“ oder bei aufwändigerer Gestaltung als „Custom-QR-Codes“ bezeichnet.
• Viele Mobiltelefone und PDAs verfügen über eine eingebaute Kamera und eine Software, die das Interpretieren von QR-Codes ermöglicht. Der als Mobile Tagging bezeichnete Prozess ist in Japan sehr weit verbreitet (z.B. auf Werbeplakaten, im Einreisevisum, etc.). Er verbreitet sich seit 2007 auch in Europa.

    Mobile Tagging: Der Begriff Mobile Tagging (in Deutsch etwa „mobiles Markieren“) beschreibt den Vorgang, bei dem mit Hilfe der Kamera eines mobilen Handgerätes ein Strichcode von einem gekennzeichneten Objekt, aus einer Zeitschrift oder von einem Display ausgelesen wird. Üblicherweise werden als Codes verschiedene 2D-Barcodes verwendet, es sind auch mehrfarbige Codes bekannt. In den Codes können verschiedenste Datenformate gespeichert werden.

• USA: 6,2% aller Smartphone Nutzer nutzen die Möglichkeit QR Codes zu scannen (im Juni 2011 waren es 14 Millionen, davon 53% zwischen 18 und 34 Jahren )
• Nutzen: Firme nutzen den QR Code z.B. zu Werbezwecken, auf Produkten oder auf Websites. Beispiel: Werbeplakat von Calvin Klein (in New York und Los Angeles). Da er beim Vorbeifahren im Auto gescannt werden würde, nahm der Code fast das gesamte Werbeplakat ein:

QR Code Calvin Klein

QR Code als Firmenlogo:

• Nutzer werden zu bestimmten Inhalten oder Informationen geführt ohne sich URLs merken zu müssen oder eine Google-Suche auf Smartphone durchzuführen (zeitsparend!)
• Die Scans werden in einer App auf dem Smartphone gesichert und die dadurch zugänglichen Informationen sind zu jeder Zeit abrufbar
• QR Codes können Smartphones mit anderen kabellosen Geräten verbinden



MS Tags (Microsoft Tag)

MS Tag

• Der MS Tag basiert auf dem von Microsoft entwickelten, 2-dimensionalem Strichcode HCCB (High Capacity Color Barcode) und nutzt vier Farben, funktioniert aber auch in schwarz-weiß.
• Er funktioniert wie ein maschinenlesbarer Weblink (oder verkürzter Weblink): Wenn der MS Tag von einer geeigneten Applikation eingelesen wird, sendet diese die HBBC Daten zum Microsoft Server. Dieser antwortet mit der hinterlegten URL. Daraufhin wird der User in seinem mobilen Browser zu der beabsichtigten Website geleitet.
• Der Nutzer kann den kostenlosen MS Tag Reader auf das mobile Endgerät herunterladen und mit Hilfe der eingebauten Kamera die Tags einlesen
• MS Tags finden sich auf Verpackungen, Flyern und diversen Marketing Materialien (Mobile Marketing)
• Mit kostenlosen Reports (Tag Analytics) lassen sich die Auswirkungen der einzelnen Kampagnen verfolgen und Erfolge messen (wie oft wurde der Tag gescannt, in welchen Zeiträumen, wo wurde gescannt). Die Ergebnisse werden in Diagrammen und Heat Maps dargestellt
• HCC Barcodes wurden von Microsoft speziell für mobile Kameras und entwickelt und können auch aus leicht verwackelten Bildern noch ausgelesen werden. Außerdem können sie sehr klein dargestellt werden
• Die Möglichkeit, auffallende Custom Tags zu kreieren (z.B. mit Adobe Illustrator), macht den Microsoft Tag sehr attraktiv:

Custom MS Tag

Einen guten direkten Vergleich von QR Code und MS Tag (+ Kurzdarstellung JagTag) gibt es außerdem auf notixtech.com (engl.)

P.S.: Augen auf und Verstand einschalten bei der Verwendung! Dazu dieser passende Beitrag: http://blog.oliver-gassner.de/archives/5156-Fuer-jeden-gedankenlos-verwendeten-QR-Code-stirbt-ein-Kaetzechen.html :)

Quellen:

QR Code

http://de.wikipedia.org/wiki/QR-Code
http://www.engadget.com/2011/08/13/comscore-finds-6-2-percent-of-smartphone-users-scan-qr-codes/
http://www.pamelahazelton.com/ecommerce/qr-code-mobile-business/
http://www.mediaproverlag.de/pdf/hrszene/2011/hr-szene_05_11.pdf

MS Tag

http://tag.microsoft.com/what-is-tag/home.aspx
http://en.wikipedia.org/wiki/High_Capacity_Color_Barcode
http://www.pamelahazelton.com/ecommerce/microsoft-tag-mobile-marketing/