Single Page Applications

am 26 Nov 2017 in Tech, WebDesign von
Bisher unkommentiert »

Wer ständig mit dem Internet zu tun hat und etwas aufmerksamer durch die
verschiedenen Internetseiten surft, wird etwas feststellen: Immer mehr Internetseiten sind
nicht mehr wie früher Aufgebaut als eine Ansammlung von Seiten, die miteinander
verlinkt sind, sondern es gibt nur noch eine einzelne Seite auf der alle gewünschten
Informationen zu sehen sind, oder nachgeladen werden.

Dass dies nicht nur ein Trend ist, dem nur wenige innovative Startups folgen, wird
durch die vielen Giganten im Internet deutlich. So ist zum Beispiel die komplette Seite von
Facebook zum Großteil eine Single Page Application, auch SPA genannt. Doch auch Gmail,
Google Maps, Twitter und dir fallen bestimmt noch mehr Seiten ein, sind alles SPA’s.

Doch warum wird diese Technik so häufig und gerne eingesetzt? Dies lässt sich leicht
durch die vielen Vorteile, die eine SPA mit sich bringt nachvollziehen. Denn unter anderem
verringert eine solche Internetseite die Serverlast des Betreibers enorm. Die eigentliche Seite
wird nur einmal heruntergeladen und anschließend müssen nur noch Informationen, Texte
und Bilder nachgeladen werden. Es müssen nicht bei jeder Navigation alle Skripte, Header
und Stylesheets der Seite neu geladen werden. Dies bringt einen großen Vorteil für Seiten, die
sehr große Benutzerzahlen zu verzeichnen haben. Ein weiterer Nutzen bringt das SPA-Paradigma bei Seiten die hohe Interaktivität zwischen dem Benutzer und der Anwendung
benötigen. Hier kann eine solche Seite wie eine typische Desktopanwendung auftreten, sodass
man garnicht mehr das Gefühl hat, im Internet unterwegs zu sein. Dies ist zum Beispiel bei
Google Docs der Fall.

Wenn wir jetzt die Vorteile einer SPA wissen, müssen wir jetzt nur noch mehr über die
technische Realisierung einer solchen Web-App erfahren. Ermöglicht werden diese Art von
Internetseiten nur durch JavaScript oder andere auf clientseitig laufende Skripte.
Hierbei ist der Begriff AJAX der Kern einer jeden SPA. Denn nur durch AJAX
(Asynchronous JavaScript and XML) ist es möglich, Inhalte dynamisch nachzuladen,
nachdem die Seite fertig geladen wurde. Dazu gibt es auch immer mehr mächtige
Frameworks, die eigens dafür entwickelt wurden. So sind AngularJS, React oder Backbone.js
nur die Bekanntesten unter den vielen Verfügbaren.

Da wir jetzt auch die Technik dahinter verstehen, sollten wir uns aber noch über die
Nachteile einer SPA im Klaren sein. Denn ein großes und nicht zu vernachlässigendes Manko
ist die Suchmaschinenoptimierung einer Single Page Application. Da der komplette Inhalt
der Seite nicht sofort beim aufrufen der Seite verfügbar ist, können die meisten Crawler nicht
alle Inhalte erfassen, die die Seite zur Verfügung stellt. Außerdem wird beim Klick auf einen
Link keine neue Seite geladen, da alle Inhalte nur nachgeladen werden und es im
wesentlichen nur eine Seite gibt. Daher sollte bei Firmenseiten oder ähnlichem auf eine SPA
verzichtet werden. Denn eine solche Seite ist im Normalfall nicht bei den obersten
Suchergebnissen gelistet.

Folglich sollte genauestens überlegt werden, was die Ziele einer Seite sind, bevor die
eigene Seite als Single Page Application gebaut wird. Kann der SEO-Faktor vernachlässigt
werden, oder ist viel Interaktion gefragt, so kann getrost auf bekannte Frameworks wie
AngularJS gesetzt werden. Ist jedoch ein gutes SEO-Ranking erforderlich, so sollte von dieser
Technologie abgeraten werden und eher eine Seite im klassischen Stil entwickelt
werden.

Quellen

http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web
http://t3n.de/news/single-page-webdesign-beispiele-323225/
http://singlepageappbook.com/goal.html
https://de.wikipedia.org/wiki/Single-Page-Webanwendung
https://blog.secu-ring.de/software/single-page-applications-loesung-fuer-probleme/
http://www.flyacts.com/blog/seo-und-spa-single-page-applications-unvereinbar-oder-unzertrennlich/

Microinteractions – UX bewegt sich?

am 24 Nov 2017 in WebDesign von
Bisher unkommentiert »

Leute, die sich mit User Experience beschäftigen, befassen sich im Allgemeinen mit der
Optimierung von technischen Interfaces für deren Nutzern. Initial befasste sich Usability
bislang mit Richtlinien wie Übersichtlichkeit oder Zugehörigkeit von Elementen.
Doch bestimmt ist auch einigen von euch schon aufgefallen, dass sich manche Interfaces
greifbarer und intuitiver anfühlen als andere. Auf den ersten Blick ist es schwer die
Ursache dafür herauszufinden – vor allem, wenn dir der Begriff „Microinteractions“ noch
nie über den Weg gelaufen ist.

Sicher hast du in deinem bisherigen Leben als Digital Native unzählige Geräte ein und
ausgeschalten, die Lautstärke deines Radios oder Walkmans angepasst oder hoffentlich
deinen Laptop ab und an eingeschalten. Als Studenten von Onlinemedien kennen wir
wohl allzu gut das Geräusch eines angehenden Macs oder Windows im Vorlesungsraum,
während der Dozent seinen bedeutungsschwangeren Satz beendet. Oft lacht der Kurs
nun, da es sich anhört, als ob das Geräusch den Worten des Dozenten eine höhere
Bedeutung gegeben hätte. Auch wenn wir es vielleicht, abgesehen von diesen
besonderen Momenten, noch nie bewusst wahrgenommen haben, genau das sind
Microinteractions.

Sie können quasi als ein Stilmittel der Usability verstanden werden, bei welcher ein
Nutzerszenario auf einen bestimmten Moment der Interaktion zwischen Nutzer und
Interface heruntergebrochen wird, damit genau dieser ausgearbeitet werden kann. Der
Fokus liegt dabei auf einer einzigen Interaktion, wie beispielsweise das Entsperren des
iPhones oder das Hochfahren des Laptops. Zudem sind diese genannten Momente eine
der wesentlichen Microinteractions, die ein Nutzer überhaupt mit dem Gerät tätigen wird.
Es ist nämlich die erste Interaktion zwischen dem Nutzer und dem Interface. So werden
jetzt vielleicht einige von euch an das Geräusch zurückdenken, mit welchem sich euer
iPhone entsperrt, oder dem leichten Zoomeffekt, mit welchem euer Homescreen danach
auftaucht (iOS 10, für alles andere ist mein Handy zu schlecht).

Genau solche Gesten lassen uns das Interagieren mit unserem Smartphone viel flüssiger
und effektiver erscheinen, auch wenn wir das bewusst vielleicht noch nie wahrgenommen
haben. Ein Microinteraction ruft dann positive Assoziationen bei uns hervor, wenn er
reizvoll, menschlich und effektiv ist. Solche Microinteractions sammeln und fließen in die
Gesamtwahrnehmung der Usability mit ein. Sie trennen somit ein gutes Produkt von
einem besonders gutem Produkt.

Microinteractions umgeben uns aber nicht nur bei der Interaktion zwischen Lautsprechern
oder Smartphones, sondern sollten uns idealerweise auch die Bedienung von Webseiten
„versüßen“. Denn Microinteractions können die Lücke zwischen Nutzer und Technologie
mithilfe von humaner und emotionaler Bindung schließen. Durch die intuitive und nahezu
unscheinbare Art begleiten uns Microinteractions durch den Webseitenfluss.
Um Micromoments selbst gestalten zu können, ist es wichtig ihren Aufbau zu verstehen.
Dieser setzt sich aus 4 Teilen zusammen:

  1. Trigger
  2. Eine Microinteraction muss zunächst ausgelöst werden. Im Idealfall soll der Trigger den
    Nutzer zur Interaktion animieren. Die besten Trigger sind solche, die dem Nutzer dann zur
    Verfügung stehen wenn er sie benötigt, ohne dass der Nutzer seine Bedürfnisse äußern
    muss.

  3. Rules
  4. Die Regeln bestimmen, was bei einer Microinteraction passiert. Sie müssen sich natürlich
    anfühlen und den Nutzer animieren und keinesfalls bei der Interaktion stören oder
    ablenken.

  5. Feedback
  6. Ganz wichtig ist es dem Nutzer klar zu machen, was durch die Interaktion passiert ist. Ein
    Mensch ist durch natürlich Konditionierung daran gewöhnt, dass auf eine Aktion eine
    Reaktion folgt. So fühlt es sich für einen Nutzer störend und unnatürlich an, wenn auf eine
    Aktion des Nutzers keine Reaktion des Systems folgt. Reaktionen können beispielsweise
    eine Live-Validierung von Nutzerdaten oder Ladeanimationen, die dem Nutzer klar
    machen, dass seine Aktion eine Reaktion hervorgerufen hat, er sich aber noch einen
    Augenblick gedulden muss, sein.

  7. Schleifen und Varianten
  8. Wenn eine Microinteraction mehrfach benutzt wird, sollte sie sich im besten Fall
    anpassen. Ein Unterschied sollte spätestens zwischen der ersten und der siebten Microinteraction
    sichtbar sein, idealerweise sollte sie sich an dem Nutzerverhalten orientieren.

Dieses Prinzip der Microinetractions spielte bei der Neugestaltung des Microsoft
Designs, welches im Mai 2017 erstmals vorgestellt wurde, eine bedeutende Rolle. Wie es
auf der Seite von Microsoft heißt:
„These are our foundational elements — the moments that will make our designs perform
beautifully across devices, inputs, and dimensions. This is how we build the next era
of Windows.“

Hier wird von Momenten gesprochen, welche das Design geräteübergreifend schöner
darstellen soll. Insgesamt setzt sich Fluent Design aus 5 Elementen zusammen. Licht,
Tiefe, Bewegung, Material und Skalierung.

Dabei spielen Microinteractions im Fluent Design vor allem bei Licht und Bewegung eine
große Rolle. Der Reveal Effekt, welcher größtenteils die Komponente Licht darstellt,
wurde im Rahmen des Creator Updates ausgerollt. Dieser Effekt beleuchtet die Stelle,
über die die Maus gerade fährt. Wenn mit der Maus geklickt wird erscheint ein Lichtkreis.
Die Interaktion stellt hier die Bewegung der Maus dar. Das Feedback, welches der Nutzer
erhält, sind die Lichtreflexe.

Die zweite relevante Komponente Bewegung, soll laut Microsoft nahtlose Übergänge
zwischen Interaktionen bewirken und so dem Nutzer helfen sich zu fokussieren.
Nicht nur Microsoft, sondern auch Apple oder andere Designer und Designguidelines
verwenden schon seit geraumer Zeit Microinteractions. John Pavlus, der zu diesem
Thema ein Kommentar zu Dan Saffers Buch verfasst hat, behauptet sogar, dass jeder
gute Designer Microinteractions genutzt hat. Letztendlich besitzen wir nun allerdings
durch die fortgeschrittenen Fähigkeiten von Webseiten und Endgeräten die Möglichkeit,
Micromoments besser zu entwerfen und umzusetzen. Diese Möglichkeit sollten wir alle in
der Zukunft nutzen, um unseren Nutzern die beste UX zu bieten.

Quellen

https://www.fastcodesign.com/1672922/the-future-of-ux-design-tiny-humanizing-details
http://microinteractions.com/
http://microinteractions.com/what-is-a-microinteraction/
http://t3n.de/news/ux-designtrend-478358/
https://blog.proto.io/secret-killer-ux-design-microinteractions/

Weniger ist Mehr! Warum Minimal Webdesign? – Part 1

am 08 Mrz 2017 in WebDesign von
Bisher unkommentiert »

Weniger ist mehr. Jeder kennt diesen Spruch, doch was bedeutet er für Webdesigner? Warum sollte jeder der Webseiten gestaltet schon mal davon gehört haben und warum  ist das Konzept, das diesem Leitspruch folgt gerade so beliebt?

Eins ist klar. Der Trend des Minimalismus im Web ist sehr präsent. Jede große Website wie Youtube, Google, PayPal, Amazon und auch viele andere Riesen im Netz reduzieren die Gestaltung auf ein Minimum. Dabei folgen sie verschiedenen Designprinzipien, wie dem Flat-Design-Ansatz, dem Material Design und was es noch für „neue“, „trendige“ Ansätze gibt, die das Web revolutionieren wollen.

Doch was ist eigentlich der Kern dieser ganzen Prinzipien, Ansätzen und Konzepten?

Der Minimalismus!

Dabei ist das Fokussieren auf das Wesentliche keinesfalls eine Neuerfindung. Das gibt es schon immer und ist nicht nur im Webdesign oder Design anzutreffen. Er kann auch im Alltag und im echten Leben gelebt werden. Menschen die den Essenzialismus verkörpern haben keine vollstehende Wohnung, in der von jedem Urlaub ein „Mitbringsel“ aufgestellt wird, oder in der mehrere hunderte Bücher im Schrank stehen. Noch werden alte Kleidungsstücke, ausrangierte Möbelstücke oder andere Dinge im Keller gelagert, wo sie auf ihren eventuellen neuen Einsatz warten. Außerdem wird diese Person keine zahlreichen oberflächliche Beziehungen und Freundschaften pflegen.

Ein solcher Mensch hat wenige gute Freunde, für die er aber mehr Zeit aufbringen kann. Er hat eine offene, klare Wohnung, in der nur die nötigsten Möbelstücke stehen. In seiner Wohnung gibt es viel Whitespace an der Wand, da hier nicht tausende von Bildern aufgehängt sind.

Diese Personen sind nicht von der gegensätzlichen Werbeindustrie geblendet worden, in der der übermäßige Konsum im Mittelpunkt steht. Dadurch ist ihr Leben überschaubarer, was in vielen fällen zu einem glücklicheren und zufriedeneren Leben führt. Daher lässt sich sagen: Minimalismus funktioniert im Leben, warum dann nicht auch woanders?

o_minimal-desk-minimalist-room-24324

Minimalismus in der eigenen Wohnnung

Schauen wir uns zum Beispiel den Zeitungsdruck an. Stellen wir uns eine Zeitung vor, in der Artikel an Artikel aneinander gereiht ist. Nach den Letzten Wort des einen Berichts folgt der nächste. Es gibt keinen Abstand, keine Überschriften, noch Unterschriften. Wir würden uns niemals durch ein solches Blatt kämpfen. Daher wird hier eines genutzt: Minimalismus.

Zwischen jedem Bericht prangt eine minimalistische Zusammenfassung des kompletten Berichts – die Überschrift. Wenn diese alleine nicht genügt, wird ein Untertitel eingesetzt. Aber auch bei diesem gilt: Er wird so kurz wie möglich gehalten und enthält somit nur das Wesentliche und Unverzichtbare des Artikels.

Wenn dir dieses Beispiel zu weit hergeholt ist, dann schauen wir uns ein anderes an. Apple. Jeder weiß, was damit gemeint ist. Es ist nicht ein Obststück, dass hier aus Versehen in der falschen Sprache geschrieben wurde. Es handelt sich um ein weltweit bekanntes und vielerseits beliebtes Unternehmen. Und was macht das Unternehmen? Genau, es stellt Produkte her, genau wie jedes andere Unternehmen auch.

apple-laptop-notebook-office-39284-edit

Minimalistisches Produktdesign

Doch warum ist dann gerade dieses so erfolgreich?

Das liegt unter anderem an einem klaren Prinzip, dass bei jedem Produkt von Apple eingehalten wird. Es wird das Prinzip des Minimalismus befolgt und gelebt. Dabei wird hier alles weggelassen, das nicht dem Benutzer und dem eigentlichen Zweck dient. Dabei gilt, je einfacher das Produkt und dessen Bedienung, desto beliebter und intuitiver kann der Bediener das Produkt benutzen. Umso mehr Spaß macht es, das Produkt zu benutzen und umso erfolgreicher wird es.

Auch diese zwei Beispiele machen es deutlich: der Minimalismus ist keinesfalls ein unnützes und überschätztes Mittel zum besseren Ergebnis.

Jetzt haben wir vieles über den Minimalismus gehört und wo er bereits eingesetzt wird. Doch was dies nun mit Webdesign zu tun hat, erfahrt ihr im zweiten Teil von „Weniger ist Mehr! Warum Minimal Webdesign?“.

Weniger ist Mehr! Warum Minimal Webdesign? – Part 2

am 08 Mrz 2017 in WebDesign von
Bisher unkommentiert »

Im ersten Part dieser Serie haben wir schon erfahren was Minimalismus ist und wo er überall eingesetzt wird. Wenn wir jedoch jetzt anfangen, dieses Prinzip auf das Webdesign zu übertragen, dann fragen wir uns logischer Weise:Was bedeutet das jetzt für das Design im Web?

Auch hier gilt eines: der Minimalismus. Es sollte sich auf das Wesentliche konzentriert werden. Jetzt stellt sich die Frage, was das Wesentliche einer Website ist. Und das ist die zentrale Frage, um die es sich zu Beginn eines Website-Gestaltungsprozesses drehen sollte. Was ist das Ziel der Seite? Was soll sie bewirken?
Möchte ich Produkte verkaufen und wenn ja welche und an wen? Möchte ich eine Botschaft vermitteln, den Besucher informieren, Hilfestellung leisten, ein Unternehmen oder eine Person präsentieren, oder was auch immer. Egal wie die Website am Ende aussehen soll, es muss immer zuerst ein Ziel definiert werden. Und auch hier gilt der Minimalismus.

Das Ziel sollte klar, präzise und kurz formuliert werden.

road-nature-hand-path-edit

Fokus

Sobald das Ziel der Seite feststeht, kann es an die eigentliche Konzeption der Seite gehen. Hierbei sollte bei jedem Element hinterfragt werden, ob es zielorientiert ist, oder ob es auch ohne schlechtes Gewissen weggelassen werden kann. Auch hier gilt, ist das Element nicht unbedingt notwendig, um das Ziel zu erreichen, muss es weggelassen werden. Denn alles was auf der Seite ist und nicht zielführend ist, lenkt den Benutzer ab, oder irritiert ihn im schlimmsten Fall. Im besten Fall verlängert es den Weg des Besuchers und kann somit schon zum Scheitern der Seite führen.

Die weit verbreitete Meinung, dass auf Websites nahezu unendlich viel Platz ist und dieser daher auch ohne Probleme genutzt werden kann, ist schlichtweg falsch. Klar ist hier keine Platznot vorhanden, wie zum Beispiel bei einer Zeitung oder einem Bild. Aber eine Seite, die überladen mit Elementen ist, wirkt eher amateurhaft, als professionell. Daher sollte als Webdesigner lieber davon ausgegangen werden, dass nur sehr wenig Platz auf einer Website ist, der sinnvoll und vor allem überlegt verwendet werden soll.

Dabei geht es nicht nur um das Webdesign an sich, was ein sehr oberflächlicher Blickwinkel ist, sondern es geht um das gesamte Konzept einer Website.

Warum?

Jetzt wissen wir worum es beim Minimal Webdesign geht, doch die Frage nach dem Warum bleibt bisher unbeantwortet. Um diese Frage zu klären, kann von ganz unterschiedlichen Positionen ausgegangen werden.

Schauen wir uns den Standpunkt des Besuchers an. Hier wirkt eine klar strukturierte Seite viel schöner, man findet sich einfacher zurecht und das Ziel wird leichter und schneller erreicht. Dies alles resultiert in einer besseren User Experience. Außerdem nimmt der Besucher, bei einer nach diesem Ansatz erstellten Website, die wichtigsten Infos schneller war und kann sie sich viel besser merken. Denn ein durchschnittlicher Besucher kann sich nur zwischen fünf und neun Dinge merken. Bei einer vollgestopften Seite hat hier der Besucher Schwierigkeiten, sich die zentralen Informationen einer Seite zu merken. Bei einer „Minimal-Website“ dagegen, werden ihm auch nur die zu merkenden Informationen präsentiert.

Doch auch beim Entwickler oder Gestalter der Website gibt einen Vorteil, der nicht minderwichtig ist. Bei einer Website, die nur die wichtigsten Elemente benötigt, müssen viel weniger Komponenten gestaltet und auch umgesetzt werden. Dies bedeutet nicht, dass am Ende weniger Aufwand für die Seite benötigt wird, wie jetzt fälschlicher Weise angenommen werden kann. Aus dem Verzicht von unnützen Elementen resultiert nämlich mehr Zeit für die restlichen, die somit besser überlegt, konzeptioniert und am Ende entwickelt werden können.

Tipps

Da wir jetzt wissen, warum wir das Minimal Webdesign umsetzten sollten, möchte ich euch hier noch ein paar explizite Tipps geben, mit welchen Ihr ganz einfach ein besseres Minimal Webdesign hinbekommt.

Einen sehr wichtigen und großen Bestandteil des Minimal Webdesigns haben wir schon kennen gelernt. Die Reduktion. Wie bereits erwähnt sollten alle nicht zielführenden und nicht benötigte Elemente entfernt, beziehungsweise erst garnicht erstellt werden. Dadurch entsteht mehr Whitespace, der sehr wichtig ist, um dem Betrachter halt zu geben und ihn auf die wichtigen Elemente und den Inhalt zu lenken. Dadurch rückt das unwichtige in den

Hintergrund und das Wichtige steht im Fokus.

whitespace-skiing-winter-skilift-24034-edit

Whitespace

Auch die Farben sollten so weit es geht reduziert werden. Das bedeutet nicht, dass eine Seite im Schwarz-Weiß look erstrahlen sollte, wenn sie dem Minimal Webdesign folgen möchte. Dies bedeutet nur, dass alle überflüssigen und nicht hundert Prozent benötigten Farben aus der Farbplatte der Seite verschwinden sollten.

Was für die Gestaltung der Website gilt, gilt natürlich auch für die Bildkomposition und die Bilderanordnung auf der Seite. Die Seite sollte wie bei allen Elementen nicht mit Bildern überladen sein. Wenige aber gezielte Bilder haben einen viel größeren Mehrwert für den Besucher der Seite. Und selbst der Fotograf sollte schon darauf achten, dass die Bilder ihren Zweck nicht verfehlen und das Ziel im Auge behalten.

Die einzelnen Komponenten der Website sollten ebenfalls alle diesem gelernten Prinzipien folgen.

Ich hoffe diese zwei Artikel haben dir verdeutlicht, es braucht nicht viel um eine gute Website zu gestalten, man braucht nur wenige aber gut durchdachte und gezielt eingesetzte Elemente um eine Website ansprechend, schön, klar und modern zu gestalten. Also erinnere dich bei deinem nächsten Projekt einfach an diese Artikel und du wirst merken, du erzielst mit dem Ansatz des Minimal Webdesign eine spürbar bessere Website.

 

Quellen für beide Beiträge:

  •            Bilder von www.pexels.com
  •             http://t3n.de/news/minimal-webdesign-anders-774216/
  •             http://www.instantshift.com/2011/03/07/understanding-the-theory-of-minimalism-       in-web-design/
  •             https://webdesign.tutsplus.com/articles/less-is-more-fundamentals-of-minimalist-       web-design–webdesign-8