UI/UX feedback: remaining design issues

[rubenhensen]

Feedback collected from user testing

First-load error

• "File no longer exists" error on first load — the error disappears on refresh. Likely a timing/state issue on initial render. Cannot reproduce yet.

File selection / upload

• Double-click on macOS Finder doesn't select a file — only single-click works when using the native file picker. (Only on chrome?)
• File picker opens twice — clicking "Choose files" and selecting a file triggers the same popup again; the file is only accepted after selecting it a second time. (Only on chrome?)
• Previously sent file reappears — after clicking "send something else" and adding a new file, the file from the previous send appears in the list again (it doesn't count toward the file count, but it is still visible and confusing).

Drag & drop area

• Hover-with-file state needs a design update — the text should make it clear what will happen when the file is dropped.
• Use crosses (×) instead of minus signs (−) to remove files, and add divider lines between files as shown in the design.
• When files are already added, clicking the whole drag area should not open the file picker — only a dedicated button/area should trigger it.

Signing

• Optional attributes cannot be added during the signing step.
• Message textbox is empty during upload — after signing, the message field appears blank while the upload is in progress.
• The QR code module is missing phone animation — after scanning the qr code, the yivi frontend used to show a nice phone animation to indicate that you need to continue on your phone. This animation is missing in the YiviQrCode module.
• "Follow the steps in the Yivi app" label should match the size and weight of the other labels — currently it appears smaller/lighter than the surrounding labels.
• Something is wrong with the QR code when using Yivi on a different device — there is a visual glitch or broken state when switching to the cross-device flow.

Post-send

• Language switches to English after sending — users who started on the Dutch page are redirected to the English page after a successful send.
• Airplane drawing not at the bottom of the screen — the airplane drawing should always be at the bottom of the screen. If the page gets too small in the vertical, is should just make the page scroll.

Buttons

• Don't disable the send button — keep it active and show a validation popup on click instead (as shown in the mobile design).
• Send button spacing/sizing should match the design more closely.
• Primary button font should be bold (e.g. "Kies bestanden").
• Buttons need an active state — the hover animation is nice, but an active state is missing. Suggestion: revert the translation on :active so it feels like a physical press.
• No hover state on recipient cards — it implies the whole card is clickable, which is misleading.

Download flow

• Optional attributes do not show — The confirmation from which person the files are coming from do include the email but not the optional attributes they added. Optional attributes should be added underneath the email using the same chips used in the confirmation screen for optional attributes.
• Extra attributes should wrap, not scroll horizontally — when there are multiple optional attributes, they should wrap onto a new line instead of causing a horizontal scrollbar.
• Download link leads to a 404 — the link in the email results in a "not found" page. Example: https://postguard.staging.yivi.app/download?uuid=9b02cdc0-1ae3-4c30-ba82-130649daf075&recipient=floris%40fmjansen.nl (fix already merged in current branch).

Navigation / theming

• Menu icons do not follow dark mode — the icons in the menu do not switch appearance when dark mode is active.
• Menu has no background — the navigation menu is missing a background colour.

Layout

• Right column is too wide on large screens — a max-width of ~600px is recommended.
• Content overlaps the navigation bar when vertical space is too small — instead of overlapping, the page should scroll vertically.
• Thing move up when changing to dark mode

Accessibility

• Outlines missing on interactive elements — unset: all CSS rules are removing focus outlines. If those rules are necessary, outlines should be explicitly re-enabled for keyboard navigation.
• Use <details> for expandable sections — building collapsibles with <details> gives ARIA attributes for free, instead of having to manually manage them.
• Theme switcher hidden labels — currently hidden in a way that makes them unreachable for screen readers too. Should use the modern clip-path visually-hidden technique instead of display: none or similar. See: The modern approach: clip-path technique.

Validation

• Phone number validation too lenient — short/incomplete numbers like 06123 are accepted. Note: phone number formats vary widely internationally, so a complete solution may be non-trivial. Maybe use https://github.com/google/libphonenumber?

Known / won't fix

• Send button active on short email like w.ensink@c — technically valid per the HTML5 spec (a domain does not require a dot, e.g. localhost), so this is expected browser behaviour.

[rubenhensen]

• Email template conform Figma design

[rubenhensen]

• Optional attributes of sender do not yet show on Download flow

[rubenhensen]

• Optional attributes not showing properly in email template