A few days ago, redditer Peter-W posted an application design on /r/android. He wanted to know what people thought of his design, and if they had any suggestions for him. I took a few minutes, and redesigned his UI, which ended up getting a lot of praise. In this post, I’ll discuss how I came up with the redesign.

The first thing I did was make some assumptions. I assumed:

• That the Translate button would cause the text in the input box to be converted to the the appropriate language in the output box.
• That the Speak button would bring up the voice-to-text feature of Android phones for adding content to the input box.
• That the Listen button would read the text in the output box with the Android phone’s text-to-speach feature.

The next step was to isolate some of the problem areas of the current design. I came up with the following:

• The content in the labels is too impersonal. People using this app are human, not computers. The labels should read “From” and “To,” or be removed altogether.
• The Speak and Listen buttons are too far away from the components to which they’re supposed to control. It breaks their relationship, and they need to be moved closer.
• If there’s no content in the output box, then the Speak button should be deactivated, or not even present.
• The default Android style is ugly.

Having fully considered application, design, and it’s problems, I began the task redesigning it.

I started with the color scheme. Peter-W’s first redesign attempt used blue and orange. I thought this was a good choice, and stuck with that. Blue, being a corporate and trustworthy color, which meshed nicely with a translation app. Orange, being blue’s contrasting color, and a good way to make important elements pop.

The next thing I did was figure out how I could layout the UI in such a way that it would address all the problem areas.

The label remained at the top, but was made larger and more visible. Its important to have labels for your apps. Android is a multitasking OS, and often launches other apps while working within another (e.g. Gmail launching a PDF reader). The label provides a landmark to the user, letting them know where they are.

I then tried to figure out how I could simplify the UI. If I was seeking to translate something, the first thing on my mind would be, “from what language to what language?” By moving the language selection boxes to the top, and providing an arrow pointing from one to the other, the labels become superfluous.

The next logical step would be to enter some content. So, the next UI element was the input box. The Listen button was replaced with Android’s voice-input icon, and placed inside the input box. This provided a close relationship for it’s functionality. I also added a delete button to the top right. Android’s voice-to-text feature is pretty good, but far from perfect. Allowing a person quick access to a way of removing errors would certainly help speed up input.

The Translate button remained at the bottom. Even though the button is far away from it’s relationship with the input box, its color and size denotes it’s importance. It’s location would also move a person’s finger to out of the way, to see the result.

The result to the translation would show under the input box, creating it’s relationship. The text was made slightly larger and darker. This was to promote it’s importance, and also aid in it’s readability in an unfamiliar language. The Speak button was changed to Android’s sound icon, and placed next to the result. This would remove the button until there is something there to read, and create a better relationship.

That’s it!

This is the best I could do with just a couple of minutes work. From here, I would normally progress to some form of user testing. One thing I would want to find out is if the Translate button could be removed all together. That may help speed up the translation process, but may drastically slow things down if their were input errors. Again, only user testing would flesh that out.

Hope this snapshot of my work process helps some of you with your designs.