Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a 3D model of an aircraft in which the user uses to navigate to get to a specific parts. When the user hovers over a part the part is highlighted with a rectangle.

When the part is highlighted, there is a floating window that displays additional information about the part, such as whether or not it's time for it to be replaced.

This window is interactive.

The problem is, I'm not sure what's the most inituitive way to get the user to go to the window. I tried using a popup that appears when the user selects the part, but it gets in the way of rotating the model so I decided to put the floating window to the side.

If the user moves the mouse and tries to go to the window they risk selecting another part on the aircraft which will update the information in the floating window to the new part.

I wasn't sure if forcing the user to double click on the selected part and then giving focus to the floating window would be a good route to take.

I've tried looking for other interfaces similiar to this one, but the only one that comes to mind is the WebMD symptom tracker. So if you know of any other application that has similiar navigation to this situtation that'll help too.

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

Why are you updating the side window on mouse over? Could you just update the side window on a single click?

Another option is to deactivate the rotation of the model until the popup window is closed.

share|improve this answer
add comment

Hovering is an odd (non intuitive) way to be selecting. Also, it poses some accessibility concerns.

On hover, the part should be highlighted to convey select-ability. Then, on click, the part should be selected. When selected, the part should have a new highlight color.

Summary:

You have 3 states:

  1. not selected
  2. hover
  3. selected

This parallels tabs on a website.

See this example of the menu in Pinterest. Gardening is highlighted, because I am hovering it and it is select-able. Health and Fitness is bold, because it is selected. The grey text would be the 3rd state, neither hovered nor selected.

pinterest menu example

You may also indicate select-ability with a cursor change. (The hand which has a pointer finger would be appropriate here.)

Also, having the 'floating window' as a locked section on the side, as you chose, is great, because it provides consistency of location and user expectation.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.