Improving readability and optimize space

Question

I develop simple web applications for my hardware projects but I'm neither a web designer nor a graphic guy. Hence my pages are often awful and not useful.

Let's see an example. Here my page to control my stove remotely:

It's pretty clean, but I don't like at all the upper part. It takes 4 rows:

• title
• stove's state (off, heating up, running, cooling, cleaning, etc...)
• button to toggle the power
• input field to authorize the transmission

Given that I would like to keep all of them, how should I arrange them better in order to:

• optimize the space, leaving more room for the graph below
• avoid the use of popups (i.e. I thought I can ask the PIN after pressing the button, showing a form, like this example)

I tried to place the button on the same line of the PIN field:

but on very tiny devices (like Samsung S20) where saving space is important, it look ugly:

Can you give me an advice about how to improve my page?

UPDATE

After the answer of user fakermaker I want to share my results. For smaller devices I removed the button text:

for larger is still visible:

At the moment I left the PIN input field... when I'll have some spare time I'll try to make it looks even better!

Answer 1

The answer is more or less from my personal experience and isn't based on any researches. My suggestion:

1. Keep the title as it is right now, it's important for user to understand what device is being controlled in the page;
2. Stove's state and toggle button could be merged, meaning that the device's state it self could be a toggle button and this way you wouldn't need a "ON/OFF" button anymore;
3. I wouldn't use an input field for authorization here. It's not very UX friendly - should user enter the pin first and then try to turn on the device? To avoid this confusion I'd rather ask for authorization when the app is turned on, this way you'll also avoid using pop-ups.

You could also save some space by merging time and date rows into one. Also do these fields below could be altered by user? Assuming by the translation of "Ultimo rilevamento" I'd say that they're not, but these fields look like input fields and I'd suggest you using a table to not mislead the user. I've also provided another example for the inspiration from the weather app, this way you could save some space as well.