protonet design hacks

If your only tool is a CSS hammer, the entire world wide web looks like a nail.

This time I’ve implemented a couple of CSS design improvements for protonet’s user interface. The average user experience of the sample user group went up from sort-of-ok to relieved and delighted.

The motivation of all the changes is pure usability design: better layout, contrast, color scheme, legibility, control element recognition, focus on notifications, less noise, less scrolling, semantic colours for the calendar, and much more. The page protonet design hacks summarises and explains the changes. I’ve also played a bit with JuxtaposeJS to provide before&after comparison.

before and after comparison at protonet design hacks

There is more in the pipeline regarding protonet – other enhancements of my design lab apply to the twitter stream and google’s search experience. Let me know if you are interested in the comments below.


// Original: protonet design hacks CC-BY-NC-4.0 Matthias | mprove.net | @mprove | Musings & Ponderings

Ein „verplanktes“ Projekt

„Für jedes Problem gibt es eine Lösung.“

Unter diesem Motto haben Designer und andere Kreative im Laufe der Zeit unendlich viele Methoden entwickelt, um die Probleme einer Idee oder eines Projekts zu lösen. In unserem CLIC-Seminar haben wir eine dieser Methoden genau angeschaut und diese auf unsere Projekte angewendet oder um genau zu sein: Wir haben unsere Projekte „verplankt“ – nach einem Modell aus dem „Interaction Design Sketchbook“ von Bill Verplank. In diesem Blogpost werde ich genanntes Modell anhand meines verplankten Projekts zeigen und erläutern.

Das Modell setzt sich aus insgesamt acht Schritten eines Frameworks zusammen, die keine festen Vorgaben darstellen, aber die Hauptanliegen des Projekts ansprechen sollen:

Modell: Framework für Interaction Design von Bill Verplank.

Modell: Framework für Interaction Design von Bill Verplank.

Schauen wir uns nun einmal mein Projekt unter diesen Schritten an:

modell-verplank

Die IDEA beschreibt den Grundgedanken hinter meinem Projekt. Bei METAPHOR musste das Prinzip der Idee in einen bildhaften Ausdruck umgewandelt werden, also „Welches bereits vorhandene Prinzip nutzt mein Projekt?“. Zu meiner Idee lässt sich zusätzlich ergänzen, dass sie auch auf dem Konzept des Karussells basiert, da die gezeigten Veranstaltungen immer wieder wechseln und in einer Endlosschleife präsentiert werden.

IDEA: Teilen von privaten Veranstaltungen und Aktionen durch eine App und mehrere Urban Screens.

 

METAPHOR: Plakatanzeigen und Leuchtreklame.

Als nächstes ging es um das MODEL – welche Interaktion findet auf welche Weise statt? Unter DISPLAY habe ich anschließend die geplante Umsetzung und Darstellung der Idee erläutert.

MODELL: Interaktion durch App / durch Sensor an den Screens.

 

DISPLAY: Newsfeed der Veranstaltungen wird auf großen Screens an belebten Orten in der Stadt gezeigt.

Nun ging es weiter mit ERROR: Welche Probleme möchte ich lösen? Im sechsten Punkt SZENARIO wurde die Situationen beschrieben, die meinen Zielgruppen den Anlass geben, mein Produkt zukünftig zu nutzen.

ERROR: 1. Ich veranstalte ein Event, aber niemand kommt. 2. Ich möchte etwas unternehmen, weiß aber nicht wo in der Stadt etwas los ist.

 

SZENARIO: 1. Ich möchte viele Leute über meinen Flohmarkt informieren. 2. Ich bin gerade unterwegs und möchte wissen, was in der Stadt los ist, bzw. neue Leute kennenlernen.

Die letzten beiden Punkte – TASK und CONTROL – beschreiben die Aufgaben der Screens und wie genau ich mit diesen interagieren, bzw. wie ich sie steuern kann.

TASK: Aufstellen der Screens in der Stadt (Installation), zeigen Bilder / Videos von Veranstaltungen, Wechseln der Bilder / Videos, Sensor registriert Bewegungen, Informationen werden bei Nähe eingeblendet, Navigation durch Handbewegungen.

 

CONTROL: Kontrolle und Navigation durch Handbewegungen (Sensor) / durch App.

Das Modell lässt sich auf neue und bereits existierende Projekte anwenden und man kann auf diese Weise schauen, ob die eigenen Überlegungen funktionieren.


Der Artikel Ein „verplanktes“ Projekt hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.

Stadterfahrung – Selbsterfahrung


Zu Beginn des Semesters habe ich mit den Studenten des Challenge Lab for Interactive Concepts /CLIC/ einen szenografischen Rundgang durch Schwerin veranstaltet. aufmerksam für das gewöhnliche ist eine Methode von Sven Klomp und geht auf einen UX Roundtable in Hamburg vor 3 Jahren zurück.

Nun also CLIC aufmerksam in Schwerin, das sich bereits in einigen Artikeln auf diesem Blog niedergeschlagen hat. Die urbane Expedition hatte mehrere Ziele, die auch alle sehr gut aufgegangen sind:

  • Irritation zu Beginn des Semesters als Signal, dass hier nicht alles so sein wird wie sonst
  • Bonding und Kennenlernen
  • Situatives Einfühlen in urbane Raumsituationen als Grundlage für das Generalthema Urbane Interaktionen
  • Mapping zwischen Erlebnis und Ausstellung und später noch die Repräsentation in google maps

Eine Online-Gemeinschaftsfotoausstellung bildet nun den Abschluss der Aktion. Jedes einzelne Bild ist so banal, als könnte es auch auf Insta erscheinen. Als Serie ergeben sich aber erneut überraschende Einsichten und Zusammenhänge, die wiederum eine eigene Bedeutungsebene darstellen.



Der Artikel Stadterfahrung – Selbsterfahrung hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.

Alles für die Elemente: Runde 2

Die Elemente gehen in die zweite Runde. Alle werden weiter bearbeitet, optimiert und auf eine Hololensbrille angewendet. Dafür suchte ich mir verschiedene Bilder der Hololens aus, um die Perspektive auszunutzen. Danach wird in einem weiteren Punkt die Kommunikation untersucht. Also Los geht´s.

Der Anfang der Elemente macht heute wieder der Schlachtplan für den 18.10.1813, den dritten Schlachttag. Wenn alle Elemente auf der Karte aktiviert sind wirkt sie voll, doch der Spieler sieht sie nicht unbedingt in ihrer ganzen Pracht, denn der User kann auswählen was er sehen will. Wie? Ganz einfach. Der User kann sagen, ich möchte wissen wo meine Verbündeten sind, er kann auch sagen welchen Verbündeten er sehen möchte, da dieser nach Hilfe fragte. Die Gebäude, der Baum und der Kolmberg dienen für den Spieler als Orientierungspunkte. Der Nutzer sieht folglich, nur den Punkt, den er zu sehen braucht und kann zu seinen VR-Mitspielern sagen: »Geht zur Mühle. Das ist der Ort Hallesche Vorstadt und stört die napoleonischen Kämpfer.« Mhmmm, und wie wird das Netz weniger, damit es nicht so aussieht als ob die Brille einen Sprung hat? Um die Wege auf der Karte übersichtlich zu halten, verwendete ich die wichtigsten Wege, auf denen der Nutzer sich bewegt. Dennoch sind es viele Wege, daher bauen die Wege auf denen der User sich bewegt auf. Somit sehe ich nur den Teil der Wege, welchen ich brauch. Aber wie kann ich dann meinen Verbündeten Hilfe aussenden? Wenn ich dies machen möchte, sehe ich die Wege auf denen ich mich und mein in Not geratener Verbündeter bewegen.

kartenvariante1-mit-figurenorientierungspunkte_benoetigte-elemente

Die Karte mit ihren historisch korrekten Orientierungspunkten.

Ein weiteres Element zur Orientierung stellt der Kompass dar. Dieser soll perspektivisch gezeigt werden, so als ob man ihn schräg in der Hand hält. Darüber hinaus soll er einfach sein, aussehen wie 200 Jahre alt und dem User alle nötigen Informationen bieten, damit dieser sich im Raum und durch die Welt (dem Schlachtfeld der Völkerschlacht) bewegen kann. Dazu gehört die Frage: Wie bewegt sich der User überhaupt im Raum? Wenn der User drei Schritte im realen Leben macht, bewegt sich der Kämpfer in der Hololensaanwendung 300 m weiter (nach vorne, links, rechts oder rückwärts). Darüber hinaus wird unterschieden zwischen den Schritten beim Kampf und denen beim Schleichen durch die Dörfer und Schlachtfelder. Den Unterschied erkennt der Computer, durch das anlegen der Waffen.

Nun zu einem anderen Element. Als nächstes folgt die Lebens- und die Todesanzeige. Was passt am besten zu dem Tod? Natürlich der Schierlingsbecher. Nach dem Becher folgt eine Anzeige in Form von Zahlen. Diese zeigen die Tode am jeweiligen Schlachttag, die Tode in der gesamten Schlacht und die Tode in den eigenen Reihen (Verbündete). Das Leben ist wertvoll, vor allem in so einer wichtigen Schlacht, wo alle Lebenden Krieger benötigt werden. Daher wird das Leben durch drei glänzende auf der Seite liegende Diamanten dargestellt. Wenn man schwer verletzt wird (fast schon tödlich), verliert man einen Diamanten (ein Leben). Wenn dies dreimal passiert, ist der Spieler Tod und er hat die Schlacht um seine Stellung (den Ort den er verteidigen oder einnehemen soll) verloren. Man hat die Möglichkeit ein neues Leben zu erhalten, wenn man die Schlacht um seine Stellung gewinnt. Dennoch: wenn alle Verbündeten aus einem Team sterben, ist die Völkerschlacht verloren und wenn Napoleonspieler schlau sind, können diese auch einmal in ihrem Leben die Völkerschlacht gewinnen. Die Anzeige des Lebens wird im Himmel angezeigt, folglich schaut der Spieler hinauf und die Todesanzeige ist auf den Boten zu finden, da es um die Gefallenen geht.

 

leben_benoetigte-elemente

Die Lebensanzeige.

tod-schierlingsbescher_benoetigte-elemente

Der Schierlingsbecher einmal in groß.

tod-schierlingsbescher_benoetigte-elemente

Der Schierlingsbecher mit der Todesanzeige.

Als eine kleine Belohnung, erhält man nach dem Gewinn einer Teilschlacht ein Emblem. In den folgenden Bildern sind die Emblems für den 18.10.1813 gezeigt. (PS: Die Emblems folgen im laufe der nächsten Wochen :D)

Nach den Elementen, betrachte ich die Kommunikation genauer. Hier untersuche ich mögliche Ideen, wie der User die Elemente auswählen, vergrößern, verkleinern und Hilfe aussenden kann. Dies ist vom Spieler hauptsächlich Sprachgesteuert. Kein Witz, denn der Regisseur hört alles mit, hat die Kontrolle über alle Knöpfe im Regieraum und den Computer, natürlich gehört dann das zuhören und darauf reagieren auch zu seinen Aufgaben. Der User hat einige Befehle in seinem Vokabular auf denen der Mann aus der Regie reagiert und Knöpfchen drückt. Dazu gehöhren die Worte Hilfe!, Ich helfe, mehr Mann, Angriff und Rückzug.

Der User selbst kann steuern was er sehen will: Wenn er in den Himmel schaut sieht er seine Lebensanzeige, wenn er auf den Boten schaut die Gefallenenanzeige und den Schlachtplan sieht er, wenn er seinen Blick nach weit Links oder Rechts richtet, da er auch so die Orientierungspunkte auf dem Schlachtfeld sieht, damit er weiß vor welchem Dorf er sich befindet. Der Kompass wird nur beim Laufen durch die Schlachtfelder neben den Schlachtplan angezeigt und sonst hat der Nutzer die Möglichkeit diesen anzuzeigen, wenn er die Hand offen ausstreckt so als ob dieser sich in echt auf der Hand befindet. Die Elemente kann der Nutzer durch das aufklappen von aufeinander gedrückten Daumen und Zeigefinger vergrößern und das schließen dessen verkleinert die Elemente wieder.


Der Artikel Alles für die Elemente: Runde 2 hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.

Wir stellen vor: Deniz Örnek

Was hast du aus dem Studium mitgenommen?
Es ist wichtig offen für Neues zu sein, denn nur so ist es möglich dazu zu lernen.

Welche waren die schönsten Momente?
Am Ende meines Studiums wurde zu mir der Satz „Freunde fürs Leben“ gesagt 🙂

Wie hat das Studium deine beruflichen Chancen bzw. deine Arbeit verändert/beeinflusst?
Im Anschluss an mein Masterstudium „Next Media“ habe ich ein Stipendium im Rahmen eines gemeinsamen Fellowships von VOCER, dem Google News Lab und der Datenfreunde GmbH begonnen. Weitere Informationen hierzu können unter dem folgenden Link eingesehen werden: Deniz Örnek wird VOCER-Fellow im Google News Lab

Was machst du aktuell?
Ich arbeite als Schnittstelle zwischen Technology & Content an der Entwicklung einer Nachrichten-App „xMinutes“.

Was möchtest du zukünftigen Studierenden sagen?
Der Austausch mit unterschiedlichen Menschen und das Informieren über verschiedene Nachrichtenquellen ist sehr wichtig, um nicht unbewußt einseitig in eine Richtung gelenkt zu werden.

Wir brauchen die Konterrevolution! Time well spent

Mich beschleicht ein ungutes Gefühl: das Übermanipulations-Unbehagen

Es ist der 12.09.2014. Ich sitze im Auditorium der MTP Konferenz in London und folge dem Vortrag von Nir Eyal zum Thema „Building habit-forming products“.

Nir spricht darüber, dass die meisten Aktionen, die wir tagsüber ausführen, von Gewohnheiten getrieben sind und damit ganz unbewusst ablaufen. Und er spricht darüber, wie man Produkte so gestaltet, dass sie die Nutzer auf eben genau dieser Ebene ansprechen. Sein prominentes Beispiel dafür sind die kleinen Bubbles, die an unseren Apps aufpoppen und sagen „Hey! Hier gibt es heiße News für dich!“. Und er spricht darüber, warum wir diesen Triggern so schlecht wiederstehen können.

Weiterlesen auf produktbezogen.de

produktbezogen.de – Der Blog für Produktmanagement und User Experience Design
Aktuelle Artikel | Buchempfehlungen | Jobs | Über uns

Alles für die Elemente: Runde 1

Für die Hololens Anwendung benötige ich diverse Elemente, wie eine Lebensanzeige, Karten, Anzeige der gefallenen, einige Emblems und einen Kompass. Diese Elemente sollten im gleichen Stil gestaltet sein, sie sollten aussehen als wären sie über 100 Jahre alt, man sollte auf den ersten Blick erkennen was die Symbole bedeuten und wo man sich befindet. Doch wie mache ich das?

Um die Elemente im gleichen Stil erstellen zu können, nutze ich Photoshop auf meinen Laptop. Aber warum Photoshop und nicht mit Feder und Tusche, wie früher? In Photoshop habe ich die Möglichkeit mir ein Papier zu erstellen, welches total alt aussieht. Außerdem habe ich die Möglichkeit mir den perfekten Pinsel zu erstellen und darüber hinaus, kann ich das ganze in After Effects animieren. Dies sind, so finde ich, drei wertvolle Gründe für die digitale Erstellung all meiner benötigten Elemente.

papier_benoetigte-elemente

Mein verwendetes Papier. Dies erstellte ich in Photoshop, da es so aussehen soll wie 203 Jahre alt.

pinsel_benoetigte-elemente

Dies sind alles Pinsel, welche ich ausprobiert habe.

 

mein-pinsel_benoetigte-elemente

Das sind die Einstellungen und die Form meines verwendeten Pinsels.

Zuerst setze ich mich mit der Karte, dem Schlachtplan auseinander. Hierbei besteht die Schwierigkeit alle Information die nützlich ist einzufangen, ohne das diese stört, wie ein Riss in der Scheibe wirkt oder total unnütze ist. Dafür erstellte ich eine Grundkarte. Auf diese baut alles andere auf, alle anderen Elemente orientieren sich an diese Grundkarte. Da die Karte Orientierungspunkte benötigt, erfolgt die Vollendung und diese Symbolik in der nächsten Kartenrunde. Doch zunächst, setze ich mit den Kompass auseinander. Der Kompass benötigt verschiedene Ansichten, da man ihn ein und ausblenden sollte und es nicht so wirken darf wie an- und ausknipsen. Außerdem braucht der Kompass ein edles Aussehen, da dies 1813 modisch war. Am allerwichtigsten ist, er sollte funktionieren und nicht nur Deko sein. Nach dem Kompass folgt die Lebens- und Todesanzeige. Diese müssen klar erkennbar sein und den Nutzer informieren. Diese sollten schnell erfassbar sein. Ein weiterer schwieriger Punkt stellt das Emblem dar. Diese sollten an Medaillen aus der Armee erinnern und zum Design von allem anderen passen. Sie müssen mit allem eine Einheit bilden, somit sollte die Kette auch sichtbar sein.

kartenvariante1_benoetigte-elemente

Dies ist die erste Kartenvariante. Die verwendete Schrift ist die Cock. Sie ist eine Schrift, welche an alte Karten und alte Zeiten erinnert.

kartenvariante1-mit-figuren_benoetigte-elemente

Hier kamen noch die Elemente für die Verbündeten hinzu.

Dies sind meine Ersten Überlegungen zu den Elementen in der Brille. Zu diesen ersten Überlegungen werden weitere angestellt um die Einheit zu verdeutlichen. Außerdem stellen sie ein Teil des Erlebnisses dar. In den folgenden Überlegungen, werden die anderen Elemente gestalterisch in Angriff genommen und die Karte wird vervollständigt.


Der Artikel Alles für die Elemente: Runde 1 hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.

Lesenswert: Die besten Links des Jahres 2016

Auch dieses Jahr haben wir euch an dieser Stelle jeden Monat mit unseren interessantesten Link-Fundstücken aus den Bereichen Produktmanagement, User Experience Design, Innovation und Unternehmenskultur versorgt. Für die letzte Ausgabe des Jahres wählen wir aber, wie 2014 und 2015, eine andere Variante: Anstelle der besten Links aus dem letzten Monat wollen wir euch diesmal einen Jahresrückblick auf unsere bemerkenswertesten Fundstücke aus 2016 geben. Auch erfahrt ihr, welche unserer eigenen Artikel in diesem Jahr am häufigsten gelesen worden sind.

Weiterlesen auf produktbezogen.de

produktbezogen.de – Der Blog für Produktmanagement und User Experience Design
Aktuelle Artikel | Buchempfehlungen | Jobs | Über uns

Das Neueste aus Hamburgs User Experience Blogs