Building the GlotPress Translation Manager

Tag Archives: design

Many of you probably know @isaackeyet from his contributions to translate.wordpress.org as well as work on the WordPress mobile apps. Well, he’s back again to contribute some new designs to the GlotPress plugin.

As part of the design process, Isaac wants to hear from translators and validators alike. What makes a translation interface good? Every person that reads this post (you!) can participate. You don’t have to be a designer!

It only takes five minutes to help. Here’s how:

Use whatever medium you’d like (paper, pen, computer).

Sketch out your ideal translation interface. Try not to think about specific features. You don’t need to be an artist. Rough sketches are helpful too!

Post your picture as a comment here.

That’s it! Lots of contributions mean lots of inspiration as Isaac designs the future of GlotPress.

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!) 🙂