The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!



Runne(a)r phones- if you run, you need one (earphone mounted rotary knob volume control)

This is a product idea I have submitted on Quirky targeted at runners.
Changing the music volume (because of traffic, changing environmental noise) while running is always a hassle. Well, not any more, Runne(a)rphone’s here.
Vote here: (if you like it, and tell your friends about it too)

Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes

The Problem

This product is a solution to a very specific problem- changing the volume of your music device while running.

When running, we often have to change the volume over the course of the run, especially if we’re running in the city. We come across different volumes of environmental noise (running by a busy road, passing by a construction site, what have you). This means we need to turn the music volume up and down quite a few times throughout the run.

Now changing the volume can be a pain, depending on where we’ve placed our music device. If we’re not using a remote control earphone, then we need to take it out of the pocket and change it, which means slowing down and distracting ourselves from simply enjoying our run. Even using an armband requires us to slow down or bit, or stop moving the arm its on to change the volume… not something we like to do when all we want to do is zone out.

A remote controlled earphone is no better (something I personally use) because we still need to temporarily slow our speed down and get hold of the volume control on the earphone wire. I certainly don’t enjoy it, and believe you don’t too.

The Solution

My solution to the volume changing hassle is an easy, ‘don’t make me think’ one. It is an earphone for runners, where the volume is controlled through the earphone itself rather than the music device.
The difference is that the volume is controlled through a rotary knob (just like those on the old television sets) and this knob is placed on the earphones itself (as you can see in the picture I’ve attached- the extruded portion is supposed to be the rotary knob).

Changing volume is as easy as rotating the knob on either headphone. This means we no longer have to slow down while running. We no longer have to get distracted from having to cumbersomely change the volume. It’s as simple as volume changing should be while running.

Key Features

The product is an earphone targeted at runners and joggers. It solves the specific issue of the cumbersome process of changing the volume of music over the course of a run. It is special because I believe there is no other solution out there which makes it as easy as the this product.

Product Comparison

I am aware of none at the moment

The best of Cone Trees for 2011

2011 has ended and has been a rather good year for me. I know I have not been writing this year, but work has kept me very occupied, and happy.

I left Delhi and moved to Singapore early in the year to join PebbleRoad and have since then had a great time working on a whole lot of digital strategy, user research, information architecture, mobile and social interaction design, usability testing and competitive evaluations for websites and intranets for both the government and corporations such as IE Singapore, Tourism Australia, Visa, SMU, Guiness, Singtel, DHL and more. And the projects went well, nothing like getting repeat proejcts from happy clients. Great team, great fun.

I plan to get back to writing again this year, so you can expect more articles on ConeTrees this year. It’s February already and it is a little late for new year greetings, none the less, I hope you have a wonderful 2012.

Most viewed

The UX Bookmark- the best UX links for the smartest User Experience practitioners
Videos from UX Week 2011
UX Quotes- Quotes on User Experience

Suggested viewing

A Quick Look into IDEO’s Design Process- Designing a Shopping Cart in 5 days
Alan Siegel on simplifying legal jargon (simple language)
Alexis Lloyd on new interactions with news

This Was The Most Popular Content on Cone Trees in 2009

Out of the near 50 posts that were made at Cone Trees in 2009, here is a compilation of what was most popular with you, dear readers. You will also find my list of suggested readings for each section (except for the articles section, where there were only three posts I made in the year).

Top 3 Articles

Most popular

  1. Tips for effective DIY Participant Recruitment for Usability Testing
  2. Increase Conversions in Long Web Forms by Resolving the Accidental Back Button Activation Issue
  3. Guidelines for conducting Effective and Efficient Meetings

Top 3 Blog Posts

Most popular

  1. jQuery Masked Input Plugin- Increase usability, input masks for text fields
  2. A Review of the Balsamiq Mockups wireframing application
  3. Usability spotter #5- HP laptop touch pads with scroll zones- absence of tactile cue

Suggested reading

  1. Usability Spotter #6- The Twitter login page password revelation issue
  2. Web Accessibility- our responsibility as Web Industry Professionals
  3. Usability Spotter #4: A Usability issue- Google Chrome Tab selection through the mouse

Top 3 Downloads

Most popular

  1. Download Axure ‘Clear input field value on focus’ prototype/ widget library
  2. Download Axure Touch Screen Hand Gestures Stencils
  3. 15 Tips for Effective Usability Testing in India

Suggested Downloads

  1. SEO through Accessibility- How designing accessible websites leads to automatic SEO
  2. A free Minutes of Meeting (MOM) template
  3. Cone Trees Wallpaper #2- Regenerate

Top 3 ‘News & Resources’

Most popular

  1. Pranav Mistry’s “Sixth Sense”, game-changing wearable technology- a talk by Patties Maes
  2. Web Accessibility- our responsibility as Web Industry Professionals
  3. Dan Roam on “The Way of the Whiteboard: Persuading with Pictures”

Suggested Viewing

  1. Don Norman on the three ways that good design makes you happy
  2. Kim Goodwin on designing a Unified User Experience- integrating Interaction, Visual & Industrial design
  3. Barry Schwartz talks about “The Paradox of Choice- Why Less is More”

A Review of the Balsamiq Mockups wireframing application

Balsamiq Mockups is an reasonably priced application for creating wireframes that is easy to learn and use suitable for smaller projects. Creating interactive prototypes out of Balsamiq wireframes is now possible with the release of another application called Napkee. This review talks talks about:

  • Balsamiq Mockup specifications
  • Balsamiq’s distinct visual character and how it work both in favor and against Balsamiq being adopted by users
  • Pros and cons of the application
  • A conclusion with a recommendation on who should use and what to use Balsamiq Mockups for


This review is based upon the latest Balsamiq Mockups available at the moment- version 1.6.25. Line-throughs (like this) indicate notes about the earlier version.


Balsamiq Website: Balsamiq Mockups
How much does it cost? $ 79
Number of controls in UI library: 66 73
Download user contributed Balsamiq UI components: Mockups To Go
Application: Available as an installable. A web application is in the works. Also available as a plugin for Confluence, JIRA, XWiki & FogBugz.
Platforms: An Adobe Air application, hence runs on currently Windows, Macintosh and Linux. Balsamiq Mockups will be cross platform once the web application version is out.

Characteristically Balsamiq

Lets first talk about Balsamiq’s distinctive hand drawn style that makes it look like a scanned paper prototype. What can be seen as Balsamiq’s defining characteristic that differentiates it from other wireframe and prototyping applications- the unconventional hand drawn style and the character of the application, works both as an advantage and disadvantage for it.

1. Unconventional style as an advantage

1.1 Balsamiq- The Visceral aspect

Balsamiq Mockups installationBalsamiq Mockups icons
What strikes many immediately about Balsamiq Mockups is its (well implemented) sketchy hand drawn styling and its cheery character. It is the visceral aspect where Balsamiq Mockups scores, allowing it to make a good quick first impression with many a user, who do not mind trying it out with a positive mind or spreading the word on it. It is a popular application talked about and recommended in the interaction design community, despite (as I discuss ahead) the fact that it does not possess (a deliberate decision I would think) the features that would make it an efficient tool to use for the more seasoned interaction designer or information architect.

1.2 Discussion stays at blueprint level without detracting to styling of elements

A wireframe is used to communicate the basic structure (layout and interactions, flow, not content) and working of a product before heading on (optionally but ideally) to higher fidelity prototypes, visual design and subsequently to the development of the product itself. The wireframe is discussed with various stakeholders and constantly refined till it reaches a stable state where the basic structure can be frozen and the team can move ahead to a lower level of detail.

This process can be time consuming and while the scope of discussion of the wireframe should be limited to what wireframes are designed to communicate- the basic structure, in reality, this is not the case. Almost all wireframe and prototyping applications allow for the possibility of moving the wireframe from a basic structural indicator towards a graphically stylized mockup (whether or not it is intended to indicate the visual design of the product). As a result, it is not uncommon to find that time and again stakeholders stray from discussion on basic structure and comment about graphic design which the wireframe is concerned with at this stage.

This is where Balsamiq scores again. Creating a wireframe to move beyond basic structural indication in Balsamiq is practically out of scope (unless you want to load up a hundred images). This ensures that the wireframe is taken and discussed as a wireframe, and there is no possibility of critique on look and feel. In Balsamiq, the only style here is the hand drawn style and there is literally no possibility of stakeholders confusing it for the actual design of the product.

2. Unconventional style as a disadvantage

In his session for MIX ’09, Dan Roam, (author of the book- The back of the Napkin) says “I do not know the cognitive reasons behind this, but I have never seen this not be true. The more human your picture, the more human will be the response”.

While this may be the case, enjoying the benefit of encouraged participation in wireframe discussions can occur only once the application is adopted by the user. Prior to this, a decision has to be made on whether to adopt the application or not, and in Balsamiq’s case, just as the visceral aspect works in its favor, the same sketchy rendering and cheery character could lead to Balsamiq being rejected by users.

In a consultancy, one may consider whether all clients would prefer being presenting with wireframes rendered in a sketchy hand drawn style in comparison to the standard lines and boxes that they are used to seeing. Based upon the unconventionally light natured visual character of the application, a client may view the consultancy as not being as professional or capable as they otherwise took it to be.

Similarly, for internal use in a product based company, especially those at or below stage four of Nielsen’s Corporate Usability Maturity model, where a considerably stable usability group is yet to emerge, usability practitioners will want the company to take usability as seriously as can be taken. In such a scenario, using a tool to create wireframes (in a hand drawn style using a presentation feature with a big cartoon like pointer) that will be discussed by stakeholders beyond the user experience department brings the concern of other departments not taking the usability group seriously enough.

Since the problem is with perception here, you should find it helpful to convince them by letting them know that a giant like Microsoft also chooses to use a similar hand drawn sketchy style in SketchFlow which is a as part of their Expression Blend product.

Balsamiq Mockups- Pros and Cons

While there are many other points that I can add to both lists, these are the ones that I feel are at the major ones.


Easy to use and a low learning curve
Balsamiq has been kept fairly simple and has a low learning curve and it is easy to get considerably productive right away.
It’s widget library
Balsamiq Mockups provides a fairly well stocked UI control library that will let you wireframe with ease. You will find iPhone controls present as well.
Community shared controls
Mockups To Go is a user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups. This is handy in helping you speed up work since there is always a possibility of finding a part or whole of the wireframe you need to build already available for you to download and customize.
Reasonably priced
At $ 79, the price is good for everybody, there is nothing more to say.
Responsive customer support
While I have not required required any customer support or requested for any new features, customer service is an aspect that Balsamiq is known to perform well in. I have heard users rave about the fact that Balsamiq is extremely responsive to its users, always hearing what they want and responding to their needs and issues.
‘Quick add’ is useful
Quick add is a useful feature that lets you find the widget by typing in its name instead of having to go through the various categories of controls that exist. Of course, the labels given to controls may differ from the ones you use and this may limit its effectiveness but this continually reduces with time spent on the application

Balsamiq mockups auto suggest

Presentation Mode
This is useful when presenting the wireframe to stakeholders, especially with the newly introduced ability to toggle annotations in presentation mode.
Interactive Prototypes through Balsamiq
This is in the works and yet to be released. With the release of the third party tool called Napkee, users will be able to use Balsamiq to create interactive prototypes.


Absence of the ability to Zoom and Pan, create custom controls, no concept of masters or backgrounds and multiple pages
Besides other features required by more experienced interaction designers and information architects to execute and manage their their work both quickly and efficiently, the absence of these features slows work down and makes it unideal for large-sized projects.
Memory usage over time shoots up
In all fairness, this is an issue Adobe needs to address in the Air Application and there is nothing Balsamiq can really do about this.

The Balsamiq Mockups user interface

Notepad Background image stretch
The background image vertically stretches if you increase the height of the mockup instead of simply vertically tiling a seamless pattern to make the notebook background. Adding a seamless tile vertically would have made much more sense. Replaced by a neat and clean grid now.

Conclusion- Who should use it, what to use it for and when to use it

Balsamiq Mockups is a reasonably priced, easy to learn and use wireframing tool that comes with limited features. Based upon these simple facts, I wrap up saying:

  1. Since Balsamiq Mockups application has been kept simple and is extremely easy to learn and use, I would recommend it for use in startups or any organization where there is a single or a few interaction designers who are relatively new to wireframing but are required to get productive right away. I would also suggest Balsamiq Mockups to be used by interaction designers of higher expertise levels give it a hand for smaller projects and personal projects and see whether it fits their needs or not.
  2. For the same reason as above, I would recommend Balsamiq Mockups to all those who are not interaction designers and information architects- for use by the technical team to brainstorm UI in organizations or smaller projects that do not have the luxury of having an interaction designer or team on board.
  3. I would not recommend it for large-sized projects where wireframe creation speed and management is crucial, when you are creating a large number of wireframes for a project and linking them together carefully so every one of them stays current through minimum effort when you are required to update common components.
  4. I think it would be interesting (and this I will try as I plan and execute usability tests every month of the year) to use Balsamiq Mockups to quickly recreate paper prototypes in Balsamiq Mockups and print them out for testing instead of the paper prototype itself, for a bit of neatness and order.
  5. Hand drawn style that makes it look like a trace of a paper prototype may or may not work for your organization or client. So if you decide to use it, make sure your stakeholders- whether internal or external are comfortable with a sketchy rendering instead of the conventional lines and boxes.

Issue with exporting multiple page click-through HTML prototype in Adobe Fireworks?

Solution Summary:
Simply deselect the ‘‘Current page only’ check box in the Export dialog window to export all pages of your Fireworks built click-through prototype.

Read More »