6 Step Program to Creating Better UIs pt. 2

6 Step Program to Creating Better UIs pt. 2


[Part 2 of 2] Part 1 is here


Let’s face it: as software engineers we all suck when creating user interfaces. We studied and worked all our lives to understand complex systems, so we take it for granted that other people will also cope well with complexity. That is simply not true: the complex UIs we create are the main reason why some of our projects have not been successful in the long run.

And the tired lame excuses of not having support or budget for usability are over:

  1. With the recent history of Apple's products, every executive board in the world is aware of the impact of usability in the success of a product - the time is now for usability!
  2. Lean, low-cost usability processes have awesome results - you’ll see how to apply them in this article.


This is the second and concluding part of this article. You can read the first part here, where the initial three steps to creating better UIs can be found. We now continue where we left off with the final 3 steps:


4 - Be Agile

On the closing section of the first part I mentioned agile methodologies and that was no accident. Agile methodologies play a huge role in aligning what users need with what you deliver. The trick in using agile to your advantage is to make users co-responsible for the prioritization of the user stories. It's naturally hard to gather all stories upfront and as new, more important, things get added to the project, less important stuff is dropped.


Agile methodologies will align user needs with what you deliver

Of course there’s a lot more to Agile than what is covered in this article, so if you are still not following it you should get some training or read more about it to put it into practice. At OutSystems we are big evangelists of agile methodologies. In fact we're so much into it we've even named our product the Agile Platform.


With agile, end user feedback is a lot better and more relevant because you make end users stakeholders in the development process and have them actually using the system. And you'll be able to see them using it which brings us to...

5 - Test, Test, Test

Most experts say that watching a usability test is the best way to understand what the worst usability problems in your application are. What I have found is that usability testing is especially useful in helping you come up with awesome little tweaks to fix the identified issues. Lets look at some different forms of usability testing:

Hallway Tests

A hallway usability test is when you grab a person that passes by in the hallway and ask them to try to use the interface you have just created. You give them a task and watch them try to accomplish it. You should ask what they are thinking, and are free to nod and hum as if you were a shrink. What you should not do is help them, explain anything or apologize (be patient, they might take a lot more time or do it in a different way you do): You just want to see what they do on their own, and try to get them to tell you what they are thinking about while doing it.


Cheap Live Usability Tests

Have you ever participated in a live usability test, the ones where a bunch of people are sitting in a room watching a user try to complete some task on a computer in a different room? If you have ever created a user interface, a live usability test is one of the most spectacular things you can watch. And they are simple and cheap to set up. Let me give you a recipe:


Before the test day

  1. Write down some tasks for the users to complete
  2. Invite 3 users to come in one morning (50 minutes each with 10 minutes break in between)
  3. Schedule 2 rooms in your office
  4. Invite developers and stakeholders to watch the tests


During the test

  1. You sit beside the users while they try to do the tasks
  2. You help them think outloud
  3. The tests should be broadcast live to the (other) room where the developers and stakeholders are


After the test

  1. Do a wrap-up meeting with everyone who watched the tests immediately after
  2. Select the top 5 problems
  3. Decide what’s the minimum that could be done to overcome them
  4. After 1 month repeat the process


This will only take you 1 morning each month. If you want the whole recipe on how to conduct these tests, the bible for cheap usability tests is called Rocket Surgery Made Easy - The DIY Guide to Finding and Fixing Usability Problems by Steve Krug (his other book, Don’t Make Me Think is also awesome).  


Through the Looking Glass: Find the worst problems in your applications
(CodeSyntax usability lab)

One of the great side-benefits of these tests is that everyone will agree on the problems, replacing lengthy meetings and heated discussions on what’s important. Solutions - usually inexpensive tweaks - will become obvious to all and the team will be fully aligned and heading in the same direction to create better applications.

6 - Make it Look Good

With all these tricks you should now be able to create interfaces with better usability. But what about making them look good? If you think you have no design skills there’s good news for you: you don’t really need them! The only thing you need is to follow the CRAP design rules:

oly CRAP, Batman!

(And here’s a beginner’s tip regarding alignment: avoid centering stuff unless you are an experienced designer.)


If you think about it, these rules are in line with the location costs explained in the first part of the article: contrast is what makes users eyes jump between attractors. Proximity and alignment is what you’ll use to cluster information. As for repetition, your best bet is to use a style guide to keep consistency - I’ll talk more about that in the next section.

Doing CRAP wrong

If you want to stop creating crappy interfaces and wish to know more about how to apply the CRAP design rules check out The Non-Designer's Design Book, by Robin Williams (the writer, not the Hollywood actor).

Usability in Enterprise Applications

At OutSystems we’ve been helping developers create enterprise web applications for over 10 years, so we know first hand how the importance of usability is underestimated in these enterprise contexts. Yet the OutSystems Agile Platform has often been used to create applications that replace or extend existing high cost projects that were not being used because their user interfaces were too complex.


What’s to the Agile Platform that helped create applications with better UIs?


  1. It provides a higher level language, making developers focus more on the UI and the business problems they need to solve, and less on technical stuff. Traceability, scalability, security and performance optimizations are already handled by the platform, so no extra effort is needed there. One common scenario is using the Agile Platform to create a working prototype to gather feedback and more user stories in just a few days. Only this “prototype is actually the ready for production final application that can keep growing smoothly.


  1. It’s an awesome match for agile methodologies. Because applications built with the OutSystems Agile Platform remain easy to change even as complexity grows, 1 or 2 weeks sprints are very well suited to re-evaluate the backlog with the new user feedback. The included Embedded Change Technology also allows users to give feedback within the running web application, so developers will later be able to see a screenshot of the exact page and content where the user reported the issue from.


  1. It includes a style guide that follows the CRAP design rules and helps reduce UI path costs. For example, when a developer creates a page with a list, the filtering and sorting is done with AJAX to reduce wait costs. In these same list pages, the fields are aligned depending on their data type. The titles of the pages use the user data making for better attractors. A standard navigation menu and a powerful set of rich widgets assures consistency and recollection.


The OutSystems Agile Platform style guide helps create better UIs for enterprise web applications

Because these applications are easy to use, investments in documentation and training costs are greatly reduced and the application adoption greatly increased, resulting in an increased ROI. And as users will be spending less time fighting the user interface, they will have more time to focus on what’s important to make their companies move forward.

Wrap Up

If you aren’t already doing any of the above all this might seem overwhelming. It isn’t. These techniques are pretty simple and the great thing about them is that you can start applying them incrementally:


  1. If you are starting an application collect the user stories upfront;
  2. If you are creating an interface, think about UI path costs and do usability testing;
  3. If you need a project approach, then do it the agile way;
  4. When discussing with users start sketching prototypes;
  5. Whenever looking at an interface think about the CRAP rules;


The important thing is to not procrastinate: once you start following these healthy habits you’ll get hooked on the more harmonious and relaxed life they bring.


And so will your users.