Building Accessible Apps and Barclays Banking App March 2015 final

2,636 views

Published on

How does building an accessible app differ from building for the desktop

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,636
On SlideShare
0
From Embeds
0
Number of Embeds
1,383
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Mark to give overview
  • Mark introduces each person and asks them to say what their role is
    Need picture of Klara and poss updated one of Paul
  • Mark
    We work with some of the biggest names in global business, delivering world class services.
    They use us because they are clear about the business case
  • Robin – explaining how accessibility is now a mobile issue – review in relation to differences and similarities to desktop
  • Paul explains recent history ad how accessibility has been adopted as a core business value
    Plus any related activity eg digital eagles
    Banking channels changing and link to branch
    Paul explains how mobile banking services fit into the overall business of the bank
    Eg consumer-facing, part of evolution of customer expectations, multiple countries?
    With one or two details to help paint a picture eg numbers of users, etc
    + chief concerns with this sort of project eg security, marketing, etc
  • Klara
    explains how mobile banking services fit into the overall business of the bank
    Eg consumer-facing, part of evolution of customer expectations, multiple countries?
    With one or two details to help paint a picture eg numbers of users, etc
    + chief concerns with this sort of project eg security, marketing, etc
  • Mark to introduce Klara
    Joe
    Klara to include:
    - Talk about what I do – how important customers are to me and to the success of my work (if you don’t know the customer and shape a proposition to their needs, the product or feature won’t be successful)
    - Talk about how I got involved (team had been working on accessibility but needed business support to elevate topic
    - Talk about how inclusive design complements my job (always focused on customer but adds dimension which helps us deliver even better products), all customers come first and benefit of designing inclusive is that it doesn’t just benefit a customer with impairment, it is beneficial to all customers
    - Talk about satisfaction of supporting this activity when meeting with customers who truly benefit from accessibility enhancements at the usability testing sessions with AbilityNet
  • Mark to introduce Klara
    Joe
    Klara to include:
    - Talk about what I do – how important customers are to me and to the success of my work (if you don’t know the customer and shape a proposition to their needs, the product or feature won’t be successful)
    - Talk about how I got involved (team had been working on accessibility but needed business support to elevate topic
    - Talk about how inclusive design complements my job (always focused on customer but adds dimension which helps us deliver even better products), all customers come first and benefit of designing inclusive is that it doesn’t just benefit a customer with impairment, it is beneficial to all customers
    - Talk about satisfaction of supporting this activity when meeting with customers who truly benefit from accessibility enhancements at the usability testing sessions with AbilityNet
  • Joe talks about types of testing
  • Joe
    Here is a page from the registration process. Note that there is a visual label in place on the left hand ‘before’ screenshot. Once the user has input their data, the label is overwritten.
    When reading back through the form as a screenreader user, the input fields were announced using their contents. This means that a field on the left announced as “Text input: Sort code” was announced as “Text input: 0-16-56” after the user had entered their data.
    Providing hidden labels meant that these fields were announced correctly for screenreader users regardless of their contents, so in the right hand screenshot the sort code field would now be announced as “Text input: sort code: 20-16-56”.
    Note that labels within the app have separate text labels, and the longer term plan is to extend this to the registration process for consistency.
  • Joe has loads of screen shots
  • Joe  
    The menu behaviour was critical for screenreader users. Whilst sighted users can see the menu slide out from the left of the screen and easily interact with it, it is important for screenreader users to use this component.
    Button label changed from Open menu to Close menu depending on the menu state.
    Managing the focus within the menu e.g. setting the focus in their once it was opened
    Progressing the focus back to the close button after the end of the menu
  • Klara to describe her own learning
    Inclusive design helps every customer
    Regular reviews throughout project rather than bolted on
    Bringing the standards to life within the team
    E.g. need to embed this in the details of internal policies egg UI guidelines
    + Personas now include disabilities
    Senior commitment to this approach with all projects
    iOS version accredited but still difficult with Android
  • Paul
    Mark to ask Paul about benefits to Barclays and lessons being learned in Barclays about adopting accessibility
  • Mark to manage this and ask specific people to respond
  • Mark will sum up and say thank you
  • Building Accessible Apps and Barclays Banking App March 2015 final

    1. 1. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Building Accessible Apps Barclays Mobile Banking Case Study AbilityNet Accessibility Webinar Thursday 19 March 2015
    2. 2. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Building Accessible Apps Understanding Accessibility and Apps Barclays and the business case for accessibility Refreshing Mobile Banking App – the project Testing - what we did and what we found Issues encountered and how we dealt with them Lessons learned
    3. 3. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Welcome Head of Digital Inclusion Robin Christopherson AbilityNet Klara Wilhelm Senior Propositions Manager, Barclays Joe Chidzik Senior Accessibility & Usability Consultant AbilityNet Paul Smyth Head of IT Accessibility Barclays
    4. 4. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars • Workplace Services • Student Services • Accessibility Services • Free IT Support for Disabled People • My Computer My Way • Tech4Good Awards AbilityNet Adapting Technology. Changing Lives.
    5. 5. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Accessibility Goes Mobile Increasing part of AbilityNet’s work Web-based Apps vs Native Apps Accessibility concerns across all platforms Specific concerns in each major platform Strong link to usability Same basic approach – include accessibility as early as possible
    6. 6. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Online & Mobile banking Telephone banking Through innovation Branch banking Barclays and Accessibility
    7. 7. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Barclays and Mobile Banking Late to market with our mobile offering – our competitors ahead of us… But room to innovate through customer experience •3.8m customers •1.5m unique logins per day •4 platforms - iOS, Android, Windows and Blackberry Mobile presence very important - nearly half of Barclays customers go straight to mobile
    8. 8. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Achieving Accreditation • Embedded in re-design initiative • AbilityNet Accreditation set as a goal for the project • Made accessibility a critical part of the project • Inclusive design benefits all customers • Accessibility consultants part of the core team • Took part in weekly design reviews from as early as concept stage • Regular user testing with a range of customers • AbilityNet regular onsite visits supporting design & development team
    9. 9. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Project Timeline June 2014 • Fed in hot issues and learning from previous accessibility reviews • Weekly design show and tell with core team including accessibility consultants • Iterative approach with regular user testing • Wireframes annotated with accessibility hints • Build accessibility reviews November Sign off December App store submission January AbilityNet accreditation
    10. 10. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars What we did differently Accessibility Review BEFORE Too late to impact design significantly, only allows for retrospective changes Ongoing Accessibility Reviews NOW Part of core project, informed inclusive design
    11. 11. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Testing Apps Constraints with testing code because it’s an app Typical testing processes for apps •Voiceover identify buttons, labels. Etc •Visual check layout, colours, instructions, evaluation against standards •Disabled user testing Tested this app 3x using special build that didn’t need log in
    12. 12. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Issues raised in testing Form field labelling Ensuring input fields are well labelled is particularly useful for screenreader users
    13. 13. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Issues raised in testing Passcode entry Custom keypad 5 separate text inputs for a 5 digit code No feedback for screenreader users •which input field they were on •how many digits had been entered. Solution: •Accessibility hints added so that the user heard: “Digit 3 of 5 entered”
    14. 14. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Issues raised in testing Menu behaviour Menu behaviour is critical for screenreader users
    15. 15. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Lessons learned • Making accessibility part of core project adds value to usability for all customers • Include accessibility in day to day working tools & documentation • Don’t rely on separate site and guidelines - Personas with impairments - Accessibility annotations part of UI guidelines - Design patterns for development teams • Accessibility considerations make great design for all customers • If included as part of design phase, can avoid costly retrospective enhancements
    16. 16. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Benefits of this approach • To customers and their customer feedback • Increased knowledge and skills of the team members • Enhanced the contribution of in-house teams and consultants • Raised awareness internally in relation to other mobile apps • Design patterns embedded in our own tools
    17. 17. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Questions • Please use the questions box on the gotomeeting panel
    18. 18. AbilityNet Accessibility Services www.abilitynet.org.uk/webinars Contact Us Accessibility services sales@abilitynet.org.uk +44 (0)1926 465 247 @abilitynet Next AbilityNet Webinars Controlling your computer with your voice, 1pm, 14 April 2015 UX and Accessibility, 1pm, 23 April 2015 Sign up at www.abilitynet.org.uk/webinars

    ×