UI Full width vs fixed width

Development
1

Hi,

As part of the patternfly patch [1], a full width UI is introduced.

I've attached a couple of screenshots [2] to compare, where fixed is a
limited size of the UI and full is nearly a full screen.
The examples are taken from a full HD resolution.

I'm in mixed feelings about this change, as the main concern is that we now
need to develop, on top of the mobile friendly views, a small resolution
and a large resolution versions of the application.
further, most of the current UI looks off due to too much space in between
objects and a lot of eye scanning between names and actions.

I've went though most of the web applications that I use, and 90% of them
use fixed width, I assume this is mostly in favour to ensure it always
looks the same regardless of minimum resolution.

My suggestion is to keep the current fixed width design, and as part of a
future UI refactoring we could consider changing the width.

What do you think?

Ohad

[1] https://github.com/theforeman/foreman/pull/2137
[2] http://imgur.com/a/pGd55

2

> Hi,
>
> As part of the patternfly patch [1], a full width UI is introduced.
>
> I've attached a couple of screenshots [2] to compare, where fixed is a
> limited size of the UI and full is nearly a full screen.
> The examples are taken from a full HD resolution.
>

I have used both sets (given Katello views are all full width and Foreman
are fixed) and I still prefer the full width. I feel like with fixed width,
especially when using something that is designed to be an application and
not simply a content-delivering web site that I am being cheated of using
my full screen if I want to - which is something that should be considered
here.

If providing a fixed width UI, that is the only option; users have to take
it as is.

If providing a full width UI, the browser allows users to zoom in thus
increase the overall size of elements if they are too small or far apart or
shrink the browser window to fit your desires if it feels too wide. Also,
something to keep in mind, while we should strive for page by page
consistency, ultimately each page should be tuned for the particular
interaction to give users the best experience possible.

For something like the dashboard, the full width allows more widgets to be
seen and potentially monitored at the same time. For tables, you have more
opportunity to display the entirety of long names or icon groupings.

> I'm in mixed feelings about this change, as the main concern is that we
> now need to develop, on top of the mobile friendly views, a small
> resolution and a large resolution versions of the application.
> further, most of the current UI looks off due to too much space in between
> objects and a lot of eye scanning between names and actions.
>

In theory, the library providing the interaction designs (Patternfly)
should be handling this for us through the use of things like media-queries
in the CSS layer. If we feel that they are not, we should contribute to
their community through the mailing list or offering up our own updates
based on what we find through our use and testing of it.

My vote is still full width UI - it may be hard for users to know what they
like without being able to give it a try though.

Eric

··· On Mon, Jul 6, 2015 at 6:49 AM, Ohad Levy wrote:

I’ve went though most of the web applications that I use, and 90% of them
use fixed width, I assume this is mostly in favour to ensure it always
looks the same regardless of minimum resolution.

My suggestion is to keep the current fixed width design, and as part of a
future UI refactoring we could consider changing the width.

What do you think?

Ohad

[1] https://github.com/theforeman/foreman/pull/2137
[2] http://imgur.com/a/pGd55

–
You received this message because you are subscribed to the Google Groups
"foreman-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an
email to foreman-dev+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

–
Eric D. Helms
Red Hat Engineering
Ph.D. Student - North Carolina State University

3

> As part of the patternfly patch [1], a full width UI is introduced.
>
> I've attached a couple of screenshots [2] to compare, where fixed is a
> limited size of the UI and full is nearly a full screen.
> The examples are taken from a full HD resolution.
>
> I'm in mixed feelings about this change, as the main concern is that we now
> need to develop, on top of the mobile friendly views, a small resolution
> and a large resolution versions of the application.
> further, most of the current UI looks off due to too much space in between
> objects and a lot of eye scanning between names and actions.
>
> I've went though most of the web applications that I use, and 90% of them
> use fixed width, I assume this is mostly in favour to ensure it always
> looks the same regardless of minimum resolution.

For me it depends on the page. Those with lots of data (like the hosts
table, dashboard) can benefit from full width, but others lose
readability.

> My suggestion is to keep the current fixed width design, and as part of a
> future UI refactoring we could consider changing the width.

Sadly I don't think you can mix & match full-width vs fixed-width, and
though I'm far from a UI-expert, I agree with your suggestion.

··· On Mon, Jul 06, 2015 at 01:49:54PM +0300, Ohad Levy wrote:

[1] https://github.com/theforeman/foreman/pull/2137
[2] http://imgur.com/a/pGd55

4

If the larger community (which includes downstream Satellite-6) desires consistency, then it would make sense to invest in making patternfly work for the expected use cases. If mobile is one of them, then our contributions would benefit others as well in this area.

A discussion[1] of how to approach the work involved can be had once we're decided on the course of action, right?

[1] Jul 06 10:31:52 <ohadlevy> jb: I personally dislike it because it forces us to change a lot of ui, so merging it before changing the ui will simply look bad

··· ----- Original Message ----- > On Mon, Jul 6, 2015 at 6:49 AM, Ohad Levy wrote: > > > Hi, > > > > As part of the patternfly patch [1], a full width UI is introduced. > > > > I've attached a couple of screenshots [2] to compare, where fixed is a > > limited size of the UI and full is nearly a full screen. > > The examples are taken from a full HD resolution. > > > > I have used both sets (given Katello views are all full width and Foreman > are fixed) and I still prefer the full width. I feel like with fixed width, > especially when using something that is designed to be an application and > not simply a content-delivering web site that I am being cheated of using > my full screen if I want to - which is something that should be considered > here. > > If providing a fixed width UI, that is the only option; users have to take > it as is. > > If providing a full width UI, the browser allows users to zoom in thus > increase the overall size of elements if they are too small or far apart or > shrink the browser window to fit your desires if it feels too wide. Also, > something to keep in mind, while we should strive for page by page > consistency, ultimately each page should be tuned for the particular > interaction to give users the best experience possible. > > For something like the dashboard, the full width allows more widgets to be > seen and potentially monitored at the same time. For tables, you have more > opportunity to display the entirety of long names or icon groupings. > > > > I'm in mixed feelings about this change, as the main concern is that we > > now need to develop, on top of the mobile friendly views, a small > > resolution and a large resolution versions of the application. > > further, most of the current UI looks off due to too much space in between > > objects and a lot of eye scanning between names and actions. > > > > In theory, the library providing the interaction designs (Patternfly) > should be handling this for us through the use of things like media-queries > in the CSS layer. If we feel that they are not, we should contribute to > their community through the mailing list or offering up our own updates > based on what we find through our use and testing of it. > > My vote is still full width UI - it may be hard for users to know what they > like without being able to give it a try though. > > Eric > > > > > > I've went though most of the web applications that I use, and 90% of them > > use fixed width, I assume this is mostly in favour to ensure it always > > looks the same regardless of minimum resolution. > > > > My suggestion is to keep the current fixed width design, and as part of a > > future UI refactoring we could consider changing the width. > > > > What do you think? > > > > Ohad > > > > [1] https://github.com/theforeman/foreman/pull/2137 > > [2] http://imgur.com/a/pGd55 > > > > -- > > You received this message because you are subscribed to the Google Groups > > "foreman-dev" group. > > To unsubscribe from this group and stop receiving emails from it, send an > > email to foreman-dev+unsubscribe@googlegroups.com. > > For more options, visit https://groups.google.com/d/optout. > > > > > > -- > Eric D. Helms > Red Hat Engineering > Ph.D. Student - North Carolina State University > > -- > You received this message because you are subscribed to the Google Groups > "foreman-dev" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to foreman-dev+unsubscribe@googlegroups.com. > For more options, visit https://groups.google.com/d/optout. >
5

Great to see progress on this front. Whilst the Foreman UI is already very
useable, some of the Patternfly possibilities could provide a big boost to
users.

D

6

I agree with much of what is said here. I can say as one of the primary
designers for PatternFly we have been designing for both mobile and desktop
layouts. The PatternFly team has discussed and planned to address the full
width issue. We have a trello card [1] documenting the solution of limiting
the width of the application to 1400px at the widest responsive state. We
are planning on working on the solution for the next PatternFly release
because it is disruptive to the current model. Limiting the width prevents
multiple issues which includes the fragmenting of the UI. Full width
layouts often destroy the information hierarchy which creates challenges
for navigating the UI.

The challenge for Satellite is the design methodologies of Foreman and
Katello are different which means that making a decision one or the other
will need to be modified. I think we can find a middle ground with
PatternFly's multiple responsive states which is limited to 1400 that still
effectively displays the data.

[1] https://trello.com/c/J35sb1nm/55-max-width-container

··· On Monday, July 6, 2015 at 6:49:55 AM UTC-4, ohadlevy wrote: > > Hi, > > As part of the patternfly patch [1], a full width UI is introduced. > > I've attached a couple of screenshots [2] to compare, where fixed is a > limited size of the UI and full is nearly a full screen. > The examples are taken from a full HD resolution. > > I'm in mixed feelings about this change, as the main concern is that we > now need to develop, on top of the mobile friendly views, a small > resolution and a large resolution versions of the application. > further, most of the current UI looks off due to too much space in between > objects and a lot of eye scanning between names and actions. > > I've went though most of the web applications that I use, and 90% of them > use fixed width, I assume this is mostly in favour to ensure it always > looks the same regardless of minimum resolution. > > My suggestion is to keep the current fixed width design, and as part of a > future UI refactoring we could consider changing the width. > > What do you think? > > Ohad > > [1] https://github.com/theforeman/foreman/pull/2137 > [2] http://imgur.com/a/pGd55 >
7

I agree mostly with Ewoud's opinion, some pages look great with
full-width, some don't. Things like the architecture list in foreman or
the gpg keys page in katello don't look very good in full width and I
think are actually harder to use with full width as there aren't enough
columns for the eye to track across the row. Other pages such as the
Hosts and the Dashboard do look much better. That said, the
master-detail mechanism is much better with full page width. I enjoy
using it much more in Katello than I do in foreman, partially for that
reason.

-Justin

··· On 07/06/2015 08:17 AM, Ewoud Kohl van Wijngaarden wrote: > On Mon, Jul 06, 2015 at 01:49:54PM +0300, Ohad Levy wrote: >> As part of the patternfly patch [1], a full width UI is introduced. >> >> I've attached a couple of screenshots [2] to compare, where fixed is a >> limited size of the UI and full is nearly a full screen. >> The examples are taken from a full HD resolution. >> >> I'm in mixed feelings about this change, as the main concern is that we now >> need to develop, on top of the mobile friendly views, a small resolution >> and a large resolution versions of the application. >> further, most of the current UI looks off due to too much space in between >> objects and a lot of eye scanning between names and actions. >> >> I've went though most of the web applications that I use, and 90% of them >> use fixed width, I assume this is mostly in favour to ensure it always >> looks the same regardless of minimum resolution. > For me it depends on the page. Those with lots of data (like the hosts > table, dashboard) can benefit from full width, but others lose > readability. > >> My suggestion is to keep the current fixed width design, and as part of a >> future UI refactoring we could consider changing the width. > Sadly I don't think you can mix & match full-width vs fixed-width, and > though I'm far from a UI-expert, I agree with your suggestion. > >> [1] https://github.com/theforeman/foreman/pull/2137 >> [2] http://imgur.com/a/pGd55