Rethinking the GlotPress UI

Hey guys, first post in the GlotPress blog, so I think I should introduce myself and give context to why I’m posting.

I’m Hugo, I work for Automattic as a Social Designer. I love designing user interfaces and craft the experiences so that a product is easy to use. I’m also part of the Portuguese WordPress Community and I’ve used GlotPress to help translate WordPress to Portuguese!

My friend and coworker Zé, asked me to “take a look” at the ui of GlotPress and brainstorm a bit on how it could be improved.

We started talking about a bunch of stuff and details, but I decided to focus on one thing at a time. Here are the priorities on my first iteration here:

Improve the visual design of GlotPress (Zé mentioned he’d love to have it look more like the WordPress Dashboard)
Improve the information architecture on the header – reducing the redundancy and streamlining the interaction
Improve the List Actions / Sorting / Filters to match the needs of a power user, as well as to make it easy for newcomers

With this list in mind, I sketched some ideas and we ended up coming up with this:

Things worth mentioning:

The visual design is much closer to the one on the WordPress Admin
Got rid of the GlotPress logo at the top, as it didn’t really give any context and if you contribute to translations on multiple sites (ie: WordPress.org, WordPress.com, Genesis Framework, etc…). Now you get instantly a notion of where you are without any clutter
Separated the Bulk Actions, Sorting and Filters into different areas, to make it clearer what each do. My thinking behind this was to have the filters (I’m calling it “Quick Filters” right up in the visual hierarchy, next to the contextual title (You’ll also notice a “Advanced Filters” link at the end, which I’ll mockup the interaction on a later iteration). On a second line you find the things that directly affect the list – Bulk Actions and Sorting on one side (made it much simpler by just using select items), and the Visualization options (Wishlist – like WordPress does with lists – more on this later on), item count (whishlist as well) and pagination.

I would like to get the discussion going around this and to get your opinion so I can know if I’m in the right direction or not (feel free to kick me in the but!) 🙂

Cheers!

#design, #ui, #ux

Carlos Eduardo G. Barbosa 12:36 pm on October 19, 2011

I totally agree with what Hugo says here on the GlotPress logo. I go a step further, however. Sorry if this mislead a bit the mainstream of this discussion.

If we treat GlotPress as just an administrative Panel, we will never improve properly its UI, as it will never be anything else just a dry admin panel structure. GlotPress pages, however, are not closed to public. They are public workig pages that can be actually seen by anyone, despite the fact that just registered and empowered users can change their contents.

I am using GlotPress and I would like to apply too it the same visual rules I’ve addopted to my WP installations. This is preciselly my point, here. It’s nice to have your visitors easily aware of where they are – and this is why we should have visual themes on GP.

GlotPress is a nice platform, but lacks visual flexibility. That “gp-templates” directory should rather be “gp-themes/gp-basic-templates”, so anyone using GlotPress could develop his own visual conception as a new theme to be added in a new child-directory on gp-themes – as it works with WP.

Let us choose or make our own themes in GP. If we just add this functionality, a lot of nice visual solutions will pop out from the community, for sure.
- Hugo Baeta 6:19 pm on November 1, 2011
  
  If we treat GlotPress as just an administrative Panel, we will never improve properly its UI, as it will never be anything else just a dry admin panel structure.
  
  Interesting statement. In my mind GlotPress is exactly that, just an administrative Panel to achieve a goal – collaborative translations of something else. The “public” aspect of it is quite limited because of that. I see GlotPress like I see the WordPress admin – it’s a tool, not a front, public-facing, site.
  
  Now, on that note, I also agree that *some* visual flexibility should be given, maybe the admin could choose a color pallete or something. But if the experience is tailored correctly, messing with that will only create confusion. As I said, I collaborate on several installations of GlotPress – WordPress.com, WordPress core, Genesis Framework – if these 3 had different UIs, it would be a nightmare!!
  
  Just to clear thing up, the work I’d like to collaborate on here is with the core User Experience of GlotPress, and also cleaning up the UI in the process – it’s not only a visual (re)design. 😉
  - Carlos E. G. Barbosa 1:09 am on November 26, 2011
    
    “In my mind GlotPress is exactly that, just an administrative Panel to achieve a goal – collaborative translations of something else.”
    —————
    
    Hi Hugo,
    
    In my opinion it may be just an administrative panel, if concealed and access-restricted to none else than the registered users.
    
    But it is not thus.
    
    To achieve its main goal the GlotPress installation must be a “public-facing site” as it is, in fact. How else should the collaborative aspect of the translations be privileged?
    
    With GlotPress that translation task is no more a blackbox procedure. It is visible and world wide accessible as a site that points to “something else”, isn’t it? The “something else” may give it a reason why, but the translation job has got a face itself. So why be so shy in giving it that nice visual flexibility?
Remkus 1:15 pm on October 19, 2011

Ooh, I quite like this. Love to see GlotPress look it’s a WordPress clone!
Wacław J. 10:53 pm on October 29, 2011

I would like the “Approve Selected”/”Reject Selected” buttons to be moved from the bulk edition box so there is no need to expand something every time you want to use them to make approving/rejecting translations easier (or if the “Details” boxes wouldn’t close after approving/rejecting a translation, which is what happens when you submit your own translation — it skips to the next one).

P.S.: How do I log in?
Pingback: Hugo Baeta leading facelift of GlotPress translation software | WPCandy
Pingback: wp-coder.net » Hugo Baeta leading facelift of GlotPress translation software
Pingback: A Free wordpress newsletter » Hugo Baeta leading facelift of GlotPress translation software
Kenan Dervišević 5:19 pm on November 2, 2011

I really like this new look. The new look and keyboard shortcuts (there is a patch waiting for that) would be an excellent improvement. When can we expect this to be implemented?
Also, I would like to have an option to actually hide this yellow notification for new users so that I don’t have to do it every time I clear cache in my browser.
Pingback: Mejorando el aspecto de GlotPress | Ayuda WordPress
Pingback: Mejorando el aspecto de GlotPress | Tecnologia, Desarrollo Web, Posicionamiento Web SEO
martin 5:48 pm on March 4, 2012

Me gusta mucho este nuevo look.
Pingback: A few hours ago we had our first… | GlotPress
Pingback: Redesign of GlotPress | GlotPress