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