UX review checklist for beta

[dchen]

This is a collection of issues discovered while walking through the user experience in preparation for a beta release. It will be updated as more issues are encountered.

Interface

• Edit Path button has a focus state, which is unusual. For example, select a shape and then click and drag off of the Edit Path button. It will have a purple outline. Is this intended for accessibility/keyboard navigation? I notice this is present on buttons in the right bar where it helps with toggling using the keyboard.
• Clipboard shortcuts
• Focus state doesn't follow the item when re-ordering a border. For example, click on the one of the position buttons of a border to give it the focus. Then drag that border to move it above or below another border. The focus state stayed in position and is now around the border item in this position, rather than following the item dragged as expected.
• When dragging in an unsupported file, sometimes the identified file type is an empty string, making the error message look faulty. For example if you drag in a Windows application shortcut, it says "Files of type aren't supported"
• Support scrolling in "insert" menu #282
• When editing a text layer, the blinking cursor bar is white. This means that it's not visible when editing a text layer over a white background, which makes it hard to tell where you're typing and if the text layer is editable at all.
  • We now ensure a minimum contrast ratio against the canvas background or artboard background. If there's a non-artboard layer behind a text layer, we don't look at the fill color of that yet
• Line layers, when selected, do not show any handles that indicate that it is selected or editable.
• In addition to being able to shift-click to select a range of layers, it would nice to be able to ctrl-click to select multiple layers that are not sequential.
• If you have multiple layers selected in the layer list, then right click to Group them, the right clicking action deselects all layers except the one under the mouse event.
• Menu and Insert buttons don't have an active state to give feedback that it has been clicked, which makes it feel less responsive.
• Layers in the layer list don't have an active state to give feedback that it has been clicked, which makes it feel less responsive.
• You can't toggle the lock layer or layer visibility icon off then on then off. After one cycle, the icon disappears unless you move cursor away and back.
• Keyboard shortcuts are missing or not labeled. There do seem to be some keyboard shortcuts, such as for zooming in and out, but these are not listed anywhere.
• Right clicking in certain areas, such as the layer list and menu bar brings up the browser context menu, which is inconsistent as in other areas, it brings up the Noya context menu.
• Plus button for Fills, Borders, etc. does not give any interaction feedback.
• Selecting multiple layers by dragging a selection over them in the layer list would be convenient.
  • We're now selecting on mouse down to make the UI seem snappier, so drag-to-select would conflict
• The Insert > Line icon is the same as Insert > Vector.
• Dragging the Pages heading gives feedback like it can be dragged and reordered though it has nowhere to go.
• There is no quick way to collapse all or expand all groups in the layer list.
• alt-click to expand/collapse recursively, but this isn't labeled anywhere, but perhaps that's fine since it's not a basic function that needs to be labeled in the UI?
  • I think it's OK for now
• When zooming in and out, there is no clear indicator of your current zoom level.
• There is no UI to zoom in or out or to reset the zoom level.

General Experience

• Sometimes when dragging around a layer, the X or Y coordinate will be placed on a half pixel (x.5), which is usually not what I want. I assume it might be because it's snapping to the center of a position of another shape that has an odd number dimension, and then subsequently increments based on that number?
• It is unclear what background blur does or if it is functioning. For example, I can draw a red rectangle, and then a gray rectangle over it. If I add gaussian blur to the gray rectangle, it does what I expect. If I add background blur to the gray rectangle, nothing happens. I would've thought some of the background (the red rectangle) would be visible through it but blurry. However then I realize I have to lower the opacity of the layer, then it does what I expect, but this is confusing - is background blur useful without changing the opacity?
  • We're currently matching the Sketch rendering behavior here. It's a bit confusing though, so maybe we'll revisit at some point
• When duplicating layers, the new layers are placed in the exact same position, which may make it visually unclear that the layers have been duplicated.
  • I moved this to v2 Milestone 2: TBD #218. The current behavior is the default in Sketch and Figma, but this could be a good preference
• Resizing an artboard does not snap to the size of a layer. Sometimes it's handy to resize an artboard to fit something inside it.

Bugs

• Bug: Converting an artboard to a symbol makes it invisible #248

Missing/Non-Functioning Functionality

• Specifying colors as values other than hex, such as RGBA.
• Locking a layer does not function, or its functionality is unclear.
• Styling selected text within a text layer. For example, bolding a phrase within a paragraph is very difficult.
• Filtering using the Filter layers field doesn't seem to do anything.

Accessibility

• Lock layer and layer visibility icons do not have alt text.
• Plus button for Fills, Borders, etc. does not have alt text.