4

I am in process of making the UI of application, that has a 2.5D map (3/4 perspective) made as image, which displays equipment in rooms and areas of power plant. There are no multiple views of the room, only one per room. These are strict constrains. User can select an object on it and get information about equipment. Some equipment can be rather complex in shape (transformers or tubes with valves). Application is keyboard & mouse based. Users rarely use the application, so different cases from 3D modelling software (i.e. clicking multiple times to select necessary object and double click to open dialog with information) are not affordable.

So, if all objects were visible, there is no problem — user hovers over it by mouse (the objects changes it’s visual style — for instance, the glow appears around it), sees the hint with it’s name, decides weither he should get additional information and clicks inside the object to get it.

But due to complex structure of equipment, the case of overlapping objects is rather expected — so it is not easy to recognize — is there one object or more at the cursor position, and, especially, to select the necessary. Even if the edge of the object is visible a bit, it is not easy to recognize it and click on it due to Fit’s law.

So the question is how to make clear that there are many objects at one position and make selection of necessary object as convenient as possible?

Here is the primitive sample picture of the situation:

Sample of overlapping objects on the map

Update: Right now I suppose to make the selection of objects without any others behind them as described in the case (hover with the name of equipment and glow around, simple click opens the dialog with info) and for overlapping objects to display in the hint the amount of objects, left-clicking on it shows the context menu with the list of objects to choose from.

|improve this question
  • Your solution would be pretty complex UI-wise, esp. for a so-called transient (rarely used) app. What stops you from making a truly 3D app? isometric (2.5D) has hiding problems, it's a well-known issue in games, there they're solved by having a pretty limited set of objects (it's easier since it's not real-life) – Aadaam Aug 15 '12 at 20:18
  • @Aadaam Sorry, but there is no possibility to make real 3D due to strict requirements and limitations (I agree it would be better). I just try to make the best solution with such limits of «real world». – Alex Ovtcharenko Aug 15 '12 at 20:28
  • OK, what's the underlying technology? Is there a possibility to have multiple views, or basically you have to have one view only? How will the "backend" of this be managed, so, how will the "map" be made? – Aadaam Aug 15 '12 at 20:41
  • @Aadaam I can’t say much, but it is an utility windows app, part of PLM system for large-scale infrastructure project, that will combine many information sources from dozens of subcontractors. The goal of utility is to help users find equipment descriptions & documentation by location (there is other documentation app with more textbased approach. The map will be made by contractors using my guidelines and no multiple views supported (but there will be layers — one subsystem per room per map). Such an unperfect case, due to business constraints I can refine only local (in-app) solutions. – Alex Ovtcharenko Aug 15 '12 at 21:20
  • Well, google uses semi-transparent houses on maps for a reason... wouldn't a top level view be more easy to grasp? I guess you could have levels, of course, there might be things on the top (like, pipes), but they are to be organized to one or more vertical levels... looks less shiny ,but easier to understand perhaps. I hoped you somehow retain the 3D information (asking the contractors to draw the scene in Google Sketchup, for example), but it seems it won't be the case. There'd be 3D viewer technologies even for the browser, but I guess the app is 2D only. – Aadaam Aug 15 '12 at 22:21
2

A semi-transparency approach could work if these were simple objects, like the boxes in your example, and also if you only had one level of obstruction. But since potentially you can have many things obstructing each other fully or partially, and their shapes are complex, it's liable to turn into a real mess quite quickly. You could do some sort of a solution on mouseover, but then your users would have to scan the entire room with the mouse to make sure they've noticed everything, and they'll never be completely sure.

You can attach little handles/tags to the objects and have them be always on top, so they can't be obstructed by anything. Or they could be partially obstructed so it's clear there's an object hidden behind the one in the foreground. They can be made very distinct from the "real" objects visually, so they couldn't be perceived as part of an object and so it's clear that it's a UI element. They could also contain icons or some other useful information element.

Something along these lines (there's 5 boxes there although you can only see the three)

enter image description here

|improve this answer
  • Nice idea with handles to solve hidden equipment, the only disadvantage is increasing level of visual noise in environment (and in some situations the handles can themselves overlap other small pieces of objects, that can be solved by manual placement, and also be unnoticable above the objects with the same color). So after brainstorming I made a decision to stop on another solution, that I wrote at update of question. – Alex Ovtcharenko Aug 16 '12 at 11:36
  • As I said, you can design the handles so they can't be confused with anything. The one problem I see with your solution is that the right-clicking has zero discoverability and since this is aimed at occasional users, I wouldn't rely on them figuring it out. – Vitaly Mijiritsky Aug 16 '12 at 13:26
  • No, there is actually a left-clicking (not standard context menu), so the user will see the difference right in the process of maps investigation. Anyway, thank you for feedback. – Alex Ovtcharenko Aug 16 '12 at 13:38
  • Oh, I misread then, sorry. – Vitaly Mijiritsky Aug 16 '12 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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