bringing ux to the backend

BRINGING UX TO THE BACKEND

Elizabeth Chesters & London Java Community

@EChesters

ABOUT ME

@EChesters

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?

WHAT IS UX?What is this buzzword you speak of?

What is UX?

EXPERIENCE IS FUNDAMENTAL TO EVERYTHING

IS UX FOR DEVELOPERS?

Isn’t there a role for this?


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

THE EXPERIENCE OF A PRODUCT IS FORMED BY THE WHOLE TEAM


WHICH BITS ARE UX?

The industry doesn’t know what it is

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

http://www.mcrinc.com/Documents/Newsletters/201110_why_web_performance_matters.pdf

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

http://www.worldbank.org/en/topic/disability/overview

http://www.dlf.org.uk/content/key-facts

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

HOW DOES JAVA FIT IN?

Say whaaaat?


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

http://docs.oracle.com/javase/7/docs/api/javax/accessibility/package-use.html


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/

http://openjdk.java.net/groups/i18n/


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

HOW DOES HTML FIT IN?

What is this thing that we must use?


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


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.


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


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

HOW DO WE TEST THIS?

It’s a one Eme thing right?

RULE #1: IT’S NOT A ONE TIME CONCERN



PA11Y


A11Y


TALK TO PEOPLE

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

THANK YOU

¡Gracias!

Obrigado!

Merci!

Dank u!

Dankeschön!

Tack!

Dakujem!

Mulțumesc!

Dziękuję!

bringing ux to the backend

Software