23 December 2018, 16:26

Hello everyone,

We've had the current look of the Mahara pages for quite a while. It's served us well and allows for flexibility in creating content as well as adding different content items to a page without needing to know HTML tags. However, It's "blockiness" has been remarked on, and we want to look into how we can address this.

Mahara content is put onto pages via blocks. In general, that is not questioned. Some people would like to have it changed of how the content is added to the page, e.g. via one block only and then select the content item rather than making a selection first. That is a topic for another day...

A number of website builders that use drag-and-drop do use blocks as that differentiates content nicely, and it is easy to drag it around.

So for this idea here we are looking at the look and feel of a page when it is displayed. We are looking at how the header, containing the page title and collection navigation in particular, can be changed to allow for better display, and how all artefact details elements can be accessed without making them overwhelm a page. For example, when you add lots of pages to your page and allow commenting, then you see an equal amount of "Add comment", "Comments", and "Details" link that may destroy a cohesive display of the images if intended for a showcase portfolio where comments may be secondary.

Therefore, we are proposing a few ideas of how secondary page options could be accessed if needed by an assessor or peer reviewer without impacting the flow of the content on the page otherwise.

Please take a look at the various options on the wiki. They are still in mix-and-match mode. Thus, if an element from option 4 appeals but the rest of option 1 is better, then they could be combined.

What do you think? What appeals to you? Do you have another idea?

We look forward to your responses.

Cheers

Kristina

15 February 2019, 6:16

Hi Kristina,

Having taken a through look through the options, I certainly like the idea of an assessment mode, but I think that it would have to be a combination of the options in order to fit our needs.

• As the collection navigation drop-down menu only recently (from my perspective at least) moved to the right-hand side of the page. I would be loathe to see it move back to the middle. So with that in-mind I prefer Option 1.
• However, the reliance on icons alone in Option 1 probably isn't accessible enough for our needs as we do encounter issues around icon interpretation in the system. Therefore we would benefit from retaining the labels next to each icon as in Option 2, but that competes for space with the navigation drop-down menu.
• With this in mind if labels were added to Option 4, that may be the best fit. The title text placement on the left is good, although overall I would like to see a clearer, larger H1 text here than shown in the mock-up (which is swimming in a sea of grey background in terms of contrast for quick reading and legibility).
• A general point that I would add about the buttons is that a frequent point of user error is the placement of the copy button right next to the edit button. Students often end up with multiple copies of an ePortfolio page template when they are trying to edit one and this often leads to confusion for students and markers. I would like to see this button placed elsewhere (perhaps under the three dots signifying more options?).

I hope that this feedback is useful and if I can be of further help please let me know.

Fiona

15 February 2019, 8:22

Hello Fiona,

Thank you very much for having taken the time to review the various options. I appreciate your feedback very much. A combination of the options is definitely something that is on our mind.

Please see https://bugs.launchpad.net/mahara/+bug/1815829 for the current proposal of what we are going to look into for 19.04. I'll take your feedback to our designer in regards to the size of the page heading on the background.

We have had the copy button not in the "More options" one so that it is easier for people to see which portfolio can be copied. Do you see that as necessary with the learners you have or would they always know what portfolio they should copy and wouldn't consider copying others? If it is not so important to see the copying option immediately, we could move it to the "More options".

What you can't see in the mock-up is that each button would have a tooltip when you hover over it to mitigate that icons could be interpreted ambigiously and also for accessibility. We wanted to exclude showing words when you view the page as different languages may have very long words for the actions and thus take up quite a bit of space. Does that change how you view only having the icons visible on the page?

Thank you

Kristina

20 February 2019, 1:49

Hi both,

I love the idea of an assessment layer!

Just to say that I too like Option 4 with the header to the left, navigation to the right, and the assess icons to the right of each block to be assessed.

I have to agree with Fiona though, that the icons alone probably won't be enough for assessors - especially in the first instance. Could a compromise be made, similar to the blocks menu when building a page, where the icons can collapse and expand to reveal each one's purpose/label?

Personally, I quite like how the buttons are displayed in a row above the collection menu in option 1 :)

Regards,

Sam

21 February 2019, 6:01

Hi Kristina,

Thanks for sharing the proposals for changes to page layouts.   

I love the idea of an assessment layer and it would make it easier for our examiners to assess the portfolio content.  Commenting and annotations are used extensively for formative assessment of the portfolios but when submitted for summative assessment it's not vital that our examiners see the comments. However, they have said it is useful to have the option to see any feedback given.  

Would the modal pop outs apply to annotations via Smart Evidence?  

I also agree with Fiona and Sam that we shouldn't rely on Icons alone.  A lot of our users would struggle with identifying the blocks if the labels were removed and we just relied on the hover over text.   As Sam has suggested, having the ability to hide the text could be an option.   

If I was to choose a layout option, I would go with Option 1 or 4.

Fiona has touched on a good point about the copy icon being next to the edit button.  It may explain why our candidates keep making multiple copies of their pages!  I would be happy for this to be moved to more options.

Best wishes

Jane  

22 February 2019, 19:06

Hello Jane and Sam,

Thank you very much for your feedback. It's good to see that we are on track with what you have also seen. We are going to look into placing the copy icon into the "More options" menu.

We opted not to display the buttons at the top right below the main navigation menus so as not to get into problems with sticky fingers on mobile devices.

For the release candidate we are going to implement the icons only version with the tool tips on hover and would like to ask you to test that and see how it feels. Having a menu option like the content chooser would introduce another icon that could be misinterpreted. Words would also prove problematic in languages that have long words where English coincidentally has short ones. Keeping screen real estate in mind as well as the fact that page and collection titles can be very long, text buttons would not work well on smaller screens or big screens where the browser window is not in full width. The long buttons would also always overlap block content or reduce the space available to blocks as they are always present.

Eventually, there will be a maximum of 2 buttons for authors: "Edit" and "More options" that are very different from another. Viewers will even only see one icon, the "More options" one.

In the next phase, 2 more icons will be introduced: The info icon for page info to pop out and the assessment icon. Selecting the latter will be interesting, and we'll scour Font Awesome carefully...

Annotations are already visible in the modal when on the SmartEvidence overview map and when viewed on a page, the modal also slides in from the right.

I look forward to your test results in April once the preview version of Mahara is available.

Thank you

Kristina