Re-designing the Description Text Editor of the Sketch

What is the Description Text Editor?

The Description Text Editor that codebender uses is a tool for all those who want to write a description for their Sketch. In this description, bold and italic sentences as well as other typographic characteristics can be used, images and/or videos can be added and schematics of the Sketch can even be displayed.

Why is it so important to write a Description for the Sketch?

The Sketch and the Description that you create for it can be seen by your friends, your colleagues and generally, by anyone! Wanna know why? Because your Sketch can be shared all over social media and even show up in a Google search. A description is a very helpful way to give people who find your Sketch more details about it.

The Meetings

After a few team meetings, we accepted the fact that the Description was lacking functionality for the users. So, we gathered all the valuable feedback by the community of codebender (and thank you for that!) and created a simple tutorial. Below, you will see which process we followed, so all users can easily write a description for their Sketches.

The Decisions

First of all, a list of the noticed UX issues and solutions are presented below.

1. The Confusion

• When users try to write their descriptions and they want to include some typographic characteristics (e.g., bold,italic words/sentences), the text that shows up in the sidebar doesn’t include these characteristics and users can only see a plain text.

• We separated the description editor into two fields: One field is about plain text (short description), where you can write some quick info (up to 140 chracters) about the Sketch, which appears correctly in the sidebar. The other one is about writing a more complex text (full description) including all the typographic characteristics, images, videos or schematics that you want to add to the Sketch. The full description is not visible in the sidebar, but it is useful when other users/visitors view your Sketch. It is also searchable, which allows your Sketch to be displayed in codebender search results.

2. The Sidebar

• While you are in the Editor page, you can’t tell whether or not the description box is clickable. The only way to know is to hover over the box and see the pencil icon, which indicates that the box is editable. Also, you can’t easily copy the text as shown. Even if you manage to click on the box, you can’t directly edit the description, because the Modal Box that shows up is the “View” state, and not the “Edit” state, as the pencil icon previously indicated. This is really confusing!

• The description box in the sidebar has been replaced by an area where the text is selectable and searchable. Also, an “Edit” button was added so you can navigate more easily to the “Edit” state of the Modal Box.

3. The Placeholder Text

• When you haven’t written anything in the Description box, a simple and not prompted sentence is presented. Respectively, when the Modal Box opens at “View” state, you only see an empty white box.

• A placeholder text has been added so that you will see a prompt text either in the sidebar or in the “View” state.

The End

I hope that you now understand the power of description, and that next time, you will not underestimate the importance of it!

Please feel free to leave any comments you might have, because your opinion matters and is valuable to us. Stay tuned for more!

Thanks for reading and always remember: if you see that guy in the road, just RUNNNNN! You have been warned!

Find me on Dribbble @madebychipmunk