The 5 Elements of UX Design

The 5 elements of UX Design act as a guide for designers to build work from. They are the layers of any project and are what every design project should contain. The first layer, “strategy”, refers to the abstract of a project. Strategy is user research, stakeholder and client understanding, and project goals. The second level, “scope”, refers to what is needed and what can be part of the product, whether that’s what platform the product is designed for or what features it needs to include. The “structure” of a project is the organisation of the scope through processes like information architecture and site maps. “Skeleton” refers to the practical and visual structure of what the user sees. This is things like where buttons are, the navigation, and wireframes. The final level, “surface”, is what the user sees and interacts with, so has the most visual and sensory design.

While I had a general understanding of this, seeing the 5 elements of UX design in this model has helped me to think again about its importance and understand it better. Sometimes I think I struggle to work in the proper design pathway when doing uni projects, as I can get carried away early with the visual side of design, however seeing this has helped me understand how important taking a project step by step is. I’ve noticed in my autonomous vehicle project that I’ve had to go back and change things less because I’ve followed this process more, and now seeing this I can understand that the reason I’m having to go back and change things less is because I’m making more informed decisions by going through the process better.

Diagram-of-the-five-elements-of-user-experience-design-by-Jesse-James-Garrett.-.png


Universal vs Accessible Design

A topic that I found particularly interesting during this week's lecture was the difference between Universal and Accessible Design. I hadn’t considered this before and wanted to look further into it.

Accessible design is the addition of features to make something accessible to others, whereas universal design is designing from the beginning that the thing will be usable by all. For example, a chair lift can be added beside a set of stairs to make it accessible, but if the way to access the higher level was designed as a ramp rather than stairs to begin with it makes it universally usable. I think when designing something it is important to design with the intent that it is initially usable by all, rather than designing something and then adding accessible features, as this way doesn’t make users feel like they are an afterthought.

To explore this further, I looked at the 7 principles of Universal Design. One of the principles I found particularly interesting was the idea of flexibility in use. This relates to how products are designed so that they can be adapted to be used in different ways, for example, by left and right-handed users. This was interesting to me as it wasn’t something I’d considered before but could have some really unique effects in UX design. There are already things like light and dark modes in place in most UX products to make products as adaptable as possible, but things like right and left-handed modes are less common when they could be vitally important for users to be able to use phones one-handed. Keeping design flexible in use is something I feel is really important and something I want to keep in mind going forward.

The 7 principles of Universal Design — FROLIC studio | Sustainability-led Product Design & Innovation | Certified B Corp


Affordances

Affordances are the action possibilities in relation between the user and an object. They are essentially the cues that indicate to the user that an action can be performed and what that action will cause. For example, a button on a website may be styled in way to indicate it is clickable, with text that says what the button does. There are four types of affordances; visual, interactive, explicit, and implicit. Visual affordances are parts of the visual style which imply a function, such as a button rounded corners or drop shadow. Interactive affordances are things that change during an interaction to imply function, such as hover states. Explicit affordances are clear labels which say what a function is, and Implicit affordances are based on inferred function, such as through icons.

I had heard of affordances before but didn’t really understand exactly what they were and looking into them now has made me realise just how crucial they are to UX. I can really see how utilising affordances correctly can make such a massive difference in the UX of a product, as it makes the product simply easier to use. I think for me at the moment, it’s important to understand the conventions of affordances, for example an affordance which is universally used to show something. Understanding which affordances should be used where is something I want to improve upon as it will let me create better user experiences that are easily accessible by all.

pre.png


“Edge Cases”

I’ve recently been reading Mike Monteiro’s “Ruined by Design” and a really interesting point in relation to accessibility has come up. It’s the idea that as designers in the modern world we can’t allow for “Edge Cases”. Edge Cases is basically a way of saying that a group of people won’t be able to properly use a designed product. Monteiro explains that defining the Edge Cases of a product is basically laziness on the designers behalf, as they are not prepared to design something that is universally accessible. What I find really interesting about this is that it really lays the responsibility for accessibility on the designer in a way that I haven’t considered before. This way of thinking is closely related to the idea of universal design as it makes it stops the mentality that you’re designing a product then making it accessible as possible, but rather you have to design for all from the beginning as that is your job as a designer. This idea relates to another in the book, which is that a lot of products are only accessible at the moment by “frantically mopping”, which basically means that something is designed first, then changed to be accessible every time an accessibility issue arises. I think this mentality around universal design is really important to have and something I want to focus on myself. I can see how designing with the mentality that you simply have to accommodate everyone from the beginning will help to build a better and more universally accessibly environment within digital products.

1*_0HJ6Rg7xy3gGP17jxU7-Q.png