Forum OpenACS Development: Re: .LRN user interface design

Collapse
Posted by Bruce Spear on
I love the tabs and would highlight them for both functional and aesthetic reasons, cutting down on the headers above them and simplifying or making less busy the type and forms below, and building a rich metaphoric universe around them.

The power of tabbing to structure and make less chaotic the space below is illustrated in another site our graphic designer Sille has made for a research outfit, http://www.erhvervsphd.dk/visArtikel.asp?artikelID=510, and where you will see how the headers in the column left reinforce the relationship to the text at right and indicate strongly where you are among a limited number of options.  The stylistic advance with her Dotlrn model is greater care in her carving of the tab shape and space so giving the Dotlrn page a fine character, like well-made furniture.

The problem is complexity and the loss of metaphor in the chaos that comes from developing the metaphor only part way.  A comparison with her design for the music page of the Danish television second channel might be illustrative: http://www.dr.dk/musik/.  The page is down as I write, but it features a cool Bauhaus design layout style whereby the dozens of text/image items are toned down so as not to compete too much with each other and are held together by a light, colorful framework of color bars and white column gutters.

This is not her fault, because we tried to stay close to the earlier model as we had a limited mandate for change.  I see a powerful design and stylistic sensibility bound to the confused, data model orientation of the previous Dotlrn designs.  This leads to such confusions as the doubling of the words "Classes and Communities" in the portlet header and the sub-heads and the attempt to create a header out of the calendar selection dates to the right.  This doubling and faux header is ugly and dumb, and she made the type large, I think, following my friend Louette's Terre Haute Indiana advice, given to me as a sort of blessing as I headed off to language study in France: "If you don't know how to say it, Brucie, say it LOUD!"

This over-size type, or more properly, the to my taste ill-proportioned type scheme, suggests over-sized cutlery spilling off the table.

I think we need to give the designer more freedom, and maybe more money, to move that type around and even hide some of it if necessary.  To that we in the community need to give her a license or mandate to make more sense of it.

To do that I think we might, following Cesar's advice, work with a little pain and offer a way out -- using our technology, of course.  The pain is that large, faux subhead announcing the starting and ending points of that week.  I already know the starting points of the week, as the first entry in the column, and I already know what kind of calendar it is, too, in the "Week Summary" portlet title.  Our past has burdened the designer, and we must set her free!  And let's do it our way, such as we list options in the course admin pages: how about making an informative, useful, switchable date column heading of "Week/Month/Semester"?  Done right, she could design it in a way that carries the tab/furniture theme and so inviting the user to chose the most relevant selection just like he or she is tabbing her way across the desktop.

I would suggest that she strengthen that tabbing even more, and one way to do that would be to condense the seven visual lines above it.  If I were the designer, I would move the Sloan Space logo to the right of the tabs, where there is plenty of space for it, send poor Al Essa's picture to his mother, and get rid of that top bar entirely.  The idea I might like to explore is Dotlrn as a no-nonsense place of work that nonetheless has a warm vitality to it (and I am thinking of the pleasures of the lush southern German landscape I am presently enjoying in springtime).  The tabs, like American-style file folders, suggest an orderly place of work and a limited number of tasks, too: I want to enter into my work space, get a nice little pile of work done, and go to lunch: the tabs say to me: let's run through three or four places, take care of business, and being a good Protestant get that work done and move on: those tabs are wonderfully inviting: I want to push them and watch them open up.

What is keeping the designer from exploring the tab/furniture theme further is the two-column format, and I wonder if the tabs are not powerful enough that we might not empower them further.  If we made a tab on the left called "Desktop" that presented the current two-column overview, but reduced it in size like an appendix, might not that allow the designer to explore full-page displays that would allow for more and more complex portlet presentations?  Some idea of what that might look like is, again, in her http://www.erhvervsphd.dk/visArtikel.asp?artikelID=510 site, where the simpler space suggests less a packed shipping clerk's collection of details and more a professional researcher's hierarchy of responsibilities.

The one strategic and functional concession I'd make is to Openacs and breadcrumbs: allowing for a thin line of breadcrumbs at the top and off the tabletop, above the rich metaphoric universe of the Dotlrn tabletop, shape, and color field: sans-serif characters on white background, set back a bit, neutral, reminding you that behind the rich metaphor is a simple navigational structure -- like the cool rounded stainless handrails in Disneyland's "Circlevision" giving you something to hold on to and so saving you from vertigo.

Reducing and simplifying the headers and strengthening the tabs/furniture will leave us with two useful lists advancing on the header icon at right: the tabs inviting me to work my way forward, and in the background, the breadcrumbs noting my progress and assuring me I can get back home.  And we might reinforce the strong symbolic axis by anchoring the breadcrumbs with "logout" to the very left, point null so to speak, and against that, reinforcing the rich parade of metaphor and tabs on the Dotlrn level, by animating the logo with that nifty slideshow arrangement we find on Nima's Mannheim site and which he generously gave me for my FU sites, including: http://learn.jfk.fu-berlin.de/, where you will see with each page refresh images loosely related to the site theme: students and faculty love the images and how, with each new page, there is a tiny witty commentary, tickling their fancy: a fine counterpoint to the breadcrumbs heading back to the left and the logout.