Pyramid

The combination of direct hub access with sequential item-to-item movement, balancing random access against linear consumption. A hub at the top lists the full sequence; actors can pick any item or step through them one by one, returning to the hub whenever they want to jump elsewhere.

Behavioural position

• Browsing — hub overview enables pattern recognition and scanning
• Navigating — direct access via hub when target is known
• Sequential progression via back/next when linear consumption is preferred

Variants

• Gallery pyramid: Hub shows thumbnails, items are full images.
• List pyramid: Hub shows titles/descriptions in list format.
• Card pyramid: Hub shows rich cards with images, titles, descriptions.
• Numbered pyramid: Hub explicitly numbers items, progress indication emphasised.

To-do

Complementary patterns to capture:

• Progress tracking and resume features
• Image loading optimisation (lazy loading)
• Breadcrumbs showing hub context

An alternative for very long sequences: infinite scroll with anchors.

Resources & references

Tidwell, Brewer, Valencia (2020) Designing Interfaces, 3rd ed.