Archiv der Kategorie: Informationsarchitektur

Studie “User Experience und Social Shopping”

Shoppping 2.0 – Was sagen die Nutzer zum neuen Einkaufserlebnis?

Es gibt eine neue Studie, die sehr interessant klingt! Ich hab sie selbst noch nicht gelesen, aber sobald ich sie in die Finger krieg, werd ich mehr dazu schreiben! Schließlich besteht ja bereits der Titel aus Reizwörtern erster Güte für eine Shopping-affine Informationsarchitektin! ;)

Shopping 2.0 – usability.de hat das neue Einkaufserlebnis im Internet genauer unter die Lupe genommen. Nachdem Websites wie Etsy, Kaboodle und Woot! in den USA bereits Kult-Status erreicht haben, hält dieser Trend nun auch Einzug in Europa. Grund genug, sich einmal genauer anzusehen, was es mit diesen neuen Shopping-Konzepten auf sich hat: Wie kommen sie bei den deutschen Nutzern an? Wie benutzerfreundlich sind deutsche Social Shopping Sites wie dealjaeger.de oder dawanda.com?

Man kann die Studie bei usability.de für 230,- Euro bestellen.

Nachtrag: Jetzt weiß ich auch wieder, wo ich den Link her hab ;) Exciting Commerce hatte darüber berichtet. Aber hatte mir nicht auch irgend jemand auf der re:publica davon erzählt? Oh je, ich weiß echt gar nix mehr, diese Veranstaltung war die totale Überdosis. ;)

Amazons Warenkorb-Button

amazon_uralt_warenkorbbutton.jpgBrian Eisenberg zeigt in seinem Blogbeitrag Hidden Secrets of the Amazon Shopping Cart die Entwicklung der kleinen blauen Box, in der sich bei Amazon der Warenkorb-Button befindet. Er hat über Jahre hinweg immer mal wieder Screenshots gemacht und geht jetzt ausführlich auf die Veränderungen ein. Bei dem Beitrag sollte man nicht nur Bilder gucken, sondern ihn wirklich aufmerksam lesen. Er zeigt nämlich sehr schön, wie Amazon ausprobiert, testet, anpasst, neues hinzufügt, testet und wieder anpasst.

Als kleines Goodie hat er auch noch einen Uralt-Screenshot, der dem jetzigen Amazon in keinster Weise ähnlich sieht. ;) Der scheint noch älter zu sein, das den, den ich mal vor einiger Zeit in einem anderen Blog gefunden hatte.

(via Get Elastic)

So, eigentlich wollte ich nur auf diesen Blogbeitrag verweisen, aber dann ist mir beim Surfen auf Amazon.com aufgefallen, wie viele Variationen es von der blauen Box mit dem Warenkrob-Button gibt – je nach Produkt – dass ich die einfach mal gesammelt habe:

amazon_bild-19.jpg Die Standard-Box: Einfach nur der Button plus die Möglichkeit, die Menge auszuwählen. Laut Brian Eisenberg gibt’s dieses Dropdown übrigens erst seit kurzem. Vorher konnte man lediglich anschließend im Warenkorb die Menge anpassen.
Gesehen bei: The First Years True Fit Convertible Car Seats Cappuccino
amazon_bild-22.jpg Zusätzlich werden hier noch weitere, ähnliche Artikel aufgelistet. Wann und bei welchen Produkten genau das noch mit angezeigt wird, habe ich nicht rausfinden können.
Gesehen bei: Black & Decker VEC010BD Start It 300 Amp Jump Starter
amazon_bild-26.jpg Klamotten und Schuhe haben den Zusatz, dass man doch Farbe und Größe auswählen soll.
Gesehen bei: crocs Beach Clog
amazon_bild-25.jpg Ist der Artikel noch nicht verfügbar, kann man ihn vorbestellen. Man beachte hierbei die Farbe des Buttons. Garrett Dimon hat zur Visual Language einen schönen Beitrag geschrieben mit den Amazon-Buttons als Beispiel.
Gesehen bei: Sense & Sensibility (with Miss Austen Regrets)
amazon_bild-21.jpg Bei Lebensmitteln kann man neuerdings einstellen, ob man das Produkt regelmäßig automatisch bestellen möchte. Vor kurzem habe ich gerade darüber einen Blogbeitrage gelesen, kann ihn aber nicht mehr finden. Vielleicht war es der hier von Downloadsquad
Gesehen bei: Jell-O Cook & Serve Pudding & Pie Filling, Chocolate, 3.4-Ounce Boxes (Pack of 24)
amazon_bild-28.jpg Bei Handys muss man in den USA immer erst den Zip-Code eingeben, weil die Mobilfunkanbieter überall verfügbar sind. Der nächste Schritt, die Tarifauswahl, findet dann auch in dieser Box statt. Eigentlich ist das hier auch kein Warenkorb-Button, weil der Prozess noch weiter geht.
Gesehen bei: Sony Ericsson W580i Gray Phone (AT&T)
amazon_bild-29.jpg Schritt zwei der Handy- und Tarif-Auswahl. Auch hier noch kein Warenkorb-Button, denn dann kommen noch die Optionen und noch Zubehör. Und dann werden in der blauen Box alle ausgewählten Einzelheiten aufgelistet.
amazon_bild-32.jpg Erfolgt der Verkauf nicht über Amazon sondern über einen Partner, wird der Partner über dem Warenkorb-Button genannt.
Gesehen bei: TKO Exercise Stretch Cords (Light)
amazon_bild-27.jpg Bei Musik gibts natürlich noch den Zusatz, das Album als MP3 downzuloaden. Lustigerweise kann man diese CD auch gegen Pepsi-Points eintauschen. Dafür muss man sich bei PepsiStuff auf Amazon registrieren. Das habe ich mir jetzt nicht genauer angeschaut.
Gesehen bei: As I Am [ENHANCED]
amazon_bild-33.jpg Bei MP3-Downloads bricht Amazon mal aus der blauen Farbe aus: Die Box wird grün!
Gesehen bei: Discipline
amazon_bild-34.jpg Bei „Amazon Shorts“ (Kurzgeschichten?) bin ich auf eine noch alte Variante der Warenkorb-Box gestoßen. Hier gibt es nur einen Download-Button.
Gesehen bei: The First Deadly Sin, an Amazon Short

Weiter hab ich dann nicht mehr gesucht … hatte dann irgendwann keine Lust mehr. ;)

Wie man sieht, tut’s ein Standard-Shop nicht, wenn die Produktpalette nur unterschiedlich genug ist.

Hach je … Amazon … habe gerade mal im Google-Reader nach Amazon gesucht und festgestellt, dass man mit Features auf Amazon einen ganzen Blog füllen kann …

A propos Testing: Thorsten hat grad entdeckt, dass Amazon im Moment hier in Deutschland das neue Design testet. Internet Expolore-Nutzer sehen es schon, während im Firefox noch das alte erscheint.

Und weil er so interessant ist, hier nochmal den Link zum Beitrag Creating a Visual Language von Garrett Dimon.

Die Kunst, einen groben Wireframe zu erstellen

Eigentlich kann ein Blogbeitrag über Informationsarchitektur auch mal nicht schaden, wenn ich schon in der Liste „IA-Blogs“ von Stefan Freimark auftauche. Vielen Dank übrigens, ich fühle mich geehrt! :)

Also … letztens sagte ich zu meinem Kollegen, dass ich mal einen groben Wireframe für eine der Seiten erstellen würde, damit wir uns über den generellen Aufbau abstimmen können.

Kleiner Exkurs: Ein Wireframe ist eine Skizze von einer einzelnen Seite einer Website, wie wir (Informationsarchitekten oder auch Konzepter) sie in Programmen wie Visio, Axure oder webbasierten Wireframe-Tools wie Pidoco erstellen. Diese Skizzen dienen uns in der Konzept-Phase für die Abstimmung mit dem Kunden und letztendlich wird auf Basis von Wireframes das Design und die Programmierung erstellt. So ein Wireframe enthält alle Elemente wie Navigation, Inhalte und Funktionalitäten einer Seite, allerdings nur sehr rudimentär dargestellt. Hübsch werden die Dinger erst, wenn ein Designer dran war. ;)

So, nun hatte ich also angekündigt, einen groben Wireframe zu erstellen. Was dabei rauskam, sah so ähnlich aus wie das hier:

wireframe57.jpg

Was man da sieht, hat zwar jetzt keinerlei inhaltlichen Sinn, da ich zur Demonstration schnell mal einen Wireframe aus alten Modulen zusammen geklickt und entfremdet habe. Kann ja nix Echtes aus einem Projekt zeigen. ;) Was man aber dennoch deutlich erkennen kann … das Ding war alles andere als grob … es war bis ins Detail ausdefiniert. Zwar nicht funktional beschrieben, aber dennoch sehr feinteilig.

Mein Kollege war daraufhin so nett, mich auszulachen. ;-) „Grob ist das aber nicht, du hast ja noch nicht mal einen Platzhalter für die Produkte verwendet, sondern sogar echte Daten von der Website kopiert und eingefügt!“ meinte er. ;-)

Bin ich nicht in der Lage, mit Visio einen groben Wireframe zu erstellen? Das hab ich mich einmal mehr gefragt … anscheinend wirklich nicht. ;) Ich verfalle wohl viel zu schnell in die Ausarbeitung von Details, die für nen schnellen Überblick erstmal gar nicht wichtig sind.

Allerdings habe ich vor kurzem angefangen, Wireframes mit der Hand anzuscribbeln. Hab ich früher nie gemacht, aber nach ein paar Vorträgen über Paper-Prototyping beim Barcamp in Berlin und bei der Web2.0Expo hab ichs dann doch mal ausprobiert.

Also, Visio verleitet zum spielen (mich zumindest). Will ich mal einen schnellen Überblick über mehrere Seiten haben, vor allem wenn sie stark voneinander abhängen, bzw. man sich überlegen muss, welches Modul auf welcher Seite am meisten Sinn macht, dann ist das Skizzieren auf Papier echt von Vorteil.

Für nen komplexen Wireframe kann man im ersten Entwurf schon mal nen ganzen Tag brauchen. Und wenn man dann weitere Wireframes erstellt, und neue Ideen für weitere Module bekommt, kann man das Ding grad nochmal neu zusammen puzzeln.

Geht man aber hin und malt das Ding auf Papier, dann lässt man all die Feinheiten weg, die so viel Zeit kosten. Und man kann ein Modul auch nicht stundenlang von links nach rechts schieben, von hochkant auf quer umarbeiten, von hellgrau nach dunkelgrau einfärben oder was einem sonst noch so einfällt. Man wird auch nicht von Seitenrastern oder vom Bildschirmformat eingeengt. ;) Wichtig ist erstmal, dass alle notwendigen Module vorhanden sind. Alles weitere kann man dann später am Rechner machen. Und selbst wenn sich beispielsweise ein Modul doch für eine andere Seite besser eignet, kann man es auch immer noch ausschneiden und woanders aufkleben. Und diese Skizzen reichen völlig aus, um mit Anderen das Prinzip durchzusprechen, das man sich augedacht hat.

So sehen sie aus, meine handsigniertengemalten Wireframes:

wireframe-scribbles_kl.jpg

Warum hab ich das nicht schon früher so gemacht?

Web 2.0 Expo und IA Konferenz und noch einiges mehr …

Echt viel los im November … leider zu viel auf einmal! :(

Zuerst das Barcamp Berlin 2 am ersten Nov. Wochenende. 300 Teilnehmer aus D + aktuell ca. 50 internationale …Himmel, das wird ja riesig! Bin gespannt!

Barcamp Berlin 2

Direkt im Anschluss gibt’s dann die Web2.0Expo, auch in Berlin:

web2.0expo

Dafür habe ich einen Code für einen 100 EURO Discount oder einen kostenlosen „Full Expo Pass“ zur unlimitierten Nutzung: MLVLBE36 (ja ja, ich weiß, der geistert im ganzen Web rum, aber vielleicht freut sich ja doch noch jemand darüber!)
Während der Web2.0Expo veranstaltet Nicole am 7. Nov. ein Girl Geek Dinner, wohl das erste in D. … klingt cool, da geh ich doch auch mal hin und Oli wird mein Geek sein. ;)

Girl Geek Dinner

Am 8. Nov. findet dann in diversen Städten der World Usability Day statt … dummerweise tagsüber, also kann ich da leider nicht hingehen. :(

World Usability Day

Leider nicht besuchen kann ich die sehr empfehlenswerte IA Konferenz … 3 Konferenzen hintereinander wären mit dann doch ein bissl zu viel. :(
IA Konferenz in Stuttgart: 9 und 10 November

Aber an dieser Stelle mal ein Hallo an Wolf und Jan! Wünsche euch viel Erfolg und Spaß!

Und ich freue mich auf ne coole Woche in Berlin! :)

Nachtrag: Diverse Terminfalschangaben habe ich jetzt beseitigt, danke an Stefan! Jetzt bin ich terminlich wieder richtig sortiert! ;)

Noch zwei nachtragende Events:

– Am 4.11. findet ein Geek Dinner statt, das Event hab ich bisher nur auf Facebook gefunden.

– Am 5.11. findet ein Lunch 2.0 statt, dazu gibts ein Wiki.