To the user-interface designers and programmers out there: If the unfortunate event happens and you have to show an error message, please make sure the message is actually helpful for identifying the issue. You might think that hiding technical details is user-friendly, but in fact, the opposite is true. Do not make us guess what is wrong, tell us what you know!
You might be afraid that this confuses users who are less tech-savvy. Not necessarily, if you give them a rough idea first (maybe in a more emphasized font) and then continue with the details you have (maybe in a smaller font). I am quite sure users are able to ignore the parts they do not understand, and if they need support, at least the person giving support has something to work with.
Some simple examples:
❌ "Cannot connect to bluetooth device."
❓ "Okay, but why?"
✅ "Cannot connect to bluetooth device 'foo' (maybe it is turned off?): The device does not respond."
❌ "Cannot open file."
❓ "Which file? And again, why?"
✅ "Cannot open file 'testfile.txt' for reading: Permission denied"
❌ "Something went wrong when trying to load the website."
❓ "Again, what's the problem? Is the network interface down? Is the DNS server down? Is the target server itself down? Give me a hint, please!"
✅ "Cannot load the website. Maybe your computer is not connected to the Internet? Details: No route to host (192.168.10.1) when attempting to connect to the DNS server."
This is nothing new. In fact, it is just an adaptation of the top-down writing approach we also use when writing scientific papers, for example: You begin with a rough overview and give increasingly more details later in the text.
But do not omit the details completely!
#usability #userinterfaces #userinterfacedesign #errormessages #programming #writing #technicalwriting
![Screenshot detail of code:
function match_statement(matched, statement){
//get reference id from xero
var id_set = null;
var set_spans = matched.querySelectorAll('.c0 .details span');
if(set_spans.length > 0){
var i;
for(i=0; i < set_spans.length; i++) {
if(id_set=set_spans[i].textContent.match(id_set_regex)){
id_set = id_set[1];
if(id_set){break;}
}
}
}
if(!id_set){return false;}
var id_rec = null;
var rec_spans = statement.querySelectorAll(".statement.no-shadow div.info div.line-details span");
if(rec_spans.length > 0) {
…](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/115/411/534/257/780/940/original/1bf9420c2174d024.png)
