Navigation Concept: SpiderWebPanel

Discussion in 'Skins and Design' started by offbyone, July 3, 2011.

  1. offbyone
    • Team MediaPortal

    offbyone Development Group

    Joined:
    April 26, 2008
    Messages:
    3,981
    Likes Received:
    2,704
    Gender:
    Male
    Location:
    Stuttgart
    Ratings:
    +3,303 / 3
    Home Country:
    Germany Germany
    Show System Specs
    I've been thinking a lot about Navigation (at least for a new Home Screen) in MP2. It is the first thing the user sees when he fires up the all new shiny MP2, and in my eyes that first look must blow him away instantly or otherwise we will not get that much good feedback. We should show how capable the new architecture is.

    This new concept must fulfill two key requirements:
    a) make navigating inside the screen fun for the user!
    b) allow the user to quickly get to the target screen he is looking for



    To summarize the current status:
    Almost all homescreens (MP1 and 2) use the same layout: A looped list (either horizontal or vertical) with the menu items. This is largely due to the limitations of the engine and available controls. But it does not fulfill both criteria above. It's definitely boring to scroll though a long list and it won't get the user fast to his goal.

    My Idea:
    One thing to inspire here: The human brain will much better remember angles than positions in homogeneous lists. therefore I'd like to arrange the menu items radial around a center. To get around the limited space in one radius, there should be more "circles" around the center holding items. For example an inner circle with 5 items and an outer circle with 8 items (and even more circles). The items can be visually connected with line towards the center and also along their circle. This would form a spiderweb :)
    In order to make it even more fun, on opening the screen the item should all explode from the center to their designated position int he web. Upon focusing an item, it can grow and wobble to clearly state the current selection.
    The items themselves are free to the designer as templates (if we are really good some kind of shadow effect on those items will give the whole web a 3D look).

    Share your thoughts!

    Here's a really rough mockup (beware I am really bad with drawing skills)
     

    Attached Files:

    • Like Like x 2
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. Mike Lowrey

    Mike Lowrey Portal Pro

    Joined:
    February 4, 2009
    Messages:
    638
    Likes Received:
    125
    Location:
    Berlin
    Ratings:
    +125 / 0
    Home Country:
    Germany Germany
    I don't know if this really works exactly as you suggested, but when i read your explanation i had an idea which might be more efficient.

    With the shown approach could be more flexible regarding the screen size and combine the advantages of your idea.
     

    Attached Files:

    • UI.png
      UI.png
      File size:
      38.3 KB
      Uploaded:
      July 3, 2011
      Views:
      378
  4. offbyone
    • Team MediaPortal

    offbyone Development Group

    Joined:
    April 26, 2008
    Messages:
    3,981
    Likes Received:
    2,704
    Gender:
    Male
    Location:
    Stuttgart
    Ratings:
    +3,303 / 3
    Home Country:
    Germany Germany
    Show System Specs
    Wait you are already extending to sub items :) My proposal was without hierarchy yet.
     
  5. Mike Lowrey

    Mike Lowrey Portal Pro

    Joined:
    February 4, 2009
    Messages:
    638
    Likes Received:
    125
    Location:
    Berlin
    Ratings:
    +125 / 0
    Home Country:
    Germany Germany
    Ah! I thought the outer circle (with the video called items) should somehow represent the sub items of the inner circle ;) That's my fault!

    Nevertheless for me it seems problematic to have more than one circle(around home) because it seems unintuitive why an item should be in an outer circle and how i can reach it(your mockup suggests that i somehow can browse to the outer circle without passing the other ones doesn't it?).
     
  6. offbyone
    • Team MediaPortal

    offbyone Development Group

    Joined:
    April 26, 2008
    Messages:
    3,981
    Likes Received:
    2,704
    Gender:
    Male
    Location:
    Stuttgart
    Ratings:
    +3,303 / 3
    Home Country:
    Germany Germany
    Show System Specs
    You cannot get to the outer circle directly, focus will be set according to x,y coordinates of the closest item. So to get from Home to something on the outer ring, you need to step through one item of the inner ring. the lines are just for visually showing the spider web :)
     
  7. Mike Lowrey

    Mike Lowrey Portal Pro

    Joined:
    February 4, 2009
    Messages:
    638
    Likes Received:
    125
    Location:
    Berlin
    Ratings:
    +125 / 0
    Home Country:
    Germany Germany
    Okay that sound better :) Any thought on what should be the reason why an item is in the inner or outer circle?
     
  8. offbyone
    • Team MediaPortal

    offbyone Development Group

    Joined:
    April 26, 2008
    Messages:
    3,981
    Likes Received:
    2,704
    Gender:
    Male
    Location:
    Stuttgart
    Ratings:
    +3,303 / 3
    Home Country:
    Germany Germany
    Show System Specs
    Not really :)
    In general we only have a plain flat list of menu items (=plugins or screens). The user could sort them in configuration to his liking (meaning prioritize them, as currently possible in MP1 config "home" entry under plugins). This list is then taken and put into the spiderweb, starting at the most inner ring at 0° going around the circle and then farther to the outer circles. (This is needed because of the limited space - we can't put an arbitrary number of items into a circle, that would make the items smaller and smaller).
     
  9. tomtom21000
    • Premium Supporter

    tomtom21000 Retired Team Member

    Joined:
    April 22, 2004
    Messages:
    1,226
    Likes Received:
    59
    Location:
    Germany
    Ratings:
    +64 / 0
    I really love to see some fresh ideas!

    But I think circles are difficult for a navigation concept. How would you navigate these circles with a remote?

    A long time ago I made some sketches for a grid like menu (Can't find it atm). Might be a bit more boring but has some advantages:
    You see possible submenu-items with a glance. you have short ways for arrow-key navigation. If you limit it to a certain arrangement of fields , you could make them choosable with the remote number keys.

    one column could be e.g.

    -music
    --mp3 collection
    --radio
    --last.fm
    --youtube.fm

    -tv
    --live tv
    --recorded tv
    --online video
    --movies
    --series

    just some quick thoughts. Main concern is about an intuitive navigation with remote.

    tomtom
     
  10. Spragleknas
    • Team MediaPortal
    • Administrator

    Spragleknas Administrator

    Joined:
    December 21, 2005
    Messages:
    9,472
    Likes Received:
    1,385
    Gender:
    Male
    Occupation:
    Occupied
    Location:
    Located
    Ratings:
    +1,892 / 12
    Home Country:
    Norway Norway
    Show System Specs
    This sounds interesting!

    So:
    - Now subemnus (yet).
    - Only four alternatives each move (up, down, left, right)

    Not sure I got it right, but this could be something like it:

    After hitting TGB:
    start.png
    4 choices. Going up would transform to:
    afterup.png
    ... which leads to several new choices.

    Hm... not easy to explain.... getting late.
     
    • Like Like x 1
  11. hardcorehire

    hardcorehire Portal Pro

    Joined:
    April 1, 2008
    Messages:
    108
    Likes Received:
    45
    Gender:
    Male
    Occupation:
    Engineer
    Location:
    OHIO
    Ratings:
    +45 / 0
    Home Country:
    United States of America United States of America
    I would hate to be a copy cat, but has anyone considered copying the new look of windows 8 as a template. Each plugin being a live tile with up to date information. You could use swipe (forward/back buttons on remote) to scroll through menus and/or running plugins for fast loading. There are just so many interesting possibilites with MP2 I have my own ideas, but I kind of got inspired after reading this and have been thinking about the new win 8 layout.
     
Loading...

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

  • Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!