bringing ux to the backend
TRANSCRIPT
![Page 1: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/1.jpg)
BRINGING UX TO THE BACKEND
Elizabeth Chesters & London Java Community
@EChesters
![Page 2: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/2.jpg)
ABOUT ME
@EChesters
![Page 3: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/3.jpg)
BRINGING THE UX TO THE BACK-END
▸ The who/what/why of user experience
▸ What that means to us as developers
▸ Explore UX bits ’n’ bobs
▸ Discover what languages offer to help us
▸ How do we test this?
![Page 4: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/4.jpg)
WHAT IS UX?What is this buzzword you speak of?
![Page 5: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/5.jpg)
![Page 6: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/6.jpg)
What is UX?
EXPERIENCE IS FUNDAMENTAL TO EVERYTHING
![Page 7: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/7.jpg)
IS UX FOR DEVELOPERS?
Isn’t there a role for this?
![Page 8: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/8.jpg)
IS UX FOR DEVELOPERS?
UX ISN’T IN MY TITLE
▸ The experience of your product starts in the code
▸ If your code sucks so does your maintainability, the attitude around the code affects the team
▸ The more code quality slips the more things are affected like performance
YOU ALSO USE YOUR OWN PRODUCT
![Page 9: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/9.jpg)
THE EXPERIENCE OF A PRODUCT IS FORMED BY THE WHOLE TEAM
IS UX FOR DEVELOPERS?
![Page 10: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/10.jpg)
WHICH BITS ARE UX?
The industry doesn’t know what it is
![Page 11: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/11.jpg)
WHICH BITS ARE UX?
PERFORMANCE
▸ We are all busier than usual and we multitask more than ever
▸ Studies find that users expect a 2-3 second page load max
▸ After 3 seconds up to 40% of users will drop off
▸ If a site doesn’t look like it works by being too slow, it’s reported that 75% of people will not buy
▸ Google takes page load into consideration in their search algorithm
http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf
![Page 12: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/12.jpg)
WHICH BITS ARE UX?
ACCESSIBILITY
▸ Globally: 15% of people suffer with a disability (~1 billion)
▸ UK: 19% of the working population are disabled (~6.9 million)
▸ The last reason should be a legal obligation
▸ Accessibility has a huge overlap with basic usability
▸ Readability not only affects those with cognitive impairments, it affects your non-native speaking audience
http://www.worldbank.org/en/topic/disability/overview
http://www.dlf.org.uk/content/key-facts
![Page 13: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/13.jpg)
WHICH BITS ARE UX?
INTERNATIONALISATION
▸ We are more global than ever in our software
▸ Layouts need to be flexible for longer languages
▸ Validation needs to be accepting of different formats
▸ In China there are 8 official languages - including Portuguese
▸ London Evening Standard reported 270 nationalities and 300 different languages
![Page 14: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/14.jpg)
![Page 15: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/15.jpg)
HOW DOES JAVA FIT IN?
Say whaaaat?
![Page 16: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/16.jpg)
HOW DOES JAVA FIT IN?
JAVA SWINGJava Swing has an accessibility project which directly affects the experience for screen-readers
All components supporting accessibility must implement the package:
class MyFrame implements Accessible {
textField.getAccessibleContext() .setAccessibleDescription((String) component.getValue());
}
Every component must get its accessible context
accessibleContext();
accessibleRole();
accessibleStateSet();
accessibleText();
…
http://docs.oracle.com/javase/7/docs/api/javax/accessibility/package-use.html
![Page 17: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/17.jpg)
HOW DOES JAVA FIT IN?
JAVA FXJavaFX have accessible components
AccessibleControl:
AccessibleButton
AccessibleCheckBox
AccessibleList
AccessibleListItem
AccessibleMenu
AccessibleRadioButton
AccessibleSlider
There are also internationalisation libraries which take care of things like timezones and currency
http://openjdk.java.net/groups/i18n/
![Page 18: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/18.jpg)
HOW DOES JAVA FIT IN?
ANDROID‣ Android comes with two checklists on accessibility; for developing and testing
‣ Add descriptive text to UI controls in your application using the android:contentDescription attribute
<service android:name=".MyAccessibilityService" android:permission="android.permission.BIND_ACCESSIBILITY_SERVICE"> <intent-filter> <action android:name="android.accessibilityservice.AccessibilityService" /> </intent-filter> . . . </service>
Every component without text must have a description of what it is
<ImageButton android:id=”@+id/add_note_button” android:src=”@drawable/add_note” android:contentDescription=”@string/add_note”/>
An accessibility service to run in the background which handles when AccessibilityEvents are fired
![Page 19: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/19.jpg)
HOW DOES HTML FIT IN?
What is this thing that we must use?
![Page 20: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/20.jpg)
HOW DOES HTML FIT IN?
SEMANTIC STRUCTURE
is ready to go live!
Our service
EXPLODING KITTENS
paragraph
header 1
paragraph
Your content needs to make sense. You cannot always fall back on your CSS
Sometimes it’s changed, sometimes it’s completely removed
This helps in code maintainability and on-boarding
![Page 21: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/21.jpg)
HOW DOES HTML FIT IN?
LANGUAGES
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
<blockquote lang="de"><html lang="en">
Always set the language of the page
If the language changes on the page set the attribute when the language changes
Always set the charset of the page like UTF-8
Die Bienen (Apiformes) sind eine Insektengruppe, in der mehrere Familien der Hautflügler (Hymenoptera) zusammengefasst werden. Umgangssprachlich wird der Begriff Biene meist auf eine einzelne Art, die Westliche Honigbiene (Apis mellifera) reduziert, die wegen ihrer Bedeutung als staatenbildender Honigproduzent.
![Page 22: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/22.jpg)
HOW DOES HTML FIT IN?
REPEATED LINKS
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Repeated links offer nothing but confusion.
Without context, what are you downloading? What are you reading more of? What are you learning?
Read your page out to someone, can they hold a mental model of your page?
READ MORE
READ MORE
![Page 23: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/23.jpg)
HOW DOES HTML FIT IN?
ARIA TAGS
<div role=“banner”>
<h2>My Banner</h2>
</div>
<div role=“main”>
<label for=“email”>Email</label>
<input id=“email” type=“text”>
</div>
NOT TO BE USED LIKE MAGIC FAIRY DUST TO MAKE YOURSELVES FEEL BETTER
Attributes specifically aimed at assistive technologies
Removes ambiguity of what things actually mean to a user, like “X” meaning close
Explicitly highlights what’s decorative and what’s meaningful
Roles, States and properties
![Page 24: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/24.jpg)
HOW DO WE TEST THIS?
It’s a one Eme thing right?
![Page 25: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/25.jpg)
DEMO
![Page 26: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/26.jpg)
RULE #1: IT’S NOT A ONE TIME CONCERN
HOW DO WE TEST THIS?
![Page 27: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/27.jpg)
HOW DO WE TEST THIS?
PA11Y
![Page 28: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/28.jpg)
HOW DO WE TEST THIS?
PA11Y
![Page 29: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/29.jpg)
HOW DO WE TEST THIS?
A11Y
![Page 30: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/30.jpg)
HOW DO WE TEST THIS?
TALK TO PEOPLE
![Page 31: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/31.jpg)
TO SUMMARISE
UX is the experience of a product
Our languages help us to directly influence the experience
There are tools to continuously test
Talk to people
![Page 32: Bringing UX to the Backend](https://reader031.vdocuments.site/reader031/viewer/2022030306/58cfe9251a28ab11578b5247/html5/thumbnails/32.jpg)
THANK YOU
¡Gracias!
Obrigado!
Merci!
Dank u!
Dankeschön!
Tack!
Dakujem!
Mulțumesc!
Dziękuję!