The Law of Uniform Connectedness

Accessibility ensures that digital products, websites, applications, services and other interactive interfaces are designed and developed to be easy to use and understand by people with disabilities. 1.85 billion folks around the world who live with a disability or might live with more than one and are navigating the world through assistive technology or other augmentations to kind of assist with that with your interactions with the world around you. Meaning folks who live with disability, but also their caretakers,

their loved ones, their friends. All of this relates to the purchasing power of this community. Disability isn't a stagnant thing. We all have our life cycle. As you age, things change, your eyesight adjusts. All of these relate to disability. Designing accessibility is also designing for your future self. People with disabilities want beautiful designs as well. They want a slick interface. They want it to be smooth and an enjoyable experience. And so if you feel like

your design has gotten worse after you've included accessibility, it's time to start actually iterating and think, How do I actually make this an enjoyable interface to interact with while also making sure it's sets expectations and it actually gives people the amount of information they need. And in a way that they can digest it just as everyone else wants to digest that information for screen reader users a lot of it boils down to making sure you're always labeling

your interactive elements, whether it be buttons, links, slider components. Just making sure that you're giving enough information that people know how to interact with your website, with your design, with whatever that interaction looks like. Also, dark mode is something that came out of this community. So if you're someone who leverages that quite frequently. Font is a huge kind of aspect to think about in your design. A thin font that meets color contrast

can still be a really poor readability experience because of that pixelation aspect or because of how your eye actually perceives the text. What are some tangible things you can start doing to help this user group? Create inclusive and user-friendly experiences for all individuals.

To create a proper hierarchy. We're going to use one of the gestalt rules called proximity. And of course, if you know the Gestalt rules, you should try to follow all of them. But I believe proximity is the most important one, because in many cases we're using very simple shapes. So the distance between those shapes is what actually makes the entire layout. And this rule says that objects placed close to each other are automatically understood as a group.

So in our case, how many groups do we have here? So we have the group of 12 bluish green circles. Then we have a group of three in green circles and then another group of three green circles. But then we also have a group of all the circles combined. And this is how this grouping and proximity works. You need to be aware that there are groups within groups and there can be groups within groups. So let's take one of our examples from before.

And if we add grouping on top of it, you'll see that we can just by proximity, establish a couple of groups here. The emoji is one group, then the text and the other text is the second group. And then the pattern with the other clickable element is the third group. And of course, you can also consider the emoji being one group and all of the content is being another group. It's not just how you approach it and how you're actually going to work it in.

Additional examples of this design, because it's not just going to be just this one version, but the thing is that we should be able to consistently replicate those groups in other versions of that screen. So if we created those groups and those distances between the groups, they need to be consistent. And this is what you should use basically to create that consistency. So if you have a distance between the two groups, which are just the whole windows, the distance should always be bigger than the distance

between individual elements within the groups, within a group. So the further down we go in a group, the smaller the distance can be. That allows our brain to process it naturally and really quickly. And we'll see that. Okay, we have two separate big groups of things and then they are divided into smaller groups. And then you can use that rule to organize it further. So you can use another smaller square to

place between elements within those groups. Or you can even use the same one because you can see you could use the Red Square here between the large title and the text as well and the bottom and the smaller text underneath. And that would still fit so that or a smaller one would work here. And this is really important because that's the whole rule of clarity and layout that is really important to follow. So those distances cannot be random. They need to be based on something and they need to be based on

the natural hierarchy. So we quickly understand that, okay, this is a group and this is a group within a group, and these things are together as well because that's going to make it a lot easier. Grouping is also important with the distances. For example, this is one of the largest, like more common problems that I've seen in many forms designed by junior designers is not having enough space between the label and the previous field. And that creates an effect where if there is a longer

a forum where coming it through with our eyes and we don't really know which field that label belongs to, so just increase the distance by two or three times between the fields and then four or six times between the title and the form. And by having that consistency with all the other elements on the site, so like if smaller distances extend, the larger one is to extend keep the X and to X across all of the other things to keep that consistent grading of all of those elements.

How do Gestalt Principles apply to typography? This is really important to note, that continuation is essential for typography because I see this all the time where designers want to be clever. And here on the left-hand side, we have some right-aligned and left-aligned type which are living back to back, and we know from the hue structure that we're intended to read this as 'Back To School Sale', but this is not how we're going to read it. Because of continuation, we are following a baseline, as this example in Latin text.

So, we don't read 'Back To School Sale'; we read 'Back School To Sale', which completely disrupts the message. So, instead of doing something like this, think through continuation. The example on the right-hand side makes way more sense and will not disrupt our legibility or readability because we're following continuation, thinking about that baseline. And continuation can also create a beautiful implied motion. So, here we can use this in a really expressive way, following this line. 'They gracefully descend the stairs to arrive at the party.'

That adds just a little bit more social meaning for us.

As you're designing, it's so easy just to design for the people that you know and for the culture that you know.  However, cultures differ. Now, that's true of many aspects of the interface; no[t] least, though, the visual layout of an interface and the the visual elements. Some aspects are quite easy just to realize like language, others much, much more subtle.

You might have come across, there's two... well, actually there's three terms because some of these are almost the same thing, but two terms are particularly distinguished. One is localization and globalization. And you hear them used almost interchangeably and probably also with slight differences because different authors and people will use them slightly differently. So one thing is localization or internationalization. Although the latter probably only used in that sense. So localization is about taking an interface and making it appropriate

for a particular place. So you might change the interface style slightly. You certainly might change the language for it; whereas global – being globalized – is about saying, "Can I make something that works for everybody everywhere?" The latter sounds almost bound to fail and often does. But obviously, if you're trying to create something that's used across the whole global market, you have to try and do that. And typically you're doing a bit of each in each space.

You're both trying to design as many elements as possible so that they are globally relevant. They mean the same everywhere, or at least are understood everywhere. And some elements where you do localization, you will try and change them to make them more specific for the place. There's usually elements of both. But remembering that distinction, you need to think about both of those. The most obvious thing to think about here is just changing language. I mean, that's a fairly obvious thing and there's lots of tools to make that easy.

So if you have... whether it's menu names or labels, you might find this at the design stage or in the implementation technique, there's ways of creating effectively look-up tables that says this menu item instead of being just a name in the implementation, effectively has an idea or a way of representing it. And that can be looked up so that your menus change, your text changes and everything. Now that sounds like, "Yay, that's it!"

So what it is, is that it's not the end of the story, even for text. That's not the end of the story. Visit Finland sometime. If you've never visited Finland, it's a wonderful place to go. The signs are typically in Finnish and in Swedish. Both languages are used. I think almost equal amounts of people using both languages, their first language, and most will know both. But because of this, if you look at those lines, they're in two languages.

The Finnish line is usually about twice as large as the Swedish piece of text. Because Finnish uses a lot of double letters to represent quite subtle differences in sound. Vowels get lengthened by doubling them. Consonants get separated. So I'll probably pronounce this wrong. But R-I-T-T-A, is not "Rita" which would be R-I-T-A . But "Reet-ta". Actually, I overemphasized that, but "Reetta". There's a bit of a stop.

And I said I won't be doing it right. Talk to a Finnish person, they will help put you right on this. But because of this, the text is twice as long. But of course, suddenly the text isn't going to fit in. So it's going to overlap with icons. It's going to scroll when it shouldn't scroll. So even something like the size of the field becomes something that can change. And then, of course, there's things like left-to-right order. Finnish and Swedish both are left-to-right languages. But if you were going to have, switch something say to an Arabic script from a European script,

then you would end up with things going the other way round. So it's more than just changing the names. You have to think much more deeply than that. But again, it's more than the language. There are all sorts of cultural assumptions that we build into things. The majority of interfaces are built... actually the majority are built not even in just one part of the world, but in one country, you know the dominance... I'm not sure what percentage,

but a vast proportion will be built, not just in the USA, but in the West Coast of the USA. Certainly there is a European/US/American centeredness to the way in which things are designed. It's so easy to design things caught in those cultures without realizing that there are other ways of seeing the world. That changes the assumptions, the sort of values that are built into an interaction.

The meanings of symbols, so ticks and crosses, mostly will get understood and I do continue to use them. However, certainly in the UK, but even not universally across Europe. But in the UK, a tick is a positive symbol, means "this is good". A cross is a "blah, that's bad". However, there are lots of parts of the world where both mean the same. They're both a check. And in fact, weirdly, if I vote in the UK,

I put a cross, not against the candidate I don't want but against the candidate I do want. So even in the UK a cross can mean the same as a tick. You know – and colors, I said I do redundantly code often my crosses with red and my ticks with green because red in my culture is negative; I mean, it's not negative; I like red (inaudible) – but it has that sense of being a red mark is a bad mark.

There are many cultures where red is the positive color. And actually it is a positive color in other ways in Western culture. But particularly that idea of the red cross that you get on your schoolwork; this is not the same everywhere. So, you really have to have quite a subtle understanding of these things. Now, the thing is, you probably won't. And so, this is where if you are taking something into a different culture, you almost certainly will need somebody who quite richly understands that culture.

So you design things so that they are possible for somebody to come in and do those adjustments because you probably may well not be in the position to be able to do that yourself.

User Interface Design Patterns are recurring components which designers use to solve common problems in interfaces. like, for example, when we think about those regular things that often are repeating themselves to kind of appear in, you know, in complex environments We need to show things that matter to people when they matter and nothing else. Right. it's just really sad what we see. Like, for example, if you look at Sears, right? Sears is just one of the many e-commerce sites, you know, nothing groundbreaking here. So you click on one of the filters and then the entire interface freezes

and then there is a refresh and you're being scrolled up. And I always ask myself, is this really the best we can do? Is really the best kind of interface for filtering that we can come up with, or can we do it a bit better? Because we can do it a bit better. So this is a great example where you have galaxies and then galaxies, you have all this filters which are in rows. Sometimes they take three rows, sometimes four or sometimes five rows. That's okay. Show people filters, show people buttons if they important show them.

Right. But what's important here, what I really like is we do not automatically refresh. Instead, we go ahead and say, "Hey, choose asmany filters as you like", right? And then whenever you click on show results, it's only then when you actually get an update coming up in the back. Which I think is perfectly fine. You don't need to auto update all the time. And that's especially critical when you're actually talking about the mobile view. The filter. Sure, why not? Slide in, slide out, although I probably prefer accordions instead.

And you just click on show products and it's only then when you return back to the other selection of filters and only when you click okay, show all products, then you actually get to load all the products, right? Designing good UI patterns is important because it leads to a better user experience, reduces usability issues, and ultimately contributes to the success of a product or application. It's a critical aspect of user centered design and product development.