search

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.
http://designlibrary.sebgroup.com
14 stars 1 forks source link

Alert ribbon #17

Closed ulde01 closed 3 years ago

ulde01 commented 5 years ago

Design decision 2019-09-09

After a long period of testing, we have now updated the Alert ribbon component. See the full description for the details (measurements, colour codes, etc):

https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines

Changes in short

Reasons

Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.

Let me know if anything is unclear. Thank you! Ulrika, Design Management

Issues in other repositories

Original text: "The design on alerts vary in our different repos. Lets explore this and decide what they should look like."

ghost commented 5 years ago

Hello team! We (myself and Design Management in SE & The Baltics) have been working on Alerts for a while now. Since we got feedback from users (both customers and internal users) that the alert ribbons where a bit hard to use. Hard to read. Difficult to choose between the purple and yellow background, where both sticks out equally. Another aspect of this is that on for example seb.se, our brand colours are being used on many elements, backgrounds and hero areas. This leads to mixed up messages I think. When you for example have a yellow hero and maybe also a yellow background on let´s say the "Hook Guide Act" module and we put a Warning (so called Talk) on the same page, it does not stick out as it should.

I am aware that we are taking a small step outside our brand when we use the tinted colours on components like this. (Even if we are allowed to use tinted colours in charts and graphs... so we ARE aloud to use them.) Information like the one we choose to put in an alert, should be readable, stick out from the rest of the content. Sometimes really stick out, like we have chosen on the Red alert that we keep solid and only changing the icon to a bolder one. And sometimes stick out because it is important information, but not necessarily scream or shout as both the solid yellow and purple does. Instead text are on a tinted background with an icon (optional). It gets readable and clear.

There are many ways to design alerts. This could be one way. And we have tried out a few different ways of doing it, but came to this conclusion.

It has recently come to my attention that there has been a large research internally regarding this whole Alert component done, that I havent seen or know anything about, I want to pause the work for now and hear what you have to say about this. If you have any input, all thoughts are welcome! Best, Jessi

Se attached files. The Alert components on our re-design. And som examples in context.

Information primary secondary Warning Danger Success! arena-homeDESKTOP EXAMPLE INFORMATION Ribbon_1 arena-homeDESKTOP EXAMPLE INFORMATION Ribbon_2 arena-homeDESKTOP EXAMPLE WARNING MOBILE EXAMPLE information MOBILE EXAMPLE DANGER Ribbon

hjalmers commented 5 years ago

Personally I'm not a big fan of the pastel versions, mostly because I feel that they're violating our new brand profile but also because they're a bit inconsistent (why isn't the red version also light pink?) and if we're still going to use the brand colors for other things like zone 3 content and ads I think we're putting more emphasis on ads etc. than notifications and messages that we actually want the user to notice. Sure the content itself has better readability but at the same time we're putting less emphasis on highlighting the importance of a notification/alert.

Bold/Exciting/ Inspiring High use of colour, solid and gradient fifth elements, bold typography and vivid subjects in images creates a bold, exciting and inspiring expression. This is suitable for magazine covers, landing pages on the web or a reception at an office. // brand manual

I wouldn't mind using these colors but then I think we need to challenge to new design altogether not just parts of it because we don't like them. Maybe take a look how this affects buttons, badges, charts, fifth element, images and other components where we use the colors, otherwise I think there's a big risk that the user interface will turn into a circus/rainbow with a lot of nice colors that work well individually but not when you put them all together on one page. I know we're not suppose to use more than two colors i.e. green and purple on one page but here we're adding a new layer with more colors so it's going to be even harder to avoid mixing the palette. And I think there's a conflict in having pastel notifications/alerts and at the same time having images and other graphic elements expressing boldness.

On the upside however, the text in these alerts have better contrast and better readability which is a good thing:D So I guess it all comes down to brand vs usability...

ghost commented 5 years ago

Personally I'm not a big fan of the pastel versions, mostly because I feel that they're violating our new brand profile but also because they're a bit inconsistent (why isn't the red version also light pink?) and if we're still going to use the brand colors for other things like zone 3 content and ads I think we're putting more emphasis on ads etc. than notifications and messages that we actually want the user to notice. Sure the content itself has better readability but at the same time we're putting less emphasis on highlighting the importance of a notification/alert.

Bold/Exciting/ Inspiring High use of colour, solid and gradient fifth elements, bold typography and vivid subjects in images creates a bold, exciting and inspiring expression. This is suitable for magazine covers, landing pages on the web or a reception at an office. // brand manual

I wouldn't mind using these colors but then I think we need to challenge to new design altogether not just parts of it because we don't like them. Maybe take a look how this affects buttons, badges, charts, fifth element, images and other components where we use the colors, otherwise I think there's a big risk that the user interface will turn into a circus/rainbow with a lot of nice colors that work well individually but not when you put them all together on one page. I know we're not suppose to use more than two colors i.e. green and purple on one page but here we're adding a new layer with more colors so it's going to be even harder to avoid mixing the palette. And I think there's a conflict in having pastel notifications/alerts and at the same time having images and other graphic elements expressing boldness.

On the upside however, the text in these alerts have better contrast and better readability which is a good thing:D So I guess it all comes down to brand vs usability...

Thank you! Really like that you take your time to give us your point of view! Maybe we should not put in our personal prefers here. (If I put in mine it would sound like yours, that I don´t think the tinted colours follow our brand and to make bold solid alerts would be the way to go when only looking at what looks good and follow our brand). But when it comes to this kind of content the usability has to overcome the brand.

You wrote "I wouldn't mind using these colors but then I think we need to challenge to new design altogether not just parts of it because we don't like them." - Thats not what we are doing here, just to be clear. It is all about user feedback.

That high use of colour, creates a bold, exciting and inspiring expression is of course our core and this should be applied as long as it does not affect the usability on information that is important. The choice of inconsistency, to keep the solid red alert, is because the red alert is supposed to really be bold. The red alert is a real warning. In my suggestion, the red colour has another # than our three brand colours. Since the three red brand colours are being used in hero areas and so on.

Regarding putting more emphasis on ads etc in zone 3 - the alerts is placed higher up on the page, could that be enough to show the user what information is the most important? If we use the same purple for example on the alert and on the ad, do you think that gives the user a more clear view on what information is the most important?

I would like to see examples on using the solid colours on pages that has other elements that uses the solid colours. And see how they can stand out from the rest of the content when looking the same. And really want to know more about that research, do you know anything about it?

henrikhoglundseb commented 5 years ago

I would go with usabillity over brand. I don't belive alerts need to be a brand ambassador. they just need to work. I agree the original colors are very strong and both SEB users and our developers has commented to me about this.

I have attached a file from a project that im working on with our current colors that I think would benefit with saturated colors.

lånöversikt-alerts

hjalmers commented 5 years ago

Well if we're not following our brand guidelines I think we need to challenge them so that they can be changed otherwise it doesn't make sense to have them. In most cases I agree that usability is more important than brand but I also think that we sometimes distort the brand for the sake of usability where it might not be needed. I think google has a pretty nice view on colors and contrast, for example they state that icons, logos etc. don't have to abide by the rules for contrast ratios. They even use white text on coloured backgrounds such as red, blue and green and black text on yellow for buttons, menus etc. although their general rule of thumb is to use less colors especially when dealing with texts. There are a lot of people complaining about google not being super user friendly but they're still sticking with their design.

If we design purely based on user feedback I think the experience would be pretty bad, an excellent example is one of our trading apps where users couldn't distinguish between different call to action buttons so we ended up giving each button a different color for sell, buy and ask, the users were super happy but it really hurts inside knowing that we're sacrificing our identity for the sake of feedback from a few but very important users:(... I always think there has to be some compromise between sticking with a design and being 100% perfect in terms of usability.

I'm not a super fan of material design but they do a lot of good thinks like this little tool to test themes and their accessibility when used in a material design context. Their design relies heavily on the usage of a primary and secondary color so they don't really have the same rainbow/circus issue as we do since we try to do the same thing with five colors instead of just two, not sure where I wanted to go with that but it's a good source for inspiration and they're not changing the color in one context to solve a problem, their proposal is to choose another color that works better although it might not be perfect all the time.

But like I initially said, I don't have anything against pastel colours but I'd prefer not to mix them with the "bold" brand colors too much especially not for the same component. Perhaps background colors on elements should always be pastel and icons, links, badges, buttons and elements with some kind of interaction could use the "bold" colors as not to compete with other content on the page. And the developer part of me who wants to be DRY (Don't Repeat Yourself) and likes to write good and reusable code would prefer if we could stick with a convention for how components are styled i.e.

Alerts/notifications/toasts Background color: pastel Icon color: bold Text: black Buttons: bold (blue for primary or red for delete)

Or

Background color: bold Icon color: best contrast against bold color (i.e. white on red, black on yellow etc). Text: best contrast against bold color (i.e. white on red, black on yellow etc). Buttons: best contrast against bold color (i.e. white on red, black on yellow etc).

Mixing and sometimes having a coloured icon (info purple, success) and sometimes not and in some cases have the text in the same color as the icon feels a bit inconsistent and all the different rules makes it harder to abide by them not to mention the code which is no longer DRY.

Ps. order is of course important but I don't think that we'll be able to place the alerts on the top of the page all the time. Toasts are one example and context specific feedback is another...

ghost commented 5 years ago

Maybe we can talk about this irl? @hjalmers 😄 It is going to be a looooong discussion if we keep on writing. Would be great if some more of the team members could have their say in this.

hjalmers commented 5 years ago

Btw what happens if you put a delete button in a "danger"-alert? I think the buttons should be able to behave in the same manner no matter what type alert we're showing. I.e either use light/dark button version in alerts or the "bold" version.

hjalmers commented 5 years ago

Maybe we can talk about this irl? @hjalmers 😄 It is going to be a looooong discussion if we keep on writing. Would be great if some more of the team members could have their say in this.

I agree, but it's good to have it written down as well as previous discussions IRL are lost...

So for the sake of adding some history to the discussion here's how the current bootstrap version has come to be and how it has evolved based on previous IRL discussions:)

The first version we used actually resembled the pastel version with the exception for the danger version as we relied on a function provided by bootstrap to create background colors with good contrast based on the brand/theme colors, see bootstrap example. The major difference is that we used our brand colors to generate the colors for the alerts, and we actually changed the text color to black for all alerts, links also used a specific color for each context to get good contrast against the background, info had a dark purple link color instead of blue, warning had a dark orange and so on.

We later changed that design based on feedback from the agency that created our new brand profile and to adhere to how colors should be used according to the brand manual. So we ended up with the current version we have here (look at normal alert). Then we decided it was too much and too heavy so we created a lighter version, originally it was a thick line to the left pretty much what we're using here. We had some issues regarding the boundaries for the content and it was hard use this style with different page backgrounds so on the previous site (research) there are a few different versions (some with grey background, some with no background and some with the border on the top side etc.). So to solve that issue we decided to create an outline version instead, see alert-outline version on this page which we haven't really used anywhere (at least not that I know of). Instead we started to use the "bold" version again.

I actually liked the first version, it's bullet proof, well tested (bootstrap is one of the most used design frameworks in the world), it's consistent, it's DRY too. The only downside really is that it's not abiding by the current rules of our brand manual.

mzemlickis commented 5 years ago

I have played around a lot with these and with light color versions too. In my mind, there are two types of alert/notifications - business-related and actual alerts. Business-related mostly is with less emphasis than other ones.

I like what @JessiNygrenWalhed has there, but as mentioned it ain't really on the same vibe with rest of the brand. But once you will put solid colors for backgrounds those will be perfect and brand-aligned.

https://sebgroup.github.io/bootstrap/alerts These feel really generic and there are not enough variations regarding controls that could be inside it. If we combine Jess layouts and variations with these colors those are good to go, IMO.

Text that keeps changing color because of background is the only drawback, but I could live with that if we use alerts in a consistent way.

ulde01 commented 5 years ago

Design decisions 2019-09-09

Complete description here: https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines

Reasons:

(I will log this correctly tomorrow)

Left to do (mostly Ulrika):