User Experience Sux

Axure ist nicht nur statisch, sondern kann auch mit externen Inhalten angereichert werden. Hier als Beispiel eine Integration von Google Maps.

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

Software ajax, axure, beispiel, google maps, iframe

Mit der steigenden Verbreitung von AJAX-basierten Websites kommt sicher auch die Frage auf, wie man solche Verhaltensweisen (z.B. Nachladen eines Teils einer Seite) in Axure nachbauen kann.

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

Software ajax, axure, beispiel

Leah Buley von Adaptive Path hat anlässlich des letzten IA Summit einen Vortrag zum Thema ‘How to be a UX Team Of One‘ gehalten. Sie hat dabei das Gewicht Ihrer Präsentation auf einen Punkt innerhalb des grossen Aufgabengebietes gelegt: Design (inkl. Informationsarchitektur mit Storyboards, Wireframes sowie Styling).

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

Methoden, Prinzipien, Vortrag design, IA Summit 2008, team, teamwork, user experience, Vortrag

Beinahe jeden Tag füllen wir online irgendwelche Formulare aus. Die einen sind gut strukturiert und durchdacht, aber beim grössten Teil nerven wir uns nur. Luke Wroblewski, Senior Principal of Product Ideation & Design bei Yahoo! Inc. und Gründer von LukeW Interface Designs, einer Prroduktstrategie und Designagentur, versucht nun, dies mit seinem neuen Buch zu ändern.

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…

Literatur, Prinzipien amazon, buch, design, form, interface, lukew, web

Bis vor wenigen Jahren galt es eine Website bzw. eine webbasierte Applikation auf möglichst den gängigen Browsern und Betriebssystemen lauffähig zu machen. Dies ist auch heute noch so, es kommt jedoch vermehrt eine neue Konstante dazu: der Ort der ‘Konsumation’ bzw. der Bedienung des Interfaces. Heute browsen wir in der U-Bahn oder bestellen in Starbucks die neuesten Songs via iPhone, und das ganze meist in einer - im Vergleich zu den grossen Flachbildschirmen - relativ kleinen Auflösung. Und es fehlen zur Bedienung meist Keyboard und Maus.

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.

Allgemeines, Theorie applikationen, auflösung, benutzeroberfläche, gui, iphone, user interface

Jesse James Garrett liefert in seinem PDF eine hervorragende Übersicht darüber, was UX ausmacht und wie die diversen Ebenen zusammenspielen. Die Schwierigkeit der Experience liegt nach seinen Aussagen heute darin, dass das Web in zweierlei Hinsicht genutzt wird: als Software Interface und als Hypertext System. Diese beiden Ausprägungen stellt er gekonnt gegenüber und zeigt Gemeinsamkeiten und Unterschiede auf.

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

[via del.icio.us]

Prinzipien, Theorie information-oriented, interface, jjg, pdf, task-oriented, übersicht, user experience

Die mit Microsoft Office 2007 lancierten Ribbons können sicherlich als - wenn auch polarisierende - Innovation angesehen werden (ein interessanter Vortrag zur Entstehungsgeschichte der Ribbons findet sich bei Jensen Harris vom Office User Experience Team ). Jahrelang hat man sich an die Dropdown-Menüs gewöhnt, und auf einmal sind die Funktionen nicht mehr dort, wo man sie während eben diesen Jahren jeweils gefunden hat. Hier springen nun die ´Search Commands´ in die Bresche:

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]

Allgemeines, Software, Vortrag befehle, commands, microsoft, office, ribbons, search, suchen, user experience

Anlässlich des IA Summit 2008 hat Jared Spool eine interessante Keynote zum Thema Design bzw. dem Wandel des User-Centered Design gegeben. Seit den 80er Jahren existiert UCD, entstanden in einer Welt aus blinkenden Videorecorder-Uhren und Computern, welche man mit Vorliebe via Kommandozeilen gesteuert hat. Bald schon hat man gemerkt, dass man nicht nur designen bzw. programmieren, sondern vermehrt den User ins Zentrum rücken sollte. Heute jedoch, 25 Jahre später, macht man sich wieder Gedanken über diese User-Friendlyness. Bringt UCD wirklich so viel und ist es nicht viel eher eine (finanzielle) Belastung, welche dem Design wertvolle Ressourcen abknöpft?

[...] 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:

Vortrag design, google, ia, IA Summit 2008, präsentation, ucd, user-centered design, Vortrag

Aufgrund dieser 10 Grundprinzipien generiert Google (gute) User Experience:

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]

Listen, Prinzipien design, google, gui, ucd, user experience

Gerade bei langen und verzweigten Abläufen auf einer Website oder einer Applikation können sog. Swimlanes helfen, wie sie bspw. von nForm eingesetzt werden. Swimlanes (oder dt. “Schwimm-Bahnen”, naja) können dem Betrachter helfen, die User, die Business Bedürfnisse sowie die Technologie auf einen Blick zu erfassen. Und das alles in einem Dokument, welches aus diesen fünf Bereichen bestehen kann bzw. sollte:

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

Methoden best practice, Methoden, swimlanes, use cases, user experience, userflow, ux, wireframes