Abby Covert’s heuristics

These 10 principles were developed after doing a broad survey of academic work in both the human centered design and information science fields of studies. They are made for people who don’t have time and/or appetite to do that kind of broad survey, but want that kind of collective wisdom to apply to their work. 

• Findable: Able to be located
• Accessible: Easily approached and/or entered
• Clear: Easily Perceptible
• Communicative: Talkative, informing, timely
• Useful: Capable of producing the desired or intended result
• Credible: Worthy of confidence, reliable
• Controllable: Able to adjust to a requirement
• Valuable: Of great use, service and importance
• Learnable: To fix in the mind, in the memory
• Delightful: Greatly pleasing

Abby Covert

How To Design Better Address Form UX

🤔 Not all addresses have a street, house, province or ZIP.
✅ In North America, streets are defined by alpha-numeric grid,
✅ In Middle East, addresses focus on blocks of buildings.
✅ In East Asia, addresses refer to administrative areas.
✅ Western addresses go from street to country.
✅ Eastern addresses go from country to street.

🤔 Not all locales have states, provinces, counties, ZIP code.
🤔 And if they do, they might never include them in addresses.
✅ “Country/Region” is more universal than just “Country”.
✅ “ZIP/Postal code” is more universal than “ZIP” or “Postal code”.
✅ Canada has provinces, US/Mexico have states, UK has counties.
✅ US has ZIP code, Canada has Postal code, UK has Postcode.
✅ If possible, change address form based on selected country.

🚫 Don’t use address autocomplete for global audience.
✅ But it works well if you target users from a specific country.
🤔 Users often struggle with “Address Line 2”, and what it means.
✅ Hide “Address Line 2” behind a link to avoid confusion.
✅ If you do use geolocation, pre-fill only the country, not the rest.
✅ Always allow users to override validation rules.

As Virginia Start writes, you can certainly create an experience that is good enough and will work for people around the world, but it won’t necessarily feel like it’s meant for them. In fact, an address form is a very tangible way to communicate who is included and who is excluded.

People whose addresses don’t pass the validator aren’t outliers. They are real people with real addresses that are blocked by our interfaces. Perhaps the validator is too restrictive, or the building is new, or the address has changed, or we don’t support copy-paste.

No validation is 100% bulletproof, so always give people a way out. Validation is useful, but allow users to override it if they believe that they are right. Your managers might be very surprised about the gains a business would get from doing so.

Useful resources:

Form Internationalization Techniques, by Andrew Coyle
https://lnkd.in/e9UrFXD4

How Etsy Localizes Addresses, by Danielle Grenier
https://lnkd.in/e4-Dm4eT

Designing Address Forms For Everyone, Everywhere (Medium paywall), by Virginia Start
https://lnkd.in/eiVR4F4c

Best Practices For Address Form Design, by Tiina Golub
https://lnkd.in/e883GANW

Getting ‘Address Line 2’ Right, by Baymard Institute
https://lnkd.in/eXMtD7Z5

Universal Postal Union Address Database
https://lnkd.in/evHsY6CB

Address Form Technical Best Practices, by Sam Dutton
https://lnkd.in/ehU9-9UX

Vitaly Friedman on LinkedIn

Aesthetic-Usability effect

Users often perceive aesthetically pleasing design as design that’s more usable.

1. An aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better.
2. People are more tolerant of minor usability issues when the design of a product or service is aesthetically pleasing.
3. Visually pleasing design can mask usability problems and prevent issues from being discovered during usability testing.

The aesthetic-usability effect was first studied in the field of human–computer interaction in 1995. Researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested 26 variations of an ATM UI, asking the 252 study participants to rate each design on ease of use, as well as aesthetic appeal. They found a stronger correlation between the participants’ ratings of aesthetic appeal and perceived ease of use than the correlation between their ratings of aesthetic appeal and actual ease of use. Kurosu and Kashimura concluded that users are strongly influenced by the aesthetics of any given interface, even when they try to evaluate the underlying functionality of the system.

https://lawsofux.com/aesthetic-usability-effect/

New Usability Heursitics

<Google translation from Danish>

9 overall principles of usability can help ensure that users can complete their errands on websites in an effortless and satisfactory manner. The 9 principles are:

• Simplicity
• Consistency
• Detectability
• Structure
• Clarity
• Control
• Usage signaling
• Tolerance
• Ergonomics

Simplicity

As simple as possible. Not overwhelming. No superfluous action steps.

Only what is needed
Redundant elements make a user interface unnecessarily cumbersome to overlook and increase the risk of errors. Items that do not support a mission or purpose should therefore be eliminated (not just hidden).

Limited number of options
Many choices mean that it takes longer to choose between them ( Hick’s law ), and sometimes it completely prevents users from making a choice ( Paradox of choice ).

Easy interaction
Interaction with unnecessary action steps increases time consumption and the risk of errors.

Default settings
Good default settings ( defaults ) simplify interaction.

Consistency

Uniform and recognizable presentation and interaction. Corresponds to users’ expectations.

User expectations
The user interface and system responses must be consistent with users’ expectations. Users have a mental model of how a website works, even before they get into it. Mental models are shaped i.a. of users’ experiences with other websites.

Internal consistency
Uniform elements and features should be presented and work in a consistent manner on the same website.

External consistency
The user interface should be designed in accordance with conventions. It makes it easier to learn how to use a website for new users.

Consistency over time
Drastic redesign makes use difficult for returning users, while ongoing minor changes better ensure consistency over time.

Detectability

Visible elements, not hidden. Designed and positioned so that they are easy to spot.

Visibility
Graphical user interfaces ( GUI ) are based on visibility. If items are hidden, users should either look for them or remember their location. It is easier to recognize elements than to remember them.

Focus
The location of items can make them difficult to spot. This may be because an element is located on the periphery of users ‘field of view – or another element that acts as an equally good bid attracts users’ attention. Although items are not hidden, they can be difficult to detect.

Prominence
Size, clarity and highlighting affect whether users notice an item.

Scroll-supporting design
Large images, boxes, horizontal lines and white air can give users an experience of having reached the bottom of a web page ( illusion of completeness ) and thus stop them from scrolling on to elements further down the page.

Structure

Division, categorization and grouping according to users’ needs and logic. Natural order.

Division
The feeling of overwhelm can be minimized by splitting when simplicity cannot be achieved by removing elements.

Categorization
Lack of categorization, as well as a categorization that seems illogical, complicates navigation.

Grouping
Items that belong together should be grouped.

Order
Logical ordering of items in an overview makes it faster for users to find what they are looking for.

Meta data
Taxonomies, keywords, and other forms of meta-data can help users locate large amounts of information when searching.

Clarity

Understandable, accurate and unambiguous communication. Clearly several elements. Clear context.

Comprehensibility
Text, links, labels and menu items create confusion if they are incomprehensible, inaccurate, ambiguous or too general.

Separation
The difference between several similar elements can be difficult for users to understand, even if words and descriptions in isolation are clear. Comparison and selection presuppose that the difference in elements is clearly described.

Information available
Incomplete or missing information – including missing help texts and missing feedback – gives ambiguity.

Context
Context can affect understanding and clarity. The combination of texts, images, menu items, etc. may result in a different decoding than if the elements were presented individually. The same concept can have different meanings for different user groups.

‘Aboutness’
Website navigation, texts, images, etc. must together make it clear what a website or a web page is about.

Visual clarity
Visual language can also be clear or obscure. Icons, images and highlights can be more or less self-explanatory. (Clarity can also relate to other senses).

Control

The user and not the system controls. Appropriate pace. Actions can be undone.

User management
The experience of having control is the prerequisite for users to feel that it is nice to use a system. Automatically changing elements can be distracting.

Appropriate pace
The pace of interaction must be controllable by users. There is not one pace that suits all users.

Cancellation
Undo options should be available when users make mistakes or change their minds.

Signal for usage signal

Usage signaling
Instructions for use. Interactive elements signal how to use them.

Self-explanation
Interactive elements should be as self-explanatory and intuitive to use as possible. It should not be necessary to read instructions to see how basic functions are used.

Signaling of interactivity
Interactive elements should be designed so that they clearly signal how they are used. Are they clickable, can they slide , can you enter anything?

No misleading signaling of interactivity
Elements that are not interactive should not signal that they are. Users must be able to clearly distinguish interactive elements from non-interactive ones.

Tolerance

Sensible interpretation of users’ entries, clicks and presses. Small mistakes are ignored.

Interpretation
The system allows variations in user input and interprets what users are trying to achieve in a sensible way.

Error handling
Insignificant errors by users are ignored by the system.

Extended clickable areas
Click and click tolerance can be achieved by extending the clickable area of ​​an element.

Ergonomics

Physically easy to use. Challenges and does not exceed motor and sensory abilities.

Effortless interaction
Interaction should be adapted to human physics. A user interface that forces users to physically awkward and cumbersome actions increases the risk of errors and negatively affects users’ pace and satisfaction.

Size
Items should be large enough to be easy to hit.

Proximity
Elements to be used in extension of each other should stand close to each other so that users do not have to make unnecessarily large movements.

Visual ergonomics
Ergonomics can also be about visual conditions: good contrasts and sufficiently large size of text and other elements.

 

/// Background

The 9 principles for webusability have been identified by analyzing 299 usability problems on Danish websites. The usability tests include websites from both the public and private sectors, intranets, mobile websites and prototypes and were conducted between 2012 and 2015.

Heuristics have been used in the design of user interfaces since the 1990s. Older heuristics sets are still inspiring to read, but they are designed based on usability issues in software. Phenomena such as feedback and error handling therefore take up a lot of space.

On websites, navigation, content and visual design play a bigger role than in software. The 9 principles of webusability make it easier to categorize issues related to these matters.

Feedback, error messages and help texts are described in many heuristic sets with independent principles. In our system, these components are just objects for evaluation just like a website’s navigation, content and functions. An error message can, for example, be visible, clear, simple, etcusa

http://www.copenux.dk/heuristikker

Usability problem scoring

from: https://www.userfocus.co.uk/articles/prioritise.html

Parallax scrolling

“In the age-old debate between beauty and function, parallax scrolling wins the beauty pageant, but fails miserably in terms of function.”

Parallax Scrolling: Attention Getter or Headache? by Jacqueline Kyo Thomas

Lightbox overlay

Don’t use an overlay unless you have a clear, compelling case for why this content should not be presented within a regular page. Good reasons for using an overlay could include:

• The user is about to take an action that has serious consequences and is difficult to reverse.
• It’s essential to collect a small amount of information before letting users proceed to the next step in a process.
• The content in the overlay is urgent, and users are more likely to notice it in an overlay.

Kathryn Whitenton in https://www.nngroup.com/articles/overuse-of-overlays/

Cognitive Load

The total cognitive load, or amount of mental processing power needed to use your site, affects how easily users find content and complete tasks.

KATHRYN WHITENTON: http://www.nngroup.com/articles/minimize-cognitive-load/

Usability metrics

A website’s usability is determined by the following factors:

• Efficiency: the speed that users can complete their tasks
• Effectiveness: the completeness and accuracy with which users achieve their goals
• Engagement: how satisfied the user is with their experience

ISO 9241

Nielsen: 10 most general principles for interaction design

1. Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
5. Error prevention
   Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
6. Recognition rather than recall Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
7. Flexibility and efficiency of use Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.