This is a "templated" view of a search popup I'm designing for a map application.

On desktop it is a floating popup, on mobile is a full screen popup.

enter image description here

Here's a gif that shows it working in context : https://i.imgur.com/iaK70U1.gif

Let me try to explain what some of the things do :

Table Name : A modal menu that switches what table in our database are you searching, changing this will automatically change the fields below.

Fields Menu : A modal menu that you can enable/disable fields from showing, this will affect exportation.

Export Menu : A modal menu that you can choose which type you want to export the data as.

Field x : Regular filtering input of the table below, some are selects.

Related Fields x : A button that will toggle the visibility of its Related fields.

Related Field x.x : A server-side input, this will search relational fields that are encountered in other tables, and filter on this one. AKA 3D data. I hid those initially as they are more advanced options.

Leftmost fixed column : A "go to" button that shows said record on the map.

Important to notice that all input fields are created automatically, meaning their layout can't be specified.

Not to mention this is also supposed to be mobile friendly... Well it works fine but not sure about friendly.

Some feedback I received :

It is not clear that you can switch tables from the Table Name menu, this should be the first step for the user, but it does not feel as the start point.

Users are used to windows, and windows does not have action buttons on the left side of the titlebar, these may get dismissed.

My problem with this feedback is that if I put the actions in the content box below the titlebar, not only it will get more cluterred, but also there will be all this wasted space at the top.

Lack of visual feedbacks, the popup will more than often overflow the webpage vertically, so part of the table will be hidden, meaning that when the user filters using one of the fields, there's no cue.

Another problematic lack of feedback is the related fields, since these are filters but don't show as columns on the table, the user can't "lookup" to see if that is actually what he is seeking, all he can do is trust the application.

My biggest issue is that I'm firstly a programmer, just got into front-end 6 months ago, working on this alone it seemed perfect, it does everything you need, but as I presented it to a regular user, he was instantly lost.

Can I just consider that a complex tool will need some training, specially considering we have a good amount of "old" users? I said this because our data is very complex, there's only so much a good UI can do.

As I mentioned, working in this alone as a mainly programmer has really got me tunnel visioned in this layout and can't really see it in any other eyes.

  • Senile? I would first choose a better word to describe a not-so-advanced user – vol7ron Apr 7 '18 at 13:27
  • @vol7ron sorry english is not my first language, just lack of a better word – Mojimi Apr 9 '18 at 17:24
  • 1
    "complex tool will need some training" This decision defers the responsibility from the application to the user. In many cases, its the answer to lazy or bad UX. Since you are here to look for answers, you obviously aren't interested in the lazy way. – Benjamin S Apr 9 '18 at 19:05
  • 1
    In that case, understood and well done. English isn’t an easy language, even for those who grew up with it – vol7ron Apr 9 '18 at 21:14
  • @BenjaminS I would say even the simplest tools for complex subjects will require some training. Not everything is as simple as a google search page. I think a lot of UX is identifying the trade off between intuitive design and feature-set/functionality and that comes from knowing the users. Differences between Notepad and Word include features & function. To learn and navigate the complete set of hidden options and features in Word requires training. Knowing if those features are needed requires user research. – vol7ron Apr 9 '18 at 21:18

Basically, both beginners and advanced users do the same process:

  1. Explore results
  2. Filter if necessary
  3. Explore filtered results
  4. GoTo step 2

In real life you will probably have a lot more than 3 - 5 fields, say 20 so results and filters won't fit to one screen anyway.

I suggest you to explicitly separate "exploring results" and "filtering". Here is how:

After table is selected user will see unfiltered results

enter image description here

When you click "Filter" you see another screen, where you can change something or go back without changes

enter image description here

For complex fields:

enter image description here

After applying filters user see same results list, and icon, indicating there are filters.

enter image description here

Simple yet powerful design, works for phones and tablets.

UPD: For wider devices you may use sidebar. It will allow you reuse idea of filter list. For desktop app filter list probably have to look and work more like accordion than a nested list. I think you get the idea :)

enter image description here enter image description here

There are a lot of details to handle, but in general, a lot of apps work in that way. Most likely, your users will understand this design right away.

  • This is interesting, could you provide a simple mockup on how it would look on desktop? In my context its a floating popup on top of a map on desktop and a full screen one like your example on mobile – Mojimi Apr 10 '18 at 19:10
  • 1
    Did some quick drawings, the general idea is to start using columns and sidebards if you are dealing with wide device. Now you can ask your users what do they like most and here you go. – ADOConnection Apr 12 '18 at 10:00
  • Thank you, considering on desktop this tool is a floating popup on top of a map, do you think it would be better as a fixed side-drawer? Or is a floating draggable panel ok? – Mojimi Apr 12 '18 at 18:34
  • Actually both are OK, if programmed properly. Personally I like fixed sidebar more than a floating things. Again, it is much better to ask users what do they think. – ADOConnection Apr 13 '18 at 10:52

There are more and more map/GIS related applications popping up everyday, so this is a question worth considering a little bit further although it is also something that is relevant for general application design.

Actually it is a little bit hard to provide more detailed design feedback, but if you can provide screenshots of the full screen that will provide more context and allow people to suggest better advice. Given that the map already contains very complex and rich details, creating a popup that should only provide quick and simple view/input means the user is overloaded with information and overwhelmed, which seems to be the feedback or experience you have been getting from them.

The problem is that when you are trying to cater for simple and advanced use cases the design objective/goal is different (and often in conflict), so you have the choice of taking one of two strategies: A) trying to find a balance in the middle, i.e. something that works for everyone OR B) design different views/interactions for different users.

If you are going with strategy A) then it means that you need to find the most important use cases for both user groups and create the best user experience for those (at least if you want to encourage uptake for both groups.

If you are going with strategy B) then it means trying to create an adaptive interface that hides the complex features from the basic user and allows discovery of complex features for the advanced user. A more complex approach would be to track usage information and work out when a users starts using more complex features and switching the default view to show those features and if a user doesn't use them then hide these features from view.

Complex tools definitely require more training, but even a 'new' feature that is not designed well is going to cause as much problem as a complex tool. You should always consider training and onboarding as part of a software feature release to reduce the amount of problems that users encounter.

Some suggestions on the problems that you are encountering: - Table name switching feature not clear: depending on how many tables you have, it might be possible to change this from a dropdown to a tab/button style of display so it is clearer to the user that there are options to choose from. Normally these types of features are not hidden in the title bar and this could be the source of confusion. It is better to waste a little bit of space than to have the user not to know where the actions are and not be able to use them. - Lack of visual feedback and content hidden: you can structure the content so that they are broken up into different sections to allow the user to expand and collapse sections, that way all of the information is in view and if they want to reveal more details then they are aware that other content may be hidden.

Something that is in your advantage is that you seem to have good access to user input and feedback, so you just need to do a little bit more testing and playing around with different strategies for layout and design to work out what is going to suit the tasks that they need to carry out. I suggest looking at similar applications or browse some common design patterns that will work with the type of information you would like to display.

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.