HCI Working Blog

Storm – Brainstorm

Another meeting, another set of ideas.

This time, we went a little further. Having some external inspiration, we realized a few small details. First of all, Beethoven is a great pianist. He knows the piano’s key forwards and backwards, so making him draw lines and letters might not be very intuitive for him. So the best way that we could take is to simulate real piano keys. This means defining specific regions on the screen which the user can tap to record notes. Which brings us to the second problem: there are 8 primary notes (DO, RE, … SI, DO), plus a few other so-called sharp notes. And squeezing all these on a kinda small screen (let’s say, on a iPhone) would result in very thin regions which will be extremely hard (if not impossible) to be used by a person who can’t see them, specially since a touchscreen is, well… flat as a pancake, and doesn’t offer any haptic (tactile) feedback, which makes it even harder to be used to blind users.

How can we solve this issue? We thought about using a cover above the touchscreen, cover which can contain bumps (forming a specific model) which the user can really feel. And so, Beethoven can really enjoy that well-known feeling of piano keys under his fingers – well… sort of anyway πŸ˜€

Based on the idea of the cover, we thought real hard and came up with a few models:

The second set of ideas

Number 1:

The first sketch contains the 8 main piano notes (shaped as triangles, to offer a slightly larger tap area). Above them there are the sharp (diesis) and flat (bemolle) notes. And above all there is the main menu, with options such as “New”, “Save”, “Delete” or “Share”. All region limits can be felt with the fingers.

Number 2:

A similar idea as the first one, but it uses the Braille alphabet to describe each key’s function.

Number 3:

Offers slightly larger note keys because it lacks the sharp/flat keys (which can be achieved in a different way). Also, the top of the screen offers the main menu options.

Number 4:

Our best idea somehow combines the strong points of all the above. It’s overall design looks like the first one, but the regions have different functions in different modes, such as:

  • at the start of the app – top menu (in order): No, no action, Home, no action, Yes. The sharp keys (in order): Browse, Options, no action, no action, no action, Compose new song. The main note keys take no action;
  • while composing a song – the primary note keys and the sharp/flat keys can be used as note keys. The menu at the top offers these options (in order): Go one note back, Save the song and close, Home (discard the current song and go back to the start of the app), Delete the current note, Go one note forward
  • while browsing saved songs – top menu: Previous, Share song, Home, Delete song, Next song. The sharp keys: no action, Edit current song, no action, no action, no action, Compose new song. The main note keys take no action;
  • the main note keys can be used for inputing letters, for instance when setting up a sharing account (on the Options page).

All regions use the Braille alphabet to describe the ways that region can be used.

It might be kinda hard to understand exactly what we had in mind with this, but please bear with us. We will try to make it clearer in our future posts. Stay tuned. πŸ™‚


Comments on: "Storm – Brainstorm" (7)

  1. Andreea said:

    What about the hands with that nice manicure? You haven’t numbered them… And those were the best drawings (we’re very talented)…

    • You should know better than anyone that I’m a real talent when it comes to drawing πŸ™‚ and those hands are Beethoven’s hands πŸ™‚ , poor blind and deformed-hands Beethoven πŸ™‚

  2. […] were to design a cover for the iPhone that could help us to develop the 4th model described by Alex here and to establish Β the Personas for our project. The second task was successfully done (as you can […]

  3. @Petro
    This is not a Cris hands ?
    I can believe… πŸ˜†

  4. […] “Cover idea” it’s ilustrated here:Β https://blindbeethovenhci.wordpress.com/2011/04/06/storm-brainstorm/ […]

  5. […] In programming, storytelling means describing the flow of the application, using wireframes to present different views (and the relation between them). Different scenarios are presented, making it a bit clearer what exactly the user has to do in order to achieve a certain goal. So… this is our story (based on the cover idea). […]

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 )

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: