Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Design appears clumsy / too big #7333

Closed
tbsbdr opened this issue Jul 26, 2022 · 1 comment · Fixed by #7363
Closed

New Design appears clumsy / too big #7333

tbsbdr opened this issue Jul 26, 2022 · 1 comment · Fixed by #7363
Assignees

Comments

@tbsbdr
Copy link
Contributor

tbsbdr commented Jul 26, 2022

Reproduce

  1. resize your browser window to 1440x680 px
  2. browser and share files

Problem Description

We received feedback, that the general appearance of the ui is clumsy and/or too big especially on laptop screens.

Target size is

14'' Laptop Display with ~ 1440 x 680 viewport

Problem that arise:

  • limited discoverability, reaching buttons or files needs to much scrolling
  • bad aesthetic: too little whitespace

Expected behaviour

UI must be appealing and useful:

Lets try to adjust those values:

  • decrease standard font size, ex. 14px
  • decrease button-height, ex. 32 px
  • Increase filelist-scrollable area (don't know how.. ) Dont' decrease filerow-height - this will kill whitespace which is essential!
  • use (embed) appealing font ex. Roboto, Nunito etc.

Actual behaviour

limited discoverability and aesthetic.

Comparison

comparison so that we can meet users expectations:

 OnedriveGoogle DriveBoxDropboxownCloud Web
fontsize resourcename14px13px14px14px16px
font familySegoe UI WebRobotoLatoAtlas GroteskSans-Serif
Filerows131310127
Button-height32px36px32 - 40px32px40px
      

Filerows

and general size-comparisons

@kulmann
Copy link
Member

kulmann commented Aug 19, 2022

With #7363 we're switching to:

  • default font size 14px (to be precise: 88% of the configured browser font. at the common default of 16px that results in 14px. browser font size is respected in such a way that we always have 88% of the configured font size).
  • default table row height of 40px (instead of previously 46px)
  • default button height results in ca. 35px (instead of 40px from before)
  • font face "Inter" has been embedded and is used by default

With those modifications we now fit 12 rows on the viewport size mentioned in the issue description. See screenshot attached. We need to investigate if the row height is too small for typical users. Might go back to something like 42px.

Screenshot 2022-08-19 at 19 21 10

EDIT:

Decided to go a little bit up with the row height again (to 42px) so that we can maintain a little bit more whitespace. This fits 11 rows on the viewport size mentioned in the issue description.

Screenshot 2022-08-20 at 13 01 42

@kulmann kulmann self-assigned this Aug 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants