Please Follow UI Conventions

Credit: Pixabay

Most website visitors haven’t been to your site before.

Unless you’re one of the giants or building an internal web app, most of your visitors are on your site for their first time — or at least, the first time in a while. How they use your site is going to be based on assumptions about how other websites work. For more on that, try Krug.

With that in mind, please follow website conventions. If there’s a good reason to break a convention, go for it — but don’t just break with conventions for no reason. Here’s some common examples to watch for that are a bit more in the nitty gritty than the typical “color has meaning”, “add more whitespace”, and “have clear CTAs” tips.

Icons

• Dropdown arrows or chevrons should point in the direction they’re going to open — typically down. They should point that same direction regardless of whether they’re open or closed, because they’re showing where the associated content is or will be.
• Before an accordion is open, you can show a ‘+’ icon. When it’s open, you can change it to a ‘–’ icon.
• Tree menus can use ‘+’ and ‘–’ or a rightward arrow for closed and a downward arrow for open.
• Think carefully before repurposing a commonly recognized icon or using a new icon for a common thing: ⋯ More, ⋮ Settings, ☰ Menu, 💾 Save, ▶ Play, 🔔 Notifications or Alerts, Flags/Globes for language, × Close, etc.

Depth

• Your page should have a consistent depth. Generally, confirmations are closest, then modals, cookie banners, floating action buttons, then sticky navs. Within the main flow, depth is relative; a button is just as high above the page itself as it is above a card that’s on top of the page.
• Hovering over an item should never move it away from the user. It shouldn’t zoom out, fade out, or get pushed to the back.

Buttons & Links

• Keep buttons and navigation in consistent locations between pages.
• In general, put back buttons on the left and next buttons on the right.
• Padding on links should always be clickable. Think of it this way: if it’s clear what the user would be trying to do if they clicked there, make it work.
• In button groups, navigation bars, etc., don’t leave unclickable gaps between adjacent items if there isn’t visual justification (like an actual gap.)

Mobile

• Keep fonts at 14px at the smallest, preferably 16px. On mobile, the range of font sizes should compress, not all uniformly scale down.
• Try to keep touch targets no smaller than a sixth of the width of the display (in portrait mode.) Android only does five icons across on home screens; iOS does four. Both iOS and Google guidelines put the minimum recommendation around a sixth of the portrait width square.

Motion

• Keep motion fast. People are here to use the site, not watch the site animations.
• Animation durations should correspond to the significance of what’s moving. Generally, larger things (overlays, modals) should animate slower than dropdowns. Micro animations on things like button hovers should be fastest of all.