SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
VISUAL REGRESSION TEST
INCLUDING RESPONSIVE
USER EXPERIENCE KONZEPTER
UND INTERAKTIONSDESIGNER
Nico Maikowski
TEXT
WARUM SOLLTE MAN DAS TUN
WOLLEN?
MOTIVATION
TEXT
AUS UNSERE GRUNDSÄTZE - ISO 9241
▸ Selbstbeschreibungsfähigkeit

Orientierung:

Dem Nutzer müssen auf jeder Seite und während eines jeden Prozesses Orientierungspunkte angeboten
werden, damit er jederzeit weiß, wo genau er sich befindet und/oder wie weit er von seinem eigentlichen Ziel
entfernt ist. Zum Lösen dieses Problems finden Design Patterns Anwendung, wie: Breadcrumb, Progress und
Steps Left.

Beherrschbarkeit

Für die Besucher einer Website müssen Navigationselemente klar durch deren Gestaltung zu erkennen sein. Des
Weiteren muss für den Benutzer klar sein, wo ein Navigationselement einen hinführt. Erst wenn zielsicher
navigiert werden kann, ist eine Seite für einen Nutzer steuer- und beherrschbar. Design Patterns zur Lösung
wären hier: Top Navigation Bar und Left Navigation Bar.

Rückmeldung

Erhält der Besucher eine Rückmeldung über den Erfolg einer vorher durchgeführten Aktion, entsteht ein Gefühl
von Sicherheit, welches für die Vertrauensbildung maßgeblich ist. Ein Design Pattern hierfür ist: Shopping Cart.

Hilfen

Komplexere Aufgaben sind grade für unerfahrene Besucher schwer zu bewältigen. Solche Aufgaben sollten mit
besonderen Hilfen oder einer Dokumentation des Systems unterstützt werden. Hierzu folgende Design Patterns:
Hover Invitation, Tooltip Invitation.
TEXT
ERWEITERTE GRUNDSÄTZE - ISO (9126)
▸ Unter dem Qualitätsmerkmal Benutzbarkeit gibt es den Punkt
Attraktivität
▸ Attraktivität (lat. attrahere ‚an sich ziehen, anziehen‘) ist die
Anziehungskraft. Auf Menschen bezogen, kann sie sowohl auf
äußerlichen Eigenschaften (Schönheit) als auch auf
Wesenseigenschaften (Charakter, Geist, Charisma, soziale
Stellung) oder auf Materiellem beruhen. Sie wird individuell
unterschiedlich bewertet und hängt im Wesentlichen von den
Erwartungen des Betrachters ab. Als subjektiver Wert ist sie
dem sozialen und gesellschaftlichen Wandel unterworfen.
JUST BECAUSE
YOU’VE COUNTED ALL
THE TREES DOESN’T
MEAN YOU’VE SEEN
THE FOREST.
Anonymous
TEXT
WAS WILL MAN TESTEN?
▸ Breite, Höhe, Abstände
▸ Textgrößen, -farbe, -Alignment
▸ Responsive für Smartphone
▸ Browsertypen
TEXT
WAS KANN BEREITS GETESTET WERDEN?
‣ Near
‣ Below and Above
‣ Left of and Right of
‣ Inside
‣ Width and Height
‣ Aligned
‣ Text
‣ CSS Properties
‣ Centered
‣ Absent
‣ Visible
‣ Contains
‣ On
‣ Component
‣ Count
‣ Color scheme
‣ Image
WIE?
JUNIT
▸ Vorteile wie z.B. Einbindung in Jenkins CI
▸ bekannt bei den Frontend Entwicklern
▸ Shake Hands zwischen UX und UI
WIE?
SELENIUM
▸ Driver als Plugins für
verschiedene Browser
▸ Auflösungen für Responsive
Tests
▸ benötigt um die Website
funktional zu steuern ->
Navigation und Inputs
befüllen
WIE?
GALEN
▸ das eigentliche
Framework zum
visuellen Test
▸ grafische
Auswertung
TEXT
VORTEILE
▸ fortlaufende Wiederholung von Testfällen, d.h. Ausschluss
von Fehlerquellen bei iterativer Entwicklung
▸ Tests können bereits parallel zur Gestaltungslösung
entwickelt werden
▸ Kostensenkung durch Einsparung für manuelle Reviews
TEXT
NACHTEILE
▸ IDs in der Website bzw. den html-Tags
▸ gewisses Maß an Programmierkenntnisse
▸ Pflege der Tests
DEMO
TEXT
LINKS UND QUELLEN:
1. http://galenframework.com
2. http://docs.seleniumhq.org
3. http://junit.org/junit4/
4. https://github.com/hypery2k/galen_samples
THANK YOU FOR THE FISH
Douglas Adams
TEXT

Weitere ähnliche Inhalte

Ähnlich wie Visual regression test

Persuasives Webdesign
Persuasives WebdesignPersuasives Webdesign
Persuasives WebdesignWebmontag MRN
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileCS2 AG
 
Eine Entdeckungsreise zum Land der Software-Qualität
Eine Entdeckungsreise zum Land der Software-QualitätEine Entdeckungsreise zum Land der Software-Qualität
Eine Entdeckungsreise zum Land der Software-QualitätMarco Ravicini
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines ConceptersuxHH
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...usability.de
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Christoph Mühlbauer
 
IA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story MappingIA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story Mappingdenkwerk GmbH
 
User Story Mapping in Practice
User Story Mapping in PracticeUser Story Mapping in Practice
User Story Mapping in PracticeSandra Griffel
 
Webinar: Mit Mental Models Kunden langfristig binden
Webinar: Mit Mental Models Kunden langfristig bindenWebinar: Mit Mental Models Kunden langfristig binden
Webinar: Mit Mental Models Kunden langfristig bindenkuehlhaus AG
 
Folgst du noch oder formst du schon? Über Brands und UX Design
Folgst du noch oder formst du schon? Über Brands und UX DesignFolgst du noch oder formst du schon? Über Brands und UX Design
Folgst du noch oder formst du schon? Über Brands und UX DesignRupert Platz
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign GmbH
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Robert Weller
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content ExperiencePeter Rozek
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital BankingJürg Stuker
 
Alice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerceAlice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerceeCommerce Lounge
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices Peter Rozek
 

Ähnlich wie Visual regression test (20)

Persuasives Webdesign
Persuasives WebdesignPersuasives Webdesign
Persuasives Webdesign
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
Eine Entdeckungsreise zum Land der Software-Qualität
Eine Entdeckungsreise zum Land der Software-QualitätEine Entdeckungsreise zum Land der Software-Qualität
Eine Entdeckungsreise zum Land der Software-Qualität
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
Mobile User Experience: Entwicklung von benutzerfreundlichen mobilen Websites...
 
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
Mobile User Experience - Entwicklung von benutzerfreundlichen mobilen Website...
 
IA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story MappingIA Konferenz 2016 - User Story Mapping
IA Konferenz 2016 - User Story Mapping
 
User Story Mapping in Practice
User Story Mapping in PracticeUser Story Mapping in Practice
User Story Mapping in Practice
 
Webinar: Mit Mental Models Kunden langfristig binden
Webinar: Mit Mental Models Kunden langfristig bindenWebinar: Mit Mental Models Kunden langfristig binden
Webinar: Mit Mental Models Kunden langfristig binden
 
Folgst du noch oder formst du schon? Über Brands und UX Design
Folgst du noch oder formst du schon? Über Brands und UX DesignFolgst du noch oder formst du schon? Über Brands und UX Design
Folgst du noch oder formst du schon? Über Brands und UX Design
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013Ergosign-Responsive-Design-2013
Ergosign-Responsive-Design-2013
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
User Experience im Digital Banking
User Experience im Digital BankingUser Experience im Digital Banking
User Experience im Digital Banking
 
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
10 Tipps für die optimale Benutzerfreundlichkeit (Usability) Ihrer Webseite
 
Alice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerceAlice im Wunderland - Die Magie der User Experience im eCommerce
Alice im Wunderland - Die Magie der User Experience im eCommerce
 
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
RESPONSIVE WEBDESIGN, Navigationskonzepte für Mobile Devices
 

Visual regression test

  • 2. USER EXPERIENCE KONZEPTER UND INTERAKTIONSDESIGNER Nico Maikowski TEXT
  • 3. WARUM SOLLTE MAN DAS TUN WOLLEN? MOTIVATION
  • 4. TEXT AUS UNSERE GRUNDSÄTZE - ISO 9241 ▸ Selbstbeschreibungsfähigkeit
 Orientierung:
 Dem Nutzer müssen auf jeder Seite und während eines jeden Prozesses Orientierungspunkte angeboten werden, damit er jederzeit weiß, wo genau er sich befindet und/oder wie weit er von seinem eigentlichen Ziel entfernt ist. Zum Lösen dieses Problems finden Design Patterns Anwendung, wie: Breadcrumb, Progress und Steps Left.
 Beherrschbarkeit
 Für die Besucher einer Website müssen Navigationselemente klar durch deren Gestaltung zu erkennen sein. Des Weiteren muss für den Benutzer klar sein, wo ein Navigationselement einen hinführt. Erst wenn zielsicher navigiert werden kann, ist eine Seite für einen Nutzer steuer- und beherrschbar. Design Patterns zur Lösung wären hier: Top Navigation Bar und Left Navigation Bar.
 Rückmeldung
 Erhält der Besucher eine Rückmeldung über den Erfolg einer vorher durchgeführten Aktion, entsteht ein Gefühl von Sicherheit, welches für die Vertrauensbildung maßgeblich ist. Ein Design Pattern hierfür ist: Shopping Cart.
 Hilfen
 Komplexere Aufgaben sind grade für unerfahrene Besucher schwer zu bewältigen. Solche Aufgaben sollten mit besonderen Hilfen oder einer Dokumentation des Systems unterstützt werden. Hierzu folgende Design Patterns: Hover Invitation, Tooltip Invitation.
  • 5. TEXT ERWEITERTE GRUNDSÄTZE - ISO (9126) ▸ Unter dem Qualitätsmerkmal Benutzbarkeit gibt es den Punkt Attraktivität ▸ Attraktivität (lat. attrahere ‚an sich ziehen, anziehen‘) ist die Anziehungskraft. Auf Menschen bezogen, kann sie sowohl auf äußerlichen Eigenschaften (Schönheit) als auch auf Wesenseigenschaften (Charakter, Geist, Charisma, soziale Stellung) oder auf Materiellem beruhen. Sie wird individuell unterschiedlich bewertet und hängt im Wesentlichen von den Erwartungen des Betrachters ab. Als subjektiver Wert ist sie dem sozialen und gesellschaftlichen Wandel unterworfen.
  • 6. JUST BECAUSE YOU’VE COUNTED ALL THE TREES DOESN’T MEAN YOU’VE SEEN THE FOREST. Anonymous
  • 7. TEXT WAS WILL MAN TESTEN? ▸ Breite, Höhe, Abstände ▸ Textgrößen, -farbe, -Alignment ▸ Responsive für Smartphone ▸ Browsertypen
  • 8. TEXT WAS KANN BEREITS GETESTET WERDEN? ‣ Near ‣ Below and Above ‣ Left of and Right of ‣ Inside ‣ Width and Height ‣ Aligned ‣ Text ‣ CSS Properties ‣ Centered ‣ Absent ‣ Visible ‣ Contains ‣ On ‣ Component ‣ Count ‣ Color scheme ‣ Image
  • 9. WIE? JUNIT ▸ Vorteile wie z.B. Einbindung in Jenkins CI ▸ bekannt bei den Frontend Entwicklern ▸ Shake Hands zwischen UX und UI
  • 10. WIE? SELENIUM ▸ Driver als Plugins für verschiedene Browser ▸ Auflösungen für Responsive Tests ▸ benötigt um die Website funktional zu steuern -> Navigation und Inputs befüllen
  • 11. WIE? GALEN ▸ das eigentliche Framework zum visuellen Test ▸ grafische Auswertung
  • 12. TEXT VORTEILE ▸ fortlaufende Wiederholung von Testfällen, d.h. Ausschluss von Fehlerquellen bei iterativer Entwicklung ▸ Tests können bereits parallel zur Gestaltungslösung entwickelt werden ▸ Kostensenkung durch Einsparung für manuelle Reviews
  • 13. TEXT NACHTEILE ▸ IDs in der Website bzw. den html-Tags ▸ gewisses Maß an Programmierkenntnisse ▸ Pflege der Tests
  • 14. DEMO
  • 15. TEXT LINKS UND QUELLEN: 1. http://galenframework.com 2. http://docs.seleniumhq.org 3. http://junit.org/junit4/ 4. https://github.com/hypery2k/galen_samples
  • 16. THANK YOU FOR THE FISH Douglas Adams TEXT