Menü

News & Blog gefiltert nach: Usability

 

Digitales Design und Usability-Aspekte erobern die Fernsehwelt

geschrieben am: 03.03.2015 21:22:35 Uhr, Typ: Blog
Tags zu diesem Artikel: Das Erste ProSieben Medienwandel Design On Air Design Redesign TV Nutzerführung Kommunikation App Usability

daserste

Ihr habt es mitbekommen - der TV-Sender ProSieben sendet nun seit ein paar Wochen in einem neuen On-Air-Design und auch das Erste schläft nicht und sendet seit Sonntag im neuen Design. Bei beiden Sendern ist die Anlehnung an digitale Gestaltungslinien aus Web- & Interfacedesign nicht von der Hand zu weisen. Grund genug für einen Blogeintrag.


Bereits seit einiger Zeit nutzt das Erste Anlehnungen an seine digitalen Kanäle. Die Tagesschau mit ihrem App-ähnlichen Intro ist wohl das bekannteste Beispiel. Doch auch viele andere Sendungen werden (zwangs-?) digitalisiert. Nun zieht auch der Sender nach. Im Zentrum des Redesigns steht der "Touchbutton". Hierbei handelt es sich um eine Animation, die impulsartig reagiert und laut Pressemeldung sowohl den Knopfdruck der Fernbedienung als auch den Touch der "Das Erste App" wiederspiegeln soll. Ein gelungener Brückenschlag, wobei besonders der zweite Teil der Pressemeldung zeigt, welchen enormen Einfluss die aktuellen digital Medien inzwischen auch auf das Medium TV haben. So ist es nicht sonderlich verwunderlich, dass auch an anderen Stellen des Redesigns ein starker Einfluss der digitalen Medien auf das On-Air-Design zu finden ist. Die Auswahl der Auszeichnungsfarben ist beispielsweise ebenfalls typisch für digitale Medien. Eine Smartphone-App im Materialdesign könnte genau auf das gewählte Farbschema zurückgreifen. Generell wird das Look and Feel von Apps im On-Air-Design gerne nachempfunden um Kommunikation und Austausch darzustellen. Mehrdimensionale Elemente, wie das Wellendesign werden hingegen abgeschafft und parallaxe Bewegungseffekte runden das Design ab.


Parallax-Effekte?
Da war doch was. Richtig. Auch der TV-Sender ProSieben spielt seit seinem On-Air-Relauch vor einigen Wochen mit parallaxen Animationseffekten (auch wenn es in der ProSieben-Press emeldung mit "direkter, klarer, dreidimmensionaler" betitelt wird). Die Mehrdimmensionalität in Kombination mit einem Scrolleffekt kommt dem aufmerksamen Internetnutzer dann doch bekannt vor. Auch die großflächigen farbigen Kacheln und der Einsatz von "Big Typography" erinnern an digitale Trends, die unter anderem durch Microsofts Windows 8 ihren Ursprung haben. Iconografie wird zur Unterstützung einzelner Inhalte eingesetzt. Fortschrittsanzeigen, die ProSieben bereits seit vielen Jahren hat, runden das Bild ab und schaffen den Eindruck von Interaktivität.


Fazit
Beide auf ihre Art und Weise gelungene Überarbeitungen des On-Air-Designs zeigen, dass Nutzerführungsaspekte und Fokussierung aus der digitalen Welt auch in andere Bereiche des Designs schwappen. TV-Zuschauer sind aus ihrer täglichen Mediennutzung inzwischen an Farbflächen, differenzierte Typografie oder Icons gewohnt. Mehrdimensionale Effekte benötigen nicht mehr zwangsweise schnelle Kamerafahrten oder wilde Schwenks. Flächen, Konturen und reduzierte Animationen sind inzwischen gewohnt und werden als zeitgemäß wahrgenommen.
Doch schlussendlich führt das geänderte Medienkonsumverhalten der Menschen dazu, dass auch digitale Trends einen maßgeblichen Teil des ganzheitlichen Markenerlebnisses ausmachen und dokumentiert den Medienwandel.

Das Erste - Redesign des On-Air-Designs

ProSieben - Trailer zum Redesign des On-Air-Designs

 

Stefan Borchert - 03.03.2015 21:22:35 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Durch HTML5-Attribute die Usability von Formularen optimieren

geschrieben am: 24.02.2013 18:50:56 Uhr, Typ: Blog
Tags zu diesem Artikel: Usability Optimierung HTML HTML5 Formular input Attribute

Ich habe mich heute mit Formularen in HTML5 beschäftigt und da sich in nahezu jeder Website Formulare befinden, möchte ich euch einige der neuen Attribute vorstellen. Grund meiner Auseinandersetzung mit dem Thema war, dass ich einfache Funktionen zur Usability-Steigerung gesucht habe,
Beginnen wir mit einem äußerst praktischen Attribut für Formularfelder: Es hört auf den schönen Namen required. Mit diesem Attribut ist es möglich Pflichtfelder zu definieren. Sind diese nicht ausgefüllt verhindert der Browser (in neueren Versionen) das Abschicken des Formulars und weißt den User darauf hin, dass das Feld nicht aufgefüllt wurde. Bei meinen Blogkommentaren sieht dies im Firefox wie folgt aus:
HTML5 Attribut required"
Beispiel für die Einbindung:
<input type="text" required />


Ein weiteres nützliches Attribut, welches in HTML5 von den Browsern weitestgehend unterstützt wird ist das Platzhalter-Attribut placeholder. Auf diese Art und Weise lassen sich Formularfelder vorausfüllen, sodass der Nutzer eine Ahnung bekommt, welche Information er eingeben soll. Das Aussehen des Platzhaltertextes richtet sich nach den CSS-Eigenschaften des Input-Feldes.
Beispiel für die Einbindung:
<input type="text" placeholder="Stefan Borchert" />


Einen kleinen aber feinen Usabilityzugewinn liefert das Attribut autofocus. Mit dieser Ergänzung im Code lässt sich beispielsweise eine Onlineshop-Suche bereits vorauswählen, sodass der Nutzer sofort lostippen kann, ohne dass er manuell in das Feld klicken muss.
Beispiel für die Einbindung:
<input type="text" autofocus />


Neben dem Autofokus bietet das Attribut autocomplete die Möglichkeit die bekannten Vervollständigungshinweise des Browsers anzuzeigen. Jedem wird es aus der eigenen Internetnutzung bekannt sein, wenn er bei einem Service seine Emailadresse oder seinen Benutzernamen zum Login einträgt. Hier hat sich der Browser die Eingabe gemerkt und schlägt sie erneut vor. - Vor Allem bei Formularen, die wiederholt ausgefüllt werden ein großer Usabilityzugewinn.
Beispiel für die Einbindung:
<input type="text" autocomplete="on"/>


Ein sehr technisches, aber für den ein oder anderen Developer sicherlich sehr interessantes, Attribut ist das Attribut pattern. Mit diesem können reguläre Ausdrücke definiert werden. Da reguläre Ausdrücke mich schnell zum Verzweifeln bringen habe ich eine Seite ausfindig gemacht, die viele reguläre Ausdrücke für HTML5-Umsetzungen kostenlos zur Verfügung stellt. Daher weiß ich nun auch, dass der reguläre Ausdruck zur Verifizierung einer deutschen Postleitzahl wie folgt lautet: [0-9]{5}.
Beispiel für die Einbindung:
<input type="text" pattern="[0-9]{5}" />


Ich hoffe, dass ich euch mit meinem kurzen Rundgang ein paar neue Möglichkeiten zur Optimierung eurer HTML5-Formulare aufzeigen konnte. Die Integration ist wie ihr gesehen habt in der Regel sehr einfach - die Usabilitysteigerung (zum Beispiel durch den Autofokus) ist hingegen immens.

Stefan Borchert - 24.02.2013 18:50:56 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook