How is a heuristic evaluation performed?

The analysis is carried out without involving end-users. Interface design experts conduct an ergonomic audit to detect usability issues. By definition, Nielsen’s heuristic evaluation is thus distinguished from user testing.

What is usability?

The notion of usability refers to the quality of the human-machine interaction. According to the ISO 9241 standard, the main attributes of usability are effectiveness, efficiency, and satisfaction.

What are Nielsen’s heuristic criteria?

Nielsen’s heuristic criteria are similar to checkpoints in an iterative design process. Unlike usability tests, the evaluators are specialists. This technique is also a “Usability Inspection Method” (UIM). UIMs bring together techniques based on expert audits, without resorting to users. Nielsen’s heuristic evaluation is performed by ergonomists, interactive designers, UX designers, or even developers. Ideally, it is preferable to call upon interface ergonomics experts.

Nielsen’s 10 heuristics are benchmarks, not directives

Individually, each evaluator examines the interface elements of the application, website, etc. The goal is to identify flaws to improve the design of a web interface, mobile app, or any digital product. Nielsen’s 10 heuristics serve as benchmarks, even at the beginning of the design process. They are very general rules and not strict directives, hence the term “heuristics”. It is possible to break them in certain contexts, as Nielsen explains in this presentation video.

What is the origin of Nielsen’s heuristics? History

In 1990, Rolf Molich and Jakob Nielsen published an article entitled “Improving a Human-Computer Dialogue” in the journal Communications of the ACM. This article, presented at a conference, resulted from a survey conducted with 77 designers and programmers. The authors studied the problems encountered during interface design. Their heuristics aim to find design solutions quickly.

This work builds on previous research, including:

• The article “Design of human-machine interfaces for time-sharing systems” (1976) by David R. Cheriton
• The 1983 publication, “Design rules based on analyses of human error” by Donald Norman, future partner of Jakob Nielsen and inventor of the term “User Experience” (UX).
• The chapter “8 Golden Rules of Interface Design” (1987) by Ben Shneiderman in the book “Designing the User Interface.”

Discount Usability: A “discount” evaluation?

In 1993 and 1994, Nielsen wrote several articles and books to revise and explain his heuristics. At the conference where Nielsen and Molich spoke (August 1990), Peter G. Polson, Clayton Lewis, et al. presented the Cognitive Walkthrough. This is also a UI usability evaluation method that does not involve users. Many ergonomic principles continue to be developed today. Nielsen’s heuristic evaluation remains one of the most famous, still used in interaction design, UX Design, and UI design.

What are the 10 usability heuristics?

The 10 usability heuristics are a set of guiding principles for evaluating the effectiveness and user-friendliness of a user interface. These principles were established by Jakob Nielsen in the 90s and are widely used in the field of user interface design. Here they are:

1. Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
2. Match between system and the real world: The system should speak the users’ language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms.
3. User control and freedom: Users often perform actions by mistake and need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process.
4. Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
5. Error prevention: Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
6. Recognition rather than recall: Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another.
7. Flexibility and efficiency of use: Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users.
8. Aesthetic and minimalist design: Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information.
9. Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation: It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.

These heuristic principles are essential to guarantee a smooth and intuitive user experience, which is crucial for the success and effectiveness of products and services based on information technologies.

Nielsen’s heuristic inspection vs. usability testing

Jakob Nielsen’s heuristic inspection has maintained its relevance for over 25 years, benefiting from sustained popularity due to its unique advantages that make it an indispensable tool in the field of ergonomics and digital design.

Advantages of Nielsen’s heuristic inspection

1. Low cost and easy implementation

Nielsen’s heuristic inspection stands out for its moderate cost and easy setup. This method offers an economical alternative without compromising the quality of the evaluation. Its simple application allows for fluid integration into design and redesign processes, guaranteeing regular monitoring of ergonomic and design performance.

2. Rapid detection of anomalies and optimal solutions

Thanks to heuristic inspection, anomalies related to ergonomics and design can be identified more quickly. This allows design teams to react promptly and provide optimal solutions before problems become more complex and costly to resolve.

3. Compatibility and versatility

This method harmonizes perfectly with other design tools and approaches, making it a versatile tool for design teams. Its compatibility with various design methods and tools makes it a valuable ally in the continuous improvement of ergonomics and user experience.

Limitations of Nielsen’s heuristic inspection

1. Risk of false positives and adequate choice of heuristics

Heuristic inspection is not immune to false positives, which can lead to the detection of problems that do not actually exist. It is crucial to carefully choose the relevant heuristics to ensure an accurate and complete evaluation of ergonomics and design.

2. Requirement for qualified experts and subjectivity

The success of the heuristic inspection depends heavily on the expertise of the evaluators in computer ergonomics. Evaluator subjectivity can introduce bias into the evaluation process, affecting the reliability of the results obtained.

3. Limitation in User Experience (UX) analysis

Heuristic inspection can focus excessively on the functional aspect of the interface, often relegating the emotional dimension and the actual feelings of users to the background. This can limit the ability to fully understand the user experience as a whole.

The Importance of Usability Testing

The use of usability testing offers an essential complementary perspective, allowing for the identification of friction and concrete difficulties encountered by users in their interaction with the interface.

Complementarity between the two approaches

Nielsen insists on the added value of combining heuristic evaluations with usability testing. These two methods do not substitute for each other but complement one another to offer a more complete and reliable evaluation of ergonomics and design.

Adapting heuristics to the mobile era and conversational interfaces

In a context where interfaces are no longer just desktop websites but include — and often prioritize — mobile applications, voice assistants, chatbots, and conversational interfaces, it is useful to revisit Jakob Nielsen’s 10 heuristics in light of these new platforms. For example, the “Visibility of system status” heuristic remains essential: on mobile or in a chatbot, the user must immediately understand where they are (loading, waiting, response, error). Similarly, “Consistency and standards” takes on a particular dimension: conventions between different platforms (iOS/Android/web) can diverge, which requires deciding to what level one aligns with native standards or imposes a unique identity. Finally, “Aesthetic and minimalist design” is even more important on smaller screens: eliminating superfluous elements improves readability, but care must be taken not to remove useful landmarks in a more restricted interface.

Measuring the impact of heuristics through UX indicators

To move from a qualitative heuristic evaluation to a more factual approach, it is interesting to associate each heuristic with measurable indicators. For example:

• For “User control and freedom,” one can look at the rate of action cancellations or “back” button usage.
• For “Recognition rather than recall,” one can measure the average time to complete a task or the number of clicks required.
• For “Error prevention,” one can track the number of user errors detected or reported. By integrating these metrics into your UX/UI design process, you can not only point out usability problems with Nielsen’s heuristics but also prioritize corrections according to their impact on the user experience and business objectives.

When business usage requires breaking a heuristic: cases and justifications

Nielsen’s heuristics are excellent benchmarks, but they are not strict laws. It may happen that, for business, strategic, or specific usage reasons, the interface must voluntarily deviate from a heuristic. For example, a very complex business interface may prioritize exhaustiveness over the “Aesthetic and minimalist design” principle: removing “non-essential” elements risks hiding key functionalities for expert users. In this case, it is better to document: why this heuristic is set aside, what compromise is made, and how the impact is monitored (via user tests or metrics). This type of transparency strengthens the credibility of your UX process and shows that you apply heuristics intelligently, not dogmatically.

The hybrid approach: synergy between heuristic expertise and user testing

In the field of ergonomics and design, Nielsen’s heuristic inspection plays a crucial role due to its cost-effectiveness and speed in identifying anomalies. However, its limitations highlight the need to also integrate usability testing for a more complete evaluation of the user experience. The hybrid approach, combining these two methods, proves to be the most comprehensive solution to guarantee user-centered design and an optimal user experience.

Nielsen Heuristics FAQ

• Who is the pioneer of heuristic evaluation?
  It is Jakob Nielsen, recognized as the father of “Usability Engineering,” who defined this rapid ergonomic audit method.
• What is the major difference between heuristic evaluation and user testing?
  Heuristic evaluation is performed by experts (UX designers, ergonomists) without involving end-users, unlike usability tests which observe the latter in real-life situations.
• Why are Nielsen’s 10 principles called “heuristics”?
  They are called so because they are general rules and design benchmarks rather than strict directives; they can be adapted or sometimes broken depending on the context.
• What are the three main advantages of this method?
  It stands out for its low cost, ease of implementation, and its ability to very quickly detect ergonomic anomalies during the design process.
• Why is it recommended to combine this method with usability testing? Because an expert audit can be subjective or miss the emotional dimension; user tests complement the analysis by identifying concrete difficulties experienced in the field.

Featured Image: Ray Dak Lam – Shape studies volume 2

With the advent of new digital devices, we are faced with a multitude of screen resolutions and pixel densities. In this article, we will explore the different solutions that will help you choose the ideal font size based on pixel density (DPI).

Factors affecting font readability

Unlike paper, fonts displayed on a screen can appear differently from one device to another, or even from one screen to another. Several factors influence how fonts are displayed:

1. Pixel Density (PPI/DPI)

Pixel density (Pixels Per Inch) defines the sharpness of the rendering.

• The aliasing challenge: On a low-density screen, the curves of letters can appear “jagged” (staircase effect). High-density screens (Retina, Quad HD) allow for thinner or lighter fonts without them disappearing or becoming blurry.
• The relative unit: Because of this variation, logical pixels (or dp on Android, pt on iOS) are used rather than physical pixels to ensure that text maintains the same visual size everywhere.

2. Screen Resolution

More than just a simple multiplication, resolution influences the available workspace.

• Size ratio: On a low resolution, a 16px font will take up a huge amount of screen space, limiting the number of words per line. On a 4K screen, this same font can become unreadable because it is tiny if not scaled properly.
• Rendering context: Resolution often determines whether the user will see your text in a single or multi-column layout.

3. Reading Distance

This is the factor that dictates the minimum usable size.

• Viewing angle: The further the eye is, the larger the letter must be to occupy the same visual angle.
• Mobile vs. Desktop hierarchy: On mobile (30 cm), slightly smaller fonts (e.g., 14px) are acceptable because the screen is close. On a television (“10-foot UI” usage), the text must be massive to remain legible.

4. Font Composition (Anatomy)

The anatomy of a letter directly impacts the speed of recognition by the brain.

• The importance of X-height: At the same size, a font with a large X-height (like Helvetica or Verdana) will appear larger and be more readable on screen than a font with a small X-height (like Garamond).
• Apertures: The white spaces inside letters (like the hole in an ‘e’ or a ‘c’) are vital. If they are too small, the letter turns into a dark “blob” on low-quality screens.

5. Font Size and Line Spacing

Size isn’t everything; it’s its relationship with the surrounding space that creates comfort.

• Line spacing (Line-height): For the web, a line spacing of 1.5 times the font size is often recommended. Text that is too tight tires the eye because it’s difficult to find the start of the next line.
• Contrast: On screen, size must be compensated for by contrast. A thin font (Light) requires a larger size or higher color contrast (black on white) to remain accessible.

Comparative table between different resolutions, pixel densities, and recommended font sizes based on “normal” reading distance.

Recommendations for choosing the right font size

Here are some recommendations for choosing the ideal font size based on the factors mentioned above:

1. Prioritize a generous X-height

X-height (the size of lowercase letters like “x”, “a”, “e”) is the #1 factor for readability on screen. The larger it is, the more open and easy to decipher the letter appears, even at a small size.

Why? On a screen, fine details of ascenders (the top of a “b”) and descenders (the bottom of a “g”) can get lost. A large X-height stabilizes the eye on the line.

Examples of fonts with large X-height:

• Verdana: Specifically designed for the screen, it has a massive X-height.
• Roboto (Google): Very balanced, it remains readable on various mobile resolutions.
• Helvetica Now: A modern version optimized for digital.

To avoid for body text: “Old-style” fonts like Garamond, which have a small X-height, making them tiny and tiring to read on a standard screen.

2. Long texts: Round and airy fonts

For a blog article or a report, the goal is to reduce eye strain. We look for fonts that “breathe.”

The principle: Fonts with wide apertures (the open space in a “c”, “e”, or “s”) prevent letters from turning into black blobs when the user squints.

Recommended examples:

• Open Sans: Very round, extremely readable thanks to its open forms.
• Montserrat: Very geometric and wide, it gives a modern and airy look.
• Georgia: If you prefer a Serif font, this is the queen of on-screen readability for long narratives.

3. Short texts: Narrow and dense fonts

For interface elements (buttons, navigation bars, notifications), space is often limited. In these cases, more condensed fonts can be used.

The principle: We prioritize recognition of the overall word shape rather than fluid reading.

Recommended examples:

• Oswald: A condensed font perfect for impactful titles or buttons.
• Archivo Narrow: Ideal when you have a lot of information to fit into a small screen width (dashboards).
• Inter: Although versatile, it is very effective in small UI spaces.

Summary table of uses

Font Measurement Systems

Font size can be measured using different scales. Here is an overview of two fixed scales (pixels and points) and two variable scales (em and percentage), along with their pros and cons:

1. Pixels

This scale measures font size in pixels on the screen. This means the font size is fixed, but the actual size displayed depends on the screen’s pixel density. It is a measurement understood by all browsers, but it does not adapt to different pixel densities and cannot be resized by older browsers.

2. Points

The point unit is a legacy of printing, where one point equals 1/72 of an inch (about 0.03 cm). Points offer relative control over the final result, but they do not display the same way on all devices. Consequently, points are not ideal for flexible layouts.

3. Em

The “em” unit is relative to the default font size. For example, 1 em is equal to your browser’s standard font size. “ems” are adaptive and allow for the creation of flexible layouts. They are well-supported by most browsers, including older versions.

4. Percentage

Measuring font size in percentage allows for the creation of fluid and adaptable layouts. However, this can be more complex to manage than other units, as the font size is determined as a percentage of the default font size.

Web Typography: Complete guide to choosing the perfect font – 2020 Happy.webacademy

Media Queries for font size

Media Queries are powerful tools for responsive web design. You can use them to adjust font size based on screen resolution. Media Queries allow you to offer an optimal user experience by adapting font size to different devices.

ISO 9241-300 Standard

The AFNOR 9241-300 standard specifies the rules to follow when designing interfaces for mobile, desktop, or TV screens.

The ISO standard recommends a font height of 2.8 mm for a reading distance of 50 cm. In other words, the total size of the font (from its ascender to its descender) should be 2.8 mm if the user reads at a distance of about 50 cm.

This results in the following equivalencies:

• 2.8 mm for d=50 cm
• 3.5 mm for d=60 cm
• 4 mm for d=70 cm

Font size, the guarantor of readability

Choosing the right font size for your online text is essential to ensuring a pleasant reading experience for your users. By taking into account pixel density, screen resolution, reading distance, and font composition, you can create readable and adaptive layouts. Using units like “em” and Media Queries can greatly improve the flexibility of your web designs.

Remember that readability is essential, and font size is a key element of it. Take the time to test different sizes and units to ensure your text is easy to read across a variety of devices.

Featured image: illustration by Tamanna Mundhra – Dribbble

Definition of Innovation

Innovation is a central concept but often misunderstood. It is not limited to invention or the introduction of cutting-edge technologies.

According to the OECD definition: “An innovation is the implementation of a new or significantly improved product (good or service), or process, a new marketing method, or a new organizational method in business practices, workplace organization or external relations, creating value for users or the company.“

Three fundamental characteristics help distinguish an innovation from a simple idea or invention. The first is novelty, which can be relative to the company, the market, or the world. The second is value creation, whether economic, social, or based on usage. The third is user adoption, without which the novelty remains purely theoretical.

Innovation thus constitutes a major lever for competitiveness and growth. It allows companies to adapt to a constantly changing environment, respond to emerging needs, and differentiate themselves sustainably.

Types of Innovation and Major Classifications

There are several ways to classify innovations in UX. Two approaches dominate: the institutional approach, notably that of the OECD, and the strategic approach, more commonly used in the business world.

The OECD Classification and the Oslo Manual

The Oslo Manual identifies four major types of innovation according to their field of application. Product innovation concerns new or improved goods or services. Process innovation relates to production or distribution methods. Marketing innovation involves methods of commercialization, communication, or pricing. Finally, organizational innovation concerns managerial practices, structure, or work organization.

This classification is widely used in statistical studies and public policies because it allows for the measurement of innovation activity in companies in a standardized way.

Read or download the Oslo Manual

https://www.slideshare.net/merkapt/manuel-doslo-2005

Schumpeter’s Vision and Creative Destruction

Economist Joseph A. Schumpeter proposes a more dynamic vision of innovation. He identifies five forms of innovation: new products, new production methods, opening of new markets, new sources of raw materials, and new work organizations. He is best known for the concept of creative destruction, according to which innovation disrupts existing balances by progressively replacing old technologies and old economic models.

This vision highlights the often conflictual and transformative nature of innovation, especially when it is radical or disruptive.

The Strategic Classification of the 4 Types of Innovation

In an operational context, companies often think in terms of degree of novelty and risk. It is in this logic that the distinction between incremental, adjacent, radical, and disruptive innovation is made. These four types constitute the heart of this article.

1/ Incremental Innovation

Definition and Principles

Incremental innovation consists of progressively improving an existing product, service, or process without challenging its fundamental concept. It relies on continuous adjustments, sometimes discreet, but which can generate significant gains in performance, quality, or user satisfaction. This type of innovation is the most widespread in companies because it draws on technologies, skills, and markets that are already mastered. It generally presents a limited level of risk.

Examples of Incremental Innovations

Incremental innovation is defined by a series of continuous improvements made to an already existing product or service. Unlike disruption, it does not seek to upset usage but to optimize it to maintain the relevance of the offer. Here is a detailed development of these examples to illustrate how this strategy ensures the longevity of market leaders.

The Case of Volkswagen Golf: The Benchmark of Automotive Evolution

Since its launch in 1974, the Volkswagen Golf has become the archetype of incremental innovation. Rather than reinventing the compact sedan concept with each generation, the manufacturer chose a strategy of technological sedimentation. Each new version capitalizes on the achievements of the previous one while integrating contemporary standards.

• Safety and Chassis: Over the decades, the Golf has moved from rudimentary structures to ultra-rigid chassis integrating programmed deformation zones, and then driver assistance systems (ABS, ESP, emergency braking).
• Comfort and Roominess: Optimizing interior space has allowed for an increase in the cabin volume without exploding the exterior dimensions of the vehicle, meeting the growing needs of urban families.
• Engine Performance: Evolution has taken place through improved thermal efficiency, the introduction of direct injection, and then mild hybridization, allowing for reduced CO2 emissions while increasing power.

The Annual Smartphone Cycle: Optimizing Daily Life

The mobile technology sector is undoubtedly where incremental innovation is most visible and rhythmic. Once the touch smartphone disruption passed in 2007, the market entered a phase of constant optimization to meet the high demands of users.

• Display and Photography: The transition from LCD screens to OLED panels, the increase in refresh rates (120 Hz), and the multiplication of photo sensors (wide-angle, macro, telephoto) are gradual improvements. They transform the communication tool into a true content creation studio.
• Autonomy and Charging: Rather than changing battery chemistry (which would be radical), manufacturers optimize software energy management and increase charging speeds, allowing users to regain autonomy in just a few minutes.

The Food Industry: Adapting to Health Trends

In the food sector, incremental innovation allows brands not to become obsolete in the face of changes in diets and consumer ethical concerns.

• Product Reformulation: Many manufacturers work on the progressive reduction of sugar, salt, or saturated fat levels in their historic recipes. The challenge is to improve the nutritional profile (Nutri-Score) without altering the familiar taste that makes the product successful.
• Flavor and Packaging Diversification: The introduction of variations (spicy taste, locally sourced ingredients, vegan options) allows for capturing specific market segments. At the same time, the move toward recyclable packaging or reducing plastic use constitutes an incremental process innovation, responding to the demand for sustainability.

Advantages and Limits

Incremental innovation allows for rapid response to customer needs, limits development costs, and strengthens competitive positioning. On the other hand, it exposes companies to the risk of strategic myopia if it is not complemented by more exploratory forms of innovation.

2/ Radical Innovation

Definition and Specifics

Radical innovation introduces a major break in a product, service, or process, often through a new technology or a completely different approach. It profoundly transforms existing usages and value chains.

Unlike incremental innovation, it involves a high level of uncertainty, both technically and regarding market adoption.

Examples of Radical Innovations

The Steam Engine: The Power of the Industrial Revolution

Although rudimentary systems existed before, it was the fundamental improvement made by James Watt in the 18th century that constitutes radical innovation. By introducing the separate condenser chamber, Watt multiplied energy efficiency, allowing for a shift from animal or hydraulic motive force to a constant and relocatable mechanical power.

• Impact on Production: It allowed for the emergence of textile factories and mass steelmaking, freeing industry from immediate proximity to waterways.
• Impact on Transport: The adaptation of this technology to the locomotive and steamship reduced global distances, facilitating international trade and human migration on an unprecedented scale.

The Telephone: Abolishing Sound Distances

In 1876, Alexander Graham Bell (and concurrently Elisha Gray) filed the patent for a device capable of transmitting the human voice via electrical signals. Until then, long-distance communication relied on the telegraph, which required the encoding and decoding of text messages (Morse code).

• Usage Break: The telephone removed the technical intermediary. Speech, an immediate vector of emotion and nuance, became instantaneous.
• Social Transformation: This innovation laid the foundations for the networked society, radically changing business management, the organization of emergency services, and the very structure of family and social relationships.

The Personal Computer (PC): The Democratization of Computing

In the 1960s, computing was reserved for governments and large corporations, occupying entire rooms. The radical innovation brought by players like Apple (with the Apple II) or IBM in the mid-70s and early 80s consisted of miniaturizing this power to make it accessible to the individual.

• Paradigm Shift: The computer moved from a centralized calculation tool to a decentralized information creation and management tool.
• Effect on Work: It gave birth to word processing, spreadsheets, and DTP (Desktop Publishing), transforming every desk into a multimedia production center.

The Smartphone: The Universal Pocket Terminal

The arrival of the iPhone in 2007 marks the culmination of a radical innovation that merged three products: a phone, an iPod (digital music player), and an internet communication device. It wasn’t the first “smart” phone, but the introduction of the capacitive touch interface and the App Store created a total break.

• Technological Convergence: The smartphone absorbed dozens of everyday objects (camera, GPS, flashlight, calculator, calendar).
• Societal Mutation: It established the era of hyper-connectivity. Our relationship with information became permanent, changing how we consume, how we move (via ride-sharing or mapping apps), and how we interact socially through social networks.

These innovations were not simple improvements to existing solutions, but true paradigm shifts.

Economic and Social Role

Radical innovation plays a key role in economic and social progress. It allows for solving complex problems, creating new sectors, and opening up unprecedented perspectives. However, it often requires significant investment and the capacity to accept failure.

3/ Adjacent Innovation

Definition and Strategic Logic

Adjacent innovation consists of exploiting existing skills, technologies, or resources of a company to offer new products or services, either to current customers or to new markets. It sits halfway between incremental innovation and radical innovation.

This approach allows for exploring new growth opportunities while limiting risks.

Examples of Adjacent Innovations

Adjacent innovation sits at the intersection of technical mastery and the exploration of new markets. Unlike radical innovation which starts from scratch, the adjacent approach capitalizes on an existing “nugget” (a technology, a distribution method, or expertise) to project it into a universe where it was not expected. Here is a detailed analysis of these emblematic examples.

The Case of 3M and Post-it Notes: Turning a Mistake into Success

The story of Post-it Notes is the most famous textbook case of adjacent innovation. In 1968, chemist Spencer Silver was working for 3M to create an ultra-strong adhesive for aerospace. He accidentally created the opposite: an adhesive that sticks lightly but can be removed without leaving traces and reused.

For several years, this invention remained without an application. It was one of his colleagues, Art Fry, who made the link with a new need: marking the pages of his hymnbook at church without damaging them.

• Value Transfer: 3M used its mastery of polymers (existing expertise) to create a stationery product (adjacent market).
• The Impact: This product created a new category of office supplies and revolutionized informal communication in companies.

Heineken and Desperados: Blending Flavors

In the highly codified brewing sector, Heineken achieved a masterstroke with the launch of the Desperados brand. The innovation did not lie in the creation of a new fermentation process, but in the hybridization of products.

• Mobilized Expertise: Heineken used its lager production lines and its global distribution network (existing capabilities).
• Target Market: By flavoring beer with tequila and giving it a more festive and “spirit-like” image, the brand targeted young adults and cocktail consumers, a segment that traditionally shunned the bitterness of classic beer.
• The Result: A market innovation that allowed for recruiting new consumer profiles while maintaining the cost structures of a traditional brewery.

The Extension of Digital Platforms: The Leverage Effect

Digital giants (Google, Amazon, Uber) are champions of adjacent innovation. Their strategy consists of building a solid technological infrastructure and then grafting new services onto it to maximize the profitability of their assets.

The Example of Google Maps

Initially, Google was a text search engine. By acquiring and then developing mapping technology, the company achieved a major technological adjacency.

• Usage Extension: By linking search to geolocation, Google transformed a map service into a local advertising tool for businesses and an indispensable platform for tourism and mobility.

The Example of Uber and Uber Eats

Uber used its platform connecting drivers and passengers to tackle the meal delivery market.

• Resource Optimization: The dispatching algorithm and payment system were already proven. The move from transporting people to transporting goods (meals) is a pure adjacency that allowed for keeping drivers busy during off-peak hours and multiplying the volume of transactions on the app.

Advantages and Challenges

Adjacent innovation is generally faster to deploy and easier to finance than radical innovation. On the other hand, it requires a good understanding of new markets and fine management of internal tensions between existing activities and new offers.

4/ Disruptive Innovation

Definition and Clarification

Disruptive innovation refers to an innovation that creates a new market or radically transforms an existing market by making dominant solutions obsolete. It is not entirely synonymous with radical innovation, even if the two notions are close.

Disruption relies as much on a new business or usage model as on a technology.

Examples of Disruptive Innovations

Disruptive innovation stands out for its ability to overturn established players by offering solutions that are often simpler, more accessible, or radically more effective. Unlike radical innovation which focuses on technological prowess, disruption is primarily interested in the transformation of economic models and usages. Here is a detailed analysis of these examples that have redefined the rules of the game.

The Automobile: From Luxury Curiosity to Mass Standard

In its early days, the automobile was not considered a threat to horse-drawn transport or the railway. It was perceived as an expensive and unreliable toy for the elite. The real disruption was not only the invention of the internal combustion engine, but the democratization of its use.

• Disruption through the Production Model: By introducing Fordism, Henry Ford made the automobile accessible to the middle class. It was no longer pure performance that counted, but price and availability.
• Systemic Shift: This innovation forced the creation of massive road infrastructure, leading to the decline of horse transport and modifying global urban planning with the appearance of suburbs. It created a “new market” for individual mobility.

The Internet: The Dematerialization of Knowledge

The Internet represents the deepest disruption of the last century. Initially a simple military and then academic communication network (ARPANET), it eventually absorbed and transformed all pre-existing forms of media.

• Universal Access: Before the internet, information was stored physically (libraries, newspapers, encyclopedias). The disruption consisted of making this information instantaneous, free (seemingly), and available everywhere.
• Disintermediation: The Internet removed traditional intermediaries. To get information, buy, or communicate, the individual no longer needs to pass through centralized physical structures, which caused a shockwave for the print press, postal services, and physical distribution.

Digital Platforms: The Disruption of Established Sectors

The platform economy (or “Uberization”) is the most recent example of disruption through usage. These companies often possess no physical assets (cars, hotels) but master the interface between supply and demand.

Transport and Hospitality (Uber, Airbnb)

These services started by targeting marginal needs: finding temporary accommodation with a local or ordering a car via an app.

• The Exploited Weakness: They attacked the taxi and hotel sectors where they were vulnerable: price, ease of booking, and price transparency.
• The Network Effect: By offering a superior user experience and a lighter cost structure, these platforms forced historical players to digitize urgently or disappear.

Media and Entertainment (Netflix, Spotify)

The shift from ownership (buying CDs or DVDs) to usage (streaming by subscription) constitutes a major disruption of the economic model.

• The End of Physical Support: Netflix started as a DVD-by-mail rental service (marginal usage) before switching to streaming. This transition made physical distribution networks like Blockbuster obsolete in less than a decade.

Impacts on Companies

Disruptive innovation forces established players to adapt quickly or disappear. It favors the emergence of new leaders and redefines the rules of competition. For established companies, knowing how to identify and anticipate these disruptions is a major strategic challenge.

Summary of the Characteristics of the 4 Types of Innovation

Process, Product, Marketing, and Organizational Innovation

Product Innovation and Process Innovation

Product innovation concerns the creation or improvement of goods and services. Process innovation, on the other hand, relates to production, logistics, or distribution methods. For example, industrial automation or the optimization of logistics chains are process innovations that can generate significant productivity gains.

Marketing and Organizational Innovation

Marketing innovation results in new ways of positioning, promoting, or pricing an offer. Organizational innovation concerns management methods, collaboration, or governance. These forms of innovation are often less visible, but they play a determining role in the overall performance of companies.

Innovation Management and User Experience

Innovation cannot be dissociated from user experience. Understanding the needs, expectations, and mental models of users is indispensable for designing relevant and adopted solutions. UX design allows for transforming a technical innovation into a usage innovation.

Design thinking methods favor this human-centered approach. By combining empathy, prototyping, and iteration, they allow for reducing risks and improving the quality of innovative solutions.

Innovation Management and User Experience (UX) Design

Innovation cannot be dissociated from user experience today. By focusing on a deep understanding of mental models and user needs, good designers can create adapted and intuitive solutions that meet user expectations. UX design proves to be a key element in improving the usability of products or services, while taking into account time constraints and team deadlines.

Applying the Design Thinking method proves effective for approaching innovative projects. By emphasizing empathy and understanding user needs, this approach allows for solving problems creatively and fostering an iterative innovation process based on user feedback.

Innovation as a Sustainable Strategic Lever

Innovation is not limited to a single form or method. Successful companies combine incremental, adjacent, radical, and disruptive innovation depending on their maturity, sector, and objectives. Understanding the different types of innovation allows for building balanced strategies capable of generating value in the short term while preparing for the future. By integrating a user-centered approach and relying on solid frameworks like the Oslo Manual, organizations can transform innovation into a true sustainable competitive advantage.

Innovation FAQ

What is the difference between radical and disruptive innovation?

Radical innovation relies on a major technological break coming from R&D, while disruptive innovation often relies on a simpler or cheaper business model that dethrones leaders.

Why is incremental innovation the most common?

It is favored because it presents a limited financial risk, relies on an already existing customer base, and generates regular income to finance more ambitious projects.

Can one innovate without new technology?

Yes, innovation can be organizational, social, or involve the economic model, as proven by the example of Airbnb which owns no hotels but has transformed the accommodation market.

How to choose between these four types of innovation?

The choice depends on the company’s strategy: incremental to defend positions, adjacent to grow, and radical or disruptive to transform the market in the long term.

What is the role of the Oslo Manual in innovation?

It is the international reference guide that allows for defining and measuring innovation consistently across countries and companies, thus facilitating global statistics.

Featured image: Searching for contracts—Giorgi Sisauri—Dribble

What is a wireframe?

The wireframe as an architect’s blueprint

An effective Wireframe allows for the visualization of page layout, information architecture, user journeys, and essential functionalities. The goal is to validate interface concepts and user experience before handing the project over to developers. This crucial design phase is often entrusted to professionals such as UX designers, UI designers, or ergonomists.

Differences and similarities between prototyping and wireframing

According to Jakob Nielsen in his book Usability Engineering (1993), the Wireframe, like the Mockup, is a “horizontal prototype,” a static representation of the graphical part of the user interface. The prototype becomes “vertical” when functionalities are implemented, allowing for user testing based on specific scenarios.

It is common for the concepts of prototyping and mocking up to be confused. Alita Joyce from NNGroup highlights that although a Wireframe is always a low-fidelity prototype, not all prototypes are Wireframes.

Advantages of wireframing

Creating “wired” mockups offers several significant advantages:

• Optimization of interface design by focusing on functional specifications.
• Presentation of the future interface to stakeholders to obtain their approval before development.
• Quick detection of errors or problems in UX Design and ergonomics for rapid iterations.
• Saving time and money thanks to its speed, low resource cost, and flexibility, thereby reducing revisions during the development phase.

On the other hand, high-fidelity prototypes serve as the first version of the final product, testing efficiency and usability before the deployment of the web or mobile application. These elements are produced at distinct stages of the UX/UI design project.

Mockup creation in the design process

To design an interface while optimizing the quality of the user experience, it is essential to follow several key steps. These steps, when well-orchestrated, allow a simple idea to be transformed into a functional and aesthetic reality. Creating mockups in the design process is one of these crucial steps. It plays a central role in the preliminary visualization of a concept, offering a tangible and concrete representation of the designer’s vision. This process, although iterative and adaptive, follows a series of key phases, from user research to ergonomic evaluation, including the creation of wireframes, mockups, and prototypes.

Conducting user research: understanding the needs of end-users

Before diving into mockup creation, it is crucial to understand the needs and expectations of the end-users. An in-depth analysis of the target users allows for the creation of mockups that respond precisely to their needs and expectations. This research phase constitutes the very foundation of the user-centered design process.

Mocking up interface screens: key steps in the process

The mocking up stage involves the preliminary visualization of the interface screens to be designed. This process can be subdivided into several essential sub-steps, such as sketching, zoning, wireframing, mockup creation, and the realization of functional prototypes in collaboration with developers.

Sketch and zoning: capturing initial ideas

The sketching stage consists of outlining the first design ideas on paper or using digital tools. Zoning, on the other hand, consists of delimiting the blocks of information that should be present on the page. These initial steps allow for the capture of raw concepts and the refinement of basic ideas before moving to the next stage.

Wireframe: the common thread of design

Wireframes represent the structured outline of an interface without its detailed graphic design. They serve to highlight the layout of key elements such as the header, navigation bar, call-to-action buttons, breadcrumbs, form elements, as well as areas reserved for images and media. They allow for the conceptualization and refinement of basic ideas while defining the fundamental structure of the interface.

Mockup: bringing the design to life

Mockups, representing high-fidelity graphic models, play an essential role in the detailed visualization of the interface. They facilitate communication between the various project stakeholders and offer a realistic visual representation of the final interface. The creation of mockups also serves as a tool for validation and design improvement in collaboration with the teams involved.

Prototype: functional realization

Prototypes, the ultimate stage of the mocking up process, allow the initial vision to be materialized by creating functional versions of the application or software in collaboration with developers. These prototypes serve as a basis for ergonomic evaluation and user testing, thus offering a concrete overview of the user experience before the final product launch.

Ergonomic evaluation: ensuring an optimal user experience

Ergonomic evaluation plays a crucial role between mockup iterations. It includes ergonomic audits, perception tests, and user tests aimed at ensuring that the interface meets the functional needs and expectations of users. This phase allows for the identification and resolution of potential user experience issues, thus ensuring the consistency and usability of the developed interface.

This evolution funnel of the design process, based on continuous iteration and collaboration, represents a complete and methodical approach to achieving an optimized interface design that meets specific user needs. The flexibility of the methodologies used allows for effective adaptation based on the nature of the project, the budget, and the specific requirements of each case.

Examples of wireframe mockups

Mockups can be created using various tools and methods. Here are some examples of wireframe mockups used by professionals in the field:

Hand-drawn wireframe sketch: speckyboy

Using hand sketching allows designers to quickly capture initial ideas and refine basic concepts in a creative and spontaneous way.

“Sketchy wireframe” with Axure RT: humane interface

The use of tools such as Axure RT allows for the creation of detailed and interactive wireframes, offering a more elaborate representation of the final interface.

a wireframe example by Aaron Akbari-Mort

Example of a responsive design wireframe: Balsamiq

The use of Balsamiq facilitates the design of wireframes by taking into account compatibility with different devices and screens, ensuring an optimal user experience across all platforms.

At Usabilis, we favor the use of Axure RP for creating interactive mockups, often associated with a complete ergonomic charter. We also offer comprehensive training in interface mocking up, covering various aspects of ergonomics, web, mobile, and touch interfaces.

From mockup to experience: The keys to success

The mockup creation process within the framework of interface development represents a fundamental step in achieving an optimized interface design and a successful user experience. By following an iterative and collaborative process, taking into account the needs of end-users, and regularly evaluating the ergonomics of the interface, it is possible to create effective and user-friendly interfaces that meet user expectations.

Wireframe FAQ

What is a wireframe (skeletal mockup)?

It is a schematic and simplified representation that serves as the backbone of an interface. It focuses on the structure, layout of elements, and functionalities rather than the visual or aesthetic aspect.

What is the main difference between a wireframe and a mockup?

The wireframe is a low-fidelity plan focused on information architecture, while the mockup is a high-fidelity model that presents the detailed and realistic graphic design of the final interface.

Why compare the wireframe to an architect’s plan?

Like a “blueprint” for a building, the wireframe serves as a technical foundation. It allows for the validation of interface concepts and user journeys before starting the “construction” (computer development).

What are the economic benefits of wireframing?

It saves time and money by detecting ergonomic errors very early. Its creation is fast and inexpensive, which reduces complex revisions during the development phase.

What is the role of ergonomic evaluation in this process?

It occurs between mockup iterations to ensure, via user tests or audits, that the interface is user-friendly, efficient, and perfectly meets final needs.

Featured image: Cooperation concept—serj marco DRIBBLE