Sep 01

Überall wird zurzeit darüber gesprochen, den Internet Explorer 6 abzuschaffen. Etliche Website blenden mittlerweile Warnungen bzw Update-Empfehlungen ein.

Sogar Microsoft hat für diesen Monat September eine Aktion lanciert, um Internet Explorer-Benutzer zum Upgrade zu bewegen: für jeden Nutzer, der von IE6 auf IE8 upgradet, spendet Microsoft 16 Mahlzeiten an hungernde Menschen in Amerika:

fight-hunger-internet-explorer

Bitte Upgraden Meldung einbauen
Wer auf seiner Website eine “Bitte-Upgraden”-Meldung einblenden will, findet auf der Website IE6nomore unter dem Link “Samples” etliche Code Snippets (für verschiedene Sprachen), die eine ganz hübsche Meldung einblenden für Besucher, die mit IE6 unterwegs sind.

Und wer dieses Script eingebaut hat und ohne vorhandener IE6 testen will, kann das via folgender Website tun: IE NetRenderer. Habt ihr ein solches Script schon auf euren Websites eingebaut?

  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MisterWong.DE
  • Reddit
  • StumbleUpon
  • Technorati
  • Yigg

Aug 12

Usability misst den Grad des Usererlebnisses und kann damit umschrieben werden, wie einfach es ist eine bestimmte Aufgabe zu erfüllen. Usability Guru Jakob Nielson umschreibt dies folgendermassen:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

Wenn ein Websitebesucher zu lange warten muss, oder unerklärliche Fehlermeldungen auftreten, wenn ein Checkoutprozess nicht intuitiv ist, oder wenn man sich unnötigerweise mühsam für etwas registrieren muss, wird das Erlebnis auf der Website geschmälert und der Besucher entwickelt ein negatives Bild gegenüber dem Präsentierer.

Vielfach genügt nur schon eine grössere Schrift um das grundlegende Bedürfnis nach klarer Lesbarkeit zu erfüllen. Oft wird vergessen, dass eine Internetseite nicht nur am Desktopbildschirm von 20-Jährigen angesurft wird, sondern auch von Senioren auf einem iPhone. Die Kombination von kleinen Schriften und schlechten Kontrasten schliesst eine potentielle Zielgruppe aus, die immer grösser wird.

Es gibt auch einige Regeln, die beim Design und der Umsetzung beachtet werden sollten. Wie z.B. die Limitierung der Hauptnavigationseinträge auf sieben, da das Kurzzeit-Gedächtnis nicht mehr speichern kann. Oder die 3-Klick-Regel, die besagt, dass ein User mit maximal drei Klicks zu seinem Ergebnis gelangen sollte (Wenn auch dies schwierig ist so universal zu definieren, da gewisse Prozesse wie eine Bestellung in einem Onlineshop durchaus sechs und mehr Klicks beinhalten kann.).
Weitere interessante Aspekte betreffen die Psychologie. Da gibt es z.B. das Baby-Duck-Syndrom, das besagt, dass Besucher sich an das erste Design gewöhnen und danach alle anderen basierend auf dem ersten beurteilen. Dabei zeigt sich oft, dass User eher Designs bevorzugen, die dem ersten ähnlich sind und andere für schlecht befinden. Oder Banner-Blindheit, eine Fähigkeit, die es ermöglicht, unwichtige Elemente wie Bannerwerbung oder Inserate unbewusst auszublenden.
Desweiteren gibt es bezüglich Logodesign und Anordnung von Elementen eine ganze Liste mit psychologischen Erkenntnissen, die das Surfverhalten massgeblich beeinflussen.

Nachfolgend eine Checkliste, die bei der Umsetzung für eine Webseite herangezogen werden kann:

  1. Aktive Navigation: Inklusive Hover-Effekte und Anzeige des aktiven Navigationsbaumes
  2. Klickbare Labels in Formularen: Auch im Hinblick auf Accessibility für alternative Devices
  3. Möglichst grosse Klickflächen: zur Verbesserung der Bedienerfreundlichkeit
  4. Geführte Prozesse: wie z.B. bei einem Checkoutprozess mit einem Progress-/Prozessbar
  5. Call-To-Action Links und leicht auffindbare Kontaktlinks: Da viele Leute immer noch den konventionellen Weg über das Telefon u.a. suchen
  6. Strikte Trennung von Layout und Inhalten: Im Hinblick auf ein Redesign oder Portierung auf alternative Devices wie Screenreader
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MisterWong.DE
  • Reddit
  • StumbleUpon
  • Technorati
  • Yigg

\\ tags: ,

Aug 10

jQueryWebseiten sind heute nicht mehr nur Informationsträger, sondern sollen im Gegensatz zu statischen Medien einen Mehrwert für den Besucher bieten. Das Einbinden von sich dynamisch oder interaktiv ändernden Inhalten gehört zum Standardkönnen eines Webentwicklers.

Crossbrowser-Problematik
Früher mussten HTML-Programmierer ihren JavaScript-Code, der für eben solche Interaktionen gedacht war, mühselig auf allen gängigen Browsern und Plattformen testen, da die Unterschiede gerade im Bereich von JavaScript-Interpretation und CSS-Umsetzung extrem unterschiedlich waren und immer noch sind. In den letzten Jahren kamen JavaScripts-Frameworks auf, die einerseits die Crossbrowser-Problematik aufgriffen und andererseits das Einbinden von interaktiven Elementen erleichterten. Wegbereiter waren Prototype in Verbindung mit Script.aculo.us und YUI von Yahoo!. Es folgten Dojo, MooTools und ExtJS, Google brachte GWT raus, und die Liste wurde immer länger.

Das jQuery-Framework
Google Trends SuchresultatDabei hat sich aber jQuery als das Framework herauskristallisiert, das von Anfang an in der Community am besten ankam und seither eine exponentiell wachsende Liste von Erweiterungen anbietet. Die einfache Einbindung, das modulare System von Core und Plugins und die Performance erleichtern die Entscheidung bei der Wahl des passenden Frameworks zugunsten von jQuery.

Einsatz bei Kundenprojekten
INM hat diesen Trend auch erkannt und die Vorteile von jQuery bereits bei mehreren Kundenprojekten genutzt. So wird z.B. bei Nagra ein speziell designter Tooltip eingeblendet, bei Migros Do-It & Garden kommt ein Akkordeonmenu zum Einsatz und bei Crowne Plaza wird ein Verfügbarkeitsformular animiert eingeblendet. In laufenden Kundenprojekten, die aktuell in der Umsetzung sind, werden weitere jQuery-Elemente eingesetzt, die dem Websitebesucher einen deutlichen Mehrwert bieten werden.

Weitere Links:

  • jQuery Tools bietet eine kleine aber feine Übersicht über die gängigsten Effekte
  • jQuery UI: Showcase von Interfaceelementen, die mit kleinen Zusatzskripts realisiert werden können
  • Tips & Tricks: Eine von zahlreichen Hilfeseiten zu den gängigsten Best Practices bei der Programmierung
  • 15 Websites die sich ausschliesslich mit Lösungen befassen, die mit Hilfe von jQuery umgesetzt worden sind
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MisterWong.DE
  • Reddit
  • StumbleUpon
  • Technorati
  • Yigg

\\ tags: