SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
Der Weg zu barrierefreien
 Apps durch UX Design
       Ein Erfahrungsbericht




                               1
Über mich




 Frank Wippich
 
    
 Wirtschaftsingenieur / MBA und 10 Jahre Erfahrung in
 F&E von Technologieprodukten

                                                        2
Über Blindsight




1996   Gründung der Blindsight Corporation, USA
       Ziel: Forschung und Entwicklung von Text und Objekterkennung zur
       Unterstützung von Blinden und Sehbehinderten


2012   Expansion nach Europa mit Gründung der Blindsight Europe GmbH in Hamburg,
       Deutschland
       Markteinführung verschiedener Produkte - Text Detektiv (iPhone App), Perkolator
       (Brailletrainingssoftware MacOS), Smart Magnifier (iPad)




  Building Software to Help People Read
                                                                                         3
“print is dead”

• ... vielleicht doch
  noch nicht ganz!




                        4
Die Probleme mit gedruckten Text

• Sehbehinderungen         • Sprache




                                       5
Die Lösung - Texterkennung

• das Smartphone oder
  das Tablet als
  Textdetektor




                        • sekundenschnell
                        • korrekte Ergebnisse
                        • barrierefrei

                                                6
Ausgangslage

• Patentierte Texterkennung

• iOS als die Plattform der Wahl

• Erste Erkenntnisse aus Interviews mit Lead Usern
   – Unabhängigkeit
      • Orientierung
      • Lesen von Text in der Umwelt


   – Informationen suchen und abrufen von unterwegs



           Wie baut man daraus eine
           App die Nutzer begeistert?
                                                      7
UX Design Struktur

1                                2
                                       Information
     Usability
                                       Architecture
        Was?
        Wo?                          Aufnahme, Verarbeitung und
        Wie?                            Präsentation von Text
                                           Hilfestellungen
                        4




               User Experience
                       Inhalt
                     Benutzung
                      Context
               3
                                                                  8
Der erste Prototype


               • Orientierung der App in Hochformat
               • Texterkennungsvibration + Shake = Textausgabe
               • Einzelresultate
               • Einführungen wurden mündlich erteilt




                                                                 9
Information Architecture
  Ausgangshypothese                              Erkenntnisse
 – Simpler Einführungsscreen               – Tutorium + simpler
                                             Einführungsscreen

 – Notifikation wenn Text erkannt ist       – Notifikation wenn Text erkannt ist

 – Präsentation des Textes in einzelnen    – Präsentation des Textes gesamt
   Zeilen und bei Bedarf gesamter Text       und bei Bedarf in einzelnen Zeilen

 – Interaktion mit Entwicklern / Support   – Interaktion mit Entwicklern /
                                             Support

 – Tipps zur Benutzung                     – Tipps zur Benutzung

                                           – Bearbeitung von Text

                                           – Speicherung, Zugriff auf und
                                             Weiterverarbeitung von Scans
                                                                                 10
Usability
  Ursprungsfragen                        Erkenntnisse
   – Welcher Text wird           – Dokumente, Menüs, Flyer, Briefe,
     gelesen?                      Türschilder, Computernachrichten

   – Wo wird Texterkennung       – Unterwegs und zur Durchführung
     am meisten benötigt?          des schnellen Scans

   – Wie benutzen Blinde das     – Mit Referenzpunkten und viel
     Smartphone, die Kamera?       Übung

   – Wie navigieren Blinde das   – Standard VoiceOver Funktionen:
     Smartphone?                    – mit einfachen Swipes und
                                       Buttons
                                    – Hochformat
                                    – Ausrichtungssperre aktiv
                                                                  11
User Experience
  Ausgangshypothese                       Erkenntnisse

  – Minimum Button Clicks        – Besser mehr Button clicks als
                                   alternative Eingabemethoden
                                   (Swipe, Shake, etc.)

  – Informationen geben ob       – Informationen geben zu:
      • Text gefunden wurde          •  Text gefunden / nicht
      • Text übersetzt wird             gefunden und übersetzt wird
      • Fehler beim übersetzen
        enthalten sind


  – Textübersetzung in nicht     – Zeittoleranz steigt wenn gleich
    mehr als 2 Sekunden            der ganze Text übersetzt wird

  – Hochformat                   – Querformat
                                                                      12
Resultat

                                                                This is just totally awesome especially
                                                                for the blind. I am totally independent
                                                                now for doing mail and small stuff
                                                                App Store Review - 5 Stars




                                                                           Klasse Ergebnisse! Für Blinde sehr zu
                                                                           empfehlen! App Store Review - 5 Stars
  I’ve shown many [blind] students
  how to use it, and they all walk away
  pretty impressed
  Rachel Feinberg, teacher of the blind and visually impaired
                                                                                       Great for      scanning on the fly
                                                                                             App Store Review - 4 Stars




                               Best     OCR app                  on the App Store. Having tried several OCR
                               apps, this one is the most accurate and by far the fastest
                                App Store Review - 5 Stars

                                                                                                                          13
Methoden


     Usability                              Information
       Interviews
                                            Architecture
     Observationen
                                                   Interviews
   Mockups, A/B Testing
                                                    Mockups




                   User Experience
                      Storyboarding / Mockups
                    Konkurenz- und ähnliche Apps
                       Szenarien, A/B Testing

                                                                14
Was bedeutet das für UX - Design (1/2)

• Technisch ist eine barrierefreie UX kein Hexenwerk mehr

• Touchscreens sind kein Gegensatz mehr zum barrierefreien
  Design - eher im Gegenteil
   – Smartphones und Tablets bieten grosses Potential insbesondere für
     Menschen mit Behinderung und die alternde Bevölkerung


• Standardkonventionen helfen bei einer intuitiven
  Benutzeroberfläche - müssen aber auch manchmal
  gebrochen werden.




                                                                         15
Was bedeutet das für UX - Design (2/2)

• Kontextverständis ist entscheidend - d.h. Selbsttests,
  Beobachtungen, Interviews...

• Intensives Einbinden der Nutzergruppen in den
  Entwicklungsprozess

• non-visuelle UX wird durch sequenzielle Abläufe bestimmt,
  die die visuelle, synchrone UX positiv beeinflussen.




                                                              16
Hypothese




         Barrierefreies UX Design als
Innovationstreiber für alternative, non-visuelle
  Interaktionsmethoden, wie Haptik, Audio,
               Sprache, Gestik
                                              17
In eigener Sache

           Text Detektiv                            Smart Magnifier
   Barrierefreies scannen von Text in   Erkennen, Filtern und Vergrößern von Text
     Dokumenten, Schildern oder              mit dem iPad - für ein einfaches
 Broschüren auf iOS Geräten - ideal für     Lupenerlebnis ohne Zusatzgeräte
      den schnellen Infoüberblick




             Preis: €8,99                            Preis: €179,99


                                                                                18
Kontakt




 	   	     	       	   www.de.blindsight.com



 Frank Wippich 
   
   email: fwippich@blindsight.com
 
   
     
       
   twitter: @fwippich

                                                        19
Vielen Dank




                         Software to Help People Read!
Blindsight Europe GmbH   Lerchenstraße 28a c/o betahaus 22767 Hamburg   http://de.blindsight.com   info@blindsight.com   twitter: @blindsightDE

                                                                                                                                           20

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (10)

Für Groß und Klein - Eine Diskussion über Responsive Design
Für Groß und Klein - Eine Diskussion über Responsive DesignFür Groß und Klein - Eine Diskussion über Responsive Design
Für Groß und Klein - Eine Diskussion über Responsive Design
 
Branded Interaction Design – Digitale Markenerlebnisse planen und gestalten. ...
Branded Interaction Design – Digitale Markenerlebnisse planen und gestalten. ...Branded Interaction Design – Digitale Markenerlebnisse planen und gestalten. ...
Branded Interaction Design – Digitale Markenerlebnisse planen und gestalten. ...
 
Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist. Branded Interaction Design ... oder warum Usability nur der Anfang ist.
Branded Interaction Design ... oder warum Usability nur der Anfang ist.
 
UX Erklaert 01 / UX Overview 01
UX Erklaert 01 / UX Overview 01UX Erklaert 01 / UX Overview 01
UX Erklaert 01 / UX Overview 01
 
ux kundenworkshop
ux kundenworkshop ux kundenworkshop
ux kundenworkshop
 
Digitale Markenerlebnisse planen und gestalten
Digitale Markenerlebnisse planen und gestaltenDigitale Markenerlebnisse planen und gestalten
Digitale Markenerlebnisse planen und gestalten
 
Branded Interactions – Digital Planning (APG Workshop)
Branded Interactions – Digital Planning (APG Workshop)Branded Interactions – Digital Planning (APG Workshop)
Branded Interactions – Digital Planning (APG Workshop)
 
design thinking - ein überblick
design thinking - ein überblickdesign thinking - ein überblick
design thinking - ein überblick
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 

Ähnlich wie UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design

Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designer
bowstreet
 
Abap course chapter 2 tools in the development environment
Abap course   chapter 2 tools in the development environmentAbap course   chapter 2 tools in the development environment
Abap course chapter 2 tools in the development environment
Milind Patil
 
Paducation_Lehrerfortbildung _ Struktur und Modul 1 von 4
Paducation_Lehrerfortbildung  _ Struktur und Modul 1 von 4Paducation_Lehrerfortbildung  _ Struktur und Modul 1 von 4
Paducation_Lehrerfortbildung _ Struktur und Modul 1 von 4
Ingo15
 
Einführung in Paper Prototyping
Einführung in Paper PrototypingEinführung in Paper Prototyping
Einführung in Paper Prototyping
Tobias Adam
 
NUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #10 - Magazin für Bedienbarkeit und DigitalesNUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
HANDSPIEL GmbH
 
Präsentationstraining PowerPoint Karaoke
Präsentationstraining PowerPoint KaraokePräsentationstraining PowerPoint Karaoke
Präsentationstraining PowerPoint Karaoke
mspgermany
 
Creasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives TestenCreasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives Testen
Creasoft AG
 

Ähnlich wie UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design (20)

Saim Alkan: Texten im Internet
Saim Alkan: Texten im InternetSaim Alkan: Texten im Internet
Saim Alkan: Texten im Internet
 
Mehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger InterfaceMehr Nutzen, Weniger Interface
Mehr Nutzen, Weniger Interface
 
Mobile Apps für Designer
Mobile Apps für DesignerMobile Apps für Designer
Mobile Apps für Designer
 
Abap course chapter 2 tools in the development environment
Abap course   chapter 2 tools in the development environmentAbap course   chapter 2 tools in the development environment
Abap course chapter 2 tools in the development environment
 
German Web Usability Training
German Web Usability TrainingGerman Web Usability Training
German Web Usability Training
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
 
Paducation_Lehrerfortbildung _ Struktur und Modul 1 von 4
Paducation_Lehrerfortbildung  _ Struktur und Modul 1 von 4Paducation_Lehrerfortbildung  _ Struktur und Modul 1 von 4
Paducation_Lehrerfortbildung _ Struktur und Modul 1 von 4
 
Einführung in Paper Prototyping
Einführung in Paper PrototypingEinführung in Paper Prototyping
Einführung in Paper Prototyping
 
NUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #10 - Magazin für Bedienbarkeit und DigitalesNUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
NUTZER:effekt #10 - Magazin für Bedienbarkeit und Digitales
 
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid BenutzerzentraleLow Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
Low Budget Usability Testing Webtreff Konstanz Patric Schmid Benutzerzentrale
 
Präsentationstraining PowerPoint Karaoke
Präsentationstraining PowerPoint KaraokePräsentationstraining PowerPoint Karaoke
Präsentationstraining PowerPoint Karaoke
 
Apps für Technische Redakteure
Apps für Technische RedakteureApps für Technische Redakteure
Apps für Technische Redakteure
 
Small usability in a box
Small usability in a boxSmall usability in a box
Small usability in a box
 
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...eparo - Service Design Immonet iPad-App  (Vortrag iico Konferenz 2013 - Rolf ...
eparo - Service Design Immonet iPad-App (Vortrag iico Konferenz 2013 - Rolf ...
 
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
Prototyping Conversations | Mit nutzerzentrierten Methoden zum Conversational...
 
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
Mobile Applikationen: Entwicklung, Rollout, Wartung - Tipps und Tricks für di...
 
Creasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives TestenCreasoft c-Day 2011 - Exploratives Testen
Creasoft c-Day 2011 - Exploratives Testen
 
app@school
app@schoolapp@school
app@school
 
Diese iPad Apps wollen wir sehen (Hastenteufel&Sax@next10)
Diese iPad Apps wollen wir sehen (Hastenteufel&Sax@next10)Diese iPad Apps wollen wir sehen (Hastenteufel&Sax@next10)
Diese iPad Apps wollen wir sehen (Hastenteufel&Sax@next10)
 
Google Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-ZertifizierungGoogle Partners, Mobile Websites-Zertifizierung
Google Partners, Mobile Websites-Zertifizierung
 

UxHH Talk - Der Weg zu barrierefreien Apps durch UX Design

  • 1. Der Weg zu barrierefreien Apps durch UX Design Ein Erfahrungsbericht 1
  • 2. Über mich Frank Wippich Wirtschaftsingenieur / MBA und 10 Jahre Erfahrung in F&E von Technologieprodukten 2
  • 3. Über Blindsight 1996 Gründung der Blindsight Corporation, USA Ziel: Forschung und Entwicklung von Text und Objekterkennung zur Unterstützung von Blinden und Sehbehinderten 2012 Expansion nach Europa mit Gründung der Blindsight Europe GmbH in Hamburg, Deutschland Markteinführung verschiedener Produkte - Text Detektiv (iPhone App), Perkolator (Brailletrainingssoftware MacOS), Smart Magnifier (iPad) Building Software to Help People Read 3
  • 4. “print is dead” • ... vielleicht doch noch nicht ganz! 4
  • 5. Die Probleme mit gedruckten Text • Sehbehinderungen • Sprache 5
  • 6. Die Lösung - Texterkennung • das Smartphone oder das Tablet als Textdetektor • sekundenschnell • korrekte Ergebnisse • barrierefrei 6
  • 7. Ausgangslage • Patentierte Texterkennung • iOS als die Plattform der Wahl • Erste Erkenntnisse aus Interviews mit Lead Usern – Unabhängigkeit • Orientierung • Lesen von Text in der Umwelt – Informationen suchen und abrufen von unterwegs Wie baut man daraus eine App die Nutzer begeistert? 7
  • 8. UX Design Struktur 1 2 Information Usability Architecture Was? Wo? Aufnahme, Verarbeitung und Wie? Präsentation von Text Hilfestellungen 4 User Experience Inhalt Benutzung Context 3 8
  • 9. Der erste Prototype • Orientierung der App in Hochformat • Texterkennungsvibration + Shake = Textausgabe • Einzelresultate • Einführungen wurden mündlich erteilt 9
  • 10. Information Architecture Ausgangshypothese Erkenntnisse – Simpler Einführungsscreen – Tutorium + simpler Einführungsscreen – Notifikation wenn Text erkannt ist – Notifikation wenn Text erkannt ist – Präsentation des Textes in einzelnen – Präsentation des Textes gesamt Zeilen und bei Bedarf gesamter Text und bei Bedarf in einzelnen Zeilen – Interaktion mit Entwicklern / Support – Interaktion mit Entwicklern / Support – Tipps zur Benutzung – Tipps zur Benutzung – Bearbeitung von Text – Speicherung, Zugriff auf und Weiterverarbeitung von Scans 10
  • 11. Usability Ursprungsfragen Erkenntnisse – Welcher Text wird – Dokumente, Menüs, Flyer, Briefe, gelesen? Türschilder, Computernachrichten – Wo wird Texterkennung – Unterwegs und zur Durchführung am meisten benötigt? des schnellen Scans – Wie benutzen Blinde das – Mit Referenzpunkten und viel Smartphone, die Kamera? Übung – Wie navigieren Blinde das – Standard VoiceOver Funktionen: Smartphone? – mit einfachen Swipes und Buttons – Hochformat – Ausrichtungssperre aktiv 11
  • 12. User Experience Ausgangshypothese Erkenntnisse – Minimum Button Clicks – Besser mehr Button clicks als alternative Eingabemethoden (Swipe, Shake, etc.) – Informationen geben ob – Informationen geben zu: • Text gefunden wurde • Text gefunden / nicht • Text übersetzt wird gefunden und übersetzt wird • Fehler beim übersetzen enthalten sind – Textübersetzung in nicht – Zeittoleranz steigt wenn gleich mehr als 2 Sekunden der ganze Text übersetzt wird – Hochformat – Querformat 12
  • 13. Resultat This is just totally awesome especially for the blind. I am totally independent now for doing mail and small stuff App Store Review - 5 Stars Klasse Ergebnisse! Für Blinde sehr zu empfehlen! App Store Review - 5 Stars I’ve shown many [blind] students how to use it, and they all walk away pretty impressed Rachel Feinberg, teacher of the blind and visually impaired Great for scanning on the fly App Store Review - 4 Stars Best OCR app on the App Store. Having tried several OCR apps, this one is the most accurate and by far the fastest App Store Review - 5 Stars 13
  • 14. Methoden Usability Information Interviews Architecture Observationen Interviews Mockups, A/B Testing Mockups User Experience Storyboarding / Mockups Konkurenz- und ähnliche Apps Szenarien, A/B Testing 14
  • 15. Was bedeutet das für UX - Design (1/2) • Technisch ist eine barrierefreie UX kein Hexenwerk mehr • Touchscreens sind kein Gegensatz mehr zum barrierefreien Design - eher im Gegenteil – Smartphones und Tablets bieten grosses Potential insbesondere für Menschen mit Behinderung und die alternde Bevölkerung • Standardkonventionen helfen bei einer intuitiven Benutzeroberfläche - müssen aber auch manchmal gebrochen werden. 15
  • 16. Was bedeutet das für UX - Design (2/2) • Kontextverständis ist entscheidend - d.h. Selbsttests, Beobachtungen, Interviews... • Intensives Einbinden der Nutzergruppen in den Entwicklungsprozess • non-visuelle UX wird durch sequenzielle Abläufe bestimmt, die die visuelle, synchrone UX positiv beeinflussen. 16
  • 17. Hypothese Barrierefreies UX Design als Innovationstreiber für alternative, non-visuelle Interaktionsmethoden, wie Haptik, Audio, Sprache, Gestik 17
  • 18. In eigener Sache Text Detektiv Smart Magnifier Barrierefreies scannen von Text in Erkennen, Filtern und Vergrößern von Text Dokumenten, Schildern oder mit dem iPad - für ein einfaches Broschüren auf iOS Geräten - ideal für Lupenerlebnis ohne Zusatzgeräte den schnellen Infoüberblick Preis: €8,99 Preis: €179,99 18
  • 19. Kontakt www.de.blindsight.com Frank Wippich email: fwippich@blindsight.com twitter: @fwippich 19
  • 20. Vielen Dank Software to Help People Read! Blindsight Europe GmbH Lerchenstraße 28a c/o betahaus 22767 Hamburg http://de.blindsight.com info@blindsight.com twitter: @blindsightDE 20