Placeholder Image

字幕列表 影片播放

  • 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 ]

Hope you're enjoying the conference so far.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

JS開發可以從中世紀的盾牌中學習到什麼關於A11y的知識,阿曼達-索普金(Amanda Sopkin)|JSConf EU 2019 (What JS Devs can Learn from Medieval Coats of Arms about A11y by Amanda Sopkin | JSConf EU 2019)

  • 4 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字