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
5
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 22:21

1 Answer 1

Reset to default
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
4
  • 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, 2012 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, 2012 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, 2012 at 13:38
  • Oh, I misread then, sorry.
    – Vitaly Mijiritsky
    Aug 16, 2012 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.