The source content for blog.juliobiason.me
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

113 lines
4.0 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsiveness on mobile devices-->
<!-- viewport-fit=cover is to support iPhone X rounded corners and notch in landscape-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">
<title>Julio Biason .Me 4.3</title>
<!-- CSS -->
<link rel="stylesheet" href="https://blog.juliobiason.me/print.css" media="print">
<link rel="stylesheet" href="https://blog.juliobiason.me/poole.css">
<link rel="stylesheet" href="https://blog.juliobiason.me/hyde.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
</head>
<body class=" ">
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<a href="https:&#x2F;&#x2F;blog.juliobiason.me"><h1>Julio Biason .Me 4.3</h1></a>
<p class="lead">Old school dev living in a 2.0 dev world</p>
</div>
<ul class="sidebar-nav">
<li class="sidebar-nav-item"><a href="&#x2F;">English</a></li>
<li class="sidebar-nav-item"><a href="&#x2F;pt">Português</a></li>
<li class="sidebar-nav-item"><a href="&#x2F;tags">Tags (EN)</a></li>
<li class="sidebar-nav-item"><a href="&#x2F;pt&#x2F;tags">Tags (PT)</a></li>
</ul>
</div>
</div>
<div class="content container">
<div class="post">
<h1 class="post-title">Things I Learnt The Hard Way - Be Transparent With The User</h1>
<span class="post-date">
2019-07-31
<a href="https://blog.juliobiason.me/tags/books/">#books</a>
<a href="https://blog.juliobiason.me/tags/things-i-learnt/">#things i learnt</a>
<a href="https://blog.juliobiason.me/tags/ux/">#ux</a>
<a href="https://blog.juliobiason.me/tags/ui/">#ui</a>
</span>
<p>Since we are talking about <a href="/books/things-i-learnt/log-events">logging</a>,
another thing you must do is to be transparent with the user in your user
interface.</p>
<span id="continue-reading"></span>
<p>And by &quot;be transparent&quot;, I meant that your website/mobile app needs to point
out to the user that the webserver is down instead of saying to the user to
check their internet connection; your application <em>is</em> getting something from
the webserver, so you <em>can</em> say &quot;Oops, something wrong on our side&quot;.</p>
<p>Another example: If you need to check a bunch of data before saying &quot;It's
done&quot;, add a counter to show the user that the application is doing something.
<a href="https://joplinapp.org/">Joplin</a>, when syncing data with a webdav server,
needs to check a bunch of files; one version would simply sit still with a
spinner on &quot;Syncing&quot; and nothing more; when they added a counter, I could
easily see that there was something going on.</p>
<p>Those small details, for as bad as they may make you look, will win points
with the user in the long run.</p>
<div>
<div style="float:left">
&lt;&lt; <a href="&#x2F;books&#x2F;things-i-learnt&#x2F;log-events">Logs Are For Events, Not User Interface</a>
</div>
&nbsp;
<div style="float:right">
<a href="&#x2F;books&#x2F;things-i-learnt&#x2F;add-then-remove">One Version To Add, One Version To Remove</a> &gt;&gt;
</div>
</div>
</div>
</div>
</body>
</html>