Turn your ideas into reality - Prototyping in der Praxis · Axure UXPin © conplement AG....
Transcript of 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
© 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.
[email protected]+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)