8

Got this design for a button.
Now I'm writing an essay in the ticket about how this is problematic for localization and accessibility.

Comments
  • 0
    how so? does the button _have_ to be _one_ image? can't it just be a HTML-button with a text and an image?
  • 2
    @tosensei It’s designed to be a text and an image.

    When we localize the text, we might have languages that have grammatical rules that don’t allow PayPal to be placed at the end of the sentence.
    The designer didn't think of it obviously and just placed the image after the text so that it reads as a sentence in the German language.

    The accessibility issue is that it will look like a text and and image and a reader will read is as "Bezahlung über", without the image. Or read the image description, depending on how the dev implements it.

    Now, there are solutions to all of this, but my issue is that the designers don‘t think about such things and it makes stuff more complicated than it should be and can cause UI bugs if devs like me don‘t point out the issues and just implement it.
  • 1
    Richtig und wichtig!
  • 4
    @Lensflare
    Can't there be a slot before and after the image for i18n? What's the matter with accessibility though? An alt text is obviously required, but that should be perfectly fine, shouldn't it?
  • 6
    @Lensflare soo what about a text like "Bezahlung über {paypal_image}" - in english, "use {paypal_image} to pay".

    i don't see the problem.

    and don't forget: designers are paid to _design_ - not to _think_. that's what we devs are for: thinking, and fixing their designs so they don't look terrible.
  • 1
    There is a simple solution for this:
    Place that paypal logo separated from the button text. And write the word PayPal into the button text.

    This would provide a good accessibility label implicitly without the need to provide additional text extra for accessibility (alt text in web speek).

    And it would not force me to implement some mechanic to place an image in some arbitrary place in a text. This might be easy in HTML but is complicated in native UI.

    I‘m not refusing to make difficult things if they make sense. In this case it is just avoidable.

    It‘s not just about the difficulty to implement. It requires more translations to make and maintain and has much more room for mistakes in translation and accessibility.
  • 4
    @Lensflare Alt text isn't some huge extra effort, it's the bare minimum, especially for images that contain text or symbols such as this one, and I can't imagine an UI framework where you couldn't do something like the attached image
  • 0
    Note also that the name "paypal" never needs to be translated so the property of alt text that it's often excluded from translation isn't an issue
  • 0
    @Lensflare Writing PayPal in the text when the logo already contains the words is redundant information for the vast majority of your users who aren't using a screen reader
  • 1
    @tosensei "designers are payed to design, not to think"

    Yeah. That's the big problem. That‘s how we get shitty UI that looks good but has terrible UX and breaks when used with different screen size, font size, scaling, theme, input kind, language, or region than the designer has designed it for.
  • 0
    @lbfalvy putting a pre and post text before and after the image would work but is bad.
    It makes it practically impossible for translators to make it right because it would be two separate things to translate. Translators fail to do it right for much less complicated things like… placeholders.
    And it would‘t flow correctly when the button is too small to cause the text to break into multiple lines.
  • 0
    @Lensflare small correction: that's how we get shitty UI that looks shitty as well.

    because design, like very thing artistic, is somewhat paradoxical: the more you learn about it, the worse you get at it.
  • 0
    @lbfalvy you are right that PayPal doesn‘t need to be translated in this case.
    But it‘s just a coincidence. The designer hasn‘t thought of this, I‘m sure.
  • 0
    @tosensei can you elaborate on that?
  • 1
    @Lensflare If the assumption is that translators can't properly translate two halves of the text then the logo should not be there and the button should just be text. But if the assumption is that translators can't do their job properly then it's not because of this design so the design is perfectly fine i18n-wise, and this also raises a lot of other questions because who's to assume that backend people can do the job they were hired to do and the button does anything at all? Wouldn't it be better not to have a button? If there's no app there's nothing for anyone to fuck up and finance gets to save the maximum possible amount on translation fees without suffering the consequences.
  • 0
    @Lensflare The way I read it, this is an inline image and the text elements aren't wrapped, so it'd break like an indivisible word, which it is.
  • 0
    @lbfalvy HTML is the only language that I know that can embed an image into a text and preserve correct flow and line breaking. Because HTML was specifically designed for that.

    I have worked with a lot of UI frameworks including QT, Windows Forms, WPF, UWP, iOS UIKit, SwiftUI, Android native UI, Java awt, Java Swing, and probably many more that I can’t remember.
    None of them can do it.

    What I‘m trying to say is that it is not a simple or trivial task.
    And even if it was, there are still problems that I‘ve mentioned. Not unsolvable problems but easily avoidable problems.
  • 0
    @Lensflare The only problem I see is with flow, and even that's assuming that the text on the button can break at all. This button should fit on the narrowest screens you reasonably have to support, so you can just disable word wrapping. For accessibility it's just an alt text, and for i18n you can handle it the same way you handle the other tens of cases where you need to embed dynamic content in translated text in a typical app.
  • 2
    @lbfalvy about fitting on the smallest screen without breaking:

    This is what designers also fail to realize:

    You can‘t guarantee that it will fit at all.

    You have different languages with different lengths of text.

    You can have very small screens that can be as wide as 320 points, which you need to support.

    You can have users that have large text as a global device preference.

    And you can have screen scaling or zoom (on browsers), which effects how large the text will be.

    And you have no control of any of it.
    The text can and will be too large to fit. You can see examples of this shit everywhere in the web and apps. Buttons which have text that doesn‘t fit, breaks and is then clipped by the button and not readable.
    Because they did the same wrong assumptions.
  • 4
    Here, encountered it just a few minutes ago on the paypal website:
  • 1
    @Lensflare I use my laptop with 130% zoom by default and sometimes need to increase the zoom level further so I know all about zoom-ignorant design; the buttons need to have a responsive width and break into their own line on small screens and it should be fine. In the rare edge case where the translator isn't able to retain the proportional verbosity of this simple sentence, sub-ideal line breaking is less of a problem since you already have a multiline button for checking out with paypal. Disabling line breaking certainly isn't a good idea.

    If you need to support 320px you shouldn't have images anywhere they aren't strictly necessary, and the paddings should be way smaller than they currently are, probably at 1px. 320px is distinct enough from 1080px that you either make a separate design for it or drop support. Trying to make it work across both is pointless.
  • 0
    @lbfalvy different designs for different screen sizes makes sense if the screen sizes are different enough.

    For this project I need to support only portrait phone screens and it makes no sense to split it into different designs for small and large phones. They are too similar.

    The solution for this paypal case is also very simple: just make the image separate from the text. And make the text readable standalone. Then it can break however it likes and it will look good.

    This also solves the problem with localization and accessibility, as I mentioned.

    By just thinking about the design a bit more than looking at it as a collection of pixels, most problems just go away.

    Your suggestions are far too HTML-centric, complicated and dangerous, because I simply can not trust the translators. This is based on experience.
    The translators will fail to do it correctly and we will never know because no one will test all languages.
  • 0
    @lbfalvy removing unnecessary images and reducing padding is just trying to treat the symptoms.
    It won’t fix the design.

    And who should define where and when to reduce paddings? Obviously the designer. But he doesn’t do that.
  • 0
    @Lensflare By unnecessary images I was referring to the PayPal logo. The problem with a small screen is that few things fit on the screen. Decreasing paddings and removing things is the exact solution for too small screens.

    If you only need to support landscape phones I'm not sure what you're on about with 320px. The minimum conceivable height for a phone screen is around 450.

    On the other hand, placing the word PayPal on the screen twice is terrible for small screens, and terrible for accessibility on a regular screen. Accessibility for screen readers is important, but you can't sacrifice your primary medium for one that's disproportionately less popular.
  • 0
    My suggestions are HTML-centric because that's what I know, but the features I refer to are the bare minimum. It may have a different name, it may be implemented procedurally, but responsive layout, screen-proportional sized widgets and word wrapping are available everywhere. Wrapping images as words isn't, so I'm not making that assumption anymore.
  • 0
    @Lensflare So if you can't trust your translators' technical knowledge with embedding stuff in text, why isn't that policy? It sounds like something the designer should be made aware of, because as far as I know embedding variables in text output is very natural for UI design. If the designer doesn't know about this limitation most likely there are tens of other places where this (otherwise very natural) step is used.
  • 2
    @lbfalvy text with placeholders is common and for the most part not problematic.

    But here we have images that go into the placeholders, not text.

    This is not possible outside of HTML.

    There are some workarounds for this like what you have suggested: sandwiching the image between two localized text instances.

    And if you give those two text instances to the translators, then they will have a hard time making the link that they should belong together and have an image in between of them and that this image is kind of a replacement for the word PayPal.

    And to make my proposed solution even better:
    We could use the small PP icon image, without the word PayPal in it. And in fact, it is already being used in another place of the app.

    Or don’t use the icon at all, as you have suggested.

    And that’s what I’m complaining about:
    We, the developers are forced to think about that and propose solutions to the designers. But imo, it’s the designer’s job.
  • 1
    @lbfalvy you might have misread it:
    I need to support phone portrait, not landscape :)
  • 1
    That button looks completely fine to me from a technical point of view. You localize it by having the localizable text contain "Bezahlung über {paymentProviderLogoWithText}". Of course you have to provide alt text for the logo. Of course you have to make sure that any button works on different zoom levels and screen sizes. Yes, buttons in general may have multiple lines of text because of language, screen dimensions, user browser settings or even just because of overly specific wordings from the law department...

    You are the coder, not the designer. The designer designs. And the coder makes his design work under all relevant circumstances.

    The only thing actually bad for accessibility is, that the button is barely recognizable as a button for a lot of people because of the hippster flat design style combined with a TOC-grey border...
  • 2
    Accessibility is fine and is trivially done with simplest aria-label or just plain alt.

    About localization, I get it that "just change the order duh" might be a problem due to your system not supporting working with images as if they were text.

    My solution? I would just write "Bezahlung über PayPal", then dissect this string with JS, replacing "paypal" substring with the picture. Yes, unorthodox. Does it work though? Absolutely, as "PayPal" is a primal noun and requires no translation. As for casing, you can always match in lowercase.
  • 1
    @kiki One must remember not to scan for isolated words though. In Hungarian, the label looks like this:

    Fizetés Paypallal
  • 1
    @lbfalvy you're right. I didn't know about it.

    If OP's company needs that level of localization flexibility because of the sheer number of countries their business covers, how come they have such an incompetent designer that cannot even understand the problem OP brought up? Something doesn't add up here.
  • 0
    @lbfalvy didn’t know about this either and we do support Hungarian.
    Nice example of why you can’t just assume that an image can replace text. We don’t know all details of the different grammatical rules of languages, so we should not mess around with this kind of stuff.
    Now there is even more reason to just separate the text and the image.

    @kiki as I already said, the problem is that the designer does not think beyond "collection of pixels".
  • 0
    @kiki it’s not like the designer doesn’t understand this. He does if I bring it up and explain it.
  • 0
    @Lensflare Apart from some obscure American languages all of them either add a pre/postfix or leave the word intact. Some fairly popular Asian languages combine it spatially with other symbols in which case the PayPal logo would look ridiculous but most likely grammatically correct as a single character.
  • 0
    @Lensflare It sounds to me like you might want to consult a linguist though.
  • 1
    @Lensflare a UI designer thinking of a UI as of a collection of pixels is the definition of incompetence.

    A very nice wording by the way, spot on.
Add Comment