Did you notice the color change for status messages?

Question

Hi WikiTreers,

Today we changed the formatting of the status messages that you see at the top of a page when something is processed correctly (a green box), when there is a warning or cautionary message (yellow), or when something fails (red).

Until now these have had a solid colored background with white text. Many people had trouble reading these.

Now the messages have light colored backgrounds and black text.

Here are examples:

I'm sure many of you will answer, "It's about time!" If you have other input or notice any problems, please post here. Thanks!

Chris

P.S. You may not see the change right away because your browser may have the following two files cached. If you want, you could click on these links and reload them, e.g. with Cntl-F5 or Apple+R:
https://www.wikitree.com/images/status-icon.png
https://www.wikitree.com/css/base.css

Comments

When you hover, Taylor, look down at the status bar of your browser (usually bottom left) and the Wiki-ID will be there. :)

---

Every time I see these now, I smile. It's so much easier on the eyes.

---

It's great to be a part of a community of smart people committed to making improvements!

---

Chris... Thanks, much better.   Just one negative comment though, when you save a profile, a request to share comes up at the top of the profile.  A touch irritating...  how do others feel about this?

Andrew

---

Andrew, given that's a separate topic, it probably deserves a g2g thread of its own.

---

Finally something that the most negative person on Wikitree, me, can't complain about.

---

Thank you, I like the new look, so much better  xxx

---

You're probably correct, although this started the same day that the colour change took place.   Hopefully, my noting here may invoke comment since it may be associated.

---

Ros,

Thanks I used that info a lot.

Taylor

---

I agree that the icon should be something other than a ! for success. Also like the idea of warning and failure having a ! in a triangle.

I'm curious why the red box did not get softer red/pink shading instead of gray, like the green and yellow boxes did. As pink a visual problem for some, also?

Kind of surprised by the passion behind this one as it never really bothered me, but happy that this improved the usability for a class of our users.

Answer 1

Thanks, Chris! These are so much easier to read.

Just a thought: perhaps we could have a check mark for the green success one, rather than an exclamation mark? because the exclamation mark is surely for a warning.

But if we can't, the change of text colour alone is terrific. 

Comments

I like the idea of a check mark for the green one!

---

Ros, I agree with you that the current exclamation mark in a circle character probably isn't sending a reinforcing message on all of those status messages. The previous "i" in a circle suggested "information", but that only works in certain languages.

However, I generally worry that check marks aren't quite as much a universally understood symbol as those of us in the Anglophone portions of the world might think. 

There's an interesting blog post about an attempt at "Finding a Universal Symbol for Yes for Web-Based Training Courses" which explains a few potential pitfalls in trying to find symbols that would work. There really isn't a good option, outside of a simple smiley (☺) for affirmation -- and in work contexts, that could be viewed as insufficiently "professional". (I'd probably avoid anything that is an actual emoji, since even a , or slightly smiling face, can take on different tones of meaning.)

In that author's assessment, "No" had a much simpler, universally acceptable answer: a "general prohibition sign", a.k.a. the "No symbol" ().  

The cross-cultural ambiguity of the check mark (✓,✔) seems to be why the check mark is avoided in so many other "universal" symbol sets, e.g. the AIGA passenger/pedestrian symbols, accessibility symbols, GHS hazard pictograms, or the UN OCHA humanitarian icons. 

Moreover, in the (anglophone dominated) tech world, the check mark has taken on a very different symbolic meaning: verified identity. (cf. Twitter, Instagram, and Facebook.) Given that these are profiles of persons, that might be a choice that causes confusion. 

A more generally understood "warning sign" would be the triangle warning sign (⚠️), i.e. "a triangle with an exclamation mark inside, used as a warning or alert.". Used in many countries outside the Americas as a traffic sign and often an indicator light on vehicles.

So if different symbols are needed, I would probably advise:

• ☺: Success Smiley
• ⚠️ : Warning Triangle
• ⚠️ or : Failure: Warning or Prohibited Action

---

I like the idea of using the "i" symbol in the green box. I have the impression that this symbol is used on signs pretty much everywhere in the world to mean "information," and it is used widely in computer applications.

Answer 2

I've got a blooming cataract and have trouble with low contrast. The new boxes shown here are good. a lot easier to read than the previous ones. The new Research Note box, however, with black text on dark grey background, is almost unreadable.

Comments

Hi Leif,

Can you give an example of the new Research Note Box? When did you notice the change?

Thanks,

Chris

---

Yes, see Steve Harris's example of an Unsourced box.  Black text on a dark grey background? Oops.  If you desperately want the dark grey background, make the text white.

---

I noticed it on this profile, but it has already been changed to Black on Yellow.

---

Got it. Thanks, Leif.

Answer 3

The versions shown above are great; however, I see a few issues that may have been unintended:

Template:Research Note Box will need to be updated by a Sysop. As it stands, it uses the "status" style with a hardcoded background color which is barely readable now (i.e., see Template:Unsourced output below).

Next, I may be in the minority here, but the grey background distracts from the warning, and I would expect to see a red background as well, such as: #F6BFC5

Or slightly lighter, such as: #F9D4D8

I also agree with others, that while we are here making updates, the images could be tweaked to make sure it is abundantly clear what the status is:

Comments

That green on dark grey is barely readable. I'll just have to ignore what it says.

---

I think it has been changed to black text on pale yellow background.  Much more readable!

---

Yep, I see that now. Hopefully we can get the "status red" and icons updated as well, that would be the icing on the cake!

---

Thanks, Steve!

RNBs now use a standard yellow status message. I don't know if this will be a controversial decision. If someone would prefer something else it could be proposed.

---

Thanks Chris!

---

IMO the new RNB colours look way better than the old ones.

---

Regarding the check mark, this morning I discovered from JN Murphy's post on relationship status icons that the check mark is not universally understood. I am hoping he or others will propose alternatives.

---

Then how about a smiley face? (Done in thick black lines, rather than a yellow icon)

---

The Red status is used for both warnings and failures, and I would suggest a cleaner division between the two while you're at it.

For instance, I recently entered an incorrect death date on a profile, and when I entered a child that was born two years after the incorrect death date, I got a red box telling me what was wrong, but I was allowed to save anyway. The same for a child born sixty years after a sibling, which actually is perfectly possible. That alert also has a red box.

When you're able to save anyway, the alert can hardly be called a "Failure".

---

Chris, this is a very valid point about the use of symbols (specifically the check mark). WikiTree is already accused of having an American ethnocentric perspective on genealogy.

So perhaps Ros is on to something here, and we can "get with the times" and go for universally understood Emojis...

---

With a failed save, for whatever reason, however serious or trivial, I don't just want red, I want day-glo fluorescent neon with flashing lights and sirens, to stop me switching to another page with my work unsaved.

"Failed token check" should be more than just a warning.

---

Time was when check-boxes had an X in.  People complained that some people might be misled by this, because they took an X to mean No.

So they changed it to a check mark (called a tick in England).  Haven't heard anybody complain that this isn't understood either.  In any case, computer users are confronted with it across their entire user interface.  Being different probably isn't good.

---

Just wanted to voice my support for Steven's suggestion for the red backgrounds. Since we are using the standard green=success, yellow=warning, I *really* think users will expect the failures to have a red background. We don't want them glossing over a big failure like failed token check because it has a gray background. Gray backgrounds usual signal something is less serious.

---

Steve, wonderful comment. Exactly my thoughts. It would be lovely to have a red background (grey doesn't signify that something is really wrong), and the same goes for having images consistent with the boxes.

---

Steve, I replied to Ros Haywood's comment with some detail, but as Chris mentioned, I'd avoid check marks. As you humorously suggest, perhaps simple smiley would be suitable ☺. For the other statuses, I think a more widely used warning sign might be appropriate: ⚠️

Answer 4

awww, nice.  Much less eye strain.  Thanks.

Answer 5

It's about time!

(talk about the power of suggestion<grin>)

Answer 6

I second the comment by Steve, the green boxes should have green icons (et cetera), and the 'error' boxes red backgrounds. However, I do also have an additional point: could the icon to the left be aligned with the text starting in the header? Right now the icon misaligns in the following box, and maybe even more:

That being said, thank you for the change! I think it's great to have wikitree be more easily accessible!

Answer 7

I love it! They are much clearer, I think, and easier to read. I do agree that Steve's icons would be fantastic. I love the check mark for green.  Or an emoji. I didn't think a 'check mark' or 'tick mark' was not recognized elsewhere.

Answer 8

I noticed some of them, but as I'm not on my regular system, I wasn't sure if they were already there and it was to do with my present computer set-up. I like the change. Thank you to everyone who implemented that.

Answer 9

Much nicer, calmer.  More WikiTree-like.  

The emojis are ok but I really like the check in the circle, knowing that it's not universally accepted.  Still -- an X in a red circle -- I know that I've seen that in other countries and the meaning is very clear.  

Now everyone remember to blink fully while you are staring at the screen.

Answer 10

This great, these are much easier to read! And more importantly, it's great to see Wikitree respond so quickly to user input. Well done!

Answer 11

Totally love this!

Answer 12

I definitely like the new color scheme. Thanks!

However, I find that I'm not thrilled with the size of these boxes on my smart phone screen.

After I edited a profile, the "Changes Saved" box took up approximately half of the real estate on my screen, leaving essentially no room for meaningful information. For a second or two after I first saw it, I thought I must have been logged out of WikiTree so I was seeing an ad. The box size is excessive -- and makes WikiTree less mobile-friendly.

I guess I could do a screen save and send the image to my computer so I could post it here, but it's easier to give some measurements of the vertical dimensions of the elements I see on my phone (English units because that's what I see on the tiny ruler I had handy):

1. Phone icons and browser URL box - 0.55 inches (this part of the screen is not available for webpage content until after I scroll the page)
2. WikiTree logo - 0.5 inches
3. Name Search boxes - 0.5 inches
4. Tabs (in tiny font, but legible) - 0.25 inches
5. Changes Saved box (text in rather large font) - 1.75 inches
6. White space, privacy icon, and "Edit Profile of [Person]" (in very large font) -  0.8 inches (this profile had reasonably short names, so it only took up two lines -- some longer names wouldn't have fit on the screen because they would have spilled to a third line)

Ironically, most of the content of that green "Changes Saved" box is likely to be useless to the vast majority of people who make edits from smartphones. Given the limitations of these devices, it's unlikely that someone who just edited from a phone is going to be motivated to click on a link to (1) share a family tree image in social media or (2) open the Challenge Tracker on WikiTree+ to record their edit. In the smartphone environment, a simple message of "Changes Saved" would be ample.

(I also hope that the size of "Edit Profile of [Person]" can be trimmed for the mobile environment, but that's not related to the new box format.)