AVID DESIGNSTUDIO
www.avid-studio.com
UI/
PROJECT PROPOSAL USER INTERFACE DESIGN
DESIGN IS ABOUT FORWARD THINKING AND FUTURE PROOFING
Steve Leisner, Marcel Ebert, Jirko Spinger (v.l.)
WER WIR SIND Das Avid-Designstudio organisiert vom Entwurf, über die Umsetzung bis hin zur Produktion und Markteinführung einen ganzheitlichen Gestaltungsprozess von Produkten und Markenidentitäten.
WAS WIR TUN Designs mit Sinn und Zweck ... das streben wir in jedem Projekt an. Unsere Mission ist es, Unternehmen aller Größen dabei zu helfen, die Kraft von designorientierten Lösungen freizusetzen.
Einen Benefit generieren wir dabei aus der ganzheitlichen Kompetenz in Fachbereichen Product Design, Digital Design, Branding, Design Consulting und Engineering.
Produktdesign / Industriedesign
Dabei sind wir mehr als Produktgestalter. Wir verfolgen interdisziplinäre Ansätze, um eine nachhaltige Beziehung zwischen der Marken- und Produktwelt zu fördern.
Design Strategie
Digitale Applikationen Branding & Markenidentität
2
avid studio
proposal ui-design
INHALT
Auftraggeber
4
Briefing
6
Design Strategie
8
Design Prozess
10
Entwurf 14 Projekt Aschluss
18
Kontakt 20
3
avid studio
proposal ui-design
PROJEKT BETEILIGTE
AUF TRAGGEBER & PROJEKT SPEZIFIKATION Die ATN Hölzel GmbH entwickelt und fertigt Komplettlösungen im Sondermaschinen- und Anlagenbau aus einer Hand. Von der Konzeptentwicklung, über die elektrische und mechanische Konstruktion bis hin zur Roboterprogrammierung, Fertigung und Inbetriebnahme haben Sie einen Ansprechpartner. Die digitale Benutzerschnittstelle (GUI) findet Anwendung innerhalb einer Applikationsanlage und dient der Kleberaupenstoßkontrolle bei der Montage von Fahrzeugscheiben in die Karosserie.
IR-Kamera und Infrarotstrahlung die Wärme der beheizten Klebstoffraupe genutzt, um Höhe, Temperatur, ununterbrochener Verlauf oder Einschlüsse zu detektieren und diese im Fehlerfall an die Anlagensteuerung zu melden.“
Der Kleberaupenstoß ist der kritischste Punkt einer jeden Klebenaht mit geschlossener Klebstoffraupe. Um die an den Stoßbereich gestellten Qualitätsanforderungen automatisiert prüfen zu können, wird mittels
Damit ist eine optimale Prozesskontrolle und Qualitätssicherung gewährleistet. Die ATN-Hölzel GmbH gehört zu den führenden Unternehmen für automatisierte Applikationsanlagen und industrielle Klebetechnologie.
4
proposal ui-design
,,
avid studio
DER KLEBERAUPENSTOSS IST DER KRITISCHSTE PUNKT EINER JEDEN KLEBENAHT
5
avid studio
proposal ui-design
PROJEKT BRIEFING
STATUS QUO ZUM „THERMAL JOINT CHECK“ In immer stärkerem Maße werden industrielle Prozesse von Menschen via Bildschirm-Oberflächen (GUI) gesteuert. Leistungssteigerung, Automation und Komplexität dieser Prozesse sind hierfür einige Stichworte. Immer mehr Funktionen und Bewegungen von Maschinen und Geräten werden motorisch verändert und liegen oft nicht mehr im Sichtfeld des Bedieners. Wir betrachten das sichere Erkennen, das Verstehen und das Sichtbarmachen der Prozesse und Informationen für den Bediener als wichtige Kriterien bei der Entwicklung von Mensch Maschine Interfaces. Entwickelt wird für die ATN GmbH eine Benutzerschnittstelle (Graphic User Interface) zur Maschinensteuerung und optischen Prüfung von Klebestoßnähten. Ziel ist es, ein funktionsfähiges und anwenderfreundliches Interface zu erstellen, welches die Anwendungssoftware auf dem Maschinendisplay
mittels grafischer Symbole und Steuerelemente bedienbar macht. Das GUI findet Verwendung in Maschinen und Anlagen der ATN Hölzel GmbH und wird durch entsprechende Fachkräfte verwendet. Durch die funktionale Überschneidung von Anforderungen aus der Ergonomie, der Semiotik, der Grafik und weiterer Gestaltungsbereiche entwickeln wir eine Lösung, welche neben der Funktion auch die Corporate Design Kriterien des Kunden erfüllt.
6
avid studio
proposal ui-design
.BISHERIGE LÖSUNG Logik Struktur Design / Ästhetik
Das derzeitige Interface der Applikationsanlage hat deutliche Schwächen in der logischen Benutzerführung. Die komplexen Funktionen zur Kalibrierung der Kamera und der Auswertung des Bildmaterials sind unzureichend auffindar. Darüber hinaus spiegelt sich das CI des Unternehmens nicht in der digitalen Anwendung wieder.
7
avid studio
proposal ui-design
USER CENTERED UI DESIGN
Der Double Diamond ist eine Visualisierung des Kreativprozesses, oder eines Design Sprints und ermöglicht dem UX Designer, die Bedürfnisse seiner Nutzer gezielt zu verstehen und einzusetzen. Der Prozess hilft dem Team, gemeinsam in dieselbe Richtung zu arbeiten und kann optimal als Kommunikationsmittel in Meetings verwendet werden, zum Beispiel, wenn wir die Projekt Beteiligten über den aktuellen Stand im UX Prozess informieren, oder einem UX-Fremden veranschaulichen, wo und wie Nutzerwissen in unserem Unternehmen verwendet wird.
Alle Teammitglieder ob nun Designer oder Nicht- Designer können bei einer konsequent angewandten Strategie, konsistent bessere Designentscheidungen treffen. Dies reicht vom Verstehen und Definieren des Design-Problems durch User Research bis hin zur zielgruppengerechten Ausarbeitung von Lösungsansätzen.
DESIGN MACHT STRATEGIE KONKRET 8
,,
avid studio
proposal ui-design
DESIGN STRATEGIE
PHASE 01
PHASE 02
PHASE 03
PHASE 04
user interviews
personas
brainstorming
cultural probes
evaluation
ideation
working prototype
user journey
concepts
wireframing
recommendation
different solutions
usable solution
opportunities
define target state
specific solution
Entwickelt wurde der Double Diamond Prozess von der britischen Stiftung „British Design Council� im Jahr 2005.
9
avid studio
proposal ui-design
DESIGN PROZ ESS
+ kick off meeting
+ client feedback
+ discovery
+ development
+ content
+ beta launch
NUTZERZENTRIERTES DENKEN UND HANDELN BRAUCHT EINEN KONSISTENTEN PROZESS. 10
,,
avid studio
proposal ui-design
+ wiref rames
+ visual design
+ user testing
+ f inal release
+ presentation
+ analytics
DESIGN PROZESS Der Double Diamond Prozess ist der ideale Begleiter durch den Design-Prozess in jedem Team. Durch die zusätzliche Visualisierung des Prozesses versteht jeder im Team, welche Phase gerade ansteht und welche Schritte folgen.
Der Prozess hilft uns, eine klare Roadmap aufzustellen und Nutzerfeedback von Anfang an einzuplanen. Zudem dient uns der Double Diamond als Visualisierung fĂźr die Kommunikation in Meetings mit involvierten Stakeholdern. 11
avid studio
proposal ui-design
DESIGN PROZ ESS
SZENARIO & PERSONA
Als archetypische Nutzer repräsentieren Personas die Ziele und Bedürfnisse der Zielgruppe und machen es möglich, von Beginn an fundierte Entscheidungen bei der Entwicklung nutzerfreundlicher Produkte zu treffen. NUTZER EIGENSCHAFTEN
BEDÜRFNISSE
Fachpersonal
Wiedererkennung
UI Steuerungen gewöhnt
visuelle Unterstützung (Grafiken)
erhält Schulung
Vertrauen (keine Angst vor Fehlern)
vorgeprägte Erwartungshaltung
logische / sichere Benutzerführung
12
avid studio
proposal ui-design
DATENBASIERTE PERSONAS
Personas sind fiktive Nutzer der Zielgruppe Ihres Produktes und wie die realen Nutzer haben sie Bedürfnisse, Fähigkeiten und Ziele. Sie stellen nicht den Durchschnitt der Masse dar – sie sind spezifische Personen, die Muster im Nutzerverhalten deutlich machen.
13
avid studio
proposal ui-design
ENTWURF
.WIREFRAMES STATISCHE WIREFRAMES & DYNAMISCHE WIREFRAMES
Es gibt zwei Arten von Wireframes: statische und dynamische. Ein statisches Wireframe beinhaltet nur ein grundlegendes Raster, in dem Inhalt und Design noch keine Rolle spielen. Ein dynamisches Wireframe geht schon fast ins Prototyping über: Die Ideen sind weiter ausgereift und lassen sich interaktiv oder mit Animationen umsetzen.
EIN DRAHTMODELL DIENT ALS VISUELLER LEITFADEN, DER DAS GRUNDGERÜST DES INTERFACE DARSTELLT. 14
,,
avid studio
proposal ui-design
WIREFRAME LEITFADEN Wireframing ist ein wichtiger Schritt in jedem Screen-Design-Prozess. Das Wireframing - übersetzt bedeutet es in etwa das Erstellen eines Drahtgerüsts - ermöglicht es in erster Linie, die Informationshierarchie des Designs zu definieren.
Dies wiederum erleichtert es uns das Layout in der Reihenfolge anzuordnen, in der die Informationen dem Nutzer präsentiert werden sollen.
01. DIE CHALLENGE
02. DIE LÖSUNG
Ein Wireframe ist vergleichbar mit der Blaupause eines Architekten: Bevor Wir verstehen, wie Wir das Haus bauen sollen, müssen Wir es erst in einer zweidimensionalen Schwarz-Weiß-Zeichnung betrachten. Gleiches gilt für ein Screen-Design. Wir können nicht die Pixelebenen in Photoshop erstellen oder anfangen Codeblöcke zu schreiben, ohne zu wissen, wo die Informationen überhaupt angezeigt werden sollen.
Wireframing ist wichtig. Denn es erlaubt dem Designer die Planung des Layouts und der Interaktion mit den Schnittstellen, ohne von Farben, Schriftbild oder sogar Texten abgelenkt zu werden. Wir erklären es unseren Kunden gerne so: Wenn es dem Benutzer anhand des schwarz-weißen Wireframes nicht gelingt herauszufinden, wie er agieren und navigieren muss, ist es egal, welche Farben letztlich verwendet werden. Eine Schaltfläche muss gut erkennbar sein, auch wenn sie nicht leuchtend eingefärbt ist.
Auf einer tieferen Ebene ist ein Wireframe auch sehr hilfreich bei der Bestimmung, wie der Benutzer mit dem Interface interagiert. Zum Beispiel können Wireframes verschiedene Zustände der Schaltflächen darstellen oder die Verhaltensweise eines Menüs aufzeigen.
Ganz wie das Fundament eines Hauses: es muss stark und zuverlässig sein, bevor Sie sich entscheiden, ob Sie das Gebäude mit einem teuren Anstrich verschönern.
WIE FÜR JEDEN DESIGNPROZESS GILT AUCH HIER: VERÄNDERN, VERÄNDERN, VERÄNDERN.
15
,,
avid studio
proposal ui-design
ENTWURF
.WORKFLOW Mit einem gut durchdachten Konzept wurtde Basis für eine nutzerfreundliche Bedienung geschaffen. Gemeinsam mit ATN erarbeiteten wir ein individuelles, intelligentes Interaktionskonzept für das User Interface. Dabei wurde die Komplexität deutlich reduziert, in dem wir uns auf das Wesentliche fokussierten.
16
avid studio
proposal ui-design
.RASTER 01. DEN NUTZER IM FOKUS
02. FLÄCHEN UND RASTER
Für eine gesteigerte Nutzungsqualität wurde sich viel stärker an den Aufgaben der Nutzer, ihrem Verständnis vom Produkt und ihrer Sprache orientiert. Das neu gestaltete Raster organisiert alle Inhalte in einer grundlegenden Ordnung. Die gestaltete Fläche sorgt auf dem 1024 x 768px großen Display für eindeutige optische Achsen.
17
• • • • •
Interaktionen Navigation Basis-Layout grundlegende Screen-Elemente Designdetails
avid studio
proposal ui-design
PROJEKT ASCHLUSS
FINALES DESIGN Logik Struktur Design / Ästhetik
UI/ 18
avid studio
proposal ui-design
UX/
19
avid studio
.KONTAKT Avid Designstudio Andreas-Schubert-StraĂ&#x;e 23 01069 Dresden www.avid-studio.com hello@avid-studio.com
SOCIAL MEDIA facebook.com/avidstudiocom/ instagram.com/aviddesignstudio/ https://issuu.com/avid-studio linkedin.com/company/avid-designstudio/ pinterest.de/aviddesignstudio/ xing.com/companies/aviddesignstudiogbr/
20
proposal ui-design
21
PRODUCT UI/UX BRANDING STRATEGY