Amanda Sopkin

Transcript

Hi. Hope you're enjoying the conference so far. I wish I could be there in person, but this is the next best thing. And I'm excited to talk about accessibility and coats of arms.

So, if you're someone who likes to follow along with slides while the talk is going, I did Tweet them out so you can go and look me up on Twitter if you want to access those. The inspiration for this talk is basically in software design and development, often we deal with complex problems and lessons that can feel kind of novel and new at first.

But a lot of times these are problems that people have wrestled with in some capacity for years or even centuries. So, I thought it would be interesting to take a look at design, specifically accessibility, within the historical lens of coats of arms.

So, it give you an idea of where we're headed, I'll hope by giving you some historical context about coats of arms and what they're for and where they come from. For the meat of this talk, we'll look at the lessons we can learn from the designs of coats of arms and how to apply those in our work in software.

A popular place you might have seen coats of arms recently is in Game of Thrones. If you're a fan, you might recognize some of the symbols like the Stark's direwolf or the Lannister lion. These had special meanings to the houses and were used to identify people who belonged to one of those houses.

Accessibility is kind of a big word. And especially in the last two to five years, it's been kind of a buzzword. This talk is not meant to be an introduction to accessibility. There are college courses and degrees and certificates on that subject.

But just to kind of look at best practices of accessibility within a different historical lens. And hopefully you'll learn some interesting things and kind of gain a new perspective.

So, as you probably know, accessibility's about more than just what something looks like. So, more than just kind of using good contrast and having a readable font. It means designing for people with motor impairments, by providing keyboard accessible functions for everything that you expect a use to do. Means accommodating screenreaders for your website. Things like that.

So, again, this is not intended to be a comprehensive introduction to accessibility. But I did pull the top ten rules on accessibility practices from the guide to the Internet for the EU. And those are you don't worry about memorizing these or anything. I just to want review them quickly.

Number one, structured contents. Avoid dependence on any one single sense, eyesight in particular. Help your users avoid mistakes. If they make a mistake, show them how to correct it.

Avoid flashing. Try to provide text descriptions where possible.

Make the functions on your site or app keyboard accessible. Avoid rushing your users. Identify links and where they will take you. Keep navigation UI consistent and try and keep your experience compatible across devices and browsers. So, I boiled those down more into three big rules which are: Structure contents, avoid dependence on any single sense and avoid rushing your users or pigeonholing them into any one action.

So, if you hear the term "Coats of arms," you might picture something like this. That's not what it is. The term is if I were getting ready for battle and putting on a suit of armor, I would put on a coat over that that would have a coat of arms or essentially a crest printed on it. The purpose of a coat of arms is to be easily identifiable for the house or country it represents.

And there are several reasons why that's good. It enables you to record and embellish the history of your nation in kind of a visual format.

It was a way to identify the dead. So that you could look at their coat and see what house they belonged to. A way to declare military units. If I was traveling and saw a group of people, I could see if they were friendly based on what they were wearing. A means to establish pedigree if you could trace back your coat several generations and a way to pass down family honors or symbols.

So, I'm gonna use the term "Heraldry." Heraldry is the system by which coats of arms and other bearings are devised, described and regulated. It's kind of the overarching context. I'm going to use the terms emblem and seal interchangeably with coats of arms. They're considered subsets of coats of arms if I show you something that's more like a seal for a later, it's also a coat of arms.

I wanted to touch on rights of use for coats of arms because I think it's kind of interesting. I pulled facts from the countries I researched while preparing for this talk.

In Denmark, any unlawful use of heraldic arms is a criminal offense. If I'm using a coat of arms that I don't have the rights to, I could be charged criminally. In Italy, heraldic matters were ruled outside of the scope of official law. Can in South Africa, they said all citizens can wear arm it is they please. So, kind of a more flexible approach there.

In Scotland, coats of arms are considered inheritable property. I inherit the family farm and then also the family coat of arms. And in Ireland, if you can trace back your ancestry, you can be granted the rights to a coat of arms.

So, I came up with a basic timeline for key events in different regions surrounding this concept. So, the earliest reference that we have to coats of arms in general is in 2000B.C., Egyptian hieroglyphics and artwork, they had rulers who wore emblems to signify why where they came from. And in the book of numbers in the Bible, it's the insignia of the children of Italy, a precursor. Then they were in use by western nobilities.

By the 16th century, strictly regulated in Ireland. And the 17th through 19th centuries, they were widely used to record family history. So, some interesting event there is.

Great. Now let's see what we looked like. I tried to pull a decedent sample size of different kinds of designs. It's not totally comprehensive. And I'm going to start with what you are familiar with you have seen crests in a tourist shop or something like that.

They were probably from Scotland or Ireland. So, often the ones that people are familiar with are from Europe. And particularly in this top row you can see some design commonalities with the two figures on either side and the shield in the forefront and then some type of crown symbol and maybe a motto as well. You can see certain similarities in a lot of those.

Asian heraldry, the ones for China and south Korea look more like seals in this case. They're kind of more round and bold. The one representing the Russian empire, you can see the western influence. It's got kind of some similarities to the ones on the previous slide.

And point out Japan in the bottom row, those are pictures of Mon, emblems used to present houses and we will talk about them. And you can see western influence, particularly with colonialism, with Nigeria, Malawi and Somalia and Kenya, and you can see the supporters on the central shield. And then in the bottom right, the complete of arms for Sudan has an eagle which is a common trend for coats of arms from the Middle East.

These are what some of the different heraldic signs look like in the Middle East. And you can see many feature this eagle which is the eagle of Saladin and a motto on the bottom. It's interesting to see certain patterns in various regions when it comes to their coats of arms.

These are some of the symbols from the Americas. These ones tend  I think they all have some kind of greenery which is kind of interesting. They also tend to be a little bit taller than the others which I also found to be interesting. And maybe a little bit more color as well.

Great. So, again, that's not obviously all of the coats of arms there are, but it's a sampling.

So, we were to think about what makes a good coat of arms, if we were to create our own, we would want it to be easily identifiable. Potentially across a battlefield to our enemies. We might want to incorporate symbols that have special meaning to us or look impressive to someone else. Those are things to keep in mind as we keep going. This is, again, some of the samples that I showed you.

And you can see there's a lot of variety. Some of them are extremely interesting, this one from Haiti with minute details. And some are more bold like this one from China which is an emblem that pops out at you from among the rest.

So, let's talk about some of the things that are done well in a lens of modern standards of accessibility. And, again, there's no right and wrong because these are works of art. We're just choosing to look at them within this particular framework. So, generally these are pretty easily distinguishable. So, these are some heraldic symbols from Germany.

And there are some similarities like the use of the crown or the lion in some of them. But if two of them were side by side, I probably would be able to tell them apart pretty easily. Which is good.

There's generally good color contrast. This example is from Egypt. And it's got an object in the forefront against a lighter background and the red lining. I will point out if you had red will have green color blindness, this is not ideal, but it does have some good contrast. There's evidence of clear themes, specifically within regions for a lot of these.

And a good example is the Japanese Mon. One example, you can see that there's a blossom and that symbolizes the renewal of life. Often, they're recognizable even if someone came from a different background.

In particular there's one with a sword, easy to interpret. An animal with bared teeth, that's pretty understandable. It's not a blanket rule, but in general they have recognizable elements for people that come from different backgrounds. So, what are some things that could have been done better in terms of modern standards of accessibility?

This is an example.

Recognizable elements for people from different backgrounds. So, what are some things that could have been done  standpoint. Could provide a description of what this looks like. But obviously it's intended to be a visual thing.

You might think of the audible equivalent as like a battle cry or something like that as you're going into battle. Or maybe a song.

Readability is not always great. So, this is a coat of arms from Portugal that's been printed ton some fabric. It's beautiful look at, but it's hard it make out the letters on the bottom there. So, not superreadable.

Some of them are very complex. Like this one from imperial Russia. So, if I were to print this into a book and able to look at all the details with a magnifying glass, that would be interesting. But on a coat of arms, a lot of this detail would probably get lost.

Great. Let's talk about what lessons we can take away from some of these designs and some of the problems they faced. So, a big one is the meaning and unintended meaning behind various symbols. So, while I was researching this talk, I read a paper from some students at Kansas State University opt meaning of Chinese symbols and what they mean in nonChinese cultures. They gave a meaning of a fish, a symbol of good luck and joy in China and is often used in business logos as a result.

But if you were to apply this in a more western context, a lot of times those are only used in a logo geared towards children or a restaurant. You could see where this could be confusing. If I put a fish into my coat of arms and I wanted to symbolize good luck and someone from a western background saw it and thought that my house was selling sushi.

Even symbols like animals that can seem clear to us often have specific cultural connotations. The international standard of organizations provides some guidelines on symbols. Stay away from hand gestures, religious symbols and animals which can be ambiguous culturally. You can use nature symbols in general like sun or rain or flowers. Graphics that are officially recognized by the ISO and symbols that represent things like equipment or transportation.

So, something like a truck or a hammer would be pretty safe. Abstract shapes like circles and squares are also good choices. I mentioned the international organization of standards. That's a body that was established by the U.N.

and is headquartered in Geneva. Their purpose is to develop highquality standards which facilitates exchange of goods, supports growth, promote innovation and protect health, safety and the environment.

So, you're probably familiar with some of the icons that they've standardized. They're things that are used in safety context or on roads signs, at airports. They can be things like hospital and no diving sign. And you can see by looking at these that they're meant to be  have a universal meaning. You don't need to speak a particular language to understand these.

I think another case study when it comes to the meaning of symbols is interesting to look at, the Mon from Japan. I talked about earlier the blossom is the symbol of the renewal of life. If I came from somewhere else, I might be able to guess that. Plant life is frequently correlated with renewal of life.

But it might be harder to understand not having the right background. There are others like this one in the top right is four diamonds which might be unclear to me at first glance. So, some of these symbols are specific to a particular region.

Another important lesson that we can take away from heraldic design is the importance of establishing a framework for your user. As you probably know, we as human beings are really good at recognizing patterns and dealing with patterns. And you see this in UI design or good UI design with things like a menu which is pretty consistent between websites. That's very helpful to me if I need to go to a website and find something that the navigation is consistent.

And an example of this in heraldic design, a lot of them had a very strict format for a coat of arms. So, this is a more western one and it shows the helmet and two supporters and the battle crier, a slogan across the stop. If I studied these and I was very familiar with their anatomy, I could read this and look at a coat of arms and say, okay, the supporters of this house are this and this is the motto, and this is where everything goes.

It's also good to remember that as sick as you are of design, your users are not going to be as sick of it. This is called Jacob's Law of the Internet User. And basically, if you're looking at your own website for maybe one hour or a couple hours every single day, everyone your most active users are only spending a couple of minutes. So, in the course of a month you can imagine that you would have maybe 30 hours of time spent looking at your website whereas your user would only have maybe 15 minutes or so.

And as a result, you might be sick of the design and think that you need a refresh, but your user doesn't have nearly the same exposure to it. So, it's a good thing to keep in mind in design in general. And heavily related, they've done Studies that find that users actually like feeling pretty exposed to a website. So, you might think that they want a new and edgy experience, but in reality, they probably like feel like they know exactly how your website works.

Another important lesson that we can learn from heraldic design is the importance of simplicity. So, this is I think a good lesson from someone named Steve Krug. And he referred to users of the web as sharks who have essentially going along and trying to accomplish a specific thing. And then they accomplish that and have to keep going. If they stop, they'll die.

They have to keep swimming. If you can imagine your users when they go to your website with not trying to stop and smell the roses. They're trying to accomplish one specific thing. And however, you can help them do that will be good.

So, this is an example of where complexity won out. This is the 1915 code of arms for the AustriaHungarian empire. There's a lot going down here. They got into the tradition of passing down history in the coat of arms and there's a bunch of flags and symbols jumbled together here to the point that it's hard to get meaning from looking at it.

It's obviously very interesting and if you know what's going on, I'm sure it tells an interesting story. But might have been better to favor simplicity, depending on your purpose.

Another important lesson that we can take away is related to complex text flow. So, maybe you've had this experience as an engineer where you get your beige laid out just right and everything looks awesome. And then you add one word and all of a sudden there's a line break. And everything has been changed and it looks horrible.

So, this is one of the examples of why text flow is really hard to deal with. In particular if you're changing the language as well. That's an added complication.

And in heraldic design there's a similar corollary. I have to explain something first. So, if I were a night going into battle, the right side is the Dexter side and the left side is the sinister side. On a coat of arms, it looks like this, the user's right side is their Dexter side and the left side is  the left is the feminine and the right side is more masculine. It ma tern signs go on the left.

They would put them together. These are two coats of arms, one with Munich and one from Frankfurt. If I combine them, it looks like this. You lose a lot of the original design.

Then we get this practice called impalement, which is a form of heraldic combination or marshaling of two coats of arms. It's a little bit more nuanced. This is an example of a composition of different symbols that I think is more effective. On the left you see the three blossoms here which is representing one thing.

And then in the middle you have the two lions which is another house. And then on the right you have the bugles and the crosses. So, this is an example of how you could combine several symbols in a more thought out approach that ends up being more effective than just kind of shopping them in the middle and sticking them together.

And I think this is heavily correlated to what it's like to deal with text sometimes. There's not a clean way to chop it. Often you have to think carefully about composing elements. And the bottom line it's hard, often it can be like the diary page with text everywhere.

There's no one size fits all solution. Specialization will be necessary in your approach.

To wrap up, if you take anything away from this talk, try and favor simplicity over complexity. It's a good idea to accomplish familiar frameworks for your user. And consider the meaning that your symbols might have, particularly for people from a different background. So, if you take anything away, those are the three things that I would hope that you remember.

And, again, I did Tweet out these slides. Thank you for coming. And I think we'll have some time for questions.

[ Applause ]