The document discusses accessibility (a11y) considerations for design systems. It begins by introducing Mercari and its goals of conducting research and development to benefit society. It then discusses why accessibility is important to ensure products can be used by all, highlighting the large numbers of people with disabilities or situational limitations. The document provides examples of accessibility principles like ensuring content is perceivable through proper color contrast and text sizing, as well as being operable through keyboard navigation and touch target sizes. It emphasizes the importance of consistent, predictable and understandable interfaces. The summary concludes by noting the document discusses testing for accessibility and going beyond minimum standards to be as inclusive as possible.
App Publishing for Museums - iPhone, iPad and beyondCogapp
What is happening in the world of app publishing for iPhone, iPad and other platforms ? And what does this mean for museums ? What are the opportunities for museums and other arts organisations created by the app publishing revolution and how can we take advantage ?
Communication Design for the Mobile ExperienceDavid Drucker
Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.
This “white paper” slide deck discusses the critical issue in mobile device design relating to the increasing clutter on touchscreen displays from large numbers of icons, pop-up qwerty keyboards, app command bars and menus, etc. It then proposes a solution: the NeoKeys mixed media keypad.
App Publishing for Museums - iPhone, iPad and beyondCogapp
What is happening in the world of app publishing for iPhone, iPad and other platforms ? And what does this mean for museums ? What are the opportunities for museums and other arts organisations created by the app publishing revolution and how can we take advantage ?
Communication Design for the Mobile ExperienceDavid Drucker
Presented to the Vancouver Chapter of the Society for Technical Communication at their May 2011 meeting. This is a discussion of issues, and strategies for creating usable, navigable, relevant content for mobile computing devices like smartphones. Included many examples and a case study.
This “white paper” slide deck discusses the critical issue in mobile device design relating to the increasing clutter on touchscreen displays from large numbers of icons, pop-up qwerty keyboards, app command bars and menus, etc. It then proposes a solution: the NeoKeys mixed media keypad.
Performance Optimisation For Web & Mobileformfunction
Short overview on performance optimisation for web and mobile. Focus on front-end optimisation which is ±90% of most performance related consideration. Put together for conference in July 2009. Apologies to anyone referenced but not credited. Will happily do so on request!
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
Presenting the design and UX paradigms when designing for Windows 8. The presentation is focused around the 5 design principles from the Microsoft design guidelines for Windows 8 applications.
The presentation was performed during the Microsoft TechDays 2013 in Helsinki, Finland by Markus Jönsson & Arturs Polis.
John Slatin AccessU presentation: UX-Driven & Inclusive Data Visualizations, May 18, 2017 by Michelle Michael
Contact Michelle for a transcript: https://www.linkedin.com/in/MichelleRMichael
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
Performance Optimisation For Web & Mobileformfunction
Short overview on performance optimisation for web and mobile. Focus on front-end optimisation which is ±90% of most performance related consideration. Put together for conference in July 2009. Apologies to anyone referenced but not credited. Will happily do so on request!
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
Presenting the design and UX paradigms when designing for Windows 8. The presentation is focused around the 5 design principles from the Microsoft design guidelines for Windows 8 applications.
The presentation was performed during the Microsoft TechDays 2013 in Helsinki, Finland by Markus Jönsson & Arturs Polis.
John Slatin AccessU presentation: UX-Driven & Inclusive Data Visualizations, May 18, 2017 by Michelle Michael
Contact Michelle for a transcript: https://www.linkedin.com/in/MichelleRMichael
There is certain topic discussed in every company: communication between departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and maybe share some Front End knowledge with them too.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
2. Introduction
Countries i have lived: Vietnam, US, Singapore, Japan
Before 10: sewing, drawing, crafting dumb devices, very good at
mathematics
Before 20: studying law, still drawing and crafting dumb devices
21 ~ now: made games, made e-commerce systems (Amazon,
Diesel, Marc Jacobs, Michael Kors, Ray-Ban etc.). Now with Mercari.
Still pushing pixels & liking dumb devices
I like visual & interface design. I code sometimes.
4. What Is Mercari?
The Mercari app is a C2C marketplace where individuals can easily sell used items. Mercari offers a unique customer
experience, with a transaction environment that uses the payments Mercari holds in escrow, and simple and
affordable shipping options.
5. By the Numbers (JP/Full Year)
232
346.8
GMV¹
490.2B
In: billion JPY
FY
06/2017
FY
06/2018
21.2
33.4
Net Sales
46.2B
In: billion JPY
FY
06/2017
FY
06/2018
8.45
10.75
MAU²
13.57M
In: Million
people
FY
06/2017
FY
06/2018
Source: Internal documents, from FY2018.6 Presentation Material
1. GMV after cancellation
2. Monthly Active Users in June. Number of registered users that used our app in the month
490.2
FY
06/2019
46.2
FY
06/2019
13.57
FY
06/2019
6. Mercari’s Strengths Fun & Engaging
App use time on par with that of social media
Source: Nielsen Digital (January 2018)
*Nielsen’s data is based only on mobile app usage and does not include PC browser use. Average monthly usage time for unique users in January 2018. Frill and Rakuma merged in February 2018.
8. My current duty
mercari R4D is a research and development organization of Mercari, Inc. established in December 2017. Our
goal is to conduct speedy research and development, and to implement them within society.
10. Mercari Japan
Help guide UI
Adding keyword search form
with auto-complete
Changing to drop-down menu
Adding web / desktop version
Customer support chatbot
11. Mercari Transaction Checker Tool
Material-UI React Components App-like desktop dashboard Keyboard accessible, high color contrast
12. Design System
By the people, for the people
Not just UI components
(this is old)
15. UI Elements
Atomic Design is a popular
methodology with 5 component
stages.
Follow the fundamentals, also
customize to fit your team.
Look for “Atomic Design” by
Brad Frost
16. A simple example
Letter “M” can look different and sound different on different browsers.
Design system means working with small parts to create pattern.
Ethan Marcotte - The World-Wide Work https://newadventuresconf.com/2019/coverage/ethan/
19. Why a11y?
To make better choices for your users. More and more
people of all abilities/economies are having access to the
internet & smartphones.
Helps us focus on what really matters -> we will be able to
simplify things
We are all temporarily abled
20. Accessibility:
Live Caption
Live, on-device captions for
any video you watch on your
Android device, coming later
this year with Android Q
Use cases: people with
hearing difficulty, talking on a
phone with noisy background,
etc.
23. Solve one,
benefit others
Situational
limitation
A solution can scale to
broader audiences
https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf
24. “In Vietnam, the survey found that over 7 per
cent of the population aged 2 years and older,
– around 6.2 million, have a disability but an
additional 13 per cent - nearly 12 million, live in
a household with a person with a disability.”
“Asia is the largest growing market for
smartphones.”
“30% of users in India search primarily using
voice.”
https://www.unicef.org/vietnam/press-releases/launch-key-findings-viet-nams-first-large-scale-national-survey-people-disabilities
26. Perceivable Color & Contrast
Web Content
Accessibility
Guidelines (WCAG) 2.1
285 million people
who are visually
impaired around
the world
https://www.butterfly.com.au/blog/design/heres-why-you-need-a-wcag-friendly-digital-design-system
A (minimal): Low
AA (mid): standard
AAA (highest)
28. Working with Dark Mode
(L) Don’t:
High contrast accent
blue color
Bold font on bold font
on blackest black
background #000 can
hurt the eyes (especially
Japanese font has
more strokes).
(iOS new dark mode
mail app)
® Do:
Dark grey background
Resilient blue as accent
color
Only uses bold text
when needed
(Slack dark mode)
29. Perceivable Text size and audio controls
Android iOS (photo: dev discussion in Mercari)
30. Operable Keyboard accessible, Navigation through things
Mercari Transaction Checker Tool: navigation through keyboard, error tolerant, focus oder, used
daily by non-dev employees.
31. Operable Touch target sizing
Simple principle: Make your targets big so that they are easy for the users to tap.
Apple’s Human Interface Guidelines: minimum 44px
Google’s Material Design: minimum 48px
Microsoft’s Windows Phone UI Design & Interaction Guide: recommended 34px
33. Understandable Predictable & consistent
Labelling: screen readers can render to explain the meaning of UI elements
Keyword: screen reader as “assistive technology”
34. Robust “Everything works”
Some are slower, some are faster to adopt new technologies. But everyone is allowed to choose
their own method to access the internet content.
Clean, standard code that helps assistive technologies react correctly.
35. A11y is not difficult. One bite at a
time. Start with...
Focus on user, not the technology
36. The repository of publicly available design systems and pattern libraries.
Contrast Analysis & Accessibility guidelines ready-systems are some good
references (with Material Design too)
‘https://adele.uxpin.com/’
37. Check the contrast ratio
The most common accessibility failure. Golden number 4:5:1 or at least meet the
AA standard
Colorable tool
https://colorable.jxnblk.com/
38. Clean code & robust content
68% of homepages are missing alternative text/image.
Lighthouse tool for Chrome
39. The web components problem:
- No focus styles
- Lack of keyboard access
- Poor contrast, font size
- Inability to zoom
- No screen reader (assistive technology support)
- Autoplaying motion
- Cryptic, unlabeled icons
- No captions/alt/descriptions
40. Testing
+ Manual testing: Interact with your app using Android/iOS
accessibility services.
+ Testing with analysis tools: Use tools to discover opportunities to
improve your app's accessibility.
+ Automated testing: Turn on accessibility testing in testing library.
+ User testing: Get feedback from real people who interact with your app.
42. Run screen reader on your device
Accessibility Scanner identifies aspects that can be improved for your app’s users
43. Any product, that doesn’t fulfill all the standards regarding
accessibility has the power to do harm and exclude people
Design has power to improve inequality for
internet users.
45. Go beyond & do not stay average
Devices are getting more affordable.
Communication technology and designing for the extreme can develop better
solutions, and make a good product, not just to do good.
Let’s include as many people as possible.
