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.
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.
In jeder Woche setze ich mir Ziele und bestimme den Ablauf meiner Routine. Der Plan ist es jede Woche oder jede zweite Woche meine Workload zu steigern und mich so langsam aber doch an professionelle und strukturierte Content Kreation heran zu wagen. Das ist deshalb so da ich sonst befürchtet habe mit zuviel Workload dieses Projekt gleich mal wieder aufzugeben.
Woche 1
In Woche eins versuchte ich nicht regelmäßig zu posten, sondern je nachdem wie es mir am besten passte. Das Ganze hatte den Sinn zu schauen was für einen Effekt es macht, wenn ich mich nicht an den Algorithmus halte und wie meine Standardzahlen/-statistiken aussehen würden. Die einzige Richtlinien, an die ich mich gehalten habe, war einen Post zwischen 18 und 20 Uhr zu machen.
Ziele für diese Woche waren andere Profile in meinen Post zu verlinken, in den Stories anderer Profile erwähntzu werden und Follower dazu zu gewinnen und am besten wäre das natürlich wenn die Follower Unbekannte werden. Bis jetzt besteht nämlich der Großteil meiner Follower schafft aus Personen, die ich aus meinem Privatleben kenne und die von meinem privaten Account auf meinen Designer-Account aufmerksam gemacht wurden.
Ein weiteres Ziel war es Stories zu posten – so viele wie möglich. In Woche 1 kam mein Gesicht nie in einer Story vor. Das hatte vor allem den Grund, dass ich mich doch sehr unwohl dabei gefühlt habe, mein Gesicht im Internet zu zeigen.
Das Endresultat der ersten Woche auf Instagram sieht so aus:
Ich konnte meine Follower von 111 auf 122 steigern. Insgesamt war das dann eine Steigerung von 1,09%. In dieser Woche wurden zwei Postings gemacht. Bei einem von beiden habe ich Self-Promotion angewendet. Self-Promotion bedeutet in diesem Zusammenhang, dass ich meinen Beitrag in meiner Story meines Design- als auch Privat-Accounts geteilt habe. Auch eine weitere Person hat mich in seiner/ihrer Story erwähnt. Erreichte Profile waren 92, Content Interaktionen waren 42.
Woche 2
In Woche 2 setze ich mir das Ziel jeden Tag zum posten und täglich Stories zu machen. Die Zeit wurde wieder fixiert auf zwischen 18 Uhr und 20 Uhr. Die Ziele für diese Woche waren andere Profile zu den Post zu verlinken, in einer Story von andere Personen vor zu kommen, neue Follower zu gewinnen, mein Gesicht in den Stories zeigen, und unter Postings von anderen Personen und Profilen zu kommentieren.
Woche 2 zusammengefasst:
Ich konnte meine Followeranzahl um 4,1% steigern. Ich habe allerdings um 12,1% weniger Profile erreicht und hatte 51,7% weniger Content Interaktionen. Das Fazit ist, dass das zeigen meines Gesichtes in der Story positiv ausgewirkt hat und viele Leute auf meine Story reagiert haben. Weiters habe ich versucht immer Abstimmungen in meinen Stories vorkommen zu lassen und Leute weiter zu Interaktionen zu bringen. Ebenfalls habe ich versucht meine Stories immer auf meine Postings abzustimmen und so einen geschlossenen Kreis zu bilden. Das bedeutet auch Leute durch meine Stories auf meine Postings aufmerksam zu machen.
Die Statistik besagt, weiters, genau das was von vorne herein auch schon die Ergebnisse aus der User Research waren:
Meinem Profil Folgen mehr Frauen als Männer. 51, 5 % Frauen, 48,5 % Männer.
Weiters ist meine Zielgruppe zwischen 18 und 34 Jahren alt und ungefähr um 18 Uhr am aktivsten. Für die nächsten Wochen setze ich mir das Ziel vor 18 Uhr zu posten um dann in dem aktiven Zeitraum schon ein Posting in dem Feed meiner Follower zu haben. Wohnhaft sind die meisten meiner Follower in Graz und Wien bzw. dem deutschsprachigen Raum: Das bedeutet, dass meine Postings und Stories großteils bzw. hauptsächlich deutschsprachig bleiben werden.
If a company does not want to spend the time and money on an unmoderated or moderated usability test, there is also the possibility to do a DIY usability test. Although the data you get from this method cannot be compared with the data you get from its bigger siblings, it’s still better to do it yourself than to do no testing at all.
In the following table, you can see all advantages and disadvantages of the Do-It-Yourself tests compared to the moderated and unmoderated tests (he calls them the big honkin’ tests).
source: Rocket Surgery Made Easy, Steve Krug, page 25f
For even more details about this method I recommend watching his workshop.
Card Sorting
Another very popular testing method, primarily used for evaluating the information architecture of a system, is card sorting. It helps to organize the content of a site to match it to the way the actual users think. That’s also the main reason why it is so important that you are using actual users of the system for card sorting.
A card sorting can either be done in-person on a large table or a magnetic wall or remotely with specific online tools. These tools also offer you to ask follow-up questions and help you with gathering additional qualitative data to the quantitative data from the card sorting. Either way, card sorting is a very quick usability testing method.
During card sorting, you hand your participants a stack of cards with different topics written on them and they have to sort them and organize them into different piles. Depending on the type of card sorting you do they get labeled groups by the creator (closed card sorting), can label their groups on their own (open card sorting) or they can modify the groups given to them by the creator (hybrid card sorting). Card sorting helps you to understand the mental models of your users.
Click Test
Click tests are also often called first click tests and help with identifying navigation problems. It is not used for creating the information architecture or navigation like the card sorting, but it is used for seeing if the navigation from the card sorting works and helps the users to accomplish different tasks.
Click tests are done with an image of a sketch, wireframe, or design of a system and are therefore easy to set up and done really quickly. The Participants are then asked to click where they think they need to click to complete a given task. These clicks and the times it takes them to click are also recorded in the background and can be visualized in a heatmap and helps with visualizing the areas where the most clicks occurred. Since it is easy to set up and it also works with low fidelity sketches, you can start doing them early in the design process and repeat them along the process.
An example of a click test would be to show them an image of the homepage and ask them to sign up. After they have clicked the element they think will bring them a step closer to the sign-up process, you normally also ask them why they clicked there. These questions also help with understanding their mental models and getting more qualitative data.
Another important result of a click test is that you can easily find areas that are clicked a lot but are not actually clickable. This helps you with minimizing the number of wasted clicks.
The biggest disadvantage of this method is that you can only use them for single screens or a few of them and you cannot do a click test with longer and more complicated task flows. Additionally, because you are using a static image it is also not simulating a realistic surfing or browsing behavior of a normal user and the results may be different when elements are located below the fold of the screen on the live version of the system.
Eye Tracking
Eye-tracking is great for identifying elements that are helping and hurting the attention. It uses additional hardware and software to track the movement of the eye and measure the gaze points while a user is viewing the system. During this process, everything is recorded and can be presented as a heatmap or a gaze plot. The gaze plot can help you with identifying where the users are actually looking and where they are not looking. It also helps with identifying the order in which they are looking at different elements. Heatmaps are primarily used to visualize the elements that attract the most amount of attention and which elements are overlooked by the majority of users.
The main advantage of eye tracking is that you can identify how much attention every element gets. You cannot only identify important elements that get too little attention, but you can also identify elements that pull the attention away from the more important elements. For getting quantitative data out of the eye-tracking test it is also important that the facilitator also ask follow-up questions.
The biggest disadvantage of eye tracking is that you need special hardware and software to actually start collecting data. That’s also the reason why you cannot do an eye-tracking test remotely and have to set up a room with your eye tracking device before the test starts.
Another fast but effective method is the preference test. It helps to determine which design of several choices the users like best, why they liked it best and what they liked about this version. This method is especially helpful during the early stages of the design process or when the team is not able to decide which version they like best. A preference test can also be done online with a video call and screen sharing, without any special tools.
The biggest disadvantage of this method is that it does not mean that the users are also picking the version with the best usability or performance. Especially when you are presenting them with different high-fidelity designs, they will most likely focus on the aesthetics of the design.
Question Test and 5-Second-Test
The question test and the 5-second-test are similar methods. During both tests, you show the participant an image of the system and then ask questions about it. The biggest difference between the two is, that you only show them the picture for 5 seconds during the 5-second-test and during the question test they can look at it as long as they want. The 5-second limit is due to the fact that the vast majority of website visits are less than 10 seconds long and that users make up their mind about the quality of a website within 50 milliseconds.
The questions during these tests are mainly about the layout or content of a site but you can also ask them where they would complete a certain task or action on the page and what they would expect to happen if they click on a certain element.
Since these tests can also be done with only an image of the product, they are also fast to set up and can be easily done online with users from around the world. The biggest disadvantage of these tests is that they cannot solve design issues, they can just point out if there are potential problems somewhere.
Additional Methods
There are a lot more UX research methods out there that also help with testing the usability of a system. Additional examples include
Contextual Inquiries, Ride-Alongs, Field Visits, Ethnographic Field Studies
Diary Studies
Focus Groups
Surveys
Voice of the Customer (VoC) Tools including feedback forms, questionnaires, and ratings on websites, apps, or app stores
Interviews
Usability Lab Studies
Participatory Design
Concept Testing
Desirability Studies
Clickstream Analysis
A/B Testing, Multivariate Testing, Live Testing, Bucket Testing
True-Intent Studies
… and many more
Usability Benchmarking
Another really important summative testing method (end of the design process) is usability benchmarking. The main goal of this method is not to improve the usability of a system, it is about measuring the current usability of a system to provide a baseline against which future versions of the system can be compared.
It is a great tool to ensure that the changes you are making help you with moving in the right direction and that you have clear reference points. UX benchmarking involves collecting quantitative data that describes the current user experience. This data could include detailed numbers about the average time spent on the system, average time spent until they make a purchase or complete a certain task, the success rate or conversion rate, the retention rate, and many more.
Once you have done your UX benchmark, you can compare your data against an earlier version of the product, the data from a competitor, an industry standard, or a goal defined by the stakeholders of the product. Even when you just did your first benchmark, you can still compare your data to the competitors or the industry standard.
The main advantage of this method is that you can measure the progress you have made after a lot of design iterations and show this data also to stakeholders or clients to prove your good work along the process.
Conclusion
Since most of these methods can also be done remotely, there is currently a big boom in online tools that help companies with usability testing. These tools are offering different methods and different pricing models and are especially useful for testing with users all over the world. Popular testing services include UserTesting, Validately, UsabilityHub, UXTesting, Userlytics, and many more. Since I prefer to use the help of local companies, I would personally use Userbrain from Graz to do my usability tests.
Resources
Books
Just Enough Research Erika Hall 2013
Usability Testing Essentials, Ready, Set…Test! Carol M. Barnum 2021
UX Optimization, Combining Behavioral UX and Usability Testing Data to Optimize Websites W. Craig Tomlin 2018
Inclusive Design for a Digital World, Designing with Accessibility in Mind Regine M. Gilbert 2019
Articles
The Elements of Successful UX Design, Best Practises for Meaningful Products UXPin 2015
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.
Since good usability should be the standard for anything that is designed to be used by humans, it is also important to ensure that the products are actually usable. The more complex a system is, the more work needs to be done. Usability testing is one of the most used methods to improve the usability of a digital system. It focuses on observing users while they are interacting with a system.
“Start earlier than you think makes sense.”
– Steve Krug
When should I start testing?
Based on when you are doing the tests, there are two different types:
Formative Testing Formative testing happens while the product is still in development. The main goal of this type is to identify and fix problems based on small tests with users. This type of testing is normally repeated multiple times during the development and can start with the first pencil sketches on paper or even a napkin.
Summative Testing Summative testing starts when the product is nearly finished or already finished. The main goal of this type is to establish a baseline of metrics and identify if the product meets the requirements.
If you are redesigning a system, it is important to start even earlier. Testing an existing product can give you a lot of useful insights and ideas for the redesign. It helps you with identifying the biggest pain points of the current product and which parts of the system are already working well and should be emphasized even more. If there is time left, you should also take a closer look at the systems from your competitors and ideally also test them. Testing them can also give you additional information about what they are doing better and where there is even more potential for your system.
Testing during a redesign (formative testing) is already quite common, but the majority of tests are still done during the end of the process (summative testing). There is no reason why you should not test your first sketches, paper prototypes, and wireframes in addition to the nearly finished prototypes. The more you test, the easier it is to identify problems and also fix them. Testing earlier saves time and money. Usability tests are especially useful after every important design decision.
How many participants do I need?
The number of users you should test with is also connected is the same as with the usability inspections. To identify the most important usability problems you should test with 3 to 5 users. After the fifth user, you already discovered 85% of the usability problems. Identifying the last 15% will take about 3 or 4 times more people than for the first 85%. That’s also the reason why you should stop at 5 people, especially when doing more expensive tests like the moderated usability test. It is much more efficient to do five smaller tests with a few people during the process than one big extensive usability study in the end.
There are a lot of different usability testing methods out there and every one of them has its unique advantages and disadvantages. Which method you should use always depends on the project and the stage you are in. They also cost different amounts of money.
Moderated Usability Test
While moderated tests get you the richest and most detailed qualitative data from real users, they are also resource and cost-intensive. Although moderated tests would also work great with low fidelity prototypes or wireframes because the moderator can give additional explanations, it is better to use high fidelity prototypes for these tests because they also give you a realistic idea of how the users perceive the design.
During these tests, you usually record the screen, voice, and also face of the user. Based on the recordings you should also create a highlight reel with the biggest problems, suggestions from users, important quotes from them, and statements about what the thought would happen next.
Moderated tests can either be done in-person or remotely. But since the moderator plays an important role and should also be able to read the behavior and non-verbal cues of the participants, it is better to do them in person. Remote moderated usability tests are better if you have a limited budget, if you are testing with users from all over the world, or if you are working on a niche product with a very small number of potential users in your area. During the ongoing pandemic, most of the moderated tests were also done remotely. The biggest challenge for moderators during remote tests is reading the participant and finding the balance between letting the user know that you are listening and interrupting them.
Moderator
Since the moderators play an important role during these tests, they should have solid experience in the field of usability testing or user research. Moderators have to work directly with the participants, guide them through the process, reading them the tasks they have to do, and as follow-up questions to get even more information during specific steps. It is also important that the moderator explains to the participants that the system itself is tested and that they cannot do anything wrong.
Participants
The participants have to use the think-aloud method and talk about what they are thinking about while interacting with the system. Ideally, the participants should also be part of the main target audience of the system.
Observers
To get even better results, you can also give the designers and developers the chance to observe these tests so that they get real time information about the usability and design of the system.
The biggest disadvantage of moderated usability tests is that the preparing, recruiting, scheduling, coordinating, and sessions themselves cost a lot of time and therefore also a lot of money. Because you always need a moderator for the sessions, this method is also not as scalable as the others.
Unmoderated Usability Tests
Unmoderated usability tests work similarly to the moderated tests and are also a good source for qualitative data. The main difference is, that the moderator is not present during the test. But there is still a moderator or researcher involved that provides the task instructions and also watches and analyses the videos of the tests afterward. Since there is no moderator present, it is mostly used to test specific parts of a product, rather than a whole user journey.
The main advantage of this method compared to moderated tests is that there can be 5, 10, 20, 50, or even more tests simultaneously. Another big advantage is that these tests can be conducted anywhere, anytime, and with anybody. That is also the main reason why this method works best for remote tests. Since it can be conducted much faster and requires less time, it is not only more scalable but also cheaper than the moderated tests.
Moderator
Because the moderator is not present during the test, it is also harder to get the “Why” information. But if the unmoderated tests and tasks are prepared carefully, remind the participants to think aloud after every task and additional task-specific questions are asked before the next task, it can be almost as efficient as a moderated test.
Participants
The participants of an unmoderated test also have to use the think-aloud method. But the biggest advantage for the participants is that they can do the tests anytime and anywhere they want if it is done remotely.
Another big advantage of unmoderated tests compared to moderated tests is that there is a smaller chance for bias. Observed people are often acting differently when they are alone. This phenomenon is also called the observer-expectancy effect.
The biggest disadvantage of this method however is that the participants tend to be quieter because there is nobody reminding them of the thinking aloud if they forget it. That’s also the reason why different remote testing tools only pay their participants if they were also doing it correctly. Because there is no moderator present for guiding the participants through the test, it also just works well with high-fidelity prototypes or existing products.
Ideally, both of these testing methods should be used complementary during an iterative design process. You should start with moderated tests during the early phases of the process with a low fidelity prototype or wireframes and when you are finalizing the project you could do an unmoderated test to see how the product performs with real users around the world.
Resources
Books
Just Enough Research Erika Hall 2013
Usability Testing Essentials, Ready, Set…Test! Carol M. Barnum 2021
UX Optimization, Combining Behavioral UX and Usability Testing Data to Optimize Websites W. Craig Tomlin 2018
Inclusive Design for a Digital World, Designing with Accessibility in Mind Regine M. Gilbert 2019
Articles
The Elements of Successful UX Design, Best Practises for Meaningful Products UXPin 2015
Trying out the HoloLens 2 for the first time as I have never tried out AR glasses ever before.
The experience itself was very immersive and I had great fun playing a game after adjusting the glasses to my head and vision. While shooting robot spiders served the purpose of having fun and had nothing to do with the project itself or an education app, it was interesting to get to know the navigation of the interface and remember different commands for navigating through the experience. It brought my attention to think about signs in general and overlaps between signs of the navigation with sign language sings as well as the whole interaction with AR objects by using gestures.
own scribble
There are multiple human gestures and movements for free-form systems for navigating interfaces. I reviewed the book of Designing Gestural Interfaces by Dan Saffer from 2008. While this book was published more than ten years ago, it still helped to get an overview due to a lot of pages which showed pictures of a person doing different movements with the hands and the whole upper body so that for example the system is reacting by cooling the temperature down. It was a good first impression of the multiple possibilities that are given to interact with the body.
Today you can interact with the Holograms in many different basic actions and gestures like dragging, dropping, clicking, holding and releasing to get effects like scaling, rotating, repositioning and more. The hand-tracking in Microsoft HoloLens 2 provides instinctual interaction so that the user can select and position holograms by using direct touch as if he would touch it in real life. Other than the possibility of direct touching you can use hand rays to interact with holograms which are out of reach. I recognized that you have to get used to use your own body very quickly. For example you often want to open the menu so you have to tap on your arm. Another often used interaction in my experience was lifting the arm to set up the hand ray to then click on the holograms by putting the thumb and index finger together as seen above.
mrtk hand coach: https://docs.microsoft.com/en-us/windows/mixed-reality/design/hand-coach
Looking into the Interaction Guides from Microsoft you can see which components are or can be taught to the users and how users are guided to learn gestures. This is done by viewing a hand coach which is just a 3D modeled hand repeatedly showing the gesture until the user’s hands are detected by the system and starts to imitate the movement. This means if the user does not interact with the hologram/component for a period of time, the hand coach will start to demonstrate the correct hand and finger placement again until the user understands the process. Interesting for my project is to to how the user gets educated just by hands and it was helpful for me to get to know how I can create my own hand coach as these information are provided in this guidelines as well by naming programs like unity as well giving the opportunity to download an asset of the hands to create an own controller setup.
maya example hands asset: https://docs.microsoft.com/en-us/windows/mixed-reality/design/hand-coach
It needs practice to learn to navigate through these AR tools and systems but it becomes clear that in this scenario people show willingness and technical interest to imitate gestures to get control over something. They are willing to get used to the navigation through gestures and learn to get to know them after a while until they remember them completly. After stating the issue the SAIL team talks about in my last post about that the depth perception must be learned for first time learners who are not used to use the space in front of themselves or the own body to communicate, it gives me hope that by giving the right amount of information and instruction AR will help people to overcome the phase where they use their body for communication more easily if they are interested into learning new interaction methods.
Usability evaluation methods deal with assessing the usability of a product. The main goal of evaluating usability is to define usability problems and obtain measures to make products more usable and pleasant to use. Since usability has already become a large part of the user experience (UX) and most of the methods can also be used to optimize more than just the usability, the following methods can also be called UX research methods.
Because of that, these methods can also be divided into qualitative and quantitative research.
Quantitative Quantitative UX research is about putting numerical data to problems that can be modified to more usable statistics. Classical quantitative research methods include all types of surveys and polls. Although they started including a small amount of qualitative data, Google Analytics is also a big and important source for quantitative data, especially for digital products.
Qualitative Qualitative UX research is about observations, user behavior, and the user’s perceptions. It involves collecting non-numerical data like text, audio, video, and images to understand the user experience in detail. This type of research is commonly used in all social sciences. Classical Qualitative research methods include interviews, observations, field studies, and also usability tests. According to Jakob Nielsen and William Bruce Cameron, you should also focus on qualitative research during UX projects because it often delivers more convincing results for less money.
“quantitative studies are usually too narrow to be fruitful and are oftentimes directly misleading.”
– Jakob Nielsen
“Not everything that can be counted counts, and not everything that counts can be counted.”
– William Bruce Cameron
Because there are a lot of different UX research methods and each method has its own unique advantages and disadvantages there is no list of best UX research methods. It always depends on the goal of your usability evaluation, the time and budget you have, the target audience of your product, the stage of the process you are in, and many more factors.
To get a better overview about which UX research you could use for your product, Susan Farrell created the UX research cheat sheet. It should not work as a checklist, it just shows which methods are available along the design process.
Additionally to all the testing methods, there are also a number of different inspection methods available. Inspections are done by evaluators, usually usability professionals, and their main goal is to find usability problems in the design. Some inspections methods are also suitable for getting an overview about the usability of an entire system. Like the tests, these methods can also be performed early in the process of the project. Additionally to the following methods, you can also do a Heuristic Estimation but this method is not used very often.
Heuristic Evaluation
The heuristic evaluation is the most informal inspection method. Usability professionals identify where a product follows predefined usability principles (heuristics) and where it doesn’t.
Heuristic evaluations are a quick and lower-cost way to measure the usability of a product before conducting user tests. They should be part of the process and used in conjunction with usability tests. According to a test conducted by Jedd Sauro, heuristics evaluations are able to detect between 30 and 50% of all usability issues, including all severe ones. Because this number also depends on the number of evaluators you should have about 3 to 5 professionals testing it to get the best value for your money.
Heuristics
The most well-known usability heuristics are based on the fifth chapter of Jakob Nielsen’s book “Usability Engineering” from 1993. Despite being nearly 30 years old, these guidelines are well established and still up-to-date. Jakob Nielsen has even slightly reworded them and added some newer examples last year.
But during a heuristic evaluation, a professional evaluator might also use different and more specific heuristic or additional product-related ones. Arnie Lund, Bruce Tognazzini, and Ben Shneiderman have also defined additional sets of heuristics. For modern apps, you can also use Apple’s Human Interface Guideline or Google’s Material Design Guidelines as Usability Heuristics.
The process of a heuristic evaluation is divided into three sections: Planning, Executing, and Reviewing.
Planning Since it is a usability inspection method with clear objectives, you should plan your desired outcome in advance. Setting goals and understanding exactly what needs to be evaluated is one of the most important parts of the planning phase. The evaluators must also be aware of the demographics, needs, motivations, and behaviors of the target audience. Although there are no real users present during the evaluation, the usability professionals should always keep the users and the situation the product is used in mind. During the planning phase, it is also important to choose the number of evaluators – in this case ideally between 3 and 5 to get the most results for as little money as possible. Additionally, you should also define the set of heuristics you want to use for the inspection.
Executing During this phase, the usability professionals are actually doing the inspection of the interface. They will go through the user flow and analyze all pages based on the previously defined heuristics. This part of the inspection is normally recorded to get the best result out of the evaluation and be able to see exactly where the problems are, what the attempted tasks were, why it is a problem and usually they are also suggesting different ways on how to fix the problems.
Reviewing After the inspection, it is important that the experts are creating a list with all usability issues and additional findings that should be addressed. Ideally, these usability problems should also be rated and prioritized based on how severe they are. These results are normally presented in the form of a report that describes the process of the inspection, all usability problems, and different suggestions on how to fix them. This report, together with the recordings, should also be the basis for the next steps the project team is going to make.
Cognitive Walkthrough
During a cognitive walkthrough, one or more evaluators work through some tasks and a set of questions from the perspective of the user. The goal is to simulate the user’s problem-solving process. It was originally designed for ticket machines, ATMs, postal kiosks, or other interactive systems where users have little or no training before using the system. Currently, it is mainly used for evaluating the learnability of a system for new and occasional users.
Pluralistic Walkthrough
A pluralistic walkthrough is a group evaluation of a design where users are guided through tasks while designers and developers address their concerns or questions about the interface. This method works best in the very early stages of the design process with a paper prototype or rough wireframes.
Consistency Inspection
Consistency inspections are usually done by designers on larger projects. It is used to ensure that the interface does things the same on all pages. The ultimate goal of the consistency inspection is that it looks like one designer did the whole project and every element that does the same thing also looks and feels the same.
Feature Inspection
The feature inspection emphasizes the importance of functionality in order to achieve good usability. It identifies critical tasks a user would perform while using a system and the features that would be used to perform these tasks. After that process, the features are then evaluated.
Standards Inspection
For a standard inspection, you need an expert on an interface standard that has to inspect the whole interface for compliance with the standards. Good examples for standard inspections of apps include checking if the Apple Human Interface Guidelines or Google Material Design Guidelines are met. Another important standards inspection determines if the product complies with all the ISO standards.
A formal usability inspection combines different elements from the heuristic evaluation and from the cognitive walkthrough. It is a process with six steps and clearly defined roles for every expert on the team.
Competitive Review
A competitive review is a process where a usability expert analyzes a series of related websites or products from competitors or other companies from the same sector. The expert tries to look for strengths, weaknesses, trends and differences and identifies room for improvement for his/her own product. A competitive review is also possible with just a small portion of a website. For example if you are building a webshop you can take a closer look at amazon and their ordering process.
Resources
Books
Usability Engineering Jakob Nielsen 1993
Articles
The Elements of Successful UX Design, Best Practises for Meaningful Products UXPin 2015
Just recently I ordered a dress. Actually two dresses, but it was the same one just in different colors. You might wonder why? So, my sister is going to get married in August and I just fell in love with this dress at first sight.
It all started with a simple Instagram add and well, I just thought that nothing like this would ever happen to me, because I am way too smart and well educated for stuff like this (haha got a good reality check there). To be honest I was a little bit naive for believing that Instagram would do background checks on adds. Guess, what that is no happening! So, after clicking on the add I got forwarded to another page which seemed nice at the first sight.
I didn’t really read anything i just picked out the green and the blue variant of the dress and was super happy about the price, which should have been a broad hint, but well whatever. The next hint should have been that my credit card was declined three times, but hell I really wanted this dress. So, long story short, I asked my dad about his credit card and et voilà it worked.
Throughout all this time I did not even realize that something might be off about this page. I just was just wearing the so-called rose-colored glasses. The first time I got a bad feeling was when I did not receive an order confirmation, but still I really really wanted this dress so I just ignored it. Also, I told myself that this might be my own fault because I was deleting millions of e-mails like a crazy person this week and so maybe I just deleted it by accident.
However, after seemingly never ending three to four weeks of waiting for my holy grail I started suspecting something. Also did my father, who guess what, was not really happy about all of this. So, I decided to contact the customer support. Still hoping that there has just been some kind of mistake, but after receiving the first answer I kind of knew that something was just not the way it should be:
Dear customer,
Thanks for your support and concern on our store.
Sorry for the inconvenience caused. The items are out of stock before, we have gathered some back and they arrived our warehouse today , we have wrapped it and will send it out within 3-5 days. The tracking number and tracking link would be emailed after shipment. Thank you for your patience.
Do., 22. Apr., 04:11
A week or so later, still no tracking number, no order number, no nothing. I wrote them again. This time I told them I would cancel the order and the payment and surprise surprise I got another answer from them including a tracking number and a site where I could track my package.
Once the order was shipped out, the tracking status will take a few days to be updated online by the shipper. Therefore, please hold on for 3-5 business days and try again later.
Tracking number is UF850430075YP, this is tracking site: https://www.17track.net/en , you can follow it easily.
Very sorry for the inconvenience caused to you.
05.05.2021, 04:33
If you click on this link you will get redirected to another page and if you then try to search for the tracking number, guess what, it will not be found. This was the point where my father and I actually tried to cancel the payment via the credit card institute just to find out that because of entering his 3D secure code the company can not do anything at all. As we learned, as soon as you enter you 3D secure code somewhere, you release the payment and there is no turning back.
Despite all of the previously mentioned stuff, I got another e-mail today with another tracking number etc.
26.05.2021 11:00 (vor 4 Stunden)
As you probably already thought, there is still no validation.
Sorry! No tracking info yet (or ever)
Long story short, I got scammed and now I have to find another dress for the wedding. Shit happens…
Correction: The dresses arrived, but guess that’s what feeling scammed feels like.
The more the app integrates with users environment the more magic the app feels
Start designing without a screen When designing AR, the object will actually be outside of the phone. At least it should look like. So when thinking about an idea or the design of an AR app, it should be thought outside of the phone too. Watching people interacting with offline things makes it much easier to come up with an idea how AR could help. So google recommends to sketch first the whole environment and the situation happening there. Sketching the analog things the user would or is interacting with. Thinking outside of the phone frame.
Movement Learn the user that he can move around. Since the users are used to 2D applications, it is a whole new world and important to take the users hand ans show him how this works. For example it could be possible to have little arrows on the screen edge, identifying that there is another object somewhere. With moving around the user will be able to see more.
Also make sure at the beginning how much movement is needed and more important how much room is required. It is worse case of a user starts playing a game and at the middle of the game he finds out that his living room is too small to complete it. Also if an application should be used outside, it is important to tell this the user first, before starting to use the application.
Give Feedback It must be clear for the user what he needs to do and how to interact with the 3D object. For example when coming too close to the object, the user needs to learn that this is not a way to interact. For example if the camera gehts darker or blurred the user knows that this is the wrong way.
Also when placing an Object, it is important to make sure where this object will land or which surface is detected. This can be done for example with having a shadow under the object.
It is helpful to have a darker transparent layer between the camera (background) and the displayed AR elements. This helps to differ between real elements and AR elements, especially at daylight it is helpful to give a better experience.
Less UI is more There are multiple reasons why you should never overload an app with UI and controls but for AR apps it is even more important! First because the user should focus on the scene and what is happening with the 3D objects and second because it just takes view. The smartphone screens are so little and if there are too many controls the screen for the actual content will shrink and shrink. So only display UI controls if the have a high frequency of use or if they require fast access.
Indicator bacteria that change color in the presence of certain substances appeared in 2010. Initially, “living sensors” were used to detect mercury contamination in water, but soon became widespread. Since 2015, the profession of a pigment hunter has become in demand, finding rare colors and their genes in exotic plants and animals. Around 2040, yoghurts with lactic acid GM bacteria E. chromi will come into vogue, which will help diagnose bowel diseases by the shade of secretions. Ten years later, the Orange Liberation Front (OLF), a terrorist organization advocating for the preservation of the fruit’s natural orange color, will enter the political scene. By the turn of the 2070s, Google’s climate division will fill the atmosphere with microbes that color the air when carbon dioxide levels reach dangerous levels.
Although, Daisy Ginsberg’s early predictions did not come true, this is the future that synthetic biology and the ability to create new life forms are preparing for us.
Modern biology, especially such a complex field as synthetic biology, does not seem to be a suitable hobby for a designer and an architect. But behind this is a clear concept: according to Daisy Ginsberg, the very basic principle of design is to change natural nature for and for man. Therefore, at least since the industrial revolution of the 18th century, design has been translating from the language of new technological solutions and scientific concepts into the language of things, mass-produced products that surround us everywhere. An internal combustion engine is engineering, a car is design; piezoelectric element — physics, lighter — design.
For Ginsberg, design is what distinguishes natural from cultural, natural objects from man-made, what we control from uncontrolled. In this sense, the GM-mosquitoes developed by the British company Oxitec are also a design product. Not giving viable offspring, in nature they successfully compete for mating with their wild counterparts and reduce the number of carriers of malaria and other dangerous infections. Golden rice could also be called a designer product, which contains a significant amount of beta-carotene and can solve the problem of vitamin A deficiency in some third world countries. And certainly the result of the design — is a synthetic strain of Mycoplasma laboratorium with an artificially obtained genome. New organisms with new functions are the result of the application of design thinking, only in the field of synthetic biology.
If design is a boundary that separates natural and cultural, then you should not assume that the areas on both sides of it are in conflict. The cultural grows out of the natural and improves it, at least from a human point of view. The natural is a product of evolution, which always responds to the challenges of the moment and is incapable of intelligent planning or design. Evolution is unfamiliar with the concept of “better”, modern bears are no better than dinosaurs, just better adapted to today’s conditions. The cultural world is developing, obeying the laws of human progress: an incandescent lamp is better than candles and torches, an LED is better than a tungsten filament.
However, in the field of the design of living things, until recently, man could only participate in evolution, directing the action of artificial selection — until we had in our hands the means of manipulating the genome, powerful tools of progress, which can be compared with the emergence of precise machine production. Today, these technologies are ready to change the “nature of nature”, once again transform the world. In the meantime, Daisy Ginsberg is trying to figure out how it will look like.
Like many biologists, the artist considers what is happening in this area — is a new revolution: “The cost of sequencing and DNA synthesis is falling rapidly. CRISPR genetic modification technologies have increased the range of available options. Something changes every year, ” Daisy said in a lecture at the PopTech forum. – GM microbes will most likely appear to clean up oil pollution or to normalize the acidity of the soil. The use of modified mosquitoes is already a reality. “
Fully synthetic organisms are products of technological progress, not biological evolution, and are not at all obliged to imitate natural beings. Having only a common biochemical basis with them, they are soon ready to stand out into their own branch on the tree of life. The super-kingdom is on a par with bacteria, archaea and eukaryotes, developing according to its own laws, which are set by both nature and people. The operation of these laws is the subject of main interest for Daisy Ginsberg. What would a plant look like when turned into a living factory? Design will answer this: like a specialized workshop producing a biopolymer part. When ripe, it drops out of the opened fruit and is ready to be assembled with other fruits of synthetic plants to give a whole useful device.
Significantly, in the 2009 Growth Assembly series of sketches, such a device turns out to be a herbicide sprayer — a vital tool for a person living in a world of complete freedom of biotechnology. The artist does not at all turn a blind eye to the potential dangers of such a future, and in the Synthetic Kingdom project she presented a number of rather frightening consequences, the prevention of which should be taken care of in advance. In Ginsberg’s view, the horizontal transfer of genes between synthetic and natural organisms can lead to the fact that microbes on the teeth will produce, for example, pigments, coloring them in bright colors, and the “genetic leak” from the bioelectronics factory to an epidemic of phosphorescent kidney stones.
However, this biotechnology does not stand out too much among human achievements: none of the former or existing technologies is devoid of negative side effects. The growth of modern civilization has already led to such a rapid decline in biodiversity, which scientists confidently call the Sixth Global Extinction in the history of life on Earth. But just as the previous steps in development made it possible to solve many problems caused by previous technologies, and synthetic biology is ready to “cure” the biosphere of the planet. Artificial slugs to restore the acid-base balance of the soil, artificial hedgehogs to spread seeds and even strange translucent organisms that infect plants and filter their juices to remove pathogens are another Daisy Ginsberg project and another touch of the biotech future. If you believe that progress really leads from good to better, then is is possible to agree that this is exactly what it will be.
