Test Page

BUTTONS TEST

In order to test these, the font colour had to be changed so it was visible when it ran off the button. These are only test buttons and will not work when clicked.

WIDTH ONLY

These are the width settings tests below. Findings:

  • Using a width setting allows for standard sized buttons. Not using a width setting makes all the buttons a different width, which is not aesthetically pleasing.
  • The current standard width setting on this website is 75%.
  • 75% width is aesthetically pleasing on a computer, appears more like a button if it doesn’t consume the whole screen width.
  • 100% width allows for more text space and is more aesthetically pleasing on a mobile device as screen width is less important than vertical space used for a button.

USING 100% WIDTH, WRAPPING THE TEXT MANUALLY USING MY MOBILE DEVICE AS A GUIDE

Findings:

  • A possible solution.
  • Wrapping a text to fit a mobile device screen is not completely aesthetically pleasing on a computer screen, however if you look at any other button anywhere else on the web page with both devices you will notice the opposite: wrapping the text to fit a computer screen sized button leads to run-off of the text on a mobile button.
  • Will require other feedback to know if this appears fixed universally on mobile devices other than my own.
  • I included two samples where I changed the shape of the edges. Buttons don’t need to be rounded, and on a mobile device, too curvy of edges creates problems.

USING 75% WIDTH, WRAPPING THE TEXT MANUALLY USING MY MOBILE DEVICE AS A GUIDE

Findings:

  • A possible solution.
  • Will require other feedback to know if this appears fixed universally on mobile devices other than my own.
  • I included two samples where I changed the shape of the edges. Buttons don’t need to be rounded, and on a mobile device, too curvy of edges creates problems.

CHANGING THE BUTTON TEXT SIZE AS A SOLUTION INSTEAD

Findings:

  • A possible solution.
  • Changing text size will still require one of these other above solutions in tandem. It won’t work on its own.
  • This makes the text on the site not uniform, and button text will be different button to button depending on need.
  • Older adults would be more disadvantaged from this solution as it decreases font size and readability.

USING COLUMNS TO MINIMIZE THE TEXT THAT APPEARS IN THE BUTTON

Findings:

  • Incredibly difficult to aign the culumn and the button (shouldn’t be but it is); the button vertical level in the column is fixed and thus it cannot be centred to the text.
  • Possibly need to be creative to show the text and button are linked to one another.
  • Buttons don’t even appear in columns with text on mobile devices anyways. So the utility of this method is questionable.

This is a button appearance test.
This button’s settings: text
in button minimized, width to 75%, no
button corner settings used
to reshape the button, columns used to indicate that the button belongs to the text. This is a long text example. This is to show the vertical height that the button sets itself to for this amount of text.


This is the short text example. This is to show the vertical height that the button sets itself to for this amount of text.


Very short text example


One creative method to show the text and button are linked. Again aligning these is near impossible sometimes.

To view another way to do columns with the button underneath the text, see this page already on the website (again aligning the buttons per row on a computer screen is impossible, but it looks OK on a mobile device): The Literature – BetterLTC

css.php