Tag Apps: Design a Non-intrusive Interface And Interaction Based On the UX Principle

Guozhu Liu

Guozhu Liu

Author, Product designer
Fangyuan Zheng

Fangyuan Zheng

Author, Operator of Community Support
Fanjing Zhang

Fanjing Zhang

Designer, Head of Product Design
Thumbnail

1. Non-intrusive design and the lessons learned from Apple

Microsoft Re-Designs the iPod Packaging - YouTube
AirPods 3 vs. AirPods Pro, latter of which has active noise cancellation and is more expensive by 40% (MSRP $179 vs. $249).

There is no description on the package, let alone marketing promotions or branding.

Sony WF-1000XM3 (MSRP $199.99), a typical competitive product of the AirPods, highlights all the features on the package while still trying to come up with a simple look.

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

JD, Pinduoduo
Google Mail, iOS App

Non-intrusive Design

Tags in Finder/Files, macOS/iOS

Finder, macOS
File, IOS App
Files, iOS App

Reminders in macOS

Reminders, 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.

Group icon on Craft

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.

Pencil icon to modify title on Anytype
Anytype table

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.

Hide catalogue style at Clover
catalogue style at Clover

Height

tag at Height
tag of table on Height

3. Tags in the block-based noting tools

Spoiler: 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.

notion tags

Innos

Innos tags

ClickUP

clickup

Clover

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.

tags on Asana

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.

Monday tags of table
Writing down explanations of the current tag

Craft

There’re only four predefined time tags in Craft.

time tags on Craft
Craft tags

Anytype

In this example, tags are used for labelling the pages. Please ignore their visual ugliness in colors.

Tags on Anytype

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.

tags on Anytype pages

Airtable

As an Excel-like app focusing on the tables, tags are editable directly in the cells by inputting texts.

tags in table of Airtable
tag edit box of Airtable

Almanac

Almanac has a similar tagging system as Airtable’s, though with a better look. It shows us the importance of UI design.

table tags on Almanac

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.

tags on Coda
here are some Interesting icons in Coda

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.

What’s New in the all-new Things. Your to-do list for Mac & iOS

In contrast, 2Do and OmniFocus allow users to fully customize the elements in the UI.

iOS – 2Do
OmniFocus 3 Review: More Approachable and Powerful, All at Once - MacStories

Details of a to-do item, including notes and checklists, hide themselves in the normal view. There’s only an ignorable icon for indication.

Click on the page icon for more content, Things

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?

If any user would like to participate in the discussion of the above, we welcome every user to offer feedback and suggestions, please feel free to contact us on:

Hope you have a nice time with AFFiNE !

Copyright © 2022 Affine. All rights reserved.
Made by Affine