Ideas how to improve the UI/UX

  • wube

    (@wujek_bogdan)


    8 years, 9 months ago

    Hi,

    First of all thanks for the plugin. It’s much better and cleaners solution than WPML and it works great with ACF out of the box. For me it’s perfect, but I found it difficult to use for end-users.

    I’ll try to show you some usability issues and try to show some solutions as well.

    First of all average users are not familiar with WordPress data structure, they don’t get the idea of posts, and they don’t understand that in fact each translation is just another post. They just want to translate posts.

    Let’s imagine how an average user tries to use this plugin:

    • This is what user sees when the page is not translated yet. What’s a first thing what he tries to do? There’s a text input and a pencil icon. User tries to type something in the text input. He’s not aware yet it’s not a regular input, but a search field. So he tries to type a new post name there. Yes this is what most of users does!
    • He doesn’t notice the loader that shows up for a while (or he just ignores it). Nothing special has happened when he typed the text so he clicks the edit button.
    • Now the user is redirected to a new page with a blank title field. It’s strange for him because he has just entered a new page name in the text field. He ignores this fact. It’s a new tool. Strange things are happening. He might think it’s a bug, or maybe he did something wrong. Whatever.
    • So the new page has been created. The user is a bit confused. He’s not sure what has just happened. Did he just create a translation, or maybe something went wrong?

    Some ideas how to improve the workflow:
    I’ve prepared a little mockup: https://dl.dropboxusercontent.com/u/3638687/polylang/polylang.png

    I’m not 100% sure about a single button next to the language selection input. Maybe it would be better to show 2 buttons: one to assign a translation and another one to create a new page?

    https://www.ads-software.com/plugins/polylang/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Chouby

    (@chouby)

    Hi!

    Thanks for your suggestions. Some are interesting. Some would be too difficult to implement. I am not a UX expert but this metabox is really hard to design, mainly because of the lack of space. The accessibility would be better if I added a button near the language selector. But if I do, there would be no more space to display the language name. It would be even more difficult for the translations.

    I’ll keep your document as inspiration source for the future.

    I totally agree with wube re the misleading appearance of that translations “empty box”. When I started using Polylang and WordPress I was often tempted to type the translated title of my post into that box!

    There is nothing in the interface to explain that it’s a search box. And I had not even realized it was that (a search box) until reading wube’s post today!

    Thread Starter wube

    (@wujek_bogdan)

    Hi, @chouby!

    I agree, the metabox is not very helpful in terms of usability. There’s not enough horizontal space there. I’ve noticed this issue as well while preparing the sketches.

    But as you can see I’ve already saved some space removing the icons. We can get some more space:
    – decreasing the horizontal padding a bit (it’s a few pixels, but still…).
    – moving flags icons from the side into the input/select (set the flag as an input background, or select:after pseodo-element, etc).

    Here’s a quick mockup: https://dl.dropboxusercontent.com/u/3638687/polylang/polylang-metabox-new.png
    You can compare it to what we have now: https://dl.dropboxusercontent.com/u/3638687/polylang/polylang-metabox.png

    Now there’s at least 70px of a free space for the buttons.

    PS
    There’s even a demo on the select2 site showing countries and flags selection: https://select2.github.io/examples.html

    Plugin Author Chouby

    (@chouby)

    I used icons rather than text because of the small horizontal space. Generally, English doesn’t take a lot of space compared to other languages. For example, the translation of “Apply” in French is “Appliquer” which almost doubles the size. Other languages may be worse.

    I know Select2 but I am waiting for WordPress to integrate it before I use it myself. I hope that it will come soon. See #31696

    Thread Starter wube

    (@wujek_bogdan)

    Is there any chance to implement these UX improvements? Polylang is a great plugin but I can see a lot of confusion caused because of its UI.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Ideas how to improve the UI/UX’ is closed to new replies.