UI design can be a tricky subject, with many things to consider. To simplify the task, I’ve prepared some highly practical tips on what you should and what you shouldn’t do when designing your next app/website.
Cut the clutter 💡
- Less is more, strive for minimalism.
- Clutter is terrible on a desktop, but it’s worst on mobile devices where users have limited screen space.
- Every screen should focus on single primary action, with no more than one call to action.
User friendly language 😊
- Make use of an empathetic language
- Content should keep users engaged and not confuse them.
- for eg: If you are building a online shopping website/app saying, “only 2 left” makes more impact on users buying inclination than saying, “In stock: 2”
Let there be “s p a c e” 🔡
- To separate or to group content together we must make appropriate use of white space.
- Adding extra separators in form of lines, becomes unnecessary overhead
- Optimal use of white space makes your design look more airy & clean
- Use of long sentences / paragraphs takes a toll on readability.
- A good UX/UI should alway break content into bullet points / small chunks. This will make it less likely for information to be left unconsumed by the end user.
KISS 💋
- KISS — Keep It Simple Silly!
- Ask only what you really need to know — Small forms w/o any unnecessary fields.
- When possible, present choices instead of input fields because it’s easier to choose from a list of predefined options than to type a response.
- Another example would be use of process bar that breaks a longer form into smaller steps and appropriately displays steps completed till now and steps to be completed to finish the process in easy to understand format.
Unidirectional alignment 📝
- Horizontal alignment in one direction enhances readability.
- Good alignment on a screen makes it easier for the eyes to scan through information.
- Zigzag alignment looks unprofessional & hard to follow.
- for eg: when building form, labels & input fields should be one below the other instead of being next to each other.
Don’t skip icons ♒️
- Use of icons / animations with a menu item or button helps build a connection with content more easier
- It makes screen look rational, rich and instantly catches eyes
- Gear image with settings link or cross icon with close button are some of the popular examples of how icons help in conveying an action.
Let Socialise 👋
- When trying to make users login/signup to your platform, put all social media options first
- This will avoid extra time consumption and cognitive load in filling up forms
- Using social media first increases CTR.
Don’t break the link ⛓
- Use a single column for displaying any content
- Simple crisp placement of information in only one column, make it easy to read and understand.
- On smaller mobile screen viewing and understanding multiple columns information is not possible, whereas single column layout is easy to interpret.
Colour possess language without words 🌈
- Colours are an integral part of design.
- For eg: Red colour symbolises alert, warning or an irreversible action like delete.
- Do not deviate too much from core colour scheme or industry standards for certain actions
Seemless Selection/Navigation 👆
- Selected/Clicked menu item should be clearly depicted in unique styling & colour, should not have with different versions .
- Minimal number of colours with clear action makes user feel good.
- Navigation should feel familiar. Use navigation patterns that are familiar to your target audience so that the navigation doesn’t require any explanation.
- Navigation shouldn’t draw focus away from the content.
Keep the above tips in mind as you’re designing your next screen and you will be able to build a experience that users would absolutely love using.
Read the full article here
