--- title: Design a Non-intrusive Interface And Interaction Based On the UX Principle author: Guozhu Liu , Fangyuan Zheng, Fanjing Zhang tags: UX Open Day slug: tag-apps-design-a-non-intrusive-interface-and-interaction-based-on-the-ux-principle description: created: 2022-07-14 updated: 2022-07-14 layout: blog publish: true ---  # 1. Non-intrusive design and the lessons learned from Apple   There is no description on the package, let alone marketing promotions or branding.  Why is Apple able to carry on its minimalist/simplistic approach of design to such a paranoid degree? Since tech giants always have great impact on the whole line of products, what can we learn from it? Apparently, we need to take a trade-off, a compromise which can achieve both the emphasis of featuring functions and the visual simplicity. # 2. Inspirations from other apps and use cases ### Intentionally intrusive design   ### Non-intrusive Design #### Tags in Finder/Files, macOS/iOS     #### Reminders in macOS  ### Craft The Group button, which is used for making subpages/groups, reveals in the far right side of the current block if and only if it’s being hovered. As a main feature, Craft allows users to turn any kind of block into a subpage, though it intentionally hides this function in all blocks except for the hovered one.  ### Anytype In this interface, Anytype differentiates on purpose two functions of clicking, that is to say, clicking to open the page and clicking to modify the title text.   ### Clover In normal situations, the table of content, which is fixed to the left side, displays as a queue of dots. It becomes noticeable when you hover the cursor on it, in which case the texts reveal themselves with a proper highlight of the current section.   ### Height   # 3. Tags in the block-based noting tools **S_poiler: None of them is similar to ours._** ### Notion In Notion, the tags exist and function only in the databases. Notion doesn’t have a workspace-wide tagging system.  ### Innos  ### ClickUp  ### Clover You can add text tags to the to-do list for a better planning of time.  ### **Asana** Asana uses a dedicated page to manage all sort of tags in the multi-dimension tables. You have to go to this page to operate actions like adding or deleting tags.  ### **Monday** In Monday, you can modify the tags in place. A subtlety is that there’ll be a + sign in the upper-right corner when hovering, for further editing in a pop-up window.   ## **Craft** There’re only four predefined time tags in Craft.   ### **Anytype** In this example, tags are used for labelling the pages. Please ignore their visual ugliness in colors.  There’s a specific block designed for the tags. In this way, you can apply tags to any contents by inserting a tag block and choosing what tags you need. However, it’s weird that you can not change the “Tag” title text, nor changing the size of the column to shrink the obvious blank area in the middle of the block.  ## Airtable As an Excel-like app focusing on the tables, tags are editable directly in the cells by inputting texts.   ### Almanac Almanac has a similar tagging system as Airtable’s, though with a better look. It shows us the importance of UI design.  ### Coda The following shows Coda's focused Tags, each of which looks comfortable and unobtrusive. Icon tags use low-saturation colors. The other tags are in grey to reduce their presence. Some Plugins in coda are interactive and can be inserted as body content.   ### Things The usage of colors in Things is very conservative. Unlike most of the apps in the same category, you can not set colors to any kind of groups (in Things, they are called Area and Project) or tags. And there’s only one color, dark blue, of the headings in the Project. This severe limitation to the UI makes the characteristic aesthetic of the app.  In contrast, 2Do and OmniFocus allow users to fully customize the elements in the UI.   Details of a to-do item, including notes and checklists, hide themselves in the normal view. There’s only an ignorable icon for indication.  # 4. Tag Apps in the AFFiNE Block Editor > 💡_Our Tag Apps results from the editing of a multi-dimension table, by which it means that, comparing with [Notion](https://www.notion.so/UX-Open-Day-2022-07-07-4bd4d433a03e47398883ec12d02f073a), all contents from any kind of blocks are connected with each other in a database._  ### Baselines (Please note that the terminology used here might not be consistent with the ones used by the developers. ) * Tags add additional properties to the block it belongs to, by which various types of attributes, status, attachments and connected elements can be used to extend the original content of the block in question. * Tagged blocks will find their positions/roles in the Kanban or Table view, which utilizes tags to classify the blocks. * However, **blocks without tags make of the usual part of most docs.** * Moreover, we prefer NOT to have a separate “read mode”, and hence the docs should looks easy&beautiful to read when people are NOT writing. * Unnecessary tags would make users feel “heavier” compared to the normal blocks used to be used in daily, lightweight writings. ### Two use cases: ⚡Lightweight vs. 🪨Heavyweight ⚡ Light: * A neat, tidy, and simple UI for casual or non-managerial writing. * Quick note, daily note, preliminary brainstorming, … 🪨 Heavy: * A controllable, convertible, and colorful UI for task-focused, official writing. * Schedule, plan, catalog list, multi-role collaboration, … Should we offer a switch or more detailed settings for users of customizing the show/hide and adjustments of tags according to the two kinds of use cases? ### Interactions * AOD (Always-On Display) of the tags, or part of it, or a kind of transformation? * Hovering, and its shape, position and delay? * Other trigger? * Animation and feedback of interaction? A coarse-grained prototype focusing on the non-intrusive design and the semantics of the UI elements. ### To-Keeps in the future plan * Non-intrusive design is what we will be looking for * Partially-on-display seems to be worth trying * like the way macOS and finder did * also, the apple reminder looks good * Shall we make groups less intrusive too? Hope you have a nice time with AFFiNE !
title: Design a Non-intrusive Interface And Interaction Based On the UX Principle
author: Guozhu Liu , Fangyuan Zheng, Fanjing Zhang
tags: UX Open Day
slug: tag-apps-design-a-non-intrusive-interface-and-interaction-based-on-the-ux-principle
description:
created: 2022-07-14
updated: 2022-07-14
layout: blog
publish: true
1. Non-intrusive design and the lessons learned from Apple
There is no description on the package, let alone marketing promotions or branding.
Why is Apple able to carry on its minimalist/simplistic approach of design to such a paranoid degree? Since tech giants always have great impact on the whole line of products, what can we learn from it?
Apparently, we need to take a trade-off, a compromise which can achieve both the emphasis of featuring functions and the visual simplicity.
2. Inspirations from other apps and use cases
Intentionally intrusive design
Non-intrusive Design
Tags in Finder/Files, macOS/iOS
Reminders in macOS
Craft
The Group button, which is used for making subpages/groups, reveals in the far right side of the current block if and only if it’s being hovered. As a main feature, Craft allows users to turn any kind of block into a subpage, though it intentionally hides this function in all blocks except for the hovered one.
Anytype
In this interface, Anytype differentiates on purpose two functions of clicking, that is to say, clicking to open the page and clicking to modify the title text.
Clover
In normal situations, the table of content, which is fixed to the left side, displays as a queue of dots. It becomes noticeable when you hover the cursor on it, in which case the texts reveal themselves with a proper highlight of the current section.
Height
3. Tags in the block-based noting tools
S_poiler: None of them is similar to ours._
Notion
In Notion, the tags exist and function only in the databases. Notion doesn’t have a workspace-wide tagging system.
Innos
ClickUp
Clover
You can add text tags to the to-do list for a better planning of time.
Asana
Asana uses a dedicated page to manage all sort of tags in the multi-dimension tables. You have to go to this page to operate actions like adding or deleting tags.
Monday
In Monday, you can modify the tags in place. A subtlety is that there’ll be a + sign in the upper-right corner when hovering, for further editing in a pop-up window.
Craft
There’re only four predefined time tags in Craft.
Anytype
In this example, tags are used for labelling the pages. Please ignore their visual ugliness in colors.
There’s a specific block designed for the tags. In this way, you can apply tags to any contents by inserting a tag block and choosing what tags you need. However, it’s weird that you can not change the “Tag” title text, nor changing the size of the column to shrink the obvious blank area in the middle of the block.
Airtable
As an Excel-like app focusing on the tables, tags are editable directly in the cells by inputting texts.
Almanac
Almanac has a similar tagging system as Airtable’s, though with a better look. It shows us the importance of UI design.
Coda
The following shows Coda's focused Tags, each of which looks comfortable and unobtrusive. Icon tags use low-saturation colors. The other tags are in grey to reduce their presence.
Some Plugins in coda are interactive and can be inserted as body content.
Things
The usage of colors in Things is very conservative. Unlike most of the apps in the same category, you can not set colors to any kind of groups (in Things, they are called Area and Project) or tags. And there’s only one color, dark blue, of the headings in the Project. This severe limitation to the UI makes the characteristic aesthetic of the app.
In contrast, 2Do and OmniFocus allow users to fully customize the elements in the UI.
Details of a to-do item, including notes and checklists, hide themselves in the normal view. There’s only an ignorable icon for indication.
4. Tag Apps in the AFFiNE Block Editor
💡_Our Tag Apps results from the editing of a multi-dimension table, by which it means that, comparing with Notion, all contents from any kind of blocks are connected with each other in a database._
Baselines
(Please note that the terminology used here might not be consistent with the ones used by the developers. )
- Tags add additional properties to the block it belongs to, by which various types of attributes, status, attachments and connected elements can be used to extend the original content of the block in question.
- Tagged blocks will find their positions/roles in the Kanban or Table view, which utilizes tags to classify the blocks.
- However, blocks without tags make of the usual part of most docs.
- Moreover, we prefer NOT to have a separate “read mode”, and hence the docs should looks easy&beautiful to read when people are NOT writing.
- Unnecessary tags would make users feel “heavier” compared to the normal blocks used to be used in daily, lightweight writings.
Two use cases: ⚡Lightweight vs. 🪨Heavyweight
⚡ Light:
-
A neat, tidy, and simple UI for casual or non-managerial writing.
-
Quick note, daily note, preliminary brainstorming, … 🪨 Heavy:
-
A controllable, convertible, and colorful UI for task-focused, official writing.
-
Schedule, plan, catalog list, multi-role collaboration, … Should we offer a switch or more detailed settings for users of customizing the show/hide and adjustments of tags according to the two kinds of use cases?
Interactions
- AOD (Always-On Display) of the tags, or part of it, or a kind of transformation?
- Hovering, and its shape, position and delay?
- Other trigger?
- Animation and feedback of interaction?
A coarse-grained prototype focusing on the non-intrusive design and the semantics of the UI elements.
To-Keeps in the future plan
- Non-intrusive design is what we will be looking for
- Partially-on-display seems to be worth trying
- like the way macOS and finder did
- also, the apple reminder looks good
- Shall we make groups less intrusive too? Hope you have a nice time with AFFiNE !