Good aesthetics can mask poor usability. People feel better about the design and therefore are more likely to forgive poor usability decisions. Excellent usability decisions that aren't as appealing can be perceived as hard to use, even when they actually aren't. Balancing user expectations of what is good vs what actually is good can be extremely complex.
An example in the current Moodle 4.x design is the course width. Content width is generally easier to read and a massive accessibility win at a max of about 80 characters per line, hence the narrower content on course pages than previous versions. Many people, including myself, prefer more of the screen to be filled for aesthetic reasons. The solution for me at least was to work with learners with reading difficulties and realise that I was intentionally designing content they found hard to use.
The Moodle 4 design fixes the central panel using pixel values rather than, say, percentage, which leads to massive issues if the site uses a background, for example, and the user had a very large-resolution screen or is presenting the contents of a Page, Book or even the course page itself, using a projector and a wall screen.
When editing activities we might need the familiar wider screens too, I believe.
I also found the changeable widths of the central panel on the various types of admin, view and report pages extremely jerky and distractive, so on our site I've standardized everything to just two width dimensions actually given in percentages. At least several of "my" teacher users were relieved after I did that.
BW.
However, reading content ideally should be accessible and no more than around 80 characters. I went through the process of making our content wider because it looked better, then later conducting ab testing on wider vs narrower, realising that the narrower pages resulted in better outcomes for all our learners, not just the neuro-divergent ones. We now enforce the 4.x standard page width for course and resource pages.
Another great example is the scroll of death. This is basically nonsense. It's a carry over from the print media 'before the fold'. But you only have to look at all social media with infinite scrolling to realise that scrolling is not in of itself the problem.
The actual problem is the ability to locate what is important in a course for the learners and poorly designed courses with lots of content give the appearance of the scroll of death being real. Jamming everything tighter together gives the illusion of fixing the problem, but makes it less accessible for learners with reading difficulties.
The solution is better course design.
I have been on record in other posts of not especially liking the new 4.x course navigation and my teachers and devopers felt similar. My learners quicky adapted and love it. It was only when I was doing a course with another provider that I realised how good it actually was when accessing a course as a learner. Our new courses are getting both better feedback and better results now we've embraced it.
On the original question, every design decision is a balance between asthetic and usability. Complexity is ususally introduced by pages where there at a lot of competing elements all of which are important (gradebook), or there are a very wide and disparate number of use cases for a flexible use case (course page). Probably the most common mistake is people designing for a system they know too well and assuming users have knowledge that they may not have. When ever possible I'd recommend getting someone who has never seen or used the system before to test a design, even on complex tasks, as too often we design for experienced users.
I guess because of my experience as a professional web developer since the late 90's I wasn't too bothered by the size 4.0 course cards. Moodle gave me the tools to tweak them and they looked great out of the box with a short course anyway.
For me, as long as the underlying class/id structure of the elements and the CSS was solid I can do what I need. For me this is where the 4.0 cards were weakest and my hope was that the redevelopment would use either the flex or grid system which I was excited to see was the case. The 4.3 design is graat and props to your team on it. Really looking forward to the proposed 4.4 changes too.
There are still oddities in the Boost CSS. I suspect a lot is just because it was inherited from older versions. One springs to mind is the <h1 class="h2"> that Ive seen in 4.x (haven't looked in 4.3). I keep thinking I should make some time to learn the intricacies of Moodle development and submit patches for these things, but time is not something I presently have in abundance!
This scenario is a common challenge in user interface (UI) design, where striking the right balance between aesthetics and usability can be complex.
Scenario: High-End Fashion E-commerce Website
Challenge: Imagine you're designing a UI for a high-end fashion e-commerce website. The client wants the website to embody luxury and exclusivity, which calls for a sophisticated and aesthetically-driven design. However, this can potentially conflict with usability principles. For example, an elegant, minimalistic design might use unconventional navigation layouts or subdued color contrasts, which can confuse users or make it difficult for them to find what they're looking for.
Resolving the Dilemma:
User Research & Empathy: Begin by understanding your target audience. High-end fashion shoppers may value a unique browsing experience, but they also need to find and purchase products efficiently. Conduct user interviews, surveys, and usability tests to gather insights.
Prioritize Core Functionalities: Identify the key functionalities that users engage with most (like product search, viewing items, and checkout) and ensure these are easily accessible. Balancing aesthetics with these core functionalities is crucial.
Iterative Design Process: Use an iterative design process. Start with a design that leans more towards aesthetic appeal. Then, through iterative testing, gradually adjust the design to improve usability based on user feedback and usability testing results.
Accessible Design: Ensure that the design adheres to accessibility standards. This not only improves usability for all users but can also enhance the overall aesthetic through a clean, well-structured layout.
Aesthetic Usability Effect: Leverage the aesthetic-usability effect, where a more aesthetically pleasing design is perceived as easier to use. This doesn’t mean compromising on actual usability but using aesthetics to create a positive initial perception.
Consistency and Familiarity: Use familiar UI elements (like recognizable shopping cart icons, search bars) in your unique design. This offers a sense of familiarity amidst the novel aesthetic experience.
Feedback and Adaptation: After launch, continuously gather user feedback and adapt the design accordingly. A/B testing can be particularly useful in understanding what works best for both aesthetics and usability.
Collaboration with Stakeholders: Work closely with stakeholders (like the client and development team) to ensure that the aesthetic vision aligns with usability goals. Compromises may be necessary, but they should be informed by user needs and business objectives.
In summary, resolving the trade-off between aesthetics and usability involves a deep understanding of user needs, a focus on core functionalities, iterative design and testing, adherence to accessibility standards, and effective collaboration with stakeholders. Balancing these aspects leads to a UI design that is both visually appealing and functionally efficient.