I’d like a little feedback on the following critical issue, if you have time.

The ‘breadcrumb’ navigation is all over the place. That’s because MyStuff is by nature ‘all over the place’. It’s all about creating something that can be reused in multiple places. As a result, strict hierarchy is difficult to define. And users who like things in strict,easily navigable hierarchicial order will struggle. Trust me, im designing this thing and I really struggle with it!

There is no ‘sitemap’ in existence for the system. I’ve had a go at creating one. In doing so, I’ve identified that it is difficult to locate certain things within hierarchy.

The most glaring issue is the nature of difference between ‘spaces’, ‘compilations’, ‘forms’ and ‘items’.

‘Spaces’ enable users to go to their course and fill in ‘forms’ for a course defined purpose. These forms might be from the general pool of forms created by Erica or from course defined forms. Most data entered in a ‘space’ will be useful for a final ‘compilation’. The data entered in the forms in a ‘space’ context’ will also be available to view in the general ‘items’ area.

When considering the breadcrumb hierarchy for the data ‘item’ there are a few breadcrumbs that could exist that take the user to the same ‘item’:

1. MyStuff / spaces / about me / personal photos / photo.jpg

2. MyStuff / items / files / images / photo.jpg

3. MyStuff / compilations / web / photos / photo.jpg

It may be that we define that ‘items’ don’t have a breadcrumb at all. Or maybe they have multiple breadcrumbs. Maybe breadcrumbs only exist for the system itself, not the items or compilations stored within it.

However, not having a breadcrumb for the items or compilations is troublesome. It means users either have to click the ‘back button’ to get to previous pages (if they didn’t direct-link to the item itself!) or go back to the MyStuff homepage or global navigation elements and move forwards till they find the item they want. This is little inconvenient though. Multiple breadcrumbs could prove useful. Consider the example above. Depending on what the user wants to do, she can click items in one of three potential paths.

1. is the item’s location within the ‘spaces’ hierarchy

2. is the item’s location within the ‘items’ hierarchy

3. is the item’s location within the ‘compilation’ hierarchy

But are there more potential places the item could live?

Sure:

An item can belong to many compilations:

MyStuff / compilations / web / me / photo.jpg
MyStuff / compilations / bu130 / evidence1 / photo.jpg
MyStuff / compilations / h808 / evidence / photo.jpg
MyStuff / compilations / web / likeness / photo.jpg
(..and on and on..)

As long as ‘about me’ is a space, an item can belong to multiple spaces:

MyStuff / spaces / about me / photos / photo.jpg
MyStuff / spaces / bu130 / photos / photo.jpg
MyStuff / spaces / h808 / photos / photo.jpg

This problem is not unique to MyStuff though. Consider that a photo uploaded to Flickr can live in the photostream, a set, a tag and a collection. Flickr deals with the issue by essentially placing the ‘parents’ of the photo in the right-hand column (photostream, this photo also belongs to, tags). This is a good way of dealing with the hierarchy without using breadcrumb trails as such.

So we could adopt this method. But this raises the question of ‘spaces’. Does an item ‘belong’ to a ‘space’ or is it merely created within one? If spaces are the means to group forms in a usable context then the forms need a hierarchy too. So we’d have a category called ‘personal’ where users would go to add addresses, work history and stuff like that. They’d go to a course space, say BU130 to enter data specifically relating to that course. They wouldn’t add personal info in this space as they would do that in the ‘personal space’. Therefore forms are not reused in different spaces, they are unique to them.

But what about ‘file uploads’ and ‘new notes’? What space do these belong to? Yet again, my mind is in knots.

If we redefine the nature of a ‘space’ so that it can only be used to input data, not select data (a compilation feature) then there is no space for ‘About me’ as a space as it is currently designed. In this design, the user can select items to use in the space. This is what compilations do! So should spaces do the same thing? I don’t think so. ‘About me’ shoul be the means to add items using the ‘Personal’ forms. But crucially, not select a favourite one.

Where does this leave the ‘personal profile (about me)’ then? Well I’d suggest moving it to ‘settings’. Here it would behave similarly to a compilation but with no downloadable output.

So, here are my wireframes for the ‘About me’ space.

Thoughts?

Read more about the new MyStuff header on Google Docs.

You can read about the managed view interface too!

The wireframe.

The wireframe with some notes.

And here are the notes again for those who find the tiny text a little small! – You find the stand MyStuff global nav (i stripped a lot of it out for my wireframe for clarity). Then you get a nice big button to create new stuff with a secondary link if you just want to upload a file. You find a “Search MyStuff” box and a table of stuff you’ve got in the system. You can filter this table by title, type and date. You can change the amount of items shown in the table and control the pagination (note the mistake on the previous / first page icons – they are the wrong war round!). You can select items from the table and then do things with then. This includes deleting, archiving, applying tags, adding to compilations and such like.

Thoughts?

Imagining that sometime soon the OU web colour pallette might be revised, improved and made more accessible, I’ve been playing with colour schemes using Adobe’s fantastic Kuler web app. Here I can select an OU brand colour and generate sympathic colours schemes from it. I then use a little artistic license to get semi-accessible colours to use in the design.

Aside form the colour issues, I’ve also been working on the user experience a bit more. We’ve had the reports back from the focus group sessions and I’ve been using the information contain within to influence the direction of My Stuff.

1 – This topbar colour scheme is simply not accessible. There’s not enough contrast between the foreground and background color. It’s a shame because the user group really like it. Partly becuase it’s so not like the Moodle sites they’ve seen and also because it’s a nice warm colour. The second issue with this topbar is that the ‘new’ button is confusing. Some people thought that it was a contextual button but it’s not. It takes you to the ‘new’ screen full of options. So we’re getting rid of it.

2 – As the screens become more obvious, there can be little need for contextual help in such a prominent way. This bar is therefore being rethought.

3 – We have a graphic to replace the stock image now.

4 – The guided tour is not prominent enough. We need to make it more of a feature for new users whilst subduing it more for regular users. We therefore need at least two realisations of the states of the homepage.

5 – The meaning of these boxes needs re-evaluating. Plus – how do we scale this? There’s potential for many things like these to exist and if so, what effect will they have on the design?

6 – These terms we found to be confusing and perhaps a bit of overkill for the homepage.

Here are a few screens of todays progress with a little explanation.

The old homepage didnt really have any indication of recent activity. It was in my original wireframe but we removed it. I’ve put it back as i think that it could be a very useful way of getting to stuff you did recently without necessarily needing to have tagged it up. I guess using the old method you could have clicked the ‘uncategorised’ tag, but this way you get to it directly from the homepage.

Add Stuff (formerly ‘New’) is made more prominent on the home so that we can quickly click an obvious button to get cracking with new stuff. The box metaphor is retained but we now have a graphic instead of a stock photo.

This is the footer – giving quick access on every page to My Stuff in various places.

Other stuff is a temporary label. Here we can get to our contacts and add new stuff from every page. The entire footer design is not developed enough yet – just sketches of ideas.

Kuler suggested this green. Looks ok i think. Not one I’d have chosen myself though!

When we visit the ‘new stuff’ screen we get a simple quick form to add something non-specific, tag it up and even attach some files. The right hand column shown here allows us to get to more specific new stuff like CVs and whatnot.

The ever present tags. Rachel spoke to the user group today who were very positive about the predictive text method of adding tags.

Contacts and sharing are a big task but im enjoying playing with a few ideas. This is the screen where you get to add contacts, assign them to groups and even add groups too. The idea is that some groups are non-negotiable. Like tutor groups – they would appear here and you’d not be able to delete or change them.

Here are 40 or so screens I prepared for the first focus group for the OU ePortfolio “My Stuff”. I worked right up against the clock on this one so what you see is more ‘big picture’ than anything else.

I’m now in the process of breaking the design up into little pieces to create a ‘style guide’ for the default theme. You heard correct – themes!

A plain ole’ homepage.

A plain ole’ homepage with some added components. Gives a flavour of how a user might customise their homepage by adding in bits and pieces that they want to see.

Just added this one. Another alternative. Less duplication – but still some! – see Thanh’s comment below.

This builds upon the design style we decided to go with. This time it’s more polished and contains a sitewide footer. I think that we could do a Flickr and put a lot of useful stuff in the footer nav. This could ideally be toggled on or off in the user preferences which i have re-labelled ‘Settings’.

Thoughts please!