2015-11-16-usability-im-wandel.markdown 9.67 KB
Newer Older
1 2 3
---
layout: post
title:  "Usability im Wandel"
Hendrik Kahlen's avatar
Hendrik Kahlen committed
4
subtitle: Welche Usability-Richtlinien gelten morgen?
5 6 7
category: usability
author: Hendrik Kahlen
---
8

9
Die Usability von heute ist nicht mehr die gleiche wie vor 5 Jahren! Die Gründe sind unterschiedlich, weshalb in diesem Artikel daher einmal ein genauerer Blick auf den Wandel in der Usability geworfen werden soll. <!--more--> Wem die [Normen und Konventionen] der Usability noch nicht bekannt sind, der werfe an dieser Stelle zunächst einen Blick auf unsere entsprechende Unterrubrik.
10

11
### Gründe für Usability-Änderungen
12
Wie eingangs erwähnt gibt es mehrere Gründe für den Wandel und auch nach [usability.ch]{:target="_blank"} liegt der Hauptfokus dafür, in den technischen Veränderungen (Innovationen), dem verändertem User-Verhalten und der weniger starken Nutzung von verbotenen Design-Elementen. Mit technischen Veränderungen ist hier gemeint, dass sich Browser, Leistung des Endgeräts, usw. immer weiter verbessern, weshalb andere Design-Elemente möglich sind. Gleichzeitig ändert sich mit der Zeit das User-Verhalten, beispielsweise, weil eine beliebte Webseite ein Grundmuster für die Navigiation in die Köpfe der Masse gelegt hat (z.B. Google). Die weniger starke Nutzung von verbotenen Desigin-Elementen hat auch zur Folge, dass z.B. Pop-Ups nicht unbedingt immer verboten gehören, eben bei weniger starken Nutzung und nicht der exzessiven wie sie bei [Die schlimmsten Usability-Fehler]{:target="_blank"} beschrieben wurde.<sup>1</sup>
13

14
### Was hat sich geändert? - Neue und alte Usability Regeln
15
Die Nutzung von Flash-Inhalten oder Webseiten die auf das Flash-Plugin angewiesen sind, wird heute nach Usability-Richtlinien als eher kritisch angesehen. Das liegt vor allem daran, dass Flash-Plugins sicherheitskritisch sind, auf Apple-Geräten nicht funktionieren und eine explizite Installation erforderlich ist, die Webseite also ohne das Plugin nicht (komplett) funktioniert. Im Jahr 2000 war dies aber noch anders, da es damals keine vergleichbaren Alternativen für schnelle Animationen auf meist noch statischen Webseiten gab. Mit HTML-5 gibt es aber heute eine solche Alternative (neben anderen), weshalb Flash-Nutzung heutzutage auch nicht Usability-konform ist. Eine gute Illustration eines (auf schlechte Weise) übertriebenen Gebrauchs von Flash findet sich auf [orrfelt.com]{:target="_blank"} und verdeutlicht die hier genannten Punkte.<sup>1</sup>
16

17 18
Auch haben sich die Positionen von Design-, Bedienelementen oder des eigentlichen Contents im Laufe der Jahre verändert, bzw. nähern diese sich einem Grenzmuster an. Mit Bezug auf [Einschränkungen der Werbung durch Usability]{:target="_blank"} ist es interessant zu sehen, wie sich die Erwartungen über die Position von Werbung auf einem Webseite-Raster verändert haben, bis sie seit 2009 auf der rechten Seite verharren.
Ein ähnlicher Wandel lässt sich bei der Suchfunktion feststellen, wobei hier noch zusätzlich bemerkenswert ist, dass die Erwartung einer Suchfunktion insgesamt zurück geht. Ein Grund dafür könnte in der schnelleren Suche über Google und in den meist nur einmaligen Besuchen liegen (ausgenommen sind Online-Shops). Die Position einer Suchfunktion von 2003-2009 wurde fast ausnahmslos in der oberen rechten Hälfte erwartet, wie auf [eResult] zu sehen ist.<sup>2</sup>
19

20
### Usability der Zukunft - eine Voraussage
21
Es gibt mehrere Usability-Design-Trends in 2016, wovon einige schon 2015 stark vertreten waren und auch noch weiterhin stark an Bedeutung gewinnen werden. Unter anderem ist dies das Responsive Web Design. Mit zahlreichen und mehr oder weniger verschiedenen Browsern und Endgeräten, wie etwa Smartphones, Tablets und Laptops, braucht es für diese unterschiedlichen Umgebungen das passende Design mit anderen Größenordnungen, Struktur- und Bedienelementen. Damit nicht für jede Umgebung eine eigene Version der Webseite erstellt werden muss, wird die Webseite "responsive" (engl, für reagierend) entwickelt, d.h. eine Webseite für alle Plattformen mit anderen Skalierungen.<sup>3</sup>
22

23
Bemerkenswert ist hierbei auch, dass Google nach Responsive Design filtert und für mobile Endgeräte die Webseite benachteiligt, wenn sie durch den Test fallen. Google bietet zu diesem [Responsive Design Test]{:target="_blank"} ein Tool, mittels derer man seine Webseite auf Googles Konventionsanforderungen prüfen kann.<sup>3</sup>
24

25
Ein weiterer Trend sind die Card Style Layouts, womit sich sehr schnell und übersichtlich viel Content organisieren lässt. Dazu werden Bilder genutzt, die zum Thema des Contents passen, bzw. diesen bestmöglich zusammenfassen. Diese Layouts können auch gut in Kombination mit Responsive Design eingebracht werden. Ein solches Card-Style-Layout findet sich auf unserer [Home Page], auch wenn damit nicht die Kategorien organisiert sind verdeutlicht es ganz gut die Funktionsweise:<sup>4</sup>
26

27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
<section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter">
           {% for member in site.members %}
               <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                   <div class="portfolio-box">
                       <img src="http://www.informatik.uni-oldenburg.de/~iug15/ew/img/members/{{ member.image }}" class="img-responsive" alt="">
                       <div class="portfolio-box-caption">
                           <div class="portfolio-box-caption-content">
                               <div class="project-category text-faded">
                                   {{ member.role }}
                               </div>
                               <div class="project-name">
                                   {{ member.name }}
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
            {% endfor %}
        </div>
    </div>
</section>
50
Zu beachten ist an dieser Stelle natürlich, dass die gewählten Bilder zu den erwarteten Content der Kategorie passen müssen.
51

52 53 54
Der spannendste Design-Trend ist aber wohl der des Story-Telling. Man überlege sich hierbei, wie wichtig Content für Webseiten ist.  Folgt dieser Content als langer Text, der nicht auf passende Weise visuell aufbereit ist, so ist das lesen sehr mühselig. Mit Story-Telling gibt es die Möglichkeit dem User mit auf eine Story-Reise zu nehmen, indes ihm mit kleinen Texten und zum diesen Texten passenden und erklärenden Bildern sowie Videos die Story erzählt wird. Der Hauptvorteil dabei ist, dass durch die teils starken Bilder und Videos die Aufmerksamkeit des Lesers nicht verloren geht, vor allem aber damit ein zum Content passender Hintergrund einher geht, was auch eine Forderung der Usability-Konventionen ist.
Auch werden Texte so interaktiver, d.h. der Nutzer steuert interaktiv die Geschichte durch scrollen oder Maus- oder Touchbewegungen.<sup>3, 5</sup>
Eine schöne Verdeutlichung von Story Telling bietet [story.glass]{:target="_blank"}, wo Story Telling noch einmal mittels Story Telling erklärt wird.
55

56
### Fazit
57
Die Vielfältigkeit der Gründe des Wandels von Usability-Konventionen wurde nun kurz angerissen. Im Zuge der technischen Möglichkeiten wird es dabei auch zukünftig immer mehrere Möglichkeiten geben Web-Designs umzusetzen, von denen einige zukünftig nicht mehr Usability-gerecht sein könnten oder in anderer Gestalt auftauchen. Die Usability wird immer einem Wandel unterliegen, aber heutige Web-Designer sind gut aufgestellt, wenn sie aktuelle Trends im Auge behalten und diese usability-konform umsetzen.
58

59
<hr id="sources">
60 61 62

#### Quellen

63
<small>
64
    <sup>1</sup> Jakob Nielsen (2007), deutsche Übersetzung. [Veränderungen oder Stabilität bei Web-Usability-Richtlinien](http://www.usability.ch/news/veraenderung-oder-stabilitaet-bei-web-usability-richtlinien.html). Abgerufen: 23.11.2015.
65 66
</small><br>
<small>
67
    <sup>2</sup> (eResult). [Erwartungskonforme Website-Gestaltung – Ergebnisse einer Längsschnittanalyse (2003 bis 2009)](http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/imagery-iii-erwartungskonforme-website-gestaltung-ergebnisse-einer-laengsschnittanalyse-2003-b/). Abgerufen: 23.11.2015.
68 69
</small><br>
<small>
70
    <sup>3</sup> Prince Pal (2015). [Web Design Trends Prediction for 2016](https://think360studio.com/web-design-trends-prediction-for-2016-by-prince-pal/). Abgerufen: 24.11.2015.
71 72
</small><br>
<small>
73
    <sup>4</sup> Ajeet Yadav (2015). [10 UX Design Trends You Shouldn’t Overlook in 2015](http://usabilitygeek.com/10-ux-design-trends-2015/). Abgerufen: 24.11.2015.
74 75
</small><br>
<small>
76
    <sup>5</sup> Tina Bauer (2015). [Webdesign 2016: Auf diese 6 Trends sollten Marketer sich einstellen](http://onlinemarketing.de/news/webdesign-2016-auf-diese-6-trends-sollten-marketer-sich-einstellen). Abgerufen: 24.11.2015.
77
</small><br>
78

79 80
[eResult]: <http://www.eresult.de/ux-wissen/forschungsbeitraege/einzelansicht/news/imagery-iii-erwartungskonforme-website-gestaltung-ergebnisse-einer-laengsschnittanalyse-2003-b/>
[usability.ch]: <http://www.usability.ch/news/veraenderung-oder-stabilitaet-bei-web-usability-richtlinien.html>
81
[Responsive Design Test]: <https://www.google.com/webmasters/tools/mobile-friendly/>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
82 83
[story.glass]:<http://story.glass/>
[orrfelt.com]:<http://orrfelt.com/>
84 85 86
[Home Page]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/>
[Die schlimmsten Usability-Fehler]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/die-haeufigsten-und-schlimmsten-usability-fehler/>
[Einschränkungen der Werbung durch Usability]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/einschraenkungen-der-werbung-durch-usability/>
87
[Testmethoden]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/usability/Testmethoden/>
Hendrik Kahlen's avatar
Hendrik Kahlen committed
88
[Normen und Konventionen]: <http://www.informatik.uni-oldenburg.de/~iug15/ew/konventionen/>