{"id":1893,"date":"2013-01-14T07:29:47","date_gmt":"2013-01-14T11:59:47","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=1893"},"modified":"2015-04-07T16:51:09","modified_gmt":"2015-04-07T21:21:09","slug":"nterface-design","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/","title":{"rendered":"Stop punishing your users and learn some design fundamentals"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1895\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/usability_testing\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg\" data-orig-size=\"500,333\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"usability_testing\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing-300x199.jpeg\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg\" class=\"aligncenter size-full wp-image-1895\" alt=\"usability_testing\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg\" width=\"500\" height=\"333\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg 500w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing-300x199.jpeg 300w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing-160x106.jpeg 160w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing-260x173.jpeg 260w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing-360x239.jpeg 360w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>One thing that never ceases to amaze me is how bad in-house enterprise applications look and behave: clashing color combinations, buttons that don&#8217;t respond to clicks, messy forms, elements that look like links but aren&#8217;t, inconsistent non-standard controls, no user feedback whatsoever, ugly reports, you know the drill. <strong>It&#8217;s even more incredible how the poor users find the courage and patience to put up with those monstrosities<\/strong>.<\/p>\n<p>Commercial applications are not exempt from this, although in lesser degrees, because they&#8217;re usually tested by real users.\u00a0Master of all this is SAP, whose interface and user experience appears to have the sole purpose of making us feel miserable at our jobs. Even their <a href=\"http:\/\/www.perceptualedge.com\/blog\/?p=727\" target=\"_blank\">Business Intelligence product<\/a>, whose intention should be to provide a decent way for looking at data, empowers users to create notoriously ugly and unusable charts:<\/p>\n<p><a href=\"http:\/\/www.perceptualedge.com\/blog\/?p=955\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"1897\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/fig9_sapbwenbo\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo.jpeg\" data-orig-size=\"600,361\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"fig9_sapbwenbo\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo-300x180.jpeg\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo.jpeg\" class=\"aligncenter size-full wp-image-1897\" alt=\"fig9_sapbwenbo\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo.jpeg\" width=\"600\" height=\"361\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo.jpeg 600w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo-300x180.jpeg 300w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo-160x96.jpeg 160w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo-260x156.jpeg 260w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/fig9_sapbwenbo-360x216.jpeg 360w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>This doesn&#8217;t exclude industry darlings like Apple. <a href=\"http:\/\/gizmodo.com\/5819418\/mac-os-x-lion-this-is-not-the-future-we-were-hoping-for\" target=\"_blank\">They also have done their own missteps<\/a>.<\/p>\n<p>The reason behind all this is that most applications are done solely by engineers. Hey! Don&#8217;t get me wrong, I&#8217;m an engineer myself. But I also know \u00e2\u20ac\u201csomewhat\u00e2\u20ac\u201c the limits of my expertise.<\/p>\n<p>With the massive adoption of smartphones and the fierce competition in the different app stores, now we have very well designed applications in the hands of millions. Beauties like <a href=\"http:\/\/vimeo.com\/37254322\" target=\"_blank\">Paper<\/a>, <a href=\"http:\/\/partlycloudy-app.com\/\" target=\"_blank\">Partly Cloudy<\/a>, <a href=\"http:\/\/www.realmacsoftware.com\/clear\/\" target=\"_blank\">Clear<\/a>, Instagram or even the mundane mobile Google Maps. Applications who manage the difficult task of being useful and beautiful at the same time.<\/p>\n<p>Also web apps, like twitter, asana, wunderlist, Gmail and even Facebook are becoming more and more versed in good practices of user interface design. So, as an application developer you have more pressure by the users, or at least some kind of\u00a0responsibility\u00a0to create pleasant and usable applications.<\/p>\n<p>http:\/\/vimeo.com\/51690799<\/p>\n<p>&nbsp;<\/p>\n<p>Nothing beats an engaged user that loves an application which solves a problem for her and it&#8217;s a dream to use at the same time. You&#8217;ll have better bug reports, better testing and better rapport to top management.\u00a0<strong>If your app doesn&#8217;t get someone excited about what it looks like, then you&#8217;re doing something wrong<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Ok, I&#8217;m a software developer. How do I stop punishing my users?<\/h2>\n<h3>Use a framework<\/h3>\n<p>If you&#8217;re developing a web application, user Interface frameworks abound. I particularly like the all-inclusive <a href=\"http:\/\/dojotoolkit.org\/\" target=\"_blank\">Dojo<\/a> and <a href=\"http:\/\/www.sencha.com\/products\/extjs\" target=\"_blank\">Ext JS<\/a>. But you can use other standard ones like <a href=\"http:\/\/jqueryui.com\/\" target=\"_blank\">jQuery UI<\/a>\u00a0or <a href=\"http:\/\/yuilibrary.com\/\" target=\"_blank\">yui<\/a>. Frameworks make your life easier because usually <strong>someone who really knows about design has pre-thought things for you<\/strong>. That doesn&#8217;t mean that these libraries doesn&#8217;t have ux and ui failures (I&#8217;m looking at you, Ext JS grid), but still you&#8217;re better off using them than boldly deciding to develop your own.<\/p>\n<p>If you&#8217;re not keen on using a full blown javascript library for user interface, at least get some help on the static side of things. I \u00e2\u20ac\u201cand everyone else\u00e2\u20ac\u201c am using <a href=\"http:\/\/twitter.github.com\/bootstrap\/\" target=\"_blank\">twitter bootstrap<\/a> at the moment.<\/p>\n<p>&nbsp;<\/p>\n<h3>Hire a designer<\/h3>\n<p>In 2005 I started incorporating designers in all of our development projects. We gave them the specs, the intended audience and our general usability idea. They provided the magic. From that moment onwards, people started telling us that our applications where much easier to use, and even beautiful. They went from &#8220;Meh&#8221; to &#8220;Wow! I love this!&#8221; in weeks. The change was absolutely amazing.<\/p>\n<p>&nbsp;<\/p>\n<h3>Don&#8217;t try to reinvent the wheel<\/h3>\n<p>Get some ideas from the best practices around. Sites like <a href=\"http:\/\/ui-patterns.com\/\" target=\"_blank\">UI-Patterns<\/a> will give you pointers on how to design login screen, error notifications and even forms.\u00a0Copy the best practices and then innovate.<\/p>\n<p>If you&#8217;re designing a Windows client application, you can take ideas from <a href=\"http:\/\/quince.infragistics.com\/\" target=\"_blank\">Quince<\/a>. And please, oh please,\u00a0at least take a look at the\u00a0<a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/aa511258.aspx\" target=\"_blank\">Windows User Experience Guidelines<\/a>. No, you don&#8217;t know everything. You really need to read this.<\/p>\n<p>&nbsp;<\/p>\n<h3>If you cant&#8217; afford a professional usability test, do the &#8220;mom&#8221; test<\/h3>\n<p>Put someone in your family to use your application. You&#8217;ll see how some incredible questions and suggestions emerge from these &#8220;regular users&#8221; sessions.<\/p>\n<p>&nbsp;<\/p>\n<h3>Learn some design sensibility<\/h3>\n<p>This is the toughest part. It will be very hard to convince yourself that you don&#8217;t have <strong>any<\/strong> design skills. But believe me, there are reasons why you ended up as a software developer and not in design school.<\/p>\n<p><a href=\"http:\/\/www.amazon.com\/gp\/product\/B00125MJYM\/ref=as_li_ss_tl?ie=UTF8&amp;tag=text-media-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=B00125MJYM\" target=\"_blank\">The Non-Designer&#8217;s Design Book<\/a> changed my way of approaching design and opened my eyes to the pervasiveness of bad design on the web. An easy to follow book that teaches us engineers the basics about typography, alignment and general good design principles.<\/p>\n<p>Also, I read an entire book on forms and it was a life-changer. If you&#8217;re doing some kind of enterprise application it will surely have a lot of forms. <a href=\"http:\/\/www.amazon.com\/gp\/product\/1558607102\/ref=as_li_ss_tl?ie=UTF8&amp;tag=text-media-20&amp;linkCode=as2&amp;camp=1789&amp;creative=390957&amp;creativeASIN=1558607102\" target=\"_blank\">Forms that Work<\/a> will teach you a couple or a dozen things you never knew or thought about designing usable forms.<\/p>\n<p>I also keep a tab on <a href=\"http:\/\/www.nngroup.com\/articles\/\" target=\"_blank\">Jakob Nielsen&#8217;s usability articles<\/a>. It&#8217;s a great free resource of user experience commentary and the product of years of research on good design principles.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One thing that never ceases to amaze me is how bad in-house enterprise applications look and behave: clashing color combinations, buttons that don&#8217;t respond to clicks, messy forms, elements that look like links but aren&#8217;t, inconsistent non-standard controls, no user feedback whatsoever, ugly reports, you know the drill. It&#8217;s even more incredible how the poor&hellip; <a class=\"more-link\" href=\"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/\">Continue reading <span class=\"screen-reader-text\">Stop punishing your users and learn some design fundamentals<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[174,172,171,331],"tags":[204,197],"class_list":["post-1893","post","type-post","status-publish","format-standard","hentry","category-bestof","category-projectmanagement-en","category-sales","category-software-development-en-en","tag-programming","tag-visualization","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1tlzy-ux","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2224,"url":"https:\/\/www.danielpradilla.info\/blog\/pentaho-is-slow-for-servers-with-too-many-home-directories\/","url_meta":{"origin":1893,"position":0},"title":"Pentaho is slow for servers with too many home directories","author":"Daniel Pradilla","date":"28\/04\/2018","format":false,"excerpt":"Over the course of two years, browsing solutions on our Pentaho 5.4 server became progressively slow. It came to a point in which you had to wait 2-3 minutes to see the list of solutions in the Pentaho User Console. The catalina log didn't say much and we didn't have\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2302,"url":"https:\/\/www.danielpradilla.info\/blog\/aws-lambda-python\/","url_meta":{"origin":1893,"position":1},"title":"10 things I learned while deploying my first python function to AWS Lambda","author":"Daniel Pradilla","date":"04\/01\/2019","format":false,"excerpt":"I spent a few days on and off trying to deploy a Flask REST service to AWS Lambda, just to experience what the cool kids were talking about. These are some of the things I learned along the way: \u00a0 Zappa is the easiest packager\/deployer for python (as of December\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/01\/AWS-Lambda-290x300.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1973,"url":"https:\/\/www.danielpradilla.info\/blog\/improve-sap-business-objects\/","url_meta":{"origin":1893,"position":2},"title":"How to improve your Business Objects charts","author":"Daniel Pradilla","date":"13\/08\/2013","format":false,"excerpt":"Business Objects, SAP's BI platform, is notoriously bad for data visualization. Somehow, it empowers the developers to make all the wrong decisions at the same time and create really ugly and unusable \"dashboards\". Lately, I've seen my share of ugly bobip visualizations, like the one above. Which would seem ok\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"disaster, disguised as a \"dashboard\"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":2425,"url":"https:\/\/www.danielpradilla.info\/blog\/flipasio\/","url_meta":{"origin":1893,"position":3},"title":"Flipasio","author":"Daniel Pradilla","date":"20\/02\/2026","format":false,"excerpt":"My eldest daughter recently discovered the classic LCD calculator trick: type certain numbers, flip it, and make it spell words. She was thrilled to show me, and I was just as excited watching her find that little \"useless\" easter egg that entertained me during way too many hours in classes\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"Screenshot of Flipasio","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2026\/02\/Screenshot-2026-02-20-at-18.08.24.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1912,"url":"https:\/\/www.danielpradilla.info\/blog\/4-tools-to-organize-your-life\/","url_meta":{"origin":1893,"position":4},"title":"4 Tools to organize your life","author":"Daniel Pradilla","date":"04\/02\/2013","format":false,"excerpt":"Very few people manage to establish a fundamentalist separation between their work spaces and their homes. Normally our work follows us home; our shores chase us to work and they both follow us outside. How many times \u00e2\u20ac\u201c for instance\u00e2\u20ac\u201c have we arrived at the office only to find that\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"modern-working-desk-2","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/02\/modern-working-desk-2.jpeg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1884,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-create-better-charts\/","url_meta":{"origin":1893,"position":5},"title":"How to create better charts","author":"Daniel Pradilla","date":"10\/11\/2012","format":false,"excerpt":"We're often tempted to include some kind of accessorizing effect in our charts without knowing that deep down we're making them impossible to interpret and thus ruining their purpose. A typical case is the 3D pie chart. Many people, including executives, have a certain likeness for 3D charts. Somehow they\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/1893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/comments?post=1893"}],"version-history":[{"count":0,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/1893\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/media?parent=1893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/categories?post=1893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/tags?post=1893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}