Feedback on new client area

[FreeServices]

I agree with @Greenreader9 there.

@Admin

@FreeServices

That’s quite true. But again, it’s also quite a bit obvious, the way ProFreeHost did it:

That design was taken from us.

Well, that’s unfortunate. I knew that they were mostly inspired by InfinityFree but I didn’t know they ripped it off.

[Admin]

OK, I just pushed some changes.

The big one is something that has been asked for a long time: support for dark mode! You can select it from the profile settings.

A few confirmation boxes were broken that are fixed now. Also many of the alert card were redone to make dark mode work.

Finally, what are you thoughts on this design for the account show page:

I have mixed feeling on the tabs but they do make it look clean.

[Greenreader9]

I don’t see those new changes on my iPad (Yes, cache was cleared). I do see this mini error though. The new changes look good, although maybe make the tabs more propínate so they are easily seen.

[Admin]

@Greenreader9

I don’t see those new changes on my iPad (Yes, cache was cleared)

That’s because they are not live yet. That’s a screenshot from a testing branch.

[Greenreader9]

Oh, I figured they were live since you said this:

@Admin

OK, I just pushed some changes.

But it looks good, I think the tabs should be more dominant.

Oh, could you add a “tutorial” to show people around, or would that be too difficult to make??

Edit: The dark mode is good until you see all of the bright white ads. If I use dark mode, I would be inclined to use an ad blocker. I do like how the warnings stand out more in dark mode though.

However, the settings for dark mode seam to be a little hard to get at (And I didn’t even know there was a profile page until now), so maybe send out an email about the changes (once you decide on a client area layout that is) so people are more aware?

[Admin]

@Greenreader9

Oh, could you add a “tutorial” to show people around, or would that be too difficult to make??

What kind of tutorial do you mean? Like the feature tour with the bubbles on pages to show people around?

It might be possible to make, but I would rather have the panel intuitive enough that you don’t need tutorials and guides to know how to use things. It makes sense for some systems where you want to give new users a hand (notably the ones with many functions for power users), but a hosting control panel shouldn’t be in that category.

[Greenreader9]

@Admin

but I would rather have the panel intuitive enough that you don’t need tutorials and guides to know how to use things. It makes sense for some systems where you want to give new users a hand (notably the ones with many functions for power users), but a hosting control panel shouldn’t be in that category.

True. It does seam like a bad idea now

I do still think that the tabs and dark mode settings are a little hidden though. And dark mode has that annoying issue with the ads (That you probably can’t fix anyway)

[MAHOfficial]

For dark and light mode switching, keep an option in the dropdown menu instead of keeping it on the edit profile page. It will look nice that way and also more user-friendly.
Also, using light colors for links and dark background colors for alerts will be nice. Right now i just saw that the background color of success alert message was white.

For client area, that tabbing thing is a good idea.

[Greenreader9]

@MAHOfficial

Right now i just saw that the background color of success alert message was white.

I kind of like it that way, it stands out. The white ads are the issue I have.

@MAHOfficial

For client area, that tabbing thing is a good idea.

Agree

[FreeServices]

Well, I honestly really like it. It looks a lot cleaner with the tabs and the separate “account settings,” and the icons make it a bit easier to navigate.

Although I think that @Greenreader9 is right, there is an issue on smaller screens, the icons (at least i think it’s the icons, this didn’t happen before they were added) make some of the buttons do this:

[cookie1982]

There should be a small menu at the bottom for dark mode
like this:

(that image is from a xf forum)

[alexvf]

Dark Reader — dark theme for every website

[cookie1982]

There IS a dark mode for the client area, so I don’t need that

[Oxy]

for dark mode it is better to use this code

@media (prefers-color-scheme:dark) {

/* some css code */

}

and then it turns on automatically if someone’s OS is set to use dark mode

@Admin

Finally, what are you thoughts on this design for the account show page:

Tabs are likely to be a problem on mobile devices
because it will be small and break strangely
and the finger contact area is small

cards is the best for me because each section breaks individually
and then just scroll down on mobile devices
and there is enough space in each cell for data

[MAHOfficial]

@Oxy

for dark mode it is better to use this code

@media (prefers-color-scheme:dark) {

/* some css code */

}

and then it turns on automatically if someone’s OS is set to use dark mode

Nice, I never knew that, always thought that auto triggering between dark and light mode was done through JS

@Oxy

Tabs are likely to be a problem on mobile devices
because it will be small and break strangely
and the finger contact area is small

Can be done like for mobile users keeping tab in vertical order and for wide screens keeping tabs in horizontal order

That way the user experience won’t be affected but both cards and tabs will look, nice until they are grouped

[Oxy]

@MAHOfficial

Nice, I never knew that

I mentioned it once a long time ago but you probably didn’t notice

I don’t mind if everything is shown and let that page be like a kind of cheat sheet
and then the user can also take a screenshot or print it.

[MAHOfficial]

@Oxy

I mentioned it once a long time ago but you probably didn’t notice

Yes, I didn’t notice

@Oxy

I don’t mind if everything is shown and let that page be like a kind of cheat sheet

If it will be in that style then it will be kind of messy i think. Just like the separate cards for everything before.

[Admin]

@Greenreader9

I do still think that the tabs and dark mode settings are a little hidden though. And dark mode has that annoying issue with the ads (That you probably can’t fix anyway)

The ads are provided by Google. I believe there is some theming possibility with AdSense but I’m not sure if that’s possible within the same ad block. In any case, those only work on the text ads styled by Google, not the banner ads styled by the advertiser.

@MAHOfficial

For dark and light mode switching, keep an option in the dropdown menu instead of keeping it on the edit profile page. It will look nice that way and also more user-friendly.

I was thinking of splitting the Edit Profile screen into more specific sections, and put the language and theme selectors in a section called Panel Preferences or something like that. And put that link in the profile dropdown.

@MAHOfficial

Also, using light colors for links and dark background colors for alerts will be nice. Right now i just saw that the background color of success alert message was white.

True, but the theming support is complicated enough as it is. I’m not a designer, and this is how dark mode was implemented in the design.

@FreeServices

Well, I honestly really like it. It looks a lot cleaner with the tabs and the separate “account settings,” and the icons make it a bit easier to navigate.

Although I think that @Greenreader9 is right, there is an issue on smaller screens, the icons (at least i think it’s the icons, this didn’t happen before they were added) make some of the buttons do this:

I can mix and match of course. Do the redesigned button/settings panel but keep the table cards. That might be the best of both worlds.

[YT_Xaos]

Yes, I love the new client area!