<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/127305/">https://git.reviewboard.kde.org/r/127305/</a>
</td>
</tr>
</table>
<br />
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<p style="margin-top: 0;">On March 19th, 2016, 4:59 a.m. UTC, <b>Heiko Tietze</b> wrote:</p>
<blockquote style="margin-left: 1em; border-left: 2px solid #d0d0d0; padding-left: 10px;">
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Looks good from the usability POV. The selection is easy to change, clearly indicated, and known from websites or mobiles. However, it's adviced against using color as a primary indicator, which is not relevant here because the primary information is conveyed via item background, but color is always a tricky thing. For instance you have to take color impaired people into consideration (~10% have issues with red/green). Be sure to have at least a good contrast between the page background color (blue in the bee theme) and the selection background (green) (color contrast checkers are a lot out there, for example http://snook.ca/technical/colour_contrast/colour.html).</p></pre>
</blockquote>
</blockquote>
<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Thank you for the link to the color contrast checker. I checked that the contrast Text/Item Background is high enough for all themes. Only for the diamond-flower theme the contrast is low, but this theme has a low contrast overall. The "Fluffy Bunny" theme has a pink background providing a low contrast between the wrong answer background an the page background. But I think this case is acceptable, because if a wrong answer is selected also the correct answer is highlighted and for this one, the green/pink contrast is good.</p></pre>
<br />
<p>- Julian</p>
<br />
<p>On March 14th, 2016, 2:37 a.m. UTC, Julian Helfferich wrote:</p>
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: 1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
<div>Review request for KDE Edu and KDE Usability.</div>
<div>By Julian Helfferich.</div>
<p style="color: grey;"><i>Updated March 14, 2016, 2:37 a.m.</i></p>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt;">Repository: </b>
parley
</div>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I have redesigned the Multiple Choice Practice Widget. Instead of QRadioButtons, the new design uses QPushButtons and tweaks their appearance using Qt Style Sheets making sure that the design works with all themes available on Get Hot New Stuff. The results are displayed in the screenshots attached:</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">New design:
In screenshot 1, entry 2 has keyboard focus while the mouse is hovering over entry 5. This uses the Gray theme.
In screenshot 2, the wrong entry 3 was selected. Additionally, the correct entry 2 is highlighted. Here, the Darkness theme is used.
In screenshot 3, the correct entry 3 was selected. Here, the Bees theme is used.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Old design:
Screenshots 4-6 correspond to screenshots 1-3, but using the old design for comparison.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I think, the new approach has some advantages over the old QRadioButton approach.</p>
<ul style="padding: 0;text-rendering: inherit;margin: 0 0 0 1em;line-height: inherit;white-space: normal;">
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Labels 1-5 indicate that entries can be selected by using this numbers as shortcuts.</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Borders around the words instead of underlining the word makes it clearer which entry is selected.</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Black text on light red or light green background is more legible than red/green text.</li>
</ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I have put much thought into this change and while I think the new approach is an improvement, I have also come to appreciate the QRadioButton approach. I am looking forward to hear your thoughts.</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Testing </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Practiced words:</p>
<ul style="padding: 0;text-rendering: inherit;margin: 0 0 0 1em;line-height: inherit;white-space: normal;">
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Selected correct entry</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Selceted wrong entry</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Pressed "Continue"</li>
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;">Pressed "Answer later"</li>
</ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I tested the new design with all backgrounds available with Get Hot New Stuff.</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
<li>src/practice/multiplechoicemodewidget.h <span style="color: grey">(0d0b43c)</span></li>
<li>src/practice/multiplechoicemodewidget.cpp <span style="color: grey">(74b3279)</span></li>
</ul>
<p><a href="https://git.reviewboard.kde.org/r/127305/diff/" style="margin-left: 3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments </h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/1209538e-5838-42cf-9a07-4b1df976f4ee__snapshot1.png">New design: Entry selected, theme Gray</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/63818cda-70a3-4592-865a-6ff59ddef7a8__snapshot2.png">New design: Wrong answer, theme Darkness</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/dbfc2cae-e3bc-4ab8-91c1-b628eca8c6c5__snapshot3.png">New design: Correct answer, theme Bee</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/aa431bf6-7e6f-494d-84c8-e6b610222bca__snapshot4.png">Old design: Entry selected, theme Gray</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/32eeb97b-5730-4fd4-bdd5-1b96168398ae__snapshot5.png">Old design: Wrong answer, theme Darkness</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/eee260f4-4c7d-42d6-a4bf-a62dcc0707b7__snapshot6.png">Old design: Correct answer, theme Bees</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>