Interface Abstraction Spectrum

The following findings are based on research conducted for animating User Interfaces for marketing purposes during my time at Klue. I analyzed imageries on multiple SaaS companies' websites, such as Slack, Workforce and Monday, to understand how they displayed their software interfaces on their website  pages. The visuals ranged from showing the full original interface to highly abstracted versions. I categorized the visuals into levels based on their degree of abstraction and the purpose to which each level can be applied. The levels are as follows:

1. Full Interface

1.1
1.2
1.3
1.5

The Full Interface, as the name suggests, displays the application interface exactly as it is available on the market. This visual is usually found in website areas like Demos, where potential buyers can get a feel for the actual software.

2. Scaled Interface

2.7
2.1
2.4
2.5

Scaled Interface visuals replicate the feel of the interface while scaling up all the text and icons, making it easier for the user to read. This approach is useful for building a narrative around the application’s use case.

3. Scaled + Focused 

3.2
3.5
3.4
3.3

Similar to Scaled Interfaces but with certain parts of the UI blocked out or removed to direct the user's focus to the highlighted feature. This method is effective for marketing specific product features.

4. Scaled + Super-focused 

4.3
4.1
4.2

These visuals further narrow the user’s attention to one specific feature of the application. All unnecessary details are blocked out as wireframe blocks, directing the user’s complete focus to the main feature being explained.

5. Abstracted + Interactive

5.1
5.3
5.2
5.5

These are scaled-up abstracted interfaces in action. They contain only the necessary details to convey an interaction story. Often, panels within the interface move to suggest that they can be reorganized or to indicate that there are multiple sections serving various purposes.

6. Fully Abstracted

6.1
6.2
6.4
6.5

These usually consist of blocks or panels in motion, narrating what the application does. They are primarily used to convey the concept in a simple and efficient manner without showing the actual interfaces at all.

1. Full Interface

1.1
1.2
1.3
1.5

The Full Interface, as the name suggests, displays the application interface exactly as it is available on the market. This visual is usually found in website areas like Demos, where potential buyers can get a feel for the actual software.

2. Scaled Interface

2.7
2.1
2.4
2.5

Scaled Interface visuals replicate the feel of the interface while scaling up all the text and icons, making it easier for the user to read. This approach is useful for building a narrative around the application’s use case.

3. Scaled + Focused 

3.2
3.5
3.4
3.3

Similar to Scaled Interfaces but with certain parts of the UI blocked out or removed to direct the user's focus to the highlighted feature. This method is effective for marketing specific product features.

4. Scaled + Super-focused 

4.3
4.1
4.2

These visuals further narrow the user’s attention to one specific feature of the application. All unnecessary details are blocked out as wireframe blocks, directing the user’s complete focus to the main feature being explained.

5. Abstracted + Interactive

5.1
5.3
5.2
5.5

These are scaled-up abstracted interfaces in action. They contain only the necessary details to convey an interaction story. Often, panels within the interface move to suggest that they can be reorganized or to indicate that there are multiple sections serving various purposes.

6. Fully Abstracted

6.1
6.2
6.4
6.5

These usually consist of blocks or panels in motion, narrating what the application does. They are primarily used to convey the concept in a simple and efficient manner without showing the actual interfaces at all.