Artikulate (living in KDE Edu) is a pronunciation trainer, which helps in improving and perfecting pronunciation skills. Learners train their pronunciation by recording their own voices and comparing them to native speaker recordings. (in more details it is described here).

The most important screen, is the training screen, and for this screen I am seeking for some design help (here you find explenations of the elements):
http://docs.kde.org/stable/en/kdeedu/artikulate/screen-training-overview.png

As you can see, the current state is that we threw some standard icons on it, arranged them a little bit and got the present result. Although I think we got the number of icons/actions to a good level, I pretty much think that this can be arranged nicer and in a more clever way And for this I am seeking for a nice idea/concept/mockup/set of icons/etc by someone knowing a little bit more about visual design than me

There is also an addon-question: Our GSoC student, Avik, currently works on accustic fingerprints which (in a nutshell) can give the learner a visual representation of the native speaker's recording, the learner's recording, or the difference of both. Here, we would like to add the fingerprint-difference (i.e., a small diagram telling the learner where to improve) to the training screen. Such a plot will look similiar to the following one, but colors could be adapted and we can also do further transformations to let it better fit into the screen design:
https://yellowscrolls.files.wordpress.com/2014/07/mic2.png

Many thanks in advance!

Hi,

first there is a really nice thread about parley, maybe you have some inspiration for the navigation (viewtopic.php?f=285&t=120395&hilit=parley)

A mockup for artikulate:



with a information sidebar (wiktionary data) for student how need visual input.



the app looks simple and I hope you don't need a help to make the lectures. The diagram was the envelop of the sound. I don't know if it works, the idea was to have the lecture accustic fingerprint and when the student has spoke you see the accustic fingerprint from the student and the difference.

Please for the examples, use audio files from wiktionary or any other source without background noise.

Despite the fact that the mockup looks clean and easy to use, I wonder if the diagram is actionable. Can I as a student learn from the histogram? Am I able to compare the mirrored diagrams? Perhaps it makes sense to disassemble the voice into components and show those in separate views. Andreas, you are the expert (or at least you have access to phoneticians).

One problem with the mockup: Close must not be placed at the upper toolbar, if it's used to end the application. Bottom right is the perfect location.

Thanks for your mockup! The design is really very clean and seems to be nice to use, both for a desktop version as for a (future) mobile version.
Regarding the pronunciation learning process, the main tool for a learner is to listen to a native's speaker recording and the fingerprint plot is only a supplementary tool. This is, since it is extremely hard to create reasonable plots for showing differences for pronunciations (which is different to e.g. sing-star, where one can simply compare the pitch values). Nevertheless, the plots themselves can still give some valuable information about where the recordings differ much. So, maybe I would only use the difference plot and also not put the plots too much into the center

Cheers, Andreas

Heiko Tietze wrote:One problem with the mockup: Close must not be placed at the upper toolbar, if it's used to end the application. Bottom right is the perfect location.

It's a regular application window, not a dialog, so no need for a close button in the content. Closing the window with the window controls would work just fine.

Ah, I understood the "Close" button in the meaning of "stop training"
Should such a button be in the content or rather in a dialog?

cordlandwehr wrote:Ah, I understood the "Close" button in the meaning of "stop training"
Should such a button be in the content or rather in a dialog?

What exactly would such a button do?

It would stop the training of the current unit and go back to the welcome screen where other training units can be selected to train (or where the just closed unit can be resumed from).

cordlandwehr wrote:It would stop the training of the current unit and go back to the welcome screen where other training units can be selected to train (or where the just closed unit can be resumed from).

I just installed Artikulate to try things out (warning, prepare for some usability feedback coming your way! ). Since everything happens in the same window, stopping the training would not close anything, so we should use different wording. Maybe "stop training" indeed works. The current "finish training" is okay as well, just "close" sounds like closing a window, which is not what happens.

Ok. some new mockup's

When the audio analysis is only for information, than I'd prevere a exam list as you can see in the mockup's.

Small screens with minimal informations


Big screen with additional information in the sidebar.


At the original input you can say learned and now the user make a rating for his pronunciation. At the next session the old rating could be there in gray and in yellow the new rating for example.

The general layout is looking quite nice! But I think for the leaner controls there are some adjustments necessary: When training a phrase the learner can
* play a native speaker file,
* record their own voice,
* play this recording,
and possibly retry the own recording. Hence, I think there must be three buttons (or I am missing a very clever way that can do it with only two or less
Also, I do not completely understand yet how the workflow is modeled. Let's say, a unit of phrases that a learner wants to learn consists of 20~30 phrases. Then, the learner starts with one, tries it, and sets a score. Is then the next one automatically selected? (At least that is what I understand from the blue background.)
Looking at the typical number of phrases in a unit, there shall also be scrollbars then.

I'm pretty sure that a visual feedback of spoken words helps to find the correct pronunciation. I have the vowel trapezium in mind which could illustrates the difference between BEER, BEAR, and BAIR. But it's rather up to a scientific study to figure out what feedback works for all aspects of the speech. For instance, there are only a few milliseconds that distinguishes plosives, making the German ENDE to ENTE (the timing is very precise and a deviation can be used to configure hearing devices). On the other hand, there are so many phoneticians out there, I think they did a good job and found a solution.

Heiko Tietze wrote:I'm pretty sure that a visual feedback of spoken words helps to find the correct pronunciation. I have the vowel trapezium in mind which could illustrates the difference between BEER, BEAR, and BAIR. But it's rather up to a scientific study to figure out what feedback works for all aspects of the speech. For instance, there are only a few milliseconds that distinguishes plosives, making the German ENDE to ENTE (the timing is very precise and a deviation can be used to configure hearing devices). On the other hand, there are so many phoneticians out there, I think they did a good job and found a solution.

Maybe Peter Grasch can help us here, he is probably more deeply involved in that subject than us.