HCI Working Blog

We all remember our sweet childhood, when our mother or grandmother spent a lot of time telling us different stories and we went to sleep with a smile on our faces, dreaming about fantastic scenes.

As it turns out, those times are not gone yet. What we need to do now is tell a story, just like grandma used to. Well… sort of, anyway. 😀

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). 🙂

1) Design overview

storytelling - overview

This wireframe presents the main controls. The number of buttons is fixed on the cover, so each button will have a different function, depending on the current context:

At the start of the application:

  • Help – audio tutorial
  • Browse – listen to previously saved songs
  • Options – change different application settings
  • New composition – activates the composing context

While browsing:

  • Previous – previous song
  • Share – shares current song
  • Home – returns to the main menu
  • Help – audio tutorial
  • Next – next song
  • Edit – edit song
  • Delete – deletes current song

While composing:

  • Backspace – Undo
  • Save – saves the current song
  • Home – returns to the main menu
  • Help – audio tutorial
  • Space – musical break
  • Musical notes (including sharp and flat notes)

While editing:

  • Previous – previous note
  • Home – returns to the main menu
  • Help – audio tutorial
  • Next – next note
  • Edit – edit note
  • Delete – deletes current note
  • Musical notes (including sharp and flat notes)

The wireframe below presents the musical note keys:storytelling - overview2

2) Story – Composing

Step 1: Press “New”

Activates the composing context, used to create a new song.

Step 2: Press a sequence of musical notes

One or more musical key notes can be pressed in sequence to create a song.

Step 3: Press „Save”

Save – Saves the current composition

Step 4: Type the song name

Uses the keys to type different characters.
Change characters – switches between letter, digits and special characters input
Backspace – removes last character
Space – inserts a white space

Step 5: Press „Save”

Save the song with the typed name.

Step 6: Press „Home”

Closes composition context and activates the main menu context.

3) Story – Sharing a composition

Step 1: Press „Browse”

Activates the song browsing context.

Step 2: Press „Previous” / „Next”

Press „Previous” or „Next” to navigate through the song list, to find the composition that you want to share

Step 3: Press „Share”

Press „Share” to share your composition on Last.fm

4) Story –  Editing a saved composition

Step 1: Press „Browse”

Activates the song browsing context.

Step 2: Press „Previous” / „Next”

Press „Previous” or „Next” to navigate through the song list

Step 3: Press „edit”

Press ”Edit” to activate the editing context.

Step 4: Press „Previous” / „Next”

To select a specific musical note use the „Previous” and „Next” buttons.

Step 5: Press „Delete” / „Edit”

Use „Delete” button to erase the selected note or „Edit” to continue composing.

Step 6: Press a sequence of musical notes

One or more musical key notes can be pressed in sequence to compose a song.

Step 7: Press „Save”

Save the selected composition.

 

 

And Beethoven composed happily ever after… 🙂

 

You can also download this story, as PDF.

Advertisements

Comments on: "Storytelling, just like grandma used to do it" (2)

  1. […] you can see in the ”storytelling” post, some of the elements or actions repeat after a precise pattern. In this post we will explain some […]

  2. […] the storrytelling post, we presented you a sketch for this cover and there was mentioned that the main controls of […]

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: