1

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:

enter image description here

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:

enter image description here

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

enter image description here

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:

enter image description here

for larger is still visible:

enter image description here

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!

2
  • There is typo in the first picture: of course the last field is "Ora" (Time)
    – Mark
    Feb 15 at 12:13
  • Your edit looks good but I'd swap the name of the label with the information. So instead of "<date> Data" I'd make it "Data <date>". People tend to read in this order. The example fakermaker gave you has the icons on a seperate line above the data so that's why it works there. Feb 16 at 12:38

1 Answer 1

2

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.

enter image description here

5
  • Very good points thanks! Yes, you're right the fields of the last sample are not editable.
    – Mark
    Feb 15 at 13:18
  • About the button and the stove's state: there are more than two states (i.e. off, heating up, running, cooling, cleaning, etc...). So I don't think I can just get rid of the separate label.
    – Mark
    Feb 15 at 13:20
  • I updated the question to show you the results. It may not be perfect but I like it much better now!
    – Mark
    Feb 16 at 7:11
  • Sorry for not responding for a long time, just out of curiosity, why you wouldn't allow user to enter pin when opening the application? From my perspective it would look much cleaner and more understandable :) By the way, it looks better now, but for larger screens I would put all gadgets in one line.
    – fakermaker
    Feb 18 at 0:47
  • 1
    Yeah, I'm going to put the gadgets in one line for larger screen, you're right! About the PIN... because I'm the end-user (it's my stove) and I don't have enough spare time to change the behavior now. But this simple exercise was very useful to improve my knowledge!
    – Mark
    Feb 18 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.