Zum Hauptinhalt springen
Zurück zum Blog
Eine Noteastic-Textbox mit dem Text 'Text in Noteastic? …JA!', darunter die schwebende Text-Toolbar
Lukas Koinig

Wir stellen Textboxen in Noteastic vor. Jetzt kannst du neben deiner Handschrift auch Tippen!


Textboxen waren euer meistgewünschtes Feature

Vor langer langer Zeit, noch weit vor dem Release von Noteastic 1.0, als Dilan und ich über die Zukunft von Noteastic philosophiert haben, haben wir uns überlegt, was die krassesten und einflussreichsten Features wären, die wir jemals in die App einbauen könnten. Textboxen waren eines dieser Features. Damals war es unvorstellbar, dass wir Textboxen jemals wirklich in die App einbauen könnten, weil damals nicht einmal die “einfachen” handschriftlichen Notiz-Funktionen gestanden sind.

Ein paar Jahre später ist Noteastic veröffentlicht, eine kleine Community ist gewachsen und wir bekommen täglich konstruktives Feedback aus allen Kanälen. Leute aus aller Welt schreiben uns E-Mails, dass Noteastic eine kritische Lücke in ihrem Uni-Alltag füllt, und schicken uns gleich ihre Feature-Wünsche mit. Und was wünschen sich die Leute am allermeisten? Textboxen. Rund 20% aller Feature Requests, die wir jemals bekommen haben, drehen sich um Textboxen. Hier ein Ausschnitt aus unserer “World Wide Feedback” Excel-Tabelle, in der wir alle Feedbacks aus allen Kanälen zusammentragen:

Wir haken eure Wünsche nach und nach ab! Hast du uns deine Feature-Wünsche schon geschickt?

Es ist die Zeit gekommen, diesen Giganten an einem Feature anzugehen. Was für eine schöne Realisierung, dass die App mittlerweile an einem Punkt ist, an dem wir uns selbstbewusst an Features wagen können, die nicht direkt mit Handschrift zu tun haben!

Textboxen für eine handschriftliche Notiz-App?

Mein Ziel beim Design von Noteastic war stets, das Notizenmachen so schnell und einfach wie möglich zu halten. Du solltest dir in der App nicht überlegen müssen, wo und wie du ein Feature findest. Du solltest einfach deinen Stift nehmen und loslegen können während du vergisst, dass du gerade eine komplexe Applikation bedienst. Genau dasselbe Feeling wollte ich bei Textboxen erzeugen. Einfach Text einfügen, wenn du ihn brauchst. Schnell und simpel.

Aber Text ist eigentlich ein ziemlich komplexes Element mit hunderten möglichen Einstellungen. Von verschiedenen Schriftarten über Farben bis hin zu Ausrichtungen, Aufzählungen und Dicken… Wir mussten uns im Hinterkopf behalten, dass Noteastic nach wie vor eine handschriftliche Notiz-App ist. Wir können Microsoft Word nicht nachbauen. Das ist nicht das Ziel. Und wir wollen es auch gar nicht. Inspiration haben wir uns außerdem bei Applikationen wie Canva geholt, die schon jetzt tolle Workflows mit Textboxen auf einem offenen Canvas bieten.

Ich brauchte einen Überblick darüber, wofür wir in der App Platz machen wollen und wofür eben nicht. Also habe ich ein Notizbuch in Noteastic erstellt und meine Gedanken aufgeschrieben, so wie ich es immer mache.

Nach vielen Diskussionen mit Dilan darüber, wo und wie wir die ausgewählten Features unterbringen, hatte ich endlich eine klare Vision, wie Textboxen in Noteastic aussehen könnten. Das hat ungefähr so ausgesehen:

Mit dieser Klarheit habe ich angefangen, meine Spezifikation als User Story zu verschriftlichen, also als Beschreibung eines Features aus den Augen des Benutzers. Das ist ein kritischer Schritt in unserem Entwicklungsworkflow, denn die geschriebene Spezifikation ist der beidseitig absignierte ‘Vertrag’ darüber, was Dilan zu entwickeln hat. Zum Schreiben und Organisieren der User Stories verwenden wir Obsidian, ein tolles Tool, um textbasiert komplexe Systeme zu dokumentieren.

Und Textboxen waren mit Abstand das komplexeste Feature, das ich bis dahin designt habe. Es hatte in allen Bereichen der Notiz-Experience in Noteastic Einflüsse und hat vielerorts eine Sonderbehandlung gebraucht. Da war einiges aufzuschreiben und zu handhaben. Das sind alle Dateien, die ich für die Formalisierung von Textboxen angelegt habe:

Jede Datei, die du links siehst, schaut so aus wie diese.

Aktuell besteht die Spezifikation aus 21 verschiedenen Dateien, die verbundene Elemente und weitere Spezifikationen umfassen. Das ist ganz schön viel! Hier hast du einen kleinen Sneak Peek in die Kern-Datei von Textboxen:

Hier hat die ganze Spezifikation vor Monaten, sogar Jahren, angefangen!

Nachdem ich mich noch einmal mit Dilan abgestimmt und mein Konzept hier und da angepasst habe, haben wir die Spezifikation für final erklärt und der schwierigste Teil, die Entwicklung, hat begonnen 😎.

Alles, was du mit Textboxen in Noteastic machen kannst

Ich wollte, dass Dilan hier ein paar Sätze schreibt, aber er hat nein gesagt :D.. wir lieben Dilan!

Zumindest kann ich dir eine Liste mit allen Features geben, die Dilan in die Textboxen eingebaut hat. Ich bin noch immer davon beeindruckt, wie viel dieses “einfache” Feature tatsächlich stemmt.

Textformatierung

  • Fett (Strg+B)
  • Kursiv (Strg+I)
  • Eigene Textfarbe pro Zeichen / Auswahl
  • Schriftart (Du kannst über die vier Standard-Schriftarten hinaus manuell weitere hinzufügen. Im nächsten Update bauen wir das direkt in die App ein.)
  • Schriftgröße
  • Textausrichtung: Links / Zentriert / Rechts

Das Beste daran: Du kannst den Text komplett formatieren, ohne die Finger von der Tastatur zu nehmen!

Bearbeitung

  • Rückgängig / Wiederherstellen
  • Kopieren / Ausschneiden / Einfügen von Textabschnitten
  • Kopieren ohne Auswahl kopiert die ganze Zeile
  • Wort rückwärts (Strg+Rücktaste) und vorwärts (Strg+Entf) löschen
  • Wortweise springen (Strg+Links / Strg+Rechts)
  • Zeilenanfang / Zeilenende (Pos1 / Ende)
  • Anfang / Ende der Textbox (Strg+Pos1 / Strg+Ende)
  • Die vertikalen Pfeiltasten behalten die horizontale Spaltenposition über Zeilen hinweg bei

Auswahl

  • Doppelklick wählt das Wort unter dem Cursor aus
  • Dreifachklick wählt die ganze Zeile bzw. den ganzen Absatz aus
  • Vierfaches Tippen wählt alles aus
  • Shift+Klick erweitert die aktuelle Auswahl
  • Auswahl-Griffe für Touch und Stift, mit denen du die Grenzen deiner Auswahl fein einstellen kannst

Kontextmenü

  • Rechtsklick (Maus) oder mehrfaches Tippen (Touch / Stift) öffnet ein Kontextmenü mit Formatierungs- und Zwischenablage-Aktionen. Es platziert sich so, dass es den ausgewählten Text nicht verdeckt

Das Kontextmenü öffnest du mit einem Rechtsklick.

Schwebende Text-Toolbar

  • Die Formatierungsleiste (Schriftart, Größe, Farbe, Fett, Kursiv, Ausrichtung) hängt sich an die aktive Textbox und fällt auf die globalen Standardwerte zurück, sobald nichts fokussiert ist

Ich liebe das Design der Text-Toolbar wirklich! So hübsch und niedlich 😁

UX-Annehmlichkeiten

  • Auto-Scroll hält den Cursor beim Tippen stets sichtbar
  • Der Inhalt rutscht automatisch nach oben, wenn die Bildschirmtastatur angedockt ist, damit die Tastatur den Cursor nicht verdeckt

Und falls du dich fragst: Ja, all diese Kleinigkeiten muss man tatsächlich selbst einbauen. Es ist viel.

Tippen neben deiner Handschrift auf Windows

Wir sind überzeugt davon, dass dieses Feature ein riesiger Productivity-Boost ist. Jetzt kannst du deine Tastatur parallel zu deiner Handschrift verwenden. Außerdem bin ich froh, dir einen netten Einblick in die internen Abläufe der Entwicklung von Noteastic gegeben zu haben. Ich glaube, es ist ersichtlich, dass die Entwicklung einer App wie Noteastic, einer App mit einem klaren Ziel und Use-Case, eine mühsame Angelegenheit ist. Bei jeder Ergänzung und jedem Feature, müssen Tiefe und Breite der Implementierung abgewogen werden, damit wir die Kern-Experience nicht verwässern. Und genau deshalb ist uns dein Feedback so wichtig. Weil wir die App für dich bauen! Wenn wir etwas übersehen oder ein Feature so umsetzen, dass es unpraktisch für dich ist, dann liegt es in deiner Hand, es uns zu sagen und uns in die richtige Richtung zu schubsen! 🧡

Schreib uns an contact@noteastic.app, auf r/Noteastic oder schick uns dein Feedback direkt in der App!

-Lukas
Co-Founder und Geschäftsführer von Noteastic

Zurück zum Blog

Wir verwenden Cookies, um zu verstehen, wie Besucher:innen unsere Website nutzen, und um unsere Werbung auf Google und Reddit zu messen. Hier unsere Datenschutzerklärung.