SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Downloaden Sie, um offline zu lesen
Wie räume ich meine Website auf? 
Online-Helden Campus 2014
Hallo! 
Wer bist Du? 
Hast Du Eure Website mitentwickelt? 
Was erwartest Du von diesem Workshop?
Was Du in den nächsten 45 Minuten lernst: 
Was Usability ist. 
Was eine nutzerfreundliche Website ausmacht. 
Wie Du heraus findest, ob Eure Website nutzerfreundlich ist.
Usability 
= Gebrauchstauglichkeit 
Erreicht der Nutzer sein Ziel? 
Mit wie viel Aufwand ist dieses zu erreichen? 
Wie zufrieden ist der Nutzer mit dem Nutzungserlebnis?
Was eine nutzerfreundliche Website ausmacht: 
“Don´t make me think!” 
Nutzer
6 
Do´s 
Konventionen ausnutzen 
» jeder hat Erfahrungen & Erwartungen wo Dinge auf einer Website lokalisiert sind, wie sie 
funktionieren & wie sie aussehen
7 
Do´s 
Effektive visuelle Hierarchien bauen 
» je wichtiger etwas ist, desto prominenter 
» Dinge, die logisch/inhaltlich zusammen gehören, gehören auch visuell zusammen 
» Gruppierungen zeigen, was gehört zu was
8 
Do´s 
Seiten in klar definierte Bereiche unterteilen 
» dem Nutzer zeigen: was es wo für ihn gibt >> so kann er schnell entscheiden, was für ihn 
wichtig ist 
» Beispiel:
9 
Do´s 
Offensichtlich machen, was klickbar ist 
» z. B. die gleiche Farbe für Links verwenden, die klickbar sind – und diese Farbe nicht auch 
für Überschriften benutzen 
» außerdem Position & Form beachten: Navigationen, Button, Tabs 
» Beispiel:
10 
Do´s 
Ablenkungen eliminieren 
» visuelles “Schreien” vermeiden: weniger Fettdruck, Ausrufungszeichen & große Schrift 
» Inhalte organisieren: stell dir ein unaufgeräumtes Kinderzimmer vor: das rote Auto 
findest Du nicht 
» Kram wegwerfen: Ist diese Info für den Nutzer wichtig? (Oder nur mich oder den 
Vorstand?) 
» Beispiel:
11 
Do´s 
Inhalte leicht erfassbar machen 
» Überschriften benutzen 
» einzelne Abschnitte/Paragrafen kurz halten 
» Listen mit Aufzählungszeichen verwenden 
» wichtige Dinge hervorheben 
» Beispiel:
Usability-Tests selbstgemacht! 
Ziel: Usability-Fehler auf der eigenen Website aufdecken 
1 Tag Zeit, 1 Raum, 1 PC, 1 Testszenario 
3-5 Teilnehmer
13 
Literatur-Tipps 
Wenn Du mehr wissen willst. 
Platz 1: Autor: Krug, Steve; Titel: Don‘t Make Me Think! 
Details z.B. hier: http://www.amazon.de/Dont-Make-Me-Think-Usability/dp/0321965515/ref=dp_ob_title_bk 
--> liest sich sehr gut, da leicht verständlich und unterhaltsam geschrieben; enthält die wichtigsten Regeln für "usable websites" 
wie wir sie auch vorgestellt hatten 
Platz 2: Autoren: Nielsen, Jakob & Loranger, Hoa; Titel: Web Usability 
Details z.B. hier: http://www.amazon.de/Web-Usability-Deutsche-Ausgabe-Grafik/dp/3827324483 
--> das umfangreichste Standardwerk zu Web Usability; als Nachschlagewerk zu verstehen zum punktuellen Lesen; liest sich 
ebenfalls sehr gut 
Platz 3: Autor: unser Kollege Tobias Jordans; Weblog: http://uxzentrisch.de/discount-usability-testing/ 
--> Tobias hatte Usability Tests mit Nutzern lange Zeit vernachlässigt, dann aber erkannt (nach 1x ausprobieren) wie viel Mehrwert 
so ein Test bietet. Sein Artikel enthält auch einen weiteren guten Literaturtipp: Steve Krug (s. oben) hat ein Buch zu "User Tests 
einfach selbstgemacht" geschrieben: Rocket Surgery Made Easy! 
Platz 4: Autor: Jakob Nielsen u.a.; Newsletter: http://www.nngroup.com/articles/subscribe/ 
--> kostenloser Newsletter-Service mit jew. einem aktuellen Artikel zu Web Usability von der Nielsen Norman Group, der 
bekanntesten Usability-Agentur, gegründet von Jakob Nielsen; Jakob Nielsen ist der bekannteste und einer der erfahrensten 
Usability-Experten auf dieser Erde 
--> Bsp. für einen guten Artikel (Thema: Lautes Denken während User Tests, wie im Workshop gezeigt: http://www.nngroup.com/ 
articles/thinking-aloud-the-1-usability-tool/
Danke! 
! 
Markus & Sarah © 2014 | gut.org gAG

Weitere ähnliche Inhalte

Andere mochten auch

Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas KashalikarSampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
shivsr5
 
Benito Mussolini
Benito MussoliniBenito Mussolini
Benito Mussolini
Schlede
 
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
Linda Reinstein
 
Geschichte und gegenwart sk
Geschichte und gegenwart skGeschichte und gegenwart sk
Geschichte und gegenwart sk
zitahavranova
 
Ausschreibung Pro Holz Reise 2011
Ausschreibung Pro Holz Reise 2011Ausschreibung Pro Holz Reise 2011
Ausschreibung Pro Holz Reise 2011
Martin Wiederkehr
 
Bloque de cierre
Bloque de cierreBloque de cierre
Bloque de cierre
yasm7
 
Webprofiling Booklet 11.2009 7 Mb
Webprofiling Booklet 11.2009 7 MbWebprofiling Booklet 11.2009 7 Mb
Webprofiling Booklet 11.2009 7 Mb
schnueckel
 

Andere mochten auch (20)

Twitter Einmaleins
Twitter EinmaleinsTwitter Einmaleins
Twitter Einmaleins
 
Labmetrics März 2011
Labmetrics März 2011Labmetrics März 2011
Labmetrics März 2011
 
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas KashalikarSampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
Sampurna Arogyasathi Namasmarn Marathi Bestseller Dr. Shriniwas Kashalikar
 
calendari 2009
calendari 2009calendari 2009
calendari 2009
 
Benito Mussolini
Benito MussoliniBenito Mussolini
Benito Mussolini
 
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
"Pakistan: The Global Asbestos Struggle" by Linda Reinstein
 
Geschichte und gegenwart sk
Geschichte und gegenwart skGeschichte und gegenwart sk
Geschichte und gegenwart sk
 
Ausschreibung Pro Holz Reise 2011
Ausschreibung Pro Holz Reise 2011Ausschreibung Pro Holz Reise 2011
Ausschreibung Pro Holz Reise 2011
 
empea
empeaempea
empea
 
student research project
student research projectstudent research project
student research project
 
Producto Topográfico Geodésico: Mejora para medir la preservación de la topol...
Producto Topográfico Geodésico: Mejora para medir la preservación de la topol...Producto Topográfico Geodésico: Mejora para medir la preservación de la topol...
Producto Topográfico Geodésico: Mejora para medir la preservación de la topol...
 
Teil1
Teil1Teil1
Teil1
 
Bedienungsanleitung - POC
Bedienungsanleitung - POCBedienungsanleitung - POC
Bedienungsanleitung - POC
 
Bloque de cierre
Bloque de cierreBloque de cierre
Bloque de cierre
 
Studie Werbung Im Business To Business 2009
Studie Werbung Im Business To Business 2009Studie Werbung Im Business To Business 2009
Studie Werbung Im Business To Business 2009
 
La misa (padres)
La misa (padres)La misa (padres)
La misa (padres)
 
LMS
LMSLMS
LMS
 
Labmetrics Januar 2012
Labmetrics Januar 2012Labmetrics Januar 2012
Labmetrics Januar 2012
 
Webprofiling Booklet 11.2009 7 Mb
Webprofiling Booklet 11.2009 7 MbWebprofiling Booklet 11.2009 7 Mb
Webprofiling Booklet 11.2009 7 Mb
 
Las motos
Las motosLas motos
Las motos
 

Mehr von betterplace lab

NGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2019: Ergebnisse der Online-Fundraising-UmfrageNGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
betterplace lab
 
Internet für NGO Leitfaden für Social Media und Online-Fundraising
Internet für NGO Leitfaden für Social Media und Online-FundraisingInternet für NGO Leitfaden für Social Media und Online-Fundraising
Internet für NGO Leitfaden für Social Media und Online-Fundraising
betterplace lab
 

Mehr von betterplace lab (20)

NGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2019: Ergebnisse der Online-Fundraising-UmfrageNGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2019: Ergebnisse der Online-Fundraising-Umfrage
 
Evaluation des Digital Social Summit 2019
Evaluation des Digital Social Summit 2019Evaluation des Digital Social Summit 2019
Evaluation des Digital Social Summit 2019
 
Demokratie.io Broschüre
Demokratie.io BroschüreDemokratie.io Broschüre
Demokratie.io Broschüre
 
Transparent magazine: SUSTAINABLE FASHION IN THE DIGITAL ERA
Transparent magazine: SUSTAINABLE FASHION IN THE DIGITAL ERA Transparent magazine: SUSTAINABLE FASHION IN THE DIGITAL ERA
Transparent magazine: SUSTAINABLE FASHION IN THE DIGITAL ERA
 
Intersect: Impulse zur intersektoralen Zusammenarbeit der Zivilgesellschaft ...
Intersect:  Impulse zur intersektoralen Zusammenarbeit der Zivilgesellschaft ...Intersect:  Impulse zur intersektoralen Zusammenarbeit der Zivilgesellschaft ...
Intersect: Impulse zur intersektoralen Zusammenarbeit der Zivilgesellschaft ...
 
NGO-Meter 2018: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2018: Ergebnisse der Online-Fundraising-UmfrageNGO-Meter 2018: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2018: Ergebnisse der Online-Fundraising-Umfrage
 
Auswirkungen und Erfolgsfaktoren der Google Impact Challenge
Auswirkungen und Erfolgsfaktoren der Google Impact ChallengeAuswirkungen und Erfolgsfaktoren der Google Impact Challenge
Auswirkungen und Erfolgsfaktoren der Google Impact Challenge
 
Spenden in Deutschland 2017: unsere Analyse des Spendenmarktes
Spenden in Deutschland 2017: unsere Analyse des SpendenmarktesSpenden in Deutschland 2017: unsere Analyse des Spendenmarktes
Spenden in Deutschland 2017: unsere Analyse des Spendenmarktes
 
Digital Routes to Integration : How civic tech innovations are supporting ref...
Digital Routes to Integration : How civic tech innovations are supporting ref...Digital Routes to Integration : How civic tech innovations are supporting ref...
Digital Routes to Integration : How civic tech innovations are supporting ref...
 
Digitale Wege zur Integration: Wie innovative Ansätze der Zivilgesellschaft G...
Digitale Wege zur Integration: Wie innovative Ansätze der Zivilgesellschaft G...Digitale Wege zur Integration: Wie innovative Ansätze der Zivilgesellschaft G...
Digitale Wege zur Integration: Wie innovative Ansätze der Zivilgesellschaft G...
 
5 ways to bridge the Digital gender Gap
5 ways to bridge the Digital gender Gap 5 ways to bridge the Digital gender Gap
5 ways to bridge the Digital gender Gap
 
NGO-Meter 2015: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2015: Ergebnisse der Online-Fundraising-UmfrageNGO-Meter 2015: Ergebnisse der Online-Fundraising-Umfrage
NGO-Meter 2015: Ergebnisse der Online-Fundraising-Umfrage
 
Spenden in Deutschland 2016: unsere Analyse des Spendenmarktes
Spenden in Deutschland 2016: unsere Analyse des SpendenmarktesSpenden in Deutschland 2016: unsere Analyse des Spendenmarktes
Spenden in Deutschland 2016: unsere Analyse des Spendenmarktes
 
Innovation Workshop @ Deutsche Bahn
Innovation Workshop @ Deutsche Bahn Innovation Workshop @ Deutsche Bahn
Innovation Workshop @ Deutsche Bahn
 
Digitales Jugendengagement: Formate Wege Möglichkeiten
Digitales Jugendengagement: Formate Wege MöglichkeitenDigitales Jugendengagement: Formate Wege Möglichkeiten
Digitales Jugendengagement: Formate Wege Möglichkeiten
 
NGO-Meter 2014 Ergebnisse für Gesamtjahr 2014
NGO-Meter 2014 Ergebnisse für Gesamtjahr 2014NGO-Meter 2014 Ergebnisse für Gesamtjahr 2014
NGO-Meter 2014 Ergebnisse für Gesamtjahr 2014
 
Internet für NGO Leitfaden für Social Media und Online-Fundraising
Internet für NGO Leitfaden für Social Media und Online-FundraisingInternet für NGO Leitfaden für Social Media und Online-Fundraising
Internet für NGO Leitfaden für Social Media und Online-Fundraising
 
Spenden in Deutschland 2015
Spenden in Deutschland 2015Spenden in Deutschland 2015
Spenden in Deutschland 2015
 
betterplace lab trendreport 2013
betterplace lab trendreport 2013betterplace lab trendreport 2013
betterplace lab trendreport 2013
 
Spendenmarkt Analyse 2014
Spendenmarkt Analyse 2014Spendenmarkt Analyse 2014
Spendenmarkt Analyse 2014
 

Kürzlich hochgeladen (7)

Wirtschaftsingenieurwesen an der Universität Duisburg-Essen
Wirtschaftsingenieurwesen an der Universität Duisburg-EssenWirtschaftsingenieurwesen an der Universität Duisburg-Essen
Wirtschaftsingenieurwesen an der Universität Duisburg-Essen
 
1029-Danh muc Sach Giao Khoa khoi 12.pdf
1029-Danh muc Sach Giao Khoa khoi 12.pdf1029-Danh muc Sach Giao Khoa khoi 12.pdf
1029-Danh muc Sach Giao Khoa khoi 12.pdf
 
Welche KI-Kompetenzen brauchen Lehrpersonen?!
Welche KI-Kompetenzen brauchen Lehrpersonen?!Welche KI-Kompetenzen brauchen Lehrpersonen?!
Welche KI-Kompetenzen brauchen Lehrpersonen?!
 
1029-Danh muc Sach Giao Khoa khoi 11.pdf
1029-Danh muc Sach Giao Khoa khoi 11.pdf1029-Danh muc Sach Giao Khoa khoi 11.pdf
1029-Danh muc Sach Giao Khoa khoi 11.pdf
 
Angewandte Philosophie an der Universität Duisburg-Essen.
Angewandte Philosophie an der Universität Duisburg-Essen.Angewandte Philosophie an der Universität Duisburg-Essen.
Angewandte Philosophie an der Universität Duisburg-Essen.
 
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdfLAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
 
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_EssenAngewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
 

Online-Helden: Wie räume ich meine Website auf?

  • 1. Wie räume ich meine Website auf? Online-Helden Campus 2014
  • 2. Hallo! Wer bist Du? Hast Du Eure Website mitentwickelt? Was erwartest Du von diesem Workshop?
  • 3. Was Du in den nächsten 45 Minuten lernst: Was Usability ist. Was eine nutzerfreundliche Website ausmacht. Wie Du heraus findest, ob Eure Website nutzerfreundlich ist.
  • 4. Usability = Gebrauchstauglichkeit Erreicht der Nutzer sein Ziel? Mit wie viel Aufwand ist dieses zu erreichen? Wie zufrieden ist der Nutzer mit dem Nutzungserlebnis?
  • 5. Was eine nutzerfreundliche Website ausmacht: “Don´t make me think!” Nutzer
  • 6. 6 Do´s Konventionen ausnutzen » jeder hat Erfahrungen & Erwartungen wo Dinge auf einer Website lokalisiert sind, wie sie funktionieren & wie sie aussehen
  • 7. 7 Do´s Effektive visuelle Hierarchien bauen » je wichtiger etwas ist, desto prominenter » Dinge, die logisch/inhaltlich zusammen gehören, gehören auch visuell zusammen » Gruppierungen zeigen, was gehört zu was
  • 8. 8 Do´s Seiten in klar definierte Bereiche unterteilen » dem Nutzer zeigen: was es wo für ihn gibt >> so kann er schnell entscheiden, was für ihn wichtig ist » Beispiel:
  • 9. 9 Do´s Offensichtlich machen, was klickbar ist » z. B. die gleiche Farbe für Links verwenden, die klickbar sind – und diese Farbe nicht auch für Überschriften benutzen » außerdem Position & Form beachten: Navigationen, Button, Tabs » Beispiel:
  • 10. 10 Do´s Ablenkungen eliminieren » visuelles “Schreien” vermeiden: weniger Fettdruck, Ausrufungszeichen & große Schrift » Inhalte organisieren: stell dir ein unaufgeräumtes Kinderzimmer vor: das rote Auto findest Du nicht » Kram wegwerfen: Ist diese Info für den Nutzer wichtig? (Oder nur mich oder den Vorstand?) » Beispiel:
  • 11. 11 Do´s Inhalte leicht erfassbar machen » Überschriften benutzen » einzelne Abschnitte/Paragrafen kurz halten » Listen mit Aufzählungszeichen verwenden » wichtige Dinge hervorheben » Beispiel:
  • 12. Usability-Tests selbstgemacht! Ziel: Usability-Fehler auf der eigenen Website aufdecken 1 Tag Zeit, 1 Raum, 1 PC, 1 Testszenario 3-5 Teilnehmer
  • 13. 13 Literatur-Tipps Wenn Du mehr wissen willst. Platz 1: Autor: Krug, Steve; Titel: Don‘t Make Me Think! Details z.B. hier: http://www.amazon.de/Dont-Make-Me-Think-Usability/dp/0321965515/ref=dp_ob_title_bk --> liest sich sehr gut, da leicht verständlich und unterhaltsam geschrieben; enthält die wichtigsten Regeln für "usable websites" wie wir sie auch vorgestellt hatten Platz 2: Autoren: Nielsen, Jakob & Loranger, Hoa; Titel: Web Usability Details z.B. hier: http://www.amazon.de/Web-Usability-Deutsche-Ausgabe-Grafik/dp/3827324483 --> das umfangreichste Standardwerk zu Web Usability; als Nachschlagewerk zu verstehen zum punktuellen Lesen; liest sich ebenfalls sehr gut Platz 3: Autor: unser Kollege Tobias Jordans; Weblog: http://uxzentrisch.de/discount-usability-testing/ --> Tobias hatte Usability Tests mit Nutzern lange Zeit vernachlässigt, dann aber erkannt (nach 1x ausprobieren) wie viel Mehrwert so ein Test bietet. Sein Artikel enthält auch einen weiteren guten Literaturtipp: Steve Krug (s. oben) hat ein Buch zu "User Tests einfach selbstgemacht" geschrieben: Rocket Surgery Made Easy! Platz 4: Autor: Jakob Nielsen u.a.; Newsletter: http://www.nngroup.com/articles/subscribe/ --> kostenloser Newsletter-Service mit jew. einem aktuellen Artikel zu Web Usability von der Nielsen Norman Group, der bekanntesten Usability-Agentur, gegründet von Jakob Nielsen; Jakob Nielsen ist der bekannteste und einer der erfahrensten Usability-Experten auf dieser Erde --> Bsp. für einen guten Artikel (Thema: Lautes Denken während User Tests, wie im Workshop gezeigt: http://www.nngroup.com/ articles/thinking-aloud-the-1-usability-tool/
  • 14. Danke! ! Markus & Sarah © 2014 | gut.org gAG