Usability Testing | Usability is an attribute of good design

»If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.«

– Steve Krug in Don’t make me think (2000)

To observe, if a (digital) product really fits the user’s needs and what are potential problems and pain points, there is a method called usability testing. I watched a talk of Steve Krug, experience professional and author, in which he explains why usability testing is so important and runs through some tips for improving your own usability tests. To break it down usability testing basically is watching people trying to use what you have created, even if it is just a prototype, and let them think out loud in order to have access to their cognitive process and looking for the frustration points, questions etc. It should start at an early state of the project and includes the user’s direct feedback into the creation process, to figure out the problems before you build them into your project and discover them at a (too) late status.   

Why are we doing usability testing?

They take a lot of time to build, get the data, cost money and the main question is, is it all worth it? It is! There are many reasons for you to test your product in order to have a good user experience and improve your work. Steve Krug said:  

»Usability is an attribute of good design«

Steve Krug

He defined a thing as usable if:

  1. A person of average – or even below average – ability and experience (i.e., most people)
  2. can figure out how to use the thing for the intended purpose
  3. without it being more trouble than it is worth.

A common issue is that a deeply involved person e.g. a designer is very into the subject and gathered a lot of information throughout the research phase of the project. While designing the product, she/he of course uses all that knowledge and creates the prototype as if the user has all that knowledge too, because it is just obvious to her/him and why should anybody think of it different? Usability testing gives the creators the opportunity to watch somebody else have the experience without former knowledge about it and let the participant use it in their own individual, intuitive manner. This discovers lots of problems in best case at an early state of the project and can happen in only a very short amount of time if well planned and organized. As Leisa Reichelt, Head of Research and Insights at Atlassian, said: 

»You are not your user and you cannot think like a user unless you are meeting users regularly.« 

Leisa Reichelt

In his talk, Krug also mentions that we are basically all users and we imagine that everybody uses it the same way as we do, but we are not our users. He says that users are incredibly diverse and all use is idiosyncratic (depending on prior knowledge, situation, goals…).  Sometimes it can be very hard for us creators to remember that the user does not know what we know.

Usability issues can slow down the whole process of use, it can cause anxiety, be annoying and sometimes even scare people of to use something any further at all. Usability testing can prevent the product from all this, in order to guarantee a good user experience and usability throughout the process of use. Most usability issues and problems are contextual, it depends on the thing that you are building, there are only a few absolute truths in therms of usability and UX, says Krug. He gives a good example, talking about that people mostly get their jobs because of who they are as a person. He describes that e.g. people become a developer, because they like complicated stuff and figure out how things work. For a pure developer, interfaces can totally look different as if a designer or another involved person in the process looks at it and it can also differ from how the user would look at it. If you now take into consideration every member of a team, including developers, designers, project managers etc. it is sometimes just very hard to agree on something and make a decision and proofs the idiosyncratic use. A good solution can be to just test it and see how the user can cope with the discussed particular element. 

In his talk, Krug gives a short introduction in DIY usability testing (nutshell version) and goes on by a live usability testing to demonstrate how easy it can be. After that, he goes on and introduces his 6 maxims, which you can also see in the video beneath. 

For user centered design, it is necessary to be aware how the user would interact with your product or service, whether it is a website, an app, a streaming service or anything else. For me it influences my design decisions and helps to discover usability problems, that I sometimes would have never imagined to be a problem at all. Every design decision kind of starts off with a hypothesis, that this is how the user would like to experience something and this is also very much influenced by own assumptions and previous knowledge. User Testing proves your decision wrong or right and puts yourself in the user’s shoes to see the project from his point of view.

Sources:

Don’t make me think : Web usability – das intuitive Web by Steve Krug

Video 01: Usability Testing: How to Do-It-Yourself with Steve Krug:
https://youtu.be/VTW1yYUqBm8

How to Glassmorphism

In this blog entry I will have a look on how to implement Glassmorphism in figma, but also briefly in code. 

First you start off by choosing a colorful background or a simple background with colorful elements, which will be seen partly due to the transparency of the glassmorphic card element in front. It works very good with gradients, why I have chosen them for my example. Ones the background is set, create a card and choose a linear gradient for the fill, which consists of two white colors of different opacities. It is important to change the opacity of the fill, but not the opacity of the whole object. With a background blur, the glass optic becomes visible and you get a first preview of the look. 

Add an outline to indicate the borders of the object. It later helps to establish the hierarchy. For a better illusion of depth, additional linear gradients that fit to the background can also be applied to the outline. A subtle shadow rounds everything off and helps to distinguish all the layers. Also the content is placed in an Overlay layer mode, which attaches it more into the card. By using noise, the frosting effect is created and gives the card the perfect glass optic. 

But what about the visual hierarchy with this transparent elements? 
As in Neumorphism, also Glassmorphism uses the skeuomorphic approach of the real world counterpart, which in this case is of course glass, as a guideline for shadows and blur effects. When there are multiple layers of glassmorphic cards, each of them should receive a subtle shadow as described above. 

The differentiation of the blur helps to show which element is at the top, middle and back. As in the real world, the farer away a frosted glass is from the background, the more blur the background seems to be through the glass. For applying this, just start with the back element and give it a blur value of 15, the middle one has to be a little more blurred, around 25 and the top one can be around 40. To make the hierarchy totally clear, it is also necessary to decrease the opacity from the top card to the lowest. In the image below, the top card has an opacity value of 36, while the bottom one has only 16. To complete everything, add the borders applying the rules from above or just use a white outline. Either way the outline has to have a lower opacity from the top card to the lowest card, for which one can orientate on the applied blur as well.

To make glassmorphic icons, the rules showed in the figma file above are usually implemented in a single element of the icon, which is placed in front of colorful background elements. The actual color of the icon is sometimes also displayed in the transparent glass surface. In the images below, you can see various examples of how Glassmorphism is implemented on icons. The simple step by step guide from above can be used to create the glassmorphic icons from scratch.

While Neumorphism is mostly used for interactive elements like buttons, cards, toggles and sliders, Glassmorphism is more used in a passive way. It is supposed to give the interface a smooth and modern look by reducing the style to only small and non interactive background elements like cards, icons, overlays etc. 

As with Neumorphism, there is a generator for glassmorphic card elements available online which gives a preview and generates code to copy for your css code.

https://glassmorphism.com

I found lots of tutorials how to implement Glassmorphism in code, one of the examples how to do it you can see below. Basically there are only a few lines of code in html and css (focus is on css) which are very similar to the principle of creating this style in figma.

Sources

https://www.youtube.com/watch?v=8UWkR1H5E4o
https://www.cmarix.com/blog/glassmorphism-the-new-trendsetter-in-2021-for-ui-design/
https://uxmisfit.com/2021/02/03/glassmorphism-guide-to-visual-hierarchy/
https://www.crafted.at/b/3-ui-design-trends-im-check-teil-3-glassmorphism/
https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

https://www.youtube.com/watch?v=HfKBKQOyWHM
Generator: https://glassmorphism.com
https://youtu.be/Li2apfUzKeE
https://youtu.be/IJrLL3G6xQc
https://youtu.be/rLeCNS1jfwM

How to Neumorphism

When designing User Interfaces, there are several ways to implement Neumorphism or Glassmorphism. In this blog post, I will look at how to develop neumorphic elements like cards and Icons in interface design tools like figma but also briefly in code.

First, let’s start with Neumorphism by looking at card elements, which is the most present UI element of this style. The factors that have to be considered are the size, radius, distance, intensity and blur. It has all to do with the shadows, that generate the look of „attaching to the ground“. Due to its reduced color scheme it works best, if the neumorphic card has the same color as the background. Also rounded borders help the effect to stand out more. I tried it out myself in figma, it is very easy to do and by playing around with the blur value, the distance to the background seems to change. The more blur, the farer away from the background the neumorphic card seems to be.

By adding gradients, it makes the card element seem to become convex or concarv. Adding the shadows within the card instead of outside has the effect that the card generates kind of hole or window in the interface.  

One of the goals of Neumorphism is to include the skeuomorphic approach, which means to combine the minimalistic design style with familiar objects of the analog world not only in the design aspect but also in their function, as I already analyzed in previous blog posts. The skeuomorphic approach also can be part of the icons. All the icon parts themselves have adjusted background shadows and lie on card elements with shadows, which gives them a 3D look and complete their connection to their real world counterparts. For realization in figma, the same rules as for the cards are implemented onto the icon elements. 

For a button, you can also apply the rules mentioned before. The default button can simply stay in the normal or concarv mode, while the active button should seem like it is really pressed and attaches itself deeper into the interface, for which the inner shadows should be used. Additionally to imply the „active status“, the color can also change when pressed. It is important to keep an eye on the contrast and differences between the states of the buttons. It has to be very clear to e functional. 

There are several tutorials how to do Neumorphism, there even is a Neumorphism card generator available online, where you can try out yourself and also see how it should be implemented in css code. You also can do this easily in code and don’t need a lot of lines. It is basically the same principle as it is in figma just translated.

https://neumorphism.io/#e0e0e0

Sources

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
https://lukasckuehne.medium.com/trying-out-soft-ui-12153537dc50
https://www.simpleguides.de/soft-ui-neumorphism/
https://youtu.be/KlSLdEB3lzg
Neumorphism CSS Generator: https://neumorphism.io/#e0e0e0

Images and Videos

Image 01 – 04: Neumorphic cards – own creation
Image 05: Neumorphic-Icons
https://dribbble.com/shots/11473239/attachments/1509448?mode=media
Video 01: Neumorphic Icons
https://dribbble.com/shots/10746021-Neumorphism-Social-Buttons
Image 06: Neumorphic Buttons
https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6