ePortfolio design options
Here are my ePortfolio designs. Please comment on them using their reference number.
You are not commenting on the wording, just the overall look and feel!
001
A plain and simple design using a few brand colours, official fonts and big “web 2.0” type.
002
Building on 001, this adds a little more design but still keeps it minimal. The icons each side of the box would get more design work for the final version. The top bar remains slight but gains a background colour.
003
Radically different from the previous two designs. This follows the orangy designs I’ve worked with thus far. I modelled this on those touch screens you get when buying stuff in Argos. Also, mobile phone web apps where screen space is sparse. Top bar gets a mere three items – link home, new stuff, view stuff. The secondary global nav – help, prefs and search are moved away from the main two options.
004
More subtle than 003. Uses elements of the previous two styles but the top bar gets more items of equal weighting.
005
Again, this uses bits of previous designs.
006
Marrying with Moodle. I took David Winter’s current Moodle design style, added some of my stuff whilst changing the colours to suit the more pastel pallette of Moodle.
007
This one uses Moodle as the main influence, removing the bog text and images of all my previous designs. Possible less ‘web 2.0’ in design feel but strongly aligned with the current OU design direction for Moodle.
Tags: Eportfolio, Graphical User Interface, Web design
Like 006. It seems more engaging than many other parts of Moodle, but a lot of Moodle design seems quite basic and I think there is a general feeling to improve this. It is also engaging without being completely informal, as per the designs that are heavier on oranges and reds.
I think ‘new upload’ should read ‘upload file’ so that the word ‘file’ is used consistently in both ‘new’ and ‘view’ areas (the distinction between files, pages and compilations is relatively subtle and the lack of consistency confuses things further).
September 12th, 2006 at 10:58 am
I think you’re right Anthony. I had toyed with this in my wireframe where it became very apparent that ‘new upload’ didnt fit with the consistency of everything else. I lef tit that way for the time being but you have confirmed my thoughts. I think I will change it. Unless anybody else has an objection?
September 12th, 2006 at 11:11 am
I asked another designer for his input and he responded thussly..
001 – perhaps too much white space, the icons are very good, like the emphasis on ‘new’ and ‘view’ in the middle
002 – not keen on the main graphics. the eye to illustrate view doesn’t really do it. Bringing in the ‘new’ and ‘view’ links is a good idea, I’d like to see them listed with their own icons, that’d be cool!
003 – I like the yellow but again not keen on the view illustration. The eye is a bit glaring, some people don’t like eyes (even though it’s not a real one)! Also kind of dig the idea of moving the lesser navigation links away from the main one’s
004 – By far the best in my opinion. The yellow is in there but not too much, it brings the global nav out nicely. I like the simple ‘new stuff’ and ‘view stuff’ links, nice big text and simple graphics. There’s something about the links at the bottom that doesn’t quite fit with the rest of the design though.
005 – Now I think about it I do prefer the help, prefs, search nav items in the global bar
006 – Quite nice looking but feels a bit too technical. It doesn’t look as simple as the other designs which I think is key with these sorts of interactive sites
007 – Same as above but no images to attract the eye!
Hope this helps.
S
September 12th, 2006 at 11:14 am
Here’s my order of preferece from favourite to least preferred: 2, 5, 4, 6, 1, 3, 7.
Design 2 and 5 are attractive, but I query whether these imagery persists throughout the sub-pages, or are they simply on the front page.
Design 4 and 6 are more functional and more akin to current designs used within Moodle. I would say design 6 is a safe option that doesnt generate any dispaute. Design 4 is more cleaner and less Moodle-ish; I like the more whiter-tones which matches our current branding direction.
Design 3 works as a front splash page; but I dont think it has any more potential. Design 1 and 7 are simply uninviting.
September 12th, 2006 at 11:23 am
Thanh, this is simply the homepage. It’s a good starting point for the design direction but the content pages will be much more subtle, using the style we go for to influence them. Sub pages will not have big design images, they will instead focus the user on a task or enable the user to see their stuff without too much design clutter around them! From that respect, after the homepages, the design will become increasingly minimal, functional but relevant to the context.
September 12th, 2006 at 11:28 am
I agree with Anthony on the terminology point.
But I might also extend it to page and structured page. I think Structured page should be changed to Forms.
Page is find for creating generic blank documents to be compiled into any portfolio (e.g. a website); but Forms are very specific structured content that does not and may not fit on one page. So it may be slightly misleading to equate structured page with a form in terms of terminology.
September 12th, 2006 at 11:29 am
With ref: to Guy: Sep 12th, 2006 at 11:28 am comment:
Thanks for the clarifiaction. My order of preference stands.
September 12th, 2006 at 11:31 am
I agree to not call it a page. Still not entirely sure about creating a new form..
http://raven.open.ac.uk/wasp-authors-html/NTSS/eportfolio/v5/index.php
This is the current wireframe structure. Do you think ‘New Form’ would be meaningful? Maybe there is a better label… Discuss.
September 12th, 2006 at 11:32 am
I think Forms says what it is; so may be we should use it for now until we come up with something better.
I’m aslo pondering on the word records as in “Records Management”. What does this word say to you?
Other ideas:
Structured Content;
Structured Information;
September 12th, 2006 at 11:37 am
I like ‘records’. New ‘record’ could be interesting. Its more descriptive of an action. I am recording something.
Forms doesnt really say what im doing. It’s the means rather than the end.
You could argue that new page and new compilation are odd from the same angle but ‘compilation’ does feel like ‘im creating a compilation’ and ‘page’ – im creating a page. ‘Record’ fots well with this but ‘form’ does not. I cant work out why.
‘Forms’ may feel a little administrative which seems to go against the fun aspect of the tool.
September 12th, 2006 at 11:46 am
I can go with records. Yes record is the action verb and the means and the act of recording can be through a form; so they are complimentary in a way.
September 12th, 2006 at 11:48 am
If nobody else has any objections then im gonna lock down on “Records” as the term.
September 12th, 2006 at 11:49 am
Hi
Haven’t read everyones replies – and am picking this up between meetings. HOwever, I really don’t like the lasst 2 – they feel very formal and grey. 3 the icons etc are perhaps too big, but I like the idea of more colour.
Four – feels friendly and quite brand.
Once you have decided on one (presumably at the end of today) – then the next iteration – it might be worth getting comments from David Winters.
Great to be seeing some screen shots!
Rachel
September 12th, 2006 at 2:38 pm
I’m gonna go with 4. It’s my fave too. It was third in Thanh’s selection. Anthony liked 006 which has a similar layout but more formal colours. The friendly and informal yellow topbar is still appealing to me. I’ll work around this version for user testing.
I guess we could always offer ‘themes’ along with accessibility options so people can skin the thing however they like?
September 12th, 2006 at 2:52 pm
I will go with four as well.
Yes, do structure with “themes” in mind and making sure when designing that you note which components are themable.
September 12th, 2006 at 2:59 pm
sounds like fun 🙂
September 12th, 2006 at 3:00 pm
006 is the least deviation from the moodle look. At this stage I would advise sticking close to this as this maintains consistency. The end user is familiar with the style and can concentrate on the content, the presentation of the content is great, right to the point. The layout is the same as 004 your own favourite.
I agree that the yellow background is more informal but from an accessibility point this colour scheme could be a problem in terms of adequate contrast. You could look at 006 with more colour variation.
I really like the web 2.0 influence – the increased font size and the more simplistic but more intuitive interaction, this is definitely the right move.
My input would be too maintain as much consistency as possible, at this time that requires following what may seem as restrictive design practice. Further work is needed too define what we can and can’t do and as you know this is on going work in the styles and standards project.
I hope this helps.
September 14th, 2006 at 4:58 pm
Much friendlier than ther the August version – I love the very ‘laid back’ box. Perfect for a store of miscellaneous ‘career’ stuff! I liked the 004 version best, but not a big deal either way.
But if you read the long comment I’ve just added to your ‘Geography trip’ blog, you will realise that course specific portfolios are a bit different. E.g. a series of pre-set course-related reports.
Perhaps one might be able to switch to something like a card-file box with labelled tabs, or a well-thumbed box file? I.e. keep the basic ‘box’ metaphor, but have the capacity to vary its ‘box qualities’ for different contexts? Posh boxes for some things, laid-back boxes for others!
Something I’ve also suggested elsewhere is that take-up of the e-portfolio is likely to be very much higher if it can serve multiple roles. For instance, if it can also be used as a general ‘e-assignment preparation, storage and submission’ facility, it would be much more likely to be used. After all, TMAs are likely to make up a useful chunk of any portfolio. But that sort of use might not quite match up to the ‘laid-back’ box!
September 15th, 2006 at 3:46 pm
All useful and valid points. We have a ‘formal’ and ‘informal’ setting which largely refers to the language and the way the thing talks to you. But we can also identify the specific design styles for various functions within the system. Course-specific cutomisiation is a key feature of the spec. I guess Thanh will be able to explain exactly the scope this though.
September 15th, 2006 at 4:46 pm