turn your ideas into reality - prototyping in der praxis · axure uxpin © conplement ag....

Turn your ideas into reality -Prototyping in der PraxisNina Hauer, Ulrike Stirnweißconplement AG

© conplement AG. Confidential. All rights reserved, also regarding distribution, editing, reproduction.

© conplement AG. Confidential. All rights reserved, also regarding distribution, editing, reproduction.www.conplement.de

Sprecher

Nina HauerDesign & UX SpezialistSoftware [email protected]@NinaHPunkt

Ulrike StirnweißUsability & UX SpezialistTechnology Specialist & MVP

[email protected]@UlliStirnweiss


Agenda

SPRECHER

AGENDA

MOTIVATION

UX PROZESS

PROTOTYPING TOOLS

FAZIT/FRAGEN

SIE SIND HIER!


Was ist UX? Was ist Usability?Motivation


Why UX matters …Motivation

80% der Unternehmen glauben, dass sie eine überlegene Customer Experience bieten.

Nur 8% ihrer Kunden glauben dies.

2015, BAIN & COMPANY


Wie wird aus einer Idee ein Produkt?Motivation



Visualisierung - Das A und O Ermöglicht gemeinsames Verständnis

Grundlage für Diskussionen

Schafft gemeinsames Gesamtbild für die angestrebte Lösung

Marketing-Material/Referenzen

Motivation



Was ist ein Prototyp?Motivation

„Eine Repräsentation von Teilen oder des gesamten interaktiven Systems, die in einem bestimmten Maß für Analyse, Design und Evaluierung benutzt werden kann.“ - UXQB

Prototyp


Was ist Prototyping?Motivation


UX Prozess



Warum User-Centered-Design?UX Prozess

Wenn eine Änderung auf Papier 1 € kostet,

kostet diese 10 € im Code

und 100 € an einem bestehenden Produkt.

THERESA CUNNINGTON



UX-ProzessUX-Prozess



Scribbeln

Wireframes

Low-Fidelity-Prototyp

Screen Designs

Gestaltungslösung entwickelnUX-Prozess

High-Fidelity-Prototyp


PrototypingTools –Wireframes



Ideen

Wireframes


Screen Designs


ÜbersichtPrototyping Tools - Wireframes

Whiteboard/Papier Power Point Pencil Balsamiq Bildbearbeitungstools (Photoshop,

Fireworks, Paint …) UXPin



PowerPointPrototyping Tools - Wireframes



Vorlagen verfügbar (z.B. powerWIREFRAME, PowerMockup)

Kann mit TFS Backlogitem verknüpft werden

Folienmaster für einheitliche Screens

Integrierter Textgenerator: „=lorem()“ ENTER

Klick-Prototypen möglich

KostenLernaufwand



PRO Kunde kann es bearbeiten/ergänzen/

kommentieren

CONTRA Kein handgezeichneter Look bei

vielen Vorlagen Schrift-Kompatibilität Nur für Wireframephase geeignet



PencilPrototyping Tools - Wireframes



Shapes und Vorlagen sketchy und „normal“ (auch iOS, Android)

Auch für Ablaufdiagramme nutzbar

Kann als Website exportiert werden

KostenLernaufwand



PRO Open Source Für alle Plattformen verfügbar

(Standalone oder als Firefox-Plugin)

CONTRA Kleines Set an Controls Nur für Wireframephase geeignet Export generiert nur eine lange HTML-Seite



Balsamiq

Bild

Prototyping Tools - Wireframes

https://webdemo.balsamiq.com/


BalsamiqPrototyping Tools - Wireframes

Umschaltbar zwischen sketchy und „normal“

Verlinkung von Screens einfache Klick-Prototypen

Generierung von Sitemaps

Versionskontrolle

Alternative Entwürfe für eine Seite

KostenLernaufwand


BalsamiqPrototyping Tools - Wireframes

PRO Viele Standardcontrols Auch als Web App verfügbar

CONTRA Nur für Wireframephase geeignet



Whiteboard/PapierPrototyping Tools - Wireframes



In vielen Farben und Formen verfügbar

Man kann es Bemalen Bedrucken Zerschneiden Zusammenkleben uvm.

KostenLernaufwand



PRO Malen kann jeder! Gut für Team- und Kundenkollaboration Schnelles zu Papierbringen von Ideen Änderungen einfach CONTRA

Nachträgliche Bearbeitung schwierig Vorlagen (Screens, Controls) müssen

ausgedruckt oder gemalt werden


PrototypingTools –Low-Fidelity-Prototyp



Ideen

Wireframes


Screen Designs

High-Fidelity-Prototyp Power Point

Balsamiq Invision POP

Axure Indigo Studio Justinmind UXPin

ÜbersichtPrototyping Tools – Low-Fidelity-Prototyp



InvisionPrototyping Tools – UI-Klickprototyp



Einfache Verlinkung von vorhandenen Wireframes/Mockups

Sync der Assets mit Cloudspeichern

Workflow für Screens

Kollaboration

Generiert HTML-Prototyp

KostenLernaufwand


PRO Webfrontend (keine Installation) Reviewstatus für Screens

CONTRA Assets in der Cloud (NDA kritisch!) Keine komplexen Prototypen




POPPrototyping Tools – UI-Prototyp

Import von Bildern/Adobe Cloud/Kamera

Einfaches Verlinken von Bildern

Unterstützt verschiedene Gesten und Transitionen

DropBox-Integration

KostenLernaufwand


PRO Mobile App immer zur Hand Auf allen Plattformen verfügbar

CONTRA Nur als App verfügbar (unterschiedliche

Funktionen pro Plattform) Assets in der Cloud (NDA kritisch!)

POPPrototyping Tools – UI-Prototyp


PrototypingTools –Screen Designs



Ideen

Wireframes


Screen Designs


ÜbersichtPrototyping Tools – Screen Designs

Bildbearbeitungstools(Photoshop, Illustrator, Paint.net …)

Sketch Axure UXPin



SketchPrototyping Tools – UX-Prototyp



Vektorbasiert

Wiederverwendbare Elemente

Ebenen- und Textstile

Bildbearbeitung

Export der Screens oder Teilen davon möglich

Generiert CSSKostenLernaufwand



PRO Echtzeitansicht auf iPhone, iPad

und in Webbrowsern

CONTRA Nur für MAC verfügbar



Adobe Photoshop & IllustratorPrototyping Tools – UX-Prototyp



Ps: Pixelbasiert Ai: Vektorbasiert skalierbar

Arbeiten mit Zeichenflächen

Umfangreiche Bildbearbeitung

Export der Screens oder Teilen davon möglich

Ps: Designbereich (Preview)

Ps: Echtzeitansicht auf iOS GerätenKostenLernaufwand


PRO Große Community Schulungen/How-to Videos Touch -Funktionen Adobe Stock Anbindung CONTRA

Sehr komplex Overhead an Funktionen



PrototypingTools –High-Fidelity-Prototyp



Ideen

Wireframes


Screen Designs


ÜbersichtPrototyping Tools – UX-Prototyp

Axure Indigo Studio Justinmind UXPin Experience Designer



Justinmind PrototyperPrototyping Tools – Mockups



Viele Vorlagen (für Websites oder Apps)

Viele Standard-Controls, Libraries

Sample-Data möglich

Auch komplexe Gesten, Transitionen


KostenLernaufwand



PRO Beispielvorlagen mit Sample Data

CONTRA Performance Probleme bei komplexen

Projekten



AxurePrototyping Tools – UX-Prototyp



Für Wireframes, Mockups und Prototypen

Komplexe Interaktionen, bedingte Logik, Animationen


In Pro-Variante mit Dokumentationsgenerator

Viele freie Bibliotheken im Web verfügbar

KostenLernaufwand



PRO Große Community Schulungen/How-to Videos

CONTRA Sehr komplex



Indigo StudioPrototyping Tools – UI-Prototyp



Import von Assets

Controls für iOS

Unterstützt einfache Gesten sowie Übergänge

generiert HTML-Prototyp

Storyboarding

KostenLernaufwand



PRO Storyboarding

CONTRA Sehr komplex Nicht für komplexe Projekte



UXPinPrototyping Tools – UX-Prototyp



Wireframes, Mockups und interaktive Prototypen

Sketch-, Photoshop-Import (mit Layern, nur in Pro)

Viele Interaktionen, Transformationen (auch Animationen möglich)

Remote Usability Tests (BETA nur Pro+)

Kollaboration

KostenLernaufwand



PRO Voller UX Prozess abgedeckt

(inkl. Test) Webinterface

CONTRA Kann alles, aber nicht in der Tiefe



Adobe Experience DesignerPrototyping Tools – UX-Prototyp

Wireframes, Mockups und interaktive Prototypen

Verschiedene Vorlagen (für Phone, Tablet, Web, auch UI Kits)

Viele Interaktionen, Transformationen

Repeat-Grid

Export für Web, iOS, Android

Echtzeitansicht, Teilen via WeblinkKostenLernaufwand


Adobe Experience DesignerPrototyping Tools – UX-Prototyp

PRO In der Adobe Cloud enthalten Enthält Funktionen aus Photoshop und

Illustrator

CONTRA Aktuell noch Preview (nur für Mac) Sharing über Cloud (NDA kritisch!)


Fazit



Welche Tools nutzen wir?Fazit

IdeenWireframes


Screen Designs


PowerPoint

Axure

Ps / Ai

Axure

Papier



„Clicking“ VS Coding

Clicking Schnelles Erzeugen eines

Prototypen

Keine Programmierkenntnisse notwendig

Keine Einschränkungen in der kreativen Gestaltung

Fazit

Coding Es wird nur designed was auch

entwickelt werden kann

Frameworks können direkt eingesetzt/getestet werden

Wiederverwendbarer Code



Prototyping rocks!Fazit


[email protected]+49 (0)911/911 25 50 97 60

conplement AGSüdwestpark 9290449 Nürnberg



Links Pencil (http://pencil.evolus.vn/) Balsamiq (https://balsamiq.com/) Invision (http://www.invisionapp.com/) POP (https://popapp.in/) Sketch (https://www.sketchapp.com/) Adobe Photoshop (http://www.adobe.com/de/products/photoshop.html) Adobe Illustrator (http://www.adobe.com/de/products/illustrator.html) Justinmind (http://www.justinmind.com/) Axure (http://www.axure.com/) Indigo (http://www.infragistics.com/products/indigo-studio) UXPin (https://www.uxpin.com/) Adobe Experience Designer (http://www.adobe.com/de/products/experience-design.html)

http://pencil.evolus.vn/

https://balsamiq.com/

http://www.invisionapp.com/

https://popapp.in/

https://www.sketchapp.com/

http://www.adobe.com/de/products/photoshop.html

http://www.adobe.com/de/products/illustrator.html

http://www.justinmind.com/

http://www.axure.com/

http://www.infragistics.com/products/indigo-studio

https://www.uxpin.com/

http://www.adobe.com/de/products/experience-design.html

turn your ideas into reality - prototyping in der praxis · axure uxpin © conplement ag....

Documents