SlideShare ist ein Scribd-Unternehmen logo
usability
bloß nicht nachdenken müssen
usability // martin hahn // 2010




               Definition Usability
                Ist ein Produkt einfach zu benutzen,
                hat es eine hohe Usability.

                 Benutzerfreundlichkeit
                 besser: Gebrauchstauglichkeit
usability // martin hahn // 2010



         Übersichtlich? Eindeutig? Klar?
usability // martin hahn // 2010



         Wieviele Links?
usability // martin hahn // 2010
          Was bekomme ich geboten? Wo bin ich gelandet?
          Was haben die zu bieten? Warum soll ich bleiben?
usability // martin hahn // 2010




               DIN EN ISO 9241-11
               Anforderungen an die Gebrauchstauglichkeit

                 Richtlinien der Interaktion zwischen Mensch und Computer


                “Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer
                in einem bestimmten Nutzungskontext genutzt werden kann, um
                bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”
usability // martin hahn // 2010




                       Effektivität, Effizienz und Zufriedenheit

                         Effektivität
                          Dem User gelingt die Zielerreichung wie geplant.

                         Effizienz
                          Zielerreichung möglichst schnell und
                          mit möglichst wenig Aufwand.

                         Zufriedenheit
                          Erledigung der Aufgabe bereitet Freude.
usability // martin hahn // 2010




                                   Effektiv  effizient?




              Jobs

           Beschäftigungsmöglichkeiten

           Job-o-Rama
Am Anfang war ...

ein plan
usability // martin hahn // 2010
usability // martin hahn // 2010




                   Kenne deine Zielgruppe!
usability // martin hahn // 2010




                     Benutzerbedürfnisse
                      Bedürfnisse, Interesse und Verhalten der User in den
                       Mittelpunkt des Entwicklungsprozesses


                      „Konzentriere dich auf den Benutzer,
                       der Rest kommt von allein.” (Google)
usability // martin hahn // 2010




                                   Definition der Anforderungen
                                      Wer sind die Anwender?
                                      Erfahrungsgrade der Anwender
                                      Funktionalität – Was soll das System können?
                                      In welcher Umgebung wird das System benutzt?
                                      Technologien – Welche technischen Anforderungen
                                       werden verlangt? Gibt es technischen Grenzen?
usability // martin hahn // 2010




                         Surfweisheiten*
                          Wir lesen keine Seiten, wir überfliegen sie.
                          Wir treffen keine optimale Wahl.
                          Wir befassen uns nicht damit, wie etwas funktioniert,
                           sondern wursteln uns durch.
                          Wir sind ungeduldig und nicht tolerant.
                          Wir schätzen Qualität und Glaubwürdigkeit.
                          Wir sind eigenützig.




                     *
                         nach Steve Krug
usability // martin hahn // 2010




                         Inhalte
                          Relevante Inhalte sind das erste und nicht selten
                           das Einzige, worauf User achten!


                          Inhalte müssen nicht nur gut sein. Sie müssen auch
                           adäquat präsentiert und gezielt positioniert werden.
informations
architektur
wo geht´s hier wieder raus?
usability // martin hahn // 2010




                         informationsarchitektur
                                  Führt den User durch die Site und ans Ziel.
                                  Sollte nachvollziehbar und transparent sein.
                                  Prägt den Eindruck.
                                  Schafft Vertrauen.
usability // martin hahn // 2010




                         Ein paar
                         Regeln  Grundsätze
                                  7 ± 2 Prinzip
                                  2-Sekunden-Regel
                                  3-Klick-Regel
                                  Banner-Blindheit
usability // martin hahn // 2010




                  Konventionen der Webnavigation
                    Navigationselemente werden auf allen Unterseiten
                     in gleicher Weise verwendet.
                    Hauptnavigation / Metanavigation
                    Navigation am oberen oder linken Seitenrand.
                    Links müssen immer als solche erkennbar sein.
                    Zurück-Button muss funktionieren.
                    Besuchte Links kennzeichnen.
                    Footer als Zusatznavigation.
usability // martin hahn // 2010




                                   Navigation
                                      Wo bin ich?
                                      Wohin kann ich gehen?
                                      Wie kann ich dorthin kommen?
                                      Wie kann ich dahin zurück gehen,
                                       wo ich herkomme?
usability // martin hahn // 2010




                             Metanavigation
                                  Sitemap
                                  Startseite
                                  Kontakt
                                  Impressum
                                  Hilfe-, Suchfunktion
                                  Orientierungslinks
usability // martin hahn // 2010




                                   Alternative Navigationsmittel
                                      Tag-Cloud
                                      Sitemap
                                      Stepping / Paging
                                      Seiteninterne Links
usability // martin hahn // 2010




                  Breadcrumbs
                         Zeigen die aktuelle Position relativ zur Gesamtstruktur.
                         Nur ein Klick zu höheren Ebenen.
                         Einfach und unmissverständlich zu bedienen.
                         Braucht wenig Platz.
usability // martin hahn // 2010




                                   Reiter / Tabs

                                    Bekannte Metapher
                                    Klare Hierachie
usability // martin hahn // 2010




                             Navigationswording
                                  Home
                                  FAQ
                                  Sitemap
                                  Guided Tour
                                  Login / Logout
                                  Newsletter
                                  Download
                                  Über / About us
                                  Warenkorb


                              Verständlichkeit vor Kreativität
usability // martin hahn // 2010




                         Suche

                     Eine der wichtigsten Schnittstellen zwischen
                      Besucher und Webseite.
                     Muss sinnvolle Ergebnisse liefern.
                     Ab ca. 200 Unterseiten notwendig.
usability // martin hahn // 2010




                         Formulare
                                  Keine unnötigen Felder.
                                  Pflichtfelder kennzeichnen.
                                  Eindeutige Feldbezeichnungen.
                                  Eindeutige Fehlerhinweise.
                                  Korrekt ausgefüllte Felder merken.
usability // martin hahn // 2010




                             Kontakt
                              Ausreichend Kontaktmöglichkeiten bieten.
                              Physikalische Adresse
                              E-Mail / Kontaktformular


                              User muss jederzeit mit dem Unternehmen oder
                               einzelnen Personen in Kontakt treten können.
User
Interface
Design
form follows function?
usability // martin hahn // 2010




                                   “Ein Ding [...] soll seinem Zweck vollendet dienen –
                                         das heißt, seine Funktion praktisch erfüllen.”
                                                                               (Gropius)
usability // martin hahn // 2010




               Pagedesign Konventionen

              Zurück zur Startseite-Link   Seitensuche
usability // martin hahn // 2010




               Pagedesign Konventionen

               Interne Links             Werbung / Banner
usability // martin hahn // 2010




                     Konvention vs. Innovation

                       Konventionen sind hilfreich für den User
                       Start- und Unterseiten können sich unterscheiden.


                       Konventionen sind nicht zwangsläufig langweilig!
                       Innovationen nur dann, wenn die Idee besser ist!
usability // martin hahn // 2010
usability // martin hahn // 2010



                                   Grids are good
usability // martin hahn // 2010




                 Farben
                   Ästhetische und psychologische Wirkung
                   Informationsleitfunktion
                   Ausreichender Kontrast zwischen Text
                    und Hintergrund
                   Farbenwirkung und -kontraste beachten!
usability // martin hahn // 2010




                       Icons als Kommunikationshilfe
                             Ein Icon sagt mehr als tausend Worte.
                             Erleichtern die Informationsaufnahme.
                             Bieten Orientierung.
                             Müssen erlernt  bekannt sein!
usability // martin hahn // 2010
usability // martin hahn // 2010




                    Produkte sind nicht ästhetisch neutral!
usability // martin hahn // 2010




                  Webseiten sind nicht ästhetisch neutral!
usability // martin hahn // 2010




                       Webseitenästhetik
                             „Keine zweite Chance für den ersten Eindruck.”
                             Der User fühlt sich angesprochen oder eben nicht.
                             Gefallen oder Nicht-Gefallen passieren unbewusst.
                             Der User fällt sein Urteil in Sekundenbruchteilen.


                        “Schöne” adäquate Ästhetik unterstützt die Ziele
                         der Webseite und erhöht das Vertrauen des Users!
usability // martin hahn // 2010




            Webseiten vermittlen immer eine Ästhetik!
usability // martin hahn // 2010
readability
texte im internet liest sowieso keiner…
usability // martin hahn // 2010




                    Wir lesen keine Webseiten,
                    wie überfliegen sie!
                    Lesen am Monitor ist anstrengend und um
                     ca. 25% langsamer als auf Papier.


                    Der User braucht optische Anhaltspunkte zur Orientierung.
                    Text scannbar machen.
                    Umfangreiche Konsequenzen für die Gestaltung!
usability // martin hahn // 2010




                                   Die Folgen…
usability // martin hahn // 2010




             Headline / Claim
               Einführung in die Seite.
               Aussagekräftig, klar, verständlich!
usability // martin hahn // 2010




                       Abstract / Teaser
                        Blickfang
                        Erste Inhaltszusammenfassung.
                        Lockmittel, um den User zum Weiterlesen zu animieren.
usability // martin hahn // 2010




                       Überschriften  Seitentitel
                        Artikel mit Überschriften und
                         Zwischenüberschriften strukturieren.
                        Besser einfache, aussagekräftige als
                         interessant klingende Überschriften.
usability // martin hahn // 2010




                           Texte  Sprache – Content Usability
                                  Inhalt kürzen, Inhalt kürzen, Inhalt kürzen.
                                  Nutzlose Wörter weglassen.
                                  Objektive, einfache Sprache verwenden.
                                  Schlüsselwörter benutzen.
                                  Keine Rechtschreib-  Grammatikfehler
usability // martin hahn // 2010




           Content
           Usability
usability // martin hahn // 2010




                         Bilder sagen mehr…
                           als tausend Worte, ersetzen aber keine
                            inhaltlichen Details!
                           Sorgen für Aufmerksamkeit.
                           Ergänzen und erweitern die inhaltliche Aussage.
                           Der Inhalt bleibt mit Bildern besser in Erinnerung.
usability // martin hahn // 2010




                           Weißraum
                            Hilft die Seite zu strukturieren.
                            Bietet dem User Orientierung.
                            Zeigt inhaltliche Zusammenhänge auf.
usability // martin hahn // 2010




                         Textauszeichnungen
                                  Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen
                                  Lesbarkeit erhöhen
                                  Seite strukturieren
                                  Inhaltliches herausstellen
usability // martin hahn // 2010
usability // martin hahn // 2010




                 Listen / Tabellen
                  Schnelle Informationsaufnahme
                  Übersichtlich
                  “Auf den Punkt gebracht.”
usability // martin hahn // 2010




                         Gut lesbarer Text , Teil I
                          Nicht mehr als 8 - 10 Wörter pro Zeile.
                          Linksbündig
                          Serifenlose Schriften wie Arial, Verdana und Tahoma
                           für Fließtext.
                          Zeilenabstände nicht zu eng.
                          Schriftgröße ≥ 10 Punkt
usability // martin hahn // 2010




                             Gut lesbarer Text, Teil II
                                  Klarer Text/Hintergrund-Kontrast.
                                  Unterstreichungen NUR für Links.
                                  Auszeichnungen nutzen.
                                  Selten Großschreibung benutzen.
                                  Text in Absätze gliedern.
usability // martin hahn // 2010


                             Gut lesbarer Text
usability // martin hahn // 2010




           Pageflow 
           Readability
usability // martin hahn // 2010




                                   Pageflow  Readability
usability // martin hahn // 2010




       Die umgekehrte Pyramide
        Typischer Aufbau von Artikeln.




              Überschrift  wichtigste Informationen


                                  Wichtige
                               Informationen


                                   Details
usability // martin hahn // 2010




                     Glaubwürdigkeit
                      Glaubwürdigkeit ist ein Erfolgsfaktor einer Webseite.
                      Texte auf dem Bildschirm sind weniger glaubwürdig,
                       und schwerer zu verstehen sind als Texte auf Papier.


                     Glaubwürdige Webseiten:
                      Hohe wahrgenommene Vertrauenswürdigkeit
                      Hohe wahrgenommene Fach- oder Sachkenntnis
usability // martin hahn // 2010



                                   Glaubwürdigkeit steigern
                                    Zeigen, dass ein reales Unternehmen oder
                                     Person für den Auftritt verantwortlich ist.
                                    Einfache Interaktion zwischen Unternehmen
                                     und dem User.
                                    Professionelles Aussehen und leicht
                                     nachvollziehende Navigation.
                                    KEINE Vermischung von Inhalt und Werbung.
                                    Testimonials.
usability // martin hahn // 2010




                           Aktualität
                           Hohe Erwartungshaltung der User:
                            Inhalte gültig und aktuell!


                            Aktualität ist eng mit Glaubwürdigkeit und
                             Vertrauen verbunden.
einfach für alle
zugängliche webseiten
usability // martin hahn // 2010




                       Barrierefreie Webseiten
                             Webseiten so gestalten, dass sie JEDER lesen kann!
                             BITV  WCAG
                             Logische Struktur der HTML-Seiten
                             Kontrastreiche Gestaltung
                             Grafiken mit Alternativ-Text
                             Text-Alternativen für Multimedia-Angebote
                             Tastatursteuerung
                             Skalierbarkeit von Schriften
usability // martin hahn // 2010




                     Gebrauchstaugliche HTML-Seiten
                           Suchmaschinenoptimiert
                           Endgeräteunabhängig
                           Korrekte Seitenhierachie
                           HTML für Informationen, CSS für das Layout und
                            JavaScript / AJAX für die Verbesserung der Usability.
usability // martin hahn // 2010




                     Gebrauchstaugliche HTML-Seiten
                           Alternative Stylesheets (Print, mobile Geräte)
                           Sinnvoller Seitentitel
                           Sprechende URLs
                           Keine Frames und Pop-Ups
                           Individuelle Fehlerseite
usability // martin hahn // 2010
usability // martin hahn // 2010




                       Technische Voraussetzungen der User
nutzen
 Wenn ein User sich auf einer Website nicht zurechtfindet
  und er sie nicht steuern kann, verlässt er sie.
 Die nächste Website ist nur einen Mausklick entfernt.
 Dass er jemals wiederkommt, ist unwahrscheinlich.
usability // martin hahn // 2010




                       Warum Usability?
                        Usability ist ein Differenzierungsmerkmal.
                        Usability ist harte Arbeit.
                        Die Investition lohnt sich: Return on Investment.
usability // martin hahn // 2010




                             Das bringt Usability
                                  Mehr Umsatz
                                  Mehr Anfragen
                                  Mehr Besucher
                                  Höhere Kundenzufriedenheit
                                  Stärkere Kundenbindung
diskussion
gute seiten, schlechte seiten
usability // martin hahn // 2010
usability // martin hahn // 2010
usability // martin hahn // 2010
usability // martin hahn // 2010
usability // martin hahn // 2010
usability // martin hahn // 2010
usability // martin hahn // 2010




                              Usability – Best Case ;-)

Weitere ähnliche Inhalte

Was ist angesagt?

WAHRHEIT & LÜGE : Redewendungen und Zitate
WAHRHEIT & LÜGE  : Redewendungen und ZitateWAHRHEIT & LÜGE  : Redewendungen und Zitate
WAHRHEIT & LÜGE : Redewendungen und Zitate
Maria Vaz König
 
WIE KOMME ICH ZUM BAHNHOF?
WIE KOMME ICH ZUM BAHNHOF?WIE KOMME ICH ZUM BAHNHOF?
WIE KOMME ICH ZUM BAHNHOF?
Rocio Ramos
 
Destinationsmanagement 3.0 metropolregion hamburg
Destinationsmanagement 3.0 metropolregion hamburgDestinationsmanagement 3.0 metropolregion hamburg
Destinationsmanagement 3.0 metropolregion hamburg
Edgar Kreilkamp
 
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdfBITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
Leif Oppermann
 
REFLEXIVPRONOMEN - Theorie und Übungen / DaF
REFLEXIVPRONOMEN - Theorie und Übungen / DaFREFLEXIVPRONOMEN - Theorie und Übungen / DaF
REFLEXIVPRONOMEN - Theorie und Übungen / DaF
Maria Vaz König
 
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
Maria Vaz König
 
Die Präposition "in" mit wohin?-Akk / wo? - Dativ
Die Präposition "in"  mit  wohin?-Akk / wo? - DativDie Präposition "in"  mit  wohin?-Akk / wo? - Dativ
Die Präposition "in" mit wohin?-Akk / wo? - Dativ
Maria Vaz König
 
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
Maria Vaz König
 
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
NDOORS
 
Orientierung in der Stadt
Orientierung in der Stadt Orientierung in der Stadt
Orientierung in der Stadt
kate105
 
LanguageStore -Konjunktiv I - Indirekte Rede
LanguageStore -Konjunktiv I - Indirekte RedeLanguageStore -Konjunktiv I - Indirekte Rede
LanguageStore -Konjunktiv I - Indirekte Rede
LanguageStore
 
Zu- Infinitivsätze Niveaustufe B1
Zu- Infinitivsätze Niveaustufe B1Zu- Infinitivsätze Niveaustufe B1
Zu- Infinitivsätze Niveaustufe B1
Matfermar marin
 
PRÄTERITUM - regelmässige und unregelmässige Verben
PRÄTERITUM - regelmässige und unregelmässige VerbenPRÄTERITUM - regelmässige und unregelmässige Verben
PRÄTERITUM - regelmässige und unregelmässige Verben
Maria Vaz König
 
[IGC2018] 인플루전 곽노진 - 인디게임이 망할 수 밖에 없는 현실과 이유
 [IGC2018] 인플루전 곽노진 -  인디게임이 망할 수 밖에 없는 현실과 이유 [IGC2018] 인플루전 곽노진 -  인디게임이 망할 수 밖에 없는 현실과 이유
[IGC2018] 인플루전 곽노진 - 인디게임이 망할 수 밖에 없는 현실과 이유
강 민우
 
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
Maria Vaz König
 
B1 Stadt Land Wohnen
B1 Stadt Land WohnenB1 Stadt Land Wohnen
B1 Stadt Land Wohnen
Maria Vaz König
 
A1- Alles ist verboten! Modalverben: dürfen / müssen - Menschen A1 - Lektio...
A1- Alles ist verboten!  Modalverben: dürfen / müssen  - Menschen A1 - Lektio...A1- Alles ist verboten!  Modalverben: dürfen / müssen  - Menschen A1 - Lektio...
A1- Alles ist verboten! Modalverben: dürfen / müssen - Menschen A1 - Lektio...
Maria Vaz König
 
Modalverben im Präsens - Bedeutung und Anwendung A1
Modalverben im Präsens - Bedeutung und Anwendung A1 Modalverben im Präsens - Bedeutung und Anwendung A1
Modalverben im Präsens - Bedeutung und Anwendung A1
Maria Vaz König
 
Nebensätze
NebensätzeNebensätze
Nebensätze
markus88
 

Was ist angesagt? (20)

Modalverben
ModalverbenModalverben
Modalverben
 
WAHRHEIT & LÜGE : Redewendungen und Zitate
WAHRHEIT & LÜGE  : Redewendungen und ZitateWAHRHEIT & LÜGE  : Redewendungen und Zitate
WAHRHEIT & LÜGE : Redewendungen und Zitate
 
WIE KOMME ICH ZUM BAHNHOF?
WIE KOMME ICH ZUM BAHNHOF?WIE KOMME ICH ZUM BAHNHOF?
WIE KOMME ICH ZUM BAHNHOF?
 
Destinationsmanagement 3.0 metropolregion hamburg
Destinationsmanagement 3.0 metropolregion hamburgDestinationsmanagement 3.0 metropolregion hamburg
Destinationsmanagement 3.0 metropolregion hamburg
 
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdfBITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
BITKOM-Metaverse-Einordnung-Oppermann-Fraunhofer FIT.pdf
 
REFLEXIVPRONOMEN - Theorie und Übungen / DaF
REFLEXIVPRONOMEN - Theorie und Übungen / DaFREFLEXIVPRONOMEN - Theorie und Übungen / DaF
REFLEXIVPRONOMEN - Theorie und Übungen / DaF
 
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
FERNBEZIEHUNGEN - Traininig für die Mündliche Prüfung B2.2
 
Die Präposition "in" mit wohin?-Akk / wo? - Dativ
Die Präposition "in"  mit  wohin?-Akk / wo? - DativDie Präposition "in"  mit  wohin?-Akk / wo? - Dativ
Die Präposition "in" mit wohin?-Akk / wo? - Dativ
 
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
Brille, Tasche, Tuch, Kopftuch - anziehen? ausziehen? : NEIN!
 
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
코끼리를 냉장고에 넣는 법 - 최부호, NDC2013
 
Orientierung in der Stadt
Orientierung in der Stadt Orientierung in der Stadt
Orientierung in der Stadt
 
LanguageStore -Konjunktiv I - Indirekte Rede
LanguageStore -Konjunktiv I - Indirekte RedeLanguageStore -Konjunktiv I - Indirekte Rede
LanguageStore -Konjunktiv I - Indirekte Rede
 
Zu- Infinitivsätze Niveaustufe B1
Zu- Infinitivsätze Niveaustufe B1Zu- Infinitivsätze Niveaustufe B1
Zu- Infinitivsätze Niveaustufe B1
 
PRÄTERITUM - regelmässige und unregelmässige Verben
PRÄTERITUM - regelmässige und unregelmässige VerbenPRÄTERITUM - regelmässige und unregelmässige Verben
PRÄTERITUM - regelmässige und unregelmässige Verben
 
[IGC2018] 인플루전 곽노진 - 인디게임이 망할 수 밖에 없는 현실과 이유
 [IGC2018] 인플루전 곽노진 -  인디게임이 망할 수 밖에 없는 현실과 이유 [IGC2018] 인플루전 곽노진 -  인디게임이 망할 수 밖에 없는 현실과 이유
[IGC2018] 인플루전 곽노진 - 인디게임이 망할 수 밖에 없는 현실과 이유
 
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
#DaF_mit_Power / Wann kommst du an? Arbeitsblatt zur gleichnamigen Power Poin...
 
B1 Stadt Land Wohnen
B1 Stadt Land WohnenB1 Stadt Land Wohnen
B1 Stadt Land Wohnen
 
A1- Alles ist verboten! Modalverben: dürfen / müssen - Menschen A1 - Lektio...
A1- Alles ist verboten!  Modalverben: dürfen / müssen  - Menschen A1 - Lektio...A1- Alles ist verboten!  Modalverben: dürfen / müssen  - Menschen A1 - Lektio...
A1- Alles ist verboten! Modalverben: dürfen / müssen - Menschen A1 - Lektio...
 
Modalverben im Präsens - Bedeutung und Anwendung A1
Modalverben im Präsens - Bedeutung und Anwendung A1 Modalverben im Präsens - Bedeutung und Anwendung A1
Modalverben im Präsens - Bedeutung und Anwendung A1
 
Nebensätze
NebensätzeNebensätze
Nebensätze
 

Andere mochten auch

Pencils Down: Stop Designing & Start Developing
Pencils Down: Stop Designing & Start DevelopingPencils Down: Stop Designing & Start Developing
Pencils Down: Stop Designing & Start Developing
Aaron Hursman
 
Web-Management & -Konzeption
Web-Management & -KonzeptionWeb-Management & -Konzeption
Web-Management & -Konzeption
Martin Hahn
 
Startup Marketing
Startup MarketingStartup Marketing
Startup Marketing
sean omalley
 
Doctor's Orders - Burn Your PowerPoints
Doctor's Orders - Burn Your PowerPointsDoctor's Orders - Burn Your PowerPoints
Doctor's Orders - Burn Your PowerPoints
Nathan Cashion
 
What the F**k is Social Media NOW?
What the F**k is Social Media NOW?What the F**k is Social Media NOW?
What the F**k is Social Media NOW?
Martafy!
 
7 tips to create visual presentations
7 tips to create visual presentations7 tips to create visual presentations
7 tips to create visual presentations
Emiland
 
You Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedeeYou Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedee
Jesse Desjardins - @jessedee
 

Andere mochten auch (7)

Pencils Down: Stop Designing & Start Developing
Pencils Down: Stop Designing & Start DevelopingPencils Down: Stop Designing & Start Developing
Pencils Down: Stop Designing & Start Developing
 
Web-Management & -Konzeption
Web-Management & -KonzeptionWeb-Management & -Konzeption
Web-Management & -Konzeption
 
Startup Marketing
Startup MarketingStartup Marketing
Startup Marketing
 
Doctor's Orders - Burn Your PowerPoints
Doctor's Orders - Burn Your PowerPointsDoctor's Orders - Burn Your PowerPoints
Doctor's Orders - Burn Your PowerPoints
 
What the F**k is Social Media NOW?
What the F**k is Social Media NOW?What the F**k is Social Media NOW?
What the F**k is Social Media NOW?
 
7 tips to create visual presentations
7 tips to create visual presentations7 tips to create visual presentations
7 tips to create visual presentations
 
You Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedeeYou Suck At PowerPoint! by @jessedee
You Suck At PowerPoint! by @jessedee
 

Web-Usability

  • 2. usability // martin hahn // 2010 Definition Usability Ist ein Produkt einfach zu benutzen, hat es eine hohe Usability. Benutzerfreundlichkeit besser: Gebrauchstauglichkeit
  • 3. usability // martin hahn // 2010 Übersichtlich? Eindeutig? Klar?
  • 4. usability // martin hahn // 2010 Wieviele Links?
  • 5. usability // martin hahn // 2010 Was bekomme ich geboten? Wo bin ich gelandet? Was haben die zu bieten? Warum soll ich bleiben?
  • 6. usability // martin hahn // 2010 DIN EN ISO 9241-11 Anforderungen an die Gebrauchstauglichkeit Richtlinien der Interaktion zwischen Mensch und Computer “Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”
  • 7. usability // martin hahn // 2010 Effektivität, Effizienz und Zufriedenheit Effektivität Dem User gelingt die Zielerreichung wie geplant. Effizienz Zielerreichung möglichst schnell und mit möglichst wenig Aufwand. Zufriedenheit Erledigung der Aufgabe bereitet Freude.
  • 8. usability // martin hahn // 2010 Effektiv effizient? Jobs Beschäftigungsmöglichkeiten Job-o-Rama
  • 9. Am Anfang war ... ein plan
  • 10. usability // martin hahn // 2010
  • 11. usability // martin hahn // 2010 Kenne deine Zielgruppe!
  • 12. usability // martin hahn // 2010 Benutzerbedürfnisse Bedürfnisse, Interesse und Verhalten der User in den Mittelpunkt des Entwicklungsprozesses „Konzentriere dich auf den Benutzer, der Rest kommt von allein.” (Google)
  • 13. usability // martin hahn // 2010 Definition der Anforderungen Wer sind die Anwender? Erfahrungsgrade der Anwender Funktionalität – Was soll das System können? In welcher Umgebung wird das System benutzt? Technologien – Welche technischen Anforderungen werden verlangt? Gibt es technischen Grenzen?
  • 14. usability // martin hahn // 2010 Surfweisheiten* Wir lesen keine Seiten, wir überfliegen sie. Wir treffen keine optimale Wahl. Wir befassen uns nicht damit, wie etwas funktioniert, sondern wursteln uns durch. Wir sind ungeduldig und nicht tolerant. Wir schätzen Qualität und Glaubwürdigkeit. Wir sind eigenützig. * nach Steve Krug
  • 15. usability // martin hahn // 2010 Inhalte Relevante Inhalte sind das erste und nicht selten das Einzige, worauf User achten! Inhalte müssen nicht nur gut sein. Sie müssen auch adäquat präsentiert und gezielt positioniert werden.
  • 17. usability // martin hahn // 2010 informationsarchitektur Führt den User durch die Site und ans Ziel. Sollte nachvollziehbar und transparent sein. Prägt den Eindruck. Schafft Vertrauen.
  • 18. usability // martin hahn // 2010 Ein paar Regeln Grundsätze 7 ± 2 Prinzip 2-Sekunden-Regel 3-Klick-Regel Banner-Blindheit
  • 19. usability // martin hahn // 2010 Konventionen der Webnavigation Navigationselemente werden auf allen Unterseiten in gleicher Weise verwendet. Hauptnavigation / Metanavigation Navigation am oberen oder linken Seitenrand. Links müssen immer als solche erkennbar sein. Zurück-Button muss funktionieren. Besuchte Links kennzeichnen. Footer als Zusatznavigation.
  • 20. usability // martin hahn // 2010 Navigation Wo bin ich? Wohin kann ich gehen? Wie kann ich dorthin kommen? Wie kann ich dahin zurück gehen, wo ich herkomme?
  • 21. usability // martin hahn // 2010 Metanavigation Sitemap Startseite Kontakt Impressum Hilfe-, Suchfunktion Orientierungslinks
  • 22. usability // martin hahn // 2010 Alternative Navigationsmittel Tag-Cloud Sitemap Stepping / Paging Seiteninterne Links
  • 23. usability // martin hahn // 2010 Breadcrumbs Zeigen die aktuelle Position relativ zur Gesamtstruktur. Nur ein Klick zu höheren Ebenen. Einfach und unmissverständlich zu bedienen. Braucht wenig Platz.
  • 24. usability // martin hahn // 2010 Reiter / Tabs Bekannte Metapher Klare Hierachie
  • 25. usability // martin hahn // 2010 Navigationswording Home FAQ Sitemap Guided Tour Login / Logout Newsletter Download Über / About us Warenkorb Verständlichkeit vor Kreativität
  • 26. usability // martin hahn // 2010 Suche Eine der wichtigsten Schnittstellen zwischen Besucher und Webseite. Muss sinnvolle Ergebnisse liefern. Ab ca. 200 Unterseiten notwendig.
  • 27. usability // martin hahn // 2010 Formulare Keine unnötigen Felder. Pflichtfelder kennzeichnen. Eindeutige Feldbezeichnungen. Eindeutige Fehlerhinweise. Korrekt ausgefüllte Felder merken.
  • 28. usability // martin hahn // 2010 Kontakt Ausreichend Kontaktmöglichkeiten bieten. Physikalische Adresse E-Mail / Kontaktformular User muss jederzeit mit dem Unternehmen oder einzelnen Personen in Kontakt treten können.
  • 30. usability // martin hahn // 2010 “Ein Ding [...] soll seinem Zweck vollendet dienen – das heißt, seine Funktion praktisch erfüllen.” (Gropius)
  • 31. usability // martin hahn // 2010 Pagedesign Konventionen Zurück zur Startseite-Link Seitensuche
  • 32. usability // martin hahn // 2010 Pagedesign Konventionen Interne Links Werbung / Banner
  • 33. usability // martin hahn // 2010 Konvention vs. Innovation Konventionen sind hilfreich für den User Start- und Unterseiten können sich unterscheiden. Konventionen sind nicht zwangsläufig langweilig! Innovationen nur dann, wenn die Idee besser ist!
  • 34. usability // martin hahn // 2010
  • 35. usability // martin hahn // 2010 Grids are good
  • 36. usability // martin hahn // 2010 Farben Ästhetische und psychologische Wirkung Informationsleitfunktion Ausreichender Kontrast zwischen Text und Hintergrund Farbenwirkung und -kontraste beachten!
  • 37. usability // martin hahn // 2010 Icons als Kommunikationshilfe Ein Icon sagt mehr als tausend Worte. Erleichtern die Informationsaufnahme. Bieten Orientierung. Müssen erlernt bekannt sein!
  • 38. usability // martin hahn // 2010
  • 39. usability // martin hahn // 2010 Produkte sind nicht ästhetisch neutral!
  • 40. usability // martin hahn // 2010 Webseiten sind nicht ästhetisch neutral!
  • 41. usability // martin hahn // 2010 Webseitenästhetik „Keine zweite Chance für den ersten Eindruck.” Der User fühlt sich angesprochen oder eben nicht. Gefallen oder Nicht-Gefallen passieren unbewusst. Der User fällt sein Urteil in Sekundenbruchteilen. “Schöne” adäquate Ästhetik unterstützt die Ziele der Webseite und erhöht das Vertrauen des Users!
  • 42. usability // martin hahn // 2010 Webseiten vermittlen immer eine Ästhetik!
  • 43. usability // martin hahn // 2010
  • 44. readability texte im internet liest sowieso keiner…
  • 45. usability // martin hahn // 2010 Wir lesen keine Webseiten, wie überfliegen sie! Lesen am Monitor ist anstrengend und um ca. 25% langsamer als auf Papier. Der User braucht optische Anhaltspunkte zur Orientierung. Text scannbar machen. Umfangreiche Konsequenzen für die Gestaltung!
  • 46. usability // martin hahn // 2010 Die Folgen…
  • 47. usability // martin hahn // 2010 Headline / Claim Einführung in die Seite. Aussagekräftig, klar, verständlich!
  • 48. usability // martin hahn // 2010 Abstract / Teaser Blickfang Erste Inhaltszusammenfassung. Lockmittel, um den User zum Weiterlesen zu animieren.
  • 49. usability // martin hahn // 2010 Überschriften Seitentitel Artikel mit Überschriften und Zwischenüberschriften strukturieren. Besser einfache, aussagekräftige als interessant klingende Überschriften.
  • 50. usability // martin hahn // 2010 Texte Sprache – Content Usability Inhalt kürzen, Inhalt kürzen, Inhalt kürzen. Nutzlose Wörter weglassen. Objektive, einfache Sprache verwenden. Schlüsselwörter benutzen. Keine Rechtschreib- Grammatikfehler
  • 51. usability // martin hahn // 2010 Content Usability
  • 52. usability // martin hahn // 2010 Bilder sagen mehr… als tausend Worte, ersetzen aber keine inhaltlichen Details! Sorgen für Aufmerksamkeit. Ergänzen und erweitern die inhaltliche Aussage. Der Inhalt bleibt mit Bildern besser in Erinnerung.
  • 53. usability // martin hahn // 2010 Weißraum Hilft die Seite zu strukturieren. Bietet dem User Orientierung. Zeigt inhaltliche Zusammenhänge auf.
  • 54. usability // martin hahn // 2010 Textauszeichnungen Arten: Größe, Art, Farbe, Schnitt, Versalien, Kapitälchen Lesbarkeit erhöhen Seite strukturieren Inhaltliches herausstellen
  • 55. usability // martin hahn // 2010
  • 56. usability // martin hahn // 2010 Listen / Tabellen Schnelle Informationsaufnahme Übersichtlich “Auf den Punkt gebracht.”
  • 57. usability // martin hahn // 2010 Gut lesbarer Text , Teil I Nicht mehr als 8 - 10 Wörter pro Zeile. Linksbündig Serifenlose Schriften wie Arial, Verdana und Tahoma für Fließtext. Zeilenabstände nicht zu eng. Schriftgröße ≥ 10 Punkt
  • 58. usability // martin hahn // 2010 Gut lesbarer Text, Teil II Klarer Text/Hintergrund-Kontrast. Unterstreichungen NUR für Links. Auszeichnungen nutzen. Selten Großschreibung benutzen. Text in Absätze gliedern.
  • 59. usability // martin hahn // 2010 Gut lesbarer Text
  • 60. usability // martin hahn // 2010 Pageflow Readability
  • 61. usability // martin hahn // 2010 Pageflow Readability
  • 62. usability // martin hahn // 2010 Die umgekehrte Pyramide Typischer Aufbau von Artikeln. Überschrift wichtigste Informationen Wichtige Informationen Details
  • 63. usability // martin hahn // 2010 Glaubwürdigkeit Glaubwürdigkeit ist ein Erfolgsfaktor einer Webseite. Texte auf dem Bildschirm sind weniger glaubwürdig, und schwerer zu verstehen sind als Texte auf Papier. Glaubwürdige Webseiten: Hohe wahrgenommene Vertrauenswürdigkeit Hohe wahrgenommene Fach- oder Sachkenntnis
  • 64. usability // martin hahn // 2010 Glaubwürdigkeit steigern Zeigen, dass ein reales Unternehmen oder Person für den Auftritt verantwortlich ist. Einfache Interaktion zwischen Unternehmen und dem User. Professionelles Aussehen und leicht nachvollziehende Navigation. KEINE Vermischung von Inhalt und Werbung. Testimonials.
  • 65. usability // martin hahn // 2010 Aktualität Hohe Erwartungshaltung der User: Inhalte gültig und aktuell! Aktualität ist eng mit Glaubwürdigkeit und Vertrauen verbunden.
  • 67. usability // martin hahn // 2010 Barrierefreie Webseiten Webseiten so gestalten, dass sie JEDER lesen kann! BITV WCAG Logische Struktur der HTML-Seiten Kontrastreiche Gestaltung Grafiken mit Alternativ-Text Text-Alternativen für Multimedia-Angebote Tastatursteuerung Skalierbarkeit von Schriften
  • 68. usability // martin hahn // 2010 Gebrauchstaugliche HTML-Seiten Suchmaschinenoptimiert Endgeräteunabhängig Korrekte Seitenhierachie HTML für Informationen, CSS für das Layout und JavaScript / AJAX für die Verbesserung der Usability.
  • 69. usability // martin hahn // 2010 Gebrauchstaugliche HTML-Seiten Alternative Stylesheets (Print, mobile Geräte) Sinnvoller Seitentitel Sprechende URLs Keine Frames und Pop-Ups Individuelle Fehlerseite
  • 70. usability // martin hahn // 2010
  • 71. usability // martin hahn // 2010 Technische Voraussetzungen der User
  • 72. nutzen Wenn ein User sich auf einer Website nicht zurechtfindet und er sie nicht steuern kann, verlässt er sie. Die nächste Website ist nur einen Mausklick entfernt. Dass er jemals wiederkommt, ist unwahrscheinlich.
  • 73. usability // martin hahn // 2010 Warum Usability? Usability ist ein Differenzierungsmerkmal. Usability ist harte Arbeit. Die Investition lohnt sich: Return on Investment.
  • 74. usability // martin hahn // 2010 Das bringt Usability Mehr Umsatz Mehr Anfragen Mehr Besucher Höhere Kundenzufriedenheit Stärkere Kundenbindung
  • 76. usability // martin hahn // 2010
  • 77. usability // martin hahn // 2010
  • 78. usability // martin hahn // 2010
  • 79. usability // martin hahn // 2010
  • 80. usability // martin hahn // 2010
  • 81. usability // martin hahn // 2010
  • 82. usability // martin hahn // 2010 Usability – Best Case ;-)