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
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.
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.
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.
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 :).
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]
