DELIVERING GREAT APPS

Usability Rules
for IT Developers
 Delivering Great Apps:
11 Usability Rules for IT Developers

Whats Usability? In Search of The Great App

Building a great application is a task that Understanding that a shiny new enterprise web application is not much use
involves many different concepts which if employees refuse to adopt it, we are happy to share what we have learned
Usability Visual
are a bit overwhelming to grasp all at Design regarding usability. Our emphasis is on helping engineers and developers
once. One concept that is sometimes deliver Great Apps from the moment they start developing new solutions for
misunderstood is User Experience, or UX. their businesses.
Put simply, the main goal of UX is to make Context
sure users have a delightful experience To do that, there are some usability principles all developers need to know in
while using a product. order to understand what makes an app great!

A key component of good UX is usability. While UX is concerned with the This book is about the 11 Usability Rules for IT Developers that we have
generic goal of delighting the user, usability is focused on making sure users identified and integrated into the OutSystems Platform.
can complete their tasks as efficiently as possible. This is far from the
traditional IT goals of making an application more reliable and faster two They all come down to understanding USABILITY.
other characteristics of a great application.

So, why is usability so important today?

Increased user adoption: Usable apps are faster and more gratifying to USABILITY noun /juzblti/
learn because they help users instead of getting in the way.
The ease of use and learnability of a human-made object.
Decreased user effort: Usable apps require less brain power to use, The object of use can be asoftware application, website, book,
allowing users to focus their processing resources on business.
tool, machine, process, or anything a human interacts with.

Increased user speed: Usable apps help users perform their common
tasks faster, while at the same time decreasing the number of mistakes
they make.
 Delivering Great Apps:
11 Usability Rules for IT Developers

#1 #2

{ Know Your Users } { Write for Clarity }

A great application helps users succeed in the easiest and fastest way Text is a big part of your user interface, and you need to lay it out for
possible. usability. The words you use must clearly communicate what the user
is looking at, and what will happen when theres interaction. This
There are 3 things a developer needs to know about users: applies to all written elements, including section and page titles,
labels, links, buttons, and feedback messages. Well crafted text
How users speak: The application needs to speak the same eliminates surprises and uncertainty from the application, and is a
language and use the same terms as its users. mandatory step for usability.

What motivates usage: The application needs to keep users

motivated and help them achieve their goals.

Common tasks: The application needs to excel in helping users Not so good... Better
complete repetitive tasks quickly and easily.

Submit Save Customer

click click
<!-- KNA1 List Customers List

Using tech lingo is a common mistake made by developers. This can lead Record Saved Customer Acme saved successfully

to misunderstandings and user errors. Transaction and Wallpaper

are examples of words that have different meanings for developers or
KNA1 is the Customer Master Table in SAP
for someone working in the stock market

-->
 Delivering Great Apps:
11 Usability Rules for IT Developers

#3 #4

{ Design with Data } { Group Related Info }

Data is the main asset of an enterprise application. Displaying it in the Grouping related data makes it easier for users to find what they need.
most effective way without needless distractions is a mandatory step Grouping is particularly effective when used with emphasis.
to building a great app. Conversely, unrelated items should be separated. The best way to
make things stand apart is to put empty space between them. Avoid
Beware that in most situations the best way to show information only using lines or boxes for grouping.
surfaces when you experiment with real user data. Designing user
experiences with lorem ipsum quotes and images of cats will surely
lead to poor results.

Name: Customer1
Johnny B. Goode [email protected]
Email: sampleEmail Sarah Wilco [email protected]
Phone: 12345678
Address: Somewhere By using real user
data, it becomes
obvious that the
labels are clutter
Johnny B. Goode Johnny B. Goode Sarah Wilco
[email protected] [email protected] [email protected]
555-332-221
5901 Peachtree Dunwoody, GA 30328
 Delivering Great Apps:
11 Usability Rules for IT Developers

#5 #6

{ Emphasize What Matters } { Remove Clutter }

Everything you place on screen demands your users attention, so Every element on a screen is competing for a users attention,
decide what the user must see first. This is particularly important regardless of being content or decorative. If something doesnt add
because users dont read pages, they scan through them. Be sure to value to what is on the screen it should be removed.
direct them to the things that matter. To call users attention you can
use things like position, size, color, images, links, or buttons. Likewise, you could put all information on the page inside boxes, but
are those lines really necessary? The trick is to be sure everything on
the screen is there for a reason, and theres nothing else you can
remove.

Johnny B. Goode Emphasizing makes it

[email protected] Id Date Amount Accumulated Created On
easier to find what
555-332-221 1323 2012-02-24 $12,000 $246,000 2012-02-24
5901 Peachtree Dunwoody, GA 30328 matters. Note that whats
relevant depends on the 2122 2012-02-23 $10,000 $234,000 2012-02-24

user: for a mechanic, the

license plate is the key
Johnny B. Goode
information for a car. But
for the insurance agent, Date Amount Accumulated
[email protected]
555-332-221 its the policy number. 2012-02-24 $12,000 $246,000
5901 Peachtree Dunwoody, GA 30328 2012-02-23 $10,000 $234,000
 Delivering Great Apps:
11 Usability Rules for IT Developers

#7 #8

{ Align for Readability } { Minimize User Inputs }

Its very hard to scan and read information on applications with poorly Typing information into an enterprise application is painful, so ask for
aligned content. It doesnt matter if its a set of fields, a chart, a block of as little input as possible. Whenever possible, guess instead of asking.
text; information must be positioned with a purpose. Together with
grouping and emphasis, alignment plays a key role in making If users need to input information, make it completely obvious about
information easier to scan and read. what is needed, be tolerant on the input formats you accept, and be
helpful when something goes wrong.

Phone: Phone: ( )- -
Not so good... Better
Set user expectations about what is needed.

Transaction Details Transaction Details

Phone: 555326713 Phone: 555326713
Date: 2013-02-23 Date: 2013-02-23
Invalid input
Amount: $10,000 Amount: $10,000
Notes: Payment related to 34 Notes: Payment related to 34 Be tolerant. Accept how users choose to input data.
units sold in January units sold in January

Phone: (411)-231-112 Phone: (411)-231-112

Invalid input 411 is a reserved
area code

Be helpful - explain what went wrong.

 Delivering Great Apps:
11 Usability Rules for IT Developers

#9 #10

{ Build Effective Navigation } { Be Consistent }

In a great application, users know where they are, how to get where Great applications provide a consistent and predictable user
they want to be, and whats available to them. experience. By using the same visual clues, positions, or lexicon it
becomes obvious to a user what will happen next. It also makes it
To build great navigation, you need to write the menu entries in user easier for users to find what they are looking for.
language, emphasize whats important, be clear about the destination
of the menu entries, and use navigation consistently throughout the For instance, it doesnt matter much if the Cancel operation is a link
application. Dont forget to highlight where your user is, since every or a button, only make its representation consistent. Being consistent
page on a web application is a potential entry page. with outside conventions whether from other applications or the
users context is also a must. Vocabulary is a good example of a place
where you should invest a lot of consistency.

Accounts Contacts Opportunities

Use the users language for navigation, and

highlight where the user currently is.

myCRM Reports Marketing Lead Status

If your application has many hierarchical levels,

breadcrumbs are a good way to show where your user
is. Breadcrumbs are a complement to menus, and are not All these buttons belong to the same application.
to be used by themselves. Note the inconsistency on the shape, color, icons, and text!
 Delivering Great Apps:
11 Usability Rules for IT Developers

#11 UX {for:IT} Toolkit

{ Test, Test, Test } In order to deliver great enterprise applications, you need to invest in great
UX. At OutSystems we believe that IT is the starting point of usability, and that
even small steps towards usable apps can bring big benefits. To help you get
started, we built this UX Toolkit with everything you need to build your first
You can follow all the rules in the UX book, but youll still be surprised
highly usable app.
at how fast your application will fail in the hands of your users. The only
way to ensure success is to user test your application. The top 3 rules
11 Usability Rules for IT Developers
for successful testing are:
An eBook of core Usability principles developers
should remember when building applications
Make testing as simple and cheap as possible, with great UX
or else the tests will never get done.
Vision Document Template
Test as soon as possible. Remember youll need A tool that facilitates team understanding of an
time to fix the problems and re-test. application development project. Teams may
collaborate with users to reach a common vision
Make the team watch the tests, its the best,
fastest way to get buy-in on the top issues to fix. UX Checklist
An easy to use checklist for aligning the build
process to best practices

Steve Krugs Rocket Surgery Made

Easy gives very pragmatic and
straight to the point advice on how DOWNLOAD THE KIT HERE
to make simple and cheap usability
tests for your enterprise applications
Share the Toolkit!