Material Design

am 22 Okt 2017 in Aktuelles von
Bisher unkommentiert »

„a comprehensive guide for visual, motion and interaction design“

 

Plattformen, Onlineshops und Webseiten etc. sind nur dann erfolgreich, wenn sie auf die Bedürfnisse, Erwartungen und Ziele der zukünftigen Nutzer zugeschnitten sind. Die Begriffe Usability (Gebrauchstauglichkeit) und User Experience (Nutzererlebnis) gewinnen daher in unserer digitalen Welt immer mehr an Bedeutung und sind heutzutage entscheidende Faktoren für den Erfolg digitaler Produkte. Ein wesentliches Ziel von Material Design ist es, anhand dieser Faktoren, eine möglichst positive und benutzerfreundliche Interaktion zwischen Nutzer und Applikationen zu schaffen.

Wir widmen uns in diesem Blogeintrag der Frage: „Was ist Material Design?“.

Material Design ist eine von Google entwickelte Designsprache, die stetig erweitert wird. Die Sprache wurde im Juni 2014 auf Googles Entwicklerkonferenz (Google I/O) vorgestellt und kam in der Anwendung „Google Now“ erstmalig zum Einsatz.

Material Design koppelt Gestaltungsregeln von klassischem, print-basiertem Design mit den Chancen digitaler Anwendungen. Die von Google veröffentlichten und sehr umfangreichen Richtlinien zu Material Design sollen konkrete Vorgaben dafür schaffen, wie eine Applikation benutzerfreundlich und gebrauchstauglich gestaltet werden kann. Sehen wir uns das mal genauer an:

Das gesamte Konzept basiert auf unserer fühlbaren und materiellen Wahrnehmung der Realität. Auch wenn Animationen und Bewegungen ein zentrales Prinzip von Material Design darstellen, ist das Design, ähnlich dem Flat Design, auf das Wesentliche reduziert. Diese Reduzierung soll die Nutzer der digitalen Welt dabei unterstützen möglichst effektiv und effizient ihre Ziele zu erreichen. Dabei sind laut der Guideline die Faktoren Licht, Oberfläche, Performance und Bewegung unerlässlich. Drei der wichtigsten Gestaltungsregeln des Material Designs sind:

1. Einhaltung der Kontinuität

Die Benutzeroberflächen, darunter Animationen, Interaktionen und Übergänge sollen hier in direkter Abhängigkeit zum jeweiligen Kontext stehen und über alle Endgeräte hinweg ein wiederkehrendes Bild schaffen.

2. Erzeugung von Tiefe in den einzelnen UI-Elementen

Die komplette Designsprache basiert auf der Dreidimensionalität. Jedes UI-Element hat daher eine x-, y- und eine z-Achse. Außerdem hat Google für die jeweiligen Elemente strenge Richtlinien für ein konkretes Licht- zu Schattenverhältnis aufgestellt.

3. Beachtung der physikalischen Gesetze

Bewegungsabläufe sollen den physikalischen Gesetzen folgen und das Verhalten von Objekten widerspiegeln. Man kann sich die einzelnen Materialien (Elemente) wie Produkte aus Papier vorstellen, die im selben Raum frei und auf jeder beliebigen Achse, verschoben werden können.

Ein weiterer Vorteil von Material Design ist, dass es sich wunderbar und sehr einfach in deine Applikation oder Webanwendung einbinden lässt. Dazu stehen Frameworks wie zum Beispiel Material Design Lite oder Materialize kostenlos zur Verfügung.

Fazit

Material Design ist seit 2015 lediglich ein Designtrend und nicht die Designlösung schlechthin. Manche Techniken und Vorgaben eignen sich für dein Projekt, andere weniger. Außerdem ist zu beachten, dass eine stupide Verwendung einer Designsprache keine Innovativität und Experimentierfreudigkeit hervorbringen kann und es uns dadurch sogar eventuell entfallen kann auf Feinheiten zu achten. So kann es leicht passieren, dass die Funktionalität unserer Applikation vernachlässigt wird und unsere Applikationen und Webseiten mit der Zeit nahezu identisch aussehen. Nichtsdestotrotz wird dabei auch eine gleichbleibend positive Benutzererfahrung über alle Endgeräte hinweg geboten.

Mein Besuch bei Google in München

am 31 Aug 2016 in Aktuelles, ON-Life von
Bisher unkommentiert »

Google Inc. ist ein US-amerikanisches Unternehmen mit Hauptsitz in Mountain View, Kalifornien. Das Unternehmen wurde hauptsächlich durch Ihre gleichnamige Suchmaschine „Google“ bekannt. Google rechnet Unternehmenskultur und die Interaktion zwischen ihren Mitarbeitern sehr hoch an. Daher wird Kommunikation und Informationsaustausch, sowohl in den Teams als auch teamübergreifend durch einzigartige Büroinfrastruktur und zahlreichen anderen Prinzipien, stark gefördert.

Was macht also Google Inc. so erfolgreich? Das Unternehmen selbst sagt: „Unsere Mitarbeiter machen Google zu dem, was es ist“. Daraus könnte man ableiten, dass die Mitarbeiter, auch bezeichnet als “Googler”, selbst der Schlüssel zum Erfolg sind. Wenn man die Hypothese weiter verfolgt stellt sich die Frage, inwiefern Google Maßnahmen ergreift, um sich den Erfolg weiterhin zu sichern oder eventuell sogar noch zu steigern.
Ist die einzigartige Arbeitsumgebung dafür ausschlaggebend, die Google Ihren Googlern bietet? Bildet euch doch selbst eine Meinung darüber.
Im Folgenden wird von meinem Besuch im Google-Büro, ermöglicht durch meine Unternehmen (Hornbach Baumarkt AG), in München berichtet:

GoogleBureoAussen

Abbildung 1: Das Büro von Google in München von Außen

In dem neu erbauten Google-Büro in München sind ca. 400 Mitarbeiter beschäftigt. Als wir nach 3 1/2h Fahrt dort angekommen sind, erwies sich die Parksituation als fürchterlich. Ringsherum befinden sich etliche, riesige Bürogebäude und nur eine sehr geringe Anzahl an Parkplätzen, was die Mitarbeiter letztendlich “zwingt“ die öffentlichen Verkehrsmittel zu nutzen oder mit dem Fahrrad zur Arbeit zu kommen.
Am Empfang angekommen wurden uns direkt die Führungsleiter vorgestellt, die uns sofort in einer der vielen Meeting Räume von Google geführt haben. Als erstes bemerkten wir das High-Tech Niveau der eingebauten und genutzten Geräte. Sowohl zwei mindestens 50 Zoll große Flachbildschirme, als auch eine Telefonspinne und eine kleinen Cam, die mit Leichtigkeit den ganzen Raum aufnehmen konnte, stehen den Mitarbeitern zur Verfügung.
Wir wurden durch die zwei vorhandenen Kantinen geführt, in denen täglich 3 kostenlose Mahlzeiten für alle Mitarbeiter serviert werden. Diese Mahlzeiten werden von den Sternenköchen zu festen Uhrzeiten angefertigt, sodass die Googler, falls gewollt nur noch zugreifen müssen. Sprich das Unternehmen entlastet Ihre Mitarbeiter alleine schon dadurch, dass sie sich keine Gedanken mehr über Ihr Mittagessen oder Frühstück machen müssen. Zudem besitzen Googler die Möglichkeit je nach Belieben, in dem miteingebaute Fitness-Studio selbstständig zu trainieren, sich von den dort angestellten Trainern trainieren zu lassen oder aber dessen Kurse zu besuchen. Trotz den Annehmlichkeiten, die uns bisher vorgestellt wurden, finden sich auch bei Google zum größten Teil Großraumbüros wieder.
Jedoch bietet das Unternehmen seinen Angestellten dementsprechend etliche Rückzugsorte an. Zum Beispiel Ruhe-Räume oder Leseecken. Sämtliche Rückzugsorte, sogenannte „Themenräume“, sind von den Innenarchitekten entsprechend nach einem speziellen Thema individuell eingerichtet und gestaltet.
Wir wurden zum Beispiel durch solch einen Themenraum, in diesem Fall mit Snowboards und Skier verziert, geführt.
Neben den zahlreichen Aktivitätsmöglichkeiten im Spiele –und Musikraum, wie PS4 spielen, mit Klavier, Gitarre, Flöte etc. zu musizieren oder aber Zeit mit den Gemeinschaftsspielen zu verbringen, ist in jedem 50Meter Radius eines Mitarbeiters eine Miniküche erreichbar, in der sämtliche Getränke und Snacks kostenfrei erhältlich sind.
Zusätzlich wird den Googlern die Möglichkeit geboten sich auf dem Hof mit Fußball, Basketball und Volleyball zu vergnügen oder auch mal eine kleine Entspannungspause auf der wunderschönen Dachterasse einzulegen.
Selbst eine halbstündige, kostengünstige Massage von einer professionell, ausgebildeten Masseuren ist dem Arbeitgeber für seine Googler nicht zu viel.

Laufwerke zum Speichern von Daten? Kennen die Mitarbeiter nicht. Hier wird alles was sie brauchen in der Cloud gespeichert. Zudem haben die Googler Zugriff zu jeglichen Analyse- und Auswertungsdaten, welche dem Unternehmen zur Verfügung stehen. Vor allem bezüglich der aktuell großen Angst vieler Unternehmen Daten außerhalb der Führungsebene zu verbreiten ist das eine Besonderheit.
Ihnen wird sogar die Möglichkeit geboten, das Vorgehen des Unternehmens mit Hilfe eines Online-Portals kritisch zu hinterfragen. Außerdem können sie jeden Freitag, an dem TGIF-(Thank-God-IT`s-Friday)-Vortrag teilnehmen. Dort ist immer mindestens einer der Mitgründer von Google anwesend ist,
Nach einem langen und ereignisreichen Tag lässt sich festhalten, dass Google alles dafür macht, damit sich dessen Mitarbeiter am Arbeitsplatz wohl fühlen und sich effektiv auf die Arbeit stürzen können.

GoogleBueroTerasse

Abbildung 2 : Außenterrasse von “Google-München”

Quellen:
Abbildung 1: http://www.com-magazin.de/img/6/2/1/5/9/8/Google-Muenchen_w599_h500.jpg

Abbildung 2: http://bilder.bild.de/fotos-skaliert/dachterrasse-zwischen-den-buero-bloecken-im-neuen-google-haus-52008590-45282384/2,w=559,c=0.bild.jpg

weitere Quellen:

https://www.google.com/intl/de_de/about/company/facts/culture/

http://www.sueddeutsche.de/muenchen/unternehmen-so-sieht-das-wohlfuehl-buero-von-google-in-muenchen-aus-1.2941336

User-Centered Design (UCD)

am 01 Aug 2016 in Tech, Tools & Bücher von
Bisher unkommentiert »

Produkte, Onlineshops und Webseiten etc. sind eben nur dann erfolgreich, wenn sie auf die Bedürfnisse, Erwartungen und Ziele der zukünftigen Nutzer zugeschnitten sind.
Was könnte daher noch hilfreicher sein als ein benutzerorientierter Prozess um ein jeweiliges Produkt zu generieren? Richtig, nichts!

Also was ist dieses „User-Centered Design“ überhaupt und wie wendet man es an?

Unter dem Begriff „User-Centered Design“ versteht man einen benutzerorientierten Prozess, der das Ziel hat, ein für den Nutzer gebrauchstaugliches (Usability) Produkt zu schaffen, welches ihm ein positives Nutzererlebnis (UX) bietet.
Der „UCD“- Prozess ist zudem ein iteratives Vorgehen, in welcher der User von Anfang an bis zur Fertigstellung des Produkts die Schlüsselfigur darstellt.
Dieses Vorgehen lässt sich in 4 Phasen gliedern:

 1. Analyse des Nutzungskontextes

a) Die Gestaltung basiert auf einem umfassenden und genauen Verständnis des Benutzers (Kenntnisse + Fertigkeiten + Erfahrungen) und seiner Aufgaben (zur Zielerreichung erforderlichen Aktivitäten), sowie dessen Arbeitsmittel und Organisation (Firmenkultur => technisch-soziales Umfeld)

 2. Entwicklung und Definition von Nutzungsanforderungen

a) Aus der Kontextanalyse werden Nutzungsanforderungen abgeleitet, die während des Entwurfsprozesses umgesetzt werden sollen.

Eigenschaften von Anforderungen

Abbildung 1: Eigenschaften von Anforderungen

3. Konzeption und Entwurf

a) Man macht die Gestaltungsidee für den Benutzer erlebbar, indem man den zuvor definierten Nutzungsanforderungen nach und nach Gestalt gibt. Dabei folgt man der „Kultur des Ausprobierens“ (=>Wegwerfen tut nicht weh) und geht von der zunächst „groben“ Gestaltung über zur „Feinen“.
b) Zu Unterscheiden gilt zwischen folgenden Prototyping-Stufen

  • Konzeptioneller Prototyp (Verbale Beschreibung)
  • Papierprototyp (Handskizze)
  • Statische Bildschirmdarstellung
  • Dynamische Simulation (Simul¬ation einfacher Abläufe)

4. Evaluation
a) Die Gestaltungslösungen/Prototypen werden nun aus der Benutzerperspektive evaluiert und je nach Anwendungsfall und Feedback weiter optimiert. Zuletzt erfolgt noch die Prüfung, ob diese auch wirklich die Nutzungsanforderungen erfüllen.

Das zentrale Merkmal des UCD-Prozesses ist ein zielorientiertes, iteratives Wechseln zwischen Analyse-, Design- und Evaluationsprozessen, sowie die Fortentwicklung ihrer jeweiligen Resultate.

Nach korrekter Anwendung dieser Methode steht eurem Unternehmenserfolg kaum noch etwas im Wege!

Zum Schluss das Ganze noch als übersichtliche Grafik zusammengefasst:

Wechselseitige Abhängigkeit menschenzentrierter Gestaltungsaktivitäten

Abbildung 2: Wechselseitige Abhängigkeit menschenzentrierter Gestaltungsaktivitäten


Quellen:

Usability Toolkit

Ergo Online

Usability in Germany

Frauenhofer FIT – Zertifizierter Usability Engineer (Ausbildung zum zertifizierten Usability Engineer Ordner 23. – 27.02.2015)

Procontext

Thinkneuro

Mannsmedia

Abbildung 1: Procontext

Abbildung 2: Ergo Online