SPARK UI Design Guidelines

Below you will find a set of useful tips for designing coaches with SPARK UI.


1.  Provide validation close to the problem

Providing validation feedback as close to the problem as possible can provide better user experience and efficiency.




2.  Limit the amount of content presented at one time

Use tabs to reduce the number of controls that are displayed when the coach first loads.  Or Split large coaches into several smaller coaches with appropriate navigation.



3.  Place buttons in a logical location and order

The order that buttons go in, specifically if there are corresponding pairs (such as ‘previous’ and ‘next’) is important. Ensure the design puts importance on the primary or most important action.



"Delete" button is more prominent than 'Cancel" button

4.  Use short labels on text fields

Labels are not help texts. You should use concise, short and descriptive labels (a word or two) so users can quickly scan it. If additional information, explanation or context is required use help text or a tooltip to do this rather than long rambling labels. Text labels should be easy to read, all caps should not be used, as it becomes difficult to read.



5.  Guidelines on using colors

Colors that are opposite each other on the color wheel are complementary. Complementary colors can be used to draw attention, as they strongly contrast. Analogous colors have low contrast, and can be used to create a fluid and visually appealing design. When using color in text, use two colors that have a high contrast. Colors with low contrast can make the text very difficult to read.





Green and red buttons typically draw the user’s attention as a call to action. Green is more typically associated to a “start” action. Using green as a secondary action can create a false positive paradigm.

Red can be associated to either a “stop” or “start” action. Keep in mind, that using both green and red can create confusion among the users, as they both represent a call to action.

People that suffer from colorblindness have challenges when viewing red and green together.





  • Authors: Courtney Silva, Erick Quintanilla
  • Date Created: March 16, 2017
  • Date Modified: March 27, 2017




Was this article helpful?
0 out of 0 found this helpful