0

When you're designing for mobile, you have to convey the same information in a lot less space. Right now I'm designing a website that I want to be responsive, but I'm having some difficulty.

We want to present users with a report based on assessment they've completed. The sections of report aren't really self-explanatory and I want to give an explanation of what each heading means, before going into the scores.

My problem is that I don't know how to do this best on a mobile device. Having a description under the heading seems like a waste of space and an annoyance on a small screen.

I've considered using an icon (either a ? or a i, I don't know which is best) which opens a modal screen when touched, but it's not ideal because it's fairly important information and I think most people would ignore the icon or not realise what it's for.I'm also a bit worried about forcing people to click an icon or interact in some way to get essential information.

What methods do you use for getting across this type of information with little space available?

1

I think one way to solve this issue would be to use a drop-down feature. It is much less obtrusive and continues the flow of the page. If a user wants to collapse it back, then they can easily tap the item again. The description (from what I understand) is meant to be a helper, so I think it should be easily accessible without directing the user to another page or taking them off-track.

0

The scenario you explained above is the most important concern while designing responsive designs. In your case, as user lands on the report page add a modal with a bold font which will grab users attention. Here you can display a gist of the important information, also inform user to look for "i" icon near to the header name for more information. But while using a modal make it a point to limit it to maximum 2 swipes and provide a 'skip this' functionality else user might get irritated. And as the user gets to the report page display the 'i' icon in bright color with a dot or some symbol similar to new notifications. You can use this same method incase you add some new features later on, which will keep consistency through out the app.

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.