UI sketch - Portrait

[t0m]

First - link to picture - http://bit.ly/adpcLT

Will people use 1 or 2 hands? Guess it's going to be hard to hit Key,
< --o--- > 100 BPM on the circular design though?

Put the features you use less, out of the way, see if you really need.
them.


Just because some aren't getting iPads, doesn't mean they aren't
useful content creating devices :) I've featured iPad salsa stuff
elsewhere - can pass on a link or two if there's interest. Let's just
say, there are some Major salsa players moving into the market. I'm
under NDA to them, but I know of a few ;) I'd agree, they'd be for
different purposes - iPhone is more on the go, iPad would be more
review/master controller. 5x more screen? I'll take that :)


There is a reason not to have all the features -
- KISS
- Crowding
- Confusing

Current UI for Circle UI - there's a lot

1) Key selector
2) < button
3) Volume Slider
4) > button
5) BPM selector
6) < key
7) > key
8) Info bar
9) List
10) Beat visualised
11) Settings page link
12) 10 instruments
13) Menu open (kinda old school popover)
14) i Info Screen link
15) |<<
16) | |
17) >>|
18) Master volume

Whilst it's a bit overwhelming at the start, it does pack things in.
The < and > at the stop might be too close to the other controls at
the top maybe, and the bottom UI under the bass could get shrunk down,
but it's looking a good setup :)

Seeing as Uri's coding all this, maybe adding features as it develops.
You can have a plan for the finished product, which helps, then
smoothly update with new features.

You could have video - with a non circular layout - there is space in
the middle for a small video box. Horses for courses - 50:50 - by
going square, you get the space for a square/rectangular video box.


I'm interested to hear about the usage of the play/[pause button
SalsAlx - when i've used the SBM, it's more continual - Is it
something to have there to be able to stop and start quickly and many
times, whilst teaching with the app? I'm thinking a salsa teacher
would do this, but that'd be a different usage to someone who's got it
in their pocket to dance to with/without music, and again different to
someone using it in the background whilst doing chores to get a feel
for the beats and the rhythms.
So maybe users could be:
Teacher - Needs easy start stop. wants lots of features
Dancer - wants something to start and leave running, do with music
songs in the app (which is likely the easiest way to truly have it in
sync with songs - preselected collated curated songs that fit)
Learning rhythm - wanting playlist, slowly rotating groupings of
instruments
Uri could give some insight here - as to usage he's seen, and others.

I think for the v1 - you don't need the |<< and >>| We'll be waiting
till Apple changes settings (which we might see in the SDK for OS 4,
we'll see…)
I'd imagine users might get a bit confused with using the SBM with
their own music, if the option became available, unless their music
really has a fixed, simple BPM. Otherwise it's going to be out/not in
sync very quickly - Uri - maybe some of the DJs at salsaforum could
give you an opinion? I really like the concept of linking the SBM to
music - truly! But the user doesn't want to have to keep tweaking the
SBM's BPM, or nudging it to fit the music. Having preselected music
that works with it is great. Could be an ok unsupported feature?

I'm thinking the BPM, and Key could use a
|▲|
|▼|

So you could have

|▲|
. . BPM
|▼|

and

|▲|
. . Key
|▼|


instead of < > - Up down kinda links more to a list/High is low
BPM, Down is higher BPM. Is a possible - you need more vertical space.
It does link the word BPM, Key more to the up down keys for the user
i'd say.


Selecting/showing selected instrument:

Possibilities:
1) Single tap selects the instrument, double tap turns it on/off
2) Single tap selects instrument, tap&hold turns instrument on/off

3) Single tap turns instrument on/off, double tap selects instrument
4) Single tap turns instrument on/off, tap & hold turns instrument on/
off


Guess one decision may be - is selecting an instrument (and thus
getting ready to alter it's volume, pattern) or turning an instrument
on/ off more important?

I think the spotlight looks nice on the congas - bit smarter than a
chrome circle or square highlight edge around the selected
instrument.
I like it in Garageband - think it works well - intuitive. Spotlight
is kinda yeah, a spot light :)


BPM Slider or up and down buttons? Controversial hehe :) I think both
can work - Would be useful to differentiate between a volume slider
and a BPM slider if you're going BPM slider.
Once you've got basic icons for UI, i imagine it'll be easier to move
them around, and see what fits well. Near to thumb, at the bottom, if
you're using thumb to control, is prime time UI space. You're not
going to be changing a volume control as much as instrument pattern,
or pausing, perhaps. (I can't talk at the moment really - , the
current UI mockup i'm trying to make has the beat counter at the
bottom - one of the UI parts still on the screen that you can't
actually interact with).

Volume control - top or bottom? If the user is using the app through
a speaker - then the user will want to have this presumably - as the
volume rocker on the side might not make the volume through the
speakers change
If the user is using the iPhone app by itself, the physical volume
rocker is in effect the hardware volume control. You could have a
synced software slider, but it's a little redundant. I haven't been
able to do it in the mockup picture, but having the colour of volume
slider really would be useful to indicate it's linked to the
highlighted instrument (spotlighted). You could have a lock symbol,
that flipped between master volume when locked, and highlighted
instrument when unlocked?

BPM - with slider or not? Above or below instruments?
Play/Pause - agree - have near bottom. You could have it offset, next
to the dominant hand's thumb (have a control setting that could swap
left/right side with the settings/info pace page?

Guess you've got 2 debates as well - the horizontal and the portrait
UI :)
Would many use the app horizontally/vertically? I'd imagine when
reviewing (not dancing) horizontal might be favoured, but whilst
standing or moving, vertical is easier to hold.
Horizontal can come later i'd say - link the development of horizontal
to v1.x or ipad app development
Haven't added, but could have text under instrument. to be honest,
it'll look less clean with it. Maybe have the text below only show
when the instrument is on/playing?


Why oh why is there a big space in the middle?
You can put video there. or dynamically have a list of the interment
patterns list (think how a horizontal iPod looks like when you flip
the album art). You could also have a settings icon to then be able to
spin this patterns list, to then save the list (likely best to look at
other apps to see their UI?)

You could have a video, with speed linked to bpm? Could be able to
swap video clips, to see how they work, and how they link to each dif.
instrument (which is way cool!) It could also help you show on1 vs on2
(not simultaneously, but have 2 dif. video sets).

E.g. Basic, or cucaracha, or cross body lead, in relation to clave…

There are already iPhone apps that do this - can't remember the name,
but there's a post on tomtubbs.tumblr.com listing them.


--
Subscription settings: http://groups.google.com/group/sbm-community/subscribe?hl=en

[t0m]

Easiest way to see layout - just take current beta, turn upside down.
Doh!

Circle looks nicer, current upside down does give space for a synced
video.

[SmartAlx]

See below for my replies.

On Apr 22, 2010, at 4:58 PM, t0m <tft...@googlemail.com> wrote:

First - link to picture - http://bit.ly/adpcLT

Will people use 1 or 2 hands? Guess it's going to be hard to hit Key,
< --o--- > 100 BPM on the circular design though?

In Uri's layout? I agree.

Put the features you use less, out of the way, see if you really need.
them.

Or hide them altogether and provide an intuitive easy to find icon to get to them. 

Just because some aren't getting iPads, doesn't mean they aren't
useful content creating devices :)

Sure sure.  Totally agree.  But as far as this app is concerned, I can't conceive of any feature that would work well on the ipad and nit work well at all on the iPhone.  The only thing I could think of would be playing more instrument rhythms like the conga and possibly watching a larger video screen.  I think the allure of the ipad is that you don't have to switch screens.  All of the features could be right there in front of you, but I think the simplicity the iPhone requires makes it all the more desirable.  We don't want too much complexity and adding screens and options to the main UI page is going to do just that.  The UI I posted keeps it simple and enables all the sophistication and power anyone would want.  The only thing missing is personal music control, but I think it's clear that's not going in the v1 app. 

I've featured iPad salsa stuff
elsewhere - can pass on a link or two if there's interest. Let's just
say, there are some Major salsa players moving into the market.

Sure, I can see how Eddie the salsa freak or Eddie Torres would make use of the ipad.  It's also ideal for a fully functional DJ app, well, almost... still has only 2 audio channels if I'm not mistaken and a dj needs at least 4.

I'm
under NDA to them,  but I know of a few  ;) I'd agree, they'd be for
different purposes - iPhone is more on the go, iPad would be more
review/master controller.  5x more screen? I'll take that :)


There is a reason not to have all the features -
- KISS
- Crowding
- Confusing

Sure I agree, but more complexity can be hidden.  I don't think I've added any features... yet.

This is probably the best reason for going square but I'm not convinced.  Does the end user want to control the instruments at the same time he wants to watch the video?  I envision a small icon, perhaps in the upper left corner of my UI, that causes the video to zoom in from the center.  All of the other panes are still there.  Well the instrument control pane will be gone too.  Another reason to put bpm and key on top.  Another button located on the same spot returns the video to the instrument screen.  

I'm interested to hear about the usage of the play/[pause button
SalsAlx - when i've used the SBM, it's more continual - Is it
something to have there to be able to stop and start quickly and many
times, whilst teaching with the app? I'm thinking a salsa teacher
would do this, but that'd be a different usage to someone who's got it
in their pocket to dance to with/without music, and again different to
someone using it in the background whilst doing chores to get a feel
for the beats and the rhythms.
So maybe users could be:
Teacher - Needs easy start stop. wants lots of features
Dancer - wants something to start and leave running, do with music
songs in the app (which is likely the easiest way to truly have it in
sync with songs - preselected collated curated songs that fit)
Learning rhythm - wanting playlist, slowly rotating groupings of
instruments
Uri could give some insight here - as to usage he's seen, and others.

Is it really bothering you to have a big play pause button?  That was one of my complaints about the original online salsa beat machine.  No way to turn it off when a phone call comes in.  I'm pretty sure everyone would want to be able to easily pause the sound.

I think for the v1 - you don't need the |<< and >>|  We'll be waiting
till Apple changes settings (which we might see in the SDK for OS 4,
we'll see…)

I'd imagine users might get a bit confused with using the SBM with
their own music, if the option became available, unless their music
really has a fixed, simple BPM.

Well, obviously they would have to nudge the music.  And they would have to have the BPM figured out.  

Otherwise it's going to be out/not in
sync very quickly - Uri - maybe some of the DJs at salsaforum could
give you an opinion? I really like the concept of linking the SBM to
music - truly! But the user doesn't want to have to keep tweaking the
SBM's BPM, or nudging it to fit the music. Having preselected music
that works with it is great. Could be an ok unsupported feature?

The DJ app I use, Quixpin, figures out the BPM fairly accurately.  It creates an  industry standard file that identifies the beat locations and provides a graphic visual representation of the song.  Pretty cool.  I imagine that might be a but difficult for Uri to code but if he could eventually get that function, frikkin awesome.  Then it would be possible for the end user to lick a song and have the SBM automatically line up.  At worst he'll have to nudge the song from beat 6 to beat 1, by whole beats unread of milliseconds.  If Uri can code it, it would be pretty easy for the end user.

But even if Uri can't code it, should that mean we can't have the function? I'd be willing to pay premium for the ability to play my own music alongside the SBM.

I'm thinking the BPM, and Key could use a
|▲|
|▼|

So you could have

|▲|
.     . BPM
|▼|

and

|▲|
.     . Key
|▼|


instead of <   >    -  Up down kinda links more to a list/High is low
BPM, Down is higher BPM. Is a possible - you need more vertical space.
It does link the word BPM, Key more to the up down keys for the user
i'd say.

Design wise, a portrait orientation wants horizontal elements to offset the height.  I think horizontal sliders are very intuitive on the iPhone, but a vertical one might be ok too.  I definately want a slider for the BPM, and why not for the key too?

Selecting/showing selected instrument:

Possibilities:
1) Single tap selects the instrument, double tap turns it on/off
2) Single tap selects instrument, tap&hold turns instrument on/off

3) Single tap turns instrument on/off, double tap selects instrument
4) Single tap turns instrument on/off, tap & hold turns instrument on/
off


Guess one decision may be - is selecting an instrument (and thus
getting ready to alter it's volume, pattern) or turning an instrument
on/ off more important?

I don't think the issue is over importance but of intuitiveness.  Even if turning instruments on/off is more important than changing their settings (which is debatable), I think it's far more intuitive to tap to select and tap and hold or double tap to turn on.  But that's just my opinion.  Double tap is quicker than tap and hold, so I vote for double tap.  Tap and hold I would reserve for "select and do something while you are holding it," like adjust volume.  That's pretty intuitive to me.

I think the spotlight looks nice on the congas - bit smarter than a
chrome circle or square highlight edge around the selected
instrument.
I like it in Garageband - think it works well - intuitive. Spotlight
is kinda yeah, a spot light :)

I agree, although I don't like mine.  It's a lense flare.  My Photoshop skills aren't all that sophisticated.

BPM Slider or up and down buttons? Controversial hehe :) I think both
can work - Would be useful to differentiate between a volume slider
and a BPM slider if you're going BPM slider.
Once you've got basic icons for UI, i imagine it'll be easier to move
them around, and see what fits well. Near to thumb, at the bottom, if
you're using thumb to control, is prime time UI space. You're not
going to be changing a volume control as much as instrument pattern,
or pausing, perhaps. (I can't talk at the moment really - , the
current UI mockup i'm trying to make has the beat counter at the
bottom - one of the UI parts still on the screen that you can't
actually interact with).

Keep in mind conventions, intuitiveness and usability.  And of course the intended audience.

Volume control - top or bottom?

Bottom.  Convention answers that question.

 If the user is using the app through
a speaker - then the user will want to have this presumably - as the
volume rocker on the side might not make the volume through the
speakers change
If the user is using the iPhone app by itself, the physical volume
rocker is in effect the hardware volume control. You could have a
synced software slider, but it's a little redundant. I haven't been
able to do it in the mockup picture, but having the colour of volume
slider really would be useful to indicate it's linked to the
highlighted instrument (spotlighted). You could have a lock symbol,
that flipped between master volume when locked, and highlighted
instrument when unlocked?

I don't think it needs to be that complicated.  Unselect all of the instruments to set the master volume.

Oh! That brings up another option, Tao and hold any instrument and tap another instrument to select both.  That way you can control the volume of several instruments at the same time.  Intuitive but not all that important. 

BPM - with slider or not? Above or below instruments?

Above since it's a slider and convention puts volume at the bottom. It also makes sense because it's information and you usually expect to find information at the top, near the status bar.  The higher up, the higher the priority.

Play/Pause - agree - have near bottom. You could have it offset, next
to the dominant hand's thumb (have a control setting that could swap
left/right side with the settings/info pace page?

Guess you've got 2 debates as well - the horizontal and the portrait
UI :)
Would many use the app horizontally/vertically?

I don't know.  I'd put landscape view off until v2 at the earliest.

I'd imagine when
reviewing (not dancing) horizontal might be favoured, but whilst
standing or moving, vertical is easier to hold.
Horizontal can come later i'd say - link the development of horizontal
to v1.x or ipad app development
Haven't added, but could have text under instrument. to be honest,
it'll look less clean with it. Maybe have the text below only show
when the instrument is on/playing?

That's an option, or have it dark, but I'd like to know what the instrument is BEFORE I turn it on.  I personally think the text should be visible all the time.  I think it's expected.  It's not cluttered on the iPhone home screen so it wouldn't be on this one either.

Why oh why is there a big space in the middle?

Because it's nice.  Empty space emphasizes the importance of the instruments and helps the UI look cleaner.  

You can put video there. or dynamically have a list of the interment
patterns list (think how a horizontal iPod looks like when you flip
the album art).

Album art like flipping is exactly what I would like to see.  But don't keep the instruments visible. Flip them over to display the video or the instrument options. 

You could also have a settings icon to then be able to
spin this patterns list, to then save the list (likely best to look at
other apps to see their UI?)

You could have a video, with speed linked to bpm? Could be able to
swap video clips, to see how they work, and how they link to each dif.
instrument (which is way cool!) It could also help you show on1 vs on2
(not simultaneously, but have 2 dif. video sets).

I think that's the idea behind the video.  Linking it to specific instruments instead, or more accurately to different rhythms, would be pretty difficult to implimemt I think.  But it would be cool. 

E.g. Basic, or cucaracha, or cross body lead, in relation to clave…

There are already iPhone apps that do this - can't remember the name,
but there's a post on tomtubbs.tumblr.com listing them.

Really??  I'll have to check it out.

[t0m]

Just a quick add on - porting app output to line in for Garageband -
It's interesting to see how Apple's done the UI in Garageband.
(Settings, Audio/MIDI tab, Audio input to built in input, then hook up
a 3.5mm to 3.5m jack from iphone speaker jack to Mac Line in jack. Add
an instrument + at botom, real instrument, and then crank the sound up
on the iphone/touch.

Once you've recorded a clip - Can play with the Key, Tempo, Signature

Project
Tuner
Measures
Time (using a clock icon hehe)

Time not really too relevant, as you've got a beat visualiser.
Project - alter Key, Tempo, Signature.

Clicking on Key gives a list to the right, clicking on Tempo gives a
vertical slider.

Might all change a bit in iLife 2010, we'll see (they've got a 64 bit
move to worry about) - but their UI was in a way ahead of Snow Leopard
(moving away from aqua, towards Marble/Snow Leopard's black
background.).

Might be other useful apps to get some pictures collated of how
they've done their UI (esp. for the Phone 3.5 inch screen size).

[t0m]

I'd agree- the iPad would add space for video, I'd say however, that
the Salsa Beat Machine is likely to get crowded out of that market
potentially - as once you've imported your salsa beat loops for the 10
or so instruments, with different patterns, then you can use
Looptastic/other - and it might be easier to modify/load up files
into these sorts of apps.


I think that a video screen would be useful - Visually relating a
salsa movement to an instrument's pattern I think is worthwhile - I'd
imagine it'd help with finding the 1, and getting a handle on where
the body in relation to the instrument - something that's easier to
internalise from seeing, than having to visualise that. Not too sure
about multiple channels - seems one DJ recently has had enough good
fortune with 2x iPads. You could always be using the iPad to control
Ableton or other, to give you more audio channels.

Does the user want to control instruments whilst watching video? Well,
as above, i'm theorising that maybe, yes - in the situation of
isolating individual instruments, and how the relate to the 123, 567
of on1. People new to the scene take a while to get acclimatised to
actually hearing the rhythms themselves - being able to see someone
doing basic salsa moves correctly to these instruments might well
help. I'd say it would be worth testing out.

Shifting the icons to a more lattice /grid positioning just makes some
extra space for the video. If you had cycling instruments, maybe you
could get rid of the instrument control, so then not need to show the
instruments, so negate the need for the grid arrangement.


Hehe well maybe i'm too fixated on not having too big a play button.
The iphone app should be able to be coded so it stops when a phone
call comes in, save state. Background playing for OS 4.0 would be part
of this too. I can usually pretty easily pause using the iPod
horizontal orientation pause button - but i've got a cover on my
iphone, to my finger pad just needs to touch the corner of the
protector, and it's at the right spot.

Quixpin looks a good app having skimmed http://appshopper.com/music/quixpin-dj
- whats the industry standard file that identifies the beat locations
and provides a graphic visual representation of the song?

Can the file ID all the beats in a song? that sounds the best - It
would be an amazing dbase if you had that for song you'd double
checked - you could guarantee that the app could find the beats, self-
correct. Would be an amazing tool.

I'd agree - might be a bit of a task to code - but having a BPM
locking system would be awesome - I guess if there's the right
instrument, you could do a high pass/low pass, to lock onto a congas
4& 8& or the clave when they're playing?

If you could enter songs to be beat mapped, then in teh meantime see
if the app could find the BPM, find the 1, find the song structure -
or even just to be able to BPM match to be able to play the SBM
instruments on top

I think once Apple opens the gates, it'll become a feature v. fast -
developers really do want the capability to access and use the music
on the user's iphone/Touch.

I'd agree horizontal elements can work with vertical orientation -
it's just that they can really take up screen space - maybe appear
when needed? I like the concept of a space where you can have the UI
for the BPM, or Volume or Key. Key seems to be lessing fitting to a
slider? Could work - Seems more of a notched slider thing - Think i'm
thinking of sliders as a continuum scale.

Agree selecting instrument is to be intuitive, and also give best
selection method to the most important features.

Agree tap hold is not so nice. you don't know when it's occurred, you
can't see under your finger. with double tap,
like a mouse, you're pretty guaranteed to get it right.

A push buttom, in real life, is usually more about 1 touch. touch on,
touch off. Not many buttons in real life use double tap? But as a
multitouch surface, double tap becomes an option, and is a decent
gesture.


Not sure about having to unselect all playing instruments, to be able
then to set the master volume. Seems nice to be able to bring that up
at whatever state the app is in?


For linking videos - ain't hard to link to rhythms, and video - if
your audio is coming from the audio part of a video recording - This
is something where getting decent recordings of the instruments of a
salsa band helps. Then you have the visuals, you have them in sync.

Guess we'll see different implementations! (will see how Anthony
develops his instrument section for example).