0

I have been tasked with creating an information (e.i. helpful tip) scrolling bar for a mobile application.

enter image description here

enter image description here

enter image description here

I am not very satisfied with my choices of color. So I am trying to look for outside reference for inspiration.

Unfortunately I even don't know what the official name of these things are called - and thus have failed in finding similar reference material so far. Tool tips? Scrolling info bar?

Anyone know? Or even better, anyone have any color recommendations or links?

  • What is the context in which they appear (stuck to the top or bottom of the screen, near an input control, in line with your content, etc.)? What purpose do they serve/when will a user encounter them? – maxathousand Feb 22 '18 at 19:58
  • @maxathousand They are stuck to the bottom of the page and will be near input controls that might lead to undesirable actions (them accidentally clearing their scores). – AlanSTACK Feb 22 '18 at 20:06
2

Something like this in Bootstrap called "alert" and this type of information section can be seen in Material design, which is called "snack bar". But the snack bar uses for various purposes, and it is originally in single color.

alert enter image description here

snack-bar enter image description here

The colors make sense to the user to get a different level of attention, In addition, the icon used in that section definitely impact on users.

If it is information Try to use "i" or relevant icons

If it is confirmation/question/help Try to use "?"

Hope I answered your query to a certain level.

  • This is exactly what I was looking for. Could you provide a link to where you got the Alert colors? – AlanSTACK Feb 22 '18 at 23:04
0

The use of colour for any element of a ui depends mostly upon how you want that element to be used/stand out to the user.

Obviously colour has an aesthetic appeal to the overall design and you do want to keep the colours inline with an overall vision, but in your particular case I think the question I would try to ask myself is 'how important is this information and how eye catching do I want it to be?'

Contrast/pop-out colours will be required if this information is very important and you want the user's eyes to be drawn to the information immediately. This pop-out effect can be done by using different saturations of colours, or finding a contrasting colour to the one used for your background. The 'severity' of this contrast can help adjust the translated 'importance' of this information to the user. For example bright yellow is very eye catching and the user would probably look immediately at the information. If a more saturated yellow was used, the yellow would still have a pop-out effect but it wouldn't be as severe as the bright yellow.

If you want the information to carry certain meanings than there are some colours that are pretty engrained in users' minds to indicate whether a piece of information is bad/invalid (red), good/valid (green), or if it indicates caution or a warning (yellow).

Without seeing the colours used in other places for your app, it is hard to make a recommendation that would fit nicely with your overall design but something you can do is perhaps look for resources that discuss effective colour use in ui design. You probably won't find any specific resources that discuss your particular scrolling information element.

  • I appreciate the response, but all I am asking is what are those elements usually called. Information bars? Warnings? – AlanSTACK Feb 22 '18 at 22:43
  • My apologies, I don't know of an official term but I would try looking for marquee scrolling information bars. I believe marquee is the typical term used for the effect of having scrolling text. – Kristen D. Feb 23 '18 at 16:12

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.