Here is our reply from the usability guys.<br><br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b class="gmail_sendername">Aurélien Gâteau</b> <span dir="ltr"><<a href="mailto:agateau@kde.org">agateau@kde.org</a>></span><br>
Date: 2011/1/29<br>Subject: [KDE Usability] Re: Usability Questions for KDE Telepathy<br>To: <a href="mailto:kde-usability@kde.org">kde-usability@kde.org</a><br><br><br>Hi,<br>
<br>
I finally took the time to look at your message and screenshots. Thanks<br>
for taking the time to produce detailed screenshots. See my comments below.<br>
[snip]<br>
<div class="im">> We have a wizard for setting up new accounts.<br>
> [1]<br>
> <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/select_protocol.png" target="_blank">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/select_protocol.png</a><br>
><br>
> The second page on here allows us to set up everything you need to set up<br>
> everything 90% of users will need to configure to set up an account<br>
> (username/password normally). This changes per protocol.<br>
> [2]<br>
> <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/configure_jabber.png" target="_blank">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/configure_jabber.png</a><br>
><br>
> From here I made a decision that all advanced settings (that most people<br>
> won't need to change (server addresses, ports, security, etc. ) should be an<br>
> entire page away to 'hide' them from the majority of users who won't care.<br>
> [3]<br>
> <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/configure_jabber_advanced.png" target="_blank">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/configure_jabber_advanced.png</a><br>
><br>
> Some protocols have several tabs of advanced options, others (such as<br>
> Facebook or IRC) have none, and as such have no "advanced button as seen in<br>
> screenshot 2.<br>
><br>
> Issues:<br>
> * Is the 'overuse' of dialogs ok? If not what is a good solution?<br>
<br>
</div>The only problematic dialog here IMO is the "Advanced" dialog. Is it<br>
possible to move its content either as an "Advanced" tab or to place it<br>
below the "Advanced" button, but keep it hidden until the user clicks<br>
this button?<br>
<div class="im"><br>
> * How can we solve the 'large whitespace' issue seen in screenshot 2?<br>
<br>
</div>Do you have code which ensures the content of the list in screenshot 1<br>
is fully visible? That would explain why the wizard dialog is so tall.<br>
<div><div></div><div class="h5">><br>
> ---<br>
><br>
> We're also looking at, and not sure on a good way to do input validation.<br>
><br>
> There are two ways we're currently providing (or wanting to provide)<br>
> feedback on the validation state. We've developed a custom widget which<br>
> shows a star on the right when a field is required and the user hasn't typed<br>
> anything in the field. When the user starts typing, the star becomes a red<br>
> cross. This indicates that the provided value is not valid. When the value<br>
> gets valid, the red cross turns into a green check mark.<br>
><br>
> The second widget to provide feedback to the user would be a red-isch error<br>
> message on top. The idea is (stolen) borrowed from the bluedevil<br>
> configuration dialog. They have the same box on top. This box would appear<br>
> if a user clicks OK and not every value is valid, or somethings else goes<br>
> wrong. With a meaningful error message that is of course.<br>
> Look at the screenshots validation1.png and validation2.png attached to<br>
> actually see the widgets. I know the placement of the validated line edit is<br>
> not OK. It's just there to test. Of course, the text in the feedback widget<br>
> should say something meaningful instead of Creation failed.. We would like<br>
> to know if we are on the right track though, before we start integrating<br>
> these widgets.<br>
><br>
> [4]<br>
> <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/validation1.png" target="_blank">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/validation1.png</a><br>
><br>
> [5]<br>
> <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/validation2.png" target="_blank">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/validation2.png</a><br>
><br>
> The question we would like to ask about validation:<br>
> * Should we even give the user the opportunity to click the OK button if not<br>
> all required values are valid, or should it be grayed out?<br>
<br>
</div></div>Both approaches are valid. As long as the "field validity" indicators<br>
make it obvious that something is missing, I would personally go for<br>
graying out the OK button.<br>
<div class="im"><br>
> * Is it common to show the icons of the validation state on the right,<br>
> inside the line-edit?<br>
><br>
> * Is there any way to improve all of this? We're not really sure about all<br>
> of this<br>
<br>
</div>Using a star to denote a mandatory field is a common UI pattern on the<br>
Web. I think it is a good idea to use it here, but I have two concerns:<br>
<br>
- If the star becomes a red cross as soon as the user starts typing, I<br>
am afraid the user will interpret this change as an indication that he<br>
just made a mistake. I suggest always showing a red star (not the cross,<br>
because it is associated with "error", not with "mandatory") when the<br>
field is empty or wrong and turn it into the green check mark when the<br>
field is OK.<br>
<br>
- The icon looks a bit big inside the line edit. It would probably be<br>
nicer to show the widget on the right of the line edit.<br>
<br>
Your work looks promising, looking forward for it!<br>
<br>
Aurélien<br>
_______________________________________________<br>
kde-usability mailing list<br>
<a href="mailto:kde-usability@kde.org">kde-usability@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/kde-usability" target="_blank">https://mail.kde.org/mailman/listinfo/kde-usability</a><br>
</div><br>