I am writing a book. Been doing so for years, but getting it finished now. More on that in the coming weeks, but the deadline is set in stone now since I promised it for this workshop session at Design for Mobile.
The hardest part is, indeed, the cutting. It’s mostly fallen together pretty well, and makes sense as a single narrative, but as I proceed there are things bunching up at the end that just don’t fit.
In the middle of my discussion on omnimorphism vs. polymorphism and object-oriented design, there’s an aside about how it relates to portals which is too much of a tangent to keep. But my definition of what a portal is, even surprised me (I have no recollection of writing this) with it’s clarity and specificity. And I’ve never really talked about it before, so here you go:
Portal-theory: the amount of information or function presented is inversely proportional to proximity to the surface.
That probably didn’t help much, so let me fill in the story, and explain. With pictures.
Around ten years ago, there’s a meeting with VPs from UX, Marketing, Customer Care, and so on. A few teams send directors. I am a lowly nobody of a designer for the web team. Someone has proposed replacing the boring old account management “site” (section, really) with a portal.
The question is, what’s a portal? Of the ten participants in the meeting, at least fifteen answers. Really. Most were “news, sports and weather.” Others were similar answers along the lines of “general information from trusted, external sources.” I thought this was clearly stupid, though didn’t say so out loud for a change, and didn’t get to a useful definition. When it was over I went back to my desk to work one out.
It wasn’t that hard, and I have spent a fair amount of my time since then explaining it.
Portals are technology agnostic. They can be web entities, or applications, desktop, industrial, appliances, or mobile. It’s a logical arrangement of information, not a technology.
Portals scale. Whether you need to shove a portion of your portal into another screen, or stick the whole things on a mobile device, the designer has lots and lots of choice as to how much is presented at any one level, and how it’s presented.
A portal is not a page. Sure, the key word is that it’s a portal into other information, but without something to back it up, it’s useless. Certainly the information you dive into can be off somewhere else, so while the user might perceive it as one big process, your site or app doesn’t control it all.
Wide and shallow, to deep and narrow. As stated in that definition up top, the higher you go, the less information there is about any one topic. You use this to add more topic areas as you approach the home page.
A bunch of icons is not a portal. You have to present actual information on the home page. Not just the weather icon, but the actual summary weather so user’s can get the information without extra effort.
Portals are filled with portlets. I got this terminology from developers, but it logically works out also. Any presentation of information is a portlet, regardless of size or detail, all the way to full-pages which are just “maximized portlets.”
Information must be displayed. Don’t hide things, and avoid just links to “picture of the day.” Show a thumbnail of the picture. Summarize the news story. Give the key sports scores.
React appropriately to clicks. What the user clicks on can tell you what they are interested in. And not in a complex manner. If they click on “news” then they want to see more news headlines, and maybe a summary of the top several stories in each category. If, instead, they click on the title of a story on the home page, they want to see the full text of that story, not that news summary page. You’d be surprised how often this is not done right.
Actually, when I went around ten years ago – and even now as I glance around the world – I am surprised how many sites, applications and even concepts (widgets) are portals. And how many of them violate these basic principles to deliver the best possible experience.
If you want to see the images used above in better quality, I have included all of the drawings in this pdf. The screenshots are pretty poor, so there’s no point in making that one bigger.