Some suggestions to increase usability

[pixtur]

Hi Johan,

TL;DR

Overall BirdFont's usability is very good, but its cool features are hidden behind some irritating glitches that should be easy to fix. I believe BirdFont is extremely cool and has huge potential (otherwise I wouldn't have invested the time writing this). I sketched a design proposal to illustrate my suggestions.

Preface

I just started to fiddle around with BirdFont. I have some prior experience with GlyphMini and typography. I'm also working on an open source project, so I don't expect things to be perfect.

I bought a license for 10$.

As I tried to find my way through the user interface I found a bunch of glitches and some unexpected UX decisions that kept me off track. I'm still learning the software so all my suggestions should be taken with a not just a grain of salt.

Screen capture

I made a screen recording during my first hour of experimenting: https://youtu.be/u8zK3-u7iTo .
When describing the issues further down, I will try to link to various times of that screen capture.

Main issues

• My biggest issue is how to stop drawing a line. Normal conventions in Windows and Mac applications would be right mouse button (which is already being assigned). Double clicking appears to add multiple points on top of each other (causing problems later ). I recommend adding Escape or Return as a keyboard short to complete lines.
• Inserting points on curves appears to be broken, because double clicking invokes a variable font warning.
• Sometime the mouse does not respond (esp. when dealing with the zoom sliders). This happened 5-10 times during my 2 hours testing. This might be an issue of the Windows version. Switching between various tools and views normally restores the mouse state, but it's definitely broken.
• Hiding the icons with the current value setting on hover (e.g. Stroke width, scale, etc.) is extremely awkward, esp. when learning the software. This also requires the value input field to be disconnected from the edited property. I strongly recommend to combine input and icon (see design proposal).
• I believe one of the weakest area in BirdFont is selection handling, which is cause by the following issues:
  • missing hover states (e.g. Curve points, curves, objects)
  • missing or misleading selection indication (e.g. selected points, selected shapes, etc)(e.g. https://youtu.be/u8zK3-u7iTo?t=731).
  • no consistent use of selection color (e.g. orange). This makes it very hard to distinguish selection and selection tools from content.
  • missing cursor states (e.g. custom mouse pointers for the different operators like append, stretch, etc.) Aligning with standard industry apps like Illustrator on Figma would greatly improve the user experience for new users).
• Curve selection-handles are difficult to distinguish by color. I recommend also using the size (e.g. curve points larger than control points) and using outline for selection. (see redesign proposal linked below).
• Editing curves should always be rendered on top of shapes. Otherwise control points might no longer be accessible.
• Tooltips are essential in BirdFont but very hard to read because of their typography and the pointer overlapping them. They also vanish as soon as mouse leaves the icon.
• I recommend adding a help area section at the bottom of the sidebar and showing help for the currently active tool or the hovered icon (without delay). (check Ableton Live). See design proposal below.
• Since the tooltips are essential, their wording and formatting feels kind of awkward, like the "(b)" for the Bezier-curve tool hotkey. I recommend investing a couple of minutes to improve the wording of all tooltips. What does "eadjust handles for extrema" mean? Be consistent with "How/What" (e.g. "Double click -0 add new points..." vs. "select point - Ctrl+Arrow" (What does this mean?))
• I also recommend using a consistent text style for pointing out hotkeys. I recommend (S) (I.e. uppercase with brackets)
• The (C) icon to apply a curve style is not really intuitive. This might be a problem of the icon. I recommend highlighting the icon after 2,3, 2x2 was clicked to make this more affordable. Also move the Tie Icon onto the next line.
• I would rearrange the drawing tools to group add/edit and view/navigation tools (see design proposal)
  • Bezier, Move Points, Add, Draw
  • Scale, Move
  • Pan, Zoom, Background Image
• Margins and grid lines look blurry (probably because they are drawn precisely between two pixels and thus are 2px wide). This leaves a slightly imprecise impression.
• I personally find that some of the icons (e.g. Add New points, Convert selected points, Edit Variable Master) could be improved regarding style and readability.
• I believe that aligning UI-elements likes buttons, borders and icons to precise pixels could greatly improve the visual appearance of BirdFont. This might be a UI scaling issue, but it makes the software look unprofessional.
• I personally find it strange, that glyph-views don't share the same settings for margin visibly and current zoom.

Issues and bugs

• Stroke-Width value is not correctly shown when points are selected with fence.
• Stroke-Width says zero instead of current width that will be used for next stroke.
• Edit-Cut does not remove the original content.
• Dragging the scale width handle does not update the design unless the mouse is moved vertically.

Feature requests:

• Rendering is fast, but FontBird doesn't make use of that: I would implement panning with middle mouse button and zooming with some kind of hotkey (e.g. ALT+MMB).
• Support multi-select in on Overview.
• Implement renaming layers.

Design proposal

I got carried away and spent some time redesigning the sidebar layout with in Figma:

• I build pixel aligned icons
• aligned some UI elements
• annotated some issues

[johanmattssonm]

Many thanks for taking the time to report this. It looks like I have some work to do.

[pixtur]

I spent a couple of hours to complete my first line font. The tool is amazing! Thanks a lot for your work.

I found a couple of other issues and questions. Let me know, if you want to get more bug reports.

[johanmattssonm]

Your feedback so far was excellent. Please let me know if I need to fix other things. Maybe a followup would be good but I will probably begin with this github issue.

[johanmattssonm]

Questions are of course also welcome.

[pixtur]

Awesome. I will probably create new issues then.

[johanmattssonm]

About the copyright. Can I use your design in all versions of Birdfont (commercial, plus, free and open source)?

[pixtur]

Of course! I'm sorry, if this wasn't obvious. You can also grab and (re)use icons from Figma, if you like them. Although they're still very rough. If you need a pixel aligned icon-set, I could help you with that.

[johanmattssonm]

I will use the icons. They are far better than anything I can come up with.

[johanmattssonm]

Thank you for the contribution.

[Windsurfer01]

I am just starting with BirdFont, after a year of intensive work with FontForge. I am still learning the interface, but the comments and interface suggestions from Pixtur are very good.

[Windsurfer01]

You are doing such a wonderful job that I feel bad about saying anything. I also appreciate how much time even simple changes can take.
Having a different shape for handles and points would be helpful. Colour blindness affects about 12% of males. They often need to differentiate by the grey level of a colour. So two distinct colours with the same shade on the grey scale will look the same to them.
Diamonds, triangles pointing up, triangles pointing down, and squares could all be used. Perhaps different coloured (shaded) handles on each side of a point.

[johanmattssonm]

Don't feel bad this is excellent advice. I will spend some time this gigantic bug reports. Many thanks to all off you.

[johanmattssonm]

I made this report into the road map for version 6. Here is the document:
https://docs.google.com/document/d/1t1p2gyGYNsHkyO21mnSwXj0i542WiBdn0TAvlWrK8Us/edit?usp=sharing

[Windsurfer01]

Thanks Johan, that is a good target that will bring useful improvements. As I gain experience, I will comment on anything I notice. For version 7, I suggest: 1) that handles are snapped to the nodes when they get very close, 2) the ability to add more guidelines when creating variable fonts, so that weight and perhaps x height can be created consistently, would be useful, 3) the ability to use references to the main characters A, B, C etc for the accented characters would mean that a change in the main character was automatically sown elsewhere. This would also facilitate auto creating accented glyphs such as capital A Acute, etc from the basic A plus the Combining Acute and would be a huge productivity boost.

[johanmattssonm]

Thank you

1. snap sounds good but the default will be not to snap
2. I did add custom guides some time ago but I found a bug when I tested this right now. I will fix the bug.
3. Try anchors (Shift+A)

[johanmattssonm]

typo, shift not ctrl.

[johanmattssonm]

Birdfont 5.9 is out and it has fixes for a few things mentioned here. Many more is to come in version 6. For example https://birdfont.org/doku/doku.php/guides

[johanmattssonm]

Many but not all of these things have been fixed in 6.0, it has been released and I added your name to the authors page. Many thanks for the design.

[Windsurfer01]

Johan, that is very kind of you, but not necessary. I looked quickly through the code folder, and can see how many years of work you have put into it. Sent from my phone - Mike Sapsard

…

On Sun, 11 Feb 2024, 19:12 Johan Mattsson, ***@***.***> wrote: Many but not all of these things have been fixed in 6.0, it has been release and I added your name to the authors page. Many thanks for the design. — Reply to this email directly, view it on GitHub <#143 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5NEXOQ2NYIFQT64V22BPTYTEJZLAVCNFSM6AAAAAATOI7JYSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZXHA2DEMBUG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>