1

I currently have a web app that works quite well (if I may say so) on both mobile and desktop via the use of media-queries and by keeping things simple. The UI looks like this

┌────────────────┐    ┌────────────────────────────────────────────────────┐
│                │    │                                                    │
│     title      │    │                       title                        │
│                │    │                                                    │
│   ┌────────┐   │    │              ┌─────────────────────┐               │
│   └────────┘   │    │              └─────────────────────┘               │
│                │    │                                                    │
│┌──────────────┐│    │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
││              ││    │ │              │ │              │ │              │ │
││              ││    │ │              │ │              │ │              │ │
││    image     ││    │ │    image     │ │   image      │ │    image     │ │
││              ││    │ │              │ │              │ │              │ │
││              ││    │ │              │ │              │ │              │ │
└┴──────────────┴┘    └─┴──────────────┴─┴──────────────┴─┴──────────────┴─┘

You search in input field at the top, and columns of images appear below. Now, some of the images have locations attached to them, so I would like to (somehow) show a map with points for the locations of those images, points that, perhaps, get highlighted when the respective image is in the viewport. It is relatively easy to pull off on a desktop but I am struggling with the mobile version (without having to actually create completely separate layouts).

┌────────────────┐    ┌────────────────────────────────────────────────────┐
│                │    │                                                    │
│                │    │                       title                        │
│                │    │                                                    │
│                │    │              ┌─────────────────────┐               │
│                │    │              └─────────────────────┘               │
│                │    │                                                    │
│       ?        │    │ ┌──────────────┐ ┌────────■──────────▪───────■───┐ │
│                │    │ │              │ │        ■          ▪▪     ■■   │ │
│                │    │ │              │ │    ■■■■■           ▪▪   ■■    │ │
│                │    │ │    image     │ ■■■■■■        map        ■■■■■■ │ │
│                │    │ │              │ │                             ■ │ │
│                │    │ │              │ │            ▪▪▪              ■ │ │
└────────────────┘    └─┴──────────────┴─┴────────────▪────────────────■─┴─┘

Part of the issue, of course, is from the fact that a map is usually of fixed dimensions without any overflow. So, all of it fits in the available viewport with no scrollbars. The image list, on the other hand, is a column that is scrollable to show more images. One option I am thinking of is a tab view

┌───────┬────────┐
│ images│  map   │
│       └────────┤
│   ┌────────┐   │
│   └────────┘   │
│                │
│                │
│                │
│                │
│                │
│                │
│                │
│                │
└────────────────┘

Once the results appear, the input field should "disappear" or shrink to a little tab, and the image list would appear like in the current design. Clicking on the map tab would show the locations. The problem is, of course, that once you switch to the map view, you have no idea what images you are looking at, and when you are in the image view, you have no idea what its location is.

So, another option is to show the map of the locations by default, and have the images lurking in the little dog-ear tab on the upper-left. Clicking on that would open a drawer with images in a list view with the map underneath.

┌────────────────┐   ┌────────────────┐
│   ┌────────┐   │   │   ┌────────┐   │
│   └────────┘   │   │   └────────┘   │
├───┐            │   ├─────────────┐  │
│ ◎◎│         ■■ │   ├───────────┐ ├──┤
├───┘  ▪▪▪    ■  │   │           │ │◎◎│
│     ▪▪     ■■  │   │   image   │ ├──┤
│      ▪     ■   │   │           │ │  │
│  ■   ▪▪    ▪▪▪▪▪   │           │ │▪▪▪
▪▪▪■▪▪▪▪▪   ▪▪   │   ├───────────┘ │  │
│  ■■       ▪    │   ├───────────┐ │  │
│   ■■■■■■ ▪▪    │   │           │ │  │
│         ▪▪     │   │   image   │ │  │
└────────────────┘   └───────────┴─┴──┘

Of course, it goes without saying that I am hoping to stuff too much in a mobile view making it cluttered and ugly. If that is definitely an irredeemable case then perhaps I should just think of showing a map view only on the desktop.

Any and all ideas welcome. For what its worth, the current (image-only) app can be viewed at https://ocellus.info/

1 Answer 1

0

If the user has already seen the image and wants to see its locations, the detail of the image is no longer so important, just knowing that the map refers to that image.

You can change the display mode to image's thumbnails at the bottom, with the option to select and move forward or backward, and the map in the center of the image.

enter image description here

1
  • thanks, this is an arrangement I had not considered. It certainly looks very useful for my case. The only problem is -- it requires changing the view, something I don't want to do. If the user wants to search again, I have to quit this view and go back to the search interface. What I have to figure out is how to merge the two views into one, so the search field is either visible or reachable from this above view you have suggested
    – punkish
    Feb 15, 2022 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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