DESIGNING

ย EXTENSION UI/UX

Andre de Vries

๐Ÿ 

UK

๐Ÿ‘จโ€๐Ÿซ

๐Ÿ‘จโ€๐Ÿ’ป

The Information Lab UK

The Dataschool UK

๐Ÿšฒ

๐Ÿ‡ณ๐Ÿ‡ฑ

Netherlands

@andre347_

๐Ÿ‡ฌ๐Ÿ‡ง

andredevries.dev

https://til.bi/extUI

@andre347_

andredevries.dev

๐Ÿ‘‡

@andre347_

Tableau Extensions are..

.. a two-way communication between a web application and your dashboard with the aim to extend Tableau's functionality

andredevries.dev

@andre347_

Need to take this into account..

.. extending Tableau's functionality should also mean creating a recognisable app that has Tableau's look and feel

andredevries.dev

@andre347_

andredevries.dev

Write Back to MS-SQL

by Andre de Vries

@andre347_

andredevries.dev

https://tableau.github.io/extensions-api/

๐Ÿ‘†

@andre347_

andredevries.dev

Tableau UI

Tableau UI is a React component library containing UI components which have the look-and-feel of Tableau.

@andre347_

andredevries.dev

LET'S TAKE A LOOK AT HOW TO USE THE COMPONENT LIBRARY

@andre347_

andredevries.dev

BUT, WHAT IF YOU DON'T USE REACT?

https://github.com/TheInformationLab/Tableau-Extension-UIStarter

Craig Bloodworth

@andre347_

andredevries.dev

UX DESIGN

Interaction Guidelines:

ย 

Extension Container and the Configuration Dialog

ย 

ย 

ย 

@andre347_

andredevries.dev

UX DESIGN

Interaction Guidelines:

ย 

Two types of users:

ย 

1. Desktop userย  ๐Ÿ‘‰ Configures the Extension

2. Server / Online user ๐Ÿ‘‰ Can't really use the config and is exposed to the extension container

ย 

ย 

@andre347_

andredevries.dev

UX DESIGN

Style Guidelines:

ย 

Colour: Official Tableau colours ๐Ÿ‘‰ ย https://tableau.github.io/extensions-api/docs/Style_Guidelines/ux_color.html

ย 

Fonts: Benton Sans or Helvetica

@andre347_

๐Ÿ™Œ โ‰

andredevries.dev

THANK YOU

Designing Effective and Recognisable Extension UIs

By Andre de Vries

Designing Effective and Recognisable Extension UIs

This is a supplementary slide deck for the first Online Tableau Developer Meetup on the 26th of March

  • 420