Secret ingredients to quality software

SSW Foursquare

Rules to Better Interfaces (General Usability Practices) - 34 Rules

If you still need help, visit Website Design and User Experience and book in a consultant.

  1. You won’t know if your interface is any good until it’s actually tested! Test, test, test, nothing can possibly replace that first hand data.


  2. The corner stone of good user interface design is that if your users need instructions, you haven't done a good job. Of course with particularly complex applications there will be exceptions to this rule, but all developers should aim to make your interface as self-evident as possible.

    • There are no surprises
    • There is no need to use help
    • No excuse for RTFM (read the freaking manual)

    Figure: A good interface does not need instructions!

    A good UI is:

    • Intuitive
    • Feels fast e.g. no white screen, threading code
    • Consistent
    • Minimal popups
    • No clutter - not busy
    • Good error handling
    • Easy to customize + apps (aka a platform)
    • Gamification e.g. badges

      ** **

    Suggested reading:

    Figure: Good example - Teamviewer's interface requires very little explanation

    Figure: Good Example - See the fly? (an example of excellent usability) Dutch manufacturers realized that a fly painted on the urinal became a "target" for men using the facility. And the fly is positioned in precisely the right place for minimal spillage or splash back. Clever people those Dutch!

    1. When we see a door, we immediately know that we can open it and go through it
    2. Links in blue and underlined has an affordance of clickability
    3. Buttons can be pressed
    4. Scrollbar moves the document in the window

    Bad Affordance2
    Figure: Bad Example - The affordance of the checkbox makes this UI misleading

    Bad FalseAffordance
    Figure: Bad Example - If this mop sink didn't look so much like a urinal and wasn't right next to the toilet, maybe the sign wouldn't be necessary.

    Bad Affordance3
    Figure: Bad Example – It might not have been a good idea to place a male policeman where the exhaust pipe is.

    Bad Affordance
    Figure: Bad Example - Old MS Word - Because of the UI, people never knew they could use styles e.g. normal, H1, H2

    Good Affordance
    Figure: Good Example - New MS Word - Because of the new ribbon UI, people intuitively know how to use styles

  3. 'Less is more' is the idea that simplicity and clarity lead to good design. The interface design is an attempt to solve the problem of how to communicate clearly.

    How to make a user interface great:

    • Less is more - keep your design as simple and uncluttered as possible
    • Understand the importance of defaults - Aim for 'Next', 'Next', 'Next'
    • Hide advanced options, but make them easy to find!

    Most developers think about user interface last. They spend their time worrying about class design, threading, and system architecture. All this is important, of course. But the user only experiences software on the surface level.

    It might be fantastic under the covers, but if the user interface is not intuitive the user will think the application is just hopeless. If the user interface doesn't afford an easy and simple understanding of how to operate the application, you'll get a lot of unhappy customers and unnecessary support calls.

    Do yourself a favor, take some time to think about UI first.

    Figure: Bad Example - An example of a poor UI

    bad functionaloverload1
    Figure: Bad Example - Functional overload (a programmer probably designed this one)

    bad functionaloverload2
    Figure: Bad Example - Another example of Functional overload

    Figure: Good Example - (the replacement to Hotmail), streamlined functionality and minimal

  4. People rarely read word by word; instead, they scan the page, picking out individual words and sentences that seems more relevant.

    It is important to divide information, not show it all at once. The visual organization of information is vital to legibility. When displaying information or controls, designers need to visually convey:

    1. Information structure
    2. Relation between elements
    3. Importance and relevance of elements

    bad informationscan
    Figure: Bad example - Can you find how to check in?

    good informationscan
    Figure: Good example - What about here? Can you find how to check in?

    Another example of scanning, not reading is visually mapping.

    Bad Mapping
    Figure: Bad Example - Which is the dial that controls the top-right stove?

    Good Mapping
    Figure: Good Example - In this layout, it's easy to see which dial controls which stove

  5. The human brain:

    1. Never searches for OR compares all options
    2. Prefers smaller sets of options (4 or less)
    3. Picks the first option that looks good enough
    4. Prefers a shorter option to a longer one
    5. Makes a compromise between speed and accuracy

    It's important to keep these in mind when making design decisions or presenting data.

    Our visual short term memory has a capacity of 4 items. So options are easier for our brain to digest when presented in sets of 4.

    Figure: Good Example - Blocks of 4 or less menu items are easier for the brain to consume

    Figure: Good Example - A great example of removing complexity

  6. Do you consider optical alignment?

    Optical alignment
    Figure: In the first example, although the text is technically aligned, it does not 'look' it. In the second one, the "V" has been moved into the margin, but the optical alignment is now correct

    Not only relevant in typography, optical alignment can also be used in forms and web.

    bad opticalalignment
    Figure: Bad example - The fields are aligned to the radio buttons, but it doesn't "look" good enough

    good opticalalignment
    Figure: Good example - It seems neater, even though it is no longer technically aligned

  7. bad matrixcol
    Figure: Bad example - Hard to read these columns

    good matrixcol
    Figure: Good example - The whole table has been re-written and is now easier to understand

  8. The search direction of a list should be obvious. When it comes to a multicolumn list, you should always head down instead of across for legibility.

    bad alphanum
    Figure: Bad example - The list columns go across instead of down

    good alphanum
    Figure: Good example - The list is going down

  9. It's OK to use text because it's more natural, but use columns if you need:

    • reordering
    • side by side comparison
    • totals

    Figure: While text looks friendlier, in terms of presenting data it's not the easiest to read

  10. Do you make the homepage as a portal?

    You should put all the useful and current information on the homepage and also make it easy to find your core functions there.

    E.g. Top billing customers for the month and a button under it for adding an invoice.E.g. See the number of bugs counted by the most common.

    Figure: The homepage of TWA is a portal.

    Figure: Adobe's Creative Suite also opens a portal 'homepage'.

  11. One side effect of having busy forms is that it doesn't scale down.

    Each user prefers to have their own resolution. You must check if your controls will fit on the user's screen. Think about on which computers your application will run, and what devices will display it. To be on the safe side, it is advisable to fit your controls on a 1024 x 768px screen. Our projector has that resolution and it may well be used for presenting your application to the client.

    Figure: Bad Example - Form is too large to fit inside 1024x768px resolution

    Figure: Good Example - Form fits inside any screen resolution

    The potential solutions for this problem are:

    1. Reorder and move the controls around on the form.
    2. Implement Tab pages.
    3. Use a wizard type interface, with Next, Back and Finish.
    4. Create multiple forms each containing a subset of the controls.
    5. Create a menu based form where the items are categories that some form controls fall under. Similar to VS. Net's Tools -> Options.
    6. Hide unimportant controls and add the option to show them if necessary

    See Adam Cogan - Microsoft is onto something here from 2012:

    I am amazed how good the split screen is so you can be reading email while continuing to watch that movie. One thing developers need to be aware of when building apps, is to consider the size for the different resolutions in particular when an application is snapped. On the Surface, the snap view divides the screen up into ¼ and ¾, but this will be different on different devices (actually the snap view is always 342 pixels) so you really need to get into responsive designing. For a good user experience, keep the left snap view for reading, not interactive stuff like filling in forms. The great thing for developers is the way you test. With Visual Studio 2012, the emulator simulates the Surface perfectly.

    Figure: The Surface screen allows you to place two apps side by side

  12. Remember to make the "logged in" state clear enough to help the user know the current state.

    Figure: Bad Example on Web form - The user is logged in, but it isn't very clear

    Figure: Good Example on Web form - It's clear that the user is logged in

    Figure: Bad Example on Win form - The user is logged in, but it isn't very clear

    BetterInterface sqlAuditorLogin
    Figure: Good Example on Win form - It's clear that the user is logged in

    Figure: Good Example on Web form - Logged off state


    Figure: Good Example – Metro UI’s new logged in state

  13. Do you log usage?

    So you can see what functions are being used more often (e.g. reports, menu items).

    Plus, you can work out what fields to show on search pages (standard and advanced tabs) and which parameters are being used.

    Figure: Keep track of what terms are searched most often

    You can achieve this with Redgate's Feature Usage Reporting. logusage-smartassembly.png **Figure: Smart Assembly Professional keeps tracks of usage ** logusage-pafortfs.jpg **Figure: PA for TFS **

  14. In agile development; updates, changes and bug fixes happen all the time and an issue that a user encounters today might already is fixed or have a workaround. That is why each page or form should link to a wiki page with any common problems that a user might encounter (and workarounds for them) and planned changes.

    This saves the end user from resorting to crawling the web for solutions.

    From: Tech Support Sent: Wednesday, 27 January 2010 4:31 PM To: Mr Northwind Subject: RE: Issue with lab management hosts

    Hi Mr Northwind

    There was a bug in Beta2 (fixed in upcoming RC release) wherein even if you have no lab artifacts in a host group, it did not allow you to delete host group from a Project collection in Team Foundation Admin Console UI until you delete the host groups explicitly from all the associated team projects.

    1. Run the following commands to project level association (make sure that there are no Lab environments in this Host Group).

    TFSLabConfig.exe DeleteTeamProjectHostGroup /Collection:<CollectionUrl> /teamProject:* /name:"Testing Host"

    1. Delete the host groups from Team Foundation Admin Console UI

    There was a similar issue with the Library shares also, and has been fixed now.

    RegardsTech Support

    From: Mr Northwind Sent: 27 January 2010 10:07 To: Tech Support Subject: Issue with lab management hosts

    I accidentally (on scvmm) created a folder called "Testing" under by All Hosts group. In TFSAC I added the AllHosts\Testing host. This led me to other problems so I tried to remove this host from TFS. Guess what? I can't remove any hosts from TFS at all! Even after I deleted it from SCVMM. The error I get is:

    TF259085: Team Foundation Server could not delete the environment location because the following All Hosts_Testing is currently in use: TeamProjectCollectionhostGroup. Delete the resources at this location, and then try the operation again. (type SoapException)

    I have no idea what this is telling me. Anyone have any ideas?

    Thanks!Mr NorthwindFigure: Bad Example - The user encounters an issue and has to email someone about it

    Figure: Good Example - The 'Wiki...' link in the bottom left, takes the user to a wiki page with common issues and workarounds for this form (e.g. Creating a Project Portal)

  15. Every message box should contain a link to a wiki or KB with more details about the message. In the example of the below error message:

    Figure - Bad Example: User now has to Google to find out how to fix this error

    Figure - Good Example: If you click on the "Get Help..." link on the bottom of the form it will take you to a wiki page with common issues and resolutions

  16. Do you strike-through completed items?

    When you're giving an update on progress on a task list or a schedule, STRIKE OUT the items that have been completed. Not only does it visually explain where you are, it also gives you a great sense of satisfaction...

    Figure: Good Example - Completed items are struck-through

    Figure: Good Example - Completed tasks are struck-through

  17. Do you use the Metro UI when applicable?

    Metro is Microsoft’s UI design guideline.

    From Adam Cogan's blog (

    "We now have devices from phones, tablets, work PCs and servers all with the same Metro (don't tell me to call it Modern UI please) tiled user interface.What that means for users is that they have the same *one* user experience.What that means for developers is that we have the simplest way to build apps that go across these 3 devices."

    Metro Good
    Figure: Good example – adopts the Metro style

    Metro Good2
    Figure: Good example – SSW TIMEPRO has been Metro influenced

  18. Do you provide options for sharing?

    If users want to share information or media, then make it easy for them!

    Some common avenues for sharing are:

    • Facebook
    • Twitter
    • Instagram
    • LinkedIn
    • Google Drive
    • Email
    • SMS / Messages
    • Copy to clipboard

    social networks
    Figure: Good example – Users can easily share media via 6 common avenues and more.

  19. EasySearch
    Figure: Good example - a "search box" makes it easy to find data

    Figure: Good example - the search bar in Windows 8 is now always in the same position, no matter what program or where you are searching for. You can activate Charms in Windows 8 by mousing to the top right corner.


    Figure: Good Example - TFS Preview has an easy to find search box.

  20. Do you know how to use "gamification"?

    "Gamification" is a method of encouraging user participation. Usually, these are a set of incentives such as points or achievement badges that are linked to some other form of redeemable value.

    It originated with Frequent Flyer programs and has crossed over into the software world with the success of Foursquare.

    This concept is being utilized even inVisual Studio.

    microsoft rewards
    Figure: Good Example – Microsoft Rewards gives points when you search on and buy things from the Microsoft Store online and in Windows 10

    stack overflow reputation
    Figure: Good Example – Stack Overflow uses reputation points, awarded by how useful your answer to other user submitted questions were

    gamification timepro
    Figure: Good Example – TimePro uses gamification to encourage users to do their timesheets on time

    sugarlearning leaderboard
    Figure: Good Example – SugarLearning Leaderboard is another good example

    gamification dropbox
    Figure: Good Example – Dropbox rewards its users with extra storage space instead of imaginary points. This is more interesting

  21. Do you encourage experimentation?

    Encourage experimentation to increase comfort:

    • Undo
    • Remember your last state
    • Live preview

    live preview

    Figure: Good example - Office Word uses Live Preview to show what styles look like

  22. While "OK" buttons were the standard convention with operating systems of the past, web applications should use a more user-friendly approach to dialog boxes. Instead of "OK" buttons to confirm an action the users want, it’s more efficient and effective to give them button that is labeled with that specific action.

    Figure: Bad example - web application button labeled as "OK"

    Figure: Good example - button is labeled with the specific action

  23. Do you have a "last taken" option?

    The best apps predict what the user is trying to do from context and does it for them.


    Figure: Good Example – “Use Last Photo Taken” is a simple example from Slack.

    This is generally referred to as an “adaptive system.”

    Smashing magazine has a much more detailed article regarding adaptive systems from 2012 along with advanced examples.

  24. If your page requires permission to be accessed it should provide a button for the user to request it.

    no request permission
    Figure: Bad example - You just don't have access

    request permission
    Figure: Good example – Office 365 has a "Request Access" button

  25. When a user looks at a search result, they expect to see a list of items to look into. If there are no results, don't give them noisy text because it can be taken as a search result. An icon also can be understood as a broken page. Your "no results" page should be clean.

    search result bad list
    Figure: Bad example - The list of "suggestions" is just noise and can confuse the user

    search result bad icon
    Figure: Bad example - Having an icon implies that an error happened which is not the case

    search result good web
    Figure: Good example - Plain and clean screen

    search result good iphone
    Figure: Good example - Plain and clean screen on mobile

    Note: In case the message you're showing is a "pass" or "fail, it is recommended to use an icon as per Do you use icons to enforce the text meaning?

  26. Do you highlight the search term?

    When implementing search on a website, do you know that it is best to highlight the search terms in the page body?

    Search is a common feature in websites, and one you will most likely have to implement at some stage. When search returns a list of items, it is useful to highlight the search terms where they appear in the results.

    2014 08 07 15 48 11 before compressor

    Figure: Search for items with these tags

    2014 08 07 15 47 15 after compressor

    Figure: Search results have their relevant tags highlighted

  27. When you embed a YouTube video it will increase your page size from 500kbs to 1.5Mb or more, depending on how many videos are embedded on the page.

    video embed load time
    Figure: A side by side comparison – everyone wants less requests and a smaller page size

    video embed bad
    Figure: Bad example - Don’t add embed code directly from YouTube. For more details read "A Better Method for Embedding YouTube Videos on your Website"


    Figure: Bad example – The evil HTML code

    There is a clever, lightweight way to embed a YouTube video, which Google itself practices on their Google+ pages which reduce it to 15kbs.All you have to do is, whenever you need to embed a video to a page, add the below tag instead of the YouTube video embed code. (Remember to replace VIDEO_ID with actual ID of the YouTube video)

    <div class="youtube-player" data-id="VIDEO_ID"></div>

    Figure: Good example – The good HTML code

    Note: This script needs to be added at the end of the document:

      /* Light YouTube Embeds by @labnol */
      /* Web: */
      document.addEventListener("DOMContentLoaded", function () {
        var div,
          v = document.getElementsByClassName("youtube-player");
        for (n = 0; n < v.length; n++) {
          div = document.createElement("div");
          div.setAttribute("data-id", v[n];
          div.innerHTML = labnolThumb(v[n];
          div.onclick = labnolIframe;
      function labnolThumb(id) {
        var thumb = '<img src="">',
          play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
      function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "";
        iframe.setAttribute("src", embed.replace("ID",;
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);

    ..and this needs to be added in the CSS:

      .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
      .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
      .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: 0.4s all;
        -moz-transition: 0.4s all;
        transition: 0.4s all;
      .youtube-player img:hover {
        -webkit-filter: brightness(75%);
      .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//") no-repeat;
        cursor: pointer;
  28. When the user is creating or editing data on a webpage, there are 2 buttons and one link you need to provide.

    These three options are:

    • Save (button) - Saves the data and allows the user to keep editing
    • Save and Close (button) - Saves the data and returns to the previous screen
    • Cancel (link) - returns to the previous screen

    2014 11 27 11 45 25 compressor

    Figure: Bad example - only provided Savebutton and Cancellink

    2014 11 27 13 58 48 compressor

    Figure: Good example - CRM 2013 provides a Save button a nd a Save and Close button

    2014 11 27 11 47 40 compressor

    Figure: Better example - SugarLearning provides a Savebutton, a Save and Close button and a Cancellink

    Further Reading:

  29. Do you make your cancel button less obvious?

    To avoid users accidentally cancelling an operation when they thought they where clicking the save button you should always make your cancel button less obvious.

    bad cancel button example
    Bad example: Cancel button looks like a save button

    good example cancel button
    Good example: Cancel button is less obvious

    Which side should the cancel button be on?

    It depends which operating platform your program runs on:

    • Windows - On the right
    • Apple, iOS and Android - On the left
    • Web - Generally on the right

    If you're designing a Web-based application, the decision is harder, but you should probably go with the platform preferred by most of your users. Your server logs will show you the percentage of Windows vs. Mac users for your specific website or intranet. Of course, Windows generally has many more users, so if you can't be bothered to check the logs, then the guideline that will apply to most situations is OK first, Cancel last.

    What do you name your buttons?

    It's often better to name a button to explain what it does, than to use a generic label like "OK". An explicit label serves as "just-in-time help," giving users more confidence in selecting the correct action.

    Make the most commonly selected button the default and highlight it. Except if it's action is particularly dangerous; in those cases, you want users to explicitly select the button rather than accidentally activating it by hitting Enter.

    Further Reading:

  30. Do you show that a record is inactive?

    Make it clear when a record is inactive by reducing it opacity, for example.

    inactive record
    Figure: Good Example - Microsoft Teams clearly shows inactive users

  31. The tone of your application speaks volumes about how users view it. Read this Google documentation on the voice of Android.

    Bad ExampleGood Example
    Keep text as short as possible. Avoid wordy, stilted text.Consult the documentation that came with your phone for further instructions.Read the instructions that came with your phone
    Describe only what the user needs to know and don't provide unnecessary information.Your phone needs to communicate with Google servers to sign in to your account. This may take up to five minutes.Your phone is contacting Google. This can take up to 5 minutes.
    Focus on the user's concern, not technical detailsManually control GPS to prevent other apps from using it.To save power, switch Location mode to Battery saving
    Put the most important thing first77 other people +1’d this, including Larry PageLarry Page and 76 others +1’d this
    Put the user's goal firstTouch Next to complete setup using a Wi-Fi connectionTo finish setup using Wi-Fi, touch Next
    Avoid being confusing or annoyingSorry! Activity MyAppActivity (in application MyApp) is not responding.MyApp isn’t responding. Do you want to close it?

    Words to avoid

    Don't useUse
    cannot, could not, do not, did not will not, you willContractions: can’t, couldn’t, don’t, didn’t, won’t, you’ll, and so on
    okay, okOK
    please, sorry, thank youAttempts at politeness can annoy the user, especially in messages that say something has gone wrong. Exception: In Japanese, “please” is mandatory and imperative verbs should be localized accordingly (turn on -> please turn on).
    fail, failed, negative languageIn general, use positive phrasing (for example, “do” rather than “don’t,” except in cases such as “Don’t show again,” “Can’t connect,” and so on.)
    me, I, my, mineyou, your, yours
    Are you sure? Warning!Tell user the consequence instead, for example, "You’ll lose all photos and media"

    Formatting text

    Use sentence-style capitalization for all UI strings.

    Capitalize all important words in:

    • App names (Calendar, Google Drive)
    • Named features (Android Beam, Face Unlock)
    • Proper nouns (Statue of Liberty, San Francisco Giants)

    Be conservative. Don't capitalize words that aren't part of a formal feature name: Sim card lock, Home screen, not Sim Card Lock, Home Screen.

    Using Periods

    Don't use a period after a single sentence or phrase used in isolation, such as in a toast, label, or notification. Wherever two or more sentences run together, use a period for each sentence.

  32. Numbers - Do you make numbers more readable?

    Remember to use dividers when referring to phone numbers or large sums.

    • $27216
    • Phone: 8583532311

    Bad Example: These number are unwieldy and difficult to read

    • $2,721.65
    • Phone: (858) 353-2311

    Good example: A comma, a dash and some spacing makes these large digits easier to read

    Note: For currency references, different countries use periods in place of commas and vice-versa. E.g. In United States and Australia: 2,367.48 Euros / In France and Brazil: 2.367,48 Euros.

  33. Do you add a spot of color for emphasis?

    When there’s some key words that you really want people to notice, We can add a spot of color for the important word to create emphasis.

    Make parts of the text different colors just like you’d highlight or boldface parts of a sentence. The duo colored text will help emphasize your message. Whenever possible use the brand colors when you do this.

    sswtv signage
    Figure: The TV signage has the important words in red

    quality software tagline
    Figure: See bottom tag line - Don't make the important word “quality software” in red... because you already have red

    quality software tagline grey
    Figure: See bottom tag line - Make the important word “quality software” in red... because you do not have red

    chewing fat bottom text
    Figure: Chewing the Fat bottom text. No red word because it is the title

We open source. Powered by GitHub