Bringing UX to the Backend
0 likes625 views
The document discusses the importance of user experience (UX) in backend development, emphasizing that the quality of code impacts product performance and maintainability. It highlights critical aspects of UX such as accessibility, internationalization, and efficient coding practices across different programming languages, particularly focusing on Java and HTML. Ultimately, it underscores the necessity of continuous testing and user feedback to enhance the overall digital experience.
Bringing UX to the Backend
- 1. BRINGING UX TO THE BACKEND Elizabeth Chesters & London Java Community @EChesters
- 3. 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?
- 4. WHAT IS UX? What is this buzzword you speak of?
- 6. What is UX? EXPERIENCE IS FUNDAMENTAL TO EVERYTHING
- 7. IS UX FOR DEVELOPERS? Isn’t there a role for this?
- 8. 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
- 9. THE EXPERIENCE OF A PRODUCT IS FORMED BY THE WHOLE TEAM IS UX FOR DEVELOPERS?
- 10. WHICH BITS ARE UX? The industry doesn’t know what it is
- 11. 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
- 12. 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
- 13. 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
- 15. HOW DOES JAVA FIT IN? Say whaaaat?
- 16. HOW DOES JAVA FIT IN? JAVA SWING Java 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
- 17. HOW DOES JAVA FIT IN? JAVA FX JavaFX 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/
- 18. 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
- 19. HOW DOES HTML FIT IN? What is this thing that we must use?
- 20. 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
- 21. 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.
- 22. 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
- 23. 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
- 24. HOW DO WE TEST THIS? It’s a one Eme thing right?
- 25. DEMO
- 26. RULE #1: IT’S NOT A ONE TIME CONCERN HOW DO WE TEST THIS?
- 27. HOW DO WE TEST THIS? PA11Y
- 28. HOW DO WE TEST THIS? PA11Y
- 29. HOW DO WE TEST THIS? A11Y
- 30. HOW DO WE TEST THIS? TALK TO PEOPLE
- 31. 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