Hi there

Maybe some of you has already came across the announce I did some weeks ago about a new KDE Edu software for music education, named Minuet. The motivation, some internal technical details, major features, and a demo video were presented here and here. The goal is to have it released in KDE Applications 2016.04 so that I'm now finished the last bits for move it to KDE review.

I'd be great if you guys from VDG team could give some feedback on how to improve Minuet's UI.

http://sandroandrade.org/content/images/minuet-exercisegrid.png
The above image shows the four major Minuet's UI components: the navigation menu, MIDI player controls, Instrument View, and Exercise Grid.

I'm currently implementing a new view for sheet-music representation as presented in:
http://sandroandrade.org/content/images/minuet-sheetmusic.png

However, I couldn't come up with a nice way to place all five UI components. See the issue right now:
http://sandroandrade.org/content/images/minuet-bad-ui.png

Ideally all UI component should be visible at the same time.

The points I'd currently like to have a help from VDG team are:

1) The navigation menu works fine but currently going back in menu hierarchy is accomplished by pressing 'return', with no visual indication the such a key should be used for that. Any hint or UI pattern to make easier to return to previous menu sections?
2) Any suggestion about the placement of aforementioned UI components so that exercise grid remains easily clickable but we also have a nice view of the keyboard and the sheetmusic?
3) I'm not completely satisfied with the colors used in navigation menu. Any hint?
4) Any other improvement you may indicate?

Thanks in advance,

Hi sandroandrade,

thanks for starting this thread. I'm sure we can help you. Minuet look like it is written in QML so my suggestion would be please look at our HIGs (https://techbase.kde.org/Projects/Usability/HIG). In general we are now improve the HIGs with mobile stuff.

4) Any other improvement you may indicate?
Starting at the HIG you will first have to define a project vision (https://techbase.kde.org/Projects/Usability/HIG/Concept). I started with the video to get an overview what Minuet is used for. It would be awesome to read it in an short project vision. than you have to define your users, .... if you are interested, let us know.

Applications should be simple by default and powerful when needed. So you should start with the simpliest command structure and if you need more, make the structure more complex (https://techbase.kde.org/Projects/Usabi ... _structure). One question could be do you need an toolbar for one element and an menu bar.

You have 5 elements that should be always visible. it it necessary to have all elements available when you navigate, play, ...

the nice thing is when you say mobile is my device is that there you have to be careful with your space. At mobile we have at the left are the global drawer with the Views-by-columns approach navigation (https://techbase.kde.org/Projects/Usabi ... obalDrawer), the main interface and at the right side the context drawer (https://techbase.kde.org/Projects/Usabi ... textDrawer).

1) The navigation menu works fine but currently going back in menu hierarchy is accomplished by pressing 'return', with no visual indication the such a key should be used for that. Any hint or UI pattern to make easier to return to previous menu sections?

Views-by-columns approach as it is now with an breadcrumb on top? or if you don't have the horizontal space an "vertical breadcrumb"

2) Any suggestion about the placement of aforementioned UI components so that exercise grid remains easily clickable but we also have a nice view of the keyboard and the sheetmusic?

maybe a separation of the keyboard with the sheet and the question area.

3) I'm not completely satisfied with the colors used in navigation menu. Any hint?

Use the colors for the selected color scheme cause users would also change there color theme and you can't guaranty that your UI look always good when you have a mix between standard colors and app specific colors.

you see everything at your screen when you want to see everything and have enough space.

game modus where everything else is hide e.g. for smaller screen or if you don't want to disturb with not needed visuals

I'd prefer to have an option to show the main playing area horizontal or vertical separated.

Late reply, sorry. I tried to go more into detail but there wasn't time and probably will not in the next days.

But as a short suggestion let me point to Artikulate (http://user-prompt.com/de/reprise-of-ak ... rtikulate/). Although this posting is from 2014 the work is ongoing. @cordlandwehr was coding on a prototype in Randa that looks pretty much like the mockup. Maybe you could reuse this code. That would have the advantage of similar look and feel for users.

Hi Andreas and Heiko,

First of all, thank you very much for your feedback . I've made some changes at Minuet's UI, mostly regarding the use of Plasma theme's colors, removal of toolbar and statusbar, and the vertical breadcrumb in navigation menu.

This is how it looks now:
http://sandroandrade.org/content/images/new-minuet.png

I'll still make some other UI improvements (after more thoughtfully reading the links you guys provided) but I'd like to move it to KDE review first so that we have enough time for discussing it until KDE Applications 16.04 are released.

It seems we need an icon for Minuet

Cheers,

Hi guys, I made this icon for Minuet following Breeze icons guidelines:

alex-l wrote:Hi guys, I made this icon for Minuet following Breeze icons guidelines:

Awesome ! I loved it, maybe we can try something a bit less colorful though? But it's rocking already

Cheers,
Sandro

Hey guys

Minuet will be landing in KDE-edu repository in next days, after a period of three weeks under revision.
I'm now starting to work on its vision and website.

Do you have any news regarding its icon? The one proposed by alex-l it's already pretty good, I'd only
need you to send me the png files for the different sizes and also the svgz.

Cheers,

Hi Sandro ,
https://share.kde.org/index.php/s/oubrCsHQuhMFPOF
here you can download a zip with the icon for Minuet optimized for some sizes: 16, 22, 32, 48, 64px (for 96 and 144 use the 48px one; for 128 and 256 the 64px one).
I didn't push them to Breeze repo because we (VDG) are currently discussing about which sizes Breeze should cover for app icons (currently it cover only 48px).

alex-l wrote:Hi Sandro ,
https://share.kde.org/index.php/s/oubrCsHQuhMFPOF
here you can download a zip with the icon for Minuet optimized for some sizes: 16, 22, 32, 48, 64px (for 96 and 144 use the 48px one; for 128 and 256 the 64px one).
I didn't push them to Breeze repo because we (VDG) are currently discussing about which sizes Breeze should cover for app icons (currently it cover only 48px).

Thanks a lot alex-l. I've pushed them in minuet repo to be installed in hicolor theme.

sandroandrade wrote:Thanks a lot alex-l. I've pushed them in minuet repo to be installed in hicolor theme.

You are welcome
After a discussion with VDG I update the icons (mostly the 16x16) to be clearer at small sizes. Sorry, you should download it again
https://share.kde.org/index.php/s/0Rno8vrICPFwzvS
As I said at the moment Breeze support only 48x48px for app icons. But the Minuet one seems to be one of the first app icons to get different sizes in Breeze

alex-l wrote:

sandroandrade wrote:Thanks a lot alex-l. I've pushed them in minuet repo to be installed in hicolor theme.

You are welcome
After a discussion with VDG I update the icons (mostly the 16x16) to be clearer at small sizes. Sorry, you should download it again
https://share.kde.org/index.php/s/0Rno8vrICPFwzvS

Done!

As I said at the moment Breeze support only 48x48px for app icons. But the Minuet one seems to be one of the first app icons to get different sizes in Breeze

Nice to hear