On user modern “user-friendly” interfaces.
Almost always when I see a “modern” interface, I know it will be annoying to use. These are examples of what not to do if you want to make a useable interface.
- Icons,large font size, and rounded corners do not a user-friendly interface make
- Different devices and screen sizes exist. Not all users use a phone. A UI designed for phones does not work well on computers
- Do not expect the user to know what icons represent. Use labels.
- More reading on the matter of poor user interfaces and incomprehensible icons:
- [https://cadence.moe/blog/2020-06-13-icons-suck](Icons suck - cadence’s weblog (personal blog))
- [https://axesslab.com/icons-ruining-interfaces/](How icons are ruining interfaces)
- The smiling cyclops: [https://datagubbe.se/iconmeaning/](The Meaning of Icons: Cryptic Ideograms and Stylized Squares | datagubbe.se)
- More reading on the matter of poor user interfaces and incomprehensible icons:
- Thou shall not break established UI conventions or re-invent the wheel (unless thou has a very good reason for doing so)
- Many conventions exist on how to structure certain parts of a UI. Breaking these conventions, and creating custom widgets more often than not leads to highly frustrated users. Please stick to them.
- Menu bars allow you to very quickly skim through a lot of options to find the one you are looking for.
- Here are some useful features of a menu bar:
- Before hovering over a top-level menu, you know where the submenus will show up
- It does not take up much screen space
- It is always present at the top
- Here are some useful features of a menu bar:
- Dropdowns can be typed in to quickly find an option
- Text boxes have many widely-used shortcuts
- Text which is not part of a button, menu bar or check-boxes can be selected and copied
- In web pages links can be interacted with in multiple ways. Do not break them.
- Left click - Open the link in the current tab
- Middle click - Open the link in a new tab
- Ctrl-click - Open the link in a new tab
- Right-click -> Open the browser’s menu to show options like “Copy link location” or “Open link in new tab”
- Menu bars allow you to very quickly skim through a lot of options to find the one you are looking for.
- Thou shall clearly indicate which UI item is currently focused
- I should hope this one is self-explanatory
- Thou shall not hide information unless it makes sense
- Do not create hamburger/caterpillar/snowman menus which house a single item
- Only hide text under “Show more” sections if the text which is hidden takes up at least as much space as the rest of the paragraph.
Not-so-well-designed UIs
A few examples of confusing user-interfaces and ideas on what to do better
UI elements/patterns I would like to see more in programs: * Use menu bars * Enable searching through all the menu bar options like it is possible to do on MacOS. * Enable searching through settings of an app.
