My Stuff – HTML protosite draft
I have been coding up the latest My Stuff design. It offers more of an understanding of the user-experience than my graphic design files but it does not interface with any back-end magic like databases and things like that. You can click from place to place. Somethings are more realised than others. This will become apparent as you move through things. This protosite will be evolving fairly rapidly over the next few weeks so keep your eyes on it it for changes.
Here are a few rough notes about what we’ve done. I hope to expand these a bit more, perhaps in relation to comments posted to this posting.
There is much work to do. For the purpose of this exercise the user is a student of BU130.
Design-wise, this is quite a break from the initial warm-glow. We had to rethink the colour scheme as we just couldn’t make it accessible enough for the majority of the users. We’re now using 100% OU brand-compliant colours in one of the most accessible configurations that met the requirements of ‘warmth’, ‘different to standard moodle’, ‘accessible’ and ‘brand compliant. There was much compromise but I do think what we have is pretty good. You notice that it’s slightly different from the visuals of the previous postings on this blog. I met with David Winter who was keen for me to down-play the gradients and shadows in order to be more in-line with current brand thinking. This actually made it easier to convert from graphics to HTML as there was far less optimisation, slicing and dicing to do. The end result is extremely ‘themable’ by which i mean that we can slot in different colour schemes fairly easily if and when they are required. You’ll notice that the background colour is off-white. An additional touch to enhance the accessibility further.
There are various other changes to the original. The most obvious being the footer. The concept here is that a large amount of functionality can be exposed in the global footer unobtrusively. Once a user has finished on the page they’re on, they get to the footer in order to make a decision on what to do next. I’ll try and expand on this a little more later.
You’ll see that much of the fuctionality has been down-played in an effort to simplify the interface as much as possible. But there’s still more we could do.
The current icons are placeholders. Ian Roddis has commissioned some official OU icons which we’ll make sure we use when they are available.
One final note, to properly appreciate the new design, view it in a modern browser like Firefox. At this point it’s only been tested in Firefox and Internet Explorer 6 (IE6). It works fine in IE6 but the dotted borders on the boxes become dashes and the alpha transparency on the icons is lost. I think these two bugs might have been fixed in IE7 but am not sure.
Remember that this is a protosite. The final version will contain the official OU top bar and various bits of Moodle.
Without further ado, here’s the protosite.
UPDATE – You can now see my response to some of the accessibility and usability findings of the previous version here.
Tags: Eportfolio, Graphical User Interface, Web design