Development Talk: New web interface design

[Stefan1200]

Currently I work on some improvements of the web interface design. My goal is to make it more usable on mobile devices and a little bit more modern.

First I have to say: I'm still only a programmer, not a designer. But the included web interface stays my work, because I like to know where I have to do changes if I add new features to the bot.

But of course I understand everyone writing to me, that the web interface is not perfect in every case. That is one of the reasons why I started today to improve the web interface design.

I have some screenshots of the new Bot General Settings page for you. One screenshot was created on a normal Windows PC with the Internet Explorer 11 (looks the same in Chrome 40). The other four screenshots are taken on my HTC One M7 Smartphone using the Android Chrome browser. You may realize that the screenshot size is not the same than the viewport size of the browser, in portrait mode the viewport is just 360 x 615 pixel and in landscape mode just 640 x 335 pixel. That's the way how Smartphones zoom the pages to make it readable on a approx 5 inch screen.

Screenshots taken on 2nd February 2015
Firefox 35 on a PC - Bot Log
Firefox 35 on a PC - Login Log

Screenshots taken on 1rd February 2015 (Smartphone screenshots scaled down to 33%)
Smartphone Android Chrome - Portrait Mode - Bot List
Smartphone Android Chrome - Portrait Mode - Function List
Smartphone Android Chrome - Landscape Mode - Bot List
Smartphone Android Chrome - Landscape Mode - Function List

Screenshots taken on 31th January 2015 (Smartphone screenshots scaled down to 25%)
Smartphone Android Chrome - Portrait Mode - Reduced Buttons
Smartphone Android Chrome - Portrait Mode - All Buttons
Smartphone Android Chrome - Landscape Mode - Reduced Buttons
Smartphone Android Chrome - Landscape Mode - All Buttons
Tablet Android Chrome - Portrait Mode
Tablet Android Chrome - Landscape Mode

Screenshots taken on 26th January 2015 (Smartphone screenshots scaled down to 50%)
Chrome 40 on a PC
Smartphone Android Chrome - Portrait Mode - Screenshot 1
Smartphone Android Chrome - Portrait Mode - Screenshot 2
Smartphone Android Chrome - Landscape Mode - Screenshot 1
Smartphone Android Chrome - Landscape Mode - Screenshot 2

Old screenshots taken on 25th January 2015
Internet Explorer 11 on a PC
Smartphone Android Chrome - Screenshot 1
Smartphone Android Chrome - Screenshot 2

Please give me feedback. How you like it? Better than the current released version? Whats good, whats bad?

Edit 26.01.2015: Updated screenshots to show the progress.
Edit 31.01.2015: Updated screenshots to show the reduced display mode.
Edit 01.02.2015: Updated screenshots to show the new tables on small viewports (like Smartphones in portrait mode).
Edit 02.02.2015: Updated screenshots to show the new bot log / login log.

[Stefan1200]

Today I made again a step forward to the new design, look at the five new screenshots in the first post above this one.

The top menu buttons have now a fixed size. The result is a much more cleaner look of the menu bar on smaller resolutions, you see this perfectly on the screenshot Smartphone Android Chrome - Landscape Mode - Screenshot 1.

Another progress is the background color of the form. This makes easy for the eyes to spot the input fields, visible on the screenshot Chrome 40.

Last visible change on this screenshots is the smaller copyright bar at the bottom of the web interface. The total bot count is now only visible on the bot list page. And the copyright line was shortened, which is much better for the small smartphone screens.

Of course there was more changes, but they are not visible on the screenshots.

[MrChicken]

just love that.
very useful !

[Stefan1200]

just love that.
very useful !

Something you like most? Something you don't like?

Whats up with the other 9 people looking at the screenshots, any feedback?

[whvler]

Looks very good, especially the mobile part. Any chance to get a "beta" of the webinterface allready?

[Stefan1200]

Any chance to get a "beta" of the webinterface allready?

No, the most pages are still a mix of the old and new design, some stuff might be broken. This is just a thread to show all of you what's going on and make it possible for you to give me feedback about this.

[Lore]

I prefer clean designs like based on the Bootstrap-Grid. Try it out! It's simple, clean and responsiv!

[Stefan1200]

I prefer clean designs like based on the Bootstrap-Grid. Try it out! It's simple, clean and responsiv!

I don't want to use the Bootstrap-Grid and JQuery.

What do you think looks better, the new design, or the current downloadable one?

[Lore]

What do you think looks better, the new design, or the current downloadable one?

I prefer the new one! It's more structured!

[Stefan1200]

New changes in the last days, you can find six new screenshots in the first post.

If the viewport is too small, only a reduced set of buttons and information will be displayed. If this happens, a new plus sign will be displayed in the top right corner. Clicking on it will show all buttons and information instantly (no request to the server is sent!). Of course you are able to reduce all buttons again to have more space.

Also the first time I used my 10.1" Android Tablet with a 720p display to look at the new web interface design. It's using a much bigger viewport, which is not affected by the reduced display mode. And as you can see on the screenshots, it is not needed, because you can see much more information without scrolling.

Another changes are, that the layout of the language buttons looks better on small screens and the bot stop/reload buttons are now converted into the new design.

Please send me more feedback about the new changes.

[Stefan1200]

Another four screenshots today.

This time my work was about the tables for the bot list and function list. On devices with a very small viewport width (like Smartphones in portrait mode) some columns will be hidden to remain usable without horizontal scrolling.

Of course there was more changes, but they are not visible on the screenshots.

[Flofus]

gibts das auch für ios?

[Stefan1200]

gibts das auch für ios?

Einen HTML 4/5 konformen Browser, der auch CSS und JavaScript versteht? Na, ich hoffe doch.
Sobald das neue Web Interface in die Beta Phase geht, hoffe ich aus der iOS und Windows Phone Fraktion einige Rückmeldungen zu bekommen.
Ich werde das Web Interface nur testen unter:
Windows - Chrome (neuste Version)
Windows - Firefox (neuste Version)
Windows - Internet Explorer 11
Android - Chrome

English:
As soon as the new web interface reach the beta state, I hope to get feedback from iOS and Windows Phone users.
I only do tests for:
Windows - Chrome (newest version)
Windows - Firefox (newest version)
Windows - Internet Explorer 11
Android - Chrome

[Stefan1200]

New two screenshots of the new bot log and login log of the web interface in the first post.

Beside some face lifting, it is now possible to download the log. The downloaded file shows the same like the log file produced by the normal bot without MySQL.

Of course, the content of the log table is too much for a smartphone in Portrait Mode. But I was able to save some space to make it quite usable in landscape mode.

Most pages have now the new design. Just small changes are needed. If they are done, I start with some internal testing.

[eazy-sponsoring.de]

Hallo Stefan das Design sieht super aus wann kommt das den Raus wann wirt das veröfentlicht