UI Design Heuristics

Heuristic, is any approach to problem solving or self-discovery that employs a practical method, not guaranteed to be optimal, perfect, logical, or rational, but instead sufficient for reaching an immediate goal.

Heuristics is the study and use of heuristic techniques.

Visibility of System Status
- This principle states that the user should know what’s going on inside the system. The user needs feedback on their action within a reasonable time. This feedback is normally associated with points of action and can be provided using a color change, loader, time-left graphics, etc.
Match Between System and the Real World
- It’s important for the application to speak the language of the target user base.
User Control and Freedom
- This principle talks about giving the user the freedom to navigate and perform actions. The freedom to undo any accidental actions.
Consistency and Standards
- Consistency is the key.
Error Prevention
- Check for errors the user may encounter while entering data into forms.
Recognition Rather than Recall
- It’s always better to suggest the user a set of options than to let him remember and type the whole thing. The goal is to minimize the application of user memory.
Flexibility and Efficiency of Use
- The Interface should be flexible transforming itself between a novice user and an advanced user.
Aesthetic and Minimalist Design
- Prioritization comes to play when this aspect is being considered. For the designer or the developer, all the information that’s being presented on the page is relevant. Interfaces need to be cleared of unnecessary elements and content that do not support the page goals and tasks.
Help Users Recognize, Diagnose, and Recover from Errors
- A check needs to be made if those errors are being explained to the user in understandable language. A check needs to be done if exception handling is done across the application so that relevant messages can be shown to the user.
Help and Documentation
- If there is any user who could not make it out, adequate help should be provided within the product.

Scannable Web Interface

Scannability is the way to present the content and navigation elements as the layout that can be scanned easily.

How to check If a Webpage is Scannable:

Does what you see in the first couple of minutes correspond to what target audience expects from this page?
Can you understand what kind of information is on the page for the first minute or two?

Well-Scanned Pages Become More Efficient in the Following Aspects:

Users complete their tasks and achieve their goals quicker
Users make fewer mistakes in the search of content they need
Users understand the structure and navigation of the website faster
The bounce rate is reduced
The level of retaining users gets higher
The website looks and feels more credible
The SEO rates are affected positively

User Interface Design patterns

User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

Imagery & Icons

Rules for choosing and using imagery

Make sure it serves a purpose.
Focus on people (not things).
Limit large images above the fold.
Don't let your images look like banner ads.
Don't forget the power of illustration.

Benefits to Using Icons in UI Design

Good targets for the finger/thumb in mobile design
Helpful when needing to save space.
Can be easy to recognize and are usually mindful of cultural differences
Helps guide users intuitively through a workflow without relying on too much copy

Icon Tips

Keep the icon design simple.
Use the 5-second rule. If it takes you more than 5 seconds to think of an appropriate icon, it's unlikely an effective icon.
Test the icons for recognizably.
Test the icons for memorability.

Banner Blindness

A long-known web user behavior: it describes people's tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads. Banner blindness is an instance of selective attention that directs their attention only to a subset of the stimuli in the environment, such as their goals.

Legitimate content elements that have certain ad-like characteristics are ignored. Traits that signal an ad: - Ad-specific placement, like the top of page or the right rail - Because desktop ads typically appear at the top of the page or in the right rail, web users sometimes ignore the content placed there. - Ad-like visual treatment, such as animation - The promotion looked different from the text and the photography on the site. - Proximity to actual ads or promotions - Content placed in the same part of the screen as an advertisement is often considered to be an ad and is also ignored. - The Gestalt Law of Proximity: items that are close to each other are assumed to be part of a group and thus related in function.

Hot Potato

The hot-potato scanning pattern occurs when users gaze at an item in which they are not interested, then look away and avoid fixating on that area on that page, and sometimes on other pages on the website, and even on completely different websites.

Inline Ads on Mobile

Inline ads on mobile are hard to avoid for multiple reasons: - There is less information visible at a time, so it's harder to identify elements that look different from the main content. - A mobile inline ad is so large in proportion to the screen size that users cannot avert their eyes from it as they swipe down.

Faux Ads: Easy to Mistake Visual Elements for Ads on Mobile

Anything that stands out from immediate surrounding context is likely to be considered an ad, although its presentation may be consistent with other elements on the page that are not visible at the time. So people can sometimes mistakenly assume that big images, graphics, or other elements that stand out are ads.

How to Prevent Ads from Poisoning Your Content

Do not make content look like ads. Choose colors, type, background, and overall content style carefully. You may think that making it look different from the rest of the site will increase its salience, but it often has the opposite effect.
Run usability tests to make sure that users actually see important content placed in the top banner or right rail.
Do not mix content and ads in the same visual section.

Dark Patterns

Dark Patterns are deceptive design patterns to get users to persuade or dissuade customers that benefit the brand rather than the user.

Privacy Zuckering

Intentionally hiding information from user by using unclear labels, burry things in complicated navigation, or produce untimely message.

Bait and Switch

When the user sets out to do something, but during the process something else happens.

Confirmshaming

The act of guilting the user into opting into something. The option to decline is worded in a way as to shame the user into compliance.

Disguised Ads

Advertising is disguised as other kind of content.

Forced Continuity

Happens when your free trial of something ends and your credit card silently starts getting charged without any warning. This is often used in conjunction with Roach Motel, another pattern where it is very easy to get into a subscription but impossible to get out.

Sneak into Basket

When purchasing something and somewhere during the process the site sneaks an additional item into your basket. This is also known as negative option billing and inertia selling.

Ethical Design

Design with the intent to do good and the UX in mind.

Surveillance Capitalism

Data-driven design used with monetary intent. Its unethical because it takes advantage of user data to profile people and understand their behavior with the sole purpose of making money.

Ethical Design Best Practices

Use data to improve the UX
Put the user first
Don't ask for more than you need

Wiki

DevFecta Public Repository / UI-UX