eparo – Digital Service Design

Das Blog von eparo.de

19. April, 2016

Axure 8 ist released

Bildschirmfoto 2016-04-19 um 11.28.07

Endlich ist die finale Axure Version 8 herausgekommen und ihr könnt eure Kundenprojekte nun mit der neuen Version angehen. Das Update ist kostenlos und ist echt den Download wert! Hier ist der Link zum Download: http://www.axure.com/download

Eine Übersicht der wichtigsten Neuerungen findet ihr unter der Seite von Axure oder in unserem vergangen Beitrag: Neues in Axure 8. Während unseres letzten Beitrags wurde noch allerhand verändert. Das sind kurz die weiteren Neuerungen, die noch hinzugekommen sind:

Die Benutzeroberfläche hat einen frischen Anstrich bekommen und kann sogar noch über View>Toolbars>Customize Main Toolbar… an die eigene Bedürfnisse angepasst werden kann.

Außerdem gibt es die Möglichkeit für jede Seite individuell festzulegen, ob man auf dieser Adaptive Views nutzen möchte. Davor wurde diese Einstellung im gesamten Prototypen festgelegt.

Leider ist es immer noch nicht möglich Vektorgrafiken in Axure außer als eingefügtes Bild zu nutzen. Aber immerhin gibt es nun eine integrierte Standard Icon Library, bei denen die Icons beliebig eingefärbt und skaliert werden können.

Wer sich einmal Gedanken machen möchte, was ein gutes Prototyping Tool ausmacht und an einen Vergleich zu dem neu entwickelten Tool Adobe Experience Design interessiert ist, der ist herzlich zu den AXChange Meetups eingeladen:
Hamburg – Mittwoch, 20. April 2016
Berlin – Donnerstag, 28. April 2016

Bildschirmfoto 2016-04-19 um 10.41.38

 
22. Dezember, 2015

Axure 8 – Alle Events erklärt

Axure zeichnet sich seit Jahren gegenüber anderen Prototyping Tools dadurch aus, dass jede Idee bis zum High-Fidelity Prototyp erstellt werden kann. Grund dafür ist eine riesige Anzahl an Events, die zahlreiche Aktionen auslösen können. In der neuen Version 8 sind nun noch mehr Events hinzugekommen und die Möglichkeit, diese an den meisten Widgets aufzurufen. Um den Überblick zu behalten, haben wir eine Liste mit allen Widget-Typen und deren Events erstellt.

151222_Axure 8 - Events Overview

Und hier noch eine kurze Erklärung zu jedem Event:

OnClick: Wenn das Widget geklickt wird.
OnMouseEnter: Wenn der Mauszeiger über das Widget bewegt wird.
OnMouseOut: Wenn der Mauszeiger den Bereich des Widgets wieder verlässt.
OnDoubleClick: Wenn das Widget mit einem Doppelklick geklickt wird.
OnContextMenu: Wenn das Widget mit der rechten Maustaste geklickt wird.
OnMouseDown: Wenn das Widget geklickt wurde, die Maustaste aber nicht losgelassen wird.
OnMouseUp: Wenn das Widget geklickt wurde und die Maustaste losgelassen wird.
OnMouseMove: Löst solange aus, wie der Mauszeiger über dem Widget ist.
OnMouseHover: Wenn der Mauszeiger eine Sekunde über dem Widget stillsteht.
OnLongClick: Wenn das Widget geklickt wurde und die Maustaste gehalten wird.
OnKeyDown: Wenn eine Taste auf der Tastatur gedrückt wird, während Text auf dem Widget eingegeben wird.
OnKeyUp: Wenn eine Taste auf der Tastatur losgelassen wird, während Text auf dem Widget eingegeben wird.
OnMove: Wenn das Widget sich bewegt.
OnRotate: Wenn das Widget rotiert wird.
OnResize: Wenn das Widget seine Größe verändert.
OnShow: Wenn das Widget angezeigt wird.
OnHide: Wenn das Widget versteckt wird.
OnFocus: Wenn das Widget fokussiert wird.
OnLostFocus: Wenn das Widget den Fokus verliert.
OnSelectionChange: Wenn in der Droplist eine andere Option ausgewählt wird.
OnSelection: Wenn das Widget selektiert wird.
OnUnselection: Wenn die Selektion des Widgets abgewählt wird.
OnLoad: Wenn das Widget initial beim Start der Seite geladen wird.
OnPanelStateChange: Wenn sich der State des Dynamic Panels ändert.
OnDragStart: Wenn der Drag auf dem Dynamic Panel anfängt.
OnDrag: Wenn das Dynamic Panel gedragged wird.
OnDragDrop: Wenn der Drag auf dem Dynamic Panel endet.
OnSwipeLeft: Wenn das Dynamic Panel von rechts nach links geswiped wird.
OnSwipeRight: Wenn das Dynamic Panel von links nach rechts geswiped wird.
OnSwipeUp: Wenn das Dynamic Panel von unten nach oben geswiped wird.
OnSwipeDown: Wenn das Dynamic Panel von oben nach unten geswiped wird.
OnScroll: Wenn der Inhalt des Dynamic Panels gescrollt wird.
OnScrollUp: Wenn der Inhalt des Dynamic Panels hoch gescrollt wird.
OnScrollDown: Wenn der Inhalt des Dynamic Panels runter gescrollt wird.
OnTextChange: Wenn der Text sich in einem Eingabefeld ändert.
OnItemLoad: Wenn die Elemente des Repeaters geladen werden.
OnItemResize: Wenn die Elemente des Repeaters die Größe verändern.
OnPageLoad: Wenn die Seite geladen wird.
OnWindowResize: Wenn sich die Größe des Browser Fensters ändert.
OnWindowScroll: Wenn das Browser Fenster gescrollt wird.
OnWindowScrollUp: Wenn das Browser Fenster hoch gescrollt wird.
OnWindowScrollDown: Wenn das Browser Fenster runter gescrollt wird.
OnPageClick: Wenn auf der Seite geklickt wird.
OnPageDoubleClick: Wenn auf der Seite mit einem Doppelklick geklickt wird.
OnPageContextMenu: Wenn auf der Seite mit der rechten Maustaste geklickt wird.
OnPageMouseMove: Wenn die Maus auf der Seite bewegt wird.
OnPageKeyDown: Wenn eine Taste auf der Tastatur gedrückt wird.
OnPageKeyUp: Wenn eine Taste auf der Tastatur losgelassen wird.
OnAdaptiveViewChange:   Wenn sich der Adaptive View ändert.
 
14. Dezember, 2015

Neues in Axure 8

Bild 0

Noch ist Axure 8 seit einigen Monaten in der Betaphase, aber sie bringt bereits einige Neuheiten mit sich. In diesem Beitrag haben wir die aus unserer Sicht wichtigsten Veränderungen zusammengefasst.

1 Das Pen Tool und eigene Shapes

Jedem, der einmal Probleme hatte, seine eigenen Icons oder Flächen zu definieren und dafür nicht extra Photoshop öffnen wollte, ist jetzt geholfen. Mit dem Pen Tool lassen sich ähnlich wie in Illustrator eigene Flächen über Ankerpunkte definieren.

Bild 1 - Pen Tool
 
 
 
 
 

Zu dem ist es möglich, die eigenen Shapes abzuspeichern.

Bild 2  

2 Gruppen haben einen neuen Sinn

Eine der wahrscheinlich größten, strukturellen Veränderungen ist die neue Verwendung von Gruppen. Endlich können gruppierte Elemente auch über Events und Aktionen gemeinsam beeinflusst werden. Eine Gruppe wird in der neuen Version mit einem Ordnersymbol im Widget Manager dargestellt und kann wie ein eigenständiges Widget manipuliert werden.

Bild 3  

3 Weitere Events und Actions

Was ihr vielleicht in den CSS3 Animationen kennt, ist nun auch in Axure 8 möglich. Es lassen sich mit Axure 8 nicht nur alle Widgets über die Action Set Size in ihrer Größe verändern lassen, es ist auch die Action Rotate hinzugekommen. Außerdem lassen sich Elemente bei der Nutzung der Action Show/Hide und Set Panel State über eine neue Animation flippen.
Außerdem ist es von nun an möglich über die Action Set Adaptive View von Widgets aus den View zu ändern. Mit der neuen Action Fire Event lässt isch jedes Event auf einem anderen Widget auszulösen. Das klingt erst mal nerdish, aber hilft, um übersichtlicher zu arbeiten. Wir freuen uns drüber :-)
In Bezug auf Events von Widgets lässt sich feststellen, dass sich die Bandbreite an potenziellen Events auf allen Widgets vergrößert hat. Während in der Version 7 das Dynamic Panel eine Art Vormachtstellung hatte, können nun sehr viele Events auch an anderen Widgets aufgerufen werden.

4 Styling und Dokumentation

Wenn ihr Axure 8 öffnet, fallen zunächst die neu gestylten Default Widgets auf. Diese erinnern nun eher an Flat Design. Zu dem gibt es eine neue Rubrik Markup. In dieser befinden sich designte Shapes, die an Post Its erinnern. Außerdem gibt es das interessante Widget Snapshot. Mit diesem lassen sich andere Seiten oder nur einen Bereich aus diesen als referenziertes Bild anzeigen. Mit dieser Palette an Widgets lassen sich so übersichtlichere Dokumentation anfertigen.

Bild 5 - Markups
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Auch der Widget Style Editor hat sich stark verändert. Dieser hat von nun an keine Unterscheidung zwischen Widget Defaults und Custom Styles mehr, sonder lediglich einen Default Style ,auf dem alle anderen Styles aufbauen und einen Bereich mit den definierten Styles für die einzelnen Elemente. Außerdem können in dieser Version mehrere Styles gleichzeitig bearbeitet werden und man erkennt die grundlegenden Veränderungen in einer Direktvorschau.

Bild 6 - Widget Style Editor

Hat man Widgets einen eigenen Style zugewiesen und verändert diese nachträglich am Objekt, gibt es jetzt die Möglichkeit unter den Properties and Style den globalen Style zu updaten. Dies macht es deutlich einfacher, auf einer Dokumentationsseite alle Style-Ausprägungen übersichtlich darzustellen und über diese gegebenenfalls Anpassungen vorzunehmen.

Bild 7 - Update Styles
 
 
 
 
 
 

Um Abfolgen in der Dokumentation darzustellen, hat bestimmt der ein oder andere von euch schon mal auf die Axure Flow Library zurückgegriffen, da diese Elemente den Vorteil hatten sich über Ankerpunkte miteinander verbinden zu lassen. In der neuen Version kann jedes Widget Element bzw. eine Widget-Gruppe über Ankerpunkte verknüpft werden.

Bild 8 - Ankerpunkte
 

5 Weiteres

Die Entwickler in Kalifornien haben in der Version 8 noch an vielen weiteren Stellen kleinere Veränderungen vorgenommen. So ist das Page Properties Panel nicht mehr am unteren Programmrand zu finden, sondern lässt sich über einen Klick in die Seite erreichen. Die Manipulation erfolgt nun in dem Inspector Bereich, der somit nicht nur die Page Properties, sondern auch die Panels Widget Interactions and Notes und Widget Properties and Style vereinigt.
Des Weiteren können Ecken und Umrandungslinien an Shapes einzelnd angesprochen und in ihrem Style beeinflusst werden.
Auch das Repeater Widget hat zwei entscheidende Neuerung erhalten. Zum einen wirken sich Elemente, die im Repeater versteckt sind, nicht auf die Größe bei der Duplizierung aus und zum anderen können über Dynamic Panels gekachelte Elemente auch unterschiedlich Groß sein.
In dieser Version ist auch außerdem möglich Team Project über den AxShare Server zu hosten und Vektorgrafiken zu verwenden.

6 Fazit

In diesem Beitrag haben wir uns auf die wesentlichen Veränderungen fokussiert. Eine tabellarische Sicht findet ihr im Axure Blog.
Insgesamt wurden sehr viele kleinere Anpassungen an allen möglichen Stellen vorgenommen, die die Funktionalität steigern und das zukünftige Arbeiten mit Axure erleichtern werden. Auch wenn diese Veränderungen sich nicht wie ein Quantensprung anfühlen, werden sie vermutlich einen starken Einfluss auf das effektive Bauen von Prototypen haben.
Prototypen können noch einfacher in High-Fidelity gebaut werden. Und auch die Dokumentation von Interaktionen und Elementen wird einfacher.

 
16. Juli, 2015

AXChange Hamburg bei eparo – erstes Axure-Meetup Deutschlands

AXChange Hamburg

Am 10. Juni haben wir bei eparo das erste Axure-Meetup “AXChange Hamburg” Deutschlands organisiert. Mit Unterstützung von Axure aus Kalifornien. Das Ziel: Interessierte und Axure-Fu-Master treffen sich jeden zweiten Mittwoch eines Monats zum lockeren Austausch über das Prototyping mit Axure. Schwerpunktthema des ersten Treffens: „Design-robuste Prototypen und die Auslagerung von Interaktionen in Funktionen“. Christian berichtet.

Die Sache mit der Nachfrage und dem Angebot

„Warum gibt es eigentlich noch kein Treffen von Axure-Interessierten und Fu-Mastern?“ Diese Frage haben wir uns in den vergangenen Jahren oft gestellt. Auch immer mehr Teilnehmer unserer Axure-Kurse (https://eparo.de/training.html) schickten ihre Fragen an eparo. Der Bedarf, sich auszutauschen, wurde offenbar immer größer. Im Mai gründeten wir die Meetup-Gruppe und bis zum ersten Meetup hatten sich mehr als 40 Axuristas angemeldet.

Für das Axure Meetup haben wir uns eine gute Mischung aus allem gewünscht: Austausch, „Lernen von …“ und Hilfestellungen bei konkreten Problemen. Außerdem wollten wir (oder auch andere Teilnehmer) ein Schwerpunktthema vorbereiten. So entstand das AXChange Hamburg Meetup, das jeden zweiten Mittwoch eines Monats stattfindet.
Die Meetup-Gruppe ist hier zu finden: http://www.meetup.com/de/AXChange-Hamburg/

AXChange-Format: das Beste aus Barcamps, Open Spaces und Roundtables

Unser Ziel: am Ende des Tages sollen alle mit dem Gedanken „das hat sich (wieder mal) gelohnt!“ nach Hause gehen. Dafür haben wir das Beste aus Barcamps, Open Spaces und Roundtables in eine Struktur gebracht:

  1. Um 18 Uhr stehen die Türen offen für alle, die sich austauschen möchten oder konkrete Fragen haben.
  2. Um 19 Uhr geht’s dann los: während einer kurzen Vorstellungsrunde schreibt jeder ein oder mehrere Axure-Themen auf, die ihn interessieren. Dann geht’s mit einem Talk im Stile einer Live- Demo weiter.
  3. Nach dem 30-minütigen Talk werden dann die Axure-Themen sortiert und auf die jeweiligen Tischinseln zum Diskutieren und Austauschen verteilt. Wer möchte, kann sich an die jeweilige Insel setzen, die ihn interessiert.

Aller Anfang ist schwer

AXChange TeilnehmerVor dem ersten AXChange lag auch eine gewisse Unsicherheit in der Luft: Passt das Schwerpunktthema? Wie viele werden wohl kommen? Werden wir unser selbstgestecktes Qualitäts-Ziel erreichen?

Total unbegründet: trotz des ersten heißen Sommertages im Jahr waren 18 von angemeldeten 29 Personen da. Die No-Show Rate war zwar ungewöhnlich hoch; dafür war das Feedback nach dem ersten Meetup super und unglaublich motivierend!

Ob über CSS und JavaScript-Integration in Axure, Kompatibilität mit anderen Programmen oder der Austausch über andere Programme und Workflows – alles kam auf den Tisch und wurde mit viel Elan von den Teilnehmern in kleinere Gruppen diskutiert.

Der Beginn einer Reihe…

Inzwischen fand bereits das zweite AXChange Hamburg Meetup statt. In einer kleinen gemütlichen Runde haben wir AxShare und Axure 8 als Schwerpunktthemen durchgesprochen. Wir haben diverse andere Axure-Themen auf den Tischen ausgebreitet und uns recht lange über Team-Projects oder auch über das Bauen von App-Prototypen ausgetauscht.

Am 12. August findet dann schon das dritte AXChange Hamburg Meetup bei uns statt. Wir freuen uns auf neue und alte Gesichter und Themenvorschläge! 
Zum Meetup: http://www.meetup.com/de/AXChange-Hamburg/events/223806735/

AXChange goes Berlin!

Gleich nach dem ersten Meetup haben wir dann AXChange Berlin gegründet, um die Axure Meetups auch nach Berlin zu bringen. Wir konnten Zalando einen guten Location-Sponsor finden (Dank dafür an Jay Kaufmann). Für alle Berliner Axuristas: am 21. Juli findet das AXChange bei Zalando in Berlin statt. Das Schwerpunktthema ist “Design-robuste Prototypen und das Auslagern von Interaktionen in Funktionen“. Das kam bereits beim ersten Hamburger Meetup gut an und ist extrem wichtig, denn Design-robuste Prototypen lassen sich ziemlich schnell auch während Nutzertests ändern.

Zum Meetup in Berlin: http://www.meetup.com/de/AXChange-Berlin-Axure-Meetup/

 
25. Mai, 2015

AxShare als App – sie ist online!

AxShare App Banner

Wir haben bis Hamburg die Nudelsuppenschüsseln klappern hören (Axure Insider-Witze…) und dann kamen auch schon die Mails von Axure, dass die AxShare App jetzt in den App- Stores von Apple und Google zu finden ist! Hier kommt nun unser kleines Update unserer in der Beta-Phase entstandenen Meinung.

Die App ist nach wie vor eine echte Hilfe und eine super Lösung, um den Prototypen auch einem Kunden in einem Café oder während eines Pitches zu zeigen. In Zukunft wird die App es uns ermöglichen, noch komplexere und vollständigere Prototypen zu bauen, um noch besser die endgültige App oder mobile Webseite für den UX-Test zu simulieren – und um damit auch noch glaubwürdigere und interessantere Reaktionen zu bekommen.

Sitemap in der AxShare App

Aktuell werden wir allerdings keinen Test mit der App durchführen: Am 6. Mai hatten wir ein sehr detailliertes Telefonat mit Rachel (der Produktmanagerin der AxShare App) und ihr die Punkte mitgeteilt, die wir noch nicht so prickelnd fanden. Vor allen die Sitemap ist uns ein Dorn im Auge: diese ruft man auf, indem man vom linken Bildschirmrand aus in die Mitte wischt. Das ist ein Problem für unsere UX-Tests von App-Prototypen. So ein Rechts-Swipe wird ja oft für echte Interaktionen genutzt und da ist es extrem störend, wenn dann immer die Sitemap von AxShare geöffnet wird. Rachel hat uns versprochen, dieses und weitere Probleme bald zu lösen – und wir werden am Ball bleiben!

 
18. April, 2015

AxShare als App – Erste Eindrücke aus dem Beta-Test

AxShare als App

Seit gestern gibt es von Axure eine App für AxShare. Wir hatten die App im Beta-Test.

Was kann die AxShare-App?

  • Über die App kann man schnell und komfortabel den zu testenden Axure Prototypen öffnen. Das lästige Eingeben der AxShare-URL entfällt.
  • Prototypen können lokal auf dem Device gespeichert werden.
  • Die lokal abgespeicherten Prototypen sind auch offline auf dem Gerät verfügbar und sorgen dafür, dass die Performance des Prototypen auf dem Gerät nicht aufgrund einer langsamen Internetverbindung leidet.
  • Die Statusleiste des Smartphones kann ausgeblendet werden.
  • Die App ist für iOS und Android verfügbar.

Gute Nachrichten für das mobile Prototyping mit Axure

Irgendwie war das Testen von App-Prototypen auf Smartphones und Tablets bislang nicht sonderlich komfortabel. Besonders für iOS-Devices ging das meist über remote in AxShare generierte Prototypen. Das war bei größeren Prototypen langsam und nicht sehr performant. Besonders bei User-Tests hat das bei den Probanden immer einen negativen Eindruck der zu testenden App ausgelöst. Die Probanden waren schnell genervt und haben weniger Sachen ausprobiert.

Ach ja, das Finden des richtigen Prototypen über die kryptische AxShare-ID hat auch genervt. Oft haben wir uns in der Vergangenheit uns die AxShare-ID diktiert, um den Prototypen auf dem Smartphone oder Tablet zu öffnen.

Über die lokal in der AxShare-App gespeicherten Axure-Prototypen wird das jetzt deutlich besser. Die Prototypen stehen sauber aufgelistet in der App. Die lokal gespeicherten Daten verkürzen die Ladezeiten der Prototypen und machen eine Internetverbindung überflüssig.

Zusätzlich kann die Statusleiste vom Smartphone ausgeblendet werden, was sicherlich bei einigen Prototypen wichtig ist, aber aus guten Gründen von Apple nicht empfohlen wird (Apple Developer Guidelines).

Unser Fazit

AxShare TesteinladungWäre schön gewesen, wenn die App einen Monat eher fertig geworden wäre. Dann hätten wir die letzten 6 App-Projekte, die wir mit Axure entwickelt haben, schon damit testen können.

Noch ist die App in der Entwicklung. Wir sind dennoch schon jetzt begeistert, denn die App sorgt für störungsfreiere UX-Tests und besseres Nutzer-Feedbacks.

Sobald wir mehr wissen, werden wir wieder berichten.

 
20. November, 2013

Axure 7.0 | Teil 3: Variablen und Repeater

Dieser Blogbeitrag ist einer der dreiteiligen Beitragsserie zu Axure 7.0:

Nach der überarbeiteten Arbeitsoberfläche, den Adaptive Views und neuen Interaktionen schauen wir uns die etwas komplexeren Variablen und das neue Repeater-Widget an, mit denen es nun möglich ist, realistischere und komplexere Interaktionspatterns zu erstellen.

Variablen

Die Aufgabe von Variablen war bisher sehr einfach, aber auch sehr begrenzt: sie speicherten Zahlen, Buchstaben oder irgendwelche Wörter, die weiter benutzt werden sollten. Da viele komplexe Interaktionen und Ideen (beispielsweise das Berücksichtigen von Portrait- und Landscape-Modus bei Mobile Prototypen) noch nicht möglich waren, musste vieles mit Hilfe von Variablen gelöst werden.

Meistens haben wir Text-Widgets benutzt, um die Eigenschaften von einzelnen Widgets oder von Dynamic Panels wie die Größe oder die Position direkt zugreifbar und auch veränderbar zu machen. Diese Technik haben wir unter anderen auch für selbst-erstellte Widgets (Custom Widgets) genutzt. Allerdings war es immer mühselig, erst alle Eigenschaften manuell anpassen zu müssen, um schließlich ein Custom Widget benutzen zu können. Viel einfacher wäre es, wenn die Widgets selbst schlau genug wären, um z.B. ihre Größe zu kennen und Move-Befehle automatisch an diese Größe anzupassen.

Ab Axure Version 7.0 ist genau das jetzt möglich: nun können viele notwendige Eigenschaften eines Widgets automatisch ausgelesen werden. Dafür speichert man das Widget selbst als lokale Variable ab. Ähnlich wie bei [[LVAR.length]] ist nun mit [[LVAR.width]] die Breite eines Widgets und mit [[LVAR.X]] die horizontale Position eines Widgets ermittelbar. Ändert sich dann die Position oder die Größe des Widgets, muss nichts mehr angepasst werden, da die Eigenschaften automatisch bestimmbar sind. So können endlich vollständig-anpassbare Widgets mit einer vordefinierten Interaktion erstellt werden.

Bildschirmfoto 2013-10-08 um 13.19.05

Variablen-Editor

axure7-variables-browser

Bislang war der Variablen-Editor ein Mysterium für sich. Man konnte Variablen auswählen und wusste jedoch nicht, wozu man sie einsetzen konnte – oder auch wozu sie gehören. So wurden sowohl mathematische Operationen wie Addieren oder Subtrahieren mit Operationen wie [[LVAR.toFixed(decimalPoints)]] und die speziellen Variablen wie Day mit TotalDragX gnadenlos zusammen angezeigt.

Durch die Fülle an neuen Funktionen musste der Editor natürlich gründlich aufgeräumt werden. Sämtliche speziellen Variablen und Operationen werden nun durch einzelne Baum-Menüs in den verschiedenen Typen kategorisiert. So kann man sehr schnell die passende spezielle Variable oder die Operation finden, die man sucht. Zusätzlich wurde das Auswahl-Fenster mit dem aus anderen Bereichen bekannte Instant-Suche ausgestattet.

Ein Wermutstropfen: Es sind jetzt so viele Möglichkeiten geworden, dass sich der „Coder“ freut, aber der Normalsterbliche sich schnell überfordert fühlt:-(

repeatericoRepeater

Es kommt noch besser: das kalifornische Axure-Team hat der neuen Version auch noch ein neues und mächtiges Widget spendiert: den Repeater.

repeater-sketchDas Prinzip des Repeaters ist durch ein Beispiel gut zu erklären: Wenn man neue Visitenkarten für die Mitarbeiter drucken möchte, hat man meistens eine Tabelle von Informationen und ein Muster. Für jeden Mitarbeiter wird dann anhand des Musters seine persönliche Visitenkarte erstellt.

Genauso ist auch der Repeater aufgebaut: man hat für jedes Element (die Visitenkarte pro Mitarbeiter) eine Tabelle mit Informationen und ein Muster, das mit den Informationen bespeist wird.

Der Repeater ist dadurch ideal für sämtliche listenartige Inhalte. Ob eine Produktübersicht, Kontaktliste oder auch ein Dateibrowser: der Repeater beseitigt sinnloses kopieren der gleichen Inhaltsbox (die meistens als eigenes Widget angelegt wurde) und erleichtert erheblich das nachträgliche Bearbeiten durch die Maske. Außerdem unterstützt der Repeater natürlich auch die Adaptive Views: für jeden eigenen View kann man eine eigene Konfiguration und eine eigene Maske erstellen. So muss man nicht den Repeater pro View duplizieren.

repeater-interactions

Das Repeater-Widget kann aber noch deutlich mehr: natürlich konnte man auch bereits vor Axure 7.0 Listen durch kopieren der Inhalte erstellen. Der Mehrwert des Repeaters besteht aber darin, Interaktionen wie Filtern, Umsortieren oder Erweitern der Listen deutlich zu vereinfachen. Dadurch sind realitätsnahe und flexible Usability-Tests möglich.
Nicht zu vergessen: wenn ein Widget nicht kopiert, sondern – wie beim Adaptive View – einfach nur verändert wird, sind kurzfristige und sonst zeitraubende Design- und Strukturänderungen im Nu umgesetzt.

 

Weiteres

Seit unserem ersten Teil hat sich die Axure-Schmiede natürlich nicht ausgeruht und eine neue Version (ab 7.0.0.3118) veröffentlicht, die eine ziemlich lange Liste an Verbesserungen beinhaltet. Unter anderen ist der bereits vorgestellte Widget-Manager mit einer Filterfunktion ausgestattet worden, der unbenannte Widgets nicht anzeigt. Dadurch müssen nur noch wichtige und änderbare Widgets benannt werden.

Außerdem wurde die Aktion „Set Text to Widget“ erweitert, sodass nun auch Textänderungen in einem Widget durchgeführt werden können, ohne den Style zu ändern. Vor allen für den Repeater ist das wichtig, da bereits vieles im Muster über Styles vordefiniert wird.

sitemapEin weiteres zusätzliches Feature versteckt sich im Punkt „Generate Prototype“: nun können die Prototypen ohne die linke Navigationsleiste generiert werden. Des Weiteren wurde die neue Style-Eigenschaft „Line Spacing“ sowie die neue Aktion „Scroll to Widget“ hinzugefügt.

Fazit

Wir arbeiten seit zwei Monaten intensiv mit der Axure 7.0 Beta und haben natürlich noch viele Verbesserungsvorschläge. Allerdings sind wir im engen Kontakt zu den Entwicklern, sodass wir seit der Version 7.0.0.3118 bereits viele Vorschläge umgesetzt wiederfinden konnten. Das ist ein großer Pluspunkt, der wieder einmal beweist, dass das Axure-Team für die Nutzer der Software entwickeln und nicht blind oder taub gegenüber Kritik sind. Vielen Dank an dieser Stelle an die Entwickler für die gute Zusammenarbeit.

Deutlich zugenommen hat allerdings auch die Komplexität von Axure: Durch die vielen Funktionen und Möglichkeiten muss man sich erst einmal einen umfassenden Überblick über alle neuen Funktionen verschaffen. Dies erhöht natürlich die Hürde für Neueinsteiger, was allerdings durch gezielte Schulungen bewältigt werden kann.

Axure 7.0 erfüllt genau das, was zu erwarten war: das bisher bekannte Tool wurde deutlich weiterentwickelt. Und um ehrlich zu sein: wir wollen nicht wieder zurück zu Axure 6.5.

Mit Axure 7.0 ist es nun möglich bekannte, aber komplexe Interaktionspatterns einfach und modular zu erstellen. Das steigert nicht nur die Produktivität, sondern auch die Möglichkeiten in einem Usability-Test. Vor allen in Sachen Mobile Prototyping hat sich in Axure 7.0 viel getan: durch die Adaptive Views und den vielen Interaktionen und speziellen Variablen können nun deutlich besser High-Res App-Prototypen erstellt und getestet werden.

Stay tuned!

 
8. Oktober, 2013

Axure 7.0 | Teil 2: Ready for Mobile!

Dieser Blogbeitrag ist einer der dreiteiligen Beitragsserie zu Axure 7.0:

Axure 7 kann jetzt auch Apps und Responsive Websites! Wichtigste Neuerung sind die Adaptive Views, mit denen die Darstellung der Prototypeninhalte für verschiedene Displaygrößen angepasst werden kann. Vor allen für App-Prototypen sind die Adaptive Views wirklich nützlich: sie ermöglichen das Erstellen und testen einer auf das System zugeschnittenen App. Zudem ermöglicht Axure 7 mit 16 neuen Interaktionen vollkommen neue Möglichkeiten und Ideen.

Neue Apps braucht das Land: Adaptive Websites mit Axure 7.0

Adaptive Views HeaderMit dem alten Axure war bisher alles eher kompliziert und zeitintensiv. So musste man einzelne Prototypen-Seiten oder Dynamic Panels bauen und mächtig tricksen, um beispielsweise verschiedene Darstellungen für Landscape- und Portrait-Modus zu ermöglichen. Den Inhalt von Webseiten vollständig auf mobilen Endgeräten wie Smartphones anzuzeigen, war sehr schwierig. Das Resultat wäre eine unübersichtliche, ellenlange „Tapete“ an Informationen mit wenig Informationsngehalt. In der Webentwicklung wird daher auf eine angepasste Darstellung der Inhalte abhängig von der Bildschirmgröße gesetzt: je nach Breite des Bildschirmes passt sich also der Inhalt auf die Fläche an.

Seit es Axure 7 gibt, ist Schluss mit der Trickserei: durch die Funktion „Adaptive Views“ kann man auf einer einzigen Seite die Größe, den Style und die Position einzelner Widgets abhängig von der Bildschirmgröße darstellen. Dabei wird das jeweilige Widget nicht kopiert, sondern einfach nur anders dargestellt. Aber nicht nur die Darstellung der Widgets kann man verändern: man kann in einzelnen „Views“ die Widgets ausblenden, ohne das Widget selber zu löschen. So kann man den dargestellten Inhalt auf das Nötigste reduzieren.

Adaptive Views SettingsDie Adaptive Views folgen dabei einem einfachen Prinzip: man hat eine „Base“-Ansicht, die als Grundlage für die Views dient. Dann erstellt man einzelne Views, die von der Base-Ansicht die Widgets, deren Style, Position und Größe erben. Diese Views können dann wiederum so organisiert werden, dass sie untereinander ebenfalls die jeweiligen Informationen voneinander erben.

Auch wenn die Adaptive Views nicht unbedingt wie für responsive Webseiten gemacht sind, so eignen sie sich umso mehr für App-Prototypen. Durch die fest-definierbaren Breakpoints können so maßgeschneiderte Apps für iPhone und iPad konzipiert und getestet werden – ganz ohne Tricks und Kniffe.

Erweiterte Interaktionen für realitätsnahes Prototypen-Testing

Axure 7 bringt eine Menge neuer Interaktionen mit. Allein beim Dynamic Panel kann man nun bis zu 28 verschiedenen Interaktionen auswählen. So gibt es nun auch die Möglichkeit, Interaktionen wie Mausbewegungen oder Tasteneingaben zu nutzen, um Aktionen auszuführen. Damit können beispielsweise Shortcuts für Webseiten entwickelt und getestet werden.

Um eine grobe Übersicht über die Fülle der Interaktionen zu bekommen, haben wir eine tabellarische Auflistung aller möglichen Interaktionen für jedes Widget erstellt. Das wichtigste ist allerdings – wie in jedem Falle – die Übung: am besten nimmt man sich die Zeit, um jede einzelne Interaktion auszutesten. Erst dann bekommt man ein Gefühl dafür, wann eine Interaktion eingesetzt werden kann und bei welchen Stellen man sie besser vermeidet. Wir empfehlen auch, das offizielle Forum für Axure 7 zu besuchen. Dort findet man Tipps, Tricks, tolle Beispiele und viele weitere Informationen zu Axure 7.

Zwischenfazit:

Wir vermissen kein Stück die noch aktuelle Version 6.5. Im Gegenteil: die Adaptive Views und Interaktionen von Axure 7.0 sind schon Grund genug, auf die zukünftige Version der Prototypen-Software zu setzen. Dank diesen neuen Funktionen spart man zukünftig viel Zeit und kann sich auf andere Interaktionsprobleme und Lösungen konzentrieren. Letztendlich verbessert es aber auch die Ergebnisse in Usability-Tests: Dadurch, dass bisherige Tricks nun Kernfunktionen von Axure 7.0 sind, sind auch die Prototypen deutlich stabiler und sorgen somit für weniger Frust und Risiken während der Tests.
Tipp: Wir haben unsere Axure-Kurse bereits auf die Version 7.0 maßgeschneidert!

 
8. September, 2013

Axure 7.0 – Einführung | Teil 1: Grundsätzliches, Widgets und Styles

Die Freunde von Axure in Kaliformien haben wieder einen großen Schritt nach vorne gemacht: Axure RP 7.0 ist als Beta-Version verfügbar! Wir haben das neue Release unter die Lupe genommen und haben uns sehr über die Fülle von neuen Funktionen und Verbesserungen gefreut. Es gibt so viele Neuerungen, dass es zu viel für einen Blog-Beitrag ist. Daher gibt es unseren Beitrag „Neues in Axure RP 7.0“ in drei Teilen:

Teil 1: Grundsätzliches, Widgets und Styles

Vergleich zwischen Axure 6.5 RP und Axure 7 Beta

Vergleich zwischen Axure 6.5 RP und Axure 7 Beta

Ein wenig iOS7, ein wenig Windows 8: die Axure 7 Beta überrascht mit einer eigenen „flachen“ Design-Note und schafft doch die Kurve für versierte Nutzer. Die meisten bekannten Elemente finden sich auf ihren üblichen Platz wieder, was den Einstieg in die neue Version deutlich vereinfacht.

Widget Properties and Style FensterEiniges wurde jedoch umstrukturiert und umsortiert: Das Fenster „Widget-Properties and Style“ beinhaltet nun sämtliche Einstellungsmöglichkeiten, die man bislang über einen Rechtsklick auf einem Widget angeboten bekam. (Der Rechts-Klick hat damit an Bedeutung verloren, was mir persönlich nicht so gut gefällt. Kann sein, dass sich da noch was tut. Victor von Axure will noch drüber nachdenken, ob er nicht doch auch wieder mehr Funktionen über den Rechts-Klick verfügbar macht. Mal sehen…)

Außerdem ist der „Dynamic Panel Manager“ den Umstrukturierungen zum Opfer gefallen und wurde vom neuen, deutlich besseren Widget-Manager ersetzt. Hier finden sich jetzt ALLE verwendeten Widgets wieder!

Der Widget-Manager

Bisher war es ziemlich mühsam bei vielen Widgets ein Widget wiederzufinden oder zu markieren, wenn es unter anderen Elementen versteckt im Hintergrund lag. Der Widget-Manager schafft nun Abhilfe: genauso wie der Ebenenmanager in Photoshop sind nun alle Widgets in der Reihenfolge aufgelistet, wie sie auch im Wireframe angezeigt werden. So kann schnell die Reihenfolge von mehreren Elementen verändert werden. Ein wichtiges Feature!
Doch Vorsicht: anders als bei Photoshop ist das unterste Element als erstes Element in der Liste angeordnet.

Preview

Preview-funktionWie oft musste ich in der Vergangenheit einen Prototypen neu generieren, um mir Veränderungen anzusehen? Das hat immens viel Zeit gekostet und ich habe mir immer gewünscht, eine Art Live-Preview zu haben.  Die Preview-Funktion macht (fast) genau das: man vollzieht eine Änderung in Axure 7 und aktualisiert einfach den Browser statt den Prototypen (oder auch nur einzelne Seiten) ständig neu generieren zu lassen. Ein Feature, dass die Arbeitsgeschwindigkeit deutlich steigert!

Widgets können mehr!

Widget ActionsEin weiteres Thema, das mir nicht ganz klar war: warum muss man für jede Aktion, die man auf ein Widget ausführen wollte, dieses zu einem Dynamic Panel konvertieren lassen. Das hat sich scheinbar das Team aus Kalifornien ebenfalls gefragt und kurzerhand etliche Aktionen, die bislang nur mit Dynamic Panels möglich waren, für alle Widgets implementiert. Alle Aktionen wie Move, Hide und Show, Bring to Front der Dynamic Panels sind nun auch im „Case-Editor“ unter „Widgets“ einsortiert.

Widgets können aber nun noch mehr: in Windeseile können vordefinierte „Shapes“ wie einzelne Überschriften-Formatierungen oder Formen mit wenigen Klicks auf das Widget übernommen werden.

Aber das ist immer noch nicht alles: Nun können Widgets auch automatisch in der Höhe oder in ihrer Breite angepasst werden. Mit einem Rechtsklick auf das Widget der Wahl und einen Haken bei „Auto Fit Height“ und/oder „Auto Fit Width“ macht lästiges nachjustieren bei einem etwas längeren Text überflüssig.

Es hat sich außerdem etwas bei den einzelnen Widgets getan: die Höhe des Droplist-Widgets lässt sich nun endlich einstellen, Dynamic Panels können sich selbstständig ihrem Inhalt anpassen und die „Image Map Region“ heißt nun „Hot Spot“.

Neue Styles

Neue StylesOft muss ein Prototyp erstellt werden, der nicht nur das Nutzererlebnis, sondern auch das Aussehen einer Webseite oder einer App darstellen soll. Hier ist es umso wichtiger, möglichst genau das Design abzubilden. Das ging bislang auch schon ziemlich gut, mit ein paar Ausnahmen.

Es gab keine Schatten. Mit Axure 7 hat sich das erledigt. Jetzt ist ein Schatten nur wenige Klicks entfernt: in den Styles können nun innere und äußere Schatten festgelegt werden.

Abgerundete Ecken lassen sich jetzt pixelgenau einstellen. Das lästige „mit der Maus ziehen und hoffen, dass es passt…“ entfällt.

Bei Design-Prototypen kommt es allerdings nicht nur auf Schatten und abgerundete Ecken an. Die Schrift ist eines der wichtigsten Gestaltungselemente eines Interfaces und immer auch ein zentrales CI-Element (CI=Corporate Identity). Mit Axure 7 können jetzt die jeweiligen Schriften als Webfont oder als Schriftdatei direkt in den Prototypen eingebunden werden. Aber Axure 7 geht noch weiter: für Kursiv- oder Fettschriften kann nun der jeweilige Typ aus der Schriftart ausgewählt werden. Ein Feature, das selbst einem Typograf gefallen dürfte!

Styles konnten bisher nur auf Widgets angewendet werden. Bilder mussten stattdessen immer per Hand in Photoshop in ihre zukünftige Form zugeschnitten werden. In Axure 7 bekommen nun auch Bilder ihre eigenen Styles: mit abgerundeten Ecken, Schatten und Transparenzeinstellungen sind händische Anpassungen der Bilder nicht mehr notwendig. Tipp: um kreisrunde Bilder zu erstellen, sollten diese idealerweise quadratisch vorliegen. Sonst muss per „Crop“ oder „Slice“ nachgeholfen werden.

CropApropos „Crop“: das ist ebenfalls eine neue Funktion, die das relativ unflexible „slicen“ eines Bildausschnittes unnötig macht. Aber Vorsicht: genau wie das „slicen“ wird das Bild beschnitten. Hier gehört oftmals viel Sorgfalt dazu.

Ein Beispiel

Wetter-Icon BeispielIn Sachen Styles und Widgets hat sich also so einiges bei Axure getan. Wir haben ein wenig mit den Funktionen gespielt und das Wetter-Icon aus iOS7 samt App-Icon Raster erstellt. Durch Axure 7 war es ein Kinderspiel, die einzelnen Widgets anzuordnen. Auch der Schatten hat uns überzeugt, denn er ist furchtbar-einfach umzusetzen. Viel Spaß damit!

 

 
26. April, 2012

Prototyping mit Axure 6.5

Nach einer intensiven Beta-Phase wurde jüngst die neue Version von Axure RP veröffentlicht. Rolf hat sich die neuen Features detailliert angesehen und stellt sie im einzelnen kurz vor. Zu unserer großen Freude – vielen Dank Victor! – wurden auch einige unserer Anregungen und Wünsche an die Entwickler umgesetzt. Das Fazit: Axure wird immer komfortabler und wartet mit immer neuen Funktionen auf.

Axure in neuen Höhen

In unseren Tests setzen wir bei eparo schon seit Jahren auf Axure RP – mit steigender Begeisterung. Mit der Version 6.5 sind wieder einige neue Features hinzugekommen, die die tägliche Arbeit erleichtern und Prototyping mit Axure noch komfortabler machen. Die Vorteile voll funktionsfähiger High-Fidelity Prototypen begeistern nicht nur uns, sondern insbesondere auch unsere Kunden. Und mit den Axure Mobile Kits sind solche hochrealistischen Prototypen auch für iPhone- und iPad-Anwendungen problemlos möglich.