I'd still like to point out the issue with checkboxes next to the accounts in the accounts list (see background in screenshot [1]). There is no indication, what are these for (I assume they're for enabling/disabling that account, but average user might not and can get easily confused), so I'd add some kind of information to them, column header might be great, but it would have to be the whole row and that wouldn't look too good IMHO. So probably a tooltip explaining what is it for. Another option is to add a text right next to them, but this would introduce more UI clutter.<div>
<br></div><div>So the tooltip seems to be the best solution. What do you think?</div><div><br></div><div>Marty</div><div><br></div><div><br><div>[1] <a href="http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/select_protocol.png">http://static.davidedmundson.co.uk/accounts-kcm-pics/usability_review_1/select_protocol.png</a></div>
<div><br></div><div><br></div><div class="gmail_quote">2011/2/1 David Edmundson <span dir="ltr"><<a href="mailto:david@davidedmundson.co.uk">david@davidedmundson.co.uk</a>></span><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
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" target="_blank">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" target="_blank">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>> 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><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>><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><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" target="_blank">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>
<br>_______________________________________________<br>
KDE-Telepathy mailing list<br>
<a href="mailto:KDE-Telepathy@kde.org">KDE-Telepathy@kde.org</a><br>
<a href="https://mail.kde.org/mailman/listinfo/kde-telepathy" target="_blank">https://mail.kde.org/mailman/listinfo/kde-telepathy</a><br>
<br></blockquote></div><br></div>