UI5ers Buzz #23: Coding Experiences in UI5 – More than Just Design
The term “user experience” has been omnipresent for the past few years – designers, customers, project managers, everybody uses it and by now nobody wants to hear it anymore. But nevertheless, the Experience of the User still matters in UI development: as it indeed has different effects on crucial situations in life.
So let’s have a look at what this “experience” really means for UI5 developers and which features are already part of the UI5 framework, just waiting to be set free in your app.
1. Fast or furious?
We all love things which are fast – whether it’s food, cars or mobile data. Same goes for user interfaces when it comes to getting the things you’re looking for. This affects developers on two levels: performance and app structure.
As for performance, there are some tiny code changes that can improve your application’s speed significantly. Check the blog series on performance improvement by Frederic Berg including asynchronous loading and more!
When looking at your app structure, you should go for a clear control hierarchy which can be easily done by grouping buttons and actions. Keep the actions close to their main element to ensure that the user knows what will be affected. And remember to only show the useful things; you also don’t want to read every possible detail on the menu when all you want is ordering a simple cheese burger, right? Functional minimalism and focus on the content is what’ll change the shape of Interfaces this year.
Moreover, tab navigation for power users or screen reader support for visually impaired users becomes way more easy and efficient when only relevant actions are visible and standing next to each other. This is not only improving Experience, it’s ensuring Accessibility.
2. VIP access only?
Speaking of access: imagine your favorite band would play in your city, but only people with a certain income and popularity were allowed to buy tickets. Sounds unfair? Well, something similar is a harsh reality for more than 1 billion people with disabilities worldwide. Plus the aging population, those who did not grow up in front of a monitor and a smartphone. Think of your grandma, sitting in front of your app – will she be able to read the font size and color? Would she find and understand the “delete” icon? Does she remember where to find the “close” button?
Well luckily, we thought about your grandma and all the diverse users out there during UI5 framework development! Therefore, UI5 comes already with many Accessibility features such as zoom, tab navigation and high contrast themes.
Beyond the default features, there’s even more:
Enable optimized screen reader support with the landmark API on containers. With landmarks, you give your app a hierarchy the screen reader can rely on. Set the ariaLabelledBy and ariaDescribedBy associations on controls supporting these to declare relationships between controls and additional visible or invisible text. This ensures that the screen reader can read out meaningful information.
In this context, you should also remember to always provide text alternatives to non-text content, like the alternate text property for images or tooltips for icons. When building custom controls with decorative elements, hide decorative elements from the screen reader by adding the property aria-hidden=”true”.
3. Plain text – straight talk
Talking about text, did you ever try to read a full page written in Comic Sans? Maybe back in 2002, but honestly, nobody misses that font nowadays. And it is kind of the same with Times New Roman when thinking about E-Book-Readers, mobile apps or smart watches. The fonts we were used to when growing up weren’t made for the cutting-edge technologies we have today. But help is on the way: “72”, the typeface will soon be available as part of the UI5 framework – get a glimpse already now in the OpenUI5 nightly build. It’s a highly functional UI typeface with great legibility at any scale, emphasis on character differentiation and recognition also at small sizes. With a high language coverage, it is meant for international use – no worries about special characters anymore.
But of course, a framework can’t cover all users and their special characters out there by itself. It’s the developers who build the real “experience”. So for the custom control developers among you and those who care a lot about enabling their grandma, neighbor or colleague, there are more recommendations on accessibility features in the UI5 Demo Kit.
Enough talk – happy coding!
Previous Post: UI5ers Buzz #22
|Jacky is UI5 Evangelist and UX Designer at SAP, working with the UI5 devs to make the framework better every day. She’s always looking for ways to improve User Experiences – no matter if it’s fancy web design, creative furniture or a dashing event.|