Stand Out

One of the reasons why I always tried not to be in charge of UI during projects back in university is because I just don’t have a good sense for it. What I think is pretty can sometimes be hideous to others, and what I think is good enough is either too complicated or too empty. My design skills are non-existent and while my color combination is better than the rest of my art sense, I do make bad choices– ugly or funny or both (mostly the last).

Well, that’s actually only slightly related to what I did recently. It was a simple improvement task, I didn’t have to design anything, and because similar things have been done in our other products before, I did have references. Basically, I have a bunch of lines of different colors and when the user selects a line, I need to make it so that it’s immediately clear which line is the selected one.

001

I had three basic ideas based on other similar features in our other products, and also based on the existing framework for the line styles: 1) turn the selected line solid instead of dashed, 2) make it slightly thicker than the rest, 3) use a fixed color that is unlikely to be used (for the purposes of this blog post, this color is red).

So I implemented all possible combinations of these ideas.

I actually also thought of highlighting the line or somehow making it glow. But after consulting with a teammate, we decided to drop it because 1) it was too different from how the rest of our product looked and 2) I would have to edit the framework and add new functions because we do not have code for this kind of feature (which would have been cool to do, actually).

009

In the end, I used all three of my ideas along with some changes as suggested by the rest of the team. I used a different fixed color from my proposal in order to keep consistency with our product colors. The thickness of the selected line was also lessened from the initial plan because if it’s too thick, it will cover small details in the background. And most importantly, I was informed I was allowed to change the colors of the other lines as well. So whenever a line was selected, I changed the color of the rest of the lines to another fixed color that attracted less attention than the selected line’s color.

010

When I explain what happened like this, I can’t believe it took three weeks before all details were finally decided. It seems like such a simple thing but there were so many considerations. Not to mention the fact that our product isn’t actually as simple as just a white canvas with users drawing different-colored lines.

Unfortunately for me, I have been given another UI/UX-related work and this time, I am designing the UI. It’s quite a big assignment but if all goes according to schedule, I will be done with it by December. Though, who knows…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: