The Von Restorff Effect in UX Design
How do you create UX designs that stand out? For example, how can you improve the user's experience by simply changing the color or shape of an item?
The Von Restorff Effect theory is that people are more likely to remember the outlying thing when presented with a list of similar items that includes one unique, isolated item.
"If all but one item of a list are similar in some dimension, memory for the different item will be enhanced. The modern theory of the...effect emphasizes perceptual salience and accompanying differential attention to the isolated item as necessary for enhanced memory...Distinctiveness is a useful description of the effects of differences" - R. Reed Hunt.
The theory emerged from a study undertaken by the German pediatrician and psychiatrist Hedwig von Restorff, after whom the idea is named. It has since become a guiding principle for designers in many lines of work.
The Von Restorff Effect is also called the "Isolation Effect." The effect is easily illustrated and can be found throughout our everyday lives.
Look at the six circles: Which one is most memorable?
Is it the five black circles or the one red circle that sticks in your mind? This is how simple the Von Restorff Theory is. In this example, the red circle is more memorable because it is distinct from the five black circles. There are five homogenous stimuli and one different stimulus. This theory can be used to enhance UI and UX design. Simple changes that create distinct elements within a design effectively transform user experiences.
Memorable Design Aspects
Color is not the only aspect of design that can create something distinctive. You can alter designs in many ways to illustrate the Von Restorff Effect. Other design aspects include:
● Shape
● Size
● Spacing
● Highlighting
● Making bold or italic
● Underlining
All UX designers should be aware of how these design aspects can impact the way users experience their designs. For example, how can you use the Von Restorff Effect to improve the experience if you design an app or web page? Maybe it's about making certain buttons or clickable options of different colors or sizes to emphasize their importance. Often the simpler, the better. Users will evaluate elements differently depending on whether they are isolated or placed next to an alternative. For example, as a designer, you can make one choice look more attractive by placing it next to an option that is bland and not distinct in any way.
Usage
Many of us are visual beings and visual learners. Using the Von Restorff Effect to highlight important information amongst a group of similar information is a critical visual tool to improve UX. It can relieve the stress of sifting through multiple visual communication pieces to find the most relevant detail. For online retailers and e-commerce businesses, the Von Restorff Effect can be used to highlight discounts or changes in price. Below we've highlighted some real-time examples to illustrate how the Von Restorff Effect functions.
Kissflow Pricing Page
In this example above of Kissflow's Pricing Page, the use of the 'Border Color' and 'Most Popular' tags distinguishes the 'Advanced' plan from the other three. This shows how you can draw the user's eye with a distinctive design.
Myntra Product Listing Page
Equally, in this example from Myntra's Product Listing Page, our eyes are naturally drawn towards the "Trending" tag. This is because a small tag can considerably boost the sales of that product.
Interaction Design Foundation-Home Page
In this example above from Interaction Design Foundation's Home Page, by looking at the completed circle and it's color (red), it is evident that the first course is closed for enrollment. Simple design choices like this show how subtle and impactful the Von Restorff Effect can be.
MacBook Menu Bar
Similarly, take a look at this MacBook Menu Bar. Again, the user can clearly distinguish which app requires their immediate attention. Furthermore, the bright red notification circle ensures that the messaging app receives the most attention. While the Von Restorff Effect has broad applicability, designers should also avoid overusing it. Too many distinguishing elements can cause users to become distracted and make your design feel cluttered. On the other hand, nothing will grab the users' attention if too much goes on. The essence of the Isolation Effect is about standing out.
Standing Out
Ultimately the Von Restorff Effect is about being distinctive and standing out from the crowd. This is harder than it seems in a design world where everyone is trying to create something new and unique. However, distinctiveness can be as subtle as it is about bright, eye-catching designs. If you are designing a product or service, a web page, or an app, the Von Restorff Effect can be a valuable guide to ensure that you are creating a distinctive and memorable design.
At Radiant, we understand the value of being distinctive in a digital world. As we help businesses navigate the journey to a digital enterprise, we aim to create innovative and unique solutions. In the world of UX, particularly those who appreciate the Von Restorff Effect, we will create engaging and memorable interactions.
To learn more about the Von Restorff Effect and UX Design, contact our UX experts.
Understanding Emotional Design
“Everything has a personality: everything sends an emotional signal. So even where this was not the designer's intention, the people who view the website infer personalities and experience emotions.”
— Don Norman, Grand Old Man of User Experience
What role does emotion play in design? Why are we attracted to some designs and not others? How do we experience everyday products, and how can our experiences be improved? These are the kinds of questions Don Norman, director of The Design Lab at the University of California, asked when he first came up with the idea of “Emotional Design.” He was trying to understand the cognitive responses we have when we design and how we can learn to design emotional interfaces that anticipate and accommodate users’ needs. It’s a fascinating concept that deserves a bit of exploration.
What is Emotional Design?
Emotional design is the concept of creating designs that evoke emotions that cause positive user experiences. In 2003, leading researcher and design expert Don Norman published a book titled ‘Emotional Design: Why We Love (or Hate) Everyday Things. The book explored the concept of designers creating products, brands, and other things which aim to reach users on three cognitive levels:
- The Visceral
- The Behavioural
- The Reflective.
Professor Norman was enamored with the idea that everything and anything sends an emotional signal. Therefore designers should go about their work to reach users on these three cognitive levels if they want users to develop positive associations with their product, brand, or design.
When you design, it is essential to address all three levels of cognitive response:
- Visceral - This level is about the users’ gut reaction or first impression of your design. It is a pivotal moment and will often decide whether the product or service is even worth engaging with. These designers must focus on producing clean, uncluttered designs that are easy to use and understand.
- Behavioral- How will your design help the user achieve their goals? This cognitive response is about the users’ level of satisfaction and whether they feel in control.
- Reflective - Once the user has become acquainted with the design, they will judge its performance and the benefits, including whether it is good value for money. Are they happy with the design? Will they keep using it? Will they recommend it to friends? This is where you can tell whether or not the user has formed an emotional bond with your design.
How can we Design Emotional Interfaces?
The next step is to start creating. The concept of emotional design can apply to a wide variety of products, services, and brands. As a result, the process of implementing this concept will differ from one design to another.
The first step in many workflows should be learning as much as you can about your audience, user, or customer. After all, it is their emotions that you are aiming to anticipate and accommodate for. Once you have some idea about the user, you can start to experiment: this is the fun part.
Here are a few things to consider when applying emotional design to your creative process:
- Personalize- ensure that your designs are as tailored as possible to your potential users. This should help to engage all three levels of cognitive response and help them form a bond.
- Customize- Keep updating your design to make sure that it is as relevant and necessary as whatever else is currently on the market. Users will quickly move on to something else if your design becomes obsolete.
- Focus on the details- to make the most of the Behavioral and Reflective levels, and designs should be refined and polished. This is the best way to remove mistakes and bugs and help users feel comfortable with your product or service.
- Tell a story- If you can, try to include some sort of story in your design. Stories are the way to the heart and help to build empathy. For a simple product, this may not be easy. However, if you are designing a service or a website or the look and feel of a brand, storytelling is a great way to connect on an emotional level.
“Positive experiences drive curiosity. They help motivate us to grow as individuals. [and] the fact is that the emotional design of a product or service affects its success—and thus the bottom line.” (InteractionDesign) Therefore, knowing how to harness this information about the emotional connection is essential to help inform the designs we create daily.
The three levels or aspects of the emotional system are interlinked. Each can be stimulated in different ways, but all contribute to how we experience and respond to designs. Professor Norman’s concept of Emotional Design is a valuable way to understand and refine the creative process and should aid in creating innovative designs.
How do you create designs that connect with users? Learn about the concept of Emotional Design and how it can be used to anticipate and accommodate the needs and responses of your users. Then, get in touch with our UX experts to learn more about emotional design and how our design process works here at Radiant.
Occam's Razor: The Simplest Solution for Designers
Most product and UI/UX designers will tell you that they've caught themselves getting carried away with introducing design elements they assume will enhance a product's user experience. But, on the other hand, the effect was that these only caused distraction or confusion no matter how aesthetically appealing. In these moments, designers can remind themselves of a guiding principle to simplify the complicated — the Occam's Razor. The Occam's Razor is a mental model that states that the simplest explanation is preferable to those that are more complex. Among designers, this has meant that when confronted with competing designs that have the same function, select the simplest one. In evaluating your designs, remove as many elements as possible without compromising the intended functions.
Origin of the Occam's Razor Principle
Occam's Razor, also known as the principle of parsimony, is attributed to William of Ockham (c. 1287–1347), an English Franciscan friar, scholastic philosopher, logician, and theologian during the medieval period. While this principle didn't originate from Ockham, it's heavily associated with him due to his frequent and effective use of the philosophical Razor in axioms in his written body of work such as, "Plurality must never be posited without necessity".
The philosophical Razor refers to shaving away unnecessary assumptions or cutting apart two similar conclusions. Occam's Razor is essentially a problem-solving principle that, when presented with competing hypothetical answers to a problem, one should select the one that makes the fewest assumptions. This is further reinforced in his writings on the principle of economy wherein he says, "It is futile to do with more things that which can be done with fewer." Occam's Razor has since been applied in many scientific fields, including biology, medicine, probability theory, and statistics.
How To Use Occam's Razor in Design
Businesses and organizations often feel the urge to put every bit of information online to cover every need that every user may require. However, design and product teams can filter out the noise and focus on what matters most for a significant share of their users with sufficient user research. At the same time, with the capabilities that web and design tools now offer, designers and managers can get carried away into showing off how forward-thinking or design-savvy their companies are. At the heart of applying Occam's Razor is being ruthless about removing the unnecessary for being effective. Here are the key points in how to use Occam's Razor in UI, UX, and product design.
Design Only What's Necessary
In applying Occam's Razor, designers must evaluate each design element based on necessity. Following this principle requires a minimal user interface (UI) that still allows users to meet their objectives. By introducing animations, additional menu options, or certain navigation tricks, designers must pause and assess whether these are necessary to the user experience or unnecessarily complicate the user journey. For instance, designers can deploy heuristic evaluation, a detailed assessment of a product's UI to surface usability issues, and identify ways to resolve them based on severity.
While the application of Occam Razor in the design process is more associated with the refinement phase — the shaving away of unnecessary clutter — the best approach is avoiding it in the first place. Instead, begin designing for the simplest version of a digital product and introduce additional elements only if it enhances the user experience.
Refine by Trimming the Excess
Designers or their managers need to be ruthless in trimming down their work. Design elements that don't provide value should be removed altogether. Every aspect of the work should be evaluated based on purpose, importance, or necessity. If a more straightforward solution exists, then that version should prevail. Design critique sessions are an effective way to generate feedback from your colleagues. These will force you to articulate your design choices and surface design elements that might not be as effective you initially thought. As the French author, Antoine de Saint-Exupéry, said, "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."
Guide Questions
Here are some questions that designers can ask themselves as they create and refine their work.
- Is it easy for users to find the information they want?
- Does the product, app, or website present too many choices?
- Is every piece of information at the top (e.g., menu options, headers, search, log-in) necessary?
- Are the copies or texts in plain language?
- Is there any unnecessarily distracting design element?
- Can seniors or older users meet their objectives?
- Can I remove anything else but still keep its functions without sacrificing user experience?
Popular Examples of Simple UX
Let's take a look at some widely known examples of how Occam's Razor principles of simplicity, necessity, or economy have been applied in digital products.
Google Search
The most widely used search engine, Google, directs user attention to its primary function: search.
PayPal
Paypal redesigned its website in 2014, which was overly complex before that. Since then, Paypal has continuously simplified its website and mobile app experience.
Zara
Compared to most online stores of fashion retailers, Zara plays it simple with one photo on a white background and texts and icons in black.
Shaving off the clutter
Designers can sometimes be drawn into a fantastic idea without stepping back and asking if it's essential to what users want to achieve. Occam's Razor is a compelling reminder for designers when they create and refine their work. When inspired by several excellent ideas, choose the simplest one. Think of the simplicity that Steve Jobs embraced for Apple products at the onset. The earliest designs of the Macintosh and iPod still have a presence in today's iPhone, iPad, and Mac. For instance, the single button on the front of their mobile devices remains integral to the simplicity of their design and the Apple brand as a whole.
Will you be working on a project that requires simplifying user interfaces and experiences? Reach out to our experts at Radiant Digital to learn more about our product design and development processes.
What Is Iterative Design?
Iterative design is a design methodology based on a cyclical approach of prototyping, testing, analyzing, and refining a product at any stage of the design process. You can think of iterative design as a rapid and repetitive trial-and-error process intended to deliver a product that meets user goals and expectations. How users say they behave with a digital product versus how they behave is rarely the same. The iterative design recognizes this by laying a framework for product teams to develop a prototype quickly and then test it with real-world users to determine what they do with the product.
When to use the iterative design?
Designers can apply an iterative approach at any stage of the product development process. Organizations can even introduce or adopt iterative design even if a product has already been shipped to market, especially if they’re looking to make improvements. However, the earlier iterative design is implemented in the product lifecycle, the more likely the product can meet user objectives and expectations. Further, it’s also more likely that the design process can be more cost-effective and achieve faster time to market.
What is a non-iterative approach?
The Waterfall model is the most common non-iterative process wherein each project phase (e.g., discovery, conceptualization, design, development, testing, launch) must be completed in its entirety before moving on to the next one. In a non-iterative approach, as in the waterfall model, teams emphasized the planning phase more than the execution process — documenting everything in advance, such as the user interface, user stories, and all features and variations. Non-iterative methods require more time during the conceptualization and creation phase, aiming for the product to work as intended during testing.
Requirements and resources are typically locked after project planning, and teams avoid project modifications as much as possible. Typically, teams design and develop a final product with the minimal exploration of new ideas along the way. Non-iterative design processes can be challenging because it doesn’t allow time and space for unknowns and surprises and the necessary adjustments to address them.
What are the benefits of iterative design?
Companies and organizations of all shapes and sizes have lauded adopting an iterative approach to their design and development processes. Here are the key benefits of iterative design:
● Efficiency: By working on products in quick sprints, teams can adjust their products in each iteration rather than rework an entire design as new insights or feedback emerge. Further, workload among team members can be spread out more evenly throughout the development lifecycle.
● Progress visibility: Iterative design gives product stakeholders visibility of a project’s progress at the end of each iteration.
● Collaboration: Designers can generate feedback from clients and stakeholders based on the results from each iteration. An iterative process draws better engagement from them as they can see the evolution of the project and that the design team is meeting their requirements rather than “dumping” a finished product on them.
● Eliminates confusion: The repetitive or cyclical nature of iterative design enables rapid resolution of misunderstandings or disorders within the project team as early as possible. Further, teams can detect flaws in the design, architecture, code, and other implementations with each iteration, severely impacting the product if left undetected.
● Ability to work in parallel: Unlike non-iterative methodologies such as the waterfall method, the iterative process decreases dependence on the work that comes in previous phases. Team members can work on several parts of a project in parallel, leading to faster time to market.
● Usability: Iterative design keeps users at the heart of the process, with each iteration ideally based on user research, behavior, and feedback. For instance, testing and debugging in smaller or faster iterations can identify defects or flaws early in the design process, with target users providing insight in each iteration.
● Continuous improvement: Each iteration enables design teams to incorporate lessons learned from previous runs giving the final product the best chance to meet customer expectations.
● Cost-effective: Changes arising from an iterative approach are likely to be less costly than in a Waterfall approach. Since modifications are common in product development, discovering them at the earliest possible stage makes it easier for organizations to adjust their resources.
Examples of iterative design
Here are some familiar examples of iterative design:
● Iteration during product development: Engineering teams apply an iterative approach in developing new features, implementing bug fixes, and A/B testing new strategies. It’s not uncommon for engineering teams to create a few promising versions, then test them out with users. They’ll note good and bad user experiences and then continue building the iteration that tested the best.
● Wikis: With user-generated content, anyone can write new entries or improve existing ones. Reviewers or editors then decide whether new content passes specific standards or whether the changes made improve the content. Users expect this iteration system in sites like Wikipedia to present the best available information on any given topic over time.
● Urban design: Urban designers see 10-year plans made by local governments as strategies and principles. Urban designers execute new ideas at a small scale and gather feedback before expanding their programs for implementation. For instance, they may try a living street design for one year before scaling them either at the exact location or in another area.
Good design requires iteration.
Iterative design enables product designers to build and test products quickly. As a result, features and functionalities that resonate with users can be improved further while those can’t be soon abandoned or modified. The iterative process is an efficient design approach, which puts user experience at the heart of product development.
Will you be working on a project that can benefit from iterative design? Reach out to our experts at Radiant Digital to learn more about our product design and development process.
Five Stages of Design Thinking to become a UX Designer
UX designers are under constant pressure to innovate and solve complex user problems with empathy. In addition, they need to foster product design innovation to gain a distinctive competitive advantage, including infusing a design-driven culture with a customer-first approach. Radiant Digital implements “Design Thinking” to connect the dots between human desirability, economic viability, and design feasibility. Read on to understand the principles of the Design Thinking process and its five stages of implementation.
Defining Design Thinking
Invented by Stanford University’s d.school as an approach to technical and social innovation, Design Thinking is an ideological process that seeks to solve complex problems and derive solutions in a user-centric way. It focuses on achieving the following results and practical solutions with a designer’s mindset and user’s perspective.
- Technically feasible: They fit into the technical specifications of functional products or processes.
- Economically viable: Businesses can afford to implement them.
- Desirable for the user: They cater to fundamental human needs.
Design Thinking is all about getting hands-on and converting ideas into tangible and viable products or processes at the earliest. The Design Thinking Process entails steps that materialize ideas by building prototypes that leverage designer empathy for users.
The Process of Design Thinking and Why it Matters
The Design Thinking process is a non-linear solution-focused framework that encourages creative thinking to develop products that address diverse user problems. The five crucial stages of Design Thinking enable designers to develop ideas and perspectives, design innovatively, and test prototypes for existing and novel concepts from the user’s perspective. Each stage may spark new ideas or findings in the user journey, inspiring new iterations for the completed phase. The five stages of the Design Thinking process would induce creators to examine new and untested angles constantly. But first, it’s essential to understand the core principles that shape these stages.
Design Thinking Principles
Design Thinking processes are built on these five foundational principles.
Empathy and User-centricity: Design Thinking focuses on user empathy to design an innovative product and organically meet users' needs. Thus, understanding and empathizing are critical to ensure that the solutions resonate with the users’ perspectives and needs.
Collaboration: Innovation is possible when diverse ideas, opinions, and perspectives converge. The Design Thinking approach encourages heterogeneous and multidisciplinary teams to work cohesively.
Ideation: Ideation is a core design principle and a step in the Design Thinking process. Designing thinking is all about bringing multiple ideas to the table without judgment to find as many solutions as possible instead of focusing on results.
Experimentation and Iteration: Design Thinking, an iterative approach, requires experimenting with different ideas, converting them into prototypes, testing them, and making changes based on the user’s feedback. In addition, design iterations help uncover and fix loopholes in your proposed solution.
A Bias towards Action: This principle of Design Thinking shows that the approach is inclined towards action rather than discussion. Instead of hypothetical assumptions on what users want, Design Thinking encourages engaging in interactions. It involves testing prototypes in the real world for various user contexts.
Five Stages of the Design Thinking Process
1. Empathy
This stage involves sitting down with real users and noting their perspectives, points of view, and expectations. Then, designers can get unbiased introspections into human-centric problems to build a crucial bridge between the target user and the solution being designed. Some of the actions Designers can take during this stage are:
- Consulting SMEs for insights.
- Handling an issue personally for a better understanding of a user’s POV.
- Having profound conversations about a topic with users and peers.
- Finally, immersing oneself in a user’s environment.
Empathy helps uncover a user’s motivations and experiences that will ultimately blend with a designer’s product.
2. Define
Here, designers can succinctly articulate a design challenge or problem using Analysis and Synthesis. Then, after understanding the user’s perspective through empathizing, the designer can integrate it into the human-centric issue at hand and outline the problem statement. This stage involves:
- Analyzing the gathered data from empathy and synthesizing the information for problem definition.
- Second, defining what the user needs in line with the problem statement, their challenges, and solutions.
- Third, outlining the solution based on company-centered thinking and human-centered thinking.
3. Ideate
This stage leans heavily on how creative and inventive a designer is in solving the defined problem. Without concerns over scalability and budget, designers need to think out-of-the-box. At this point, designers will get a workable understanding of their user base without focus on the limitations. Brainstorming, continuous discussions, and idea-sharing with team members prepare designers to taste success by garnering trust and confidence. Some of the methods include Brainstorm, Challenge Assumptions, Storyboard, Creative Pause, and Crowdstorm.
4. Prototype
Here, an idea is converted into scaled-down and inexpensive prototypes like sketches, models, or digital versions. The testing ground is set where many facts and truths come to light in the virtual environment. Better decision-making involves designers working using target individual problem-solution scenarios and advanced knowledge of limitations and roadblocks. Designers gain clear visibility into user behaviors, reactions, and expectations.
5. Test 
Testing allows designers to understand how the prototype works with real users and data. Then, you can run the test, observe the results, take feedback from users, and make the necessary improvements. Testing is often iterative and involves designers rolling out multiple prototypes for different datasets and change factors within an idea. Without extensive testing and refinements, user experiences and solutions will have difficulty scaling. Testing may also “restart” other design thinking processes such as creativity, as new ideas may spark additional proposed solutions.
Implementing Design Thinking in Design Sprints
Design sprints allow teams to finalize their critical business goals using a compressed version of these stages to efficiently design, prototype, and test. During a sprint, designers run through the end-to-end design thinking process within a week. This is useful since sprints don’t necessitate full feature-building or a product launch. Sprints help gain design visibility from quick prototype iterations instead of waiting for the final product launch to initiate testing.
The Take-Away
In essence, the Design Thinking process is focused, flexible and iterative, where the designer-user collaboration will define the success of all stakeholders.
If you want to know how the Design Thinking process can be applied to your customer context and solution, connect with our experts today!