Being able to freely intermix User Interface objects (elements) with each other on some sort of universal canvas/dashboard has always been a dream of mine - for years now. These UI Objects would be freely available and open sourced with no restrictions like GPL - so LGPL, BSD, whatever.

The UI Objects would cover a wide range of functionality - from editors and players to scroll bars and rollover ‘hover’ code. They wold include standard functionality - so that they could seamlessly connect to many of the other ‘areas’ I’ve been covering in this blog series.

Most importantly - the UI objects have to come with both front-end implementations (perhaps in Flash or Silverlight in addition to Ajax, etc.) - as well as support a myriad of back-end languages, databases and frameworks.

This was actually something I wanted to do with ourmedia.org - but we never got there.

So here’s the vision - lets say we identify some pretty standard major interfaces:

- dashboard - ala NetVibes, iGoogle, MyYahoo, etc.

- media gallery - which would display/store audio, video or images - and support albums and playlists and seamlessly tie into whatever player the users wishes to use

- expression tool - a tool used to create blog/text posts, as well as upload media and create podcasts and vlog posts. A tool to express yourself - no length limit.
- watcher - something that displays news feeds, activity feeds, friendfeeds - and you look at it

- talk/IM - basically a Skype, Twitter, AIM, Meebo, video conf tool - with length limits and all the bells and whistles exopected for a Live Web client

The dashboard holds all these ‘editors/displays’ and enables you to add any other kind of editor/display or RSS feed or ID profile module - and treat them all as one ‘page’.

On this dashboard can also be added any other kind of UI Object - which also means “hang that UI Object off of this dashboard on another page (UI Object)“. So the whole thing can get very recursive, incestuous and cross-vendor delicious.

Now lets imagine that after some time - this general notion of ‘user interface objects‘ becomes so accepted that vendors (social networking players, blog platforms, portals, start pages) allow end-users to substitute THEIR UI Object with some OTHER vendor’s UI Object. Many more ‘kinds’ of UI Objects (see list below) will have become established by then and (of course) the ONLY way this all works is via series of assumptions, common notions and constructs and ultimately open standards evolve - which enable this free interchange of UI Objects.

Now THAT’s gonna drive the mesh!

So without any further delay - here is my proposed list of standard UI Objects we EVENTUALLY all need to agree to - and which we can then enable our users to freely mix and match in their DLAs, start pages, dashboards, social networks, blogging tools, etc. Except that in this system - the dashboard itself is ALSO a UI Object.

High Level UI Objects

Dashboard/Start page

Gallery (media, playlists, albums, player)

Expressor (blog tool, podcaster, vlogging tool, media uploader)

Watcher (monitor activity streams, friendfeeds, subscriptions, etc.)

Talk/IM (for creating short bursts of text, video conferencing, any real-time Live Web kind of communication)

Major UI Objects

Canvas - a more general purpose dashboard, able to be implemented inside of anything else. Canvas’ are used for dragging and dropping and fancy new UIs and places to display interactive “thingies”

Widget/Module/Gadget - please don’t ask me to explain this. If I have to - then you probably shouldn’t be reading this at all. Its a box/module of stuff - anywhere. Typically its rendered and controlled from a server which si NOT the server serving up the rest of the page.

Desktop - see Windows, Macintosh, xxx, yyy

Browser - see Netscape, IE, Firefox, Safari, Opera

Player - see QuickTime player,Windows Media player, WinAmp, Real and a myriad of others

File Directory - lots of ways to do this too. See Macintosh, Windows, Vista and just about every piece of software in existence

Menu bar - typically on top - when clicking on it - a drop down list of menu items appears - usually considered to be part of the desktop (along with folder - notice I didn’t list folders!)

Header/Footer - for web sites - provides info, log-in, stats, etc.

Secondary UI Objects

Facewall - otherwise known as a ‘People grid’ - a screen of faces, gridded out into 4-8 columns and as many rows as you desire. This UI Object could also be used for icons or other images. Its really a specialized visual selector.

Player - take a playlist and play it (audio or video)

Event display - display a single event - with all its meta-data, images, reviews, etc.

Calendar display - display in week, month, day formats - any set of events - public/private

Playlist editor - create a playlist (audio or video)

Image gallery - organize into albums, share, control access

Slide show presenter - take a collection from a gallery or assemble it right there

Review editor - for all types of reviews - really a form editor

Comment/Testimonial editor - simple text

Show module - for displaying interactive IPTV shows

Directories (see ‘pages’)

Listings - a list of items, with tabular columns for displaying related info and display sorting

Timeline - for displaying data based upon time

Outliner - a basic, drag and drop, hierarchical text editor

Settings screen - a wide range of reusable standard, tabbed editing screens

Admin screens - specialized screens for moderating content, people, etc. and more standard back-of-the-house housekeeping kind of issues

Configuration screens/wizards - specifically designed to initially setup (but then go back and tweak later)

Types of Pages

Personal Public page/Blog page - see every social network there is - and all blogs

Personal Private page/Profile page - see dashboard (above)

Wiki page - see every Wiki there is (and all that fancy spreadsheet, editing components as well)

Showcase Gallery (images, video, video) - where JUST the media can be focused on

Item page - specific KINDS of stuff - cars, planes, buildings, businesses - where users can interact, leave reviews, rate, declare themselves to be fans, etc.

Entity page - what Facebook calls their ‘Facebook pages‘ - a member of a social network which is not an individual, but an organization, company, group of people, etc.

Permalink page (image, video, audio, post) - a single item isolated - with all the pertinent meta-data, controls, etc. available for that item

Aggregator page - an interactive page which displays RSS feeds and enables readers to read, tag, share, those feeds

Catalog Item page - that’s part of an eCommerce system

Directory pages - for catalogs, listings, any kind of collection of items

Shopping Cart/transaction page(s) - for collecting money

Registration/Login page - for getting into a system

Misc. UI Objects

Selectors - for choosing from a list or visual display of options, files, items, etc.

Link List editor - for assembling a list of links

Link displays (expand/collapse) - for displaying a list of links

Standard functionality

While we’re on the subject of UI Objects it’s important to note standard guidelines, requirements and interfaces that are required for this all to work.

Tags - is the #1 issue. Everything needs to get tagged - whether it be manually or automatic - or both. These tags can either be ‘top-down’ (dictated from the white coat ‘categories’) or they can be bottom up organic ‘folksonomies’ (thanks Thomas!) - which means humans adding their own 2 centers.

RSS - anything that gets created, anything that’s assembled, really everything - needs to have an RSS feed for it (or Atom feed for those who even know what that means.)

Open, Save as, Undo, File, Edit and View menus - as you probably understand UI constructs need to work like standard UI Objects. So these UI Objects have to act like good citizens as well.
Connection into Live Web capabilities - each one of these UI Objects is gonna need to provide an IM/Chat message field to input into and tie into presence and real-time communication capabilities. Just about everything.

Connection into one’s ID and social graph - each one of these UI Objects is gonna need to know “who’s using this”, “what are my friends doing in relation to this function?”, “who else could benefit from [what I’m doing]”, etc. In other words - all software is social.

Integration with other tools and galleries - this is the glue that ties everything together. All these UI Objects have to work together. They have to share the same ‘application framework’ - or UI layer or dashboard or SOMETHING that makes sure that data is passed back and forth, the clipboard is recognized, import/export work, actions monitored and gobs of other details too nerdy to go into here.

Now whether or not all this sexy UI Object stuff is done with Ruby or C## or Java - I don;t think anyone cares. But it almost certainly has to implement the principles of object-oriented programming. I’ll just leave the technical details here. Us marketing guys are saying “we need this stuff - now”

This notion of UI Objects is also how we’d interface and communicate with all sorts of other industries, deployment platforms, real-world models and most importantly - marketing oriented thinkers. Once they can think of a UI as an advertising platform - I think we’re there.

So lets conslude with “UI Objects can help build the mesh - for sure!”

No chart here - either. Imagine a dashboard holding everything.

My apologies to the world of Tools. I owe you folks the time spent compiling a list of the leading tools vendors, gurus. players, companies, etc. But for now - I wanna finish up this blog series - first.

And as far as the world of UI Objects is concerned - there are some notable names that stand out: Jakob Nielsen , Joy Mountford, Larry Tessler, Yahoo’s UI efforts, MIT folks, Alan Kay, Jamie Fenton, David Levitt

This entry was posted on Thursday, May 1st, 2008 at 12:01 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.