The application maps wormhole connections in Eve Online. A wormhole is a connection between two systems and changes each day. The wormholes are the green lines. The systems are the circles. The blue systems are only connected to other systems through wormholes while the green/yellow/red systems are also connected to other green/yellow/red systems via static gates which never change. The green/yellow/red systems are also known as k-space.

Wormhole Map Sample

You are now in a random k-space system and are looking for the shortest way to Innuendo (the root system). Ingame, it is possible to have a way finding to any other k-space system. So the information to the player would be "Go to Aldrat then jump into the Wormhole there." Or "Go to Amamake and jump in there." It is not required to give further information once the player is inside the system (picture with different data). The Loading image is where the map goes.

collapsed bar

Another use case would be to find the closest trade hub, of which are several. Any other systems of interest may also be added and are saved.

Trade Hubs

The third usage case is to bring in help in a fight, which might happen anywhere, so you want basic routing from arbitrary A to B. I kinda integrated that with current system and add destination. But it feels clunky.

Another limitation is space. The current view with information about the selected system. The Table on the bottom right will go away to the new one mentioned above.

full map UI

So my question is where to put a sidebar or similar to cover the three use cases while not overloading the UI.


Before we can come up with sensible UI. We need to examine the 3 use cases. Are they truly 3 completely independent use cases, or 3 "subtype" of the same use case: "Show me the shortest route to X"?

The first 2 cases are easier to understand.

From my current location (I'm assuming the system already knows where I am) goto the closest X. Where X can be a specific system e.g. Root (Innuendo), a bookmarked "interest point" or it can be a "destination type" e.g. Trade Hub.

From the user's perspective, how different are the first 2 cases in their minds? You should confirm with users, but my gut feel is that they are nearly identical. "How do I get to X as quickly/fuel efficiently as possible?"

Consider putting in both into a single "typeahead" style input with a default dropdown showing Innuendo & Closest Trading Hub at the top, with a divider followed by the user's remaining Interest Point locations in alphabetical order. The "typeahead" should still allow user to search and pull up systems that aren't in their Interest Point list. When this happens, show other systems below matching Interest Point items.

If you are expanding it to multiple types of "closest systems", then a simple switch button/link to toggle between specific systems & "closest" would work.

UI diagram

I have insufficient info to understand the last use case. If it is just arbitrary point to point routing, then the above method with work for all.

If it involves the system automatically determining for you who's in range to provide support and calculate routing, then this should be a separate functionality. A small sidebar to the left with the two options will work if the user is not limited by screen real estate. (i.e. they have room to make the window wider). Otherwise, you can use tabs at the top. Visually make it very clear that the tabs controls the page below to avoid confusion between your multiple tab-like control bars.

  • So you suggest a two-field input method with auto-completion and managing the part with the e.g. Tradehubs as a possible input into the destination field? Also, the default for the starting location would be the current location and the default endpoint either root or the trade hubs? It is usually not required to know automatically who is in range, that question is more to bring in people who are not registered in the program and likely a bit further away. Sep 10 '14 at 4:27
  • Yes, you got it. I've added the UI diagram to the answer. Should be a little bit clearer with that. Let me know if I'm understanding the "trade hub" section correctly. Does the system automatically present you with the closest one? Or do you have to choose from a list of trade hubs? UI shown assumes the former.
    – nightning
    Sep 10 '14 at 19:55

You could use collapsible panels for information that isn't always relevant.


  • A details view which expands when a single system is selected and colapses when user clicks on background or selects multiple systems. [3rd use case]

  • A routing view for the routing which expands when a pair of systems e.g. "Loes" and "Root" or "Home" and "A1H" are selected (i.e. using Ctrl+Click (or long touch) for the 2nd system or clicks a 'Find route to Root' button). [1st and 2nd use case]

  • This is all about IA, I would have to spend some serious time looking at what the users are expecting to view and what I can naturally put a step or two away. This specific of a question is very hard without knowing a lot. Sep 9 '14 at 18:54
  • @ChrisAplin You will have to do Usability-Testing (on the existing solution and on the suggestion - so you can compare the two), however, it would avoid clutter, loss of screen real estate, need to scroll more often. Sep 9 '14 at 19:00

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.