alan-turing-institute / AutisticaCitizenScience

Project management and resource repository for the Autistica/Turing Citizen Science project
https://alan-turing-institute.github.io/AutisticaCitizenScience
29 stars 20 forks source link

Experience Page Improvements - Accessibility #355

Closed ghost closed 2 years ago

ghost commented 4 years ago

As a Fujitsu developer

I would like A wireframe design and justification that showcases a improvement to the experience page with the integration of voice to text accessibility panel - and changes to make the form more accessible. Addition of text being complemented by visuals.

Make talk about any experience in your life bolder - highlight it. Add more visuals to help the core Autistic User for Where, What, How - face imaging a situation - thinking face next to it for example reference PECS or suitable icons.

Create a hover on the Submit Media (Upload) button and make it more interactive. Make the navy used lighter - ref royal navy, provide a series of colour swatches for royal navy for review.

Because... I would like show to the wider community a Fujitsu design concept for the platform.

Acceptance criteria Axure updated with the final UI design for the component
 A picture/screenshot image of the final UI design of the component held within Axure
 Justification of the component design available in Github repository as an .md file

Other relevant documents: Values 
Ways of working 
Data management

Review owner: Internal development team
 Alan Turing

User Feedback Labels: Enter Experience Page Interface Design Colour Upload

katoss commented 4 years ago

Original user testing feedback

From https://github.com/alan-turing-institute/AutisticaCitizenScience/blob/master/community-recommendations/user-tests/sprint-6-feedback/summary-sprint6-feedback.md

The instruction “Talk about any experience in your daily life”:

Interface/Design

→ Apart from some smaller design issues regarding the interface, visuals or voice should be added to make the form easier accessible.

ghost commented 4 years ago

Experience Page Updates

1.Enter Negative Experience Highlighted Descriptive Sub Heading Coloured Sub Headings, Icons and Tag Type within the What (Enter your experience section) as drop down including Setting and Sensory Mapping Type. Upload & Non-Verbal features within the access panel to be considered to make the design cleaner. To be wireframed... https://k6ej5a.axshare.com/#g=1&p=3-enter-experience-colour-icons-tag&view=b

1

2.Enter Negative Experience Highlighted Descriptive Sub Heading Coloured Sub Headings, Icons and Tag Type bottom right. https://k6ej5a.axshare.com/#g=1&p=3-enter-experience-negative-highlighted-tag&view=b

2

3.Enter Experience Colour Sub Headings, Icons with Tags Categories within the What (Enter your experience section) https://k6ej5a.axshare.com/#g=1&p=3-enter-experience-highlighted-tag&view=b

3

4.Enter Experience Speech Bubble Sub Headings, Heading Tab Emoji Icons with Tags Setting / Sensory Mapping Drop Down within What (Enter Experience) Section. https://k6ej5a.axshare.com/#g=1&p=3-enter-experience-bubbles&view=b

4
ghost commented 4 years ago

Experience Page Justifications - Review

Integration of voice to text accessibility panel via access icon as shown

Consideration to add Upload and Non-Verbal to the access panel

Form accessibility improved by adding text complemented by visuals - suitable icons to help the core Autistic User

Make talk about any experience in your life bolder by highlighting it as wireframe

Data Storage Icon which was not liked replaced with Thinking icon option 1 and Person thinking option 2 with person and bubble icon

Icons for negative experience and how would you have wished for the experience to be different added to given section tabs as feedback number of versions for review

Icon consider to represent both negative and positive experience half smiley / half unhappy face

Icons explored and also added for: Where, What, How - face imaging a situation explored PECS and previous Mulberry sets in favour of chosen generic icons. Speech bubbles with section title also explored as demos.

In ref to use of dark blue named navy - request to make the navy used lighter - as ref to royal navy colour swatch and other series of blue colour swatches explored and shown as link https://k6ej5a.axshare.com/#g=1&p=navy-blue - gain community feedback.

Create a hover on the Submit Media (Upload) and non-verbal buttons with a suitable icon and make it more interactive, drop down shadow hoover and click interactivity added to these two buttons.