Icon

For a few years now I have wanted to solve ne of the main Hyperwords interface issues: putting the commands within reach without making them too obtrusive.

The solution I felt was best for most cases was to have a small icon come up when users select text, instead of the whole menu.

Some people like to select text for other reasons than to use Hyperwords, for example to show someone a selection of text.

This has been outside of our reach technically for quite some time. I have blogged about this and built mock-ups but we just couldn’t make it real. The Mikhail discovered GWT and bookmarklets and it’s all coming together.

At the same time, we have been approached by a large US charity to put Hyperwords on their site. Mikhail put together a demo and it has a small icon that comes up when you select text! I designed a simple green, blue and white ‘i’ in a circle for this, since on this site it’ll be used mostly to provide more information. We then made a version for a pitch to a UK organization (haven’t heard back ye). This time I designed a white ‘i’ inside a white circle on a blue glass sphere. It’s large, friendly and ‘pretty’.

But we are not moving towards having this icon on all Hyperwords versions. And here we are providing commands, not just further information, so what should the icon look like?

I designed tests, all of them grey – I don’t want this to be too obtrusive. Some were spheres, some with our icon, some without. There was * and + and all kinds of symbols. I played around with making nice metallic or glass spheres – which I am finding quite hard to do. Then I remembered I have one in my iProject folder. I couldn’t find it but there was a screenshot of a normal arrow cursor. I played with it. Made it part transparent, lost the tail. And tried it live on our hyperwords.net mockup.

It worked. It worked very well. It feels like, instead of a new icon coming up, the cursor sticks with the selection. This gives the feeling on it being an extension of the cursor and not something new. And it encourages inspection. I reall, really like it. What do you think?

Try it here.

Advertisements

No comments yet

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: