My Stuff official design – v1
September 12th, 2006
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!
Tags: Eportfolio, User experience, Web design
Its taking shape.
The second screen seems to have a layer of duplication/redudancy with the info/links repeated twice.
The same duplication issue applies to the footer and header-nav. Any work-arounds?
If we go for the second screen, how about dropping the horizontal new/view and only have the column new/view.
September 12th, 2006 at 4:48 pm
Interesting. When i first read what you were saying i thought you meant drop the header (horizontal nav). Then i realised you were referring to the component links (the square boxes for new and view)! But i now get what you mean.
I kinda imagine that we should have a nice footer across all pages with links to common items. We could make this part of the customisation though – the user can define what appears here. This way they have access to stuff from more than just the homepage.
I dont see any problem with duplicating header and footer stuff (especially for longer scrolling pages). This simply reiterates what you can do, where you can go.
But this is just an idea and im not particularly wedded to anything. Let Rachel have the final say I guess.
September 12th, 2006 at 4:54 pm
Ive just added a third pic. Been smashing these out fairly rapidly today so expect further tweaking and refinements. I guess Im looking for the nod from the boss! 🙂
September 12th, 2006 at 5:02 pm
The third screen looks much better.
I’m OK with the footer; especially if the user can choose to turn it off.
More advance, and needing more investigation, would be nice if the footer could pop up via DHTML, but not sure about the accessibility issue and key stroke access for the pop-up footer. Just noting it but not suggesting we do it now.
September 12th, 2006 at 5:04 pm
Wanna see a great working example of that exact thing? See Shaun Inman’s site:
http://www.shauninman.com/plete/
Accessibility-wise im sure it can be done!
September 12th, 2006 at 5:06 pm
I’ve seen the pop-up idea before. See:
http://www.codeigniter.com/user_guide/
The issue remains: keyboard access to the pop-up?
September 12th, 2006 at 5:08 pm
I wonder who came up with it first? Keyboard access? Sure – accesskeys. You could tab to it or hit, say ‘alt n’ (n for nav) that should toggle it.
September 12th, 2006 at 5:09 pm
I like the first screenshot. It seems less cluttered and nothing much is repeated. The icons look good. From an aesthetical standpoint why not try organising it so that the ‘my stuff quick navigation’ is flush with the blue boxes and the search box is to the left, flush with the cardboard box.
September 12th, 2006 at 5:10 pm
Maybe worth passing this pop-up use-case to Chetz for a definitive yar or nay.. we’ve got to working examples.
September 12th, 2006 at 5:11 pm
Stephen – yes, a good idea. Will try. I’ve used a rather complicated grid here which allows for different numbers of cols but maybe i should simplify a bit more. I shall have a play.
Thanh – Sure, go for it. I just tried to access Shaun Inmans via tabbing and it work fine. No keyboarding required! But we should also seek to add an accesskey to the nav.
September 12th, 2006 at 5:14 pm
I’m liking these Guy. Very clean and crisp. The DHTML could be very simple in fact (just showing/hiding divs). I’d be wondering how screen readers handled anything beyond that.
One point. If the top navigation was on the left then the ‘sub items’ could appear as nested items. Probably not quite so Web 2.0 but practical nonetheless. I think it would be better to show/hide sub items otherwise the top menu would effectively become redundant. If the options for view/new are repeated in more than one place on the page then the user might be misled into thinking they are different actions.
September 13th, 2006 at 9:09 am
Hi Dave. I take your point. But by using a portion of the content space for navigation we could get into all sorts of trouble when we start needing a lot of contextual navigation for example a structured form sequence. We could end up with more navigation than actual content! For that reason id say, work around the idea that there will be no left-hand windows explorer type nav. The global navs will either be at the top or bottom. The main portion of the page will have contextual navigation only.
You other point about user mis-interpretation is an interesting one. Maybe this is sometihng we could test in the user-testing? If it seems that too many people are having trouble then we could abandon the footer nav altogether.
September 13th, 2006 at 9:18 am
Hi
I prefer 1 as it is less cluttered. I do like the quick tour button, but people should only need this once (or twice) with any luck so I am not sure we want it that prominent all the time. We need to it hide away – somewhere findable e.g. in the help pages.
What are the plans today – will you be finishing this off and working on some of the other screens?
I am around most of the day to day – so will keep popping in!
Should I ask anyone else to look in e.g. VLE BPLs e.g. harriet, Dan, or leave it until we have the screens for user testing.
Rachel
September 13th, 2006 at 9:29 am
Rachel, since you are the ‘client’ i will go with no.1 EDITED Keeping everything simple and minimal. The others were merely to show the user prefs having asked for ‘more’ on the homepage. We do not need to present these to user testing though.
I wonder if you woul like to test a screen with the footer nav for user-testing though? See if this is an option people would like?
I sent an email regarding my plans for today – mostly locking down the structure. Basically a complete plan of what will go on each page. No more features or different labels as of today. So if you have any specific issues that need sorting i need to know asap.
I would not include anybdoy else right now as we are locking this down for testing. Would be better to channel their feedback after the testing where we can act on thier suggestins. Everybody happy with this?
September 13th, 2006 at 9:35 am
Thanks!
I get the desgins now – I think if possible we ought to test:
a) clean
b) if you choose to alter the front page – we should ask a question about the ‘personaling options’
c) yes lets test the footer nav thing if possible
David – since AA100 have this idea of pulling a form on to the front page e.g. so AA100 students get immediate access to the learning journal – it might be interesting to think about what this would look like. Is that possible for the user testing?
Cheers
Rachel
September 13th, 2006 at 9:44 am
The footer I think will work if its sliding and not always visible. I’ve contacted Chetz Colwell to assess the accessibility concerns. If we cant use sliding, then I will probably go for a minimal footer, or a footer that has expanded sub-menu or no footer.
With ref: to showing others, I think we should show it to the small select group Rachel mentioned next week and definitely after we lock down the design this week. They can be good feedback to allow us to do some minor tweaking if necessary.
September 13th, 2006 at 9:45 am
OK – well lets not show people this week. However, we might decide to get some feedback late next week.
However, Guy what about asking David – so that we can be sure the moodle designer is kept informed at all times.
Select group:
Chetz
Keith Honnor
Clive (arts)
BPLs
September 13th, 2006 at 9:47 am
Have told David Winter. He has said he will have a look. Im hoping he’ll pop up on here sooner or later to give some valuable feedback!
September 13th, 2006 at 9:55 am
One point on terminology. Has ‘Create’ been considered instead of ‘New’. ‘Create’ clearly implies a user action wheras ‘New’ may not necessarily be interpreted in that way (i.e. it could be seen as something like ‘new/latest news’ in some (not all) peoples minds).
September 13th, 2006 at 9:57 am
Yes it was considered. Create, Add and New were all options.
All three had arguments for and against so I made the decision to go with ‘New’ for two reasons:
1. If people are used to using MS Word (and indeed any windows / Mac app) – ‘New’ will be familiar
2. New rhymes with View
😉
Can we stick with ‘New’ for the testing? We can test this label too?
Is anybody keeping track of all the things we want to test in this respect?
September 13th, 2006 at 10:02 am
Sorry, I’m thinking on the hoof hence the separate messages. I noticed that the sub items in ‘New’ and ‘View’ are pretty much identical. One alternative might be to have a single list with ‘New’ and/or ‘View’ icon links next to them.
September 13th, 2006 at 10:02 am
Good point Dave. We may be able to reduce the space requried to display the footer.
Guy: note all the testing points/terminology points as we come across them. Hopefully these blogs are a good record in themselves.
September 13th, 2006 at 10:06 am
Yep, a very good suggestion.
That would reduce the nav down even further! Would no longer need a ‘New’ tab. Just a ‘View’ tab!
Running like this:
Your Stuff > | View | Help | Settings | Search
However, some users might think you cant add anything or something.
But view would be:
View
* View files | New file
* View records | New record
etc.
This kinda thing already runs throughout what ive done to date.
The addition of the ‘New’ tab was simply to make it more obivous to a user that the functionality exists. Also Thanh was keen for me to separate out the functionality as much as possible.
Again, if we go with the current model for now and revise after the testing that’d be cool.
September 13th, 2006 at 10:11 am
Rachel, I was just thinking about your point:
‘since AA100 have this idea of pulling a form on to the front page e.g. so AA100 students get immediate access to the learning journal – it might be interesting to think about what this would look like. Is that possible for the user testing’
I was wondering how this could happen. Are the forms (or atoms) likely to be accessible from the front screen too? I was under the impression that users (not necessarily for AA100, perhaps for a CV) would have a choice of either going straight to the atoms or working through a wizard. Could these sit under resources or would they form new categories? My concern about the atoms is that it would become a giant collection of links. That’ll need some thinking through. If I can get some indication/thoughts on where you’d like to see users accessing these elements from then I can start to think about subsquent structures/functionality.
Ah yes, and I was wondering whether a student would want to have the view/new disctinction on these elements or whether they would, for example, just go to the learning journal and then decide what action to take.
September 13th, 2006 at 10:17 am
With ref: to Dave’s comment…
My take on this is that for those customised fonr pages, then they do not need to stick to the generic navigation convention, but they should be in align interms of terminology.
There is great flexibility; and I would say it depends on what is required for the context; e.g. AA100’s learning hournal, the CV, etc.
This means that for those “customised” front pages, they can decide to whether focus on atoms and wizard, or just atoms or just wizard.
Regardless how the navigation is access or the fucntion triggered, the outcome is the same as the generic front page. Stuff gets collected into their repository and these stuff can be of type “atom” (file, records) or “compilation”.
September 13th, 2006 at 10:24 am
Further to my mail:
With ref: to the managing of the many atoms…. it is the job of the compilation to manage the many “atoms”. Its part of the design of a “Portfolio” to determine how the “atoms” are related and managed.
September 13th, 2006 at 10:26 am
Hi
Lets go with new and view for the moment – we can ask Anne J. to ask if create is better or if just view would do.
Rachel
September 13th, 2006 at 11:55 am
Quick note to Thanh and David..
The ‘View’ and ‘Edit’ views are considered to be one in the same. Although some parts of the view page will not be editable – properties like date created, unique id etc.
This is why there is no explicit ‘edit’ function. In order to edit something you must have to view it – therefore it’s all a part of ‘view’.
And if possible, the user can edit the actual page they are viewing right then and there using Ajax. If they cant, then they are taken to an ‘edit’ version of a page which reveals all the things they can change in one go. To get to this, any page in My Stuff (a file, record or collection page) would have a ‘Edit this page’ button on it.
Make sense?
September 13th, 2006 at 1:20 pm
Um, I’m a bit confised now. My distinction was between ‘new’ and ‘view’ (with reference to creating new objects or viewing (and possibly ediing) existing ones) as opposed to ‘edit’ and ‘view’. There seems to be a lot of overlap on the sub menus for ‘new’ and ‘view’. Rather than having the items repeated it may be better to list them once and give the user the choice of action on the item (e.g. new, view etc)
September 13th, 2006 at 1:38 pm
“New” is the creation of a new thing.
“View” is viewing a thing.
Whilst in “View” mode you can edit what you see.
The “New” part of the process only happens at the birth of an item. But essentially you return to edit everything you put in “New” when editing.
Yep it is very confusing!
The way you mention makes a lot of sense and will easily incorporate into what we are doing. In this case, imagine there is no ‘new’ tab. Just ‘view’.
Scenario 1:
View > records
System: “you have no records. Create a new record”.
Scenario 2:
View > records
System:”You have three records
1. Reflecting on my Geography Field Trip (view | edit)
2. My Interests (view | edit)
3. My Work Experience (view | edit)
New record
”
This view is built in already. This is how it works.
The “New” tab is simply another way of getting to this point.
September 13th, 2006 at 1:47 pm
Building on this. The main IA would function like this:
* Files > new | view
* Records > new | view
* Collections > new | view
* Tags > new | view
* Basket > view | empty
* Sharing > view
* Deleted > view
* Archived > view
* Import > new
* Export > new
* Locked > view
* Help > quick tour | faqs
* Settings > personal | accessibility | tone of voice | home page
* Search
Too many items for a top-bar! But more akin to my initial wireframe designs and IA.
We went for the current IA to separate things out a bit more but in essense, we still have the approach above, just a differnet presnetation on the home and global nav to funnel people to it! I guess I was looking for a less top-heavy design.
UPDATED:
And that’s why we have this:
* New > File | Record | Compilation | Tag | Import | Export
* View > Files | Records | Compilations | Tags | Basket | Shared | Deleted | Archived | Locked
* Help > quick tour | faqs
* Settings > personal | accessibility | tone of voice | home page
* Search
It’s a more active view.
Task: I want to create a new CV
Scenario 1
1. Choice – “New” or “View” – i click “New” cos i want to create a CV
2. Choice – File, Record or Compilation? – Because each of these headings has a clear description about what they mean I correctly choose “New Compilation”
3. I click the CV compilation Wizard and off i go
Scenario 2
1. Choice – “New” or “View” – i click “View” cos i want to see the type of CV i can create
2. Choice – File, Record or Compilation? – I have nothing here. The system tells me this and asks if i wanna create a new thing!
3. I accept the kind offer and pop over to point 2 in scenario 1.
Each Information Architecture has it’s merits so I will do my best to make sure both ways are represented!
September 13th, 2006 at 1:57 pm
Hmmm. Getting much more complex and messier than the elegant versions at p=98. Beginning to look off-putting. Don’t like the ‘Quick navigation’ panels at all – any non-IT-comfortable level 1 student seeing that lot would freak out. By all means have it as a pop-up option for the ‘e-portfolio regular’, but protect the poor beginner!
Also from my ‘course-specific portfolio’ point of view, these buttons don’t look very relevant to my students, in so far as I understand them. The idea of one of my students who has just finished a course activity and is ready to submit his/her first report of the course, clicking on the site ‘report’ button and being confronted with this lot is a bit horrifying. All he/she expects is a text entry area (perhaps with a template) and a few related control buttons – not a Boeing 747 cockpit! (:-))
So I guess I’d need to junk most of this, and the big question for me is how fully this can be reconfigured for course-related use?
I still haven’t got my head round what would be (will be?) involved in re-working my current T185 material for a Moodle-based framework, but T185 (which is written directly in XML) uses its own variant on the Relevant Knowledge style template, and my portfolio software has a style ‘skin’ designed to match.
How easy will it be to ‘re-skin’ this portfolio design to match a particular course or programme?
September 15th, 2006 at 4:12 pm
Hi John. You are right and the feeling has been that there are too many options if we introduce a global footer of this size. I am going to make it an option in ‘settings’ instead so the actual pages really do focus on the task in hand.
‘Cockpit’ – lol. Yes it’s a bit like that isnt it? I think the idea is that specific courses will be able to change how and what things appear on the homepage default. Once we have a fully working prototype we’ll then stick it in front of the actual users – yourself included so you can say how you’d have it customised to your specific needs.
I am designing the system with the idea that it can be skinned using various themes. These themes could be user-created and shared. As i am designing, im making note of the areas of the design that will be themeable. I shall come and bother you for more thinking on this!
September 15th, 2006 at 4:43 pm
Hi folks. I always keep an eye on this blog so it’s interesting to see “My Stuff” taking shape. We’ve discussed it before and there is clearly a lot of sense in modelling this on Flickr/My Space-esque design, but how does that fit into the VLE/online experience as a whole? Potentially it will look quite out of place to other developments.
It’s certainly an area where we would benefit from a more holistic design input (although Harriet and I are trying to push this right now).
Other than that I’ll leave the specific design input to your group for now, and remain an interested party until you make the design more public 🙂
September 19th, 2006 at 10:41 am
Dan – im meeting with Daivd Winter this week to discuss the overall design direction of the VLE. I need to be a bit clearer as to what the unified VLE interface actually is. Rachel suggests that what we currently see as moodle course desktops is not necessarily what will be in place for summer next year.
I guess im still not sure about the ‘big picture’ for the VLE experience but once i have something tangible ill be able to work to that. For the time being im not harbouring any assumptions about what may or may not be but concentrating on a contained my stuff experience. This is not to say that it will stay like this, but we need to lock down for some usability testing so that’s what you’re seeing on here right now.
Your input is hugely valuable so keep on posting!
September 19th, 2006 at 10:49 am
I’m in complete agreement with Rachel, it’s not yet clear how things will look like by next summer or indeed the summer after.
What I would like to see, and will be pushing for from our end, is that interface issues are addressed as a priority so that we can get the look and feel consistent across all the projects as well as the existing areas of Moodle functionality.
However my current perception is that this is not viewed as high priority.
September 19th, 2006 at 10:55 am
I need guidelines! Gimme guidelines and im happy. Also, am happy to feed into guidelines! Maybe there needs to be some sort of working group setup for this? Maybe this is a Harriet project?
I’ll continue on my merry way until something concrete emerges. Im designing with the idea that the whole ‘My Stuff’ app can be skinned or themed anyway. Things like consistent headers and footers will also be easy to slot in and out as they become available.
I think it’ll be OK. 🙂
September 19th, 2006 at 10:58 am
Guy – I could you give access to Harriet and Dean Taylor – that way we can try to influence
R
September 19th, 2006 at 11:45 am
Yes, gimme access! That would be very useful.
September 19th, 2006 at 12:05 pm
The ‘Dan’ discussion seems to be talking merely about making the e-portfolio ***look*** like part of the VLE – i.e. it is still clearly ‘a different thing’ but must look as if it is from the same stable.
So it might be apt for me to repeat something I’ve said earlier: IMHO, this is more than just design compatibility – it needs to be functionally linked at quite a deep level so that it is not just a portfolio for those who happen to want to maintain a portfolio, but is an integral part of the e-TMA system as a whole.
I.e. I can store all my TMAs there, I can submit a TMA from there, etc. even if I couldn’t give a damn about maintaining a portfolio – and vice versa, of course.
This would make the whole thing much more useful for everyone, and I think it would increase take-up dramatically.
I can fully understand that the internal politics of joining the e-portfolio and e-TMA system might be tricky, but it is a historical/political distinction, not a useful one.
By the way, I’m saying this from a position of blissful ignorance of the earlier discussions, so my apologies if I’ve got hold of the wrong end of the stick! Just tell me.
September 26th, 2006 at 6:47 pm
Email Marketing Software Drives Sales with Landing Pages
Email marketing software has clearly proven itself as not only an important component of the marketing mix, but also as a pivotal medium for driving up sales. The Direct Marketing Association recently conducted a study that determined there is a return…
February 4th, 2008 at 9:16 pm