Symmetry in UX/UI Design

Gestalt principles are principles of human  perception that describe how we group similar   elements, recognize patterns and simplify  complex images when we perceive objects.   - So, Gestalt principles — sometimes called  Gestalt laws — are simply a way of thinking through   Gestalt psychology — 'Gestalt' just meaning 'form', is how we're making sense of a visual field. These are ways of parsing out what things mean within a visual space. Gestalt relies first and foremost on the understanding of a visual field and the ability to create

what are called *figure/ground relationships. So, figure/ground relationships are sometimes called 'positive space' and 'negative space'. So, I'm going to talk about them as figure/ground, because when we look at something like this visual field of rectangles, it all looks the same — that is right now our ground. But the first rule of figure/ground relationships is that discontinuity creates figure. So, by changing one thing here, by creating that discontinuity, that draws our attention,

that becomes the thing in which we are focusing on, and that is really essential, because this can manifest through the Law of Similarity, by which visual similarities are read as being more related. And we can do this through color; we can do this through shape; we can do this through size. So, we read these things as being more of a group. Proximity works in a similar way wherein the actual visual or physical proximity of things relative to each other tells us that these are also read as a group.

There's the Law of Continuation, by which our eye wants to follow a particular line. And so, when we read this visual, we don't read it as two lines which have met in the middle and made a hard turn. We read this as two lines flowing over each other, and that's because of continuation. And all of these things — Gestalt principles —  influence hierarchy, informational grouping and readability, and they become essential for understanding both concept and content.

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.

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.

Now, just to start off by saying responsive is a default. Responsive is not an option – *do it*. And the reason is because that's where the world is at. Everyone expects things to be mobile-optimized, and responsive just means that if I switch from my laptop to my tablet to my phone, the site's going to fit to that resolution; it's going to kind of follow me.

And we know that users do that; that's the default. So, by doing responsive design, you're supporting device switching, and that's why it's important. You're also potentially making things a little bit more accessible and SEO-friendly, which is a factor for Google's algorithm that prioritizes responsive sites.

How do I choose the right colors? I am a firm believer that there are no such things as right colors. There is always more than one way to apply color successfully. But I do believe in asking a series of questions before choosing a palette. Number one. Most importantly, do you need to incorporate existing colors or are you starting from scratch?

Look at what's already there. Are you working with a company company that already has a turquoise logo like Waze, for example? That doesn't mean that a brochure you design has to match the turquoise, but it helps if your palette relates to the logo. If they're going to sit on the same page, you also should consider the context of the overall style of what's already in place.

Is the emphasis, for example, on darker, more conservative colors or bright and festive ones? Number two, what colors does your client love? What colors do you or the person or the company you're working with gravitate to? Does your client at fresh direct love the color green, but you're presenting them with oranges and reds. You're going to get a happier client, personally, if they like the colors.

If they personally, personally, like them. If not, it might not be so good. Getting a feel for their personal palette can be the key to success, and it can be as easy as putting a paint deck in front of someone and asking them to point to colors that they find appealing. Number three, what is the overall effect you're trying to create? Do you want a color scheme that shouts, “Here I am”?

or do you want something that whispers softly? It's not just the hue that you choose that evokes a particular feeling, but it's the chroma, meaning the intensity and the value how light or dark a color is as well. Intense colors emphasize objects that they cover and their flashy, dark, warm colors have a way of drawing things together and are intimate. Light cool colors have a way of opening things up

and making them more expansive, especially if they're in a similar hue and value. In the case of the Washington Post app, the deep blue connotes a seriousness and authority that matches with their mission. Number four, the effect of color on scale. Are you trying to make a room look smaller, bigger, taller or shorter? I use color to adjust any deficiencies

in the scale of a particular space. If I'm painting a room with an uncomfortably low ceiling, a lighter color on the ceiling than on the walls will make the room appear taller. As you can see on the slide on the left, if I'm painting a room with uncomfortably high ceilings, a darker color on the ceiling than on the walls will make that room appear lower. As you can see in the slide on the in the middle,

if you want to make a room feel less long and narrow. I would put an accent color on the end wall as in the slide on the right. The following slides illustrate how changing the paint colors can drastically change the scale and the feeling of a room. We are flipping through these now, just so you can get a quick sense of how this works and last on exterior facades. You can also see how color is used to emphasize either architectural details

like windows and trim or on the building form itself. In the left slide. The first and second houses are done in varying forms of a monochromatic scheme that is sort of maroon and dark blue, whereas the houses further down with the green and tan and the red and tan emphasize architectural details. In the slide on the right, the details like window

trim and doors are emphasized in the gray and yellow houses, while the architectural form of the building is emphasized in the charcoal gray house further down to the right. Number five. Are you looking for colors that are contrasting or harmonious? Once you have chosen your dominant hue, then you need to decide which color scheme you prefer.

Monochromatic schemes where you're using shades of the same color to give the greatest sense of harmony. Complimentary schemes that use highly contro casting colors that hit opposite each other on the color wheel can be anywhere from exciting to jarring. And then there's everything in between the two ends of the bell curve. In this last slide, there is what it's called an analogous color scheme where you can see the similar greens and in the green on the left it's

used with a color yellow, which is next to green on one side of the color wheel. And in the right side it's green with a blue, which is next to it, on the other side in the color wheel. Number six why a neutral in every palette. First, let me give you a definition of neutrals. Neutrals are created by mixing a hue and its complement together in varying proportions.

This muddies or grays down the original hue, neutrals help to bring other color choices together by creating a place for the eye to rest. And they work as excellent backgrounds for more intense accents. In this slide on the left, you can see that the neutral is used as the background color, and on the right, the neutral is used as an accent in the next slide.

You can see how the pale, gray, neutral acts as a background for intense accents.

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.