UX /UI Design Improvements

UX /UI Design Improvements

by ahssan moshref -
Number of replies: 16

Context
I work in Health Care. Our organization is using a very basic moodle shell with many features turned off and little flexibility for customization. Over a duration of 6 month, I have collected data from our users in conversations, trouble shooting and evaluations. There is a gap between what our users (organization, learner, Educators ( SMEs) , Instructional Designer, Designer want/need on one hand and what the moodle version we have installed allows them on the other hand. 

Goal
The course shell I am sharing here contains the improvements I have made using widgets, JavaScript and CSSI would like Moodle to consider some of these enhancements to be part of Moodle Core. The improved interface would benefit everyone. 

Course Link

https://learninghub.phsa.ca/Courses/21144/c-shell-sandbox
to log in
 you do have to register for an account and guest access has been disabled (my apologies for this inconvenience in advance) 

Design Improvements:

  1. Modale pop up
  2. Cleaner UI
  3. Smooth scroll up
  4. Sticky table of content in the books
  5. Better UI for navigation buttons within the book
  6. Standard font size of 16 

There is more but I figured I will start with these and document them in the days to come for discussion.

I am looking forward to collaborate  and help in anyway I can. 
Thank you.

 
Average of ratings: Useful (2)
In reply to ahssan moshref

Re: UX /UI Design Improvements

by Michael Milette -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Ahssan,

Which Moodle theme are you using? Knowing this would help me to be able to identify what your changes are compared to the default look of the theme.

Best regards,

Michael

In reply to Michael Milette

Re: UX /UI Design Improvements

by ahssan moshref -

Hi Michael, 

The theme that our LearningHub team customzied is based on "Clean". Over the years they made several updates to it. 


custom theme

 What you see in the course https://learninghub.phsa.ca/Courses/21144, has the additioanl CSS that I applied to it. The CSS is imported via javascript from an external site as I don't have premission to modify the theme itself. 

All the suggestions for improvements are uploaed within the course, And I am in process of creating documents to point out the design changes. 
For example :

the PDF captures changes to the home page. 

The books demonstrate the changes to the book.
( read baby blue highlighted text within each book for guide)  

reference

I realize that since 3.5 there might be other improvements in the newer versions. It might be better if I worked of the latest moodle version. I will try, (TRY), to install moodle on my own server, independent from our organizaiton and work on the most updated version of moodle. This way I don't have restrictions to explore and push the boundaries of certainty. 

 Please let me know how I can helpf further clarify. 

Thanks a Million




In reply to ahssan moshref

Re: UX /UI Design Improvements

by Randy Thornton -
Picture of Documentation writers
Ahssan,

You might want to know that Clean and More themes were removed from Moodle 3.7 (and the Boostrap 2 base on which they relied):


Your improvements based on Clean will probably- depending on what they are - mostly break in Moodle 3.7 and newer. As unfortunate as it is, Boost will be the only base / default theme moving forward. You will probably need to do a significant rewrite of your work to adjust before upgrading, but there have been many child themes of Boost built which attempt to improve or work around its many deficiencies. So, those are worth investigating too to see if they solve some of your needs first.



Randy
Average of ratings: Useful (2)
In reply to Randy Thornton

Re: UX /UI Design Improvements

by ahssan moshref -
Thank you Randy for the information. I was not aware of it.
Currently it is only being test on five online modules. The changes are very basic and when removing the css or turning off from the html block within the course, the default layout will display.

I am okay with change as long as it is one-step back but two steps forward, which is often the case with progress. (Preferably going one-step back is not acceptable when it affects thousands of courses). But we are all in search for better solutions.
My intention with the codes is not to hold on to them. I like to see the core get better with each version. There are some standard UI and IxD elements that every modern website has. These yield better usability.

At this stage I think I have to go “one step back" and get my hands on 3. 8 Moodle
In reply to ahssan moshref

Re: UX /UI Design Improvements

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
At this stage Ahssan, you may want to look at 3.9 - although it's still in development (release due in May) it is slated to be a long term support version (or maybe ensure your ideas work on both 3.8 & 3.9)
Average of ratings: Useful (3)
In reply to Richard Oelmann

Re: UX /UI Design Improvements

by Michael Milette -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
I agree. If you are going to put all this effort into it, you should be trying to implement a sustainable approach so that don't accumulate technical debt. I think you should be able to port a lot of what you are doing into a Boost based theme with just a bit of effort. For example, I added UserWay to my Boost-based theme without any trouble at all.
In reply to ahssan moshref

Re: UX /UI Design Improvements

by ahssan moshref -

UX 02 - Book Design


  • Improved UI for navigation ( Next, Back, Exit)
  • Sticky table of content
  • Smooth scroll
  • Third party widgets


Next, Back, & Exit 

  • Icons in color (distinguishable from everything else. ( Creating a pop effect) 
  • Minimum size  35 pix, Maximum size 45 pix ( consider mobile usage) 
  • Centered and single button navigation
  • Separated from content by a horizontal borderline or <hr> light gray (please note proper amount of spacing is required. 
  • Instead of the arrow up which does not represent the action of the button (exit the book), an "X" for exit would be more suited. It will also avoid confusion with the smooth scroll icon.

 

Sticky table of content: 

Ensure that navigation is always visible and available. User does not have to scroll back up to read what is on the menu. Combining this with the single navigation on the bottom omits the need for having a navigation on the top (3 navigations to go to the next page is overkill). What was the idea behind top and bottom navigation? Most sites that used top and bottom navigation for listing products, have abandoned it. 



Smooth scroll:

Allows user to go back to the top of the page very easy and fast (functional). The smooth scroll effect adds to the aesthetics. 



Third party widgets

While WordPress websites offer alternative ways to display social media features. This is missing. 

I have added "UserWay" widget to enhance accessibility for visually impaired users. This adds a completely new level of experience.  

 

 

Attachment next and back.PNG
In reply to ahssan moshref

Re: UX /UI Design Improvements

by ahssan moshref -

Here is the illustration of different states of the book navigation buttons


book navigation stages

Average of ratings: Useful (1)
In reply to ahssan moshref

Re: UX /UI Design Improvements

by Michael Milette -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
I am not a fan of the (X) for the end. I understand what you are trying to convey but X usually means close or cancel. Personally, I would remove it or replace it with a double up (https://fontawesome.com/v4.7.0/icon/angle-double-up) or List (as in table of contents) icon (https://fontawesome.com/v4.7.0/icon/list)

Are you planning on conducting any Guerilla UX testing (sometimes also called Ninja testing) with some users? It is easy to do and offers low cost way of getting valueable user experience feedback.

Best regards,

Michael Milette
In reply to Michael Milette

Re: UX /UI Design Improvements

by ahssan moshref -
Yes X means close or cancel. And it is commonly used with a lightbox type of effect.
The concept is entering and exiting a book or opening and closing a book. In this context, we are closing/exiting a book.
Although I have to admit, having the x on the bottom of the page is not common practice and takes getting used to. But since arrow up is used for smooth scroll up, a new icon was needed for exit of the book.)

I am not sure if double arrow can be interpreted easily with the function.

I guess alternatively, moodle does allow the next and back arrow to be completely hidden. So in that case user would only use the table of content.
And with the sticky table of content, user will maintain view of navigation at all time. In that case a "back arrow on top of the page" would suffice. But that would call of addition of a new button.

I have so far only tested this with a dozen different users at different times ( learner, educators, Instructional Designers). Pulled them into a side conversation and demoed the course to get a general feedback. The feedback on the navigation was that it was better, cleaner, easier to recognize. They agreed that top navigation was not needed ( "overkill") . So a consistent message. But, I did not collect proper feedback on how they interpret the "X" for "Exit book".

Do you think Moodle would consider giving users the option of having just one next and back on the bottom ( so no top navigation) ?
Also the horizontal line on the bottom to separate navigation from content?
Average of ratings: Useful (1)
In reply to ahssan moshref

Re: UX /UI Design Improvements

by Michael Milette -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
Next, Back, Exit: See my previous comment.

Sticky table of contents: Did not review.

Smooth Scrolling: I like this! It helps people find information relative to where they currently are in the document.

Third Party Widgets: Thank you for sharing UserWay. I liked it so much that I added it to my own site and actually have someone who has trouble seeig already taking advantage of its features. The screen reader is very useful. I just wish it had the ability to read title tags. On occasion, it will randomly start reading hidden (as in not visible) content from the page when left on its own. Overall, some really useful tools in that chest.

Still think you should address the mobile issues though.

Best regards,

Michael
In reply to Michael Milette

Re: UX /UI Design Improvements

by ahssan moshref -
Ya the UserWay is better than the ATbar plugin that moodle used to have. The company has also good privacy policy. In my course I intentionally hid some text (e.g. make the text color white) so no one could see it. And then let the screen reader read it in a presentation. It was good entertainment, it made my director and colleagues laugh. ( although UserWay recently updated their AI reader so it does not sound robotic as before.
UserWay will continue to improve. If you have suggestion, maybe send them an email. Their staff is friendly.

The mobile issue around the entire course layout ( shell ) needs to be looked at. Hopefully I can do that once I get 3.8 installed on my server.

thank you for the reply and feedback.
In reply to ahssan moshref

Re: UX /UI Design Improvements

by Tim F -
Ahssan great stuff thanks for sharing! I agree 1000% I think that the really big next step for Moodle is to look more closely at how to offer a framework within the platform so that more of the UI and UX is also open source.

I am curious how you achieved the forward and back icons in the book - have you done that in quizzes?
That is on our list to change the "next page" and "previous page" buttons in quizzes to a next and back arrow.
Average of ratings: Useful (1)
In reply to Tim F

Re: UX /UI Design Improvements

by ahssan moshref -

Hi Tim,

my apology for replying this late. There was just a lot going on at work. Migrating courses from 2.9 to 3.6 was a nightmare all manual.
Anyways I am back and I just got moodle 3.10 installed on my own server as it was recommended that I do this on the latest version.

The thing is I am a designer by profession. So I look at design first then, programing to accommodate that.
I would love to share the codes. Please give me a few days. It has been a year since I lost looked at it.

Average of ratings: Useful (2)
In reply to ahssan moshref

Re: UX /UI Design Improvements

by ahssan moshref -
Hi Michael,
I have to say there has been a lot of improvements in the new moodle 3.10. I was able to apply the codes in the moodle with some adjustments.
the new site is tokhm.ca and anyone can access it via self registration.

Couple of codes that could still make moodle 3.10 or 3.11 interaction delightful and intuitive are the smooth scroll code and sticky navigation. Even though there is a scroll to-top. It jumps instead of sliding like the hamburger menu:

Here are the codes:

html {
scroll-behavior: smooth;
}


/*sticky navigation*/
[data-region="blocks-column"] {
position: -webkit-sticky;/* Safari */
position: sticky;
top: 100px;
}