Portals, Portlets, Tiles, Dashboards, and Such
This is very work-in-progress as it is simply a slight cleanup of notes I have and have shared with various orgs I have worked for or with. If you run across this and have questions, don’t hesitate to ask.
Portals, Portlets, Tiles, and progressive disclosure
Names matter, and over time we may add features so having these well defined may be a good idea short term:
A portal is a site that presents diverse information (of multiple functions, features, datasets, or data sources) into a single interactive location.
The core organizing principle of portals is Progressive Disclosure. Clicking a summary takes the user to a more detailed view.
Portals can be as deep as they need, with sub-pages of additional options that then drill down further and further.
Portals can sidestep hierarchies, and offer quick access to multiple levels deep, skipping the intermediate steps but without changing the structure.
Portals can mix levels of access; a fully interactive form or chart can be on a page with small portlets or tiles showing summary info, that can be clicked on to explore or expand.
“Dashboard” is often the public name for the home page as we have it here, a collection of portlets.
Note: avoid using “Home” as it is full of problems. Often it is untrue as there are homes for subsections, so which home page? And for orgs that have location or products associated with locations, home can be directly confusing (do we do home loans?).
A portlet is a diminutive portal. A smaller version of a piece of content OR... a consolidated set of content.
Portlets can be inside portals
Portlets can expand to become portals (
Tiles are miniature portlets, which show one and only one piece of information. Think of tiles on Windows, the gridded icon view: they have an app icon with a flag, or the weather as a single icon or so on.
None of the items here are tiles BUT they are valuable summaries, so I can imagine wanting to add them later, much like the
Daily Reminders are a summary.
Many orgs use tiles for things like the balance bar, a tile for each number.
Interactivity of Portlets & Tiles
Portals are well understood and common. Breaking typical user interaction and paradigms they may have encountered will slow usage and impact accuracy, and performance of job duties:
The title should be clickable
People gravitate to clicking the thing they are interested in; the most common click targets are the first few words of a row label, etc.
Of course, this leads to issues of design system styles, if not already designed in. You can’t underline titles etc. Will need a design exception.
Usually this is solved with
Icons. Add reveal/function icons to the title or title bar
Making a title bar, even if invisible. Click anywhere on the bar (think how you can click and drag anywhere on a title bar for apps, etc)
You can... add hover states to make more obvious but do not rely on that too much as
Touch begins to take over even the desktop so plenty of interactions won’t be moust
Most users do not “scrub” the interface so do not see hovers at all, certainly do not use them to make affordance decisions; they have committed to click before they see it.
So: Make sure interaction is always visible enough without hovers
Add icons - Yes, same as above, just an important aspect that helps make it clear it is all clickable, and a controlled item.
Adding an icon that says “expand” in the upper right corner usefully reflects traditional windowing OS behavior so reads well to most users as not just “link” so they begin to build a mental model that reflects the actual IA.
Borders, shadows – Something to make clear it is a unitary item, not just info tossed on the page. Do not go too modern, light, and airy or the border may become invisible.
Click anywhere in the box
Good for Tiles
Can be fraught for other interactions that therefore allow blank spaces to click to the page; that means mis-clicks (common!) to links, buttons, inputs etc will take an unintended action.
Progressive interactions
As promoted here: good! Do that.
This falls to principles of progressive disclosure, not just clicking a link but performing actions.
It is organic: the old movie guidance of “show, don’t tell” applies well to interactive where we well know “no one reads.”
But do be aware that your users will know rapidly it’s not the form but a teaser for the form, may want the full form easily findable so do include links as above.
Be aware that esp power users may well like keyboard interaction, tab between fields, etc. So support that.
Bind the submit button to enter enter key when input in the Portlet/Tile is in focus.
Focus the next field in the first row (to the right of the one filled) on the full form page, so users can immediately type, and tab to the next field, no need to touch the mouse.
And now you have an all keyboard access form even though it’s split between two pages.
You don’t want to customize
Yes, people will ask for it. This is why we take surveys and focus group results very very carefully.
But "What people say, what people do, and what they say they do are entirely different things."
They Do Not Use It.
My personal story is of building one, as well as we could, and user testing and it was unused. 50MM customers, 20MM regular (visited more than monthly, and some 5MM weekly or more!) with different use habits, like pre- vs post-paid customers.
500 customizations. Not users, customizations. About 450 people did it ever. 490 some odd did it once and never came back. And millions didn’t care.
This is reflected in everyone else who has customization, like when Yahoo! was the big portal. Under 0.1% customization.
The Microsoft Ribbon is because no one customizes. Microsoft has menu customization, and always has.
Their power user example (big market so they satisfy them) is legal secretaries. They spend all day, every day, doing very specific tasks in MS Word. Often, repetitive ones, demanding specifics where custom tools or custom saved settings would make their life easier.
Same very low rates. Beween 0.3 amd 2% ever customize.
So, they gave us the ribbon: personalization and contextualization instead. They see what is happening and what you’ve done in the past and offer what they think are the most relevant tools.
Think of the backlash to it. And note it is still there. Because it works. MS Office is about functionality and this works better than anything to solve the problem for the 99.7%.
“Because they don’t manage the UI. People don’t want to spend time [closing and moving windows and panels]”
https://www.youtube.com/watch?time_continue=1106&v=AHiNeUTgGkk
They also have some nice design principles like “Think of features instead of commands” as part of a Results Oriented Design that led to the Ribbon
From: https://learn.microsoft.com/en-us/archive/blogs/jensenh/lets-talk-about-customization
“Looking across a hundred million or so people using Office 2003, here's what we found:
In fewer than 2% of sessions, the program was running with customized command bars.
Of the 2% of sessions with customizations present, 85% included customization of four or fewer commands.”
“we often find that Office has been ravaged by the effects of accidental customization. In fact, one of the most frequent questions we are asked by people during on-site usability research is: "How can I get the menus back to the top of the window?"