1. Einen Inline-Frame einfügen

2. für den Frame ein Default Target einrichten:

3. Selbstverständlich muss man den einzubettenden Inhalt vorher mal vorbereiten. Bei Google Maps gibt’s ja die Möglichkeit, sich einen Kartenausschnitt als iframe generieren zu lassen. Danach packt man den Code in ein HTML-File uns lädt es irgendwo rauf. Wichtig: da wir das ganze bündig einbetten wollen, sollte im HTML-File kein Rand vorhanden sein. HTML-File ansehen

4. Bei den Link Properties in Axure das soeben generierte externe File angeben. Damit dies auch von überall her verwendet werden kann (z.B. auch vom Kunden aus), sollte kein lokales File verwendet werden.

5. Den Google iFrame Code haben wir beispielshalber auf 200×200 Pixel eingestellt. Diese Masse werden nun auch auf den Frame in Axure übertragen:

6. Da das ganze bündig und ohne Scrollbalken daherkommen soll, schalten wir den Border aus und stellen Never Show Scrollbars ein.

7. Fertig!
Beispiel online ansehen
Axure-File zum Download

Der Nachteil an Abläufen in Axure ist, dass man zwar auf eine bestimmte Zeit hin timen kann, jedoch nur einmal. Das heisst, Abläufe wie “warte 0.5 Sekunden - zeige Panel 2 - warte nochmal 0.5 Sekunden - zeige Panel 3″ sind nicht möglich. Jedenfalls nicht ohne Hack.

Beispiel: Folgende Applikation soll gebaut werden. Ich gebe einen Wert in ein Formular ein, drücke einen Knopf und im Hintergrund wird der Wert verschickt (was mir auch angezeigt wird). Dann soll die Bestätigung des Versands angezeigt werden.

1. Wir erstellen in Axure ein dynamisches Panel und definieren 3 Stati:

2. Start Panel = das Formular im Anfangsstadium. Der Absenden-Button zeigt auf Panel-Status Nr. 2 ‘in progress’

3. in progress Panel = der AJAX-alike Teil. Wir erstellen zuerst mal die Ansicht, welche der Benutzer sehen soll, nachdem er auf den ‘absenden’-Button gedrückt hat:

4. Jetzt beginnt die Magie: über das ‘in Progress’-Bild packen wir eine Imagemap und versehen sie mit einem Onmouseout-Event. Wenn ich also mit der Maus aus dem Bereich fahre, wartet das System 0.5 Sekunden und leitet mich zur Ergebnisseite weiter.

5. Nun fehlt nur noch die Ergebnis-Seite, welche das Ganze abschliesst.

6. Fertig!
Beispiel ansehen
Axure File zum Download

Sie schildert darin u.a. ihr erstes Projekt bei Adaptive Path, bei welchem sie plötzlich selbst kreativ sein musste und mit eigenen Ideen kommen sollte. In ihrem vorherigen Job als One Man Show musste sie ‘lediglich’ den Input einer Requirements-Phase verarbeiten und den Entwickler entsprechend anleiten. Dank Teamwork jedoch gelang es, diverse verschiedene Ideen zu generieren. Hier das beschriebene Vorgehen, welches sie als Best Practice ansieht:

1. Brainstorm a lot

Leah stellt drei Brainstorming-Leitplanken vor, damit man diesen wichtigen kreativen Prozess nicht vollig losgelöst auf einem weissen Papier starten muss:

• Spectrum - eine Bandbreite, bspw. von Neukunde bis hin zum bestehenden Kunden. Je nach Kundenstatus kann ein User Interface anders aussehen oder andere Informationen anzeigen.
• 2×2 - eigentlich 2 übereinandergelegte spectren, ein Kreuz, welches je 2 Eigenschaften gegenüberstellt. Beispielsweise kann man das erste spectrum um eine Dimension ‘automatisch’ vs. ‘manuell’ ergänzen.
• Grid - ein Raster gibt Gelegenheit, bspw. eine Website oder eine Applikation auf verschiedene Ausrichtungen hin zu designen. Geht’s zum Beispiel darum, die schönsten Einladungen zu verschicken, sich mit Freunden auszutauschen oder die genialste Technologie zu pushen?

2. Assemble an adhoc team

Nebst der Brainstorming-Arbeit im Designteam gibt es die Möglichkeit, die Entwicklung von Ideen durch einen grösseren Teilnehmerkreis generieren zu lassen. Auch hier gibt Leah einige praktische Vorschläge:

• Sketchboard - alle Entwürfe werden gruppiert und auf einem grossen Blatt bzw. einer Tafel arrangiert. Dank dem Board ist es möglich, selbst mit dafür ungeschulten Leuten über Design und Interaktion zu sprechen.
• Open Design Sessions - Team-’fremde’ Leute werden mit Papier und Schreibzeug ausgestattet und können anhand einiger weniger Leitplanken Ideen generieren (z.B. “Wie soll eine Applikation xy aussehen und was muss diese können?”). Wichtig: Pizza kurbelt die Kreativität und Motivation an.
• Template-based workshops - Diese Methode eignet sich v.a. für eine Gruppe von Leuten, welche ein wenig mehr Leitung und Richtlinien brauchen. So kann man zum Beispiel eine Vorlage für eine Produkteverpackung machen, bei welchem die Teilnehmer die Vor- und Rückseite designen sollen.
• Decorate your space - Wenn die Ideen nach dem Brainstorming gleich in einer Schublade verschwinden, können andere Leute im Büro leider gar nicht auf die Idee kommen, Feedback dazu zu geben. Man hängt also die Skizzen im seinem Cubicle auf und fragt Leute auf dem Weg zum Watercooler, was sie denn so davon halten.

3. Pick the best ideas

Nun geht es darum, aus der Vielzahl von generierten Ideen diejenigen rauszupicken, welche erfolgversprechend sind. Zur Messung der Eigung einer Idee werden sehr häufig die Business Needs herangezogen (ROI, Reach, Umsatz,…). ABER: “Business needs are good… User needs are better”. Diese beiden Needs zusammen ergeben die Design Principles.

Diese Design Prinzipen sollen sinnvoll, produktfokussiert und auch ‘catchy’ sein. Ein Beispiel: “Easy to use” oder “make it addictive”. BTW - jedes Produkt sollte einfach zu benutzen sein, aber da sich die Produkte stark unterscheiden (z.B. Flickr vs. Dr. Tax), sollten die Design Principles sehr aufs jeweilige Produkt bezogen sein.

Durch die Design Principles können die generierten Ideen eingeschränkt und die wertvollen aussortiert werden. Ausserdem sind sie wichtig zur Verteidigng der eingeschlagenen Richtung, d.h. Fragen wie “wo ist denn der Scroll-Ticker?” können mit den Prinzipien abgeblockt werden, wenn diese keinen scrollenden Ticker vorsehen.

Zusammenfassung

• Im kreativen Prozess möglichst viel Brainstorming (”…generate ideas…”). Dann die stärksten Ideen weiterverfolgen (”…refine ideas…”).
• Sich selbst dazu zwingen, Ideen zu generieren, bevor man sich ans Verfeinern von bereits gefundenen macht.
• andere Leute mit einbeziehen
• Design Prinzipien skizzieren.

Präsentation inkl. Audio:

| View | Upload your own

Auszug aus der Beschreibung:

Forms make or break the most crucial online interactions: checkout (commerce), registration (community), data input (participation and sharing), and any task requiring information entry. In Web Form Design, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms…

Das Buch kann u.a. via Amazon gekauft werden. Als Besonderheit können sämtliche Illustrationen via Flickr angesehen und heruntergeladen werden. Mehr Infos auf der Verlagsseite…

Dave Shea spricht in seinem Artikel ‘The web beyond the desktop’ von Place Shifting:

[...] as the place and time of web usage changes, so too do conditions and constraints. Interacting with a smaller device may not be as easy as interacting with a desktop. Lighting and viewing conditions are not equal between indoor and outdoor environments. And a desktop assumes the user’s attention, but other contexts may critically divide attention.

So gilt es, für die Entwicklung einer Web-Applikation folgende Punkte genauer anzuschauen:

• Wo wird sie konsumiert bzw. bedient (im Auto, zuhause auf dem Sofa,…)
• Für welche Auflösung soll die Applikation optimiert werden?
• Ist die Applikation bzw. der Benutzerkreis dermassen (finanziell) wichtig, dass sie für diverse Oberflächen optimiert werden muss (Beispiel: Facebook)

Es wird klar, dass hier für die Zukunft eine variablere Lösung für Kreation und die spätere Benutzung gefunden werden muss. Nach Dave Shea wird es einen Wandel geben hin zu universellen Sites und Applikationen:

[...] an awareness of the increasingly diverse methods and devices that people will be using to interact with the web is a fundamental first step toward building truly universal sites and applications.

Die Grafik wurde u.a. in Buch ‘The Elements of User Experience‘ veröffentlicht. PDF herunterladen

[via del.icio.us]

Die von Microsoft Office Labs entwickelte Suchfunktion listet nach Eingabe eines Keywords alle Begriffe auf, welche dies beinhalten. Mit den Tasten [WIN] + [Y] gelangt man von jeder Ansicht direkt aufs Suchfeld. Das ganze gibt’s vorläufig für die englischen Varianten von Word, Excel und PowerPoint.

Download und Infos

[via Lifehacker]

[...] fundamental techniques, such as usability testing and persona development, are now regularly under attack. And let’s not forget that today’s shining stars, such as Google, Facebook, Twitter, and the iPod, came to their success without UCD practices.

Is it time for user-centered design to evolve into something else? Or is there something else happening in our world of experience design that makes UCD obsolete? Should something else occupy the center of design? [Quelle: uie.com]

Hier der Link zur sehenswerten Präsentation inkl. hörenswertem Audio:

1. Useful: focus on people -their lives, their work, their dreams.
2. Fast: every millisecond counts
3. Simple: simplicity is powerful.
4. Engaging: engage beginners an attract experts.
5. Innovative: dare to be innovative.
6. Universal: design for the world.
7. Profitable: plan for today’s and tomorrow’s business.
8. Beautiful: delight the eye without distracting the mind.
9. Trustworthy: be worthy of people’s trust.
10. Personable: add a human touch.

Prinzip #8 trifft meiner Meinung nach bei Google noch nicht allzu oft zu. Die Applikationen sehen halt einfach aus wie von Techies für Techies gemacht. Dies hat aber wohl auch damit zu tun, dass diverse Tools ´mal eine Nebenentwicklung waren und dann in die Google-Welt ‘reingerutscht sind. Ausserdem werden die Tools laufend ausgebaut und erweitert, so dass dann in ein und derselben Oberfläche diverse Elemente bestehen, welche zwar eine ähnliche Funktion (z.B. Links, Buttons) haben, aber optisch anders aussehen. Ein Beispiel dafür ist der Google Reader:

[via Functioning Form]

• Eine Benutzer-Story (high-level), wenn’s geht in Comic/Storyboard-Form
• User-Experience Prozessablauf
• Relevante Geschäftsprozesse
• Werkzeuge und Systeme, welche der User benutzt oder im Hintergrund verwendet
• Feature/Funktionen und Use Case Verweise (Brückenschlag von der Swimlane auf die techn. Dokumentation)

Ein Beispiel für eine Swimlane findet sich auch bei nForm wieder:

Zugegeben, die Dokumente sind sicherlich sehr geeignet fürs Besprechen der Abläufe und Auswirkungen, welche zu Wireframes führen sollen. Anstelle der aufwändigen Comicstrips könnte man sicherlich auch mit Fotos arbeiten.