Screen shot 2011-11-16 at 10

360 Tour - Progress/Location Bar

Shot_1299782218

5 Responses

  1. Pro Screen shot 2011-11-16 at 10 James Scott

    Currently working on designing an embedded 360 tour application designed to sell retail products as if you were actually walking through the store.

    I wanted to start with designing how the user moves and interacts with the application. The user will easily be able to move by hovering the mouse in the direction they want to go (in the tour panel) but I also wanted to have direct feedback of where the user is, how much they've seen, and how much more they have to discover.

    I designed a progress bar that also quickly shows your current location and the locations available to be accessed based on where you are standing in the tour. The radial buttons identify all the "entry's" and divide the "rooms" accordingly. The radial buttons become active based on the users current location (sliding tab at the top). This means the user can either click the highlighted radials in the progress bar or click on the door directly in the tour plane to enter another room.

    The rooms all contain there own progress bar based on how much of the room you've seen. If a user spins the tour plane 90 degree, the progress bar fills half way. The highlighted bar shows the progress of the current room you are in.

    I feel the progress display motivates the user to actually see everything there is to see in the tour and helps them easily jump to any locations they wish to see.

    Thoughts? I would love feedback.

    about 1 year ago

  2. Pro Ryan Ryan Le Roux

    First off, that's one sick slider.

    Can the users jump into any room? Or do they have to click through previous rooms in order to view the next?

    Could you label the radio marks to better reflect them being a room? Perhaps an icon?

    I don't know if I'm interpreting this correctly but I think it might make more sense to have arrows on each side of the slider to jump between rooms so that the slider is for each individual room. Then you could simplify your slider to only show your "active progress and your "unseen progress"?

    Hope that helps!

    likes

    about 1 year ago

  3. Pro Screen shot 2011-11-16 at 10 James Scott

    Thanks for the feedback Ryan.

    I'm working on a popup that will appear when the user rolls over the sliding tab. It will show a thumbnail, info, and progress of the current location of the sliding tab. The user can slide the tab, get info on it's location, and select "Jump To". This will allow the user to slide the tab and know exactly where it's taking them.

    The problem with simply having arrows is that a 360 tour isn't linear. There will be multiple routes in multiple locations. I just wanted to radio buttons to show the available entry's given the users location (these are the doors available for the user to click in the tour pane.

    This slider isn't mean to be the core navigation as the user will be using the mouse in the tour pane more frequently. It merely acts as a "map" of sorts. I will rebound the "thumbnail" popup shortly. I'd appreciate more feedback at that point if you have time ;)

    Thanks again!

    about 1 year ago

  4. Me_park

    Great work James, just a quick rebound.

    What if you showed little room previews in the bar? This would help convey to people what the different sections are, as well as let them click on sections they find interesting, rather than just blind clicking.

    about 1 year ago

  5. Screen shot 2011-11-16 at 10

    Some additional features to the interface. Preview popup appears above the tab slider showing a preview of the room and it's completion.

    Breaks down the completion into the media available to be seen in that room (video, photos, and purchasable products).

    Large percentage meter indicates total completion and the menu will open a list breaking it down by media types (similar to the preview window).

    about 1 year ago

keyboard shortcuts: previous shot next shot L or F like