Be consistent

[iheni]

Be Consistent

Strapline

Be consistent with conventions and with their application throughout your interface.

Description

Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.

Examples

• Consistent design patterns - use consistent web and platform design patterns to help build familiarity and understanding.
• Consistent editorial - Use consistent editorial across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on. Keeping editorial style consistent in general is also important e.g. making sure the top of the article always has a clearly marked summary paragraph, making sure bullets always start with a bolded definition. [updated from #26]
• Consistent page architecture - use consistent page architecture across templates to help people scan and navigate key content.

Examples not included

• Use a consistent structure across pages
• Ensure elements with the same functionality are consistent across the product
• Use consistent typography, colors, iconography, shapes and focus indicators.

[Heydon]

@iheni I believe consistency and conventionality should be different principles. One can be consistent without being conventional and vice versa.

So "Use standard rather than custom components where possible" and "Do not apply non standard gestures or keyboard behavior to standard components" should be moved to Respect conventions or perhaps Embrace conventions.

?

[iheni]

Consistency and convention are two that overlap so it would be good to try and define these more. My only concern is that designers might bristle at the word 'convention'.

Add Respect/Embrace convention (undecided as to which) for now with a break down of examples and when we go through them all we can work out the final definitions.

[Heydon]

@iheni Great. For me, consistency is about doing the same things in the same ways. So, I could employ an unconventional design pattern, but then use it consistently within the app (whenever whatever it does is called for, it is provided in the same way).

[iheni]

I updated the examples.

[Heydon]

Be Consistent

Strapline

Offer the same information, functionality, and behavior in the same way throughout your interface.

Description

Form should follow function. Where form diverges between separate instances of the same functionality, an unnecessary burden on cognition is introduced. Maintain a pattern library where each reusable design pattern solves a discrete problem.

[iheni]

One thing to keep in mind is that while we want consistency throughout your interface you also want consistency across platforms. For example if you have we website, native iOS and Android apps you should aim for consistent editorial for buttons, or consistent content order for player controls on a media player. So for the strapline maybe:

Offer the same information, functionality, and behavior in the same way throughout your product.

I know I am being picky but in the back of my head I am always trying to simplify the sentences. To that end could we maybe use 'differs' rather than diverges in the description?

[IanPouncey]

Examples

Change:

Ensure consistency with existing design patterns across the web and platform design patterns.

to:

• Ensure consistency of design and interaction in the application or site across platforms, for example:
  • same icons used on web and in mobile App
  • interactions have the same results on SmartTV app as on mobile device app

[Heydon]

You should never present the same information and functionality in different ways.

[iheni]

Where the same information and functionality is inconsistently implemented within an interface it can introduce confusion.

[Heydon]

When users identify functionality by a particular layout, aesthetic or behavior, divergence risks users coming to believe the functionality itself is different.

[iheni]

Where the same information and functionality is inconsistently implemented within an interface it can introduce confusion. Users may think the component is broken, different, or lose confidence in what they are doing.

[Heydon]

• Heading structure should be as consistent as possible across templates.
• Pattern library (DRY: one pattern per piece of functionality)

[iheni]

If the same content is used in multiple places always use the same design pattern so the experience is consistent.

[iheni]

Be Consistent

Strapline

Be consistent with conventions and with their application throughout your interface.

Description

Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.

Examples

• Ensure elements with the same functionality are consistent across the product
• Ensure consistency with existing design patterns across the web and platform design patterns.
• Use consistent editorial across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on.
• Use a consistent structure across pages where possible.
• Use consistent typography, colors, iconography, shapes and focus indicators.

[Heydon]

Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.

[Heydon]

Harmonized examples

• Present the same things in the same way: In each place you provide a piece of content and/or functionality present it as it is elsewhere, with the same structure and behavior e.g. the presentation of search results within different categories.
• Harness convention: People find it easier to understand things they've encountered before. Your designs should have a unique appeal without departing entirely from the well-established conventions or the web and native platforms. For example, your navigation benefits from appearing at the top of your pages, as links within an unordered list. Choose your words carefully: Use consistent editorial across platforms including editorial that is relied on by screen reader users such as text alternatives, headings, labels for buttons and so on.

[iheni]

Closing the original principle.