1

The company I work for has had a desktop website for ages, but recently I had the task to make a small mobile version with limited functionality. It's been online for a while now and I've been tracking how the people are using the mobile site, but it's gotten me concerned. On a page to generate a report, the user has to select a date and some other options, so I put it inside a side panel/drawer/however you want to call it. It appears when you click the button in the top right:

enter image description here

But most users don't seem to find it and just go to the desktop site after a few seconds.

Question:

Do any of you have any tips on how to communicate the presence of sidebar? I want to keep the ui clean with not too many distracting elements and popups to "explain" it are pretty much out of the question for me (I hate them myself).

Improve this question
5
  • This might seem a bit of an obvious question, but is the 'hamburger' menu being used already for other functionalities? Since this is pretty much standard (what users expect when navigating on mobile). A wireframe or general structure would help to get a better idea of the issue. In my personal experience, if the mobile experience is completely different from the desktop, and I am used to the desktop version, then I will just switch to desktop version every time I can
    – Ana Santos
    Commented Jul 14, 2016 at 10:22
  • @AnaSantos Yes the 'hamburger menu' is on the left for navigation, the right sidebar (with the icon in the question) is for inputs/selects etc. The left sidebar seems to be no problem to find, but the right one is problematic. The thing is we made the mobile version because the desktop site is really not made for mobile usage (content is like 4-5cm width...)
    – Alexander Derck
    Commented Jul 14, 2016 at 10:39
  • 1
    Would it be doable to use labels, something like this: lmjabreu.com/media/images/posts/…
    – Ana Santos
    Commented Jul 14, 2016 at 13:09
  • @AnaSantos Going to use the solution of the accepted answer. This way it should be clear where the settings are + I keep my full screen size
    – Alexander Derck
    Commented Jul 14, 2016 at 14:31
  • @AnaSantos Just stumbled back upon this question, I tried using labels and about everyone finds the panels now, never thought it would make that much of a difference. Thanks m8
    – Alexander Derck
    Commented Nov 21, 2016 at 19:08

3 Answers 3

Reset to default
1

I would suggest not to hide important things like your required options.

But to answer your question I have some ideas for you:

Modal Infobox

Show a little yellow infobox on top of the page containing some sentence like "Don't forget the options" followed by your icon. This box can fadeout after 2 seconds.

Blinking Icon

Make your icon blink for 2 or 3 times after accessing the page. Maybe this blink is a change of the color and size or rotating it 360°.

Overlapping

Don't hide the sidebar 100%, leave about 5% in the visible area so the user can implicate that there's something more.

Status Message

Place a message like "You don't have selected the required options" also followed by the icon around your submit button.

Improve this answer
1
  • The first two are great ideas, I see those small infoboxes myself all the time and yet I forgot about them. Thanks a bunch!
    – Alexander Derck
    Commented Jul 14, 2016 at 12:17
1

I think users tend to relate better with what they can see at a glance..They get frustrated when they have to find features etc..Maybe it's not a bad thing to show the options on the page but hide some of the fields in an accordion when they click it expands.

Improve this answer
1
  • The problem is I need to display a table which is already less than ideal on a mobile screen, every pixel I waste on buttons etc. is one too many. Thanks for the input though!
    – Alexander Derck
    Commented Jul 14, 2016 at 9:29
1

Is generating the report a major action from this tool, or a minor sub-feature?

If it's a major action that's a primary purpose, then I'd strongly suggest putting the tools to do so in a very obvious place. If they're not needed once entered, then they can go away at that point, or have their visual impact reduced in some way... but if a user HAS to enter these things to get a meaningful report then they should be right there at the start.

So, my immediate thought would be to show the configurable features in a visually distinct panel which the user can hide away (and unhide again) easily.

Taking that idea a little further, in the mobile version, I'd start with the fields visible, let the user fill them in and place the response beneath them. At that point, and only if it's needed, slide the fields off the top of the screen, but do so visibly and leave a visible "tab" at the top of their screen at the end of the transition as a means to get the parameters back, regardless of their current scroll position.

After that, scrolling up and down will be scrolling through results... but touching the tab will always (regardless of scroll position) get the parameters back so that they can be modified. Scrolling all the way back up should also bring the parameters back into view, but being able to change them from any point in the page means they don't HAVE to scroll back up.

If they're jumping straight into a pre-defined set of parameters, you could start them with a view at the top of the results list... but still with the "tab" at the top so that those parameters can be investigated and altered.

The important bit here is the transition from the form with the parameters to the remaining, always visible tab at the top. The user needs to be left with a visible connection between the two as they scroll down, so it needs to be something that catches their eye as that first scroll happens.

Improve this answer

Your Answer

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

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