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 EngineerNina.Hauer@conplement.de@NinaHPunkt

Ulrike StirnweißUsability & UX SpezialistTechnology Specialist & MVP

Ulrike.Stirnweiss@conplement.de@UlliStirnweiss

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

Agenda

SPRECHER

AGENDA

MOTIVATION

UX PROZESS

PROTOTYPING TOOLS

FAZIT/FRAGEN

SIE SIND HIER!

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

Was ist UX? Was ist Usability?Motivation

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

Why UX matters …Motivation

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

Nur 8% ihrer Kunden glauben dies.

2015, BAIN & COMPANY

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

Wie wird aus einer Idee ein Produkt?Motivation

© 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

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

© 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

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

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

Was ist Prototyping?Motivation

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

UX Prozess

© 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

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

© 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

UX-ProzessUX-Prozess

© 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

UX-ProzessUX-Prozess

© 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

Scribbeln

Wireframes

Low-Fidelity-Prototyp

Screen Designs

Gestaltungslösung entwickelnUX-Prozess

High-Fidelity-Prototyp

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

PrototypingTools –Wireframes

© 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

Ideen

Wireframes

Low-Fidelity-Prototyp

Screen Designs

High-Fidelity-Prototyp

ÜbersichtPrototyping Tools - Wireframes

Whiteboard/Papier Power Point Pencil Balsamiq Bildbearbeitungstools (Photoshop,

Fireworks, Paint …) UXPin

© 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

PowerPointPrototyping Tools - Wireframes

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

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

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

PowerPointPrototyping Tools - Wireframes

PRO Kunde kann es bearbeiten/ergänzen/

kommentieren

CONTRA Kein handgezeichneter Look bei

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

© 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

PencilPrototyping Tools - Wireframes

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

PencilPrototyping Tools - Wireframes

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

Auch für Ablaufdiagramme nutzbar

Kann als Website exportiert werden

KostenLernaufwand

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

PencilPrototyping Tools - Wireframes

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

© 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

Balsamiq

Bild

Prototyping Tools - Wireframes

https://webdemo.balsamiq.com/

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

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

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

BalsamiqPrototyping Tools - Wireframes

PRO Viele Standardcontrols Auch als Web App verfügbar

CONTRA Nur für Wireframephase geeignet

© 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

Whiteboard/PapierPrototyping Tools - Wireframes

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

Whiteboard/PapierPrototyping Tools - Wireframes

In vielen Farben und Formen verfügbar

Man kann es Bemalen Bedrucken Zerschneiden Zusammenkleben uvm.

KostenLernaufwand

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

Whiteboard/PapierPrototyping Tools - Wireframes

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

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

PrototypingTools –Low-Fidelity-Prototyp

© 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

Ideen

Wireframes

Low-Fidelity-Prototyp

Screen Designs

High-Fidelity-Prototyp Power Point

Balsamiq Invision POP

Axure Indigo Studio Justinmind UXPin

ÜbersichtPrototyping Tools – Low-Fidelity-Prototyp

© 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

InvisionPrototyping Tools – UI-Klickprototyp

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

InvisionPrototyping Tools – UI-Klickprototyp

Einfache Verlinkung von vorhandenen Wireframes/Mockups

Sync der Assets mit Cloudspeichern

Workflow für Screens

Kollaboration

Generiert HTML-Prototyp

KostenLernaufwand

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

PRO Webfrontend (keine Installation) Reviewstatus für Screens

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

InvisionPrototyping Tools – UI-Klickprototyp

© 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

POPPrototyping Tools – UI-Prototyp

Import von Bildern/Adobe Cloud/Kamera

Einfaches Verlinken von Bildern

Unterstützt verschiedene Gesten und Transitionen

DropBox-Integration

KostenLernaufwand

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

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

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

PrototypingTools –Screen Designs

© 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

Ideen

Wireframes

Low-Fidelity-Prototyp

Screen Designs

High-Fidelity-Prototyp

ÜbersichtPrototyping Tools – Screen Designs

Bildbearbeitungstools(Photoshop, Illustrator, Paint.net …)

Sketch Axure UXPin

© 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

SketchPrototyping Tools – UX-Prototyp

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

SketchPrototyping Tools – UX-Prototyp

Vektorbasiert

Wiederverwendbare Elemente

Ebenen- und Textstile

Bildbearbeitung

Export der Screens oder Teilen davon möglich

Generiert CSSKostenLernaufwand

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

SketchPrototyping Tools – UX-Prototyp

PRO Echtzeitansicht auf iPhone, iPad

und in Webbrowsern

CONTRA Nur für MAC verfügbar

© 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

Adobe Photoshop & IllustratorPrototyping Tools – UX-Prototyp

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

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

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

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

Sehr komplex Overhead an Funktionen

Adobe Photoshop & IllustratorPrototyping Tools – UX-Prototyp

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

PrototypingTools –High-Fidelity-Prototyp

© 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

Ideen

Wireframes

Low-Fidelity-Prototyp

Screen Designs

High-Fidelity-Prototyp

ÜbersichtPrototyping Tools – UX-Prototyp

Axure Indigo Studio Justinmind UXPin Experience Designer

© 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

Justinmind PrototyperPrototyping Tools – Mockups

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

Justinmind PrototyperPrototyping Tools – Mockups

Viele Vorlagen (für Websites oder Apps)

Viele Standard-Controls, Libraries

Sample-Data möglich

Auch komplexe Gesten, Transitionen

Generiert HTML-Prototyp

KostenLernaufwand

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

Justinmind PrototyperPrototyping Tools – Mockups

PRO Beispielvorlagen mit Sample Data

CONTRA Performance Probleme bei komplexen

Projekten

© 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

AxurePrototyping Tools – UX-Prototyp

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

AxurePrototyping Tools – UX-Prototyp

Für Wireframes, Mockups und Prototypen

Komplexe Interaktionen, bedingte Logik, Animationen

Generiert HTML-Prototyp

In Pro-Variante mit Dokumentationsgenerator

Viele freie Bibliotheken im Web verfügbar

KostenLernaufwand

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

AxurePrototyping Tools – UX-Prototyp

PRO Große Community Schulungen/How-to Videos

CONTRA Sehr komplex

© 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

Indigo StudioPrototyping Tools – UI-Prototyp

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

Indigo StudioPrototyping Tools – UI-Prototyp

Import von Assets

Controls für iOS

Unterstützt einfache Gesten sowie Übergänge

generiert HTML-Prototyp

Storyboarding

KostenLernaufwand

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

Indigo StudioPrototyping Tools – UI-Prototyp

PRO Storyboarding

CONTRA Sehr komplex Nicht für komplexe Projekte

© 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

UXPinPrototyping Tools – UX-Prototyp

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

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

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

UXPinPrototyping Tools – UX-Prototyp

PRO Voller UX Prozess abgedeckt

(inkl. Test) Webinterface

CONTRA Kann alles, aber nicht in der Tiefe

© 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

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

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

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!)

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

Fazit

© 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

Welche Tools nutzen wir?Fazit

IdeenWireframes

Low-Fidelity-Prototyp

Screen Designs

High-Fidelity-Prototyp

PowerPoint

Axure

Ps / Ai

Axure

Papier

© 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

„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

© 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

Prototyping rocks!Fazit

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

DANKE!www.conplement.deux@conplement.de+49 (0)911/911 25 50 97 60

conplement AGSüdwestpark 9290449 Nürnberg

© 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

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)