Comments inline...
On 6 Jul 2009, at 18:21, Kevin Fox wrote:
On Fri, 2009-07-03 at 01:40 -0700, David McLeod wrote:
So, how about something different today?...
First thing to do is to download this thumbnail sketch I did quickly
this morning before going any further:
http://people.fluendo.com/dmcleod/epd_thumbnail.pdf
Looks good.
What I want to do is explain some of the issues with UI design and
interaction.
So check out the image now...and everything in light blue pen is
where
I label what the crude little doodles are :)
Everything in orange I will use to explain some interaction issues.
K.
This is an insight into how I work, I quickly go through basic
conceptual problems with little crappy thumbnails that usually only I
can understand :). This allows me to work fast and get an overview of
the problems I might face. Later on, I might sketch on specific parts
of it or focus sketches on a particular use case (across multiple
thumbnails usually)... then I might produce a 'comp' which is kind of
a more detailed thumbnail either drawn or loosely produced in
Phtooshop. Then when I feel I have it all solved... only then do I
make a full proper visual. I do these full visuals pixel perfect as
well which is a lot of time upfront but it means less confusion later
on. (sometimes I show buttons states or pull out new unique elements
and document the interaction of those seperately with more focus...
again pixel perfect).
Note: I always only ever consider the remote control when designing
for Moovida.
The order of priority for anything we do here goes: Remote,
Keyboard, Mouse, Touchscreen. It has to work with the remote (Apple
remote is our default of choosing currently), anything else is just
a bonus.
Since a six button remote is very confining in what it can do, that
order of operations makes sense.
So, what am I tackling here?
I am looking at the Full EPG, and thinking about how it would fit
into
Moovida.
So I have considered each TV station would have a visual thumbnail,
each station has a row that has their upcoming shows listed on a
horizontal timeline.
You go up and down to access each TV stations timeline... left and
right to browse along the upcoming shows within it.
So, what problems do I immediately see?
Well, considering that Moovida uses an opacity technique to tell the
user that additional things (e.g. bars of a list) can be scrolled to,
I am not sure how to do this with an EPG guide like this.
If you are a visual person you might understand what I mean.
How do I do opacity changes on the 'grey bars' we use when they move
to the left of the screen and tuck under the TV station logos?
Those bars are going to be different lengths to represent different
lengths of the TV shows...then we need to do the same technique for
the right of the screen.
Instinctively, I know this is going to look visually weird... but
maybe, I might be able to solve this in Photoshop or by testing out
some 'comps' to get this worked out...so for now I will continue.
I think you just need to place enough space between the left edge of
the
channel name and the right edge of the currently selected time. If you
really want to make that space small, maybe add an arrow in that spot,
or by the "Time" header. showing there is more stuff there.
If only it were actually that simple :)
Plus, as a rule... no arrows in Moovida... takes up wasted space.
Thats why opacity is used to suggest 'more'... the list items roll off
the bottom and top edges through opacity.
Next problem, I read in a previous email that some like the Now &
Next
guide vs the Full EPG...ok, one idea was to use the 'view option'
buttons we have top right in Moovida to toggle between the two. BUT,
how can I do that with such a limited navigation concept and limited
buttons on the remote?
Let me explain... (check out the orange arrows on the thumbnail
sketch) I go up and down TV stations (imagine there are 100 or so),
so
that means the up and down buttons are taken... then I go left and
right through the 'timeline'... that means the left and right buttons
are taken. So, I have a problem now... I can navigate up to those
buttons so the user can switch between the views!
I suppose I could be mean to the user and say, sorry, if you are at
channel 100, you just got to keep scrolling until you get to the top
most channel...then press up again... and you can now change
views. That however, is not user friendly, and shows the user no
compassion for their problem.
So, what is the solution to this? Well, continue to brainstorm on
this, test out some ideas, figure out some creative visual problem
solving but, keep my mind open to other possibilities... next
email, I
have a different idea :).
The timeline is rooted at 'NOW()' on the left. Nothing exists to the
left of now. So, most of the time you want to switch the views you
will
be at 'NOW()' anyway, or are within one 'left' keypress. So, I'd make
the 'left' key press when on 'NOW()' move up to the selector. That
makes
it fairly easy to get to from a 6 button.
Yeah, you cant think like that though. Not totally.
As a rule you cannot allow a user to 'get stuck' in any UI and then
argue your way out of it. (dont get me wrong, I agree with your
presumption though in part)
The user in the Full EPG, at the moment with current thinking could go
forward one whole week and get 'stuck'... only way out of it is a good
amount of button presses.
You shouldn't do things like that to the user.
Kevin
David McLeod
Senior Designer & UI Lead
Fluendo S.A.
World Trade Center Edificio Norte Pl.2
08039 BARCELONA SPAIN
Tel: +34 936 002 323
Skype: Daiode
Jabber/GMail: [email protected]
Email: [email protected]
David McLeod
Senior Designer & UI Lead
Fluendo S.A.
World Trade Center Edificio Norte Pl.2
08039 BARCELONA SPAIN
Tel: +34 936 002 323
Skype: Daiode
Jabber/GMail: [email protected]
Email: [email protected]
