DEV Community

Cover image for Can You Explain Why This Is or Isn't Good UIDesign?
raddevus
raddevus

Posted on

Can You Explain Why This Is or Isn't Good UIDesign?

Recently a site I use every day to read electronic books changed its format.

It now looks like the following:

Image description

At first that may not look that bad, but please keep in mind that readers are coming to this site for Content.

Now, take a look at this diagram which is the same page but highlighting all the non-content areas.

Image description

Now the user's eyes jump all around the page looking for content.

Scrolling In a Time of No Scrollbars

Scrollbars have been downplayed in recent design, but these designers have now forced the user to scroll even more. It doesn't make sense. This UI Design is creating a bad UX (user experience).

Bottom Right For Next Page

The designers also moved the [Next Page] link from the upper right (which made logical sense) to the lower right of the page. That's not a great location.

Two ToolBars

Previously there was only one toolbar but now there are two taking up even more screen space.

Do You Think This Is Good Design?

Can anyone explain why this is good design? It seems that many sites are moving to this format (less content shown).

Is this simply a marketing ploy to force users to interact more with the page (by forcing them to scroll and move around the page)?

Or, is this just following some new uninformed guide on how to create "better" design?

Possibly it is just change for change's sake. Just new. Not better.

What Do You Think?

What do you think? Do you like this format?

Top comments (3)

Collapse
 
drewknab profile image
Info Comment hidden by post author - thread only accessible via permalink
Drew Knab • • Edited

This is solid mobile-first design.

  • The content is front and center
  • Studies show ample text size and large margins are better for reading
  • Users are statistically more likely to hold a phone in their right hand
  • Users are statistically more likely to hold a tablet in their left hand and manipulate the screen with their right hand
  • The next page button is the most used button in an e-book context
  • Left-to-right language dominant users will have an innate sense that "right go forward"
  • Placing the next page button on the right makes sense as readers are statistically more likely to use their right hand
  • Having a context menu separate from the page navigation reduces accidental contact and makes navigating those menus deliberate while retaining relatively close proximity
Collapse
 
raddevus profile image
raddevus • • Edited

That is a fantastic explanation. Thanks for sharing.
And, that makes sense for mobile devices.

It's completely possible (and easy) to discover if the device is mobile or not : navigator.userAgentData.mobile // returns true if mobile, false otherwise
Those design elements are not helpful on a desktop browser & it is so easy to determine if the device is mobile so is there any reason besides developer/designer laziness that they don't simply implement a better design for the non-mobile (laptop, desktop) browser?

Collapse
 
drewknab profile image
Info Comment hidden by post author - thread only accessible via permalink
Drew Knab • • Edited
  1. Responsive design best practices would just change CSS values based on the viewport size.
  2. It's not a bad design on desktop, you just don't like it.

Some comments have been hidden by the post's author - find out more

Read next

techpulse55 profile image

Copybot AI: The Ultimate Content Generation Tool?

Techpulse -

techpulse55 profile image

Unlocking Copybot AI's Potential: Features, Pricing, and Performance Review

Techpulse -

aaronlangford31 profile image

Lessons Learned from Using Torch Inductor For Inference

Aaron Langford -

ajogseneca profile image

Lab 08 Continuous Integration (CI)

Ajo George -