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
Sent via email from Inma Alvarez
Hi, I’ve had a quick look at the site and here are a couple of comments on the design:
I found that that first paragraph in the homepage under Guy C’s stuff adds unnecessary extra reading. Perhaps we could just have Guy’s Home/ in the above box and the information could appear in a bubble when passing the mouse.
I think it will be best as well to have just a list of live headings under My latest stuff instead of having to scroll down to see each whole doc.
January 9th, 2007 at 4:41 pm
Thanks, Guy!
January 9th, 2007 at 5:21 pm
Guy,
Just wondering about the footer. Is this content of the footer going to be mirrored in the header as some form of ‘drop down’ or ‘slide in’ menu? My concern would be that (at present) the student has to scroll down to a host of links at the bottom of what could be a large amount of content. In many ways, I would prefer to see less navigational options in this footer but perhaps have the facility to drill into them somehow.
Maybe you’re already thinking along these lines but I thought it was worth flagging up.
January 10th, 2007 at 11:46 am
Dave – I’d like to see an accessible drop-down widget like flickr has if poss. Thanh and I had talked about the option of having a slider that slides the footer nav at the top of the page instead. Most of the things that prevented it came down to accessibility. I wonder if we could revisit the idea though.
January 10th, 2007 at 11:49 am
Guy-
QUIck comments, stream of consciousness, so apologies if a bit blunt at times – I only tend to comment on possible changes, not the good stuff…
“My Stuff is a place for reflecting on learning, for storing personal information and files and a way to create useful things like CVs and portfolios of work. Find out more about My Stuff. Read the blog entry about this design.” Irrelevant after the first one or two uses, I’d say. I know what it’s for, its for my stuff; you could i suppose have a daily hint here, eg one that suggests things you don’t do/haven;t done for a long time, but can do in my stuff? Would require back end support though;
—-
New Stuff
Reflect on your studies, record your thoughts. Share your thoughts with your tutor and buddies.
* New non-specific stuff
* New Structured Learning Log
* New CV
* New BU130 Learning Contract
—-
redundancy of new? It’s New Stuff, so is the New non-specific stuff New new non-specific stuff.
And non-specific? why not eg Just Stuff, or Just SOme Stuff, or Any old stuff etc
Non-specific stuff is like a stuffy academic trying to sound hip’n’cool, yeah?;-)
—-
About me
My name, address, interests, personal statement, aspirations, skills and lots of other things about me can be viewed and edited here.
—-
Is this a public or a private page? Scope for something like 43 things here (ie motivational, inspirational?)
Public I guess… so my stuff is like a public social networking page, with maybe a private portfolio too?
Tags – nice; i wonder if there is scope here for displaying my stuff tagged in a particular way, or Our stuff (OUr?), for my social netwwork
Defining our, and switching Our contexts may be a bit tricky to manage though? eg if i want a t123 our and an s345 our?
Hmm maybe not – tags could do it – if i look at mystuff/t123 widgets, then maybe ourstuff/t123 widgets will reveal the mypublicstuff from all my contacts tagged that way?
I’d really encourage you get get microformats into the code design early, where possible, because they may be handy later and don’t really clutter things: eg uFing the tag links would be one obvious thing to do: http://microformats.org/wiki/reltag
Is Pending pending, or just unsorted?
My stuff by date – useful…
Out of curiosity, for mystuff footer, why 3 column? could these be draggable, cf netvibes, so i can order them? Chasing that down for a mo, could i add panels to that footer eg mystuff tagged this that
On front page, new stuff requires several scrolls; rather than have the description text showing, how about if it were hidden in a collapsible widget with maybe just the first two lines of description showing? eg collapsible block at http://songhaysystem.com/samples/DHTML/index.html (slow to load)
Good Stuff đ
tony
ps you seen https://tubes.adessonow.com/ ? Relevant?
January 10th, 2007 at 12:16 pm
Hi Tony. Great feedback as ever.
One thing to make sure about early on – My Stuff is not going to be available to the public to read or write to (at least not immediately). It will be closed to the OU community. This isn’t my choice but maybe others can explain the logic behind this a bit more. So there’s only so far we can take the whole social networking thing.
* New – it could be redundant or could reinforce the newness. Also, for screenreaders, no harm in having the word ‘new’ in the links incase they pull out the links out of context. This is definitely one to think about. The non-specific stuff label is definitely rubbish and I will change that.
* About me – This is private unless the user chooses to share bits of it with others in their tutor group or ou buddy list.
* Tagging in a particular way – Viewing things by more than one tag at a time – i.e. – show me eveything ive tagged with BU130 and career? I really like that idea and i think it will be a very useful method of filtering stuff.
* Microformats – I wonder if we might consult you more on this? Ive been wanting to use microformats for some time but need someone with a good understanding of which ones exist and which would be best for this app.
* Pending is like a shopping basket / cart etc. Basically the ‘stuff i want to group together but am unsure what i want to tag it with yet’ type thing.
* Footer – 3 cols cos the main content area is two – it differentiates the content flow. Also because the footer is really a bunch of lists and not actual content there’s more room for three cols. Personalising the items in the footer is part of the spec. You’d go into settings and click ‘customise my stuff’ if it existed!
* The front page new stuff is currently displaying like this blog. I did it on a whim to provide a focal point to the homepage. Its like a rolling scapbook of stuff that can be paged through in reverse chronology – just like a blog. But i take your point that it might not be suitable here. Maybe we can offer a bucnh of homepage display options for users to choose from. But defining the default will be the tricky part – more student consultation need on this i think.
BTW – whilst i can do the html, css and designs – im not coding the backend so i might be able to imply somthing is possible but actually doing it means talking to clever people!
I’d not seen Tubes! It looks great. I shall go and play. Have you used it? How did you find it?
January 10th, 2007 at 12:45 pm
Hi, Guy. This is a response to your request earlier in January – sorry it has taken so long – its been ‘one of those months’!!!
What I’ve done is to go to your ‘Guy Carberry’s stuff’ home page shown above, and follow various links. It is not exhaustive – I just went on until I’d had enough! The notes below are in the order that I wandered. I do realise that some of the features shown are still just ‘proto’, but since I can’t tell which is proto and which is ‘designed’ I’ve just responded on a ‘what I see is what I comment on’ basis. My endlessly repeated complaint below is at the interminable use of very long, un-indexed, pages, with the resulting scrolling and navigation problems.
——————
“OU crest at top of screen”: This is a waste of space – forces useful stuff off the bottom of my screen. I’m most alarmed to hear (above in your notes) that this bar is going to get more elaborated rather than being lost. Brand is fine, but not at the expense of functionality!
‘Find out more about my stuff’ should link to ‘Help!’ not ‘Introduction’
“Form syntax for use in “My stuff””: I’m ignoring the techie stuff, and I realise that this may just be a proto rough. But taking it as it stands, my main concern is the navigation of your form – it takes a lot of scrolling, and having the ‘Save’ button right at the end is a disaster – students will forget and lose all their data (happened all too often in T185). You either need automatic ‘save’ after every short 1-screen page (cf on-line tax forms!) or else the save button needs to be visible on-screen wherever you are – e.g. on a separate fixed control window, or on the menu bar. Can’t we train students to expect something like the Acrobat outline panel? The vertical linear layout of your your ‘Type’ field also creates unnecessary scrolling.
CV wizards: I wonder if You also need an open-ended notepad field for ‘CV-sh things I don’t know what to do with yet’ – the equivalent of a shoe-box full of odds and ends of vaguely CV-ish bits of evidence that still need thinking about, editing, classifying, etc. It may even be that every ‘structured’ CV field needs an associated ‘rough notes’ field. You might also need a space for collecting vaguely relevant e-mails, documents, etc.
I.e. at least in my own CV preparation, there is a huge difference between the ‘shoe-box’ stage (something comes across my desk and I recognise that it might be useful for my CV, so I stuff it in a ‘CV folder’ somewhere), and the ‘posh CV’ stage, which is usually much later – maybe years later – when I put a wet towel round my head and try to create an actual CV out of all the stuff in the shoe-box. Expecting people to ‘do the job properly first time round’ just won’t happen!
“My stuff forms”: Again the problem of long lists that need scrolling when there is oodles of unused screen space. The ‘Personal details’ form takes 6 screens for what a word-processor would get onto a letter heading!
“About me”: I feel very nervous about the idea that students can edit the core info that the OU holds on them. From an ethical point of view, I welcome this kind of empowerment, but surely it has a potential for causing havoc in other systems? Are there not ‘identity theft’-type security issues as well?
While the ‘Help’ box is useful when you first arrive at the screen, it is a waste of space for regular users. Can’t we do it as a clickable pop-up? Perhaps pre-set so that it pops up automatically for the first few ‘visits’, but thereafter needs to be clicked?
“My Latest Stuff”: Might be better as a clickable list of headings, rather than a listing in full – again it is a scrolling issue.
“New stuff”: Caption ambiguous re. “My latest stuff”. Perhaps better as: ‘Add new stuff” – i.e. use a verb phrase for areas that require action, and a noun phrase for passive listings.
“Recent activity”: Also ambiguous re. “My latest stuff”. Does it mean “Recent messages”? Also if site is called “My stuff” then using “You” when I mean “me” is inconsistent and confusing (!!) Better as “I” – e.g. “I commented on …” or “Self commented on…” or “JNTM commented on … ” where the format “JNTM” is only used to refer to me.
The footer to each page (the various listings of My Stuff): I take the point you make above about the footer, but again, it gets lost if you have to scroll down 20 screens to get to it, and it could get very big in itself for a heavy user. Can’t you just have a button on the menu bar that says: ‘My Stuff listings’?
“Whose sharing stuff with me?” and “Contacts”: I have a special interest in this because of my own course requirements. I think it would help to have an extra heading on the ‘Contacts’ page (as well as ‘Individuals’ and ‘Groups’) that says something like: ‘Course controlled sharing’. This is because it is the only situation in MyStuff where the student does NOT control the sharing – the course software obliges the student to share particular reports, and tells the student who they are to be shared with. Since this goes against the ethos of the rest of MyStuff, it needs to be publicly demarcated in a very clear way – perhaps with an explanatory ‘Help’ box that explains the distinction.
This is how it might work. Whenever I submit my piece (which has been automatically tagged on submission as, say, ‘T185-Block2-report’) a link would appear under ‘Sharing’ saying: ‘My T185-Block2-Report’ (which I can see if I click on it).
Then under ‘Course controlled sharing’, an entry would appear saying: “T185 Block 2 sharers allocated to you”. If you click on it, you see a list of links to a sample of ‘T185-Block2-reports’ from N other randomly selected T185 students who have also submitted their ‘T185-Block2-Reports’.
In practice, T185 students would only see this interface if they accessed the full ‘My Stuff’ system. Normally there would be direct links from their website to a drastically cut-down interface that did just what was needed. But data-base changes inserted in this way would still be ‘properly formed MyStuff entries’ and would be picked up by the main My Stuff in the usual way.
OK – that’s as far as I’ve got – have run out of energy! Feel free to e-mail me if you want to follow up any of these comments.
Cheers, John
February 1st, 2007 at 2:36 pm
Hi John, thanks for the extremely useful feedback. I’ll attempt to answer all of your points below. If i dont answer a specific point you make then assume that i will be attending to it one way or another. Be assured that everything you’ve said has been logged.
[quote] âOU crest at top of screenâ: This is a waste of space – forces useful stuff off the bottom of my screen. Iâm most alarmed to hear (above in your notes) that this bar is going to get more elaborated rather than being lost. Brand is fine, but not at the expense of functionality! [/quote]
I completely agree with your point. However, this is non-negotiable. The brand guidelines and the importance of the OU global navigation is something that we have to adhere to. Moving on..
[quote] my main concern is the navigation of your form – it takes a lot of scrolling, [/quote]
Whilst horizontal scrolling is a total no-no, I dont’ think people mind vertical scrolling. In fact they are mostly used to it. But i do recognise that long-scrolling pages can be a bit of an issue for people. Jakob Nielsen discusses this here –
http://www.useit.com/alertbox/20050711.html
I think we need to recognise that some degree of veritcal scrolling is inevitable since we cant predict what screen size or browser sized window they will be viewing the site in. Take for example a nice 19″ screen with the browser opened to the full window size – there might be no scrolling required.
The same page on the same monitor with the browser window set at 600px height would need to have scrolling. The user could always make the window bigger to see all of the page at once. But that might not be their preference.
Another user might be viewing the same page on a smaller monitor with the screen resolution at 800×600 pixels. Again, they might not view the page at full screen. Regardless of if they view at full screen or not, vertical scrolling will be necessary. Even more so for a user with a PDA or Internet Tablet like the Nokia 770. Uses of the PSP or Nintendo DS would get even more scrolling still. And on the tiny viewport of a mobile phone, even more so!
So we can’t predict how the site will look or scroll across each and every device. We can always expect some scrolling. We can do as much as possible to avoid too much scrolling but we wont eliminate it.
The crucial issue here seems to be that the navigation is at the bottom of the page rather than the top! If im near the top of the page then i need to scroll down to locate the nav. If the nav is at the bottom then i need to scroll all the way up to get to it.
I think the best solution is to give the user access to the main navigation at both the top and bottom of the screen. But perhaps we revisit how much navigation we place on each page. As you suggest, it might be worth having a link to a ‘site contents’ page. Or we make the homepage more of a contents page itself.
[quote]and having the âSaveâ button right at the end is a disaster – students will forget and lose all their data (happened all too often in T185). You either need automatic âsaveâ after every short 1-screen page (cf on-line tax forms!) [/quote]
This is a good point. We can indeed spilt the forms up over multiple pages.
[quote]or else the save button needs to be visible on-screen wherever you are – e.g. on a separate fixed control window, or on the menu bar. [/quote]
What if we were to put an alert in front of the user if they tried to move off the page without saving? “You have made changes which you haven’t saved. Would you like to save yourt changes? – yes /no”
[quote]Canât we train students to expect something like the Acrobat outline panel? The vertical linear layout of your your âTypeâ field also creates unnecessary scrolling.[/quote]
Whilst this does provide usability benefits to many, it also provides accessibility issues to non-visual users of the site. In fact a lot of your issues about the vertical layout with lots of white space come down to issues of accessibility and readability that might not be immediately apparent to the average user.
Related reading:
http://www.lukew.com/resources/articles/web_forms.html
http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/
http://www.sitepoint.com/article/accessible-online-forms
If you have any further thoughts on this id be keen to hear them.
[quote] CV wizards: I wonder if You also need an open-ended notepad field for âCV-sh things I donât know what to do with yetâ – the equivalent of a shoe-box full of odds and ends of vaguely CV-ish bits of evidence that still need thinking about, editing, classifying, etc. It may even be that every âstructuredâ CV field needs an associated ârough notesâ field. You might also need a space for collecting vaguely relevant e-mails, documents, etc.[/quote]
Brilliant idea. I really like this.
Regarding the sharing, i shall be in touch in order to full explore how this works.
Thanks again for the feedback, very very useful.
Guy.
February 2nd, 2007 at 12:02 pm
Hi Guy
I’ve only two brief comments at this stage. ‘My Recent Stuff’ seems to take up a lot of space – could items be presented initially as headings with something like a collapse/expand button so students can choose whether to show certain items or not?
I wasn’t sure about the status of the ‘possibly related stuff’ – is that the system deciding for you based on tags and common words in the content?
It also took me a moment to figure out what the pencil icon did, but I guess you only need to work that one out once đ
It’s starting to look really good!
February 15th, 2007 at 10:47 am
Credit Card Services
I couldn’t understand some parts of this article, but it sounds interesting
October 3rd, 2007 at 1:09 am