Navigation Concept: SpiderWebPanel (1 Viewer)

offbyone

Development Group
  • Team MediaPortal
  • April 26, 2008
    3,989
    3,712
    Stuttgart
    Home Country
    Germany Germany
    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)
     

    Attachments

    • SpiderWebNav.png
      SpiderWebNav.png
      21.4 KB

    Mike Lowrey

    Portal Pro
    February 4, 2009
    638
    124
    Berlin
    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.
     

    Attachments

    • UI.png
      UI.png
      38.3 KB

    offbyone

    Development Group
  • Team MediaPortal
  • April 26, 2008
    3,989
    3,712
    Stuttgart
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #3
    Wait you are already extending to sub items :) My proposal was without hierarchy yet.
     

    Mike Lowrey

    Portal Pro
    February 4, 2009
    638
    124
    Berlin
    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?).
     

    offbyone

    Development Group
  • Team MediaPortal
  • April 26, 2008
    3,989
    3,712
    Stuttgart
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #5
    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 :)
     

    offbyone

    Development Group
  • Team MediaPortal
  • April 26, 2008
    3,989
    3,712
    Stuttgart
    Home Country
    Germany Germany
    • Thread starter
    • Moderator
    • #7
    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).
     

    tomtom21000

    Retired Team Member
  • Premium Supporter
  • April 22, 2004
    1,226
    120
    Germany
    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
     

    Spragleknas

    Moderator
  • Team MediaPortal
  • December 21, 2005
    9,474
    1,822
    Located
    Home Country
    Norway Norway
    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.
     

    hardcorehire

    Portal Pro
    April 1, 2008
    108
    45
    OHIO
    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.
     

    Users who are viewing this thread

    Top Bottom